/* Primantro — layout podľa dizajnu (WebSupport / lokálna ukážka) */

:root {
        --color-cream: #f7f3e8;
        --color-card: #4e3831;
        --color-on-card: #ffffff;
        --color-white: #ffffff;
        --color-subtitle: #8a462e;
        --color-wordmark: #83280d;
        --color-divider: #9e5e47;
        --color-menu: #9e5e47;
        --color-heading: #956350;
        --color-section-label: #462e25;
        --color-terracotta-bar: #b36a51;
        --color-card-label: #fdf5e3;
        --color-hero: #f7f3e8;
        --color-hero-border: #e6d6d0;
        --color-text: #253146;
        --color-text-strong: #3d271f;
        --color-field-border: #bca69a;
        --color-footer: #815a4b;
        --color-accent: #8a462e;
        --color-on-accent: #f7f3e8;
        --color-on-bar: #fdf5e3;
        --color-success: #287a3a;
        --font-serif: "Noto Serif", "Georgia", "Times New Roman", serif;
        --font-display: "Crimson Pro", "Georgia", "Times New Roman", serif;
        --font-sans: "Source Sans 3", "Segoe UI", system-ui, sans-serif;

        /* Hlavička: hodnoty pre otvorený (--p: 0) a kompaktný (--p: 1) stav.
           --p nastavuje main.js podľa scrollu. */
        --p: 0;
        --hero-bg: var(--color-hero);
        --hero-open: 45dvh;
        --hero-compact: 71px;
        --title-open: 154px;
        --title-compact: 40px;
        --title-lh: 0.74;
        --tagline-open: 38px;
        --tagline-compact: 15px;
        --tagline-lh: 1;
        --tagline-gap-open: 0px;
        --tagline-gap-compact: 0px;
        /* column = logo a tagline vedľa seba, row = pod sebou */
        --hero-flow: column;
        /* Vedľa seba drží posledný riadok taglinu účarie loga */
        --hero-items: last baseline;
        --hero-align: left;
        /* start = logo pri lavom okraji obsahu (scrollovana hlavicka) */
        --hero-justify: start;
        --hero-gap-open: 5px;
        --hero-gap-compact: 0px;
        --hero-shift: 0px;
        /* Desktop: o koľko nadpis "Čo pre vás..." zasahuje do hlavičky (--offer-overlap)
           a koľko px scrollu ostane obsah stáť, kým sa hlavička nezmenší (--offer-pin).
           Mimo desktopu 0 = bežný tok. Hodnotu --offer-pin číta aj main.js. */
        --offer-overlap: 0px;
        --offer-pin: 0px;
        --reveal-duration: 0.7s;
        --reveal-ease: cubic-bezier(0.51, 0.30, 0.47, 0.91);
}

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

html {
        overflow-y: scroll;
        scroll-behavior: smooth;
        scroll-padding-top: calc(var(--hero-compact) + 16px);
}

@media (prefers-reduced-motion: reduce) {
        html {
                scroll-behavior: auto;
        }
}

body {
        margin: 0;
        font-family: var(--font-sans);
        font-size: 16px;
        line-height: 26px;
        color: var(--color-text);
        background: var(--color-white);
}

strong {
        font-weight: 700;
}

/* Hero */

.hero {
        position: sticky;
        top: calc(var(--hero-compact) - var(--hero-open));
        z-index: 30;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        height: var(--hero-open);
        overflow: hidden;
        background: var(--hero-bg);
        border-bottom: 1px solid var(--color-hero-border);

        .hero__inner {
                /* Grid: align-content centruje dvojicu, align-items ju drží na spoločnom účarí */
                display: grid;
                grid-auto-flow: var(--hero-flow);
                position: relative;
                justify-content: var(--hero-justify);
                justify-items: start;
                align-content: center;
                align-items: var(--hero-items);
                gap: calc(var(--hero-gap-open) + (var(--hero-gap-compact) - var(--hero-gap-open)) * var(--p));
                width: 100%;
                max-width: calc(1200px + 2 * 28px);
                height: calc(var(--hero-open) - (var(--hero-open) - var(--hero-compact)) * var(--p));
                padding: 0 28px var(--hero-shift);
                text-align: var(--hero-align);
        }

        .title {
                margin: 0;
                font-family: var(--font-serif);
                font-weight: 800;
                font-size: calc(var(--title-open) + (var(--title-compact) - var(--title-open)) * var(--p));
                line-height: var(--title-lh);
                white-space: nowrap;
                color: var(--color-wordmark);
                /* Osi sú case-sensitive: registrované malými, vlastné veľkými. */
                font-variation-settings: "wdth" 85, "CTGR" 30;
        }

        .title .home {
                color: inherit;
                text-decoration: none;
        }

        .tagline {
                margin: calc(var(--tagline-gap-open) + (var(--tagline-gap-compact) - var(--tagline-gap-open)) * var(--p)) 0 0;
                font-family: var(--font-display);
                font-style: normal;
                font-weight: 200;
                font-size: calc(var(--tagline-open) + (var(--tagline-compact) - var(--tagline-open)) * var(--p));
                line-height: var(--tagline-lh);
                color: var(--color-heading);
        }

        .tagline strong {
                font-weight: 400;
        }
}
/* Wordmark - kerning po pároch, odčítaný z Figmy.
   Otvorená hlavička = uzol 179:666 (154 px), scrollovaná = uzol 179:871 (40 px).
   Hodnoty nie sú proporčné, preto sa medzi stavmi interpolujú cez --p.
   Odstup ZA daným písmenom:
   P -> r   -1.9231 px @ 154    -0.8105 px @ 40
   r -> i   -2.3409 px @ 154    -1.0321 px @ 40
   i -> m   -1.3853 px @ 154    -0.2433 px @ 40
   m -> a   -9.7799 px @ 154    -2.8366 px @ 40
   a -> n   -2.8725 px @ 154    -0.6949 px @ 40
   n -> t  -14.1962 px @ 154    -3.8337 px @ 40
   t -> r   -0.4247 px @ 154    -0.2423 px @ 40
   r -> o   -7.0537 px @ 154    -2.1130 px @ 40 */

.hero .title span {
        letter-spacing: calc(var(--kern-open) + (var(--kern-compact) - var(--kern-open)) * var(--p));
}

.hero .title span:nth-child(1) {
        --kern-open: -0.01249em;
        --kern-compact: -0.02026em;
}

.hero .title span:nth-child(2) {
        --kern-open: -0.0152em;
        --kern-compact: -0.0258em;
}

.hero .title span:nth-child(3) {
        --kern-open: -0.009em;
        --kern-compact: -0.00608em;
}

.hero .title span:nth-child(4) {
        --kern-open: -0.06351em;
        --kern-compact: -0.07091em;
}

.hero .title span:nth-child(5) {
        --kern-open: -0.01865em;
        --kern-compact: -0.01737em;
}

.hero .title span:nth-child(6) {
        --kern-open: -0.09218em;
        --kern-compact: -0.09584em;
}

.hero .title span:nth-child(7) {
        --kern-open: -0.00276em;
        --kern-compact: -0.00606em;
}

.hero .title span:nth-child(8) {
        --kern-open: -0.0458em;
        --kern-compact: -0.05282em;
}

/* Menu zo scrollovanej hlavicky - Figma uzol 179:1055 (variant Scrolled=True).
   Je mimo toku gridu, aby v otvorenom stave nezaberalo logu miesto.
   Objavuje sa spolu so zmensovanim hlavicky cez --p. */

.menu {
        position: absolute;
        top: 50%;
        right: 28px;
        transform: translateY(-50%);
        display: flex;
        gap: 30px;
        padding: 10px;
        font-family: var(--font-sans);
        font-weight: 500;
        font-size: 16px;
        line-height: 1;
        white-space: nowrap;
        opacity: var(--p);

        a {
                color: var(--color-menu);
                text-decoration: none;
        }

        a:hover {
                text-decoration: underline;
        }
}

html.is-intro {
        --hero-open: 100dvh;
        /* Stred obsahu v 40 % výšky: zo 100dvh ostane 80dvh, ich stred je na 40dvh */
        --hero-shift: 29dvh;
        /* Počas úvodu je obsah celý pod hlavičkou, do nej sa vysunie až pri odkrytí. */
        --offer-overlap: 0px;

        body {
                height: 100dvh;
                overflow: hidden;
        }
}

.is-revealing .hero,
.is-revealing .hero .hero__inner {
        transition:
                height var(--reveal-duration) var(--reveal-ease),
                top var(--reveal-duration) var(--reveal-ease),
                padding-bottom var(--reveal-duration) var(--reveal-ease);
}


section {
        /* Šírka obsahu 1200px + bočný padding (box-sizing: border-box) */
        max-width: calc(1200px + 2 * 28px);
        margin: 0 auto;
        padding-left: 28px;
        padding-right: 28px;
}

/* Section headline - komponent "Section headline" z dizajnu */

.offer .section-label,
.projects > .title,
.process > .title,
.contact > .title {
        margin: 0 0 30px;
        font-family: var(--font-sans);
        font-weight: 400;
        font-size: 22px;
        line-height: 1;
        color: var(--color-section-label);
}

.offer .section-label {
        margin-bottom: 20px;
}

/* Offer cards */

.offer {
        background: var(--color-white);
        padding-top: 48px;
        padding-bottom: 64px;

        .section-label,
        .cards .card {
                animation: offer-reveal auto ease both;
                animation-timeline: view();
                animation-range: entry 0% cover 35%;
        }

        .cards .card:nth-child(2) {
                animation-range: entry 5% cover 40%;
        }

        .cards {
                list-style: none;
                margin: 0;
                padding: 0;
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 30px;
        }
}

@keyframes offer-reveal {
        from {
                opacity: 0;
                transform: translateY(20px);
        }
        to {
                opacity: 1;
                transform: translateY(0);
        }
}

/* Karta - komponenty "Landing card" z dizajnu (tmavé pozadie, nadpis bez lišty) */

.card {
        border-radius: 12px;
        max-width: 585px;
        overflow: hidden;
        background: var(--color-card);
        color: var(--color-on-card);

        .body {
                padding: 25px 40px;
                font-family: var(--font-sans);
                font-size: 16px;
                line-height: 26px;
        }

        .label {
                margin: 0 0 5px;
                font-size: 16px;
                font-weight: 500;
                line-height: 26px;
                text-transform: uppercase;
                color: var(--color-card-label);
        }

        .body h3 {
                font-size: 26px;
                font-weight: 400;
                line-height: 1.25;
                max-width: 300px;
                margin: 0;
                padding-bottom: 15px;
        }
        .body h3 strong {
                font-weight: 600;
        }
        .body h3 + p {
                margin: 0;
                font-size: 16px;
                line-height: 1.55;
        }
}
/* Portfolio */

.projects {
        .project {
                /* 1,5-nasobok povodnych 50px */
                margin: 0 0 75px;
                /* Rámček prehliadača má 508px, text 500px ako vo Figme. */
                max-width: 508px;
                font-size: 16px;
                line-height: 26px;
                color: var(--color-text);

                .name {
                        margin-bottom: 10px;
                        font-family: var(--font-display);
                        font-weight: 200;
                        font-size: 42px;
                        line-height: 1;
                        letter-spacing: 0;
                        color: var(--color-heading);
                }

                /* Odsadenie = jeden riadok, tak ako prázdny riadok v texte vo Figme. */
                p {
                        margin: 0 0 26px;
                        max-width: 500px;
                }

                p:last-child {
                        margin-bottom: 0;
                }

                /* Referencia klienta: citát kurzívou, meno normálnym písmom. */
                .testimonial {
                        margin: 0;

                        q {
                                font-style: italic;
                                quotes: "„" "“";
                        }

                        cite {
                                font-style: normal;
                        }
                }

                /* Vo Figme je medzi podnadpisom, rámčekom a textom 20px. */
                p:has(+ .browser) {
                        margin-bottom: 20px;
                }
        }
}

/* Rámček prehliadača okolo screenshotu - komponent "Browser / Chrome / Light" z dizajnu */

.browser {
        margin: 0 0 20px;
        max-width: 508px;
        border: 1px solid #e9e9e9;
        border-radius: 8px;
        overflow: hidden;
        background: var(--color-white);
        font-family: var(--font-sans);

        svg {
                flex: none;
                width: 16px;
                height: 16px;
                fill: none;
                stroke: #5f6368;
                stroke-width: 2;
                stroke-linecap: round;
                stroke-linejoin: round;
        }

        .browser__tabs {
                display: flex;
                align-items: flex-end;
                gap: 8px;
                height: 30px;
                padding: 0 10px;
                background: #dee1e6;
        }

        .browser__dots {
                display: flex;
                gap: 6px;
                align-self: center;
                margin-right: 6px;

                i {
                        width: 11px;
                        height: 11px;
                        border-radius: 50%;
                        background: #ff6058;
                        box-shadow: inset 0 0 0 0.5px #e14942;
                }

                i:nth-child(2) {
                        background: #ffc130;
                        box-shadow: inset 0 0 0 0.5px #e1a325;
                }

                i:nth-child(3) {
                        background: #27ca40;
                        box-shadow: inset 0 0 0 0.5px #3eaf3f;
                }
        }

        .browser__tab {
                display: flex;
                align-items: center;
                gap: 8px;
                min-width: 0;
                height: 24px;
                padding: 0 8px;
                border-radius: 8px 8px 0 0;
                background: var(--color-white);
                color: #494c4f;
                font-size: 12px;
                letter-spacing: 0.2px;
                white-space: nowrap;

                span {
                        overflow: hidden;
                        text-overflow: ellipsis;
                }

                svg {
                        width: 12px;
                        height: 12px;
                }

                .favicon {
                        width: 14px;
                        height: 14px;
                }
        }

        .browser__new {
                align-self: center;
                width: 12px;
                height: 12px;
        }

        .browser__toolbar {
                display: flex;
                align-items: center;
                gap: 10px;
                height: 38px;
                padding: 5px 12px;
                box-sizing: border-box;
                border-bottom: 1px solid #e9e9e9;

                .is-disabled {
                        stroke: #babcbe;
                }
        }

        .browser__url {
                display: flex;
                flex: 1;
                align-items: center;
                gap: 8px;
                min-width: 0;
                height: 28px;
                padding: 0 10px;
                border-radius: 14px;
                background: #f1f3f4;
                color: #202124;
                font-size: 14px;
                letter-spacing: 0.25px;
                white-space: nowrap;

                span {
                        flex: 1;
                        overflow: hidden;
                        text-overflow: ellipsis;
                }

                svg {
                        width: 13px;
                        height: 13px;
                }
        }

        .browser__shot {
                display: block;
        }

        .browser__shot img {
                display: block;
                width: 100%;
                height: auto;
        }
}

/* Process */

.process {
        .intro {
                margin: 0 0 30px;
                color: var(--color-text);
                max-width: 500px;
        }

        .step {
                max-width: 500px;

                .name {
                        margin: 0 0 10px;
                        font-family: var(--font-display);
                        font-weight: 200;
                        font-size: 42px;
                        line-height: 1;
                        letter-spacing: 0;
                        color: var(--color-heading);
                }
        }

        /* Odsadenie = jeden riadok, tak ako prázdny riadok v texte vo Figme. */
        .step p {
                margin: 0 0 26px;
        }

        /* "Cenová ponuka" si drží vlastné odsadenie aj keď je posledná v kroku. */
        .step > p:last-child:not(.quote-label) {
                margin-bottom: 0;
        }

        p.quote-label {
                display: flex;
                align-items: center;
                gap: 15px;
                max-width: 414px;
                /* 32px zo skorsieho nastavenia + 15px vzduchu hore aj dole */
                margin: 47px auto;
                color: var(--color-terracotta-bar);
                font-family: var(--font-sans);
                font-size: 18px;
                line-height: 26px;
        }

        .quote-label::before,
        .quote-label::after {
                content: "";
                flex: 1;
                height: 1px;
                background: currentColor;
        }

        .quote-label span {
                white-space: nowrap;
        }
}

/* Contact */

.contact {
        display: flex;
        flex-direction: column;

        .card {
                max-width: 396px;
                margin-bottom: 100px;

                .name {
                        margin: 0 0 15px;
                        font-size: 26px;
                        line-height: 1.2;
                }
                .line {
                        margin: 0;
                        line-height: 25px;
                }
                a {
                        font-size: 16px;
                        color: inherit;
                        text-decoration: none;
                }
                a:hover {
                        text-decoration: underline;
                }
        }
        .form {
                min-width: 0;
                max-width: 615px;

                .grid {
                        display: grid;
                        grid-template-columns: 1fr 1fr;
                        gap: 15px 15px;
                        margin-bottom: 15px;
                }

                .input,
                .textarea {
                        display: block;
                }

                .textarea {
                        margin-bottom: 15px;
                }

                .label {
                        display: block;
                        margin-bottom: 5px;
                        font-weight: 400;
                        font-size: 16px;
                        line-height: 23px;
                        color: var(--color-text-strong);
                }

                .input input,
                .textarea textarea {
                        width: 100%;
                        padding: 10px 15px;
                        border: 1px solid var(--color-field-border);
                        border-radius: 8px;
                        background: var(--color-cream);
                        font-family: var(--font-sans);
                        font-size: 16px;
                        line-height: 23px;
                        color: var(--color-text-strong);
                }

                .textarea textarea {
                        min-height: 140px;
                        resize: vertical;
                }

                .input input:focus,
                .textarea textarea:focus {
                        outline: 2px solid var(--color-accent);
                        outline-offset: 1px;
                }

                .action {
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                        gap: 15px;
                }

                .submit {
                        padding: 10px 30px;
                        border: 0;
                        border-radius: 8px;
                        background: var(--color-accent);
                        color: var(--color-on-accent);
                        font-family: var(--font-sans);
                        font-size: 16px;
                        line-height: 23px;
                        font-weight: 600;
                        cursor: pointer;
                }

                .submit:hover {
                        filter: brightness(0.92);
                }

                .success {
                        margin: 0;
                        font-family: var(--font-sans);
                        font-size: 16px;
                        line-height: 24px;
                        color: var(--color-success);
                }

                .error {
                        margin: 0;
                        font-family: var(--font-sans);
                        font-size: 16px;
                        line-height: 24px;
                        color: #c62828;
                }

                /* Hlášky sú skryté, kým main.js nepridá triedu .form--sent / .form--error */
                &:not(.form--sent) .success,
                &:not(.form--error) .error {
                        display: none;
                }

                /* Honeypot – mimo obrazovky (nie display:none, to by bot rozpoznal) */
                .hp {
                        position: absolute;
                        left: -9999px;
                        width: 1px;
                        height: 1px;
                        overflow: hidden;
                }

                .submit:disabled {
                        opacity: 0.6;
                        cursor: wait;
                }
        }
}

.divider {
        margin: 50px 0;
        width: 100%;
        color: var(--color-divider);
        line-height: 0;

        svg {
                display: block;
                width: 100%;
                height: auto;
        }
}

/* Sirky a vodorovne posuny podla Figmy (obsahovy stlpec 1188 px):
   ciara 1  sirka 808 px, x = -149 px
   ciara 2  sirka 822 px, x =  -66 px
   ciara 3  sirka 820 px, x =  -66 px
   min() drzi ciaru vnutri okna aj na uzsich obrazovkach. */

.divider--1 {
        max-width: 808px;
        margin-left: calc(-1 * min(149px, max(0px, (100vw - 100% - 20px) / 2)));
}

.divider--2 {
        max-width: 822px;
        margin-left: calc(-1 * min(66px, max(0px, (100vw - 100% - 20px) / 2)));
}

.divider--3 {
        max-width: 820px;
        margin-left: calc(-1 * min(66px, max(0px, (100vw - 100% - 20px) / 2)));
}

.footer {
        padding-bottom: 64px;

        .content {
                max-width: 300px;
                margin: 0;
                font-family: var(--font-sans);
                font-weight: 400;
                font-size: 15px;
                line-height: 21px;
                color: var(--color-footer);
        }
}
.cross {
        margin-left: 100%;
        font-size: 20px;
        line-height: 26px;
        font-weight: 100;
        color: var(--color-subtitle);
}

/* Tablet a mobil */

@media (prefers-reduced-motion: reduce) {
        .hero .title,
        .hero .tagline,
        .hero .hero__inner,
        .offer .section-label,
        .offer .cards .card {
                animation: none !important;
        }
}

@media (max-width: 1100px) {
        /* Menu je zatial len v desktopovej scrollovanej hlavicke. */
        .menu {
                display: none;
        }

        :root {
                --title-open: 80px;
                --title-compact: 40px;
                --title-lh: 1;
                --tagline-open: 26px;
                --tagline-compact: 15px;
                --tagline-lh: 1.2;
                --tagline-gap-open: 10px;
                --tagline-gap-compact: 0px;
                --hero-flow: row;
                --hero-align: left;
                --hero-items: center;
                --hero-justify: center;
        }

        /* Kerning je tu v celom rozsahu blizko hodnotam pre 40 px, netreba interpolovat. */
        .hero .title span {
                letter-spacing: var(--kern-compact);
        }

        section {
                padding-left: 28px;
                padding-right: 28px;
        }

        .offer .cards {
                gap: 20px;
        }

        .card .body h3 {
                font-size: 22px;
        }

        .contact {
                gap: 40px;
        }

}

@media (max-width: 760px) {
        :root {
                /* 15px padding + 32px logo + 15px padding + 1px border */
                --hero-compact: 63px;
                /* Figma "Mobile first view" (uzol 179:2392) */
                --title-open: 52px;
                --title-compact: 32px;
                --tagline-open: 18px;
                --tagline-compact: 12.5px;
                --tagline-lh: 1;
                --tagline-gap-open: -7px;
                --tagline-gap-compact: 0px;
        }

        /* Úvod podľa Figmy: stred loga s taglinom v 37 % výšky (100dvh - 26dvh = 74dvh, stred 37dvh) */
        html.is-intro {
                --hero-shift: 26dvh;
        }

        .hero .hero__inner {
                padding-left: 30px;
                padding-right: 30px;
        }

        /* Scrollovana hlavicka na mobile (Figma I179:2391;179:1629):
           logo a tagline vedla seba, tagline pri pravom okraji. */
        html.is-collapsed {
                --hero-flow: column;
                --hero-items: last baseline;
                --hero-justify: space-between;

                .hero .tagline {
                        white-space: nowrap;
                }
        }


        section {
                padding-left: 20px;
                padding-right: 20px;
        }

        .offer {
                padding-top: 28px;
                padding-bottom: 40px;
        }

        .offer .section-label,
        .projects > .title,
        .process > .title,
        .contact > .title {
                margin: 0 0 18px;
        }

        .offer .cards {
                grid-template-columns: 1fr;
                gap: 16px;
        }

        .card {
                max-width: none;
        }

        .card .body {
                padding-left: 25px;
                padding-right: 25px;
        }

        .card .body h3 {
                font-size: 26px;
                line-height: 1.3;
                max-width: 12em;
        }

        .projects {
                padding-bottom: 28px;
        }

        .projects .project {
                margin-bottom: 36px;
        }

        .projects .project,
        .process .intro,
        .process .step {
                max-width: none;
        }

        .projects .project .name,
        .process .step .name {
                font-size: 34px;
                line-height: 1.15;
        }

        .process .step {
                font-size: 16px;
                line-height: 26px;
        }

        .contact {
                gap: 22px;
        }

        .contact .form {
                max-width: none;
        }

        .contact .form .grid {
                grid-template-columns: 1fr;
                gap: 14px;
        }

        .footer {
                padding-bottom: 40px;
        }
}


/* Desktop - hlavička z Figmy (uzol 179:901): nadpis a karty "Čo pre vás môžeme spraviť?"
   zasahujú do hlavičky, karty prekrývajú jej spodnú hranu.
   Scroll: 1) obsah stojí (sticky <main>) a hlavička sa zmenšuje, kým jej hrana nie je 80px
   nad nadpisom (--offer-pin), 2) potom scrolluje aj obsah a zasúva sa pod hlavičku.
   main.js prepína .is-under, keď je obsah pod hlavičkou (z-index). */

@media (min-width: 1101px) {
        :root {
                --hero-open: clamp(440px, 70dvh, 670px);
                --offer-overlap: 135px;
                /* 135px prekrytie + 80px odstup hrany hlavičky nad nadpisom */
                --offer-pin: 215px;
                /* Logo sa centruje v časti hlavičky nad nadpisom */
                --hero-shift: calc(var(--offer-overlap) * (1 - var(--p)));
        }

        main {
                position: sticky;
                top: calc(var(--hero-open) - var(--offer-overlap));
                z-index: 31;
                margin-top: calc(-1 * var(--offer-overlap));
        }

        html.is-under main {
                z-index: 29;
        }

        /* Rezerva, o ktorú sa sticky <main> posunie, aby na konci stránky neostala medzera */
        body::after {
                content: "";
                display: block;
                height: var(--offer-pin);
        }

        .is-revealing main {
                transition: margin-top var(--reveal-duration) var(--reveal-ease);
        }

        .offer {
                padding-top: 0;
                background: transparent;

                /* Nadpis a karty sú súčasťou hlavičky, neodkrývajú sa scrollom */
                .section-label,
                .cards .card {
                        animation: none;
                }
        }
}

/* Zväčšený screenshot (main.js): prirodzená veľkosť, no najviac okno mínus 30px z každej strany. */

.lightbox {
        max-width: none;
        max-height: none;
        width: 100vw;
        height: 100dvh;
        margin: 0;
        padding: 30px;
        box-sizing: border-box;
        border: 0;
        background: transparent;
        cursor: zoom-out;

        &[open] {
                display: flex;
                align-items: center;
                justify-content: center;
        }

        &::backdrop {
                background: rgba(40, 40, 40, 0.85);
        }

        img {
                display: block;
                max-width: 100%;
                max-height: 100%;
                width: auto;
                height: auto;
                border-radius: 8px;
                box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
        }
}

@media (min-width: 761px) {
        .browser__shot {
                cursor: zoom-in;
        }
}