/* ============================================================
   AWENSO 2.0 — style.css
   Mobile-first. Ciemny hero i cennik → jasna sekcja treści →
   ciemna stopka, która domyka pętlę z powrotem do hero.
   ============================================================ */

/* --- 1. TOKENY ---------------------------------------------------- */
:root {
    /* ciemna strefa */
    --ink:        #090A11;
    --ink-2:      #0F111B;
    --ink-3:      #161927;
    --ink-4:      #1E2233;
    --bone:       #EFEDE8;
    --slate:      #949AB4;
    --slate-dim:  #666C86;

    /* marka */
    --violet:     #6B2BFF;
    --violet-lit: #A98BFF;
    --violet-deep:#2A1A5E;
    --ok:         #4ADE80;

    --line:       rgba(239, 237, 232, 0.10);
    --line-soft:  rgba(239, 237, 232, 0.05);
    --glass:      rgba(239, 237, 232, 0.03);

    --font-display: "Bricolage Grotesque", "Arial Black", sans-serif;
    --font-accent:  "Exo 2", "Bricolage Grotesque", sans-serif;
    --font-body:    "Roboto", system-ui, sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, monospace;

    --nav-h: 64px;
    --gutter: 20px;
    --radius: 14px;

    --glow:       0 0 20px 2px var(--violet-deep);
    --glow-hover: 0 0 26px 4px rgba(107, 43, 255, .75);

    /* glitch — zamiast poświaty na przyciskach.
       Efekt jak w penie kixune/xLONve + rozjazd chromatyczny w tych kolorach. */
    --glitch-blue:  #1E4BFF;
    --glitch-red:   #FF1E3C;
    --glitch-green: #00E56A;
    --glitch-black: #000000;
    --glitch-speed: .42s;

    /* stała wysokość treści kroku w lightboxie — trzyma przycisk
       na tej samej wysokości na każdym slajdzie */
    --slide-body-h: 330px;

    /* wysokość kontenera treści cennika — musi pomieścić wyższy z dwóch:
       nagłówek albo karuzelę (patrz --pillar-body-h w media query) */
    --pillar-body-h: 560px;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-io: cubic-bezier(0.7, 0, 0.2, 1);

    /* zgodność ze starymi podstronami */
    --accent: #6B2BFF;
    --background: #090A11;
    --text: #EFEDE8;
    --text-dark: #949AB4;
}

@media (min-width: 768px)  { :root { --gutter: 44px; --nav-h: 70px; } }
@media (min-width: 1150px) { :root { --gutter: 68px; --nav-h: 74px; } }
@media (min-width: 1600px) { :root { --gutter: 88px; } }

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    font-family: var(--font-body);
    -webkit-text-size-adjust: 100%;
    scrollbar-width: none;
}
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }

body {
    background: var(--ink);
    color: var(--bone);
    line-height: 1.65;
    font-size: 16px;
    /* clip zamiast hidden — hidden robi z body kontener przewijania
       i w Safari psuje position:sticky w cenniku */
    overflow-x: hidden;
    overflow-x: clip;
    overflow-anchor: none;
    -webkit-font-smoothing: antialiased;
}
body.nav-open, body.lb-open { overflow: hidden; }

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }
::selection { background: var(--violet); color: #fff; }

:focus-visible {
    outline: 2px solid var(--violet-lit);
    outline-offset: 3px;
    border-radius: 2px;
}

/* --- 2. SIATKA KONSTRUKCYJNA -------------------------------------- */
/* Linie w tle usunięte na życzenie. Reguły zostają jako "wyłącznik" —
   gdyby gdzieś w HTML został .blueprint / .hero-grid, nic nie narysuje. */
.blueprint, .hero-grid { display: none !important; }

/* --- 3. TYPOGRAFIA ------------------------------------------------ */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.03em;
    font-variation-settings: "wdth" 100, "opsz" 64;
}

.mono {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
}

.highlight {
    color: var(--violet-lit);
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 900;
    font-variation-settings: normal;
    letter-spacing: -0.02em;
}

/* --- 4. PRZYCISKI ------------------------------------------------- */
/* Glitch = odłamki. Napis stoi nieruchomo — rozjeżdżają się tylko kawałki
   dookoła i na przycisku. Odłamki wstrzykuje initGlitchShards() w script.js,
   więc każdy przycisk (też generowany z JS) dostaje je automatycznie
   i wszystkie gliczują się dokładnie tak samo. */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 26px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: var(--violet);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: none;
    /* odłamki wychodzą poza obrys, więc nic tu nie przycinamy */
    overflow: visible;
    transition: transform .35s var(--ease), background .2s ease, color .2s ease, border-color .2s ease;
    will-change: transform;
}
.btn:hover, .btn:focus-visible {
    background: var(--bone);
    color: var(--ink);
    border-color: var(--bone);
}
.btn:active { transform: scale(.97); }

.btn--ghost {
    background: transparent;
    color: var(--bone);
    border: 1px solid var(--line);
    box-shadow: none;
}
.btn--ghost:hover, .btn--ghost:focus-visible {
    background: var(--bone);
    color: var(--ink);
    border-color: var(--bone);
}

/* --- 4b. ODŁAMKI GLITCHA ------------------------------------------
   Jeden komponent dla WSZYSTKICH przycisków: .btn, pigułek cennika,
   strzałek karuzeli i „zamknij". Sześć kawałków — trzy leżą na przycisku,
   trzy wychodzą poza jego obrys. Każdy ma inny czas animacji, więc nie
   łapią wspólnego rytmu. Napisu nie ruszamy.
   ------------------------------------------------------------------ */
.btn-shards {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}
.btn-shards i {
    position: absolute;
    display: block;
    opacity: 0;
    border-radius: 1px;
    will-change: transform, opacity;
}

/* pigułki, strzałki i „zamknij" — ten sam glitch, trzeba tylko obrysu
   i zdjętego przycinania, żeby odłamki mogły wyjść na zewnątrz */
.pillar-menu-item, .carousel-nav, .aw-close { position: relative; overflow: visible; }

/* --- 4c. GLITCH PRZY POJAWIANIU SIĘ ------------------------------
   Krótkie szarpnięcie w momencie wjazdu elementu. Tylko clip-path —
   opacity i transform są zajęte przez transition z .reveal, a filter
   na dużych blokach kosztuje za dużo. */
@keyframes reveal-glitch {
    0%   { clip-path: inset(0 0 0 0); }
    14%  { clip-path: inset(12% 0 64% 0); }
    26%  { clip-path: inset(0 0 0 0); }
    40%  { clip-path: inset(56% 0 24% 0); }
    54%  { clip-path: inset(0 0 0 0); }
    68%  { clip-path: inset(28% 0 48% 0); }
    82%  { clip-path: inset(0 0 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}
.reveal.visible { animation: reveal-glitch .42s steps(1, end) 1; }

/* --- 4c. PRZYCISK ZAMYKANIA (jeden na całą stronę) ---------------- */
.aw-close {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: rgba(9, 10, 17, .72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    transition: background .3s var(--ease), border-color .3s var(--ease), transform .5s var(--ease);
}
.aw-close-x {
    position: relative;
    z-index: 2;
    display: block;
    width: 14px;
    height: 14px;
}
.aw-close-x i {
    position: absolute;
    top: 50%; left: 0;
    display: block;
    width: 100%;
    height: 1.5px;
    border-radius: 2px;
    background: var(--bone);
    transition: transform .5s var(--ease), background .3s;
}
.aw-close-x i:nth-child(1) { transform: translateY(-50%) rotate(45deg); }
.aw-close-x i:nth-child(2) { transform: translateY(-50%) rotate(-45deg); }

.aw-close:hover, .aw-close:focus-visible {
    background: var(--violet);
    border-color: var(--violet);
    transform: rotate(90deg);
}
.aw-close:hover .aw-close-x i { background: #fff; }
.aw-close:active { transform: rotate(90deg) scale(.92); }

/* wariant lightboxa — celowo mniejszy niż domyślny */
.aw-close--lg { width: 34px; height: 34px; }
.aw-close--lg .aw-close-x { width: 11px; height: 11px; }
.aw-close--lg .aw-close-x i { height: 1.4px; }


/* --- 5. LOADER ---------------------------------------------------- */
#loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--ink);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--gutter);
    transition: transform 1s var(--ease-io), opacity .6s ease .4s;
}
#loader.done { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.load-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
#loader .load-mark {
    font-family: var(--font-display);
    font-size: clamp(2rem, 9vw, 6rem);
    font-variation-settings: "wdth" 80;
    line-height: 1;
}
.load-note { display: none; }
@media (min-width: 768px) {
    .load-note {
        display: block;
        flex: 1;
        font-family: var(--font-mono);
        font-size: .62rem;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--slate-dim);
        padding-bottom: .9rem;
        text-align: center;
    }
}
#loader .load-pct {
    font-family: var(--font-mono);
    font-size: clamp(2rem, 9vw, 6rem);
    color: var(--violet-lit);
    line-height: 1;
}
.load-bar { margin-top: 20px; height: 1px; background: var(--line); }
.load-bar i { display: block; height: 100%; width: 0%; background: var(--violet); transition: width .2s linear; }

/* --- 6. NAWIGACJA ------------------------------------------------- */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 900;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--gutter);
    border-bottom: 1px solid transparent;
    transition: background .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease);
}
.navbar.scrolled {
    background: rgba(9, 10, 17, 0.72);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-bottom-color: var(--line);
}


.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
@media (min-width: 1150px) { .nav-brand { position: static; transform: none; } }
.nav-logo { width: 26px; height: 26px; object-fit: contain; }
.logo_text {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    font-variation-settings: "wdth" 85;
}
.nav-brand-role { display: none; }
@media (min-width: 1150px) {
    .nav-brand-role {
        display: block;
        font-family: var(--font-mono);
        font-size: 0.56rem;
        letter-spacing: .1em;
        color: var(--slate-dim);
        text-transform: uppercase;
        padding-left: 10px;
        border-left: 1px solid var(--line);
        line-height: 1.35;
    }
}
/* „Dawid Kubis / web design & code" na fioletowo — tylko na stronie głównej */
body.is-home .nav-brand-role { color: var(--violet-lit); border-left-color: rgba(107, 43, 255, .45); }

.nav-links { display: flex; gap: 2px; }
.nav-link {
    position: relative;
    padding: 9px 13px;
    border-radius: 100px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: var(--slate);
    text-transform: uppercase;
    transition: color .3s var(--ease), background .3s var(--ease);
}
.nav-link:hover { color: var(--bone); background: var(--glass); }
/* aktywna podstrona w nawigacji */
.nav-link.active { color: var(--bone); }
.nav-link.active .nav-link-label { border-bottom: 1px solid var(--violet); padding-bottom: 2px; }
.nav-right { display: flex; align-items: center; gap: 14px; z-index: 2; margin-left: auto; }

.progress-container { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; }
.progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--violet), var(--violet-lit)); }

.hamburger {
    width: 34px; height: 34px;
    border: none;
    background: none;
    position: relative;
    z-index: 2;
}
.hamburger .bar {
    position: absolute;
    left: 50%;
    width: 15px; height: 1.5px;
    background: var(--bone);
    transform: translateX(-50%);
    transition: transform .4s var(--ease), opacity .3s, background .3s;
}
.hamburger .bar:nth-child(1) { top: 12px; }
.hamburger .bar:nth-child(2) { top: 16.5px; }
.hamburger .bar:nth-child(3) { top: 21px; }
.hamburger.active .bar { background: var(--bone); }
.hamburger.active .bar:nth-child(1) { transform: translateX(-50%) translateY(4.5px) rotate(45deg); }
.hamburger.active .bar:nth-child(2) { opacity: 0; }
.hamburger.active .bar:nth-child(3) { transform: translateX(-50%) translateY(-4.5px) rotate(-45deg); }

/* --- MENU MOBILNE (pełny ekran, pełne tło) --- */
.nav-menu {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100svh;
    background: rgba(9, 10, 17, .72);
    backdrop-filter: blur(26px) saturate(150%);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    padding: calc(var(--nav-h) + 30px) var(--gutter) 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity .45s var(--ease), transform .55s var(--ease), visibility .45s;
    z-index: 1;
    overflow-y: auto;
}
.nav-menu.active { opacity: 1; visibility: visible; transform: translateY(0); }

.nav-menu .nav-links { flex-direction: column; gap: 0; margin-top: 8px; }
.nav-menu .nav-link {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 11vw, 3.6rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    text-transform: none;
    color: var(--bone);
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .5s var(--ease), transform .6s var(--ease), color .3s;
}
.nav-menu .nav-link:hover { background: none; color: var(--violet-lit); }
.nav-menu.active .nav-link { opacity: 1; transform: translateY(0); }
.nav-menu.active .nav-link:nth-child(1) { transition-delay: .12s; }
.nav-menu.active .nav-link:nth-child(2) { transition-delay: .18s; }
.nav-menu.active .nav-link:nth-child(3) { transition-delay: .24s; }
.nav-menu.active .nav-link:nth-child(4) { transition-delay: .30s; }
.nav-menu.active .nav-link:nth-child(5) { transition-delay: .36s; }

.nav-btn-custom { align-self: center; margin-top: 34px; }
.nav-menu-footer { display: flex; flex-direction: column; gap: 3px; }
.nav-contact { font-family: var(--font-mono); font-size: .8rem; color: var(--slate); }
.nav-contact:hover { color: var(--violet-lit); }
.nav-menu-socials { display: flex; gap: 18px; margin-top: 18px; color: var(--slate); font-size: 1.05rem; }
.nav-menu-socials a:hover { color: var(--violet-lit); }

@media (min-width: 1150px) {
    .hamburger { display: none; }
    .nav-menu {
        position: static;
        display: contents;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: none;
        height: auto;
        overflow: visible;
    }
    /* usługi wyśrodkowane w navbarze — absolutnie, żeby szerokość logo
       ani przycisku po prawej nie ściągała ich z osi */
    .nav-menu .nav-links {
        flex-direction: row;
        gap: 2px;
        margin-top: 0;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
    }
    .nav-menu .nav-link {
        font-family: var(--font-mono);
        font-size: .7rem;
        font-weight: 500;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--slate);
        padding: 9px 13px;
        border: 0;
        border-radius: 100px;
        opacity: 1;
        transform: none;
    }
    .nav-menu-footer { display: none; }
    .nav-btn-custom { order: 3; margin-top: 0; align-self: auto; }
}

/* --- 7. HERO ------------------------------------------------------ */
.hero {
    position: relative;
    height: 100svh;
    min-height: 560px;
    padding: calc(var(--nav-h) + 18px) var(--gutter) 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    z-index: 2;
}

.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-img {
    position: absolute;
    inset: -6%;
    background-size: cover;
    background-position: 50% 42%;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 1.4s var(--ease), transform 2.2s var(--ease);
    will-change: transform;
}
.hero.built .hero-img { opacity: 1; transform: scale(1); }

.hero-veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(9,10,17,.86), rgba(9,10,17,.3) 34%, rgba(9,10,17,.34) 62%, var(--ink)),
        radial-gradient(ellipse 60% 46% at 50% 40%, transparent 40%, rgba(9,10,17,.55));
}

.hero-scan {
    position: absolute;
    top: 0; bottom: 0;
    width: 2px;
    left: 0;
    background: var(--violet-lit);
    box-shadow: 0 0 30px 5px rgba(169, 139, 255, .9);
    opacity: 0;
    z-index: 2;
}
.hero.built .hero-scan { animation: scan 1.3s var(--ease-io) forwards; }
@keyframes scan {
    0%   { opacity: 1; left: 0; }
    98%  { opacity: 1; }
    100% { opacity: 0; left: 100%; }
}

.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--slate);
    font-size: .6rem;
}
.hero-eyebrow i {
    display: block;
    width: 26px; height: 1px;
    background: var(--violet-lit);
    transform-origin: left;
    animation: rule-in 1s var(--ease) 1.2s both;
}
@keyframes rule-in { from { transform: scaleX(0); } }

.hero h1 {
    font-size: clamp(2.5rem, 12vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.045em;
}
.hero h1 .ln { display: block; overflow: hidden; }
.hero h1 .ln > span {
    display: block;
    transform: translateY(105%);
    transition: transform 1.1s var(--ease);
}
.hero.built h1 .ln > span { transform: translateY(0); }
.hero.built h1 .ln:nth-child(2) > span { transition-delay: .08s; }
.hero.built h1 .ln:nth-child(3) > span { transition-delay: .16s; }

/* przyciski pod nagłówkiem */
.hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 26px;
}

.hero-lede {
    max-width: 42ch;
    color: var(--slate);
    font-size: .95rem;
}

/* statystyki pod opisem */
.hero-stats {
    display: flex;
    justify-content: center;
    gap: 26px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}
.hero-stat-number {
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 6vw, 2.3rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
}
.hero-stat-number span:last-child:not(.counter) { color: var(--violet-lit); }
.hero-stat p {
    font-family: var(--font-mono);
    font-size: 0.54rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--slate-dim);
    margin-top: 6px;
}

/* desktop: tekst po bokach, środek zdjęcia wolny */
@media (min-width: 900px) {
    .hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(120px, 0.6fr) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        gap: 0 28px;
        padding-bottom: 40px;
    }
    .hero-eyebrow { grid-column: 1 / 2; grid-row: 1; align-self: start; }
    .hero-left    { grid-column: 1 / 2; grid-row: 2; align-self: center; }
    .hero-right   { grid-column: 3 / 4; grid-row: 2; align-self: center; }

    .hero h1 { font-size: clamp(2.6rem, 4.6vw, 4.6rem); }
    .hero-lede { font-size: 1rem; margin-left: auto; text-align: right; }
    .hero-stats { justify-content: flex-end; gap: 34px; }
    .hero-stat { text-align: right; }
}

/* --- 8. MARQUEE --------------------------------------------------- */
.scroll-banner {
    position: relative;
    z-index: 2;
    padding: 16px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--ink-2);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.scroll-track {
    display: flex;
    width: max-content;
    animation: marquee 52s linear infinite;
    will-change: transform;
}

.scroll-content {
    display: flex;
    align-items: center;
    gap: 26px;
    padding-right: 26px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--slate);
    white-space: nowrap;
}
.scroll-content span:nth-child(even) { color: var(--violet); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* --- 9. NAGŁÓWKI SEKCJI ------------------------------------------- */
.section_name {
    position: relative;
    z-index: 2;
    padding: clamp(64px, 12vw, 150px) var(--gutter) clamp(30px, 5vw, 56px);
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.section_name .lead {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--violet-lit);
    margin-bottom: 16px;
    padding: 6px 14px;
    border: 1px solid rgba(107, 43, 255, .45);
    border-radius: 100px;
    background: rgba(107, 43, 255, .12);
}
@media (min-width: 900px) {
    /* ramka zostaje też na desktopie — wcześniej była tu zdejmowana */
    .section_name .lead { letter-spacing: .14em; }
}

.section_name h2 {
    font-size: clamp(2rem, 8vw, 4.6rem);
    font-weight: 700;
    letter-spacing: -0.04em;
}


/* --- 10. FILARY / CENNIK ------------------------------------------ */
#pricing-section-container { position: relative; z-index: 2; }
#pillars-container { height: 400vh; position: relative; }

/* Menu filarów siedzi w normalnym flow NAD treścią, a nie absolutnie
   przyklejone do górnej krawędzi. Dzięki temu jest realnie „nad opisami",
   a karuzela dostaje resztę wysokości i centruje się w niej. */
/* Menu, napisy i karuzela jako jedna grupa wyśrodkowana w ekranie.
   justify-content: center na wrapperze centruje [menu + treść] razem,
   a .pillars-text-container nie rozpycha się już na flex: 1. */
.pillar-sticky-wrapper {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: var(--nav-h);
}

.pillar-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 1s var(--ease), transform 1.6s var(--ease);
    filter: blur(5px) brightness(.62);
}
.pillar-bg.active { opacity: 1; transform: scale(1); }
.pillar-bg-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(9,10,17,.78) 0%, rgba(9,10,17,.45) 30%, rgba(9,10,17,.7) 78%, var(--ink));
}

/* nawigacja cennika — pigułki nad opisami */
.pillars-menu-container {
    position: relative;
    z-index: 40;
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-start;
    padding: 0 var(--gutter);
    margin-bottom: 14px;
    overflow-x: auto;
    scrollbar-width: none;
    top: 15%;
}
.pillars-menu-container::-webkit-scrollbar { display: none; }
.pillars-menu {
    
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 6px;
    margin: 0 auto;
}
@media (min-width: 560px) { .pillars-menu { gap: 8px; } }
@media (min-width: 700px) { .pillars-menu-container { justify-content: center; overflow: visible; } }
.pillar-menu-item {
    cursor: pointer;
    color: var(--slate);
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 6px 11px;
    border-radius: 50px;
    font-family: var(--font-mono);
    font-size: .58rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color .3s, background .3s, border-color .3s, box-shadow .3s;
}
/* większe pigułki dopiero tam, gdzie mieszczą się w jednym rzędzie */
@media (min-width: 560px) {
    .pillar-menu-item { padding: 7px 15px; font-size: .64rem; letter-spacing: .05em; }
}
.pillar-menu-item:hover { color: var(--bone); background: rgba(255, 255, 255, 0.12); }
.pillar-menu-item.active {
    color: #fff;
    border-color: var(--violet);
    background: var(--violet);
    box-shadow: none;
}

/* stała wysokość zamiast flex: 1 — inaczej kontener zjadałby całą resztę
   ekranu i „środek" grupy uciekałby w dół */
.pillars-text-container { position: relative; flex: 0 0 auto; height: var(--pillar-body-h); }

.pillar-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    /* bez pionowego paddingu — kontener ma opinać treść, żeby grupa
       była wyśrodkowana optycznie, a nie tylko pudełkiem */
    padding: 0 var(--gutter);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(22px);
    transition: opacity .6s var(--ease), transform .7s var(--ease), visibility .6s;
    z-index: 30;
}
.pillar-text.active { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }

/* kolejność: tytuł → opis → „Zobacz ofertę". Wcześniej order: 3 wisiał
   na .btn, a elementem flexa jest opakowujący <a> — przycisk lądował nad
   tytułem. Teraz kolejność wynika wprost z HTML-a. */
.pillar-header { max-width: 560px; display: flex; flex-direction: column; align-items: center; order: 1; position: relative; top: 20%; }
.pillar-pricing-grid.stack-grid { order: 2; }
.pillar-title {
    font-size: clamp(1.5rem, 6vw, 2.1rem);
    margin-bottom: 8px;
    letter-spacing: -0.04em;
    text-transform: uppercase;
}
.pillar-title span {
    color: var(--violet-lit) !important;
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 900;
    font-variation-settings: normal;
}
.pillar-desc {
    color: var(--slate);
    font-size: .82rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pillar-cta { display: block; margin-top: 14px; }
.toggle-pricing-btn { margin: 0; }

@media (min-width: 1000px) {
    
/* Rozmiary i wysunięcia w PIKSELACH, nie w procentach. Procent liczy się od
   szerokości przycisku, więc na przycisku 100% szerokości (formularze, karty)
   `left: -9%` robiło się -35px i odłamki wychodziły poza ekran. W px każdy
   przycisk gliczuje się identycznie — o to właśnie chodziło. */
/* cztery NA przycisku */
.btn-shards i:nth-child(1) { top: 18%;  left: 12px;  width: 34px; height: 2px; background: var(--glitch-blue); }
.btn-shards i:nth-child(2) { top: 62%;  left: 46%;   width: 40px; height: 2px; background: var(--glitch-red); }
.btn-shards i:nth-child(3) { top: 42%;  left: 26%;   width: 20px; height: 3px; background: var(--glitch-black); }
.btn-shards i:nth-child(4) { top: 30%;  left: 62%;   width: 24px; height: 2px; background: var(--glitch-green); }
/* cztery WOKÓŁ przycisku */
.btn-shards i:nth-child(5) { top: 34%;  left: -9px;  width: 12px; height: 3px; background: var(--glitch-blue); }
.btn-shards i:nth-child(6) { top: -18%; left: 34%;   width: 22px; height: 2px; background: var(--glitch-red); }
.btn-shards i:nth-child(7) { bottom: -16%; left: 56%; width: 18px; height: 2px; background: var(--glitch-green); }
.btn-shards i:nth-child(8) { top: 56%;  right: -8px; width: 11px; height: 3px; background: var(--glitch-black); }

.btn:hover .btn-shards i:nth-child(1),
.pillar-menu-item:hover .btn-shards i:nth-child(1),
.carousel-nav:hover .btn-shards i:nth-child(1),
.aw-close:hover .btn-shards i:nth-child(1) { animation: shard-a .52s steps(1, end) infinite; }

.btn:hover .btn-shards i:nth-child(2),
.pillar-menu-item:hover .btn-shards i:nth-child(2),
.carousel-nav:hover .btn-shards i:nth-child(2),
.aw-close:hover .btn-shards i:nth-child(2) { animation: shard-b .67s steps(1, end) infinite; }

.btn:hover .btn-shards i:nth-child(3),
.pillar-menu-item:hover .btn-shards i:nth-child(3),
.carousel-nav:hover .btn-shards i:nth-child(3),
.aw-close:hover .btn-shards i:nth-child(3) { animation: shard-c .41s steps(1, end) infinite; }

.btn:hover .btn-shards i:nth-child(4),
.pillar-menu-item:hover .btn-shards i:nth-child(4),
.carousel-nav:hover .btn-shards i:nth-child(4),
.aw-close:hover .btn-shards i:nth-child(4) { animation: shard-d .73s steps(1, end) infinite; }

.btn:hover .btn-shards i:nth-child(5),
.pillar-menu-item:hover .btn-shards i:nth-child(5),
.carousel-nav:hover .btn-shards i:nth-child(5),
.aw-close:hover .btn-shards i:nth-child(5) { animation: shard-e .58s steps(1, end) infinite; }

.btn:hover .btn-shards i:nth-child(6),
.pillar-menu-item:hover .btn-shards i:nth-child(6),
.carousel-nav:hover .btn-shards i:nth-child(6),
.aw-close:hover .btn-shards i:nth-child(6) { animation: shard-f .63s steps(1, end) infinite; }

.btn:hover .btn-shards i:nth-child(7),
.pillar-menu-item:hover .btn-shards i:nth-child(7),
.carousel-nav:hover .btn-shards i:nth-child(7),
.aw-close:hover .btn-shards i:nth-child(7) { animation: shard-g .47s steps(1, end) infinite; }

.btn:hover .btn-shards i:nth-child(8),
.pillar-menu-item:hover .btn-shards i:nth-child(8),
.carousel-nav:hover .btn-shards i:nth-child(8),
.aw-close:hover .btn-shards i:nth-child(8) { animation: shard-h .69s steps(1, end) infinite; }

@keyframes shard-a {
    0%, 100% { opacity: 0; transform: translate(0, 0) scaleX(1); }
    18% { opacity: 1; transform: translate(-9px, -2px) scaleX(.55); }
    36% { opacity: 0; }
    58% { opacity: 1; transform: translate(7px, 1px) scaleX(1.25); }
    74% { opacity: 0; }
}
@keyframes shard-b {
    0%, 100% { opacity: 0; transform: translate(0, 0) scaleX(1); }
    12% { opacity: 1; transform: translate(11px, 2px) scaleX(.7); }
    30% { opacity: 0; }
    52% { opacity: 1; transform: translate(-8px, -3px) scaleX(1.1); }
    68% { opacity: 0; }
    86% { opacity: 1; transform: translate(4px, 2px) scaleX(.4); }
}
@keyframes shard-c {
    0%, 100% { opacity: 0; transform: translate(0, 0); }
    22% { opacity: 1; transform: translate(-5px, 4px); }
    44% { opacity: 0; }
    66% { opacity: 1; transform: translate(9px, -4px); }
}
@keyframes shard-d {
    0%, 100% { opacity: 0; transform: translate(0, 0); }
    16% { opacity: 1; transform: translate(-7px, -6px); }
    34% { opacity: 0; }
    60% { opacity: 1; transform: translate(-13px, 5px); }
    80% { opacity: 0; }
}
@keyframes shard-e {
    0%, 100% { opacity: 0; transform: translate(0, 0) scaleX(1); }
    20% { opacity: 1; transform: translate(6px, -5px) scaleX(.6); }
    42% { opacity: 0; }
    64% { opacity: 1; transform: translate(-10px, -9px) scaleX(1.3); }
    82% { opacity: 0; }
}
@keyframes shard-f {
    0%, 100% { opacity: 0; transform: translate(0, 0) scaleX(1); }
    26% { opacity: 1; transform: translate(8px, 7px) scaleX(.75); }
    48% { opacity: 0; }
    70% { opacity: 1; transform: translate(-6px, 11px) scaleX(1.15); }
    88% { opacity: 0; }
}

@keyframes shard-g {
    0%, 100% { opacity: 0; transform: translate(0, 0) scaleX(1); }
    24% { opacity: 1; transform: translate(-4px, 6px) scaleX(.6); }
    46% { opacity: 0; }
    72% { opacity: 1; transform: translate(7px, 9px) scaleX(1.4); }
    90% { opacity: 0; }
}
@keyframes shard-h {
    0%, 100% { opacity: 0; transform: translate(0, 0); }
    18% { opacity: 1; transform: translate(6px, -4px); }
    40% { opacity: 0; }
    62% { opacity: 1; transform: translate(11px, 3px); }
    84% { opacity: 0; }
}

/* Lekkie drżenie przycisku. Animujemy właściwość `translate`, a NIE `transform`
   — transform jest zajęty przez initMagnetic (ustawia go inline), a animacja CSS
   bije inline w kaskadzie i skasowałaby magnes. `translate` to osobny property,
   więc oba efekty składają się bez walki. */
/* Napis przycisku gliczuje się tak jak linki w stopce (rozjazd chromatyczny
   na text-shadow) — plus dalej lekko drży. Dwie animacje na jednym elemencie:
   btn-shake rusza `translate`, btn-text-glitch rusza `text-shadow`, więc nie
   biją się ani ze sobą, ani z magnesem (ten siedzi na `transform`). */
.btn:hover, .btn:focus-visible {
    animation: btn-text-glitch .4s steps(1, end) infinite;
}
@keyframes btn-text-glitch {
    0%, 26%, 52%, 80%, 100% { text-shadow: none; }
    13% { text-shadow: -1.6px 0 var(--glitch-blue), 1.6px 0 var(--glitch-red); }
    39% { text-shadow: 1.4px 0 var(--glitch-blue), -1.4px 0 var(--glitch-red); }
    66% { text-shadow: -1px 1px var(--glitch-red), 1px -1px var(--glitch-blue); }
    92% { text-shadow: 1.8px 0 var(--glitch-black), -1.8px 0 var(--glitch-blue); }
}

    /* na desktopie kolumny obok siebie, więc liczy się wyższa z nich: karuzela */
    :root { --pillar-body-h: 470px; }
    .pillar-text {
        display: grid;
        grid-template-columns: 0.85fr 1.15fr;
        align-items: center;
        text-align: left;
        gap: 40px;
        padding: 0 var(--gutter);
    }
    /* pigułki nad kolumną z opisem, nie na środku ekranu */
    .pillars-menu-container { justify-content: flex-start; }
    .pillars-menu { margin: 0; }

    .pillar-header {
        order: 1;
        align-items: flex-start;
        text-align: left;
        max-width: 460px;
        /* wszystkie cztery boxy tej samej wysokości — inaczej treść
           podskakuje przy przełączaniu filarów */
        min-height: 330px;
        justify-content: flex-start;
        /* do góry, żeby tytuł przykleił się pod pigułki menu.
           Karuzela zostaje wyśrodkowana (align-items: center na .pillar-text) */
        align-self: start;
    }
    .pillar-pricing-grid.stack-grid { order: 2; max-width: 560px; }
    .pillar-title { font-size: clamp(2.2rem, 4.2vw, 3.8rem); margin-bottom: 18px; }
    .pillar-desc { font-size: .95rem; -webkit-line-clamp: 4; max-width: 40ch; min-height: 5.9em; }
    .pillar-cta { margin-top: 22px; }
}

/* --- talia kart --- */
.pillar-pricing-grid.stack-grid {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    /* karty są position:absolute — bez jawnej szerokości kontener zapada się
       do 0px (i znika swipe oraz sensowne miejsce na strzałki) */
    width: 100%;
    max-width: 460px;
    min-height: 390px;
    z-index: 10;
}
@media (min-width: 1000px) { .pillar-pricing-grid.stack-grid { min-height: 470px; } }

.overlay_pricing_card {
    position: absolute;
    width: min(320px, 78vw);
    border-radius: 16px;
    transition: all .5s cubic-bezier(0.2, 0.8, 0.2, 1);
    cursor: pointer;
}
.overlay_pricing_card.card-left {
    transform: translateX(-60px) scale(.9);
    z-index: 0; opacity: .7;
    box-shadow: 0 0 30px var(--ink-2);
    border: 1px solid var(--slate-dim);
}
.overlay_pricing_card.card-center {
    transform: translateX(0) scale(1);
    z-index: 5; opacity: 1;
    box-shadow: 0 0 30px var(--violet-deep);
    border: 1px solid var(--violet);
}
.overlay_pricing_card.card-right {
    transform: translateX(60px) scale(.85);
    z-index: 0; opacity: .4;
    box-shadow: 0 0 30px var(--ink-2);
    border: 1px solid var(--slate-dim);
}
.overlay_pricing_card.card-hidden {
    transform: scale(.8);
    opacity: 0;
    z-index: -1;
    pointer-events: none;
    border: 1px solid transparent;
}
@media (min-width: 1000px) {
    .overlay_pricing_card.card-left  { transform: translateX(-100px) scale(.9); }
    .overlay_pricing_card.card-right { transform: translateX(100px) scale(.85); }
}

/* Karta = zdjęcie oferty w tle + ciemny scrim od dołu, na którym siedzi
   cena i lista. Tak jak w starym index_style.css, tylko gradientem
   zamiast gigantycznego box-shadow inset (ten gubił border-radius). */
.pricing-card {
    position: relative;
    width: 100%;
    padding: 92px 20px 22px;
    border-radius: var(--radius);
    background-color: var(--ink-3);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    border: 1px solid transparent;
    /* Uwaga: BEZ overflow: hidden. overflow inny niż visible wymusza
       transform-style: flat i zabija głębię efektu 3D. Tło i tak jest
       przycinane do border-radius, a scrim dostaje border-radius: inherit. */
    isolation: isolate;
    transform-style: preserve-3d;
    transition: transform .45s var(--ease);
}
.pricing-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 0;
    background:
        linear-gradient(180deg,
            rgba(9, 10, 17, .10) 0%,
            rgba(9, 10, 17, .45) 24%,
            rgba(9, 10, 17, .88) 44%,
            rgba(9, 10, 17, .97) 60%,
            var(--ink) 100%);
}
.pricing-card > * { position: relative; z-index: 1; }

/* głębia efektu 3D — im ważniejsza treść, tym bliżej patrzącego */
.tilt-3d .pricing-header     { transform: translateZ(30px); }
.tilt-3d .pricing-price      { transform: translateZ(46px); }
.tilt-3d .card-detailed-list { transform: translateZ(18px); }
.tilt-3d .popular-badge      { transform: translateZ(56px); }
.tilt-3d > .btn              { transform: translateZ(38px); }

@media (min-width: 1000px) {
    .stack-grid .pricing-card { padding: 118px 26px 30px; }
}

/* zdjęcia pakietów — id-y zgodne z sekcją cennika i z kartami z JS */
#s1, #opt-s1 { background-image: url('/images/s1.webp'); }
#s2, #opt-s2 { background-image: url('/images/s2.webp'); }
#s3, #opt-s3 { background-image: url('/images/s3.webp'); }
#k1, #opt-k1 { background-image: url('/images/k1.webp'); }
#k2, #opt-k2 { background-image: url('/images/k2.webp'); }
#k3, #opt-k3 { background-image: url('/images/k3.webp'); }
#u1, #opt-u1 { background-image: url('/images/u1.webp'); }
#u2, #opt-u2 { background-image: url('/images/u2.webp'); }
#u3, #opt-u3 { background-image: url('/images/u3.webp'); }
#a1, #opt-a1 { background-image: url('/images/a1.webp'); }
#a2, #opt-a2 { background-image: url('/images/a2.webp'); }
#a3, #opt-a3 { background-image: url('/images/a3.webp'); }
#e1, #opt-e1 { background-image: url('/images/se1.webp'); }
#e2, #opt-e2 { background-image: url('/images/se2.webp'); }
#e3, #opt-e3 { background-image: url('/images/se3.webp'); }

/* karty kategorii w kroku 2 lightboxa */
.cat-strony    { background-image: url('/images/ss2.webp'); }
.cat-sklepy    { background-image: url('/images/ecb.webp'); }
.cat-renowacja { background-image: url('/images/ss3.webp'); }
.cat-audyt     { background-image: url('/images/audyt_hero.webp'); }

.card-center .pricing-card { border-color: transparent; }
.card-center .pricing-card::before {
    content: "";
    position: absolute;
    top: 0; left: 12%; right: 12%;
    height: 1px;
    z-index: 2;
    background: linear-gradient(90deg, transparent, var(--violet-lit), transparent);
}

.popular-badge {
    position: absolute;
    top: 14px; right: 14px;
    z-index: 2;
    padding: 4px 10px;
    border-radius: 100px;
    background: var(--violet);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    box-shadow: var(--glow);
}

.pricing-header h3 { font-size: 1.35rem; font-variation-settings: "wdth" 85; text-transform: uppercase; }
.pricing-header h4 {
    font-family: var(--font-mono);
    font-size: 0.56rem;
    font-weight: 400;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--slate-dim);
    margin-top: 6px;
}
.pricing-price {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: -0.045em;
    margin: 14px 0 16px;
    line-height: 1;
}
@media (min-width: 1000px) {
    .stack-grid .pricing-header h3 { font-size: 1.55rem; text-transform: uppercase; }
    .stack-grid .pricing-price { font-size: 2.7rem; margin: 20px 0 22px; }
}
.price-suffix {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 400;
    letter-spacing: .06em;
    color: var(--slate-dim);
    text-transform: uppercase;
}
.pricing-card .btn { width: 100%; }

/* w karuzeli (cennik + lightbox) nazwa, rodzaj oferty i cena na środku.
   Siatka na podstronach zostaje wyrównana do lewej. */
.stack-grid .pricing-header,
.stack-grid .pricing-price { text-align: center; }

.card-detailed-list {
    margin-top: 16px;
    padding-top: 2px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 0;
}
@media (min-width: 1000px) { .stack-grid .card-detailed-list { margin-top: 22px; padding-top: 6px; } }

/* Wiersz = etykieta po lewej, wartość po prawej, cienka linijka między.
   Czytelniejsze niż luźna lista — od razu widać, że to tabelka parametrów. */
.card-detailed-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 2px;
    font-size: 0.74rem;
    color: var(--slate);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.card-detailed-list li:last-child { border-bottom: 0; }
.card-detailed-list li strong { font-weight: 400; letter-spacing: .01em; }
.card-detailed-list li > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--bone);
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-align: right;
    white-space: nowrap;
}
/* goła ikonka — krążek pod spodem czytał się jak cień */
.check { color: var(--ok); font-size: .62rem; }
.cross { color: var(--slate-dim); font-size: .62rem; }

.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px; height: 40px;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--slate);
    font-size: 0.75rem;
    z-index: 50;
    display: grid;
    place-items: center;
    background: rgba(9, 10, 17, .65);
    backdrop-filter: blur(8px);
    transition: color .3s, border-color .3s, background .3s, box-shadow .3s;
}
.carousel-nav > i { position: relative; z-index: 2; }
.carousel-nav:hover {
    color: #fff;
    background: var(--violet);
    border-color: var(--violet);
    box-shadow: none;
}
.carousel-prev { left: 0; }
.carousel-next { right: 0; }


/* --- 11. SEKCJA ZOOM (układ jak w oryginale) ---------------------- */
#full-zoom-section {
    position: relative;
    height: 300vh;
    background: var(--ink);
    z-index: 2;
}
.zoom-sticky-wrapper {
    position: sticky;
    top: -25vh;
    height: 150vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--ink);
}
.zoom-scale-container {
    /* --zh: wysokość kafla, --zt: górny offset tak, żeby siatka stała w pionie na środku */
    --zh: 26vh;
    --zt: calc((150vh - (3 * var(--zh) + 20px)) / 2);
    position: relative;
    width: 100vw;
    height: 150vh;
    will-change: transform;
    transform-origin: center center;
}
@media (min-width: 769px) { .zoom-scale-container { --zh: 48vh; } }

/* MOBILE: siatka wypełnia widoczny ekran, więc znika pusta przerwa na wejściu
   w sekcję. Kontener/wrapper = 100svh, kafle większe (--zh), a wideo (środkowy
   rząd) zostaje na środku, bo --zt liczy się automatycznie. Desktop bez zmian. */
@media (max-width: 768px) {
    .zoom-sticky-wrapper { top: 0; height: 100svh; }
    .zoom-scale-container {
        --zh: 34vh;
        height: 100svh;
        --zt: calc((100svh - (3 * var(--zh) + 20px)) / 2);
    }
}
.side-items-wrapper { position: absolute; inset: 0; }

.grid-img, .center-target-wrapper {
    position: absolute;
    height: var(--zh);
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .5);
    opacity: .8;
}
.grid-img { filter: grayscale(.5) brightness(.85); }

.item-t1, .item-t2, .item-b1, .item-b2 { width: calc(50vw - 15px); }
.item-m-left-v, .item-m-right-v { width: calc(25vw - 12.5px); }

.center-target-wrapper {
    width: calc(50vw - 15px);
    left: calc(25vw + 7.5px);
    z-index: 10;
    opacity: 1;
}

.item-t1, .item-t2 { top: var(--zt); }
.item-m-left-v, .item-m-right-v, .center-target-wrapper { top: calc(var(--zt) + var(--zh) + 10px); }
.item-b1, .item-b2 { top: calc(var(--zt) + var(--zh) + var(--zh) + 20px); }

.item-t1, .item-m-left-v, .item-b1 { left: 10px; }
.item-t2, .item-m-right-v, .item-b2 { right: 10px; }

.center-bg-img {
    position: absolute;
    top: -30%; left: 0;
    width: 100%; height: 160%;
    object-fit: cover;
    will-change: transform;
}
.center-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .4); }

.hero-reveal-text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 50;
    text-align: center;
    color: var(--bone);
    opacity: 0;
    pointer-events: none;
    width: 100%;
}
.hero-reveal-text h3 {
    font-family: var(--font-mono);
    font-size: clamp(.6rem, 1.4vw, .95rem);
    letter-spacing: .4em;
    text-transform: uppercase;
    margin-bottom: 10px;
    animation: link-glitch .4s steps(1, end) infinite;
}
.hero-reveal-text h1 {
    font-size: clamp(3.5rem, 17vw, 17rem);
    font-weight: 800;
    line-height: .85;
    font-variation-settings: "wdth" 82;
    color: var(--bone);
    animation: link-glitch .4s steps(1, end) infinite;
}
.mix-blend-diff { mix-blend-mode: difference; color: #fff; }
.uppercase { text-transform: uppercase; }
.font-black { font-weight: 800; }

/* --- 12. JASNA STREFA --------------------------------------------- */
#continuation-section {
    position: relative;
    z-index: 3;
    background: var(--ink);
    color: var(--bone);
}

/* --- 13. OFERTA (kafle) ------------------------------------------- */
.split-screen-section {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0 var(--gutter);
}
@media (min-width: 900px) { .split-screen-section { grid-template-columns: repeat(3, 1fr); gap: 14px; } }

.split-col {
    position: relative;
    min-height: 380px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    isolation: isolate;
}
@media (min-width: 900px) { .split-col { min-height: 60vh; } }

.split-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: grayscale(.4) brightness(.78);
    transform: scale(1.04);
    transition: transform 1.1s var(--ease), filter .8s var(--ease);
}
.split-col:hover .split-bg { transform: scale(1.1); filter: grayscale(0) brightness(.95); }
.split-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(9,10,17,.95) 16%, rgba(9,10,17,.35) 70%, transparent);
}
.split-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
    color: var(--bone);
}
@media (min-width: 900px) { .split-content { padding: 30px; } }
.split-content h3 {
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    background: var(--violet);
    box-shadow: var(--glow);
    padding: 5px 12px;
    border-radius: 100px;
    margin-bottom: 14px;
}
@media (min-width: 900px) {
    .split-content h3 {
        background: none;
        box-shadow: none;
        padding: 0;
        color: var(--violet-lit);
        font-weight: 500;
        letter-spacing: .16em;
        font-size: .6rem;
    }
}
.split-content h2 {
    font-size: clamp(1.5rem, 5vw, 2.2rem);
    text-transform: uppercase;
    letter-spacing: -0.035em;
    margin-bottom: 12px;
    color: var(--bone);
}
.split-content .highlight { color: var(--violet-lit); }
.split-content p { color: var(--slate); font-size: 0.86rem; margin-bottom: 22px; }
.split-content .btn { align-self: flex-start; }

/* --- 14. JAK DZIAŁAMY -------------------------------------------- */
.process-timeline {
    position: relative;
    z-index: 2;
    padding: 0 var(--gutter) clamp(60px, 8vw, 110px);
}
.timeline-container {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}
.timeline-line {
    position: absolute;
    left: 26px; top: 20px; bottom: 20px;
    width: 2px;
    background: var(--ink-4);
    border-radius: 2px;
}
.timeline-line::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 2px;
    background: linear-gradient(var(--violet), var(--violet-lit));
    transform: scaleY(var(--p, 0));
    transform-origin: top;
    transition: transform .2s linear;
}

.timeline-step {
    position: relative;
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 16px;
    padding: 12px 0;
}
.step-left { position: relative; display: flex; align-items: flex-start; padding-top: 16px; }
.step-num {
    font-family: var(--font-mono);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--slate-dim);
    transition: color .4s;
}
.step-dot {
    position: absolute;
    left: 21px; top: 20px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--ink-2);
    border: 2px solid var(--ink-4);
    transition: background .4s var(--ease), transform .4s var(--ease), box-shadow .4s, border-color .4s;
}
.timeline-step.lit .step-dot {
    background: var(--violet);
    border-color: var(--violet);
    box-shadow: 0 0 0 5px rgba(107, 43, 255, .22);
    transform: scale(1.15);
}
.timeline-step.lit .step-num { color: var(--violet); }

.step-right {
    background: var(--ink-2);
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 20px 22px;
    transition: background .4s var(--ease), border-color .4s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.timeline-step.lit .step-right {
    background: var(--ink-3);
    border-color: var(--line);
    box-shadow: 0 16px 40px -20px rgba(0, 0, 0, .8);
}
.step-right:hover { transform: translateY(-3px); }
.step-title {
    font-size: clamp(1.3rem, 4vw, 1.9rem);
    margin-bottom: 6px;
    letter-spacing: -0.035em;
    color: var(--bone);
}
.step-desc { color: var(--slate); max-width: 60ch; font-size: 0.92rem; }

@media (min-width: 768px) {
    .timeline-step { grid-template-columns: 84px 1fr; gap: 26px; padding: 14px 0; }
    .timeline-line { left: 40px; }
    .step-dot { left: 35px; top: 22px; }
    .step-num { font-size: .78rem; }
    .step-right { padding: 24px 28px; }
}

/* --- 15. FAQ ------------------------------------------------------ */
.faq-section {
    position: relative;
    z-index: 2;
    padding: 0 var(--gutter) clamp(70px, 10vw, 130px);
}
.faq-container { max-width: 940px; margin: 0 auto; }
.faq-list { display: flex; flex-direction: column; gap: 10px; }

.faq-item {
    background: var(--ink-2);
    border: 1px solid transparent;
    border-radius: var(--radius);
    overflow: hidden;
    transition: background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.faq-item:hover { background: var(--ink-3); border-color: var(--line); }
.faq-item.active {
    background: var(--ink-3);
    border-color: var(--violet);
    /* cień rozłożony równo dookoła, a nie zrzucony w dół */
    box-shadow: 0 0 46px -8px rgba(107, 43, 255, .55);
}
.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    cursor: pointer;
}
.faq-question span:first-child {
    font-family: var(--font-display);
    font-size: clamp(1rem, 3.4vw, 1.35rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--bone);
    transition: color .3s;
}
.faq-item.active .faq-question span:first-child { color: var(--violet-lit); }
/* „+" rysowany dwiema kreskami zamiast znaku z fontu — znak siadał
   na linii bazowej i wisiał kilka px nad środkiem kółka. Teraz jest
   wyśrodkowany co do piksela i ładnie obraca się w „×". */
.faq-icon {
    position: relative;
    flex-shrink: 0;
    width: 34px; height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    font-size: 0;
    line-height: 0;
    color: var(--slate);
    transition: transform .5s var(--ease), background .4s, color .4s, border-color .4s;
}
.faq-icon::before,
.faq-icon::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 13px; height: 1.6px;
    border-radius: 2px;
    background: currentColor;
    transition: background .4s;
}
.faq-icon::before { transform: translate(-50%, -50%); }
.faq-icon::after  { transform: translate(-50%, -50%) rotate(90deg); }

.faq-item.active .faq-icon {
    transform: rotate(135deg);
    background: var(--violet);
    border-color: var(--violet);
    color: #fff;
}
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.faq-item.active .faq-answer { grid-template-rows: 1fr; }
.faq-answer > p {
    overflow: hidden;
    color: var(--slate);
    font-size: 0.92rem;
    max-width: 70ch;
    padding: 0 22px;
}
.faq-item.active .faq-answer > p { padding-bottom: 22px; }
@media (min-width: 768px) {
    .faq-question { padding: 24px 28px; }
    .faq-answer > p { padding: 0 28px; }
    .faq-item.active .faq-answer > p { padding-bottom: 26px; }
}

/* --- 16. STOPKA --------------------------------------------------- */
/* stopka na pełny ekran */
/* stopka na pełny ekran + pasek nawigacji */
.aw-footer {
    min-height: calc(100svh + var(--nav-h));
    display: flex;
    align-items: center;
    position: relative;
    z-index: 3;
    background: var(--ink);
    color: var(--bone);
    padding: clamp(50px, 8vw, 90px) var(--gutter) 24px;
    overflow: hidden;
    border-top: 1px solid var(--line);
}
.aw-footer::before {
    content: "";
    position: absolute;
    top: -30%; left: 50%;
    transform: translateX(-50%);
    width: 90vw; height: 60vh;
    background: radial-gradient(ellipse, rgba(107, 43, 255, .2), transparent 65%);
    pointer-events: none;
}
.aw-footer-container {
    width: 100%; max-width: 1500px; margin: 0 auto; position: relative; }

.aw-footer-cta { margin-bottom: clamp(36px, 6vw, 70px); }
.aw-footer-cta-text {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 10.5vw, 10rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: .9;
    color: var(--bone);
    max-width: 100%;
    overflow-wrap: break-word;
}
.aw-footer-cta-sub {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
    flex-wrap: wrap;
}
.aw-footer-cta-note {
    font-family: var(--font-mono);
    font-size: .58rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--slate);
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: 100px;
}
@media (min-width: 900px) {
    .aw-footer-cta-note { padding: 0; border: 0; color: var(--slate-dim); }
}

.aw-footer-main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--line);
}
@media (min-width: 900px) { .aw-footer-main { grid-template-columns: 1fr 1.25fr; gap: 60px; padding-bottom: 56px; } }

.aw-footer-m {
    font-family: var(--font-mono);
    font-size: 0.56rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--slate-dim);
}
.aw-footer-email {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 4.6vw, 1.7rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    margin: 4px 0 20px;
    display: inline-block;
    background-image: linear-gradient(var(--violet-lit), var(--violet-lit));
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size .5s var(--ease), color .4s;
}
.aw-footer-email:hover { background-size: 100% 1px; color: var(--violet-lit); }

.aw-footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.aw-footer-col:first-child { display: none; }
@media (min-width: 620px) {
    .aw-footer-grid { grid-template-columns: repeat(3, 1fr); gap: 30px; }
    .aw-footer-col:first-child { display: block; }
}
.aw-footer-col-title {
    font-family: var(--font-mono);
    font-size: 0.56rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--violet-lit);
    margin-bottom: 16px;
}
.aw-footer-links-list li { margin-bottom: 10px; }
.aw-footer-links-list a, .aw-footer-links-list span {
    color: var(--slate);
    font-size: 0.86rem;
    transition: color .3s, padding-left .3s var(--ease);
    display: inline-block;
}
.aw-footer-links-list a:hover,
.aw-footer-socials a:hover,
.aw-footer-email:hover {
    color: var(--bone);
    animation: link-glitch .4s steps(1, end) infinite;
}
.aw-footer-links-list a:hover { padding-left: 6px; }

/* rozjazd chromatyczny na linkach stopki */
@keyframes link-glitch {
    0%, 26%, 52%, 80%, 100% { text-shadow: none; }
    13% { text-shadow: -1.6px 0 var(--glitch-blue), 1.6px 0 var(--glitch-red); }
    39% { text-shadow: 1.4px 0 var(--glitch-blue), -1.4px 0 var(--glitch-red); }
    66% { text-shadow: -1px 1px var(--glitch-red), 1px -1px var(--glitch-blue); }
    92% { text-shadow: 1.8px 0 var(--glitch-black), -1.8px 0 var(--glitch-blue); }
}


.aw-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 22px;
    flex-wrap: wrap;
}
.aw-footer-copyright, .aw-footer-socials a {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--slate-dim);
}
.aw-footer-socials { display: flex; gap: 16px; flex-wrap: wrap; }
.aw-footer-socials a { transition: color .3s; }
.aw-footer-socials a:hover { color: var(--violet-lit); }



/* --- 17b. POWRÓT NA GÓRĘ ----------------------------------------- */
.loop-zone {
    position: relative;
    z-index: 3;
    min-height: 62svh;
    background: var(--ink);
    border-top: 1px solid var(--line);
    display: grid;
    place-items: center;
    padding: 40px var(--gutter);
    overflow: hidden;
}
.loop-inner { text-align: center; display: grid; justify-items: center; gap: 12px; }
.loop-label { color: var(--slate-dim); font-size: .56rem; }
.loop-mark {
    font-family: var(--font-display);
    font-size: clamp(2rem, 11vw, 7rem);
    font-weight: 800;
    font-variation-settings: "wdth" 78;
    letter-spacing: -0.05em;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px var(--slate-dim);
    transition: -webkit-text-stroke-color .5s var(--ease);
}
.loop-zone.armed .loop-mark { -webkit-text-stroke-color: var(--violet-lit); }
.loop-ring {
    position: relative;
    width: 60px; height: 60px;
    display: grid;
    place-items: center;
    margin-top: 6px;
    cursor: pointer;
    background: none;
    border: none;
}
.loop-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.loop-ring circle { fill: none; stroke-width: 2; }
.loop-track { stroke: var(--line); }
.loop-prog {
    stroke: var(--violet-lit);
    stroke-linecap: round;
    stroke-dasharray: 289;
    stroke-dashoffset: calc(289 - 289 * var(--lp, 0));
    transition: stroke-dashoffset .15s linear;
}
.loop-ring i { color: var(--violet-lit); font-size: .85rem; }
.loop-hint { color: var(--slate-dim); font-size: .52rem; }
.loop-gap { height: 12vh; background: var(--ink); }

/* --- 18. LIGHTBOX ------------------------------------------------- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(5, 6, 11, .85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: grid;
    place-items: center;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .45s var(--ease), visibility .45s;
}
.lightbox.active { opacity: 1; visibility: visible; pointer-events: auto; }

.lightbox-content {
    position: relative;
    width: 100%;
    height: 100dvh;
    border-radius: 0;
    border: none;
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 1fr;
    background: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transform: translateY(24px) scale(.97);
    transition: transform .55s var(--ease);
}
.lightbox.active .lightbox-content { transform: translateY(0) scale(1); }
@media (min-width: 900px) {
    .lightbox { padding: 14px; }
    .lightbox-content {
        /* węższy panel ze zdjęciem i niższe okno — mniej pustego miejsca */
        width: min(940px, 100%);
        height: min(610px, 92svh);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        grid-template-rows: 1fr;
        grid-template-columns: 0.7fr 1.3fr;
    }
}

.image-section {
    position: relative;
    background: url('/images/promo.webp') center/cover;
    display: flex;
    align-items: flex-end;
    padding: 16px 18px;
    min-height: 96px;
}
@media (min-width: 900px) { .image-section { padding: 26px; } }
.image-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(9,10,17,.95), rgba(107,43,255,.28));
}
.image-text { position: relative; z-index: 2; }
.image-text h2 { font-size: clamp(1.15rem, 4.4vw, 1.8rem); letter-spacing: -0.035em; margin-bottom: 8px; }
.image-text p { color: var(--slate); font-size: 0.8rem; display: none; }
@media (min-width: 900px) { .image-text p { display: block; } }

/* duża siatka w tle lightboxa */
.form-section {
    position: relative;
    padding: 16px 18px;
    overflow: hidden;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 88px 88px;
    background-position: center;
}
.form-section .slide { z-index: 1; }
@media (min-width: 900px) { .form-section { padding: 24px 26px; } }

.lb-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
}
@media (min-width: 900px) { .lb-close { top: 14px; right: 14px; } }

/* wszystkie slajdy tej samej wielkości */
.multi-step-form { position: relative; height: 100%; }
.slide {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: auto auto auto auto;
    align-content: center;
    gap: 10px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(16px);
    transition: opacity .4s var(--ease), transform .5s var(--ease), visibility .4s;
    overflow-y: auto;
}
.slide.active { opacity: 1; transform: translateX(0); }
/* widoczność i klikalność slajdu TYLKO przy otwartym lightboxie —
   inaczej ukryty formularz przechwytuje kursor na pół strony */
.lightbox.active .slide.active { visibility: visible; pointer-events: auto; }

.form-step-label {
    justify-self: start;
    font-family: var(--font-mono);
    font-size: 0.54rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--violet-lit);
    padding: 5px 12px;
    border: 1px solid rgba(107, 43, 255, .45);
    border-radius: 100px;
    background: rgba(107, 43, 255, .12);
}
@media (min-width: 900px) {
    .form-step-label { padding: 0; border: 0; background: none; letter-spacing: .14em; }
}
.slide h3 { font-size: clamp(1.1rem, 4.2vw, 1.4rem); letter-spacing: -0.03em; }

/* Przycisk pół szerokości. Przy dwóch przyciskach wypełniają rząd,
   przy jednym („Dalej" w kroku 1) zostaje przy 50% zamiast rozciągać się
   na całość. */
.slide-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    align-self: center;
    margin-top: 2px;
}
.slide-actions .btn { flex: 0 0 calc(40% - 5px); }

/* Stała wysokość treści kroku = przycisk ląduje na tej samej wysokości na
   każdym slajdzie i siedzi tuż pod treścią. Cały blok centrujemy przez
   align-content na .slide, więc pod przyciskiem nie zostaje dziura. */
.slide-body {
    align-self: start;
    display: grid;
    align-content: center;
    min-height: var(--slide-body-h);
}
.input-row { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .input-row { grid-template-columns: 1fr 1fr; } }
.multi-step-form input {
    width: 100%;
    padding: 13px 15px;
    margin-bottom: 10px;
    background: var(--ink);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--bone);
    font-family: var(--font-body);
    font-size: 0.9rem;
    transition: border-color .3s, background .3s;
}
.multi-step-form input::placeholder { color: var(--slate-dim); }
.multi-step-form input:focus { outline: none; border-color: var(--violet); background: var(--ink-2); }

.selection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.select-card {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--ink);
    cursor: pointer;
    transition: border-color .3s, background .3s, transform .3s var(--ease);
}
.select-card:hover { border-color: var(--violet); transform: translateY(-2px); }
.select-card.selected { border-color: var(--violet); background: rgba(107, 43, 255, .14); }
.select-card h4 { font-size: .95rem; margin-bottom: 4px; }
.select-card p {
    font-family: var(--font-mono);
    font-size: 0.54rem;
    letter-spacing: .06em;
    color: var(--slate-dim);
    text-transform: uppercase;
}

/* Karuzela w krokach 2 i 3 — dokładnie te same karty co w sekcji cennika,
   tylko przeskalowane do okna lightboxa. */
.pkg-carousel.stack-grid {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    min-height: var(--slide-body-h);
}
@media (min-width: 900px) {
    .pkg-carousel.stack-grid { max-width: 480px; }
}

.pkg-carousel .overlay_pricing_card { width: min(266px, 64vw); border-radius: 12px; }
.pkg-carousel .overlay_pricing_card.card-left  { transform: translateX(-62px) scale(.9); }
.pkg-carousel .overlay_pricing_card.card-right { transform: translateX(62px) scale(.85); }
@media (min-width: 900px) {
    .pkg-carousel .overlay_pricing_card { width: 292px; }
    .pkg-carousel .overlay_pricing_card.card-left  { transform: translateX(-90px) scale(.9); }
    .pkg-carousel .overlay_pricing_card.card-right { transform: translateX(90px) scale(.85); }
}
.pkg-carousel .overlay_pricing_card.card-hidden { transform: scale(.8); }

.pkg-carousel .pricing-card { padding: 82px 17px 18px; border-radius: 12px; }
@media (min-width: 900px) { .pkg-carousel .pricing-card { padding: 96px 20px 20px; } }
.pkg-carousel .pricing-header h3 { font-size: 1.2rem; text-transform: uppercase; }
.pkg-carousel .pricing-header h4 { font-size: .5rem; margin-top: 4px; text-transform: uppercase; }
.pkg-carousel .pricing-price { font-size: 1.6rem; margin: 10px 0 0; }
.pkg-carousel .price-suffix { font-size: .5rem; }
.pkg-carousel .card-detailed-list { margin-top: 12px; padding-top: 2px; }
.pkg-carousel .card-detailed-list li { font-size: .7rem; gap: 8px; padding: 6px 2px; }
.pkg-carousel .card-detailed-list li > span { font-size: .56rem; }
.pkg-carousel .check, .pkg-carousel .cross { width: 15px; height: 15px; font-size: .44rem; }
.pkg-carousel .popular-badge { top: 10px; right: 10px; font-size: .46rem; padding: 3px 8px; }

.form-success {
    grid-template-rows: 1fr;
    place-items: center;
    text-align: center;
}
.form-success .tick {
    width: 58px; height: 58px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: rgba(74, 222, 128, .12);
    border: 1px solid var(--ok);
    display: grid;
    place-items: center;
    color: var(--ok);
    font-size: 1.4rem;
}

/* Confetti particles disabled */

/* --- 19. REVEAL --------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .9s var(--ease), transform 1s var(--ease);
    will-change: transform, opacity;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.wi { display: inline-block; transform: translateY(112%); transition: transform .85s var(--ease); will-change: transform; }
.words-in .wi { transform: translateY(0); }
.hero-lede .wi, .step-title .wi { transition-duration: .65s; }

/* --- 20. LENIS + PRZEJŚCIE PODSTRON ------------------------------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

.page-wipe {
    position: fixed;
    inset: 0;
    z-index: 9500;
    background: var(--ink-2);
    display: grid;
    place-items: center;
    pointer-events: none;
    transform: translateY(0);
    transition: transform .7s var(--ease-io);
}
.page-wipe-mark {
    font-family: var(--font-display);
    font-size: clamp(2rem, 7vw, 5rem);
    font-weight: 800;
    font-variation-settings: "wdth" 80;
    letter-spacing: -0.05em;
    color: var(--violet-lit);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.page-wipe.out { transform: translateY(-101%); }
.page-wipe.in { transform: translateY(0); transition: transform .6s var(--ease-io); }
.page-wipe.in .page-wipe-mark { opacity: 1; transform: translateY(0); transition-delay: .15s; }
.page-wipe.out .page-wipe-mark { opacity: 0; }

/* ============================================================
   --- 22. PODSTRONY --------------------------------------------------
   Wszystko poniżej dotyczy /uslugi/*, /wspolpraca, /polityka,
   /regulamin. Te same tokeny i te same komponenty co strona główna —
   podstrony nie mają już własnego arkusza.
   ============================================================ */

/* --- 22.1 HERO PODSTRONY ------------------------------------------ */
.sub-page { position: relative; z-index: 2; }

/* na podstronach sekcje siedzą ciaśniej niż na stronie głównej */
.sub-page .section_name { padding: clamp(40px, 5.5vw, 76px) var(--gutter) clamp(20px, 2.6vw, 32px); }

.sub-hero {
    position: relative;
    /* ekran minus pasek nawigacji */
    height: calc(100dvh - var(--nav-h));
    display: flex;
    flex-direction: column;
    /* treść wyśrodkowana w obu osiach, z oddechem między blokami */
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: calc(var(--nav-h) + clamp(24px, 5vh, 64px)) var(--gutter) clamp(28px, 5.5vh, 68px);
    overflow: hidden;
    isolation: isolate;
}
.sub-hero-media { position: absolute; inset: 0; z-index: -1; }
.sub-hero-img {
    position: absolute;
    inset: -6%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 1.4s var(--ease), transform 2.2s var(--ease);
}
.sub-hero.built .sub-hero-img { opacity: 1; transform: scale(1); }
.sub-hero-veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(9,10,17,.96) 0%, rgba(9,10,17,.74) 38%, rgba(9,10,17,.9) 72%, var(--ink) 100%),
        radial-gradient(ellipse 70% 60% at 50% 50%, rgba(9,10,17,.45) 20%, rgba(9,10,17,.82));
}

.sub-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: center;
    font-family: var(--font-mono);
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--violet-lit);
    padding: 6px 14px;
    border: 1px solid rgba(107, 43, 255, .45);
    border-radius: 100px;
    background: rgba(107, 43, 255, .12);
    /* odstępy skalują się wysokością okna (vh), więc nie trzeba ich
       dociskać stopniami @media — same się kurczą na niskich ekranach */
    margin-bottom: clamp(12px, 2.4vh, 28px);
}
.sub-hero h1 {
    font-size: clamp(2.3rem, 9vw, 5rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    /* wyśrodkowany nagłówek znosi trochę więcej szerokości niż wyrównany do lewej */
    max-width: 24ch;
    text-wrap: balance;
}
.sub-hero-lede {
    color: var(--slate);
    font-size: .95rem;
    max-width: 62ch;
    text-wrap: pretty;
    margin-top: clamp(12px, 2.6vh, 32px);
}
.sub-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: clamp(16px, 3.4vh, 44px);
}

.sub-hero-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-self: stretch;
    gap: clamp(14px, 2vh, 24px) clamp(32px, 6vw, 88px);
    margin-top: clamp(20px, 4.4vh, 56px);
    padding-top: clamp(14px, 2.8vh, 34px);
    border-top: 1px solid var(--line);
}
.sub-hero-meta div span {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 5vw, 2rem);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1;
}
.sub-hero-meta div span em {
    font-style: normal;
    color: var(--violet-lit);
}
.sub-hero-meta div p {
    font-family: var(--font-mono);
    font-size: .54rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--slate-dim);
    margin-top: 6px;
}
@media (min-width: 900px) {
    .sub-hero-lede { font-size: 1.05rem; }
}

/* Odstępy w hero siedzą na clamp(min, Xvh, max), więc kurczą się płynnie
   razem z oknem — poprzednie trzy stopnie @media (810/690/600px) robiły to
   skokowo i na zwykłym laptopie (1366x768, 1536x864) dociskały wszystko do
   wartości minimalnych. Zostaje tylko typografia dla naprawdę niskich okien,
   gdzie same odstępy już nie wystarczą. */
@media (max-height: 660px) {
    .sub-hero h1 { font-size: clamp(1.9rem, 6vw, 3.2rem); }
    .sub-hero-lede { font-size: .88rem; }
    .sub-hero-meta div span { font-size: clamp(1.2rem, 3.6vw, 1.6rem); }
    .sub-hero-meta div p { margin-top: 3px; }
}
/* skrajnie niskie (320x568) — ostatni stopień */
@media (max-height: 580px) {
    .sub-hero-tag { padding: 3px 10px; font-size: .5rem; }
    .sub-hero h1 { font-size: clamp(1.5rem, 5vw, 2.2rem); }
    .sub-hero-lede {
        font-size: .78rem;
        display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    }
    .sub-hero-meta div span { font-size: 1rem; }
    .sub-hero-meta div p { font-size: .46rem; margin-top: 1px; }
}


/* --- 22.2 KROKI (01 / 02 / 03 / 04) ------------------------------- */
.step-flow {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: clamp(50px, 7vw, 84px) var(--gutter) 0;
    max-width: 1400px;
    margin: 0 auto;
}
@media (min-width: 640px)  { .step-flow { grid-template-columns: 1fr 1fr; gap: 12px; } }
@media (min-width: 1100px) { .step-flow { grid-template-columns: repeat(4, 1fr); gap: 14px; } }

.flow-card {
    position: relative;
    padding: 24px 22px 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--ink-2);
    overflow: hidden;
    transition: background .4s var(--ease), border-color .4s var(--ease), transform .5s var(--ease);
}
.flow-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 0; height: 2px;
    background: linear-gradient(90deg, var(--violet), var(--violet-lit));
    transition: width .6s var(--ease);
}
.flow-card:hover { background: var(--ink-3); border-color: var(--line); transform: translateY(-4px); }
.flow-card:hover::before { width: 100%; }
.flow-num {
    display: block;
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--violet);
    margin-bottom: 14px;
}
.flow-card h3 { font-size: 1.25rem; letter-spacing: -.03em; margin-bottom: 8px; }
.flow-card p { color: var(--slate); font-size: .84rem; line-height: 1.6; }

/* --- 22.3 „DLACZEGO" — tekst + statystyki | lista cech ------------ */
.why-section {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 0 var(--gutter) clamp(50px, 7vw, 90px);
    max-width: 1300px;
    margin: 0 auto;
}
@media (min-width: 1000px) { .why-section { grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } }

.why-title {
    font-size: clamp(1.9rem, 6vw, 3.2rem);
    letter-spacing: -.04em;
    margin-bottom: 18px;
}
.why-desc { color: var(--slate); font-size: .95rem; line-height: 1.7; max-width: 52ch; }

.why-stats { display: flex; gap: 34px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.why-stat span {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 6vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: 1;
    color: var(--violet-lit);
}
.why-stat p {
    font-family: var(--font-mono);
    font-size: .54rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--slate-dim);
    margin-top: 8px;
}

.why-list { display: flex; flex-direction: column; gap: 10px; }
.why-row {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 16px;
    align-items: start;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--ink-2);
    transition: background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.why-row:hover { background: var(--ink-3); border-color: var(--violet); transform: translateX(4px); }
.why-icon {
    width: 46px; height: 46px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(107, 43, 255, .14);
    border: 1px solid rgba(107, 43, 255, .35);
    color: var(--violet-lit);
    font-size: 1rem;
}
.why-row h3 { font-size: 1.1rem; letter-spacing: -.025em; margin-bottom: 6px; }
.why-row p { color: var(--slate); font-size: .84rem; line-height: 1.6; }

/* --- 22.4 PASEK KORZYŚCI (przewijany) ----------------------------- */
.benefit-belt {
    position: relative;
    z-index: 2;
    overflow: hidden;
    padding: 0 0 clamp(50px, 7vw, 90px);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.belt-track {
    display: flex;
    gap: 12px;
    width: max-content;
    animation: belt 44s linear infinite;
    will-change: transform;
}
@keyframes belt { to { transform: translateX(-50%); } }

.belt-card {
    width: 250px;
    flex-shrink: 0;
    padding: 22px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--ink-2);
}
.belt-card i { color: var(--violet-lit); font-size: 1.05rem; margin-bottom: 14px; display: block; }
.belt-card h3 { font-size: 1.05rem; letter-spacing: -.025em; margin-bottom: 6px; }
.belt-card p { color: var(--slate); font-size: .78rem; line-height: 1.55; }

/* --- 22.5 CENNIK NA PODSTRONIE ------------------------------------ */
.sub-pricing {
    position: relative;
    z-index: 2;
    padding: 0 var(--gutter) clamp(50px, 7vw, 90px);
}
.dyn-pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: 1120px;
    margin: 0 auto;
    align-items: stretch;
}
@media (min-width: 760px)  { .dyn-pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .dyn-pricing-grid { grid-template-columns: repeat(3, 1fr); } }

.dyn-pricing-grid .pricing-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ink);
    padding: 130px 24px 26px;
    transition: transform .5s var(--ease), border-color .4s var(--ease);
}
.dyn-pricing-grid .pricing-card:hover { transform: translateY(-5px); border-color: var(--violet-lit); }
.dyn-pricing-grid .pricing-card.featured { border-color: var(--violet); }
.dyn-pricing-grid .pricing-card.featured::before {
    content: "";
    position: absolute;
    top: 0; left: 12%; right: 12%;
    height: 1px;
    z-index: 2;
    background: linear-gradient(90deg, transparent, var(--violet-lit), transparent);
}
.dyn-pricing-grid .card-detailed-list { flex: 1; }
.dyn-pricing-grid .pricing-card .btn { width: 100%; margin-top: 20px; }
.dyn-pricing-grid .pricing-price { font-size: 2.5rem; margin: 16px 0 0; }

.pricing-note {
    max-width: 1120px;
    margin: 20px auto 0;
    text-align: center;
    font-family: var(--font-mono);
    font-size: .58rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--slate-dim);
}

/* --- 22.6 PORÓWNANIE (CMS / platformy) ---------------------------- */
.compare-section {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 0 var(--gutter) clamp(50px, 7vw, 90px);
    max-width: 1000px;
    margin: 0 auto;
}
@media (min-width: 860px) { .compare-section { grid-template-columns: 1fr 1fr; } }

.compare-box {
    position: relative;
    padding: 28px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--ink-2);
    transition: border-color .4s var(--ease), background .4s var(--ease);
}
.compare-box:hover { background: var(--ink-3); }
.compare-box.recommended { border-color: var(--violet); }
.compare-kicker {
    font-family: var(--font-mono);
    font-size: .56rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--violet-lit);
}
.compare-box h3 { font-size: 1.5rem; letter-spacing: -.03em; margin: 8px 0 12px; }
.compare-box > p { color: var(--slate); font-size: .86rem; line-height: 1.6; }
.compare-list { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.compare-list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: .82rem; color: var(--slate); align-items: start; }
.compare-list li i { margin-top: .35em; font-size: .7rem; }
.compare-list li.yes i { color: var(--ok); }
.compare-list li.no i  { color: #FF5F57; }

/* --- 22.7 WSPARCIE PO WDROŻENIU ----------------------------------- */
.support-section {
    position: relative;
    z-index: 2;
    padding: 0 var(--gutter) clamp(50px, 7vw, 90px);
}
.support-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 1120px;
    margin: 0 auto;
}
@media (min-width: 760px)  { .support-grid { grid-template-columns: repeat(3, 1fr); } }

.support-card {
    position: relative;
    padding: 26px 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--ink-2);
    display: flex;
    flex-direction: column;
    transition: background .4s var(--ease), border-color .4s var(--ease), transform .5s var(--ease);
}
.support-card:hover { background: var(--ink-3); transform: translateY(-4px); }
.support-card.featured { border-color: var(--violet); }
.support-card h3 { font-size: 1.2rem; letter-spacing: -.03em; }
.support-price {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: 1;
    margin: 14px 0 4px;
}
.support-per {
    font-family: var(--font-mono);
    font-size: .54rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--slate-dim);
}
.support-card > p { color: var(--slate); font-size: .82rem; line-height: 1.55; margin-top: 12px; }
.support-list { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 9px; flex: 1; }
.support-list li { display: grid; grid-template-columns: 16px 1fr; gap: 9px; font-size: .8rem; color: var(--slate); align-items: start; }
.support-list li i { color: var(--ok); font-size: .66rem; margin-top: .35em; }
.support-list li strong { color: var(--bone); font-weight: 600; }

.rate-strip {
    max-width: 1120px;
    margin: 14px auto 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    align-items: center;
    padding: 18px 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--ink-2);
}
.rate-strip .rate-label {
    font-family: var(--font-mono);
    font-size: .56rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--slate-dim);
    margin-right: auto;
}
.rate-strip span b { color: var(--violet-lit); font-family: var(--font-mono); font-size: .8rem; }
.rate-strip span { font-size: .8rem; color: var(--slate); }

/* --- 22.8 CTA NA KOŃCU PODSTRONY ---------------------------------- */
.sub-cta {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: clamp(60px, 9vw, 110px) var(--gutter);
    border-top: 1px solid var(--line);
    background: var(--ink-2);
    isolation: isolate;
    overflow: hidden;
}
/* duża siatka w tle — jak w lightboxie */
.sub-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 88px 88px;
    background-position: center;
    -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, #000 35%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, #000 35%, transparent 100%);
}
.sub-cta h2 { font-size: clamp(1.8rem, 6vw, 3.2rem); letter-spacing: -.04em; max-width: 20ch; margin: 0 auto; }
.sub-cta p { color: var(--slate); font-size: .92rem; margin: 16px auto 0; max-width: 56ch; }
.sub-cta .sub-cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* --- 22.9 STRONY PRAWNE -------------------------------------------
   /regulamin.html, /polityka.html, /promocja.html
   Jedyne miejsce ze stylami stron prawnych — wcześniej te same
   selektory były zdefiniowane dwa razy (tu i na końcu pliku), więc
   edycja tego bloku nie dawała żadnego efektu.
   ------------------------------------------------------------------ */

/* --- 22.9a ODPORNOŚĆ NA BRAK JS ----------------------------------
   .page-wipe to kurtyna przejścia: z-index 9500, opacity 1, zakrywa
   cały ekran i zjeżdża w górę dopiero, gdy script.js doda jej .out.
   Gdy JS jest wyłączony albo script.js się nie wczyta, kurtyna zostaje
   na wierzchu i strona wygląda na pustą. To samo dotyczy .reveal
   (opacity: 0 do czasu dodania .visible) i .wi (wjazd słów).
   @media (scripting: none) wchodzi WYŁĄCZNIE przy braku skryptów, więc
   działające przejście między stronami zostaje nietknięte. */
@media (scripting: none) {
    .page-wipe { display: none !important; }
    .reveal { opacity: 1 !important; transform: none !important; }
    .wi { transform: none !important; }
    .lightbox { display: none !important; }
    .load-bar { display: none !important; }
}

/* ============================================================
   22.9 DOKUMENTY PRAWNE — układ „instrument prawny" z żywym spisem
   Treść w jednej czytelnej kolumnie, po lewej lepki, numerowany
   spis treści, który podąża za pozycją czytelnika.
   ============================================================ */

/* Treść prawna nie może zależeć od JS — zawsze widoczna. */
.legal-main .reveal { opacity: 1; transform: none; animation: none; }

.legal-main {
    position: relative;
    z-index: 2;
    padding: calc(var(--nav-h) + clamp(40px, 6vh, 76px)) var(--gutter) clamp(72px, 9vw, 130px);
    background:
        radial-gradient(120% 60% at 50% -8%, rgba(107, 43, 255, .12), transparent 62%),
        var(--ink);
}
.legal-shell { max-width: 1120px; margin: 0 auto; }

/* --- NAGŁÓWEK DOKUMENTU ------------------------------------------- */
.legal-head {
    padding-bottom: 26px;
    margin-bottom: 38px;
    border-bottom: 1px solid var(--line);
}
.legal-head h1 {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 6.4vw, 3.7rem);
    letter-spacing: -.045em;
    line-height: 1.02;
    color: var(--bone);
    text-wrap: balance;
}
.legal-head .update-date {
    display: inline-block;
    margin-top: 18px;
    font-family: var(--font-mono);
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--slate-dim);
    padding: 6px 13px;
    border: 1px solid var(--line);
    border-radius: 100px;
}

/* --- DOKUMENT (treść) -------------------------------------------- */
.legal-doc { max-width: 748px; margin: 0 auto; }

.legal-doc section {
    padding-top: 30px;
    margin-top: 30px;
    border-top: 1px solid var(--line);
    scroll-margin-top: calc(var(--nav-h) + 28px);
}
.legal-doc section:first-child { padding-top: 0; margin-top: 0; border-top: 0; }

/* błysk podświetlenia po skoku ze spisu */
.legal-doc section:target { animation: legalTarget 1.7s var(--ease); }
@keyframes legalTarget {
    0%   { background: rgba(107, 43, 255, .12); }
    100% { background: transparent; }
}

.legal-doc h2 {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 3.3vw, 1.55rem);
    letter-spacing: -.02em;
    line-height: 1.28;
    color: var(--bone);
    margin-bottom: 16px;
    text-wrap: balance;
}

.legal-doc p {
    color: var(--slate);
    font-size: 1rem;
    line-height: 1.78;
    text-wrap: pretty;
    overflow-wrap: break-word;
}
.legal-doc p + p { margin-top: 14px; }
.legal-doc p + ul,
.legal-doc ul + p { margin-top: 16px; }

.legal-doc strong { color: var(--bone); font-weight: 600; }
.legal-doc sup { font-size: .62em; vertical-align: super; line-height: 0; }

.legal-doc a {
    color: var(--violet-lit);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(169, 139, 255, .45);
    overflow-wrap: break-word;
    transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.legal-doc a:hover,
.legal-doc a:focus-visible { color: var(--bone); text-decoration-color: var(--violet); }
.legal-doc a:focus-visible { outline: 2px solid var(--violet-lit); outline-offset: 3px; border-radius: 3px; }

.legal-doc ul { list-style: none; margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.legal-doc li {
    position: relative;
    padding-left: 20px;
    color: var(--slate);
    font-size: 1rem;
    line-height: 1.7;
    overflow-wrap: break-word;
}
.legal-doc li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .62em;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--violet);
}
.legal-doc ::selection { background: rgba(107, 43, 255, .35); color: var(--bone); }

/* --- WĄSKIE EKRANY ----------------------------------------------- */
@media (max-width: 640px) {
    .legal-head { margin-bottom: 26px; }
    .legal-doc { max-width: none; }
    .legal-doc section { padding-top: 26px; margin-top: 26px; }
    .legal-doc p,
    .legal-doc li { font-size: .98rem; }
}

/* --- DRUK / ZAPIS DO PDF ----------------------------------------- */
@media print {
    .navbar, .aw-footer, .page-wipe, .lightbox,
    .progress-container { display: none !important; }

    .legal-main { padding: 0; background: #fff; }
    .legal-shell, .legal-doc { max-width: none; }

    .legal-head { border-color: #ccc; }
    .legal-head h1 { color: #111; font-size: 20pt; }
    .legal-head .update-date { color: #666; border-color: #ccc; }

    .legal-doc section {
        border-color: #ddd;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .legal-doc h2 { color: #111; font-size: 12pt; }
    .legal-doc p,
    .legal-doc li { color: #1a1a1a; font-size: 10.5pt; line-height: 1.55; }
    .legal-doc strong { color: #000; }
    .legal-doc li::before { background: #6B2BFF; }
    .legal-doc a { color: #4A2F9E; text-decoration: none; }
    .legal-doc a[href^="/"]::after { content: " (awenso.pl" attr(href) ")"; font-size: 8pt; color: #888; }
    .legal-doc a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #888; }
}

/* --- OGRANICZONE ANIMACJE ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .legal-doc section:target { animation: none; }
    .legal-doc a { transition: none; }
}

/* --- 22.10 KONTAKT (formularz) --------------------------------- */
.contact-split {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    height: 100dvh;
}
@media (min-width: 1000px) { .contact-split { grid-template-columns: 1fr 1fr; } }

.contact-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--nav-h) + 50px) var(--gutter) 50px;
    background-size: cover;
    background-position: center;
    isolation: isolate;
    overflow: hidden;
}
.contact-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(9,10,17,.9), rgba(9,10,17,.7) 50%, rgba(9,10,17,.94));
}
.contact-visual h1 { font-size: clamp(2.2rem, 7vw, 4rem); letter-spacing: -.045em; }
.contact-visual > p { color: var(--slate); font-size: .95rem; max-width: 46ch; margin-top: 18px; }

.contact-points { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; }
.contact-points li { display: flex; align-items: center; gap: 12px; font-size: .88rem; color: var(--bone); }
.contact-points li i {
    width: 34px; height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(107, 43, 255, .14);
    border: 1px solid rgba(107, 43, 255, .35);
    color: var(--violet-lit);
    font-size: .78rem;
}
.contact-direct { margin-top: 30px; padding-top: 24px; display: flex; flex-direction: column; gap: 6px; }
.contact-direct a {
    font-family: var(--font-display);
    font-size: clamp(1rem, 3.4vw, 1.5rem);
    letter-spacing: -.03em;
    transition: color .3s;
    width: fit-content;
}
.contact-direct a:hover { color: var(--violet-lit); }
.contact-direct .contact-m {
    font-family: var(--font-mono);
    font-size: .54rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-dark);
}

/* Sekcja współpracy ma się zmieścić w ekranie minus navbar. Na desktopie
   dwie kolumny się mieszczą, ale na niższych ekranach trzeba docisnąć.
   Na wąskim ekranie kolumny wchodzą jedna pod drugą i formularz kontaktowy
   po prostu nie zmieści się w jednym ekranie — tam zostaje przewijanie. */
.contact-form-side {
    display: flex;
    align-items: center;
    padding: clamp(40px, 6vw, 70px) var(--gutter);
    background: var(--ink-2);
    border-top: 1px solid var(--line);
}
@media (min-width: 1000px) { .contact-form-side { border-top: 0; border-left: 1px solid var(--line); } }
.contact-form-wrap { width: 100%; max-width: 520px; margin: 0 auto; }
.contact-form-wrap h2 { font-size: clamp(1.5rem, 4.4vw, 2rem); letter-spacing: -.035em; margin-bottom: 8px; }
.contact-form-wrap > p { color: var(--slate); font-size: .86rem; margin-bottom: 26px; }

.aw-form { display: flex; flex-direction: column; gap: 10px; }
.aw-form .field-row { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .aw-form .field-row { grid-template-columns: 1fr 1fr; } }
.aw-form input, .aw-form textarea, .aw-form select {
    width: 100%;
    padding: 14px 16px;
    background: var(--ink);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--bone);
    font-family: var(--font-body);
    font-size: .9rem;
    transition: border-color .3s, background .3s;
}
.aw-form textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.aw-form input::placeholder, .aw-form textarea::placeholder { color: var(--slate-dim); }
.aw-form input:focus, .aw-form textarea:focus, .aw-form select:focus {
    outline: none;
    border-color: var(--violet);
    background: var(--ink-3);
}
.aw-form .form-note { color: var(--slate-dim); font-size: .72rem; line-height: 1.6; margin-top: 4px; }
.aw-form .form-note a { color: var(--violet-lit); text-decoration: underline; text-underline-offset: 3px; }
.aw-form .btn { width: 100%; margin-top: 6px; }
.aw-form-done {
    display: none;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid var(--ok);
    border-radius: 10px;
    background: rgba(74, 222, 128, .1);
    color: var(--bone);
    font-size: .84rem;
}
.aw-form-done.on { display: flex; }
.aw-form-done i { color: var(--ok); }

@media (min-width: 1000px) and (max-height: 880px) {
    .contact-visual { padding: calc(var(--nav-h) + 24px) var(--gutter) 24px; }
    .contact-visual h1 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
    .contact-visual > p { margin-top: 10px; font-size: .84rem; }
    .contact-points { gap: 7px; margin-top: 16px; }
    .contact-points li { font-size: .78rem; }
    .contact-points li i { width: 28px; height: 28px; font-size: .66rem; }
    .contact-direct { margin-top: 16px; padding-top: 12px; gap: 2px; }
    .contact-direct a { font-size: clamp(.9rem, 2vw, 1.15rem); }
    .contact-form-side { padding: 24px var(--gutter); }
    .contact-form-wrap h2 { font-size: 1.5rem; margin-bottom: 4px; }
    .contact-form-wrap > p { margin-bottom: 14px; font-size: .8rem; }
    .aw-form { gap: 8px; }
    .aw-form input, .aw-form textarea, .aw-form select { padding: 10px 13px; font-size: .82rem; }
    .aw-form textarea { min-height: 84px; }
    .aw-form .form-note { font-size: .66rem; }
}
/* --- 21. REDUCED MOTION ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; }
    .hero h1 .ln > span, .wi { transform: none; }
    .hero-img { opacity: 1; transform: none; }
    .sub-hero-img { opacity: 1; transform: none; }
    .page-wipe { display: none; }
    /* żaden glitch przy prefers-reduced-motion */
    .btn-shards { display: none; }
    .reveal.visible { animation: none; clip-path: none; }
    .aw-footer-links-list a:hover, .aw-footer-socials a:hover, .aw-footer-email:hover { animation: none; }
    .belt-track, .scroll-track { animation: none; }
    /* bez pochylania kart za myszką */
    .tilt-3d { transform: none !important; }
}

/* =================================================================
   22. ZMIANY WYŁĄCZNIE NA WERSJI MOBILNEJ (telefon, baza 360px)
   ================================================================= */

/* HERO — dodatkowy podział wiersza w tytule (tylko mobile) */
.mobile-br { display: none; }
@media (max-width: 768px) { .mobile-br { display: inline; } }

/* NAWIGACJA (hamburger) — tło zawsze rozmazane, także na górze strony */
@media (max-width: 1149px) {
    .navbar {
        background: rgba(9, 10, 17, 0.72);
        backdrop-filter: blur(16px) saturate(160%);
        -webkit-backdrop-filter: blur(16px) saturate(160%);
        border-bottom-color: var(--line);
    }
}

@media (max-width: 768px) {
.section_name {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
    margin-bottom: 50px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
    /* =========================================================
       CENNIK — bez chwilowego zatrzymania (pinowania).
       Sekcja płynie normalnie i MOŻE być wyższa niż ekran.
       Ofertę przełącza wyłącznie menu (obsługa w script.js).
       ========================================================= */
    #pillars-container { height: auto; }
    #pricing-section-container { overflow-x: hidden; }

    .pillar-sticky-wrapper {
        position: static;
        height: auto;
        min-height: 0;
        overflow: hidden;                 /* chroni przed poziomym scrollem od kart */
        padding: 16px var(--gutter) 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }
.toggle-pricing-btn{
    display: none;
}
    /* Spłaszczamy zagnieżdżenie (display: contents), aby TYTUŁ, MENU, KARUZELA
       i CTA stały się rodzeństwem i można było ustawić kolejność:
       TYTUŁ → MENU → KARUZELA → CTA */
    .pillars-text-container { display: contents; height: auto; }
    .pillar-text { display: none; }
    .pillar-text.active {
        display: contents;
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    .pillar-header { display: contents; }
.mb{display: none;}
    /* --- TYTUŁ: nad nawigacją, 90% szerokości, wyśrodkowany --- */
    .pillar-title {
        order: 1;
        position: relative;
        z-index: 30;                      /* nad rozmytym tłem filaru */
        width: 90vw;
        max-width: 90vw;
        margin: 20px auto;
        text-align: center;
        top: 0;
    }
.pillar-bg{
        transform: scale(1);

}
    /* --- NAWIGACJA cennika --- */
    .pillars-menu-container {
        order: 2;
        position: relative;
        z-index: 40;
        top: 0;
        margin: 0 0 20px;
        padding: 0;
        width: 100%;
        align-self: stretch;
    }

    /* --- KARUZELA: mniejsza, z odstępem od ścian --- */
    .pillar-pricing-grid.stack-grid {
        order: 3;
        width: 100%;
        max-width: 100%;
        min-height: 420px;
    }
    .overlay_pricing_card { width: min(300px, 80vw); }
    .overlay_pricing_card.card-left  { transform: translateX(-40px) scale(.85); }
    .overlay_pricing_card.card-right { transform: translateX(40px)  scale(.85); }

    /* --- CTA --- */
    .pillar-cta {
        order: 4;
        position: relative;
        z-index: 30;
        align-self: center;
        margin-top: 20px;
    }

    /* opis usługi schowany na mobile */
    .pillar-desc { display: none; }

    /* mniej pustej przestrzeni wokół cennika i sąsiednich sekcji */
    #cennik { padding-bottom: 10px; }
    #full-zoom-section { margin: 0; }
    #oferta { padding-top: 22px; }

    /* =========================================================
       STOPKA — wszystkie elementy wyśrodkowane
       ========================================================= */
    .aw-footer-container { text-align: center; }
    .aw-footer-cta { text-align: center; }
    .aw-footer-cta-sub { justify-content: center; }
    .aw-footer-main {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
    .aw-footer-left,
    .aw-footer-right { width: 100%; }
    .aw-footer-contact { display: flex; flex-direction: column; align-items: center; }
    .aw-footer-grid { justify-items: center; text-align: center; }
    .aw-footer-col { text-align: center; }
    .aw-footer-bottom { justify-content: center; text-align: center; }
    .aw-footer-socials { justify-content: center; width: 100%; }
}