/* ==========================================================================
   PixiFixi — mockup nowej strony (pixifixi.pl / pixifixi.app)
   Design system: "ciemne studio + jasna treść"
   Paleta 1:1 z aplikacji (tailwind.config.js -> primary = indigo #6366f1)
   ========================================================================== */

/* ---------- 1. Tokeny ---------- */
:root {
    /* marka — dokładnie te same wartości co w aplikacji */
    --indigo-50:  #eef2ff;
    --indigo-100: #e0e7ff;
    --indigo-200: #c7d2fe;
    --indigo-300: #a5b4fc;
    --indigo-400: #818cf8;
    --indigo-500: #6366f1;
    --indigo-600: #4f46e5;
    --indigo-700: #4338ca;
    --indigo-900: #312e81;

    --violet-500: #8b5cf6;
    --fuchsia-500:#d946ef;

    /* akcenty narzędzi — 1:1 z descMap w Editor/Index.jsx */
    --t-restore:    #3b82f6; /* blue    */
    --t-removebg:   #10b981; /* emerald */
    --t-background: #6366f1; /* indigo  */
    --t-object:     #f59e0b; /* amber   */
    --t-precise:    #f43f5e; /* rose    */
    --t-style:      #a855f7; /* purple  */
    --t-photoshoot: #ec4899; /* pink    */
    --t-wardrobe:   #6366f1; /* indigo  */
    --t-haircut:    #f97316; /* orange  */
    --t-collage:    #14b8a6; /* teal    */
    --t-animate:    #8b5cf6; /* violet  */
    --t-adjust:     #64748b; /* gray    */
    --t-custom:     #475569; /* slate   */
    --t-retouch:    #d946ef; /* fuchsia */

    /* ciemne studio */
    --ink:        #08080f;
    --ink-1:      #0d0d1c;
    --ink-2:      #14142b;
    --ink-line:   rgba(255,255,255,.10);
    --ink-text:   #f5f6ff;
    --ink-muted:  #a5a8c8;

    /* jasna treść */
    --paper:      #ffffff;
    --paper-2:    #f6f7fb;
    --line:       #e6e8f0;
    --text:       #0f1226;
    --muted:      #5a6080;

    --grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 52%, #d946ef 100%);
    --grad-soft: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 50%, #fdf4ff 100%);

    --r-sm: 10px;
    --r:    16px;
    --r-lg: 24px;
    --r-xl: 32px;

    --shadow-sm: 0 1px 2px rgba(15,18,38,.06), 0 4px 12px rgba(15,18,38,.05);
    --shadow:    0 4px 12px rgba(15,18,38,.07), 0 18px 40px -12px rgba(15,18,38,.14);
    --shadow-lg: 0 24px 70px -20px rgba(49,46,129,.45);

    --maxw: 1200px;
    --gut: 24px;

    --font: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- 2. Reset / baza ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font);
    color: var(--text);
    background: var(--paper);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: var(--indigo-600); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.15; letter-spacing: -.022em; font-weight: 800; }
h1 { font-size: clamp(2.05rem, 4.3vw, 3.35rem); letter-spacing: -.035em; text-wrap: balance; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); letter-spacing: -.03em; }
h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); }
p  { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }
li { margin-bottom: .4em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
::selection { background: var(--indigo-200); }

body { overflow-x: clip; }
/* elementy siatek muszą móc się kurczyć, inaczej poziome paski rozpychają layout */
.hero-grid > *, .showcase > *, .privacy-grid > *, .article-layout > *,
.tools-grid > *, .grid-2 > * { min-width: 0; }
.strip-scroll { max-width: 100%; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.wrap-narrow { max-width: 780px; margin: 0 auto; padding: 0 var(--gut); }
.section { padding: 88px 0; }
.section-sm { padding: 56px 0; }
.bg-alt { background: var(--paper-2); }
.center { text-align: center; }
.muted { color: var(--muted); }
.lead { font-size: 1.19rem; line-height: 1.6; color: var(--muted); }
.mb0 { margin-bottom: 0; }

/* nagłówek sekcji */
.sec-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.sec-head p { font-size: 1.13rem; color: var(--muted); margin-bottom: 0; }
.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .8rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--indigo-600); background: var(--indigo-50);
    padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
}
.dark .eyebrow, .hero .eyebrow {
    color: var(--indigo-200); background: rgba(99,102,241,.16);
    border: 1px solid rgba(165,180,252,.22);
}

/* ---------- 3. Przyciski ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-family: inherit; font-size: 1rem; font-weight: 700; line-height: 1;
    padding: 15px 26px; border-radius: 999px; border: 1px solid transparent;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    /* Przycisk nigdy nie może być szerszy od swojego kontenera — długa etykieta
       przy `nowrap` rozpychała stronę i robiła poziomy scroll na telefonie. */
    max-width: 100%;
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease,
                background-position .45s ease, color .16s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
/* Widoczny fokus klawiaturowy — CTA to główny element konwersyjny, nie może go gubić. */
.btn:focus-visible { outline: 3px solid var(--indigo-300); outline-offset: 3px; }
.dark .btn:focus-visible { outline-color: #fff; }
.btn svg { width: 19px; height: 19px; flex: none; }

/* Tekst jest biały w KAŻDYM stanie — czytelność CTA jest ważniejsza niż efekt.
   Sygnałem hovera jest więc sam gradient: tło jest dwa razy szersze niż przycisk
   i przesuwa się w stronę fuksji, do tego mocniejsza poświata i uniesienie z .btn. */
.btn-primary {
    background: var(--grad); background-size: 200% 100%; background-position: 0% 50%;
    color: #fff;
    box-shadow: 0 8px 24px -6px rgba(99,102,241,.6);
}
.btn-primary:hover,
.btn-primary:focus-visible {
    background-position: 100% 50%;
    box-shadow: 0 16px 38px -8px rgba(139,92,246,.75);
    color: #fff;
}

.btn-ghost {
    background: rgba(255,255,255,.06); color: var(--ink-text);
    border-color: rgba(255,255,255,.20); backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: rgba(255,255,255,.13); color: #fff; }

.btn-outline { background: #fff; color: var(--text); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-outline:hover { border-color: var(--indigo-300); color: var(--indigo-700); }

.btn-lg { font-size: 1.08rem; padding: 18px 34px; }
.btn-sm { font-size: .9rem; padding: 11px 18px; }
.btn-block { display: flex; width: 100%; }

/* ---------- 4. Header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 60;
    background: transparent; border-bottom: 1px solid transparent;
    transition: background .25s ease, border-color .25s ease;
}
.site-header.scrolled {
    background: rgba(8,8,15,.74); backdrop-filter: blur(14px) saturate(140%);
    border-bottom-color: var(--ink-line);
}
.site-header.on-light {
    background: rgba(255,255,255,.88); backdrop-filter: blur(14px) saturate(140%);
    border-bottom-color: var(--line);
}
.nav { display: flex; align-items: center; gap: 28px; height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.22rem; color: #fff; letter-spacing: -.02em; }
.brand:hover { text-decoration: none; }
.on-light .brand { color: var(--text); }
.brand-mark {
    width: 34px; height: 34px; border-radius: 10px; background: var(--grad);
    display: grid; place-items: center; color: #fff; font-size: 17px; flex: none;
    box-shadow: 0 4px 14px -4px rgba(99,102,241,.8);
}
.nav-links { display: flex; gap: 26px; margin-left: 12px; flex: 1; }
.nav-links a { color: rgba(255,255,255,.78); font-weight: 600; font-size: .96rem; }
.nav-links a:hover { color: #fff; text-decoration: none; }
.on-light .nav-links a { color: var(--muted); }
.on-light .nav-links a:hover { color: var(--indigo-600); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-login { color: rgba(255,255,255,.8); font-weight: 600; font-size: .95rem; }
.on-light .nav-login { color: var(--muted); }
.lang { display: inline-flex; gap: 4px; align-items: center; font-size: .88rem; font-weight: 700; color: rgba(255,255,255,.6); }
.on-light .lang { color: var(--muted); }
.burger { display: none; background: none; border: 0; color: #fff; padding: 8px; cursor: pointer; }
.on-light .burger { color: var(--text); }

/* ---------- 5. Sekcje ciemne ---------- */
.dark {
    background: var(--ink); color: var(--ink-text);
    position: relative; overflow: hidden;
}
.dark h1, .dark h2, .dark h3 { color: #fff; }
.dark p { color: var(--ink-muted); }
.dark .lead { color: #c8cbe6; }
/* Linki w ciemnych sekcjach są lawendowe, ale przycisk NIE jest linkiem w tym sensie —
   niesie własny kolor. Bez `:not(.btn)` ta reguła wygrywała z .btn-primary (stoi dalej
   w pliku przy tej samej wadze) i główne CTA wyglądało na wyłączone. */
.dark a:not(.btn) { color: var(--indigo-300); }

/* poświata / mesh */
.dark::before {
    content: ''; position: absolute; inset: -30% -10% auto -10%; height: 130%;
    background:
        radial-gradient(52% 46% at 18% 8%,  rgba(99,102,241,.42) 0%, transparent 62%),
        radial-gradient(44% 44% at 82% 18%, rgba(217,70,239,.24) 0%, transparent 60%),
        radial-gradient(60% 50% at 55% 92%, rgba(139,92,246,.22) 0%, transparent 64%);
    pointer-events: none;
}
.dark > * { position: relative; z-index: 1; }
/* delikatna siatka */
.dark::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .35;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 78%);
}

/* ---------- 6. Hero ---------- */
.hero { padding: 76px 0 92px; }
.hero-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.hero h1 { margin-bottom: 20px; }
.hero h1 .grad {
    background: linear-gradient(100deg, #a5b4fc 0%, #d8b4fe 45%, #f0abfc 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { font-size: 1.2rem; color: #c8cbe6; max-width: 52ch; margin-bottom: 30px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .95rem; color: var(--ink-muted); }
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust svg { width: 17px; height: 17px; color: #34d399; flex: none; }

.rating { display: flex; align-items: center; gap: 12px; margin-top: 26px; }
.rating-avatars { display: flex; }
.rating-avatars img {
    width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--ink-1); margin-left: -11px;
}
.rating-avatars img:first-child { margin-left: 0; }
.rating-text { font-size: .92rem; color: var(--ink-muted); line-height: 1.35; }
.rating-text b { color: #fff; display: block; }
.stars { color: #fbbf24; letter-spacing: 1px; }

/* ---------- 7. Before / after ---------- */
.ba {
    position: relative; border-radius: var(--r-lg); overflow: hidden;
    box-shadow: var(--shadow-lg); background: #0b0b16;
    aspect-ratio: 1/1; user-select: none; touch-action: pan-y;
    border: 1px solid rgba(255,255,255,.10);
}
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba .ba-after { clip-path: inset(0 0 0 50%); }
.ba-handle {
    position: absolute; top: 0; bottom: 0; left: 50%; width: 3px;
    background: rgba(255,255,255,.92); transform: translateX(-50%);
    cursor: ew-resize; z-index: 3; box-shadow: 0 0 0 1px rgba(0,0,0,.14);
}
.ba-knob {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 48px; height: 48px; border-radius: 50%; background: #fff;
    display: grid; place-items: center; color: var(--indigo-600);
    box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.ba-knob svg { width: 22px; height: 22px; }
.ba-tag {
    position: absolute; bottom: 14px; z-index: 2;
    font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    padding: 7px 13px; border-radius: 999px; color: #fff;
    background: rgba(8,8,15,.62); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.16);
}
.ba-tag.left { left: 14px; }
.ba-tag.right { right: 14px; }
.ba-hint {
    position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 2;
    font-size: .8rem; font-weight: 600; color: #fff; padding: 7px 15px; border-radius: 999px;
    background: rgba(8,8,15,.55); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.16);
    display: flex; align-items: center; gap: 7px; pointer-events: none;
    transition: opacity .3s ease;
}
.ba.touched .ba-hint { opacity: 0; }
.ba-hint svg { width: 15px; height: 15px; }

/* przełącznik przykładów pod sliderem */
.ba-switch { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; justify-content: center; }
.ba-chip {
    font-family: inherit; font-size: .88rem; font-weight: 700; cursor: pointer;
    padding: 9px 15px; border-radius: 999px; color: var(--ink-muted);
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.13);
    transition: all .18s ease; display: inline-flex; align-items: center; gap: 7px;
}
.ba-chip:hover { color: #fff; background: rgba(255,255,255,.11); }
.ba-chip[aria-selected="true"] { background: var(--grad); color: #fff; border-color: transparent; }
.ba-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .75; }

/* wariant na jasnym tle */
.ba-light { box-shadow: var(--shadow); border-color: var(--line); }
.ba-light .ba-chip { color: var(--muted); background: #fff; border-color: var(--line); }
.ba-light-switch .ba-chip { color: var(--muted); background: #fff; border-color: var(--line); }
.ba-light-switch .ba-chip:hover { color: var(--indigo-600); border-color: var(--indigo-300); background: #fff; }
.ba-light-switch .ba-chip[aria-selected="true"] { background: var(--grad); color: #fff; border-color: transparent; }

/* ---------- 8. Pasek statystyk ---------- */
.stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
    border-top: 1px solid var(--ink-line); border-bottom: 1px solid var(--ink-line);
    padding: 30px 0;
}
.stat { text-align: center; }
.stat b { display: block; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: #fff; letter-spacing: -.03em; }
.stat span { font-size: .89rem; color: var(--ink-muted); }

/* ---------- 9. Siatka narzędzi ---------- */
.tools-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 18px;
}
.tool-card {
    position: relative; background: #fff; border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 24px; display: flex; flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    overflow: hidden;
}
.tool-card::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: var(--accent, var(--indigo-500)); opacity: 0;
    transition: opacity .2s ease;
}
.tool-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.tool-card:hover::before { opacity: 1; }
.tool-ico {
    width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
    background: color-mix(in srgb, var(--accent) 12%, #fff);
    color: var(--accent); margin-bottom: 16px; flex: none;
}
.tool-ico svg { width: 23px; height: 23px; }
.tool-card h3 { font-size: 1.13rem; margin-bottom: 8px; }
.tool-card h3 .tool-title { color: inherit; text-decoration: none; transition: color .15s ease; }
.tool-card h3 .tool-title:hover, .tool-card h3 .tool-title:focus-visible { color: var(--accent, var(--indigo-600)); }
.tool-card p { font-size: .95rem; color: var(--muted); margin-bottom: 18px; flex: 1; line-height: 1.55; }
.tool-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.credits {
    font-size: .8rem; font-weight: 700; padding: 5px 11px; border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 10%, #fff);
    color: color-mix(in srgb, var(--accent) 78%, #000);
    white-space: nowrap;
}
.tool-link { font-size: .9rem; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; color: var(--accent); }
.tool-link svg { width: 15px; height: 15px; transition: transform .18s ease; }
.tool-card:hover .tool-link svg { transform: translateX(3px); }
/* kafel CTA domykający siatkę narzędzi */
.tools-cta {
    grid-column: span 2; background: var(--ink); color: #fff; border-radius: var(--r-lg);
    padding: 32px; display: flex; align-items: center; gap: 28px; position: relative; overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.tools-cta::before {
    content: ''; position: absolute; inset: -60% -10% auto -10%; height: 200%;
    background: radial-gradient(45% 50% at 20% 10%, rgba(99,102,241,.55) 0%, transparent 62%),
                radial-gradient(45% 45% at 88% 40%, rgba(217,70,239,.4) 0%, transparent 60%);
}
.tools-cta > * { position: relative; }
.tools-cta h3 { color: #fff; font-size: 1.35rem; margin-bottom: 6px; }
.tools-cta p { color: var(--ink-muted); font-size: .96rem; margin-bottom: 0; }
.tools-cta .btn { flex: none; }
@media (max-width: 720px) {
    .tools-cta { grid-column: span 1; flex-direction: column; align-items: flex-start; text-align: left; }
    .tools-cta .btn { width: 100%; }
}

.tool-badge {
    position: absolute; top: 16px; right: 16px; font-size: .68rem; font-weight: 800;
    letter-spacing: .07em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px;
    background: var(--grad); color: #fff;
}

/* ---------- 10. Kroki ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.step { text-align: center; }
.step-num {
    width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 18px;
    display: grid; place-items: center; font-size: 1.35rem; font-weight: 800; color: #fff;
    background: var(--grad); box-shadow: 0 8px 22px -8px rgba(99,102,241,.75);
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--muted); font-size: .98rem; margin-bottom: 0; }

/* Kroki obok pionowego filmu (landing z l.video) */
.steps-video { display: grid; grid-template-columns: 1fr 300px; gap: 56px; align-items: center; max-width: 920px; margin: 0 auto; }
.steps-col { grid-template-columns: 1fr; gap: 26px; }
.steps-col .step { display: grid; grid-template-columns: 56px 1fr; gap: 0 18px; text-align: left; align-items: start; }
.steps-col .step-num { margin: 0; }
.yt-short { margin: 0; width: 100%; max-width: 300px; justify-self: center; }
.yt-short figcaption { text-align: center; color: var(--muted); font-size: .9rem; margin-top: 12px; }
.yt-facade, .yt-short iframe {
    position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; padding: 0; border: 8px solid #111;
    border-radius: 34px; overflow: hidden; background: #000; box-shadow: 0 24px 60px -24px rgba(17,17,39,.55);
}
.yt-facade { cursor: pointer; }
.yt-facade img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.yt-facade:hover img { transform: scale(1.03); }
.yt-play { position: absolute; inset: 0; display: grid; place-items: center; }
.yt-play svg { width: 72px; height: 51px; filter: drop-shadow(0 6px 16px rgba(0,0,0,.45)); transition: transform .2s ease; }
.yt-facade:hover .yt-play svg, .yt-facade:focus-visible .yt-play svg { transform: scale(1.1); }
.yt-dur { position: absolute; right: 12px; bottom: 12px; background: rgba(0,0,0,.75); color: #fff; font-size: .8rem; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
@media (max-width: 860px) {
    .steps-video { grid-template-columns: 1fr; gap: 36px; }
    .yt-short { max-width: 280px; }
}

/* ---------- 11. Showcase (naprzemienne) ---------- */
.showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.showcase + .showcase { margin-top: 96px; }
.showcase.rev .showcase-media { order: -1; }
.showcase h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.showcase .tool-ico { margin-bottom: 18px; }
.feature-list { list-style: none; padding: 0; margin: 0 0 26px; }
.feature-list li { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 11px; font-size: 1rem; }
.feature-list svg { width: 20px; height: 20px; color: var(--accent, var(--indigo-500)); flex: none; margin-top: 2px; }

/* pasek miniatur (sesje, fryzury, ubrania, style) */
.thumb-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.thumb-strip img { border-radius: 14px; aspect-ratio: 1/1; object-fit: cover; box-shadow: var(--shadow-sm); }
.thumb-strip .more {
    border-radius: 14px; aspect-ratio: 1/1; display: grid; place-items: center; text-align: center;
    background: var(--grad-soft); border: 1px dashed var(--indigo-200);
    color: var(--indigo-700); font-weight: 800; font-size: .95rem; line-height: 1.25; padding: 8px;
}
.strip-scroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: thin; }
.strip-scroll img { width: 108px; flex: none; border-radius: 12px; aspect-ratio: 1/1; object-fit: cover; }

/* ---------- 12. Jakość / tiery ---------- */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tier {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px;
    position: relative;
}
.tier.featured { border-color: var(--indigo-300); box-shadow: 0 18px 44px -20px rgba(99,102,241,.5); }
.tier h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.tier .res {
    font-size: .7rem; font-weight: 800; padding: 3px 8px; border-radius: 6px;
    background: var(--indigo-50); color: var(--indigo-700);
}
.tier .price { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; margin: 10px 0 4px; }
.tier .price span { font-size: .95rem; font-weight: 600; color: var(--muted); }
.tier p { font-size: .95rem; color: var(--muted); margin-bottom: 0; }

/* ---------- 13. Cennik ---------- */
.pricing { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.pack {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 22px;
    display: flex; flex-direction: column; position: relative;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pack:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--indigo-200); }
.pack.best { border-color: var(--indigo-500); box-shadow: 0 20px 50px -22px rgba(99,102,241,.6); }
.pack-tag {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--grad); color: #fff; font-size: .72rem; font-weight: 800;
    letter-spacing: .07em; text-transform: uppercase; padding: 5px 13px; border-radius: 999px;
    white-space: nowrap;
}
.pack h3 { font-size: 1.05rem; margin-bottom: 4px; }
.pack .cr { font-size: 2.4rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; margin: 12px 0 2px;
    background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pack .cr-lab { font-size: .9rem; color: var(--muted); margin-bottom: 16px; }
.pack .pr { font-size: 1.45rem; font-weight: 800; margin-bottom: 2px; }
.pack .per { font-size: .84rem; color: var(--muted); margin-bottom: 20px; }
.pack .btn { margin-top: auto; }

/* tabela kosztów */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }
table.cost { width: 100%; border-collapse: collapse; font-size: .97rem; min-width: 560px; }
table.cost th, table.cost td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); }
table.cost th { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); background: var(--paper-2); font-weight: 700; }
table.cost tr:last-child td { border-bottom: 0; }
table.cost td:first-child { font-weight: 700; display: flex; align-items: center; gap: 10px; }
table.cost .dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* ---------- 14. Opinie ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.quote {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px;
    display: flex; flex-direction: column;
}
.quote .stars { font-size: 1rem; margin-bottom: 12px; }
.quote p { font-size: 1rem; line-height: 1.6; flex: 1; }
.quote-who { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.quote-who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.quote-mono {
    flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center; font-weight: 800; font-size: 1.05rem; color: #fff;
    background: linear-gradient(135deg, var(--indigo-500), var(--violet-500));
}
.quote-who b { display: block; font-size: .96rem; }
.quote-who span { font-size: .85rem; color: var(--muted); }

/* ---------- 15. FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq details {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r);
    margin-bottom: 10px; overflow: hidden; transition: border-color .18s ease;
}
.faq details[open] { border-color: var(--indigo-200); box-shadow: var(--shadow-sm); }
.faq summary {
    cursor: pointer; list-style: none; padding: 19px 56px 19px 22px; position: relative;
    font-weight: 700; font-size: 1.05rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: '+'; position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
    font-size: 1.5rem; font-weight: 400; color: var(--indigo-500); line-height: 1;
}
.faq details[open] summary::after { content: '−'; }
.faq .faq-body { padding: 0 22px 20px; color: var(--muted); }
.faq .faq-body p:last-child { margin-bottom: 0; }

/* ---------- 16. Karty CTA ---------- */
.cta-band { border-radius: var(--r-xl); padding: 60px 44px; text-align: center; }
.cta-band h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.cta-band .btn { margin-top: 8px; }
.cta-note { font-size: .93rem; margin-top: 16px; }

/* karta CTA w treści artykułu */
.cta-inline {
    background: var(--grad); border-radius: var(--r-lg); padding: 30px 32px; color: #fff;
    display: flex; gap: 26px; align-items: center; margin: 40px 0;
    box-shadow: 0 22px 50px -24px rgba(99,102,241,.85);
}
.cta-inline h3 { color: #fff; font-size: 1.35rem; margin-bottom: 6px; }
.cta-inline p { color: rgba(255,255,255,.9); font-size: .98rem; margin-bottom: 0; }
.cta-inline .btn {
    background: #fff; color: var(--indigo-700); flex: none; box-shadow: 0 8px 20px rgba(0,0,0,.16);
}
.cta-inline .btn:hover { background: #fff; color: var(--indigo-700); }
.cta-inline-body { flex: 1; }

/* lżejsza wersja inline */
.cta-soft {
    background: var(--grad-soft); border: 1px solid var(--indigo-100);
    border-radius: var(--r-lg); padding: 26px 28px; margin: 36px 0;
    display: flex; gap: 22px; align-items: center;
}
.cta-soft h3 { font-size: 1.15rem; margin-bottom: 5px; }
.cta-soft p { margin-bottom: 0; font-size: .95rem; color: var(--muted); }

/* ---------- 17. Artykuł ---------- */
.article-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 56px; align-items: start; }
.article { max-width: 720px; font-size: 1.08rem; }
.article h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 2.2em; }
.article h3 { margin-top: 1.8em; }
.article > *:first-child { margin-top: 0; }
.article img { border-radius: var(--r); box-shadow: var(--shadow-sm); }
.article figure { margin: 32px 0; }
.article figcaption { font-size: .88rem; color: var(--muted); text-align: center; margin-top: 10px; }
.article blockquote {
    margin: 30px 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--indigo-400);
    font-size: 1.12rem; font-style: italic; color: var(--text);
}

.breadcrumb { font-size: .9rem; color: var(--muted); margin-bottom: 18px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--indigo-600); }

.post-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .92rem; color: var(--muted); margin-bottom: 28px; }
.post-meta span { display: inline-flex; align-items: center; gap: 6px; }
.post-meta svg { width: 16px; height: 16px; }

/* BLUF / szybka odpowiedź */
.tldr {
    background: var(--indigo-50); border: 1px solid var(--indigo-100);
    border-left: 4px solid var(--indigo-500);
    border-radius: var(--r); padding: 22px 24px; margin-bottom: 34px;
}
.tldr b { display: flex; align-items: center; gap: 8px; font-size: .8rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--indigo-700); margin-bottom: 10px; }
.tldr p { margin-bottom: 0; font-size: 1.05rem; }

/* spis treści */
.toc { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 24px; margin-bottom: 34px; }
.toc b { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.toc ol { margin: 12px 0 0; padding-left: 20px; }
.toc li { margin-bottom: 6px; font-size: .98rem; }

/* sidebar */
.sidebar { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 18px; }
.side-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-sm); }
.side-card h4 { font-size: 1.05rem; margin-bottom: 12px; }
.side-card.hot {
    background: var(--ink); color: #fff; border-color: transparent; overflow: hidden;
    position: relative; box-shadow: var(--shadow-lg);
}
.side-card.hot::before {
    content: ''; position: absolute; inset: -60% -20% auto -20%; height: 160%;
    background: radial-gradient(50% 50% at 30% 10%, rgba(99,102,241,.55) 0%, transparent 65%),
                radial-gradient(45% 45% at 85% 30%, rgba(217,70,239,.35) 0%, transparent 62%);
}
.side-card.hot > * { position: relative; }
.side-card.hot h4 { color: #fff; font-size: 1.18rem; }
.side-card.hot p { color: var(--ink-muted); font-size: .94rem; }
.side-ba { border-radius: var(--r); overflow: hidden; margin-bottom: 16px; }

.side-list { list-style: none; padding: 0; margin: 0; }
.side-list li { border-bottom: 1px solid var(--line); }
.side-list li:last-child { border-bottom: 0; }
.side-list a { display: flex; align-items: center; gap: 12px; padding: 11px 0; color: var(--text); font-weight: 600; font-size: .96rem; }
.side-list a:hover { text-decoration: none; color: var(--indigo-600); }
.side-list .tool-ico { width: 34px; height: 34px; border-radius: 10px; margin: 0; }
.side-list .tool-ico svg { width: 17px; height: 17px; }
.side-list small { display: block; font-weight: 500; color: var(--muted); font-size: .8rem; }

/* pasek postępu czytania */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100; background: var(--grad); transition: width .1s linear; }

/* powiązane */
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rel-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.rel-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.rel-card img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.rel-card .rel-body { padding: 18px 20px 22px; }
.rel-card h3 { font-size: 1.03rem; margin-bottom: 6px; }
.rel-card p { font-size: .9rem; color: var(--muted); margin-bottom: 0; }
.rel-card a { color: inherit; }

/* ---------- 18. Sticky CTA (mobile + artykuł) ---------- */
.sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: rgba(255,255,255,.94); backdrop-filter: blur(14px);
    border-top: 1px solid var(--line); padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    display: none; align-items: center; gap: 14px;
    box-shadow: 0 -8px 30px -10px rgba(15,18,38,.2);
    transform: translateY(110%); transition: transform .28s ease;
}
.sticky-cta.show { transform: translateY(0); }
.sticky-cta .sc-text { flex: 1; min-width: 0; }
.sticky-cta .sc-text b { display: block; font-size: .96rem; line-height: 1.2; }
.sticky-cta .sc-text span { font-size: .82rem; color: var(--muted); }

/* ---------- 19. Prywatność ---------- */
.privacy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.privacy-list { list-style: none; padding: 0; margin: 0; }
.privacy-list li { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.privacy-list .pico {
    width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none;
    background: rgba(52,211,153,.14); color: #34d399;
}
.privacy-list .pico svg { width: 20px; height: 20px; }
.privacy-list b { display: block; margin-bottom: 2px; }
.privacy-list p { margin: 0; font-size: .95rem; }

/* ---------- 20. Footer ---------- */
.site-footer { background: var(--ink); color: var(--ink-muted); padding: 64px 0 32px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.site-footer h5 { color: #fff; font-size: .85rem; text-transform: uppercase; letter-spacing: .09em; margin: 0 0 16px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer a { color: var(--ink-muted); font-size: .95rem; }
.site-footer a:hover { color: #fff; text-decoration: none; }
.foot-brand p { font-size: .95rem; max-width: 34ch; }
.foot-bottom {
    margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--ink-line);
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .88rem;
}

/* ---------- 21. Pomocnicze ---------- */
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
    font-size: .84rem; font-weight: 700; padding: 7px 14px; border-radius: 999px;
    background: #fff; border: 1px solid var(--line); color: var(--muted);
}
.note {
    font-size: .84rem; color: var(--muted); background: #fffbeb; border: 1px dashed #fcd34d;
    padding: 10px 14px; border-radius: 10px; margin: 12px 0;
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* ---------- 22. RWD ---------- */
@media (max-width: 1024px) {
    .hero-grid, .showcase, .privacy-grid { grid-template-columns: 1fr; gap: 40px; }
    .showcase.rev .showcase-media { order: 0; }
    .article-layout { grid-template-columns: 1fr; }
    .sidebar { position: static; }
    .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .quotes, .related, .steps, .tiers { grid-template-columns: 1fr 1fr; }
    .nav-links { display: none; }
    .burger { display: block; }
}
@media (max-width: 720px) {
    body { font-size: 16px; }
    .section { padding: 60px 0; }
    .hero { padding: 48px 0 64px; }
    .stats { grid-template-columns: 1fr 1fr; gap: 22px 8px; }
    .quotes, .related, .steps, .tiers, .grid-2 { grid-template-columns: 1fr; }
    .cta-inline, .cta-soft { flex-direction: column; align-items: flex-start; text-align: left; }
    .cta-inline .btn, .cta-soft .btn { width: 100%; }
    .cta-band { padding: 44px 22px; }
    .foot-grid { grid-template-columns: 1fr; }
    .sticky-cta { display: flex; }
    .nav-login, .lang { display: none; }
    body.has-sticky { padding-bottom: 84px; }
    .thumb-strip { grid-template-columns: repeat(3, 1fr); }
    .hero-cta .btn { width: 100%; }
    /* Na wąskim ekranie dłuższe etykiety muszą móc się złamać zamiast rozpychać stronę. */
    .btn { white-space: normal; text-align: center; }
    /* ...ale CTA w nagłówku mieści się w jednej linii — łamało się tylko dlatego,
       że flex je ściskał. Bez kurczenia zostaje jednoliniowe i pasek jest niski. */
    .nav-cta .btn { flex: none; }

    /* Na mobile `.nav-links` (jedyny element z flex:1) jest ukryte, więc nic nie dopycha
       grupy CTA do prawej — trzymała się krawędzi tylko dlatego, że akurat wypełniała
       wiersz. Przy krótszej etykiecie („Start free") odpływała ku środkowi. */
    .nav-cta { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
}

/* ---------- Mobile nav dropdown (burger) ---------- */
@media (max-width: 1024px) {
    .site-header.nav-open .nav-links {
        display: flex; flex-direction: column; gap: 4px;
        position: absolute; top: 72px; left: 0; right: 0;
        padding: 14px 20px 20px;
        background: rgba(8,8,15,.97); backdrop-filter: blur(14px) saturate(140%);
        border-bottom: 1px solid var(--ink-line); box-shadow: var(--shadow-lg);
    }
    .site-header.on-light.nav-open .nav-links { background: rgba(255,255,255,.98); border-bottom-color: var(--line); }
    .site-header.nav-open .nav-links a { padding: 11px 4px; font-size: 1.05rem; }
    .burger.is-open { color: var(--indigo-400); }
}

/* ---------- Logo (obraz zamiast wordmarku) ---------- */
.brand img { height: 45px; width: auto; display: block; }
.brand .logo-d { display: none; }                              /* domyślnie (ciemny header) = białe logo */
.site-header.on-light .brand .logo-w { display: none; }        /* jasny header po scrollu = ciemne logo */
.site-header.on-light .brand .logo-d { display: block; }
@media (max-width: 480px) { .brand img { height: 34px; } }

/* ---------- Miniatura przed/po na karcie narzędzia ---------- */
.tool-thumb {
    position: relative; display: block; margin: -24px -24px 18px; aspect-ratio: 1 / 1;
    overflow: hidden; background: #ecedf3;
}
.tool-thumb img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.tool-thumb .t-before { opacity: 0; transition: opacity .35s ease; }
.tool-card:hover .tool-thumb .t-before { opacity: 1; }
.tool-thumb .tool-ico {
    position: absolute; top: 12px; left: 12px; width: 40px; height: 40px; border-radius: 11px;
    margin: 0; z-index: 2; background: var(--accent); color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.28);
}
.tool-thumb .tool-ico svg { width: 20px; height: 20px; }
/* Plakietka stanu: mówi, KTÓRE zdjęcie widać teraz, zamiast statycznego „przed ↔ po".
   Etykiety leżą na sobie w gridzie (stała szerokość, brak skakania) i przenikają się
   dokładnie w tym samym rytmie co obrazek. Kolor niesie informację: neutralny = wynik,
   akcent narzędzia = oryginał. Teksty z i18n, nie z `content` — stąd brak wariantu .lang-en. */
.t-tag {
    position: absolute; bottom: 10px; right: 10px; z-index: 2;
    display: grid; place-items: center; min-width: 44px; padding: 4px 9px; border-radius: 999px;
    font-size: .64rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    color: #fff; background: rgba(0,0,0,.52); backdrop-filter: blur(4px);
    transition: background-color .35s ease, transform .35s ease;
}
.t-tag > span { grid-area: 1 / 1; transition: opacity .35s ease; }
.t-tag-before { opacity: 0; }
.t-tag-after  { opacity: 1; }

/* Hover = pokazujemy oryginał, więc plakietka mówi „przed" i zapala się akcentem. */
.tool-card:hover .t-tag-before { opacity: 1; }
.tool-card:hover .t-tag-after  { opacity: 0; }
.tool-card:hover .t-tag { background-color: var(--accent); transform: scale(1.07); }

/* ---------- Miniatura: auto-crossfade na dotyku (brak hovera) ---------- */
@media (hover: none) {
    .tool-thumb .t-before,
    .tool-thumb .t-tag-before { animation: baAutoFade 6s ease-in-out infinite; }
    .tool-thumb .t-tag-after  { animation: baAutoFadeInv 6s ease-in-out infinite; }
    .tool-thumb .t-tag:not(.t-tag-video) { animation: baTagPulse 6s ease-in-out infinite; }

    /* rozjazd startu, żeby karty nie mrugały jednocześnie — obrazek i plakietka
       muszą dostać TO SAMO opóźnienie, inaczej rozjadą się względem siebie */
    .tools-grid > .tool-card:nth-child(3n+2) :is(.t-before, .t-tag-before, .t-tag-after, .t-tag) { animation-delay: 2s; }
    .tools-grid > .tool-card:nth-child(3n)   :is(.t-before, .t-tag-before, .t-tag-after, .t-tag) { animation-delay: 4s; }
}
@keyframes baAutoFade {
    0%, 42%  { opacity: 0; }   /* „po" (wynik) */
    54%, 92% { opacity: 1; }   /* „przed" (oryginał) */
    100%     { opacity: 0; }
}
@keyframes baAutoFadeInv {     /* etykieta „po" — dokładna odwrotność */
    0%, 42%  { opacity: 1; }
    54%, 92% { opacity: 0; }
    100%     { opacity: 1; }
}
@keyframes baTagPulse {        /* podświetlenie dokładnie w momencie przełączenia */
    0%, 42%   { background-color: rgba(0,0,0,.52); transform: scale(1); }
    48%       { transform: scale(1.1); }
    54%, 92%  { background-color: var(--accent); transform: scale(1); }
    97%       { transform: scale(1.1); }
    100%      { background-color: rgba(0,0,0,.52); transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .tool-thumb .t-before,
    .tool-thumb .t-tag, .tool-thumb .t-tag > span { animation: none !important; }
}

/* ---------- Biały pasek u samej góry (strona z ciemnym hero, przed scrollem) ----------
   Header jest wtedy przezroczysty nad jasnym tłem, więc logo i menu muszą być CIEMNE,
   żeby były widoczne. Po scrollu (.scrolled nad hero / .on-light nad treścią) obowiązują
   dotychczasowe reguły. */
.site-header:not(.scrolled):not(.on-light) .brand { color: var(--text); }
.site-header:not(.scrolled):not(.on-light) .logo-w { display: none; }
.site-header:not(.scrolled):not(.on-light) .logo-d { display: block; }
.site-header:not(.scrolled):not(.on-light) .nav-links a { color: var(--muted); }
.site-header:not(.scrolled):not(.on-light) .nav-links a:hover { color: var(--indigo-600); }
.site-header:not(.scrolled):not(.on-light) .nav-login { color: var(--text); }
.site-header:not(.scrolled):not(.on-light) .lang { color: var(--muted); }
.site-header:not(.scrolled):not(.on-light) .burger { color: var(--text); }

/* ---------- Przełącznik języka PL/EN ----------
   Kolory ustawione WPROST na elementach, nie dziedziczone z .lang — kontener bywa
   przemalowany przez reguły stanu nagłówka i aktywny język robił się ciemniejszy
   od nieaktywnego. Deklaracja na potomku zawsze wygrywa z dziedziczeniem. */
.lang a,
.lang .lang-cur { padding: 2px 3px; border-radius: 6px; text-decoration: none; }
.lang a { color: rgba(255,255,255,.58); transition: color .15s ease; }
.lang a:hover,
.lang a:focus-visible { color: #fff; text-decoration: none; }
.lang .lang-cur { color: #fff; cursor: default; }
.lang-sep { opacity: .35; }
.lang-mobile { display: none; }

/* Stany nagłówka — dokładnie te same co dla .nav-links a / .nav-login:
   .scrolled = ciemna szyba (tekst jasny), .on-light oraz biały pasek u góry
   (:not(.scrolled):not(.on-light)) = tekst ciemny. */
.site-header.on-light .lang a,
.site-header:not(.scrolled):not(.on-light) .lang a { color: var(--muted); }
.site-header.on-light .lang a:hover,
.site-header.on-light .lang a:focus-visible,
.site-header:not(.scrolled):not(.on-light) .lang a:hover,
.site-header:not(.scrolled):not(.on-light) .lang a:focus-visible { color: var(--indigo-600); }
.site-header.on-light .lang .lang-cur,
.site-header:not(.scrolled):not(.on-light) .lang .lang-cur { color: var(--text); }

@media (max-width: 720px) {
    /* na mobile przełącznik przenosi się do rozwijanego menu (ten w pasku jest ukryty) */
    .nav-links .lang-mobile {
        display: inline-flex; width: 100%; gap: 6px;
        margin-top: 6px; padding: 12px 4px 4px;
        border-top: 1px solid rgba(255,255,255,.12); font-size: 1.05rem;
    }
    .site-header.on-light .nav-links .lang-mobile { border-top-color: var(--line); }

    /* Rozwinięte menu maluje własne tło (ciemne, a przy .on-light białe), więc kolory
       liczą się względem NIEGO, nie względem stanu paska u góry strony. */
    .site-header.nav-open .nav-links .lang a { color: rgba(255,255,255,.62); }
    .site-header.nav-open .nav-links .lang a:hover { color: #fff; }
    .site-header.nav-open .nav-links .lang .lang-cur { color: #fff; }
    .site-header.on-light.nav-open .nav-links .lang a { color: var(--muted); }
    .site-header.on-light.nav-open .nav-links .lang a:hover { color: var(--indigo-600); }
    .site-header.on-light.nav-open .nav-links .lang .lang-cur { color: var(--text); }
}

/* ---------- Lista wpisów (blog, kategoria, tag, wyszukiwarka) ---------- */
.post-list { align-items: stretch; }
.post-list .rel-card { display: flex; flex-direction: column; }
.rel-media { display: block; }
.rel-media img {
    display: block; width: 100%; height: auto;
    aspect-ratio: 16/10; object-fit: cover;
}
.rel-fallback {
    display: grid; place-items: center; aspect-ratio: 16/10;
    background: var(--grad-soft); color: var(--indigo-400);
}
.rel-body { display: flex; flex-direction: column; flex: 1; }
.rel-meta {
    font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 8px;
}
.rel-card h3 a { color: inherit; }
.rel-card h3 a:hover { color: var(--indigo-600); text-decoration: none; }
.rel-more { margin-top: 14px; color: var(--indigo-600); }
.rel-card:hover .rel-more svg { transform: translateX(3px); }

/* ---------- Paginacja ---------- */
.pager {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 8px; margin-top: 44px;
}
.pager-num, .pager-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 42px; height: 42px; padding: 0 14px; border-radius: 999px;
    font-weight: 700; font-size: .95rem; color: var(--muted);
    background: #fff; border: 1px solid var(--line); text-decoration: none;
    transition: border-color .16s ease, color .16s ease;
}
.pager-num:hover, .pager-arrow:hover { color: var(--indigo-600); border-color: var(--indigo-300); text-decoration: none; }
.pager-num.is-current { background: var(--grad); border-color: transparent; color: #fff; }
.pager-dots { background: none; border-color: transparent; }

/* ---------- Wpis ---------- */
.post-hero {
    width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow);
    margin-bottom: 8px;
}
.post-content { font-size: 1.08rem; }
.post-content > *:first-child { margin-top: 0; }
.post-content h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 1.9em; }
.post-content h3 { margin-top: 1.6em; }
.post-content img { border-radius: var(--r); height: auto; }
.post-content figure { margin: 32px 0; }
.post-content figcaption { font-size: .88rem; color: var(--muted); text-align: center; margin-top: 10px; }
/* Pionowe Shorts osadzone blokiem embed: wyśrodkowane (podpis i tak jest centrowany) i bez
   sztywnych 422 px z oEmbed, które na wąskim telefonie wychodziły poza ekran. */
.post-content .wp-embed-aspect-9-16 .wp-block-embed__wrapper { display: flex; justify-content: center; }
.post-content .wp-embed-aspect-9-16 iframe { width: 100%; max-width: 360px; height: auto; aspect-ratio: 9 / 16; border-radius: var(--r); }
.post-content blockquote {
    margin: 30px 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--indigo-400);
    font-size: 1.12rem; font-style: italic;
}
.post-content table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: .97rem; }
.post-content th, .post-content td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; }
.post-content th { background: var(--paper-2); font-weight: 700; }

/* ---------- Kafelek z wideo (ożywianie) ---------- */
.tool-thumb .t-video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    display: block; background: #000;
}
/* plakietka „wideo" — inny układ niż para przed/po, więc nadpisujemy grid */
.t-tag-video {
    display: inline-flex; align-items: center; gap: 5px;
    animation: none !important;              /* nie bierze udziału w crossfade */
}
.t-tag-video svg { width: 9px; height: 9px; }
.tool-card:hover .t-tag-video,
.tool-card.is-playing .t-tag-video { background-color: var(--accent); transform: scale(1.07); }

/* ---------- Pas konkretów na landingu narzędzia ---------- */
.specs {
    background: var(--paper-2); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 28px 32px;
}
.specs-title {
    font-size: .8rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    color: var(--muted); margin: 0 0 18px;
}
.specs-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px 28px; margin: 0; }
.spec { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.spec dt { font-size: .82rem; color: var(--muted); }
.spec dd { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--text); line-height: 1.35; }
@media (max-width: 720px) {
    .specs { padding: 22px 20px; }
    .specs-list { grid-template-columns: 1fr 1fr; gap: 16px 18px; }
}

/* ---------- „Czego nie zrobi" — uczciwe ograniczenia ---------- */
.limits {
    max-width: 820px; margin: 0 auto; background: #fffdf7;
    border: 1px solid #f3e6c8; border-left: 4px solid #e9b949;
    border-radius: var(--r-lg); padding: 26px 30px;
}
.limits-title {
    font-size: 1.05rem; font-weight: 800; margin: 0 0 14px; color: var(--text);
}
.limits-list { margin: 0; padding-left: 1.15em; }
.limits-list li { margin-bottom: 10px; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.limits-list li:last-child { margin-bottom: 0; }
@media (prefers-color-scheme: dark) { .limits { background: #fffdf7; } }
@media (max-width: 720px) { .limits { padding: 22px 20px; } }

/* ---------- Odstępy MIĘDZY sekcjami (rozwiązanie generyczne) ----------
   Padding sekcji z własnym tłem (.bg-alt, .dark) siedzi WEWNĄTRZ tego tła, więc
   nie tworzy przerwy na zewnątrz — sekcja pod nim przylegała do krawędzi koloru.
   Odwrotnie: dwie sąsiadujące sekcje bez tła mnożyły odstęp przez dwa (88+88).
   Wcześniej łatane inline przez `style="padding-top:0"`, co naprawiało drugi
   przypadek i psuło pierwszy. Reguły niżej rozstrzygają to raz dla całego motywu. */

/* dwie sekcje bez tła obok siebie — nie podwajaj odstępu */
.section + .section:not(.bg-alt):not(.dark) { padding-top: 0; }

/* sekcja bez tła po sekcji Z tłem — musi wnieść własny odstęp */
.bg-alt + .section:not(.bg-alt):not(.dark),
.dark   + .section:not(.bg-alt):not(.dark) { padding-top: 64px; }

/* ostatnia sekcja przed ciemną stopką — 88px bieli między dwoma ciemnymi blokami
   czyta się jak dziura, nie jak oddech */
.section:has(> .wrap > .cta-band):last-of-type { padding-bottom: 56px; }

/* ---------- Miejsce nad zagięciem na telefonie ----------
   Zmierzone na iPhone 375×667: pierwsze CTA we wpisie startowało na 769 px przy oknie 667,
   czyli 100 px POD zagięciem — użytkownik nie widział żadnego wezwania do działania.
   Trzy oszczędności, każda uzasadniona osobno. */
@media (max-width: 720px) {
    /* 1. Ostatni człon breadcrumbu powtarza H1, który następuje bezpośrednio pod nim.
          We wpisie zajmował drugą linię (48 px zamiast 24). Nawigacyjnie nic nie wnosi. */
    .crumb-last { display: none; }

    /* 2. Obraz wyróżniający zajmował 327 px — połowę ekranu — zanim padło jakiekolwiek CTA. */
    .post-hero { max-height: 200px; object-fit: cover; }

    /* 3. Hero landingu: mniej powietrza nad plakietką, żeby CTA nie lądowało na krawędzi. */
    .hero { padding-top: 40px; }

    /* 4. Lead 19 px to za duży krój dla akapitu na ekranie 375 px — rozbijał się na 7 linii
          (222 px) i spychał CTA na sam dół. 17 px czyta się tak samo, a mieści się w pięciu. */
    .hero-sub { font-size: 1.06rem; line-height: 1.55; }
}

/* data + czas czytania na dole wpisu — informacja porządkowa, nie decyzyjna */
.post-meta-foot {
    margin: 32px 0 0; padding-top: 18px; border-top: 1px solid var(--line);
    font-size: .88rem;
}

/* ---------- Górne CTA we wpisie: na telefonie sam przycisk ----------
   Karta z nagłówkiem i akapitem ma ~270 px, więc nad zagięciem widać tylko jej górę.
   Na mobile zdejmujemy oprawę i zostaje pełnowymiarowy przycisk (~56 px), który
   mieści się w całości — tak jak działało to na starej stronie. */
.cta-txt-short { display: none; }

@media (max-width: 720px) {
    .cta-inline {
        background: none; box-shadow: none; padding: 0; margin: 24px 0 28px;
        border-radius: 0;
    }
    .cta-inline .cta-inline-body { display: none; }
    .cta-inline .btn {
        width: 100%;
        background: var(--grad); background-size: 200% 100%; background-position: 0% 50%;
        color: #fff; box-shadow: 0 8px 24px -6px rgba(99,102,241,.6);
    }
    .cta-inline .btn:hover { background-position: 100% 50%; color: #fff; }
    .cta-txt-full  { display: none; }
    .cta-txt-short { display: inline; }
}