/* =============================================================
   Norbert Rzepiak - arkusz serwisu
   Zgodny z DESIGN.md (Edytorial na papierze, poziom L2)
   ============================================================= */

/* -------------------------------------------------------------
   1. Tokeny
   ------------------------------------------------------------- */
:root {
    /* Papier */
    --paper:        #F4F1EA;  --paper-rgb:      244, 241, 234;
    --paper-warm:   #EDE8DC;  --paper-warm-rgb: 237, 232, 220;
    --paper-deep:   #E2DBCA;  --paper-deep-rgb: 226, 219, 202;

    /* Tusz */
    --ink:          #14110E;  --ink-rgb:        20, 17, 14;
    --ink-raised:   #201C17;  --ink-raised-rgb: 32, 28, 23;
    --graphite:     #3A342C;  --graphite-rgb:   58, 52, 44;
    --stone:        #6E655A;  --stone-rgb:      110, 101, 90;

    /* Glina */
    --clay:         #97402A;  --clay-rgb:       151, 64, 42;
    --clay-deep:    #7B3320;  --clay-deep-rgb:  123, 51, 32;
    --clay-light:   #D9805C;  --clay-light-rgb: 217, 128, 92;

    --moss:         #34412F;  --moss-rgb:       52, 65, 47;

    /* Linie */
    --line:                rgba(20, 17, 14, 0.14);
    --line-strong:         rgba(20, 17, 14, 0.30);
    --line-invert:         rgba(244, 241, 234, 0.16);
    --line-invert-strong:  rgba(244, 241, 234, 0.34);

    --focus:       #97402A;
    --disabled-fg: rgba(20, 17, 14, 0.32);
    --disabled-bg: rgba(20, 17, 14, 0.06);

    /* Kroje */
    --font-sans:  'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;

    /* Skala typograficzna */
    --t-display: clamp(2.9rem, 9vw, 7.5rem);
    --t-h2:      clamp(2.1rem, 5.4vw, 4.25rem);
    --t-h3:      clamp(1.3rem, 2.1vw, 1.75rem);
    --t-h4:      1.0625rem;
    --t-lead:    clamp(1.1rem, 1.55vw, 1.4rem);
    --t-body:    1.0625rem;
    --t-small:   0.9375rem;
    --t-label:   0.6875rem;
    --t-numeral: clamp(2.5rem, 6vw, 4.5rem);

    /* Odstępy */
    --s-3xs: .25rem; --s-2xs: .5rem;  --s-xs: .75rem; --s-sm: 1rem;
    --s-md: 1.5rem;  --s-lg: 2rem;    --s-xl: 3rem;   --s-2xl: 4rem;
    --s-3xl: 6rem;   --s-4xl: 8rem;   --s-5xl: 12rem;
    --section-y: clamp(5rem, 11vh + 3rem, 11rem);

    /* Rama */
    --w-max:     1360px;
    --w-content: 1120px;
    --w-text:    62ch;
    --gutter:    clamp(1.25rem, 4.5vw, 4rem);

    /* Głębia */
    --shadow-paper: 0 1px 1px rgba(20, 17, 14, .04), 0 10px 28px -18px rgba(20, 17, 14, .18);
    --shadow-lift:  0 2px 4px rgba(20, 17, 14, .05), 0 32px 60px -32px rgba(20, 17, 14, .28);
    --shadow-inset-line: inset 0 0 0 1px var(--line);

    /* Ruch */
    --ease:      cubic-bezier(.16, 1, .3, 1);
    --ease-soft: cubic-bezier(.4, 0, .2, 1);
    --d-fast: 200ms; --d-base: 420ms; --d-slow: 720ms; --d-story: 1200ms;
}

/* -------------------------------------------------------------
   2. Reset i baza
   ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    interpolate-size: allow-keywords;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
    background: var(--paper);
}

body {
    margin: 0;
    overflow-x: clip;
    background: var(--paper);
    color: var(--graphite);
    font: 400 var(--t-body)/1.7 var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-synthesis-weight: none;
}

/* Ziarno papieru: warstwa stała, bez kosztu przy scrollu */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .038;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }

img, picture, video, svg { display: block; max-width: 100%; }
img { height: auto; color: transparent; }

a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; }

::selection { background: rgba(var(--clay-rgb), .18); color: var(--ink); }

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

.skip {
    position: absolute;
    left: -9999px;
}
.skip:focus {
    left: var(--gutter); top: 1rem; z-index: 100;
    padding: .75rem 1.25rem;
    background: var(--ink); color: var(--paper);
    border-radius: 2px;
}

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------
   3. Typografia
   ------------------------------------------------------------- */
h1, h2, h3, h4 {
    color: var(--ink);
    font-family: var(--font-sans);
    font-weight: 600;
    text-wrap: balance;
}

.display {
    font-size: var(--t-display);
    line-height: .88;
    letter-spacing: -.04em;
    font-weight: 700;
}

.h2 {
    font-size: var(--t-h2);
    line-height: .96;
    letter-spacing: -.032em;
    font-weight: 600;
}

.h3 {
    font-size: var(--t-h3);
    line-height: 1.22;
    letter-spacing: -.015em;
}

.h4 {
    font-size: var(--t-h4);
    line-height: 1.35;
    letter-spacing: -.005em;
    font-weight: 600;
}

/* Kursywa szeryfowa jako akcent semantyczny */
em, .serif-em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -.01em;
}
.h2 em, .display em { font-weight: 300; }

.lead {
    max-width: 46ch;
    font-family: var(--font-serif);
    font-size: var(--t-lead);
    line-height: 1.55;
    color: var(--graphite);
    text-wrap: pretty;
}

.body-text { max-width: var(--w-text); text-wrap: pretty; }
.body-text + .body-text { margin-top: var(--s-sm); }

.small { font-size: var(--t-small); }
/* kursywa szeryfowa ma mniejszy oczko, wyrownujemy optycznie */
.small em, .fear__text em, .row__text em, .plan__for em { font-size: 1.06em; }
.muted { color: var(--stone); }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    font-family: var(--font-sans);
    font-size: var(--t-label);
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--stone);
}
.eyebrow::before {
    content: '';
    width: clamp(28px, 5vw, 56px);
    height: 1px;
    background: var(--clay);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--d-slow) var(--ease) 100ms;
}
.is-visible .eyebrow::before,
.eyebrow.is-visible::before { transform: scaleX(1); }

/* Etykieta w karcie opisuje dane, nie jest ozdobnym nadnaglowkiem */
.card .eyebrow::before, .fear .eyebrow::before { display: none; }
.card .eyebrow, .fear .eyebrow { letter-spacing: .13em; }

.numeral {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* -------------------------------------------------------------
   4. Warstwa tuszowa
   ------------------------------------------------------------- */
.on-ink {
    position: relative;
    background: var(--ink);
    color: rgba(var(--paper-rgb), .78);
    isolation: isolate;
}
.on-ink h1, .on-ink h2, .on-ink h3, .on-ink h4 { color: var(--paper); }
.on-ink .lead { color: rgba(var(--paper-rgb), .8); }
.on-ink .muted { color: rgba(var(--paper-rgb), .55); }
.on-ink .eyebrow { color: rgba(var(--paper-rgb), .55); }
.on-ink .eyebrow::before { background: var(--clay-light); }

/* Powolny dryf ciepłego światła: kompozytowany transform, nie repaint */
.on-ink::before {
    content: '';
    position: absolute;
    inset: -25%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(45% 45% at 30% 35%, rgba(var(--clay-light-rgb), .13), transparent 70%);
    animation: drift 34s var(--ease-soft) infinite alternate;
}
@keyframes drift {
    from { transform: translate3d(-4%, -2%, 0) scale(1); }
    to   { transform: translate3d(6%, 4%, 0) scale(1.12); }
}

/* -------------------------------------------------------------
   5. Rama i siatka
   ------------------------------------------------------------- */
.shell {
    position: relative;
    width: 100%;
    max-width: var(--w-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.shell--narrow { max-width: var(--w-content); }

.section {
    position: relative;
    padding-block: var(--section-y);
}
.section--warm { background: var(--paper-warm); }
.section--tight { padding-block: clamp(3.5rem, 7vh + 2rem, 7rem); }
.section--flush { padding-bottom: 0; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.on-ink .rule { background: var(--line-invert); }

/* Blok otwierający sekcję: numer na marginesie, tekst w kolumnach 1-7 */
.section__head {
    display: grid;
    gap: var(--s-md);
    max-width: 54rem;
}
.section__head .h2 { margin-top: var(--s-2xs); }
.section__head .lead { margin-top: var(--s-2xs); }


/* -------------------------------------------------------------
   6. Ruch
   ------------------------------------------------------------- */
.rise {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity var(--d-slow) var(--ease), transform var(--d-slow) var(--ease);
}
.rise.is-visible { opacity: 1; transform: none; }
.stagger > * { transition-delay: calc(var(--i, 0) * 80ms); }

.reveal-line { display: block; overflow: hidden; padding-bottom: .04em; }
.reveal-line > span { display: block; transform: translateY(108%); }
.is-ready .reveal-line > span { animation: lineUp 1s var(--ease) forwards; }
.is-ready .reveal-line:nth-child(2) > span { animation-delay: .1s; }
.is-ready .reveal-line:nth-child(3) > span { animation-delay: .2s; }
@keyframes lineUp { to { transform: translateY(0); } }

.words > span {
    display: inline-block;
    opacity: 0;
    transform: translateY(.5em) rotate(1.2deg);
}
.words .is-space { width: .28em; }
.is-visible .words > span {
    animation: wordIn .8s var(--ease) forwards;
    animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes wordIn { to { opacity: 1; transform: none; } }

.parallax { will-change: transform; }

/* -------------------------------------------------------------
   7. Komponenty
   ------------------------------------------------------------- */

/* 7.1 Przyciski */
.btn {
    --btn-bg: var(--ink);
    --btn-fg: var(--paper);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    min-height: 52px;
    padding: 0 1.6rem;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-bg);
    border-radius: 2px;
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--d-base) var(--ease), border-color var(--d-base) var(--ease),
                color var(--d-base) var(--ease), transform var(--d-base) var(--ease);
}
.btn__arrow { flex: none; transition: transform 380ms var(--ease); }
.btn:hover { --btn-bg: var(--clay); border-color: var(--clay); transform: translateY(-2px); }
.btn:hover .btn__arrow { transform: translateX(5px); }
.btn:active { --btn-bg: var(--clay-deep); border-color: var(--clay-deep); transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.btn[aria-disabled="true"], .btn:disabled {
    --btn-bg: var(--disabled-bg); --btn-fg: var(--disabled-fg);
    border-color: transparent; pointer-events: none;
}

.btn--line { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line-strong); }
.btn--line:hover { --btn-bg: transparent; --btn-fg: var(--clay); border-color: var(--clay); }
.btn--line:active { --btn-fg: var(--clay-deep); border-color: var(--clay-deep); }

.btn--small { min-height: 42px; padding: 0 1.1rem; font-size: .875rem; }

.on-ink .btn { --btn-bg: var(--paper); --btn-fg: var(--ink); border-color: var(--paper); }
.on-ink .btn:hover { --btn-bg: var(--clay-light); --btn-fg: var(--ink); border-color: var(--clay-light); }
.on-ink .btn--line { --btn-bg: transparent; --btn-fg: var(--paper); border-color: var(--line-invert-strong); }
.on-ink .btn--line:hover { --btn-fg: var(--clay-light); border-color: var(--clay-light); }

/* magnes na pierwszym CTA */
.magnet { transform: translate(var(--mx, 0px), var(--my, 0px)); }
.magnet:hover { transform: translate(var(--mx, 0px), calc(var(--my, 0px) - 2px)); }

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-xs);
}

/* 7.2 Linki */
.link {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 380ms var(--ease), color var(--d-base) var(--ease);
}
.link:hover, .link:focus-visible { background-size: 100% 1px; color: var(--clay); }
.on-ink .link:hover, .on-ink .link:focus-visible { color: var(--clay-light); }
.link[aria-current="page"] { color: var(--clay); background-size: 100% 1px; }

.link-clay { color: var(--clay); }

/* 7.3 Znaczniki */
.tag {
    display: inline-block;
    padding: .35rem .7rem;
    border: 1px solid var(--line-strong);
    border-radius: 2px;
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: .18em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--graphite);
}
.tag--clay { border-color: var(--clay); color: var(--clay); }
.tag--solid { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* 7.4 Karta */
.card {
    position: relative;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    background: var(--paper-warm);
    border: 1px solid var(--line);
    border-radius: 2px;
    transition: background var(--d-base) var(--ease), border-color var(--d-base) var(--ease),
                transform var(--d-slow) var(--ease);
}
.card::after {
    content: '';
    position: absolute;
    top: -1px; left: -1px;
    width: 0; height: 2px;
    background: var(--clay);
    transition: width 550ms var(--ease);
}
.card:hover { background: var(--paper); border-color: var(--line-strong); transform: translateY(-3px); }
.card:hover::after { width: calc(100% + 2px); }
.card:focus-within { border-color: var(--clay); }

/* Karta na sekcji tuszowej: jasna kartka przyklejona do ciemnej strony */
.on-ink .card {
    background: var(--paper);
    border-color: transparent;
    color: var(--graphite);
}
.on-ink .card:hover { background: var(--paper); border-color: transparent; }
.on-ink .card h3, .on-ink .card .h3 { color: var(--ink); }
.on-ink .card .muted { color: var(--stone); }
.on-ink .card .eyebrow { color: var(--stone); }
.on-ink .card .eyebrow::before { background: var(--clay); }

/* 7.5 Wiersz spisu */
.row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--s-sm) clamp(1rem, 3vw, 2.5rem);
    align-items: start;
    padding: clamp(1.4rem, 3vw, 2.1rem) 0;
    border-top: 1px solid var(--line);
    transition: background var(--d-base) var(--ease), padding-inline var(--d-base) var(--ease);
}
.rows > .row:last-child { border-bottom: 1px solid var(--line); }
.row__num {
    font-family: var(--font-serif);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--clay);
    font-variant-numeric: tabular-nums;
}
.row__title { margin-bottom: .35rem; }
.row__text { max-width: 54ch; color: var(--stone); }
.row:hover { background: rgba(var(--clay-rgb), .05); padding-inline: clamp(.5rem, 2vw, 1.25rem); }
.row:focus-within { background: rgba(var(--clay-rgb), .07); }
.on-ink .row { border-color: var(--line-invert); }
.on-ink .rows > .row:last-child { border-bottom-color: var(--line-invert); }
.on-ink .row__num { color: var(--clay-light); }
.on-ink .row__text { color: rgba(var(--paper-rgb), .62); }
.on-ink .row:hover { background: rgba(var(--paper-rgb), .04); }

/* 7.6 Kadr */
.shot {
    position: relative;
    overflow: hidden;
    background: var(--ink);
}
.shot picture {
    display: block;
    width: 100%;
    height: 100%;
}
.shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.06);
    transition: filter 800ms var(--ease), transform 1400ms var(--ease);
}
.shot::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--clay);
    mix-blend-mode: color;
    opacity: .16;
    pointer-events: none;
    transition: opacity 800ms var(--ease);
}
.shot img[data-parallax] { transition: filter 800ms var(--ease); }
.shot--live img { filter: none; }
.shot--live::after { opacity: 0; }
a.shot:hover img { filter: none; transform: scale(1.03); }
a.shot:hover::after { opacity: 0; }
.shot__caption {
    position: absolute;
    left: 1rem; bottom: 1rem;
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(var(--paper-rgb), .8);
}

/* 7.7 Cytat */
.quote {
    margin: var(--s-lg) 0;
    padding-left: var(--s-md);
    border-left: 2px solid var(--clay);
}
.quote blockquote {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1.25rem, 2.4vw, 1.85rem);
    line-height: 1.35;
    letter-spacing: -.015em;
    color: var(--ink);
}
.on-ink .quote blockquote { color: var(--paper); }

/* 7.8 Akordeon */
.acc { border-top: 1px solid var(--line); }
.acc:last-of-type { border-bottom: 1px solid var(--line); }
.acc__summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-md);
    padding: 1.4rem 0;
    min-height: 44px;
    cursor: pointer;
    list-style: none;
    color: var(--ink);
    font-weight: 500;
    font-size: 1.0625rem;
    letter-spacing: -.01em;
    transition: color var(--d-base) var(--ease);
}
.acc__summary::-webkit-details-marker { display: none; }
.acc__summary:hover { color: var(--clay); }
.acc__summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.acc__sign { position: relative; width: 14px; height: 14px; flex: none; align-self: center; }
.acc__sign::before, .acc__sign::after {
    content: '';
    position: absolute;
    background: currentColor;
    transition: transform var(--d-base) var(--ease), opacity var(--d-base) var(--ease);
}
.acc__sign::before { top: 6px; left: 0; right: 0; height: 1px; }
.acc__sign::after  { top: 0; left: 6px; width: 1px; height: 14px; }
.acc[open] .acc__sign::after { transform: scaleY(0); opacity: 0; }
.acc__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 480ms var(--ease);
}

/* Plynne rozwijanie tam, gdzie przegladarka to potrafi (Chrome 129+) */
.acc::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 450ms var(--ease), content-visibility 450ms allow-discrete;
}
.acc[open]::details-content { block-size: auto; }
.acc[open] .acc__panel { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__panel p {
    max-width: 62ch;
    padding-bottom: 1.6rem;
    color: var(--stone);
}

/* 7.9 Lista atutów */
.checks { display: grid; gap: .85rem; }
.checks li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .8rem;
    align-items: start;
    font-size: var(--t-small);
}
.checks li::before {
    content: '';
    width: 7px; height: 7px;
    margin-top: .55rem;
    border: 1px solid var(--clay);
    border-radius: 1px;
    transform: rotate(45deg);
}
.on-ink .checks li::before { border-color: var(--clay-light); }

/* -------------------------------------------------------------
   8. Nawigacja
   ------------------------------------------------------------- */
.site-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 60;
    background: var(--paper);
    border-bottom: 1px solid transparent;
    transition: background var(--d-base) var(--ease), border-color var(--d-base) var(--ease),
                transform var(--d-base) var(--ease);
}
.site-nav--pinned {
    background: rgba(var(--paper-rgb), .9);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom-color: var(--line);
}
.site-nav--hidden { transform: translateY(-101%); }

.nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-md);
    height: 76px;
}

.brand { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; }
.brand__mark {
    position: relative;
    display: block;
    font-family: var(--font-serif);
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--ink);
    padding-bottom: 4px;
}
.brand__mark::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1px;
    background: var(--clay);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 600ms var(--ease);
}
.brand__mark::before {
    content: '';
    position: absolute;
    right: -5px; bottom: 6px;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--clay);
    opacity: 0;
    transition: opacity 200ms linear 520ms, transform 260ms var(--ease) 520ms;
}
.brand:hover .brand__mark::after { transform: scaleX(1); }
.brand:hover .brand__mark::before { opacity: 1; transform: translateY(-2px); }
.brand__name { display: none; line-height: 1.25; }
.brand__name b { display: block; font-weight: 600; font-size: .9375rem; letter-spacing: -.01em; color: var(--ink); }
.brand__name span {
    display: block;
    font-size: var(--t-label);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--stone);
}

.nav__menu { display: none; align-items: center; gap: clamp(1rem, 2vw, 2.25rem); }
.nav__link {
    font-size: .9375rem;
    white-space: nowrap;
    font-weight: 500;
    color: var(--graphite);
    text-decoration: none;
    transition: color var(--d-base) var(--ease);
}
.nav__link:hover { color: var(--clay); }
.nav__link[aria-current="page"] { color: var(--clay); }
.nav__link:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }

.nav__side { display: flex; align-items: center; gap: .6rem; }
.nav__phone { display: none; }

.nav__toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 46px; height: 46px;
    border: 1px solid var(--line-strong);
    border-radius: 2px;
    cursor: pointer;
    transition: border-color var(--d-base) var(--ease);
}
.nav__toggle:hover { border-color: var(--clay); }
.nav__toggle span {
    display: block;
    width: 18px; height: 1px;
    background: var(--ink);
    transition: transform var(--d-base) var(--ease), opacity var(--d-fast) linear;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
    position: fixed;
    inset: 76px 0 auto;
    z-index: 55;
    padding: var(--s-lg) 0 var(--s-xl);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lift);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--d-base) var(--ease), transform var(--d-base) var(--ease), visibility 0s linear var(--d-base);
}
.mobile-menu[data-open="true"] {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition-delay: 0s;
}
.mobile-menu a {
    display: block;
    padding: .85rem 0;
    font-size: 1.375rem;
    font-weight: 500;
    letter-spacing: -.02em;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
}
.mobile-menu a:hover { color: var(--clay); }
.mobile-menu .actions { margin-top: var(--s-md); }

/* Pasek kontaktu na małych ekranach */
.mobile-bar {
    position: fixed;
    inset: auto 0 0;
    z-index: 58;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--ink);
    border-top: 1px solid var(--line-invert);
}
.mobile-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 54px;
    color: var(--paper);
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
}
.mobile-bar a + a { border-left: 1px solid var(--line-invert); }
.mobile-bar a:active { background: var(--ink-raised); }

/* -------------------------------------------------------------
   10. Hero
   ------------------------------------------------------------- */
.hero {
    position: relative;
    padding-top: 108px;
    padding-bottom: var(--s-xl);
}
.hero__grid { display: grid; gap: var(--s-lg); }

.hero__title {
    font-size: clamp(2.9rem, 7.4vw, 6.75rem);
    margin-top: var(--s-md);
    color: var(--ink);
}
.hero__title .accent { color: var(--clay); }

.hero__plate { margin-top: var(--s-md); }
.hero__lead { max-width: 40ch; }
.hero__actions { margin-top: var(--s-md); }

.hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    margin-top: var(--s-lg);
    padding-top: var(--s-sm);
    border-top: 1px solid var(--line);
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--stone);
}

.hero__shot {
    position: relative;
    height: 62svh;
    min-height: 380px;
    margin-inline: calc(var(--gutter) * -1);
}
.hero__shot .shot { width: 100%; height: 100%; }
.hero__shot .shot img { object-position: 50% 12%; }

.hero__scroll {
    display: none;
    position: absolute;
    right: var(--gutter); bottom: var(--s-lg);
    z-index: 4;
    align-items: center;
    gap: .6rem;
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(var(--paper-rgb), .75);
    text-decoration: none;
}
.hero__scroll i {
    display: block;
    width: 1px; height: 34px;
    background: linear-gradient(var(--clay-light), transparent);
    animation: pull 2.6s var(--ease-soft) infinite;
    transform-origin: top;
}
@keyframes pull {
    0%, 100% { transform: scaleY(.4); opacity: .5; }
    50%      { transform: scaleY(1); opacity: 1; }
}

/* -------------------------------------------------------------
   12. Filary
   ------------------------------------------------------------- */
.pillars { display: grid; gap: var(--s-xl); }
.pillar {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--s-sm) var(--s-md);
    padding-block: clamp(1.5rem, 3vw, 2.25rem);
    border-top: 1px solid var(--line-invert);
}
.pillar__num {
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    line-height: .9;
    color: var(--clay-light);
    font-variant-numeric: tabular-nums;
}
.pillar__text { max-width: 56ch; color: rgba(var(--paper-rgb), .68); margin-top: .5rem; }

/* -------------------------------------------------------------
   13. Cennik
   ------------------------------------------------------------- */
.plans { display: grid; gap: var(--s-md); margin-top: var(--s-2xl); }

.plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    background: var(--paper-warm);
    border: 1px solid var(--line);
    border-radius: 2px;
    transition: background var(--d-base) var(--ease), border-color var(--d-base) var(--ease),
                transform var(--d-slow) var(--ease);
}
.plan:hover { background: var(--paper); border-color: var(--line-strong); transform: translateY(-4px); }
.plan__kicker {
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--stone);
}
.plan__name { margin-top: .9rem; }
.plan__for { margin-top: .35rem; color: var(--stone); font-size: var(--t-small); }
.plan__price {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin-block: var(--s-md) var(--s-sm);
    padding-top: var(--s-md);
    border-top: 1px solid var(--line);
}
.plan__amount {
    font-size: var(--t-numeral);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.plan__unit { font-size: var(--t-small); color: var(--stone); }
.plan .checks { margin-block: var(--s-sm) var(--s-lg); }
.plan .btn { margin-top: auto; }

.plan--feature {
    background: var(--ink);
    border-color: var(--ink);
    color: rgba(var(--paper-rgb), .78);
}
.plan--feature:hover { background: var(--ink-raised); border-color: var(--ink-raised); }
.plan--feature .plan__kicker { color: rgba(var(--paper-rgb), .55); }
.plan--feature .plan__name { color: var(--paper); }
.plan--feature .plan__for { color: rgba(var(--paper-rgb), .6); }
.plan--feature .plan__price { border-top-color: var(--line-invert); }
.plan--feature .plan__amount { color: var(--paper); }
.plan--feature .plan__unit { color: rgba(var(--paper-rgb), .6); }
.plan--feature .checks li::before { border-color: var(--clay-light); }
.plan--feature .btn { --btn-bg: var(--paper); --btn-fg: var(--ink); border-color: var(--paper); }
.plan--feature .btn:hover { --btn-bg: var(--clay-light); border-color: var(--clay-light); }

.plan__flag {
    position: absolute;
    top: 0; right: clamp(1.75rem, 3vw, 2.5rem);
    transform: translateY(-50%);
    padding: .3rem .6rem;
    background: var(--clay);
    color: var(--paper);
    border-radius: 1px;
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    line-height: 1;
}

.plans__note { margin-top: var(--s-lg); max-width: 60ch; color: var(--stone); font-size: var(--t-small); }

/* -------------------------------------------------------------
   14. Ścieżki
   ------------------------------------------------------------- */
.paths { display: grid; gap: 1px; background: var(--line); }
.path {
    position: relative;
    display: block;
    min-height: 58svh;
    padding: var(--s-lg);
    text-decoration: none;
    overflow: hidden;
    background: var(--ink);
}
.path .shot { position: absolute; inset: 0; }
.path__body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    min-height: inherit;
    color: var(--paper);
}
.path::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top, rgba(var(--ink-rgb), .94) 4%, rgba(var(--ink-rgb), .62) 42%, rgba(var(--ink-rgb), .12) 100%);
    transition: opacity var(--d-slow) var(--ease);
}
.path:hover::before { opacity: .84; }
.path__kicker {
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--clay-light);
}
.path__title {
    margin-top: .8rem;
    max-width: 16ch;
    font-size: clamp(1.75rem, 3.6vw, 2.75rem);
    line-height: 1.02;
    letter-spacing: -.03em;
    color: var(--paper);
}
.path__text { margin-top: .9rem; max-width: 40ch; color: rgba(var(--paper-rgb), .72); font-size: var(--t-small); }
.path__more {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-top: var(--s-md);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--paper);
}
.path__more i {
    display: block;
    width: 26px; height: 1px;
    background: var(--clay-light);
    transition: width var(--d-base) var(--ease);
}
.path:hover .path__more i { width: 46px; }

/* -------------------------------------------------------------
   15. Rolka wideo
   ------------------------------------------------------------- */
.reel { display: grid; gap: var(--s-xl); align-items: center; }
.reel__frame {
    position: relative;
    max-width: 340px;
    margin-inline: auto;
    border: 1px solid var(--line-invert);
    border-radius: 2px;
    overflow: hidden;
    background: var(--ink-raised);
}
.reel__frame video {
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    filter: saturate(.62) contrast(1.04);
}
.reel__badge {
    position: absolute;
    top: .8rem; left: .8rem;
    z-index: 2;
    padding: .3rem .55rem;
    background: rgba(var(--ink-rgb), .7);
    color: rgba(var(--paper-rgb), .85);
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    line-height: 1;
    border-radius: 1px;
}
.reel__sound {
    position: absolute;
    right: .8rem; bottom: .8rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    background: rgba(var(--ink-rgb), .7);
    border: 1px solid var(--line-invert-strong);
    border-radius: 2px;
    color: var(--paper);
    cursor: pointer;
    transition: border-color var(--d-base) var(--ease), background var(--d-base) var(--ease);
}
.reel__sound:hover { border-color: var(--clay-light); background: rgba(var(--ink-rgb), .85); }

/* -------------------------------------------------------------
   16. O mnie
   ------------------------------------------------------------- */
.about { display: grid; gap: var(--s-xl); }
.about__shot { position: relative; }
.about__shot .shot { aspect-ratio: 4 / 5; }
.about__stamp {
    position: absolute;
    right: 0; bottom: 0;
    transform: translate(0, 0);
    padding: .9rem 1.1rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 2px;
}
.about__stamp b { display: block; font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.about__stamp span {
    display: block;
    margin-top: .2rem;
    font-size: var(--t-label);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--stone);
}
.creds {
    display: grid;
    gap: .6rem 1.5rem;
    margin-top: var(--s-lg);
    padding-top: var(--s-md);
    border-top: 1px solid var(--line);
}
.creds li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .7rem;
    align-items: baseline;
    font-size: var(--t-small);
    color: var(--graphite);
}
.creds li span { font-family: var(--font-serif); color: var(--clay); font-size: .8125rem; }

/* -------------------------------------------------------------
   17. Proces
   ------------------------------------------------------------- */
.steps { display: grid; gap: 0; margin-top: var(--s-2xl); counter-reset: step; }
.step {
    position: relative;
    padding-block: clamp(1.5rem, 3vw, 2rem);
    border-top: 1px solid var(--line);
}
.steps .step:last-child { border-bottom: 1px solid var(--line); }
.step__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-sm); }
.step__num {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: .9;
    color: var(--clay);
    font-variant-numeric: tabular-nums;
}
.step__meta { font-size: var(--t-label); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--stone); }
.step__title { margin-top: var(--s-sm); }
.step__text { margin-top: .5rem; max-width: 40ch; color: var(--stone); font-size: var(--t-small); }

/* -------------------------------------------------------------
   18. CTA końcowe
   ------------------------------------------------------------- */
.cta { text-align: center; }
.cta .eyebrow { justify-content: center; }
.cta .h2 { margin-top: var(--s-md); }
.cta .lead { margin: var(--s-md) auto 0; max-width: 48ch; }
.cta .actions { justify-content: center; margin-top: var(--s-lg); }

.contact-list {
    display: grid;
    gap: 1px;
    margin-top: var(--s-2xl);
    background: var(--line-invert);
    border: 1px solid var(--line-invert);
    text-align: left;
}
.contact-list > * {
    display: grid;
    gap: .2rem;
    padding: var(--s-md);
    background: var(--ink);
    text-decoration: none;
    transition: background var(--d-base) var(--ease);
}
.contact-list a:hover { background: var(--ink-raised); }
.contact-list dt, .contact-list b {
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(var(--paper-rgb), .5);
}
.contact-list dd, .contact-list span {
    margin: 0;
    font-size: 1.0625rem;
    color: var(--paper);
}
.contact-list a:hover span { color: var(--clay-light); }

/* -------------------------------------------------------------
   19. Stopka
   ------------------------------------------------------------- */
.site-footer {
    padding-block: var(--s-2xl) var(--s-lg);
    background: var(--paper-deep);
    border-top: 1px solid var(--line);
}
.footer__grid { display: grid; gap: var(--s-xl); }
.footer__about { max-width: 38ch; margin-top: var(--s-sm); color: var(--stone); font-size: var(--t-small); }
.footer__title {
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink);
}
.footer__list { display: grid; gap: .6rem; margin-top: var(--s-sm); font-size: var(--t-small); }
.footer__list a { text-decoration: none; color: var(--graphite); transition: color var(--d-base) var(--ease); }
.footer__list a:hover { color: var(--clay); }
.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-sm) var(--s-md);
    align-items: center;
    justify-content: space-between;
    margin-top: var(--s-2xl);
    padding-top: var(--s-md);
    border-top: 1px solid var(--line);
    font-size: .8125rem;
    color: var(--stone);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-md); }
.footer__legal a { text-decoration: none; }
.footer__legal a:hover { color: var(--clay); }

/* -------------------------------------------------------------
   20. Podstrony: nagłówek, treść, blog
   ------------------------------------------------------------- */
.page-head {
    padding-top: 138px;
    padding-bottom: var(--s-2xl);
}
.page-head .display { font-size: clamp(2.5rem, 7vw, 5.5rem); }
.page-head--article .display { font-size: clamp(1.9rem, 4.3vw, 3.4rem); line-height: .98; }
.page-head--article .article-meta { max-width: 46rem; }

.article__aside {
    padding-top: var(--s-sm);
    border-top: 1px solid var(--line);
}
.article__aside .h4 { color: var(--ink); }
.page-head .lead { margin-top: var(--s-md); }

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--stone);
}
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--clay); }

.prose { max-width: var(--w-text); }
.prose > * + * { margin-top: var(--s-sm); }
.prose h2 {
    margin-top: var(--s-xl);
    font-size: clamp(1.5rem, 3vw, 2.125rem);
    line-height: 1.1;
    letter-spacing: -.025em;
}
.prose h3 {
    margin-top: var(--s-lg);
    font-size: var(--t-h3);
    line-height: 1.25;
    letter-spacing: -.015em;
}
.prose p { text-wrap: pretty; }
.prose ul, .prose ol { display: grid; gap: .6rem; padding-left: 1.1rem; }
.prose ul li { list-style: none; position: relative; }
.prose ul li::before {
    content: '';
    position: absolute;
    left: -1.1rem; top: .7rem;
    width: 6px; height: 1px;
    background: var(--clay);
}
.prose ol { list-style: decimal; }
.prose ol li::marker { color: var(--clay); font-family: var(--font-serif); }
.prose a { color: var(--clay); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--clay-deep); }
.prose strong { font-weight: 600; color: var(--ink); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.prose th, .prose td { padding: .75rem .5rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; color: var(--stone); }

.posts { display: grid; gap: 0; }
.post {
    display: grid;
    gap: var(--s-sm) var(--s-lg);
    padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
    border-top: 1px solid var(--line);
    text-decoration: none;
    transition: background var(--d-base) var(--ease), padding-inline var(--d-base) var(--ease);
}
.posts .post:last-child { border-bottom: 1px solid var(--line); }
.post:hover { background: rgba(var(--clay-rgb), .05); padding-inline: clamp(.5rem, 2vw, 1.25rem); }
.post__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--stone);
}
.post__title {
    font-size: clamp(1.4rem, 2.8vw, 2.125rem);
    line-height: 1.08;
    letter-spacing: -.028em;
    max-width: 22ch;
}
.post:hover .post__title { color: var(--clay); }
.post__excerpt { max-width: 56ch; color: var(--stone); font-size: var(--t-small); }
.post__more { display: inline-flex; align-items: center; gap: .6rem; font-size: .9375rem; font-weight: 600; color: var(--ink); }
.post__more i { display: block; width: 26px; height: 1px; background: var(--clay); transition: width var(--d-base) var(--ease); }
.post:hover .post__more i { width: 46px; }

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    margin-top: var(--s-md);
    padding-top: var(--s-sm);
    border-top: 1px solid var(--line);
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--stone);
}

.callout {
    overflow: hidden;
    margin-top: var(--s-xl);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    background: var(--ink);
    color: rgba(var(--paper-rgb), .78);
    border-radius: 2px;
}
.callout h2, .callout h3 { color: var(--paper); margin-top: 0; }
.callout p { max-width: 52ch; }
.callout .actions { margin-top: var(--s-md); }


/* -------------------------------------------------------------
   20b. Strony ofertowe
   ------------------------------------------------------------- */
.band {
    position: relative;
    height: clamp(260px, 48svh, 560px);
    background: var(--ink);
}
.band .shot { position: absolute; inset: 0; }
.band .shot img[data-parallax] { transition: none; }
.band__caption {
    position: absolute;
    left: var(--gutter); bottom: var(--s-md);
    z-index: 2;
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(var(--paper-rgb), .8);
}

.fears { display: grid; }
.fear {
    display: grid;
    gap: var(--s-sm);
    padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
    border-top: 1px solid var(--line);
}
.fears .fear:last-child { border-bottom: 1px solid var(--line); }
.fear__num {
    font-family: var(--font-serif);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--clay);
}
.fear__text { max-width: 52ch; margin-top: .5rem; color: var(--stone); font-size: var(--t-small); }
.fear__answer {
    padding-left: var(--s-md);
    border-left: 2px solid var(--clay);
}
.fear__answer .fear__text { color: var(--graphite); }

.grid-cards { display: grid; gap: var(--s-sm); }

@media (min-width: 560px) {
    .grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
    .fear { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-xl); align-items: start; }
    .grid-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-cards:has(> *:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------
   21. Punkty łamania
   ------------------------------------------------------------- */
@media (min-width: 560px) {
    .checks--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .creds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contact-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .brand__name { display: block; }
}

@media (min-width: 900px) {
    body { padding-bottom: 0; }

    .nav__menu { display: flex; }
    .nav__phone { display: inline-flex; }
    .nav__toggle { display: none; }
    .mobile-menu { display: none; }
    .mobile-bar { display: none; }

    .section__head { padding-left: clamp(2.5rem, 6vw, 5rem); }

    .hero { padding-top: 76px; padding-bottom: 0; }
    .hero__grid {
        grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
        gap: clamp(2rem, 5vw, 4.5rem);
        align-items: end;
        min-height: calc(100svh - 76px);
    }
    .hero__text { padding-block: clamp(2.5rem, 8vh, 5rem) 0; }
    .hero__shot {
        position: relative;
        align-self: stretch;
        height: auto;
        min-height: 600px;
        margin-inline: 0 calc((100vw - min(100vw, var(--w-max))) / -2 - var(--gutter));
    }
    .hero__shot .shot { position: absolute; inset: 0; }
    .hero__plate {
        position: relative;
        z-index: 3;
        margin-top: var(--s-lg);
        padding: var(--s-lg) var(--s-lg) clamp(2rem, 5vh, 3.5rem) 0;
        background: var(--paper);
        width: calc(100% + clamp(2rem, 5vw, 4.5rem));
    }
    .hero__meta { margin-top: var(--s-lg); }
    .hero__plate::before {
        content: '';
        position: absolute;
        top: 0; bottom: 0; right: 100%;
        width: 50vw;
        background: var(--paper);
    }
    .hero__scroll { display: inline-flex; }

    .pillars__aside .h2,
    .faq__aside .h2 { font-size: clamp(1.9rem, 3.3vw, 3rem); }

    .pillars { grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
    .pillars__aside { position: sticky; top: 18vh; }

    .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: var(--s-sm); }
    .plan--feature { margin-block: -1.25rem; }

    .paths { grid-template-columns: 1fr 1fr; }
    .path { padding: var(--s-xl); min-height: 74svh; }

    .reel { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: clamp(2.5rem, 6vw, 5rem); }
    .reel__frame { max-width: none; margin-inline: 0; }

    .about { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
    .about__stamp { transform: translate(1.5rem, 1.5rem); }
    .about__shot .shot { aspect-ratio: 3 / 4; }

    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-xl); }
    .steps .step:nth-child(2) { border-top: 1px solid var(--line); }
    .steps .step:last-child { border-bottom: 0; }
    .steps .step:nth-child(3), .steps .step:nth-child(4) { border-bottom: 1px solid var(--line); }

    .faq__grid { display: grid; grid-template-columns: minmax(0, 34fr) minmax(0, 66fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
    .faq__aside { position: sticky; top: 18vh; }

    .post { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) auto; column-gap: var(--s-2xl); align-items: start; }
    .post__title { max-width: 20ch; }
    .post__excerpt { padding-top: .3rem; }
    .post__more { padding-top: .3rem; }

    .footer__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-2xl); }

    .page-head { padding-top: 168px; }
    .article__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
    .article__aside { position: sticky; top: 18vh; }
}

@media (min-width: 1200px) {
    .checks--two-lg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Poniżej 900 px pasek kontaktowy nie może zasłaniać stopki */
@media (max-width: 899px) {
    body { padding-bottom: 54px; }
    .paths .shot img { filter: none; }
    .paths .shot::after { opacity: 0; }
}

/* -------------------------------------------------------------
   22. Degradacja ruchu
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .rise, .words > span, .reveal-line > span {
        opacity: 1 !important;
        transform: none !important;
    }
    .on-ink::before { animation: none !important; }
    .eyebrow::before { transform: scaleX(1) !important; }
}

/* -------------------------------------------------------------
   23. Druk
   ------------------------------------------------------------- */
@media print {
    .site-nav, .mobile-bar, .hero__scroll, .reel { display: none !important; }
    body { background: #fff; color: #000; padding: 0; }
    .on-ink { background: #fff !important; color: #000 !important; }
    .on-ink h1, .on-ink h2, .on-ink h3 { color: #000 !important; }
}