/*
 * Halo Strony / Halo Sklepy: strony marketingowe (layout _MarketingLayout).
 * Wszystko jest w przestrzeni .mk, zeby nie kolidowac z main.css, edytorem i kreatorem.
 */

/* ---------- Tokeny ---------- */
.mk {
    --mk-paper: #f3f1ec;
    --mk-card: #fbfaf7;
    --mk-white: #ffffff;
    --mk-ink: #121212;
    --mk-ink-soft: #57534c;
    --mk-line: rgba(18, 18, 18, 0.14);
    --mk-violet: #5b4bff;
    --mk-violet-deep: #4233db;
    --mk-violet-tint: #b9b1ff;
    --mk-sky: #d6e6ff;
    --mk-lemon: #ffe55e;
    --mk-lemon-pale: #fff6bd;
    --mk-blush: #ffcdb8;
    --mk-tangerine: #ff5b2e;

    --mk-accent: var(--mk-violet);
    --mk-accent-deep: var(--mk-violet-deep);
    --mk-accent-tint: var(--mk-violet-tint);

    --mk-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
    --mk-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mk-monoface: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --mk-gutter: clamp(1.25rem, 4vw, 3.5rem);
    --mk-max: 78rem;
    --mk-nav-h: 4rem;
    --mk-r-sm: 0.625rem;
    --mk-r: 1rem;
    --mk-r-lg: 1.5rem;
    --mk-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

    /* Zgodnosc ze wspolnymi partialami (widget oddzwaniania, powiadomienia). */
    --accent-color: var(--mk-accent);
    --accent-color-rgb: 91, 75, 255;
    --default-color: var(--mk-ink);
    --heading-color: var(--mk-ink);
    --contrast-color: #ffffff;
    --surface-color: #ffffff;
    --background-color: var(--mk-paper);

    margin: 0;
    background: var(--mk-paper);
    color: var(--mk-ink);
    font-family: var(--mk-body);
    font-size: 1.0625rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

.mk--shop {
    --mk-accent: #ff5b2e;
    --mk-accent-deep: #e2441a;
    --mk-accent-tint: #ffb59e;
    --accent-color-rgb: 255, 91, 46;
}

/* Resety maja zerowa specyficznosc (:where), zeby kazda klasa komponentu mogla je nadpisac. */
:where(.mk) *,
:where(.mk) *::before,
:where(.mk) *::after {
    box-sizing: border-box;
}

:where(.mk) img {
    max-width: 100%;
    height: auto;
    display: block;
}

:where(.mk) a {
    color: inherit;
    text-decoration: none;
}

.mk :focus-visible {
    outline: 2px solid var(--mk-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.mk ::selection {
    background: var(--mk-lemon);
    color: var(--mk-ink);
}

.mk-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 0.9rem 1.2rem;
    background: var(--mk-ink);
    color: #fff !important;
    font-weight: 600;
}

.mk-skip:focus {
    left: 1rem;
    top: 1rem;
}

.mk-alert {
    position: relative;
    z-index: 1050;
    padding: 0.8rem var(--mk-gutter);
    background: var(--mk-lemon);
    text-align: center;
    font-size: 0.95rem;
}

.mk-alert a {
    margin-left: 0.5rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- Typografia ---------- */
:where(.mk) h1,
:where(.mk) h2,
:where(.mk) h3,
:where(.mk) h4 {
    margin: 0;
    font-family: var(--mk-display);
    font-weight: 700;
    color: inherit;
    letter-spacing: -0.025em;
    line-height: 1;
    text-wrap: balance;
}

:where(.mk) p {
    margin: 0;
}

.mk-h1 {
    font-size: clamp(2.9rem, 7.2vw, 6.5rem);
    letter-spacing: -0.035em;
    line-height: 0.94;
}

.mk-h2 {
    font-size: clamp(2.25rem, 4.9vw, 4.4rem);
    letter-spacing: -0.03em;
    line-height: 0.98;
}

.mk-h3 {
    font-size: clamp(1.4rem, 2.1vw, 1.85rem);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.mk-lead {
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    line-height: 1.45;
    max-width: 34em;
}

.mk-mono {
    font-family: var(--mk-monoface);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    line-height: 1.5;
}

.mk-soft {
    color: var(--mk-ink-soft);
}

.mk-wrap {
    width: 100%;
    max-width: calc(var(--mk-max) + 2 * var(--mk-gutter));
    margin-inline: auto;
    padding-inline: var(--mk-gutter);
}

.mk-band {
    padding-block: clamp(4.5rem, 10vw, 9rem);
}

.mk-band--dark {
    background: var(--mk-ink);
    color: #fff;
}

.mk-band--sky {
    background: var(--mk-sky);
}

.mk-center {
    text-align: center;
}

.mk-center .mk-lead {
    margin-inline: auto;
}

/* ---------- Przyciski ---------- */
.mk-btn {
    --btn-bg: var(--mk-accent);
    --btn-fg: #fff;
    --btn-fill: var(--mk-ink);
    --btn-fill-fg: #fff;
    --btn-pad: 0.3rem;
    --btn-sq: 2.2rem;

    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--btn-sq) + 2 * var(--btn-pad));
    padding: 0 1.25rem;
    border: 0;
    border-radius: var(--mk-r-sm);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--mk-monoface);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    transform: translate(var(--mk-mx, 0), var(--mk-my, 0));
    transition: color 0.35s var(--mk-ease), transform 0.45s var(--mk-ease), box-shadow 0.35s;
    -webkit-tap-highlight-color: transparent;
}

.mk-btn:active {
    transform: translate(var(--mk-mx, 0), var(--mk-my, 0)) scale(0.975);
    transition-duration: 0.1s;
}

.mk-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Warstwa wypelnienia: startuje jako kwadrat pod strzalka i po najechaniu zalewa caly przycisk. */
.mk-btn__fill {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--btn-fill);
    clip-path: inset(100% 0 0 0);
    transition: clip-path 0.55s var(--mk-ease);
}

.mk-btn--arrow {
    justify-content: flex-start;
    padding-right: calc(var(--btn-sq) + var(--btn-pad) + 1.1rem);
}

.mk-btn--arrow .mk-btn__fill {
    clip-path: inset(var(--btn-pad) var(--btn-pad) var(--btn-pad) calc(100% - var(--btn-pad) - var(--btn-sq)) round 0.4rem);
}

/* Etykieta: dwie kopie tekstu jedna pod druga, po najechaniu przewijaja sie o jedna linie. */
.mk-btn__label {
    display: block;
    height: 1.2em;
    overflow: hidden;
}

.mk-btn__roll {
    display: block;
    transition: transform 0.5s var(--mk-ease);
}

.mk-btn__roll > span {
    display: block;
}

.mk-btn__arrow {
    position: absolute;
    top: var(--btn-pad);
    right: var(--btn-pad);
    bottom: var(--btn-pad);
    display: grid;
    place-items: center;
    width: var(--btn-sq);
    color: var(--btn-fill-fg);
    overflow: hidden;
}

.mk-btn__arrow svg {
    grid-area: 1 / 1;
    width: 42%;
    height: auto;
    transition: transform 0.5s var(--mk-ease);
}

.mk-btn__arrow svg + svg {
    transform: translate(-260%, 260%);
}

@media (hover: hover) {
    .mk-btn:not(:disabled):hover {
        color: var(--btn-fill-fg);
    }

    .mk-btn:not(:disabled):hover .mk-btn__fill {
        clip-path: inset(0 round 0);
    }

    .mk-btn:not(:disabled):hover .mk-btn__roll {
        transform: translateY(-50%);
    }

    .mk-btn:not(:disabled):hover .mk-btn__arrow svg {
        transform: translate(260%, -260%);
    }

    .mk-btn:not(:disabled):hover .mk-btn__arrow svg + svg {
        transform: none;
    }
}

.mk-btn:focus-visible {
    outline: 2px solid var(--mk-accent);
    outline-offset: 3px;
    border-radius: var(--mk-r-sm);
}

.mk .mk-btn--primary {
    --btn-bg: var(--mk-accent);
    --btn-fg: #fff;
}

.mk .mk-btn--ghost {
    --btn-bg: var(--mk-white);
    --btn-fg: var(--mk-ink);
}

.mk .mk-btn--line {
    --btn-bg: transparent;
    --btn-fg: currentColor;
    color: inherit;
    box-shadow: inset 0 0 0 1.5px currentColor;
}

@media (hover: hover) {
    .mk .mk-btn--line:not(:disabled):hover {
        color: var(--btn-fill-fg);
        box-shadow: inset 0 0 0 1.5px var(--btn-fill);
    }
}

/* Na ciemnym tle wypelnienie jest jasne. */
.mk-band--dark .mk-btn,
.mk-pricing .mk-btn,
.mk-footer .mk-btn {
    --btn-fill: #fff;
    --btn-fill-fg: var(--mk-ink);
}

.mk-btn--lg {
    --btn-pad: 0.38rem;
    --btn-sq: 2.9rem;
    padding-left: 1.7rem;
    font-size: 0.88rem;
}

.mk-btn--lg:not(.mk-btn--arrow) {
    padding-right: 1.7rem;
}

.mk-btn--block {
    width: 100%;
}

.mk-textlink {
    padding-bottom: 0.35rem;
    font-family: var(--mk-monoface);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat;
}

@media (hover: hover) {
    .mk-textlink:hover {
        color: var(--mk-accent);
        animation: mk-redraw 0.7s var(--mk-ease);
    }
}

@keyframes mk-redraw {
    0% { background-size: 100% 1.5px; background-position: 100% 100%; }
    45% { background-size: 0 1.5px; background-position: 100% 100%; }
    46% { background-size: 0 1.5px; background-position: 0 100%; }
    100% { background-size: 100% 1.5px; background-position: 0 100%; }
}

.mk-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.75rem;
}

.mk-center .mk-cta {
    justify-content: center;
}

.mk-cta--stack {
    flex-direction: column;
    gap: 1.1rem;
}

/* ---------- Nawigacja ---------- */
.mk-nav {
    position: sticky;
    top: 0;
    z-index: 900;
}

/* Rozmycie jest na pseudoelemencie: backdrop-filter na samym naglowku uwiezilby w nim menu mobilne (position: fixed). */
.mk-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in srgb, var(--mk-paper) 92%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.mk-nav__bar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    height: var(--mk-nav-h);
    padding-inline: clamp(1rem, 2.2vw, 2rem);
}

.mk-logo {
    display: block;
    flex-shrink: 0;
}

.mk-logo img {
    width: auto;
    height: 2.5rem;
}

.mk-logo--light img {
    filter: invert(1);
}

.mk-nav__links {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
    margin-left: clamp(0.5rem, 2vw, 2rem);
    font-family: var(--mk-monoface);
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mk-nav__links a {
    padding-block: 0.4rem;
    background: linear-gradient(currentColor, currentColor) left bottom / 0 1.5px no-repeat;
    transition: background-size 0.25s var(--mk-ease);
}

.mk-nav__links a:hover,
.mk-nav__links a.is-active {
    background-size: 100% 1.5px;
}

.mk-nav__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.mk-nav__toggle {
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--mk-r-sm);
    background: var(--mk-white);
    cursor: pointer;
    position: relative;
}

.mk-nav__toggle span {
    position: absolute;
    left: 0.8rem;
    right: 0.8rem;
    height: 2px;
    background: var(--mk-ink);
    transition: transform 0.25s var(--mk-ease), top 0.25s var(--mk-ease);
}

.mk-nav__toggle span:nth-child(1) {
    top: 1.1rem;
}

.mk-nav__toggle span:nth-child(2) {
    top: 1.55rem;
}

.mk-nav__toggle[aria-expanded="true"] span:nth-child(1) {
    top: 1.32rem;
    transform: rotate(45deg);
}

.mk-nav__toggle[aria-expanded="true"] span:nth-child(2) {
    top: 1.32rem;
    transform: rotate(-45deg);
}

.mk-menu {
    position: fixed;
    inset: var(--mk-nav-h) 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.5rem var(--mk-gutter) calc(1.5rem + env(safe-area-inset-bottom));
    background: var(--mk-paper);
    overflow-y: auto;
}

.mk-menu[hidden] {
    display: none;
}

.mk-menu nav {
    display: flex;
    flex-direction: column;
}

.mk-menu nav a {
    padding-block: 0.55rem;
    border-bottom: 1px solid var(--mk-line);
    font-family: var(--mk-display);
    font-size: clamp(2.1rem, 9vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.mk-menu__foot {
    display: grid;
    gap: 0.6rem;
    margin-top: 2rem;
}

.mk-menu__foot .mk-btn {
    min-height: 3.25rem;
}

@media (max-width: 1023px) {
    .mk-nav__links,
    .mk-nav__wide {
        display: none;
    }

    .mk-nav__toggle {
        display: block;
    }
}

@media (max-width: 420px) {
    .mk-nav__bar {
        gap: 0.5rem;
    }

    .mk-nav__actions .mk-btn {
        --btn-sq: 2.1rem;
        padding-inline: 0.85rem;
        font-size: 0.72rem;
        letter-spacing: 0.1em;
    }

    .mk-logo img {
        height: 2.2rem;
    }
}

body.mk-menu-open {
    overflow: hidden;
}

/* Ikony w naglowku dla zalogowanych (dzwonek, platnosci) */
.mk-nav__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--mk-r-sm);
    background: var(--mk-white);
    color: var(--mk-ink);
    position: relative;
    cursor: pointer;
}

.mk-nav__icon:hover {
    background: var(--mk-ink);
    color: #fff;
}

/* ---------- Ramki urzadzen ---------- */
.mk-device {
    padding: 0.45rem;
    border-radius: 1.9rem;
    background: #161616;
    box-shadow: 0 2.2rem 3.5rem -1.6rem rgba(18, 18, 18, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

.mk-device img {
    width: 100%;
    border-radius: 1.5rem;
    aspect-ratio: 720 / 1040;
    object-fit: cover;
    object-position: top;
    background: #e8e6e0;
}

.mk-browser {
    border-radius: 0.85rem;
    background: var(--mk-white);
    box-shadow: 0 2.4rem 4rem -2rem rgba(18, 18, 18, 0.4);
    overflow: hidden;
}

.mk-browser__bar {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    height: 1.9rem;
    padding-inline: 0.8rem;
    background: #ecebe7;
}

.mk-browser__bar i {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: rgba(18, 18, 18, 0.2);
}

.mk-browser__bar span {
    margin-left: 0.6rem;
    font-family: var(--mk-monoface);
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    color: var(--mk-ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mk-browser img {
    width: 100%;
    object-fit: cover;
    object-position: top;
}

/* ---------- Hero ---------- */
.mk-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(11rem, 1fr) minmax(0, 46rem) minmax(11rem, 1fr);
    gap: clamp(1.5rem, 3vw, 3.5rem);
    height: clamp(40rem, calc(100svh - var(--mk-nav-h)), 56rem);
    padding-inline: clamp(1rem, 2.2vw, 2rem);
    overflow: hidden;
}

.mk-hero__col {
    position: relative;
    margin-inline: -2.5rem;
    padding-inline: 2.5rem;
    overflow: hidden;
}

.mk-hero__track {
    display: flex;
    flex-direction: column;
    width: min(100%, 21rem);
    animation: mk-rise 60s linear infinite;
    will-change: transform;
}

.mk-hero__col--right .mk-hero__track {
    margin-left: auto;
    animation-name: mk-sink;
}

.mk-hero__track > * {
    margin-bottom: 2.25rem;
}

@keyframes mk-rise {
    from { transform: translateY(0); }
    to { transform: translateY(-50%); }
}

@keyframes mk-sink {
    from { transform: translateY(-50%); }
    to { transform: translateY(0); }
}

.mk-hero__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-block: 3rem;
    text-align: center;
}

.mk-hero__body .mk-lead {
    margin-top: 1.6rem;
    max-width: 30em;
}

.mk-hero__body .mk-cta {
    margin-top: 2.2rem;
}

.mk-hero__note {
    margin-top: 2rem;
    color: var(--mk-ink-soft);
}

.mk-hero__row {
    display: none;
}

/* Rotujace slowo w leadzie */
.mk-swap {
    display: inline-grid;
    justify-items: start;
    vertical-align: bottom;
    overflow: hidden;
    color: var(--mk-accent);
    font-weight: 600;
    text-align: left;
    transition: width 0.5s var(--mk-ease);
}

.mk-swap > span {
    grid-area: 1 / 1;
    white-space: nowrap;
    transform: translateY(110%);
    transition: transform 0.55s var(--mk-ease);
}

.mk-swap > span.is-on {
    transform: translateY(0);
}

.mk-swap > span.is-off {
    transform: translateY(-110%);
}

/* Wejscie hero: jedna zgrana sekwencja */
@media (prefers-reduced-motion: no-preference) {
    .mk-hero__body > * {
        animation: mk-enter 0.9s var(--mk-ease) both;
    }

    .mk-hero__body > *:nth-child(2) { animation-delay: 0.08s; }
    .mk-hero__body > *:nth-child(3) { animation-delay: 0.16s; }
    .mk-hero__body > *:nth-child(4) { animation-delay: 0.24s; }

    .mk-hero__col {
        animation: mk-fade 1.2s ease 0.2s both;
    }
}

@keyframes mk-enter {
    from { opacity: 0; transform: translateY(1.4rem); }
    to { opacity: 1; transform: none; }
}

@keyframes mk-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 1099px) {
    .mk-hero {
        display: block;
        height: auto;
        padding-inline: 0;
    }

    .mk-hero__col {
        display: none;
    }

    .mk-hero__body {
        padding: clamp(2.75rem, 9vw, 4.5rem) var(--mk-gutter) 2.5rem;
    }


    .mk-hero__row {
        display: block;
        overflow: hidden;
        padding-bottom: 3.5rem;
    }

    .mk-hero__rowtrack {
        display: flex;
        width: max-content;
        animation: mk-slide 46s linear infinite;
    }

    .mk-hero__rowtrack > * {
        width: clamp(11.5rem, 46vw, 15rem);
        margin-right: 1.1rem;
        flex-shrink: 0;
    }

    .mk-hero__rowtrack > *:nth-child(even) {
        margin-top: 2rem;
    }
}

@keyframes mk-slide {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ---------- Branze (lista nazw + podglad) ---------- */
.mk-trades {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center;
}

.mk-trades__list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mk-trades__list button {
    display: block;
    width: 100%;
    padding: 0.12em 0;
    border: 0;
    background: none;
    color: rgba(18, 18, 18, 0.2);
    font-family: var(--mk-display);
    font-size: clamp(1.9rem, 3.3vw, 2.9rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.02;
    text-align: left;
    cursor: pointer;
    transition: color 0.3s;
}

.mk-trades__list button:hover {
    color: rgba(18, 18, 18, 0.5);
}

.mk-trades__list button[aria-pressed="true"] {
    color: var(--mk-accent);
}

.mk-trades__side {
    display: grid;
    gap: 1.75rem;
}

.mk-trades__side .mk-mono {
    color: #1e3a6b;
}

.mk-trades__stage {
    position: relative;
    aspect-ratio: 720 / 760;
}

.mk-trades__stage .mk-browser {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(1rem) scale(0.985);
    transition: opacity 0.45s ease, transform 0.6s var(--mk-ease);
    pointer-events: none;
}

.mk-trades__stage .mk-browser.is-on {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.mk-trades__stage .mk-browser img {
    flex: 1;
    min-height: 0;
    height: 100%;
}

@media (max-width: 859px) {
    .mk-trades {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .mk-trades__side {
        order: -1;
    }

    .mk-trades__stage {
        aspect-ratio: 720 / 700;
    }
}

/* ---------- Sciana kart (ciemna sekcja) ---------- */
.mk-wall {
    column-count: 3;
    column-gap: 1.5rem;
    margin-top: clamp(3rem, 6vw, 5rem);
}

.mk-wall > * {
    break-inside: avoid;
    margin: 0 0 1.5rem;
}

.mk-note {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    padding: clamp(1.4rem, 2.2vw, 2rem);
    border-radius: var(--mk-r-lg);
    background: var(--mk-card);
    color: var(--mk-ink);
}

.mk-note p {
    font-size: 1.12rem;
    line-height: 1.4;
}

.mk-note--xl p {
    font-family: var(--mk-display);
    font-size: clamp(1.9rem, 2.9vw, 2.7rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.04;
}

.mk-note--lg p {
    font-size: clamp(1.4rem, 1.9vw, 1.75rem);
    line-height: 1.22;
    letter-spacing: -0.015em;
}

.mk-note cite {
    align-self: flex-end;
    font-family: var(--mk-monoface);
    font-size: 0.76rem;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.mk-note--tangerine { background: var(--mk-tangerine); color: #fff; }
.mk-note--violet { background: var(--mk-violet); color: #fff; }
.mk-note--sky { background: var(--mk-sky); }
.mk-note--lemon { background: var(--mk-lemon); }
.mk-note--lemon-pale { background: var(--mk-lemon-pale); }
.mk-note--blush { background: var(--mk-blush); }

.mk-shot {
    padding: 0.9rem;
    border-radius: var(--mk-r-lg);
}

.mk-shot img {
    width: 100%;
    border-radius: 0.8rem;
    aspect-ratio: 720 / 900;
    object-fit: cover;
    object-position: top;
}

.mk-shot--lemon { background: var(--mk-lemon); }
.mk-shot--sky { background: #1e4fa8; }
.mk-shot--white { background: var(--mk-card); }

.mk-wall__after {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    display: grid;
    justify-items: center;
    gap: 1.6rem;
    text-align: center;
}

@media (max-width: 959px) {
    .mk-wall {
        column-count: 2;
        column-gap: 1rem;
    }

    .mk-wall > * {
        margin-bottom: 1rem;
    }
}

@media (max-width: 599px) {
    .mk-wall {
        column-count: 1;
    }
}

/* ---------- Edytor (makieta) + lista mozliwosci ---------- */
.mk-editor {
    position: relative;
    max-width: 70rem;
    margin: clamp(2rem, 4vw, 3rem) auto 0;
}

/* Przelacznik widokow edytora: zwykle napisy z kreska pod aktywnym. */
.mk-views {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem clamp(1.25rem, 3vw, 2.75rem);
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.mk-views button {
    padding: 0.4rem 0;
    border: 0;
    background: linear-gradient(var(--mk-accent), var(--mk-accent)) left bottom / 0 2px no-repeat;
    color: var(--mk-ink-soft);
    font-family: var(--mk-display);
    font-size: clamp(1.05rem, 1.7vw, 1.4rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    cursor: pointer;
    transition: color 0.25s, background-size 0.35s var(--mk-ease);
}

.mk-views button:hover {
    color: var(--mk-ink);
}

.mk-views button[aria-pressed="true"] {
    color: var(--mk-ink);
    background-size: 100% 2px;
}

.mk-editor__stage {
    position: relative;
    aspect-ratio: 1920 / 1200;
    background: #f1f1f4;
}

.mk-editor__stage img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.45s ease;
}

.mk-editor__stage img.is-on {
    opacity: 1;
}

.mk-checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(2rem, 6vw, 5rem);
    max-width: 44rem;
    margin: clamp(4rem, 8vw, 6.5rem) auto 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.mk-checks li {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding-block: 0.95rem;
    border-bottom: 1px solid var(--mk-line);
    font-family: var(--mk-display);
    font-size: clamp(1.1rem, 1.7vw, 1.35rem);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.mk-checks li::before {
    content: "";
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    background: var(--mk-accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mk-nocode {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    font-family: var(--mk-display);
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    font-weight: 500;
    letter-spacing: -0.03em;
}

.mk-nocode + .mk-cta {
    margin-top: 1.75rem;
}

@media (max-width: 559px) {
    .mk-checks {
        grid-template-columns: 1fr;
    }
}

/* ---------- Wielki napis + karuzela szablonow ---------- */
.mk-bigtype {
    padding-block: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
    overflow: hidden;
}

.mk-bigtype__lead {
    padding-inline: var(--mk-gutter);
    margin-bottom: 1.5rem;
}

.mk-bigtype__line {
    display: block;
    width: max-content;
    font-family: var(--mk-display);
    font-size: clamp(5.5rem, 17vw, 16.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 0.86;
    color: var(--mk-accent);
    text-transform: uppercase;
    white-space: nowrap;
    transform: translate3d(var(--mk-x, 0), 0, 0);
    will-change: transform;
}

.mk-rail {
    display: flex;
    gap: clamp(1rem, 2.2vw, 2rem);
    padding: 1rem var(--mk-gutter) 3rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--mk-gutter);
    scrollbar-width: none;
    cursor: grab;
}

.mk-rail::-webkit-scrollbar {
    display: none;
}

.mk-rail.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

.mk-rail figure {
    flex: 0 0 clamp(16.5rem, 30vw, 25rem);
    margin: 0;
    scroll-snap-align: start;
}

.mk-rail .mk-browser {
    box-shadow: 0 1.6rem 2.4rem -1.4rem rgba(18, 18, 18, 0.35);
}

.mk-rail .mk-browser img {
    aspect-ratio: 720 / 880;
    pointer-events: none;
    user-select: none;
}

.mk-rail figcaption {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    font-family: var(--mk-display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.03em;
}

.mk-rail figcaption span {
    font-family: var(--mk-monoface);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--mk-ink-soft);
}

.mk-rail__after {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    padding: 0 var(--mk-gutter) clamp(4.5rem, 9vw, 8rem);
    text-align: center;
}

.mk-rail__after .mk-btn {
    margin-top: 1.4rem;
}

/* ---------- Ciemny blok z teza ---------- */
.mk-split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2.5rem, 7vw, 7rem);
    align-items: center;
}

.mk-split__text {
    display: grid;
    gap: 1.75rem;
    justify-items: start;
}

.mk-split__text p {
    max-width: 28em;
    color: rgba(255, 255, 255, 0.72);
}

.mk-split__art {
    position: relative;
    padding: 1.5rem 0 1.5rem 1.5rem;
}

.mk-split__art .mk-browser {
    transform: rotate(2.2deg);
}

.mk-split__art .mk-browser img {
    aspect-ratio: 720 / 620;
}

.mk-figures {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin: clamp(3.5rem, 8vw, 6.5rem) 0 0;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.mk-figures div {
    display: grid;
    gap: 0.5rem;
}

.mk-figures dt {
    font-family: var(--mk-display);
    font-size: clamp(2.4rem, 5.4vw, 4.6rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 0.95;
}

.mk-figures dd {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 859px) {
    .mk-split {
        grid-template-columns: 1fr;
    }

    .mk-split__art {
        padding: 0 0.75rem;
    }

    .mk-figures {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
}

/* ---------- Cennik ---------- */
.mk-pricing-band {
    padding: clamp(1rem, 2.2vw, 2rem);
}

.mk-pricing {
    position: relative;
    padding: clamp(3rem, 7vw, 6rem) clamp(1.1rem, 4vw, 4rem);
    border-radius: var(--mk-r-lg);
    background:
        radial-gradient(120% 70% at 50% 110%, color-mix(in srgb, var(--mk-accent) 42%, transparent), transparent 70%),
        var(--mk-ink);
    color: #fff;
    text-align: center;
    overflow: hidden;
}

.mk-pricing > .mk-mono {
    color: var(--mk-accent-tint);
}

.mk-pricing .mk-h2 {
    margin-top: 0.75rem;
}

.mk-period {
    display: inline-flex;
    gap: 0.25rem;
    margin-top: 2rem;
    padding: 0.3rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0.8rem;
}

.mk-period button {
    padding: 0.65rem 1.1rem;
    border: 0;
    border-radius: 0.55rem;
    background: transparent;
    color: #fff;
    font-family: var(--mk-monoface);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.mk-period button:hover {
    background: rgba(255, 255, 255, 0.12);
}

.mk-period button[aria-pressed="true"] {
    background: var(--mk-accent);
    color: #fff;
}

.mk-period__hint {
    min-height: 1.5em;
    margin-top: 0.9rem;
    color: var(--mk-lemon);
}

.mk-plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    max-width: 66rem;
    margin: 2.5rem auto 0;
    text-align: left;
}

.mk-plan {
    display: flex;
    flex-direction: column;
    padding: clamp(1.4rem, 2.2vw, 2rem);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--mk-r);
    background: rgba(18, 18, 18, 0.72);
}

.mk-plan--featured {
    border-color: var(--mk-accent-tint);
    box-shadow: 0 0 0 1px var(--mk-accent-tint);
}

.mk-plan__tag {
    min-height: 1.5em;
    margin-bottom: 0.5rem;
    color: var(--mk-lemon);
    font-size: 0.68rem;
}

.mk-plan__price {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

.mk-plan__price strong {
    font-family: var(--mk-display);
    font-size: clamp(3.6rem, 5.4vw, 4.8rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 0.82;
    font-variant-numeric: tabular-nums;
}

.mk-plan__price span {
    padding-bottom: 0.15rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    line-height: 1.25;
}

.mk-plan__for {
    margin-top: 1.1rem;
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.82);
}

.mk-plan h4 {
    margin-top: 1.75rem;
    font-family: var(--mk-body);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0;
}

.mk-plan ul {
    display: grid;
    gap: 0.6rem;
    margin: 0.85rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.95rem;
    line-height: 1.35;
}

.mk-plan li {
    position: relative;
    padding-left: 1.7rem;
}

.mk-plan li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.1em;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--mk-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 72% no-repeat;
}

.mk-plan .mk-btn {
    margin-top: auto;
}

.mk-plan ul:last-of-type {
    margin-bottom: 2rem;
}

.mk-pricing__foot {
    margin-top: 2rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
}

.mk-pricing__foot a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (max-width: 899px) {
    .mk-plans {
        grid-template-columns: 1fr;
        max-width: 30rem;
    }

    .mk-period button {
        padding-inline: 0.75rem;
        font-size: 0.68rem;
        letter-spacing: 0.08em;
    }
}

/* ---------- Kroki (przyklejona teza + numerowana lista) ---------- */
.mk-steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 7vw, 7rem);
    align-items: start;
}

.mk-steps__claim {
    position: sticky;
    top: calc(var(--mk-nav-h) + 12vh);
    font-family: var(--mk-display);
    font-size: clamp(2.6rem, 6.3vw, 6rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 0.96;
    text-align: right;
    text-wrap: balance;
}

.mk-steps__list {
    display: grid;
    gap: clamp(3rem, 9vh, 6rem);
    margin: 0;
    padding: clamp(1rem, 16vh, 11rem) 0 clamp(1rem, 8vh, 5rem);
    list-style: none;
    counter-reset: mk-step;
}

.mk-steps__list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 1.5rem;
    align-items: start;
    max-width: 30rem;
    counter-increment: mk-step;
}

.mk-steps__list li::before {
    content: counter(mk-step);
    grid-row: span 2;
    min-width: 0.9em;
    font-family: var(--mk-display);
    font-size: clamp(3.6rem, 6vw, 5.4rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 0.8;
}

.mk-steps__list p {
    margin-top: 0.6rem;
    color: var(--mk-ink-soft);
}

.mk-steps__list .mk-cta {
    grid-column: 2;
    margin-top: 1.5rem;
}

@media (max-width: 859px) {
    .mk-steps {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .mk-steps__claim {
        position: static;
        text-align: left;
    }

    .mk-steps__list {
        padding: 0;
        gap: 2.5rem;
    }
}

/* ---------- FAQ ---------- */
.mk-faq {
    max-width: 46rem;
    margin: clamp(2.5rem, 5vw, 4rem) auto 0;
    text-align: left;
}

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

.mk-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 1.35rem;
    font-family: var(--mk-display);
    font-size: clamp(1.15rem, 1.8vw, 1.4rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.2;
    list-style: none;
    cursor: pointer;
}

.mk-faq summary::-webkit-details-marker {
    display: none;
}

.mk-faq summary::after {
    content: "";
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    background:
        linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
        linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
    transition: transform 0.3s var(--mk-ease);
}

.mk-faq details[open] summary::after {
    transform: rotate(45deg);
}

.mk-faq summary:hover {
    color: var(--mk-accent);
}

.mk-faq details p {
    max-width: 38em;
    padding-bottom: 1.6rem;
    color: var(--mk-ink-soft);
}

/* ---------- Kontakt ---------- */
.mk-contact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 7vw, 7rem);
    align-items: start;
}

.mk-contact .mk-lead {
    margin-top: 1.5rem;
}

.mk-contact__lines {
    display: grid;
    gap: 0.4rem;
    margin-top: clamp(2rem, 4vw, 3.5rem);
}

.mk-contact__lines a {
    width: fit-content;
    font-family: var(--mk-display);
    font-size: clamp(1.7rem, 3.4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    background: linear-gradient(var(--mk-accent), var(--mk-accent)) left bottom / 0 3px no-repeat;
    transition: background-size 0.3s var(--mk-ease), color 0.2s;
}

.mk-contact__lines a:hover {
    color: var(--mk-accent);
    background-size: 100% 3px;
}

.mk-contact__addr {
    margin-top: 1.75rem;
    color: var(--mk-ink-soft);
}

.mk-contact__addr a {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.mk-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
    padding: clamp(1.4rem, 3vw, 2.5rem);
    border-radius: var(--mk-r-lg);
    background: var(--mk-white);
}

.mk-form__full {
    grid-column: 1 / -1;
}

.mk-form label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.mk-form input,
.mk-form textarea {
    width: 100%;
    padding: 0.8rem 0.95rem;
    border: 1.5px solid var(--mk-line);
    border-radius: var(--mk-r-sm);
    background: var(--mk-card);
    color: var(--mk-ink);
    font: inherit;
    font-size: 1rem;
    transition: border-color 0.2s, background-color 0.2s;
}

.mk-form textarea {
    min-height: 9.5rem;
    resize: vertical;
}

.mk-form input:focus,
.mk-form textarea:focus {
    outline: none;
    border-color: var(--mk-accent);
    background: #fff;
}

.mk-form__status {
    min-height: 1.5em;
    font-size: 0.95rem;
}

.mk-form__status.is-ok {
    color: #12703c;
}

.mk-form__status.is-error {
    color: #b3261e;
}

@media (max-width: 859px) {
    .mk-contact {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 479px) {
    .mk-form {
        grid-template-columns: 1fr;
    }
}

/* ---------- Koncowe wezwanie ---------- */
.mk-final {
    padding: 0 clamp(1rem, 2.2vw, 2rem) clamp(1rem, 2.2vw, 2rem);
}

.mk-final__card {
    display: grid;
    justify-items: center;
    gap: 1.25rem;
    padding: clamp(4rem, 11vw, 9rem) var(--mk-gutter);
    border-radius: var(--mk-r-lg);
    background: var(--mk-white);
    text-align: center;
}

.mk-final__card .mk-btn {
    margin-top: 1.25rem;
}

/* ---------- Stopka ---------- */
.mk-footer {
    padding: clamp(3.5rem, 8vw, 6.5rem) var(--mk-gutter) 2.5rem;
    background: var(--mk-ink);
    color: #fff;
}

.mk-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    max-width: var(--mk-max);
    margin-inline: auto;
}

.mk-footer__brand {
    display: grid;
    justify-items: start;
    align-content: start;
    gap: 1.5rem;
}

.mk-footer__brand .mk-logo img {
    height: clamp(4.5rem, 8vw, 6.5rem);
}

.mk-footer__note {
    margin-top: -0.75rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.68rem;
}

.mk-footer__cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
}

.mk-footer__cols h2 {
    padding-bottom: 0.7rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    font-family: var(--mk-monoface);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    line-height: 1.5;
}

.mk-footer__cols ul {
    display: grid;
    gap: 0.55rem;
    margin: 1.1rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.78);
}

.mk-footer a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.mk-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem 2rem;
    max-width: var(--mk-max);
    margin: clamp(3rem, 7vw, 5.5rem) auto 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
}

.mk-footer__bottom p:last-child {
    display: flex;
    gap: 1.5rem;
}

@media (max-width: 859px) {
    .mk-footer__top {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 559px) {
    .mk-footer__cols {
        grid-template-columns: 1fr 1fr;
    }

    /* Miejsce na plywajacy przycisk oddzwaniania. */
    .mk-footer {
        padding-bottom: 6rem;
    }
}

.mk-god {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--mk-ink);
    color: #fff !important;
}

/* ---------- Naglowki podstron (cennik, regulaminy) ---------- */
.mk-pagehead {
    padding: clamp(3.5rem, 9vw, 7rem) var(--mk-gutter) clamp(2.5rem, 5vw, 4rem);
    text-align: center;
}

.mk-pagehead .mk-lead {
    margin: 1.5rem auto 0;
}

/* Karty z przesunietym kolorowym cieniem (strona cennika) */
.mk-stack {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}

.mk-stack figure {
    margin: 0;
    padding: clamp(1.5rem, 2.6vw, 2.25rem);
    border-radius: var(--mk-r-sm);
    background: var(--mk-white);
    box-shadow: 0.75rem 0.75rem 0 var(--mk-sky);
}

.mk-stack figure:nth-child(2) {
    margin-top: 3.5rem;
    box-shadow: 0.75rem 0.75rem 0 var(--mk-blush);
}

.mk-stack figure:nth-child(3) {
    margin-top: 7rem;
    box-shadow: 0.75rem 0.75rem 0 var(--mk-accent-tint);
}

.mk-stack blockquote {
    margin: 0;
    font-family: var(--mk-display);
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.12;
}

.mk-stack figcaption {
    margin-top: 1rem;
    color: var(--mk-ink-soft);
    font-size: 0.95rem;
}

@media (max-width: 859px) {
    .mk-stack {
        grid-template-columns: 1fr;
        max-width: 26rem;
        margin-inline: auto;
    }

    .mk-stack figure:nth-child(n) {
        margin-top: 0;
    }

    .mk-stack figure:nth-child(2) {
        margin-left: 1.5rem;
    }
}

/* ---------- Strona Start ---------- */
.mk-start {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    min-height: calc(100svh - var(--mk-nav-h));
}

.mk-start__main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2.5rem, 7vw, 6rem) var(--mk-gutter);
}

.mk-start__main .mk-lead {
    margin-top: 1.5rem;
}

.mk-choices {
    display: grid;
    margin-top: clamp(2.5rem, 5vw, 4rem);
    border-top: 1.5px solid var(--mk-ink);
}

.mk-choices a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.35rem 1.5rem;
    padding-block: 1.6rem;
    border-bottom: 1.5px solid var(--mk-ink);
    transition: padding 0.3s var(--mk-ease), color 0.2s;
}

.mk-choices a:hover {
    padding-left: 0.75rem;
    color: var(--mk-accent);
}

.mk-choices strong {
    font-family: var(--mk-display);
    font-size: clamp(1.7rem, 3.4vw, 2.7rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.mk-choices small {
    grid-column: 1;
    font-size: 1rem;
    color: var(--mk-ink-soft);
}

.mk-choices svg {
    grid-row: 1 / span 2;
    grid-column: 2;
    width: clamp(1.8rem, 3vw, 2.6rem);
    height: auto;
    transition: transform 0.3s var(--mk-ease);
}

.mk-choices a:hover svg {
    transform: translateX(0.4rem);
}

.mk-start__art {
    position: relative;
    background: var(--mk-ink);
    overflow: hidden;
}

.mk-start__cols {
    position: absolute;
    inset: -6% 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    padding-inline: clamp(1.5rem, 4vw, 3.5rem);
    transform: rotate(-4deg) scale(1.08);
}

.mk-start__cols .mk-hero__track {
    width: 100%;
}

@media (max-width: 899px) {
    .mk-start {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .mk-start__art {
        height: 22rem;
    }
}

/* ---------- Tresci prawne ---------- */
.mk-legal {
    max-width: 46rem;
    margin-inline: auto;
    padding: 0 var(--mk-gutter) clamp(4rem, 9vw, 8rem);
}

.mk-legal .container,
.mk-legal .row,
.mk-legal [class*="col-"] {
    display: block;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}

.mk-legal h1 {
    display: none;
}

.mk-legal h2 {
    margin: 3rem 0 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--mk-line);
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    letter-spacing: -0.03em;
    line-height: 1.12;
}

.mk-legal h3 {
    margin: 1.75rem 0 0.6rem;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
}

.mk-legal p,
.mk-legal li {
    color: #33312d;
    line-height: 1.65;
}

.mk-legal p {
    margin-bottom: 1rem;
}

.mk-legal ul,
.mk-legal ol {
    margin: 0 0 1rem;
    padding-left: 1.3rem;
}

.mk-legal li {
    margin-bottom: 0.45rem;
}

.mk-legal a {
    color: var(--mk-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mk-legal section {
    margin: 0 !important;
}

/* ---------- Ograniczony ruch ---------- */
@media (prefers-reduced-motion: reduce) {
    .mk-hero__track,
    .mk-hero__rowtrack {
        animation: none;
    }

    .mk-bigtype__line {
        transform: none;
    }

    .mk *,
    .mk *::before,
    .mk *::after {
        transition-duration: 0.01ms !important;
    }
}

.mk-hero__body .mk-hero__sub {
    margin-top: 0.25rem;
}

@media (prefers-reduced-motion: no-preference) {
    .mk-hero__body > *:nth-child(5) { animation-delay: 0.32s; }
}

.mk-hero__track--down {
    animation-name: mk-sink;
}

.mk-band--flush {
    padding-top: 0;
}

.mk-after-title {
    margin-top: 1.5rem;
}

.mk-inline-link {
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

.mk-inline-link:hover {
    color: var(--mk-accent);
}

/* Otwarte menu mobilne zaslania cala strone, wiec widget oddzwaniania nie moze na nim lezec. */
body.mk-menu-open .callback-widget {
    display: none;
}

/* ---------- Wielki napis na samym dole (odslaniany jak kurtyna) ---------- */
.mk-mega {
    --mega-fs: 40.5vw;
    --mega-h: calc(var(--mega-fs) * 0.83 + 6.5rem);

    position: relative;
    height: var(--mega-h);
    background: var(--mk-ink);
    clip-path: inset(0);
}

.mk-mega__inner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: var(--mega-h);
    padding-inline: var(--mk-gutter);
    background: var(--mk-ink);
    color: var(--mk-paper);
    overflow: hidden;
}

.mk-mega__row {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.6);
}

.mk-mega__word {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: 0 -0.03em 0.035em;
    font-family: var(--mk-display);
    font-size: var(--mega-fs);
    line-height: 0.8;
    letter-spacing: -0.04em;
    user-select: none;
}

.mk-mega__word > span {
    position: relative;
    display: block;
    font-weight: 700;
    font-variation-settings: "opsz" 96;
    transition: font-weight 0.5s var(--mk-ease);
}

/* Aureola nad literą "o": cienka elipsa i miekka poswiata. */
.mk-mega__o::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 46%;
    z-index: -1;
    width: 1.1em;
    height: 1.1em;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--mk-accent) 85%, transparent), transparent);
    transform: translate(-50%, -50%);
    opacity: 0.75;
}

.mk-mega__ring {
    position: absolute;
    left: 50%;
    top: 0.1em;
    width: 0.56em;
    height: 0.16em;
    border: 0.034em solid var(--mk-lemon);
    border-radius: 50%;
    transform: translateX(-50%) rotate(-7deg);
}

@media (prefers-reduced-motion: no-preference) {
    .mk-mega__ring {
        animation: mk-halo 4.5s ease-in-out infinite;
    }

    .mk-mega__word:not(.is-live) > span {
        animation: mk-breathe 5s ease-in-out infinite;
    }

    .mk-mega__word:not(.is-live) > span:nth-child(2) { animation-delay: 0.45s; }
    .mk-mega__word:not(.is-live) > span:nth-child(3) { animation-delay: 0.9s; }
    .mk-mega__word:not(.is-live) > span:nth-child(4) { animation-delay: 1.35s; }

    .mk-mega__word.is-live > span {
        transition-duration: 0.25s;
    }
}

@keyframes mk-halo {
    0%, 100% { transform: translateX(-50%) translateY(0) rotate(-7deg); }
    50% { transform: translateX(-50%) translateY(-0.035em) rotate(-3deg); }
}

@keyframes mk-breathe {
    0%, 100% { font-weight: 700; }
    50% { font-weight: 300; }
}

@media (max-width: 599px) {
    .mk-mega {
        --mega-h: calc(var(--mega-fs) * 0.83 + 8rem);
    }

    .mk-mega__row span:last-child {
        display: none;
    }
}

/* Pojedynczy zrzut zamiast przelacznika widokow (strona Halo Sklepy). */
.mk-editor--shot {
    max-width: 52rem;
}

.mk-editor--shot .mk-browser img {
    aspect-ratio: 800 / 520;
    object-position: 50% 12%;
}

/* Na telefonie zrzut edytora jest kadrowany, zeby interfejs dalo sie przeczytac. */
@media (max-width: 699px) {
    .mk-editor__stage {
        aspect-ratio: 4 / 5;
    }

    .mk-editor__stage img {
        object-fit: cover;
        object-position: 50% 0;
    }

    .mk-editor__stage .mk-editor__shot--tresc {
        object-position: 78% 0;
    }

    .mk-editor__stage .mk-editor__shot--telefon {
        object-position: 80% 0;
    }
}

/* ---------- Widget oddzwaniania: obracana pieczec, karta powitalna i okno formularza ---------- */
.mk .callback-widget {
    left: clamp(0.75rem, 1.6vw, 1.5rem);
    bottom: calc(clamp(0.75rem, 1.6vw, 1.5rem) + env(safe-area-inset-bottom));
    align-items: flex-end;
    gap: 0.9rem;
}

.mk .callback-phone-btn {
    position: relative;
    width: 5.5rem;
    height: 5.5rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--mk-accent);
    box-shadow: 0 1rem 2rem -0.8rem color-mix(in srgb, var(--mk-accent) 80%, #000);
    animation: none;
    transition: transform 0.5s var(--mk-ease), box-shadow 0.4s;
}

.mk .callback-ring {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    animation: mk-spin 14s linear infinite;
}

.mk .callback-ring text {
    fill: #fff;
    font-family: var(--mk-monoface);
    font-size: 9.2px;
    font-weight: 500;
    letter-spacing: 0.06em;
}

.mk .callback-core {
    position: absolute;
    inset: 1.15rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--mk-ink);
    transition: transform 0.5s var(--mk-ease), background-color 0.3s;
}

.mk .callback-core i {
    color: var(--mk-lemon);
    font-size: 1.25rem;
    transform-origin: 50% 60%;
    animation: mk-ring 3.2s ease-in-out infinite;
}

@keyframes mk-spin {
    to { transform: rotate(360deg); }
}

@keyframes mk-ring {
    0%, 62%, 100% { transform: rotate(0); }
    66%, 78%, 90% { transform: rotate(-16deg); }
    72%, 84% { transform: rotate(16deg); }
}

@media (hover: hover) {
    .mk .callback-phone-btn:hover {
        transform: scale(1.08) rotate(-6deg);
        box-shadow: 0 1.4rem 2.4rem -0.8rem color-mix(in srgb, var(--mk-accent) 80%, #000);
    }

    .mk .callback-phone-btn:hover .callback-ring {
        animation-duration: 4s;
    }

    .mk .callback-phone-btn:hover .callback-core {
        transform: scale(1.12);
        background: #000;
    }
}

.mk .callback-phone-btn:active {
    transform: scale(0.96);
}

/* Karta powitalna */
.mk .callback-info-box {
    width: min(19rem, calc(100vw - 8.5rem));
    max-width: none;
    margin-bottom: 0.6rem;
    padding: 1.4rem 1.4rem 1.25rem;
    border-radius: 1.1rem;
    background: var(--mk-ink);
    color: #fff;
    box-shadow: 0.5rem 0.5rem 0 var(--mk-lemon);
    transform: rotate(-2deg);
    transform-origin: 0 100%;
    transition: opacity 0.3s ease, transform 0.5s var(--mk-ease);
}

@media (prefers-reduced-motion: no-preference) {
    .mk .callback-info-box:not(.hidden) {
        animation: mk-pop 0.7s var(--mk-ease) 1.2s both;
    }
}

@keyframes mk-pop {
    from { opacity: 0; transform: rotate(-9deg) translateY(1.5rem) scale(0.9); }
    to { opacity: 1; transform: rotate(-2deg); }
}

@media (hover: hover) {
    .mk .callback-info-box:hover {
        transform: rotate(0);
    }
}

.mk .callback-info-box h6 {
    margin: 0 0 0.5rem;
    font-family: var(--mk-display);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: #fff;
}

.mk .callback-info-box p {
    margin: 0;
    padding-right: 0.5rem;
    font-size: 0.98rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.78);
}

.mk .callback-close-btn {
    top: 0.7rem;
    right: 0.7rem;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.45rem;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 1.15rem;
    transition: background-color 0.2s, transform 0.4s var(--mk-ease);
}

.mk .callback-close-btn:hover {
    background: #fff;
    color: var(--mk-ink);
    transform: rotate(90deg);
}

.mk .callback-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    margin-top: 1.1rem;
    padding: 0.3rem 0.3rem 0.3rem 0.95rem;
    border: 0;
    border-radius: var(--mk-r-sm);
    background: var(--mk-lemon);
    color: var(--mk-ink);
    font-family: var(--mk-monoface);
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.25s;
}

.mk .callback-cta svg {
    width: 2.1rem;
    height: 2.1rem;
    padding: 0.65rem;
    border-radius: 0.4rem;
    background: var(--mk-ink);
    color: var(--mk-lemon);
    transition: transform 0.4s var(--mk-ease);
}

.mk .callback-cta:hover {
    background: #fff;
}

.mk .callback-cta:hover svg {
    transform: rotate(45deg);
}

@media (max-width: 599px) {
    .mk .callback-phone-btn {
        width: 4.5rem;
        height: 4.5rem;
    }

    .mk .callback-core {
        inset: 0.95rem;
    }

    .mk .callback-core i {
        font-size: 1.05rem;
    }

    .mk .callback-info-box {
        padding: 1.1rem 1.1rem 1rem;
    }

    .mk .callback-info-box h6 {
        font-size: 1.6rem;
    }

    .mk .callback-info-box p {
        font-size: 0.9rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mk .callback-ring,
    .mk .callback-core i {
        animation: none;
    }
}

/* Okno formularza (UniversalDrawer) w stylu stron marketingowych */
.mk .universal-drawer {
    --drawer-bg: var(--mk-paper);
    --drawer-text: var(--mk-ink);
    --drawer-text-muted: var(--mk-ink-soft);
    --drawer-border: var(--mk-line);
    --drawer-border-radius: 1.5rem;
    --drawer-primary: var(--mk-accent);
    --drawer-primary-hover: var(--mk-accent-deep);
    --drawer-overlay-bg: rgba(18, 18, 18, 0.72);
    --drawer-padding: 1.6rem;
    --drawer-shadow: 0.75rem 0.75rem 0 var(--mk-lemon);
    font-family: var(--mk-body);
}

.mk .universal-drawer__header {
    border-bottom: 0;
    padding-bottom: 0.25rem;
}

.mk .universal-drawer__title {
    font-family: var(--mk-display);
    font-size: clamp(1.6rem, 4.5vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.mk .universal-drawer__title i {
    display: none;
}

.mk .universal-drawer__close {
    border-radius: 0.5rem;
    background: var(--mk-white);
    color: var(--mk-ink);
    transition: background-color 0.2s, color 0.2s, transform 0.4s var(--mk-ease);
}

.mk .universal-drawer__close:hover {
    background: var(--mk-ink);
    color: #fff;
    transform: rotate(90deg);
}

.mk .universal-drawer__footer {
    border-top: 0;
    padding-top: 0;
}

.mk .universal-drawer__btn {
    min-height: 3.4rem;
    border-radius: var(--mk-r-sm);
    font-family: var(--mk-monoface);
    font-size: 0.84rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mk .universal-drawer__btn--primary:hover:not(:disabled) {
    background: var(--mk-ink);
}

.mk .callback-form-header {
    margin-bottom: 1.1rem;
    text-align: left;
}

.mk .callback-form-header p {
    color: var(--mk-ink-soft);
    font-size: 1rem;
}

/* Wybor terminu jako przelacznik z dwoma polami, bez ikon */
.mk .contact-options {
    gap: 0.3rem;
    margin-bottom: 1.4rem;
    padding: 0.3rem;
    border-radius: 0.8rem;
    background: var(--mk-white);
}

.mk .contact-option {
    display: grid;
    place-items: center;
    padding: 0.8rem 0.6rem;
    border: 0;
    border-radius: 0.55rem;
    background: transparent;
}

.mk .contact-option i {
    display: none;
}

.mk .contact-option span {
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.25;
    color: inherit;
}

.mk .contact-option:hover {
    background: var(--mk-paper);
}

.mk .contact-option.active {
    background: var(--mk-ink);
    color: #fff;
}

.mk .callback-form-fields .form-group label {
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mk-ink);
}

.mk .callback-form-fields .form-group label i {
    display: none;
}

.mk .callback-form-fields .form-group input,
.mk .callback-form-fields .form-group select {
    padding: 0.85rem 1rem;
    border: 1.5px solid var(--mk-line);
    border-radius: var(--mk-r-sm);
    background: var(--mk-white);
    color: var(--mk-ink);
    font-size: 1.05rem;
}

.mk .callback-form-fields .form-group input:focus,
.mk .callback-form-fields .form-group select:focus {
    border-color: var(--mk-accent);
}

.mk .callback-footer {
    margin-top: 0.5rem;
    padding-top: 1rem;
    text-align: left;
}

.mk .callback-stats {
    margin: 0;
    font-family: var(--mk-monoface);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mk-ink-soft);
}

.mk .callback-stats i {
    display: none;
}

@media (max-width: 599px) {
    .mk .contact-options {
        flex-direction: row;
    }
}

/* Widget lezy pod oknem formularza, a na telefonie okno jest arkuszem bez przesunietego cienia. */
.mk .callback-widget {
    z-index: 890;
}

@media (max-width: 599px) {
    .mk .universal-drawer {
        --drawer-shadow: none;
    }

    .mk .datetime-group {
        flex-direction: column;
        gap: 0;
    }
}

@media (max-width: 599px) {
    .mk .universal-drawer__container {
        border-radius: 1.5rem !important;
    }
}

/* ---------- Klikalne podglady przykladowych stron ---------- */
a.mk-device,
a.mk-browser,
a.mk-shot {
    display: block;
    position: relative;
    cursor: pointer;
}

.mk-trades__stage a.mk-browser {
    display: flex;
}

.mk-browser__bar {
    flex-shrink: 0;
}

a.mk-device,
a.mk-shot,
.mk-rail a.mk-browser,
.mk-split__art a.mk-browser {
    transition: transform 0.45s var(--mk-ease), box-shadow 0.45s;
}

/* Etykieta "Zobacz strone" pojawiajaca sie nad podgladem */
.mk-peek {
    position: absolute;
    left: 50%;
    bottom: 1.25rem;
    padding: 0.85rem 1.2rem;
    border-radius: var(--mk-r-sm);
    background: var(--mk-ink);
    color: #fff;
    font-family: var(--mk-monoface);
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0.3rem 0.3rem 0 var(--mk-lemon);
    opacity: 0;
    transform: translate(-50%, 0.8rem);
    transition: opacity 0.3s, transform 0.45s var(--mk-ease);
    pointer-events: none;
}

@media (hover: hover) {
    a.mk-device:hover,
    a.mk-shot:hover {
        transform: scale(1.03);
    }

    .mk-rail a.mk-browser:hover {
        transform: translateY(-0.5rem);
    }

    a.mk-browser:hover .mk-peek,
    a.mk-browser:focus-visible .mk-peek {
        opacity: 1;
        transform: translate(-50%, 0);
    }

    /* Najechanie na kolumne w hero zatrzymuje przewijanie, zeby dalo sie trafic w podglad. */
    .mk-hero__col:hover .mk-hero__track,
    .mk-start__cols:hover .mk-hero__track {
        animation-play-state: paused;
    }
}

/* Na ekranach dotykowych etykieta jest widoczna od razu. */
@media (hover: none) {
    .mk-peek {
        opacity: 1;
        transform: translate(-50%, 0);
        bottom: 0.9rem;
        padding: 0.7rem 1rem;
        font-size: 0.68rem;
    }
}

/* ---------- Demo edytora: podglad zmieniany na zywo ---------- */
.mk-demo {
    --d-accent: #D90429;
    --d-bg: #FFA3CB;
    --d-ink: #1A0508;
    --d-on: #FFFFFF;
    --d-font: 'Bodoni Moda', Georgia, serif;
    --d-case: none;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    max-width: 72rem;
    margin: clamp(2rem, 4vw, 3rem) auto 0;
    border-radius: var(--mk-r-lg);
    background: var(--mk-ink);
    overflow: hidden;
    text-align: left;
}

.mk-demo__stage {
    display: grid;
    place-items: center;
    min-height: 34rem;
    padding: clamp(1.25rem, 4vw, 3.5rem);
    background: var(--d-accent);
    transition: background-color 0.6s var(--mk-ease);
}

.mk-demo__site {
    container-type: inline-size;
    width: 100%;
    border-radius: 0.85rem;
    background: var(--d-bg);
    color: var(--d-ink);
    box-shadow: 0 2.5rem 4rem -2rem rgba(0, 0, 0, 0.55);
    overflow: hidden;
    transition: width 0.7s var(--mk-ease), background-color 0.6s var(--mk-ease), color 0.6s;
}

.mk-demo.is-phone .mk-demo__site {
    width: 17.5rem;
    border-radius: 1.6rem;
}

.mk-demo.is-phone .mk-browser__bar {
    justify-content: center;
}

.mk-demo.is-phone .mk-browser__bar i {
    display: none;
}

.mk-demo.is-phone .mk-browser__bar span {
    margin: 0;
}

.mk-demo__page {
    padding: 0 6cqw 6cqw;
}

.mk-demo__nav {
    display: flex;
    align-items: center;
    gap: 4cqw;
    padding-block: 3.2cqw;
    font-size: max(0.62rem, 1.9cqw);
    font-weight: 600;
}

.mk-demo__nav strong {
    margin-right: auto;
    font-family: var(--d-font);
    font-size: max(1rem, 3.6cqw);
    text-transform: var(--d-case);
    color: var(--d-accent);
    transition: color 0.6s;
}

.mk-demo em {
    display: inline-block;
    padding: 1.5cqw 2.6cqw;
    border-radius: 0.35rem;
    background: var(--d-accent);
    color: var(--d-on);
    font-style: normal;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 0.6s, color 0.6s;
}

.mk-demo__hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 5cqw;
    align-items: center;
    padding-top: 2cqw;
}

.mk-demo__title {
    font-family: var(--d-font);
    font-size: 9.2cqw;
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.02em;
    text-transform: var(--d-case);
    color: var(--d-accent);
    overflow-wrap: anywhere;
    transition: color 0.6s;
}

.mk-demo__text {
    max-width: 24em;
    margin-block: 3cqw 3.5cqw;
    font-size: max(0.7rem, 2.3cqw);
    line-height: 1.45;
}

.mk-demo__hero em {
    padding: 2.2cqw 3.6cqw;
    font-size: max(0.7rem, 2.2cqw);
}

.mk-demo__hero img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
}

@container (max-width: 18.5rem) {
    .mk-demo__nav span {
        display: none;
    }

    .mk-demo__hero {
        grid-template-columns: 1fr;
        gap: 6cqw;
    }

    .mk-demo__title {
        font-size: 14cqw;
    }

    .mk-demo__text {
        font-size: 0.72rem;
    }

    .mk-demo__hero em,
    .mk-demo__nav em {
        padding: 0.5rem 0.8rem;
        font-size: 0.68rem;
    }

    .mk-demo__hero img {
        aspect-ratio: 5 / 4;
    }
}

.mk-demo__panel {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    padding: clamp(1.5rem, 2.5vw, 2.25rem);
    color: #fff;
}

.mk-demo__hint {
    font-family: var(--mk-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.08;
}

.mk-demo__group .mk-mono {
    display: block;
    margin-bottom: 0.7rem;
    font-family: var(--mk-monoface);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.55);
}

.mk-demo__swatches {
    display: flex;
    gap: 0.5rem;
}

.mk-demo__swatches button {
    flex: 1;
    aspect-ratio: 1;
    max-width: 3rem;
    padding: 0;
    border: 0;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, var(--sw) 50%, var(--sw2) 50%);
    cursor: pointer;
    transition: transform 0.35s var(--mk-ease), box-shadow 0.25s;
}

.mk-demo__swatches button:hover {
    transform: translateY(-0.2rem);
}

.mk-demo__swatches button[aria-pressed="true"] {
    box-shadow: 0 0 0 2px var(--mk-ink), 0 0 0 4px #fff;
}

.mk-demo__fonts {
    display: grid;
    gap: 0.15rem;
}

.mk-demo__fonts button {
    padding: 0.35rem 0;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.7rem;
    line-height: 1.1;
    text-align: left;
    cursor: pointer;
    transition: color 0.25s, padding 0.35s var(--mk-ease);
}

.mk-demo__fonts button:hover {
    color: rgba(255, 255, 255, 0.75);
}

.mk-demo__fonts button[aria-pressed="true"] {
    padding-left: 0.6rem;
    color: #fff;
}

.mk-demo__panel input {
    width: 100%;
    padding: 0.8rem 0.9rem;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--mk-r-sm);
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 1rem;
}

.mk-demo__panel input:focus {
    outline: none;
    border-color: #fff;
}

.mk-demo__views {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 0.7rem;
    background: rgba(255, 255, 255, 0.1);
}

.mk-demo__views button {
    padding: 0.65rem 0.5rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: #fff;
    font-family: var(--mk-monoface);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
}

.mk-demo__views button[aria-pressed="true"] {
    background: #fff;
    color: var(--mk-ink);
}

@media (max-width: 899px) {
    .mk-demo {
        grid-template-columns: 1fr;
    }

    .mk-demo__stage {
        min-height: 0;
    }

    .mk-demo.is-phone .mk-demo__site {
        width: min(17.5rem, 100%);
    }

    .mk-demo__panel {
        gap: 1.25rem;
    }

    .mk-demo__fonts {
        grid-template-columns: repeat(3, auto);
        justify-content: start;
        gap: 1.1rem;
    }

    .mk-demo__fonts button {
        font-size: 1.25rem;
    }

    .mk-demo__fonts button[aria-pressed="true"] {
        padding-left: 0;
        text-decoration: underline;
        text-underline-offset: 5px;
        text-decoration-thickness: 2px;
    }

    /* Na telefonie i tak widac waski uklad, wiec przelacznik widoku jest zbedny. */
    .mk-demo__group:last-child {
        display: none;
    }
}

/* ---------- Widget oddzwaniania, wersja dyskretna ---------- */
/* Karta "Hej!" nie wyskakuje sama: pokazuje sie dopiero po najechaniu na kuleczke. */
.mk .callback-info-box,
.mk .callback-info-box:not(.hidden) {
    animation: none;
    opacity: 0;
    visibility: hidden;
    transform: rotate(-6deg) translateY(0.8rem) scale(0.94);
    transition: opacity 0.25s ease, transform 0.45s var(--mk-ease), visibility 0s linear 0.45s;
}

@media (hover: hover) {
    .mk .callback-widget:hover .callback-info-box:not(.hidden),
    .mk .callback-widget:focus-within .callback-info-box:not(.hidden) {
        opacity: 1;
        visibility: visible;
        transform: rotate(-2deg);
        transition-delay: 0s;
    }
}

.mk .callback-phone-btn {
    width: 4.75rem;
    height: 4.75rem;
    animation: mk-ball 7s cubic-bezier(0.3, 0, 0.3, 1) 3s infinite;
}

.mk .callback-core {
    inset: 1rem;
}

.mk .callback-core i {
    font-size: 1.1rem;
    animation: mk-ball-ring 7s ease-in-out 3s infinite;
}

/* Dwie fale rozchodzace sie spod kuleczki w chwili "dzwonienia" */
.mk .callback-phone-btn::before,
.mk .callback-phone-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 50%;
    border: 2px solid var(--mk-accent);
    opacity: 0;
    animation: mk-ball-wave 7s ease-out 3s infinite;
}

.mk .callback-phone-btn::after {
    animation-delay: 3.25s;
}

/* Co 7 sekund: przysiad, podskok, ladowanie i krotkie drzenie. Przez reszte czasu spokoj. */
@keyframes mk-ball {
    0%, 22%, 100% { transform: none; }
    3% { transform: translateY(0.15rem) scale(1.08, 0.9); }
    7% { transform: translateY(-1.1rem) scale(0.94, 1.06) rotate(-8deg); }
    11% { transform: translateY(0) scale(1.07, 0.92) rotate(0); }
    13% { transform: translateX(-0.2rem) rotate(-7deg); }
    15% { transform: translateX(0.2rem) rotate(7deg); }
    17% { transform: translateX(-0.14rem) rotate(-5deg); }
    19% { transform: translateX(0.1rem) rotate(3deg); }
}

@keyframes mk-ball-ring {
    0%, 10%, 24%, 100% { transform: rotate(0); }
    12%, 16%, 20% { transform: rotate(-22deg); }
    14%, 18%, 22% { transform: rotate(22deg); }
}

@keyframes mk-ball-wave {
    0%, 10% { opacity: 0; transform: scale(1); }
    12% { opacity: 0.7; }
    30%, 100% { opacity: 0; transform: scale(1.9); }
}

@media (hover: hover) {
    .mk .callback-phone-btn:hover {
        animation-play-state: paused;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mk .callback-phone-btn,
    .mk .callback-core i,
    .mk .callback-phone-btn::before,
    .mk .callback-phone-btn::after {
        animation: none;
    }
}

/* ---------- Lista branz na telefonie: podglad rozwija sie pod kliknietym tytulem ---------- */
.mk-trades__inline {
    display: none;
}

@media (max-width: 859px) {
    .mk-trades__side {
        order: 0;
        gap: 0;
    }

    .mk-trades__stage,
    .mk-trades__side > p {
        display: none;
    }

    .mk-trades {
        gap: 1.5rem;
    }

    .mk-trades__list {
        order: 1;
    }

    .mk-trades__inline {
        display: block;
    }

    /* Wysokosc animuje marketing.js (razem z przewijaniem); tu sa tylko stany spoczynkowe. */
    .mk-trades__clip {
        height: 0;
        overflow: hidden;
    }

    .mk-trades__list button[aria-pressed="true"] + .mk-trades__inline .mk-trades__clip {
        height: auto;
    }

    .mk-trades__clip > a {
        margin-block: 0.75rem 1.5rem;
        box-shadow: none;
    }

    .mk-trades__inline img {
        aspect-ratio: 800 / 760;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mk-trades__inline {
        transition: none;
    }
}

@media (max-width: 859px) {
    /* Przegladarka nie probuje sama "trzymac" pozycji przy zwijaniu podgladow. */
    .mk-trades {
        overflow-anchor: none;
    }
}

/* Na waskich ekranach rotujace slowo ma wlasna linie o stalej wysokosci, zeby zmiana slowa
   nie zawijala tekstu i nie przesuwala calej strony pod spodem. */
@media (max-width: 1099px) {
    .mk-hero .mk-swap {
        display: grid;
        width: auto !important;
        justify-items: center;
    }
}

/* Sekcja z teza bez ilustracji: sam tekst, szerzej i wiekszym krojem. */
.mk-split--solo {
    grid-template-columns: 1fr;
}

.mk-split--solo .mk-h2 {
    font-size: clamp(2.6rem, 7vw, 6rem);
    max-width: 12em;
}

.mk-split--solo .mk-split__text p {
    max-width: 34em;
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
}

/* ---------- Demo edytora na telefonie: podglad i wszystkie kontrolki na jednym ekranie ---------- */
@media (max-width: 699px) {
    .mk-demo {
        margin-top: 1.5rem;
        border-radius: 1.25rem;
    }

    .mk-demo__stage {
        padding: 0.75rem 0.75rem 0.9rem;
    }

    .mk-demo__site {
        border-radius: 0.7rem;
        box-shadow: 0 1.2rem 2rem -1.2rem rgba(0, 0, 0, 0.55);
    }

    .mk-demo__site .mk-browser__bar {
        height: 1.4rem;
    }

    .mk-demo__page {
        padding: 0 5cqw 5cqw;
    }

    .mk-demo__nav span {
        display: none;
    }

    .mk-demo__hero {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
        min-height: 10.5rem;
    }

    .mk-demo__title {
        font-size: 9.6cqw;
    }

    .mk-demo__text {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 0.68rem;
    }

    .mk-demo__hero img {
        aspect-ratio: 3 / 4;
    }

    .mk-demo__panel {
        gap: 0.85rem;
        padding: 0.9rem 0.9rem 1rem;
    }

    .mk-demo__hint {
        display: none;
    }

    /* Etykiety grup zostaja dla czytnikow ekranu, wizualnie robia miejsce kontrolkom. */
    .mk-demo__group .mk-mono {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .mk-demo__swatches {
        gap: 0.45rem;
    }

    .mk-demo__swatches button {
        max-width: none;
        aspect-ratio: auto;
        height: 2.5rem;
    }

    .mk-demo__fonts {
        grid-template-columns: repeat(3, 1fr);
        justify-content: stretch;
        gap: 0.4rem;
    }

    .mk-demo__fonts button {
        padding: 0.55rem 0.2rem;
        border-radius: 0.5rem;
        background: rgba(255, 255, 255, 0.08);
        font-size: 1.05rem;
        text-align: center;
    }

    .mk-demo__fonts button[aria-pressed="true"] {
        padding-left: 0.2rem;
        background: #fff;
        color: var(--mk-ink);
        text-decoration: none;
    }

    .mk-demo__panel input {
        padding: 0.65rem 0.8rem;
    }
}

/* Wielki napis: linie wysrodkowane i dopasowane do ekranu (rozmiar ustawia marketing.js; tu wartosc zapasowa). */
.mk-bigtype {
    display: grid;
    justify-items: center;
}

.mk-bigtype__lead {
    justify-self: start;
}

.mk-bigtype__line {
    font-size: 9.6vw;
    line-height: 0.9;
}

.mk-bigtype__line + .mk-bigtype__line {
    font-size: 11.6vw;
}

@media (max-width: 699px) {
    .mk .callback-widget {
        transition: opacity 0.3s, transform 0.4s var(--mk-ease);
    }

    body.mk-demo-active .callback-widget {
        opacity: 0;
        transform: translateY(1.5rem);
        pointer-events: none;
    }

    body.mk-demo-active .callback-widget > * {
        pointer-events: none;
    }
}

/* ---------- Okno zamawiania rozmowy na telefonie: zwarte, miesci sie na jednym ekranie ---------- */
@media (max-width: 640px) {
    .mk .universal-drawer {
        --drawer-padding: 1.1rem;
    }

    .mk .universal-drawer__container {
        max-height: calc(100dvh - 24px);
        touch-action: pan-y;
    }

    .mk .universal-drawer__header {
        padding-top: 1.6rem;
        padding-bottom: 0;
        cursor: grab;
    }

    /* Uchwyt do przeciagania */
    .mk .universal-drawer--mobile-sheet .universal-drawer__header::before {
        top: 0.55rem;
        width: 2.75rem;
        height: 0.3rem;
        border-radius: 0.2rem;
        background: rgba(18, 18, 18, 0.22);
    }

    .mk .universal-drawer__title {
        font-size: 1.45rem;
    }

    .mk .universal-drawer__close {
        width: 2.4rem;
        height: 2.4rem;
    }

    .mk .universal-drawer__body {
        padding-top: 0.6rem;
        padding-bottom: 0.4rem;
    }

    .mk .callback-form-header {
        margin-bottom: 0.7rem;
    }

    .mk .callback-form-header p {
        font-size: 0.9rem;
    }

    .mk .contact-options {
        margin-bottom: 0.9rem;
    }

    .mk .contact-option {
        padding: 0.6rem 0.4rem;
    }

    .mk .contact-option span {
        font-size: 0.85rem;
    }

    .mk .callback-form-fields .form-group {
        margin-bottom: 0.7rem;
    }

    .mk .callback-form-fields .form-group label {
        margin-bottom: 0.25rem;
        font-size: 0.82rem;
    }

    .mk .callback-form-fields .form-group input,
    .mk .callback-form-fields .form-group select {
        padding: 0.6rem 0.8rem;
        font-size: 1rem;
    }

    /* Dzien i godzina obok siebie */
    .mk .datetime-group {
        flex-direction: row;
        gap: 0.6rem;
    }

    .mk .datetime-group .form-group {
        min-width: 0;
    }

    .mk .callback-footer {
        display: none;
    }

    .mk .universal-drawer__footer {
        padding-top: 0.2rem;
    }

    .mk .universal-drawer__btn {
        min-height: 3rem;
    }

    .mk .universal-drawer__container.is-dragging {
        transition: none !important;
    }
}

@media (max-width: 640px) {
    .mk .datetime-group .form-group input,
    .mk .datetime-group .form-group select {
        padding-inline: 0.55rem;
        font-size: 0.92rem;
    }
}

/* ---------- Cennik, wersja 2: wspolne korzysci raz, plany jako kolorowe karty ---------- */
.mk-always {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem 2.5rem;
    max-width: 66rem;
    margin: 2.25rem auto 0;
    padding: 1.4rem clamp(1.25rem, 2.5vw, 2rem);
    border-radius: var(--mk-r);
    background: var(--mk-lemon);
    color: var(--mk-ink);
    text-align: left;
    transform: rotate(-0.6deg);
}

.mk .mk-always__title {
    font-family: var(--mk-monoface);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.4;
}

.mk-always ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mk-always li {
    font-family: var(--mk-display);
    font-size: clamp(1.1rem, 1.7vw, 1.45rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
}

.mk-tiertabs {
    display: none;
}

.mk-tiers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 1rem;
    max-width: 66rem;
    margin: 1.25rem auto 0;
    text-align: left;
}

.mk-tier {
    --tier-bg: var(--mk-sky);
    --tier-fg: var(--mk-ink);
    --tier-soft: rgba(18, 18, 18, 0.66);
    --tier-line: rgba(18, 18, 18, 0.16);

    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(1.4rem, 2.2vw, 2rem);
    border-radius: var(--mk-r-lg);
    background: var(--tier-bg);
    color: var(--tier-fg);
    transition: transform 0.45s var(--mk-ease);
}

.mk-tier--2 {
    --tier-bg: var(--mk-accent);
    --tier-fg: #fff;
    --tier-soft: rgba(255, 255, 255, 0.8);
    --tier-line: rgba(255, 255, 255, 0.28);
}

.mk-tier--3 {
    --tier-bg: var(--mk-blush);
}

@media (hover: hover) {
    .mk-tier:hover {
        transform: translateY(-0.5rem) rotate(-0.5deg);
    }

    .mk-tier--2:hover {
        transform: translateY(-0.5rem) rotate(0.5deg);
    }
}

/* Naklejka na wyroznionym planie */
.mk-tier__tag {
    position: absolute;
    top: -0.9rem;
    right: 1.25rem;
    padding: 0.55rem 0.8rem;
    border-radius: 0.4rem;
    background: var(--mk-lemon);
    color: var(--mk-ink);
    font-family: var(--mk-monoface);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transform: rotate(3deg);
}

.mk .mk-tier__name {
    font-size: clamp(1.5rem, 2.2vw, 1.9rem);
    letter-spacing: -0.03em;
}

.mk-tier__for {
    margin-top: 0.35rem;
    color: var(--tier-soft);
}

.mk-tier__price {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
    margin-top: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1.5px solid var(--tier-line);
}

.mk-tier__price strong {
    font-family: var(--mk-display);
    font-size: clamp(4.5rem, 7vw, 6.5rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 0.78;
    font-variant-numeric: tabular-nums;
}

.mk-tier__price span {
    padding-bottom: 0.1rem;
    color: var(--tier-soft);
    font-size: 0.9rem;
    line-height: 1.25;
}

.mk-tier ul {
    display: grid;
    gap: 0.55rem;
    margin: 1.25rem 0 1.75rem;
    padding: 0;
    list-style: none;
    font-size: 0.98rem;
    font-weight: 500;
    line-height: 1.3;
}

.mk-tier li {
    position: relative;
    padding-left: 1.6rem;
}

.mk-tier li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 1rem;
    height: 1rem;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Przyciski na kartach: ciemne na jasnych kartach, biale na karcie w kolorze marki */
.mk .mk-tier .mk-btn {
    --btn-bg: var(--mk-ink);
    --btn-fg: #fff;
    --btn-fill: var(--mk-accent);
    --btn-fill-fg: #fff;
    margin-top: auto;
}

.mk .mk-tier--2 .mk-btn {
    --btn-bg: #fff;
    --btn-fg: var(--mk-ink);
    --btn-fill: var(--mk-ink);
    --btn-fill-fg: #fff;
}

@media (max-width: 899px) {
    .mk-pricing {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    .mk-period {
        margin-top: 1.25rem;
    }

    .mk-always {
        grid-template-columns: 1fr;
        gap: 0.6rem;
        margin-top: 1.5rem;
        padding: 1rem 1.1rem;
        max-width: 30rem;
    }

    .mk-always ul {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }

    .mk-always li {
        font-size: 1.15rem;
    }

    .mk-tiertabs {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.25rem;
        max-width: 30rem;
        margin: 1.25rem auto 0;
        padding: 0.3rem;
        border-radius: 0.8rem;
        background: rgba(255, 255, 255, 0.1);
    }

    .mk-tiertabs button {
        padding: 0.75rem 0.3rem;
        border: 0;
        border-radius: 0.55rem;
        background: transparent;
        color: #fff;
        font-family: var(--mk-display);
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        cursor: pointer;
        transition: background-color 0.25s, color 0.25s;
    }

    .mk-tiertabs button[aria-pressed="true"] {
        background: #fff;
        color: var(--mk-ink);
    }

    .mk-tiers {
        grid-template-columns: 1fr;
        max-width: 30rem;
        margin-top: 1.4rem;
    }

    .mk-tier {
        display: none;
        padding: 1.25rem;
    }

    .mk-tiers[data-active="0"] .mk-tier--1,
    .mk-tiers[data-active="1"] .mk-tier--2,
    .mk-tiers[data-active="2"] .mk-tier--3 {
        display: flex;
        animation: mk-tier-in 0.45s var(--mk-ease);
    }

    .mk-tier__head-row {
        display: flex;
    }

    .mk-tier__price {
        margin-top: 0.9rem;
        padding-bottom: 1rem;
    }

    .mk-tier__price strong {
        font-size: 5rem;
    }

    .mk-tier ul {
        gap: 0.4rem;
        margin: 1rem 0 1.25rem;
    }

    .mk-pricing__foot {
        margin-top: 1.25rem;
        font-size: 0.88rem;
    }
}

@keyframes mk-tier-in {
    from { opacity: 0; transform: translateY(0.8rem) rotate(-1.5deg) scale(0.97); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mk-tier {
        animation: none !important;
    }
}

/* ---------- Okno na telefonie jako szuflada przyklejona do dolu ekranu ---------- */
@media (max-width: 640px) {
    .mk .universal-drawer--mobile-sheet {
        align-items: flex-end;
    }

    .mk .universal-drawer--mobile-sheet .universal-drawer__container {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 1.5rem 1.5rem 0 0 !important;
        box-shadow: 0 -1rem 3rem -1rem rgba(0, 0, 0, 0.4);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .mk .universal-drawer--mobile-sheet .universal-drawer__footer {
        padding-bottom: 1.25rem;
    }

    .mk .universal-drawer--mobile-sheet .universal-drawer__btn {
        width: 100%;
    }
}

/* ---------- Wydajnosc ---------- */
/* Animacja grubosci liter w stopce tylko wtedy, gdy napis jest na ekranie (klase ustawia marketing.js). */
.mk-mega:not(.is-visible) .mk-mega__word > span {
    animation: none !important;
}

/* Rozmycie tla pod naglowkiem nad animowanymi kolumnami bylo kosztowne: zostaje prawie pelne tlo bez rozmycia. */
.mk-nav::before {
    background: color-mix(in srgb, var(--mk-paper) 96%, transparent);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Przewijane kolumny: lzejszy cien i wlasna warstwa, zeby ruch liczyla karta graficzna. */
.mk-hero__track .mk-device,
.mk-hero__rowtrack .mk-device {
    box-shadow: 0 1.2rem 1.8rem -1.2rem rgba(18, 18, 18, 0.4);
}

.mk-hero__track,
.mk-hero__rowtrack {
    backface-visibility: hidden;
    transform: translateZ(0);
}

.mk-hero__col {
    contain: layout paint;
}

/* Stopka bez aureoli */
.mk-mega__o::before,
.mk-mega__ring {
    display: none;
}

/* ---------- Lista branz: podpowiedz i wyrazniejsza reakcja na najechanie ---------- */
.mk-trades__pick {
    display: grid;
    gap: 1.1rem;
}

.mk-trades__hint {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    width: fit-content;
    color: #1e3a6b;
    font-family: var(--mk-monoface);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.mk-trades__hint svg {
    width: 1.15rem;
    height: 1.15rem;
    animation: mk-nudge 1.8s ease-in-out infinite;
}

@keyframes mk-nudge {
    0%, 100% { transform: none; }
    50% { transform: translate(0.3rem, 0.3rem); }
}

@media (hover: hover) {
    .mk-trades__list button {
        transition: color 0.3s, transform 0.4s var(--mk-ease);
    }

    .mk-trades__list button:hover,
    .mk-trades__list button[aria-pressed="true"] {
        transform: translateX(0.6rem);
    }
}

@media (max-width: 859px) {
    .mk-trades__pick {
        order: 1;
    }

    .mk-trades__hint {
        display: none;
    }

    .mk-trades__list button[aria-pressed="true"] {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mk-trades__hint svg {
        animation: none;
    }
}

/* ---------- Dymek-podpowiedz: "kliknij w strone" z lapka ---------- */
.mk-hint {
    position: absolute;
    z-index: 5;
    width: max-content;
    max-width: 14.5rem;
    pointer-events: none;
    opacity: 0;
    transform: translateY(0.8rem) rotate(-6deg) scale(0.92);
    transition: opacity 0.35s ease, transform 0.6s var(--mk-ease);
}

.mk-hint.is-shown {
    opacity: 1;
    transform: rotate(-3deg);
    transition-delay: 0.9s;
}

.mk-hint.is-gone {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.9);
    transition-delay: 0s;
}

/* Dymek jak w czacie: zaokraglony prostokat z ogonkiem i przesunietym cieniem */
.mk-hint p {
    position: relative;
    padding: 0.8rem 1rem;
    border-radius: 1rem 1rem 1rem 0.25rem;
    background: var(--mk-ink);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    box-shadow: 0.3rem 0.3rem 0 var(--mk-lemon);
}

.mk-hint p::after {
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    width: 0.9rem;
    height: 0.7rem;
    background: var(--mk-ink);
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.mk-hint__hand {
    position: absolute;
    left: -2.2rem;
    top: calc(100% + 0.1rem);
    display: block;
    width: 2.9rem;
    height: 2.9rem;
    transform: rotate(-18deg);
}

.mk-hint__hand svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: #fff;
    stroke: var(--mk-ink);
    filter: drop-shadow(0.15rem 0.2rem 0 var(--mk-lemon));
    animation: mk-tap 1.6s ease-in-out infinite;
}

/* Kolko "klikniecia" pod palcem */
.mk-hint__hand::before {
    content: "";
    position: absolute;
    left: 0.35rem;
    top: -0.35rem;
    width: 1.2rem;
    height: 1.2rem;
    border: 2px solid var(--mk-accent);
    border-radius: 50%;
    opacity: 0;
    animation: mk-tap-ring 1.6s ease-out infinite;
}

@keyframes mk-tap {
    0%, 55%, 100% { transform: none; }
    30% { transform: translate(-0.15rem, -0.35rem) scale(0.92); }
}

@keyframes mk-tap-ring {
    0%, 28% { opacity: 0; transform: scale(0.4); }
    34% { opacity: 0.9; }
    70%, 100% { opacity: 0; transform: scale(2.1); }
}

/* Hero na komputerze: dymek przy prawej kolumnie podgladow, lapka wskazuje na podglad */
.mk-hint--hero {
    right: clamp(1.5rem, 3vw, 3rem);
    bottom: 13%;
}

.mk-hint--hero .mk-hint__hand {
    left: auto;
    right: 1.5rem;
    top: auto;
    bottom: calc(100% + 0.2rem);
    transform: rotate(8deg);
}

.mk-hint--hero p {
    border-radius: 1rem 0.25rem 1rem 1rem;
}

.mk-hint--hero p::after {
    left: auto;
    right: 0;
    top: auto;
    bottom: 100%;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* Lista branz: dymek w prawym gornym rogu podgladu */
.mk-hint--stage {
    right: -1.25rem;
    top: 3.25rem;
}

@media (max-width: 1099px) {
    /* Na telefonie dymek stoi nad rzedem podgladow, a lapka wskazuje w dol */
    .mk-hint--hero {
        position: relative;
        right: auto;
        bottom: auto;
        margin: 0 auto 2.4rem;
        max-width: 15.5rem;
    }

    .mk-hint--hero p {
        border-radius: 1rem 1rem 0.25rem 1rem;
    }

    .mk-hint--hero p::after {
        right: 0;
        top: 100%;
        bottom: auto;
        clip-path: polygon(0 0, 100% 0, 100% 100%);
    }

    .mk-hint--hero .mk-hint__hand {
        right: 0.6rem;
        top: calc(100% + 0.15rem);
        bottom: auto;
        width: 2.5rem;
        height: 2.5rem;
        transform: rotate(180deg);
    }

    .mk-hint--hero .mk-hint__hand svg {
        filter: none;
    }

    .mk-hero__body {
        padding-bottom: 1.5rem;
    }
}

@media (max-width: 859px) {
    .mk-hint--stage {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mk-hint__hand svg,
    .mk-hint__hand::before {
        animation: none;
    }
}

/* Hero na komputerze: dymek stoi na lewo od prawej kolumny podgladow, lapka wskazuje w prawo na podglad */
@media (min-width: 1100px) {
    .mk-hint--hero {
        --hero-pad: clamp(1rem, 2.2vw, 2rem);
        --hero-gap: clamp(1.5rem, 3vw, 3.5rem);
        --hero-col: max(11rem, calc((100vw - 2 * var(--hero-pad) - 46rem - 2 * var(--hero-gap)) / 2));
        right: calc(var(--hero-pad) + var(--hero-col) + 3.4rem);
        bottom: 7%;
        max-width: 13.5rem;
    }

    .mk-hint--hero p {
        border-radius: 1rem 1rem 0.25rem 1rem;
    }

    .mk-hint--hero p::after {
        left: auto;
        right: 0;
        top: 100%;
        bottom: auto;
        clip-path: polygon(0 0, 100% 0, 100% 100%);
    }

    .mk-hint--hero .mk-hint__hand {
        left: calc(100% + 0.5rem);
        right: auto;
        top: 50%;
        bottom: auto;
        margin-top: -1.3rem;
        transform: rotate(78deg);
    }
}

@media (min-width: 1100px) {
    .mk-hint--hero {
        /* kolumna podgladow ma najwyzej 21rem i jest dosunieta do prawej */
        right: calc(var(--hero-pad) + min(21rem, var(--hero-col)) + 3.4rem);
        bottom: 3.5%;
    }
}

/* Dymek w hero u gory sekcji: widoczny od razu takze w niskim oknie przegladarki (dol hero bywa pod ekranem). */
@media (min-width: 1100px) {
    .mk-hint--hero {
        top: 1.1rem;
        bottom: auto;
    }
}

/* Dymek: bez doklejanego trojkata. Ksztalt czatu daje jeden ostry rog od strony lapki. */
.mk-hint p::after,
.mk-hint--hero p::after {
    content: none;
}

.mk-hint p {
    border-radius: 1.1rem 1.1rem 1.1rem 0.2rem;
}

@media (min-width: 1100px) {
    /* Hero: dymek na wysokosci przycisku, w wolnym miejscu miedzy tekstem a prawa kolumna */
    .mk-hint--hero {
        top: calc(50% + 3.6rem);
        bottom: auto;
        max-width: 11.5rem;
    }

    .mk-hint--hero p {
        border-radius: 1.1rem 0.2rem 1.1rem 1.1rem;
    }

    .mk-hint--hero .mk-hint__hand {
        top: -0.9rem;
        margin-top: 0;
    }
}

@media (max-width: 1099px) {
    .mk-hint--hero p {
        border-radius: 1.1rem 1.1rem 0.2rem 1.1rem;
    }
}

@media (min-width: 1100px) {
    /* Pion ustawia marketing.js (na wysokosci linku pod przyciskiem); tu wartosc zapasowa i rozmiar. */
    .mk-hint--hero {
        top: calc(50% + 6.5rem);
        max-width: 12.75rem;
    }

    .mk-hint--hero p {
        padding: 0.6rem 0.85rem;
        font-size: 0.86rem;
    }

    .mk-hint--hero .mk-hint__hand {
        top: -1.1rem;
        width: 2.6rem;
        height: 2.6rem;
    }
}

/* ---------- Wejscie tasm z podgladami w hero (komputer) ---------- */
/* Zamiast wylaniania z przezroczystosci: lewa tasma wlatuje od dolu, prawa od gory, czyli kazda
   w swoim kierunku jazdy. Startuja szybko spoza kolumny i plynnie zwalniaja do zwyklego tempa.
   Wlasciwosc "translate" sumuje sie z "transform", ktory prowadzi ciagle przewijanie. */
@media (prefers-reduced-motion: no-preference) {
    .mk-hero__col {
        animation: none;
    }

    .mk-hero__col .mk-hero__track {
        animation-name: mk-rise, mk-belt-up;
        animation-duration: 60s, 1.7s;
        animation-timing-function: linear, cubic-bezier(0.12, 0.72, 0.18, 1);
        animation-iteration-count: infinite, 1;
        animation-fill-mode: none, backwards;
        animation-delay: 0s, 0.15s;
    }

    .mk-hero__col--right .mk-hero__track {
        animation-name: mk-sink, mk-belt-down;
    }
}

@keyframes mk-belt-up {
    from { translate: 0 105vh; }
    to { translate: 0 0; }
}

@keyframes mk-belt-down {
    from { translate: 0 -105vh; }
    to { translate: 0 0; }
}

/* Prawa tasma jest dluzsza niz ekran w obie strony, wiec samo przesuniecie nie zostawia pustej kolumny.
   Kolumna odslania sie od gory w tym samym rytmie, co daje czolo tasmy wjezdzajacej z gory. */
@media (prefers-reduced-motion: no-preference) {
    .mk-hero__col--right {
        animation: mk-belt-reveal 1.7s cubic-bezier(0.12, 0.72, 0.18, 1) 0.15s backwards;
    }
}

@keyframes mk-belt-reveal {
    from { clip-path: inset(0 0 100% 0); }
    to { clip-path: inset(0 0 -5% 0); }
}

/* ---------- Sciana kart: ikona Tabler w dolnym rogu kazdej karty ---------- */
.mk-note footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
}

.mk-note__icon {
    flex-shrink: 0;
    width: clamp(2.6rem, 3.6vw, 3.4rem);
    height: auto;
    transform-origin: 30% 80%;
    transition: transform 0.5s var(--mk-ease);
}

.mk-note--xl .mk-note__icon {
    width: clamp(3.4rem, 5vw, 4.75rem);
    stroke-width: 1.35;
}

.mk-note footer cite {
    align-self: flex-end;
    text-align: right;
}

@media (hover: hover) {
    .mk-note:hover .mk-note__icon {
        transform: rotate(-9deg) scale(1.12);
    }
}

/* Karty bez podpisow: sama ikona w prawym dolnym rogu */
.mk-note footer {
    justify-content: flex-end;
}

.mk-note__icon {
    transform-origin: 70% 80%;
}

/* Karty zwarte: ikona stoi w prawym dolnym rogu obok tekstu, a nie w osobnym wierszu pod nim. */
.mk-note {
    position: relative;
    gap: 0;
    padding: clamp(1.15rem, 1.8vw, 1.6rem);
}

.mk-note p {
    padding-right: clamp(3rem, 4.2vw, 4rem);
}

.mk-note--xl p {
    padding-right: clamp(3.6rem, 5.4vw, 5.2rem);
}

.mk-note footer {
    position: absolute;
    right: clamp(1rem, 1.5vw, 1.35rem);
    bottom: clamp(1rem, 1.5vw, 1.35rem);
    margin: 0;
}

.mk-note__icon {
    display: block;
    width: clamp(2.2rem, 3vw, 2.8rem);
}

.mk-note--xl .mk-note__icon {
    width: clamp(2.8rem, 4vw, 3.8rem);
}

/* Demo edytora: plynna zmiana widoku komputer / telefon */
.mk-demo__site {
    transition: background-color 0.6s var(--mk-ease), color 0.6s;
}

.mk-demo__page {
    transition: opacity 0.3s ease 0.05s, transform 0.5s var(--mk-ease) 0.05s;
}

.mk-demo__site.is-morphing .mk-demo__page {
    opacity: 0;
    transform: scale(0.97);
    transition: opacity 0.13s ease, transform 0.13s ease;
}

/* Scena ma stala wysokosc, zeby panel obok i reszta strony nie drgaly podczas zmiany widoku. */
@media (min-width: 900px) {
    .mk-demo__stage {
        height: 36rem;
        min-height: 0;
    }
}

@media (min-width: 900px) {
    .mk-demo__stage {
        height: auto;
        min-height: 36rem;
    }
}