/* ==========================================================================
   components.css
   Tlačítka, karty, štítky, harmonika, loga klientů, formuláře, kurzor, pásy.
   Hodnoty zrcadlí referenční web, viz DESIGN.md kapitola 1.
   ========================================================================== */

/* =============================== TLAČÍTKA ================================
   Referenční podoba: výška 2.45rem, popisek s velkými počátečními písmeny,
   normální prostrkání, rámeček 1px. Na hover se popisek odsune doprava
   a vyjede šipka; obrysové tlačítko se vyplní černou.
   ========================================================================= */

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.45rem;
    padding: 0 1.75rem .1rem;
    font-size: 105%;
    font-weight: var(--weight-regular);
    letter-spacing: normal;
    border-radius: var(--radius-btn);
    user-select: none;
    cursor: pointer;
    backface-visibility: hidden;
    transition: color var(--dur-fast) var(--ease-out);
}

.btn--small {
    height: 2.25rem;
}

.btn--lg {
    height: 2.75rem;
    padding-inline: 2rem;
}

.btn__bg {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-btn);
    border: 1px solid transparent;
    transition: background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}

.btn__label {
    position: relative;
    z-index: 2;
    white-space: nowrap;
    transition: padding var(--dur-fast) var(--ease-out);
}

/* Šipka vyjíždí zpoza popisku. */
.btn__label::after {
    content: '';
    position: absolute;
    right: 0;
    top: .25em;
    width: .9em;
    height: .9em;
    opacity: 0;
    visibility: hidden;
    transform: scale(.75);
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M9 7h8v8' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M9 7h8v8' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: opacity var(--dur-fast) var(--ease-out),
                visibility var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}

.btn:hover .btn__label,
.btn:focus-visible .btn__label {
    padding-right: 1.5em;
}

.btn:hover .btn__label::after,
.btn:focus-visible .btn__label::after {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

/* Na dotykových zařízeních je šipka vidět pořád (jako v referenci). */
@media (max-width: 61.9rem), (pointer: coarse), (hover: none) {
    .btn__label {
        padding-right: 1.5rem;
    }

    .btn__label::after {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }
}

/* Obrysová varianta: černý rámeček, hover vyplní černou. */
.btn--outline {
    color: var(--ink);
}

.btn--outline .btn__bg {
    border-color: var(--ink);
}

.btn--outline:hover:not([aria-disabled='true']),
.btn--outline:focus-visible {
    color: var(--text-on-dark);
}

.btn--outline:hover:not([aria-disabled='true']) .btn__bg,
.btn--outline:focus-visible .btn__bg {
    background-color: var(--ink);
}

/* V tmavém kontextu se obrys otočí: bílý rámeček, hover vyplní bílou. */
.inverted .btn--outline {
    color: var(--text-on-dark);
}

.inverted .btn--outline .btn__bg {
    border-color: var(--text-on-dark);
}

.inverted .btn--outline:hover:not([aria-disabled='true']) {
    color: var(--ink);
}

.inverted .btn--outline:hover:not([aria-disabled='true']) .btn__bg {
    background-color: var(--text-on-dark);
}

/* Tmavá plná varianta. */
.btn--dark {
    color: var(--text-on-dark);
}

.btn--dark .btn__bg {
    background-color: var(--panel-dark);
    border-color: var(--panel-dark);
}

/* Růžová plná varianta. */
.btn--pink {
    color: var(--text-on-dark);
}

.btn--pink .btn__bg {
    background-color: var(--pink);
    border-color: var(--pink);
}

/* Alias pro dřívější názvy variant, aby šablony zůstaly jednotné. */
.btn--accent { color: var(--text-on-dark); }
.btn--accent .btn__bg { background-color: var(--pink); border-color: var(--pink); }
.btn--solid { color: var(--text-on-dark); }
.btn--solid .btn__bg { background-color: var(--panel-dark); border-color: var(--panel-dark); }
.btn--ghost { color: var(--muted); padding-inline: 0; }
.btn--ghost:hover { color: var(--ink); }
.inverted .btn--ghost { color: var(--muted-2-on-dark); }
.inverted .btn--ghost:hover { color: var(--text-on-dark); }

/* Tlačítko bez šipky. Šipka vedoucí ven se hodí k odkazům, ne k tlačítku,
   které jen zavírá. Pravidla jsou za obecnými, aby je přebila i na dotyku
   a při najetí. Boční odsazení dává obrysu fokusu odstup od písmen. */
.btn--no-arrow {
    padding-inline: var(--space-3);
}

.btn--no-arrow .btn__label,
.btn--no-arrow:hover .btn__label,
.btn--no-arrow:focus-visible .btn__label {
    padding-right: 0;
}

.btn--no-arrow .btn__label::after {
    display: none;
}

.btn[disabled],
.btn[aria-disabled='true'] {
    opacity: .5;
    pointer-events: none;
}

/* Textový odkaz s podtržením. */
.link-underline {
    position: relative;
    display: inline-block;
}

.link-underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -.1em;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--dur-med) var(--ease-out-soft);
}

.link-underline:hover::after,
.link-underline:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* ================================ ŠTÍTKY =================================
   Pilulky s rámečkem z aktuální barvy, velká počáteční písmena.
   ========================================================================= */

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.tag {
    padding: .4rem 1rem .5rem;
    border: 1px solid currentColor;
    border-radius: 2.2rem;
    font-size: 14px;
    line-height: 1.1;
}

/* Plná varianta přes fotku. Tmavé sklo s bílým textem drží čitelnost
   i nad světlým snímkem, proto je stejná na světlé i tmavé stránce. */
.tags--solid .tag {
    background-color: color-mix(in srgb, var(--panel-dark) 55%, transparent);
    border-color: transparent;
    backdrop-filter: blur(2rem);
    -webkit-backdrop-filter: blur(2rem);
    color: var(--text-on-dark);
}

/* =========================== KARTA PROJEKTU ==============================
   Používá se uvnitř tmavého panelu. Přes obrázek se na hover prolne video.
   ========================================================================= */

.work-card {
    display: block;
    color: inherit;
}

/* Karta funguje na světlé stránce i uvnitř tmavého panelu: výchozí barvy
   jsou pro světlý podklad, uvnitř .inverted se přepnou na světlé. */
.work-card__media {
    position: relative;
    padding-bottom: var(--card-ratio);
    border-radius: var(--radius-card);
    overflow: hidden;
    background-color: color-mix(in srgb, var(--ink) 5%, transparent);
    margin-bottom: var(--space-5);
}

.inverted .work-card__media {
    background-color: color-mix(in srgb, var(--text-on-dark) 5%, transparent);
}

@media (max-width: 47.9rem) {
    .work-card__media {
        border-radius: var(--radius-media);
    }
}

.work-card__media img,
.work-card__media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.work-card__media video {
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    filter: blur(5px);
    transform: scale(1.03);
    transition: opacity .3s var(--ease-out),
                visibility .3s var(--ease-out),
                filter var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
}

.work-card:hover .work-card__media video {
    opacity: 1;
    visibility: visible;
    filter: blur(0);
    transform: scale(1);
}

/* Na kartě je nahrávka scrollování webu klienta (tools/record-cards.py).
   Telefony ji nedostanou: najetí myší tam neexistuje a přehrávání při
   průjezdu stránkou by na mobilních datech stahovalo megabajty, které
   nikdo nechtěl. Při omezeném pohybu zůstává statický náhled taky.
   motion.js ji v obou případech ani nespouští, tohle je pojistka. */
/* Obtažení karty. Za přehrávání nahrávky objede okraj karty tenká
   červená čára a jedno kolo trvá přesně jako video, takže se čára
   uzavře ve chvíli, kdy se video vrací na začátek. V dalším kole se
   stejnou cestou zase smaže, pak znovu kreslí, pořád v rytmu videa.

   Čára leží přesně na hraně karty a karta má overflow: hidden, takže
   vnější polovina tahu se ořízne a zůstanou vnitřní 2 px. Proto
   rohy sedí na zaoblení karty.

   Kreslení: pathLength="1" udělá z obvodu délku 1, čárkování 1 1 je
   čára a stejně dlouhá mezera a posun z 1 na -1 je jedno kolo kreslení
   a jedno mazání. --trace-dur je dvojnásobek délky videa; motion.js ho
   přepíše podle skutečné délky, hodnota tady platí pro nahrávky
   z tools/record-cards.py (7,48 s).

   Čára se rozjede až třídou is-tracing, kterou motion.js dá kartě ve
   chvíli, kdy video opravdu hraje. Při prvním najetí se video teprve
   stahuje a čára spuštěná hned by mu utekla dopředu. */
.work-card__trace {
    --trace-dur: 14.96s;
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s var(--ease-out);
}

.work-card__trace rect {
    fill: none;
    stroke: var(--red);
    stroke-width: 4px;
    rx: var(--radius-card);
    ry: var(--radius-card);
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
}

@media (max-width: 47.9rem) {
    .work-card__trace rect {
        rx: var(--radius-media);
        ry: var(--radius-media);
    }
}

.work-card:hover .work-card__trace {
    opacity: 1;
}

.work-card.is-tracing .work-card__trace rect {
    animation: work-card-trace var(--trace-dur) linear infinite;
}

@keyframes work-card-trace {
    from { stroke-dashoffset: 1; }
    to   { stroke-dashoffset: -1; }
}

@media (hover: none), (prefers-reduced-motion: reduce) {
    .work-card__media video,
    .work-card__trace { display: none; }
}

.work-card__tags {
    position: absolute;
    right: var(--space-4);
    bottom: var(--space-4);
    z-index: 3;
    justify-content: flex-end;
}

.work-card__title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
}

.work-card__title h3 {
    margin-bottom: var(--space-4);
}

.work-card__text {
    max-width: 46ch;
    color: var(--muted-2);
}

.inverted .work-card__text {
    color: var(--muted-2-on-dark);
}

/* Mřížka prací: dva sloupce 5/12 s mezerou uprostřed, sudé karty níž. */
.work-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-8) 0;
}

.work-grid > * {
    width: 100%;
}

@media (min-width: 48rem) {
    .work-grid > * {
        width: calc(50% - 1.5rem);
    }
}

@media (min-width: 75rem) {
    .work-grid > * {
        width: 41.666%;
    }

    .work-grid--offset > *:nth-child(2n) {
        margin-top: 8%;
    }
}

/* ============================ OKNO PROJEKTU ==============================
   Úvodka, sekce Vybraná práce (od 12. 10. 2026, includes/components/
   project-window.php). Projekt jako okno prohlížeče se skutečnou doménou
   v adresním řádku a snímkem úvodní obrazovky (16:10), vedle velký název
   v šířce loga, popis a služby. Řádky se od 64rem střídají vlevo a vpravo.
   Okno je jediná výrazná věc, text kolem zůstává klidný. Okno samo je
   vždy tmavé, barvy textu kolem se řídí pozadím: výchozí pro světlou
   sekci, v tmavém panelu (.inverted) světlé (proměnné níže). Při najetí
   se přes snímek prolne nahrávka scrollování webu (initCardVideos
   v motion.js), stejně jako u karty. Používá se na úvodce, na stránce
   Práce, na O nás a na detailu služby.
   ========================================================================= */

.showcase {
    --showcase-text: var(--muted-2);
    --showcase-muted: var(--muted);
    --showcase-rule: var(--border);
    --showcase-edge: rgba(0, 0, 0, .14);
    --showcase-shadow: 0 30px 60px -30px rgba(0, 0, 0, .35);
}

.inverted .showcase {
    --showcase-text: var(--muted-2-on-dark);
    --showcase-muted: var(--muted-on-dark);
    --showcase-rule: var(--border-on-dark);
    --showcase-edge: var(--border-on-dark);
    --showcase-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7);
}

.showcase {
    display: grid;
    gap: var(--space-11);
    margin-top: var(--space-9);
}

.showcase__item {
    display: grid;
    gap: var(--space-6);
    align-items: center;
}

@media (min-width: 64rem) {
    .showcase__item {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: var(--space-10);
    }

    .showcase__item:nth-child(even) {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }

    .showcase__item:nth-child(even) .showcase__window {
        order: 2;
    }

    /* Text vlevo od okna se drží u okna, ne u levého kraje stránky
       (13. 10. 2026): blok je úzký jako jeho obsah a stojí na pravém
       okraji svého sloupce. Text v něm zůstává zarovnaný doleva. */
    .showcase__item:nth-child(even) .showcase__text {
        justify-self: end;
    }
}

/* Telefon (do 47.99rem), jen úvodka (ne mřížka .showcase--grid): okna stojí
   vedle sebe a listují se prstem do strany, další okno kousek vykukuje.
   Od 12. 10. 2026, čtyři okna pod sebou zabrala na telefonu přes 2 400 px.
   Čisté CSS (scroll-snap), bez JS. Pás sahá až k okrajům obrazovky, první
   okno ale začíná na hraně obsahu (scroll-padding).
   Odhalování při scrollu je uvnitř pásu vypnuté: časová osa pojistky
   (view()) by se navázala na vodorovný pás místo stránky a okna mimo
   obrazovku by mohla zůstat průhledná. Okna jsou proto vidět rovnou. */
@media (max-width: 47.99rem) {
    .showcase:not(.showcase--grid) {
        display: flex;
        gap: var(--space-5);
        margin-inline: calc(var(--container-pad) * -1);
        padding-inline: var(--container-pad);
        padding-bottom: var(--space-3);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--container-pad);
        scrollbar-width: none;
    }

    .showcase:not(.showcase--grid)::-webkit-scrollbar {
        display: none;
    }

    .showcase:not(.showcase--grid) > .showcase__item {
        flex: 0 0 85%;
        align-items: start;
        scroll-snap-align: start;
    }

    .js .showcase:not(.showcase--grid) > .showcase__item[data-reveal] {
        opacity: 1;
        transform: none;
        animation: none;
        transition: none;
    }

    /* Tažení myší (initDragScroll v main.js, od 13. 10. 2026): kolečko
       myši do strany nelistuje, na počítači s úzkým oknem se pás proto
       dá chytit a táhnout. Během tažení je přichytávání vypnuté, jinak
       by pás skákal po oknech; po puštění dojede skript na nejbližší. */
    .showcase:not(.showcase--grid).is-dragging {
        scroll-snap-type: none;
        cursor: grabbing;
        user-select: none;
        -webkit-user-select: none;
    }
}

@media (max-width: 47.99rem) and (hover: hover) and (pointer: fine) {
    .showcase:not(.showcase--grid) {
        cursor: grab;
    }
}

/* --------------------------------------------------------------- okno */

.showcase__window {
    display: block;
    overflow: hidden;
    border: 1px solid var(--showcase-edge);
    border-radius: 14px;
    background-color: var(--panel-dark-2);
    box-shadow: var(--showcase-shadow);
}

.showcase__bar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    height: 2.5rem;
    padding: 0 var(--space-4);
    border-bottom: 1px solid var(--border-on-dark);
}

.showcase__dots {
    display: flex;
    gap: 6px;
}

.showcase__dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .18);
}

/* Adresní řádek uprostřed, tečky vlevo ho nesmí posunout: proto auto
   okraje a pevná pružnost. */
.showcase__url {
    flex: 0 1 18rem;
    min-width: 0;
    margin: 0 auto;
    padding: .2rem var(--space-4);
    border-radius: var(--radius-pill);
    background-color: rgba(255, 255, 255, .06);
    font-size: var(--size-xs);
    color: var(--muted-on-dark);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.showcase__screen {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

/* Snímky jsou zachycené shora, proto ořez drží horní okraj stránky. */
.showcase__screen img,
.showcase__screen video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.showcase__screen video {
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    filter: blur(5px);
    transform: scale(1.03);
    transition: opacity .3s var(--ease-out),
                visibility .3s var(--ease-out),
                filter var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
}

.showcase__window:hover .showcase__screen video {
    opacity: 1;
    visibility: visible;
    filter: blur(0);
    transform: scale(1);
}

@media (hover: none), (prefers-reduced-motion: reduce) {
    .showcase__screen video { display: none; }
}

/* --------------------------------------------------------------- text */

.showcase__name {
    margin: 0 0 var(--space-4);
    font-size: clamp(2rem, 1.2rem + 2.6vw, 3.75rem);
    font-weight: var(--weight-medium);
    font-stretch: 112%;
    line-height: 1;
    letter-spacing: var(--tracking-sub);
}

.showcase__name a {
    color: inherit;
    text-decoration: none;
}

/* Šipka jako u tlačítek webu: název je odkaz na případovou studii. */
.showcase__name a::after {
    content: ' ↗';
    font-size: .45em;
    font-stretch: 100%;
    vertical-align: .9em;
    color: var(--showcase-muted);
}

.showcase__name a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
    border-radius: 4px;
}

.showcase__tagline {
    max-width: 28rem;
    margin: 0 0 var(--space-5);
    font-size: var(--size-subhead);
    line-height: var(--leading-body);
    color: var(--showcase-text);
}

/* Služby jako řádek oddělený čárkami, sémanticky seznam. */
.showcase__services {
    display: flex;
    flex-wrap: wrap;
    max-width: 28rem;
    margin: 0;
    padding: var(--space-4) 0 0;
    list-style: none;
    border-top: 1px solid var(--showcase-rule);
    font-size: var(--size-small);
    color: var(--showcase-muted);
}

.showcase__services li:not(:last-child)::after {
    content: ',\00a0';
}

/* Mřížka na stránce Práce: okno nahoře, text pod ním, od 48rem dva sloupce.
   Ruší střídání stran z úvodky (vyšší specifičnost než pravidla výše). */
.showcase--grid {
    gap: var(--space-10) var(--space-7);
    margin-top: 0;
}

@media (min-width: 48rem) {
    .showcase--grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.showcase--grid .showcase__item,
.showcase--grid .showcase__item:nth-child(even) {
    grid-template-columns: none;
    align-items: start;
    gap: var(--space-5);
}

.showcase--grid .showcase__item:nth-child(even) .showcase__window {
    order: 0;
}

.showcase--grid .showcase__item:nth-child(even) .showcase__text {
    justify-self: stretch;
}

.showcase--grid .showcase__name {
    margin-bottom: var(--space-3);
    font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
}

.showcase--grid .showcase__tagline {
    margin-bottom: var(--space-4);
    font-size: var(--size-body);
}

/* ============================ SEZNAM SLUŽEB ==============================
   Od 12. 10. 2026 místo karet s ikonami (stránka Služby, Další služby na
   detailu služby). Řádky mezi vlasovými čarami, sloupce z .split
   (layout.css): vlevo název ve stejné šířce písma jako názvy projektů
   (112 %) se šipkou, vpravo popis a pod ním drobně, co je součástí.
   Celý řádek je odkaz; při najetí název zrůžoví
   a šipka popojede.
   ========================================================================= */

.service-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--border);
}

.service-list__item {
    border-top: 1px solid var(--border);
}

.service-list__link {
    padding-block: var(--space-7);
    color: inherit;
    text-decoration: none;
}

@media (min-width: 75rem) {
    .service-list__link { padding-block: var(--space-9); }
}

.service-list__name {
    margin: 0;
    font-size: clamp(1.75rem, 1rem + 2.2vw, 3.25rem);
    font-weight: var(--weight-medium);
    font-stretch: 112%;
    letter-spacing: var(--tracking-sub);
    line-height: 1.05;
    text-wrap: balance;
    transition: color var(--dur-fast) var(--ease-out);
}

/* Šipka jako u názvů projektů. */
.service-list__name::after {
    content: '\00a0↗';
    display: inline-block;
    font-size: .45em;
    font-stretch: 100%;
    vertical-align: .9em;
    color: var(--muted);
    transition: transform var(--dur-med) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}

.service-list__link:hover .service-list__name,
.service-list__link:hover .service-list__name::after {
    color: var(--pink-ink);
}

.service-list__link:hover .service-list__name::after {
    transform: translate(.2em, -.2em);
}

.service-list__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
    border-radius: 4px;
}

.service-list__text {
    max-width: var(--measure);
    margin: 0;
    font-size: var(--size-subhead);
    line-height: var(--leading-body);
    color: var(--muted-2);
}

.service-list__includes {
    display: flex;
    flex-wrap: wrap;
    max-width: var(--measure);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--size-small);
    color: var(--muted);
}

/* Oddělovač lomítko, ne čárka: některé položky mají čárku v sobě
   („Návrh na míru, žádné šablony"). */
.service-list__includes li:not(:last-child)::after {
    content: '/';
    margin-inline: .6em;
    opacity: .5;
}

/* Menší varianta (Další služby na detailu služby). */
.service-list--compact .service-list__link {
    padding-block: var(--space-6);
}

.service-list--compact .service-list__name {
    font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
}

.service-list--compact .service-list__text {
    font-size: var(--size-body);
}

@media (prefers-reduced-motion: reduce) {
    .service-list__link:hover .service-list__name::after { transform: none; }
}

.service-grid {
    display: grid;
    gap: var(--space-5);
}

@media (min-width: 48rem) {
    .service-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 75rem) {
    .service-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================== HARMONIKA ================================
   Vlasové oddělovače, plus/minus z 1px linek, zavřeno ve výchozím stavu.
   ========================================================================= */

.accordion__item {
    border-bottom: 1px solid var(--border);
}

.inverted .accordion__item {
    border-color: var(--border-on-dark);
}

/* V bloku dotazů (faq-block.php) začíná první otázka na výšce nadpisu
   vedle ní, ne o odsazení tlačítka níž. */
.faq-block .accordion__item:first-child .accordion__trigger {
    padding-top: 0;
}

.accordion__trigger {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
    padding: 1.5em 0;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

@media (min-width: 75rem) {
    .accordion__trigger {
        padding: 1.75em 0;
    }
}

.accordion__trigger h4,
.accordion__title {
    flex: 1 1 auto;
    font-size: var(--size-accordion);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-sub);
    line-height: 1.2;
    margin: 0;
    padding-right: var(--space-4);
}

/* Plus/minus ze dvou 1px linek. Otevření je otočí na minus. */
.accordion__icon {
    position: relative;
    margin-left: auto;
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
}

.accordion__icon::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    transition: transform .35s ease-out;
}

.accordion__icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background-color: currentColor;
    transition: transform var(--dur-med) ease-out;
}

.accordion__item.is-open .accordion__icon::before {
    transform: rotate(180deg);
}

.accordion__item.is-open .accordion__icon::after {
    transform: rotate(270deg);
}

/* Sbalení řeší CSS jen tehdy, když funguje JavaScript. Bez něj zůstanou
   všechny odpovědi otevřené, jinak by byl obsah nedostupný.
   visibility navíc odebere sbalený obsah i čtečkám obrazovky. */
.js .accordion__panel {
    display: grid;
    grid-template-rows: 0fr;
    /* Skrytí se odloží až na konec sbalení, aby text nezmizel dřív,
       než se panel zavře. Při otevírání se naopak ukáže hned. */
    visibility: hidden;
    transition: grid-template-rows .3s ease-out,
                visibility 0s linear .3s;
}

.js .accordion__item.is-open .accordion__panel {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows .3s ease-out,
                visibility 0s linear 0s;
}

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

.accordion__panel > div {
    overflow: hidden;
}

.accordion__content {
    padding-bottom: var(--space-6);
    max-width: var(--measure);
    color: var(--muted-2);
    line-height: var(--leading-relaxed);
}

.inverted .accordion__content {
    color: var(--muted-2-on-dark);
}

/* ============================== REFERENCE ================================ */

.quote {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-7);
    border-radius: var(--radius-panel);
    background-color: var(--surface);
    border: 1px solid var(--border);
}

.quote__text {
    font-size: var(--size-h5);
    font-weight: var(--weight-regular);
    letter-spacing: var(--tracking-sub);
    line-height: 1.4;
}

.quote__text::before { content: '\201E'; }
.quote__text::after  { content: '\201C'; }

.quote__author {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--size-small);
}

.quote__avatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
}

.quote__name { font-weight: var(--weight-medium); }
.quote__role { color: var(--muted-2); }

/* Velká citace (jediná reference na homepage). Bez rámečku, na střed.
   Nad textem velká uvozovka v přechodu značky, stejné barvy jako linka
   v postupu. Pod textem logo klienta, jméno a odkaz na jeho projekt.
   Logo se barví stejně jako loga v pásu pod hero. */
.quote--feature {
    align-items: center;
    gap: var(--space-6);
    max-width: var(--measure);
    margin-inline: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    text-align: center;
}

.quote__mark {
    display: block;
    height: .5em;
    font-size: calc(var(--size-h2) * 2.5);
    font-weight: var(--weight-bold);
    line-height: 1;
    background: linear-gradient(to right, var(--orange), var(--pink), var(--violet));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.quote--feature .quote__text {
    font-size: var(--size-h2);
    font-weight: var(--weight-light);
    letter-spacing: var(--tracking-heading);
    line-height: 1.15;
    text-wrap: balance;
}

/* Velká uvozovka nahoře uvozovky v textu nahrazuje. Dvojitá třída kvůli
   pravidlu pro anglické uvozovky v pages.css (:lang + třída), které se
   načítá později a jinak by je vrátilo. */
.quote.quote--feature .quote__text::before,
.quote.quote--feature .quote__text::after {
    content: none;
}

.quote--feature .quote__author {
    justify-content: center;
    gap: var(--space-4);
    text-align: left;
}

.quote__logo {
    display: block;
    width: auto;
    height: var(--client-logo-h-sm);
    filter: brightness(0);
    opacity: var(--client-logo-opacity);
}

/* Vlasová čára mezi logem a jménem. */
.quote__logo ~ .quote__who {
    padding-left: var(--space-4);
    border-left: 1px solid var(--border);
}

/* ============================= LOGA KLIENTŮ ==============================
   Pás log v patě hero, bez rámečků a podkladů. Každé logo se obarví
   na jednu tmavou barvu a přitlumí, takže vedle sebe drží jako jedna
   řada, ať je původní logo jakékoli barvy.
   Pás pomalu běží na všech šířkách a okraje se rozpouštějí. Na širokých
   oknech je užší a na střed, aby se nepotkal s kolečkem Napište nám.

   Mezery dělá vnitřní okraj položek, ne gap: jedna kopie obsahu je pak
   přesně polovina pásu a smyčka navazuje bez cuknutí.
   ========================================================================= */

.clients {
    width: 100%;
    max-width: var(--clients-max);
    margin-inline: auto;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.clients__track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: clients-scroll var(--clients-loop) linear infinite;
}

@keyframes clients-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

.clients__item {
    flex: none;
    padding-inline: clamp(var(--space-5), 2vw, var(--space-7));
}

.clients__logo {
    display: block;
    width: auto;
    height: var(--client-logo-h-sm);
    filter: brightness(0);
    opacity: var(--client-logo-opacity);
}

/* Od tabletu je kolečko Napište nám velké, pás proto nechává po obou
   stranách místo na jeho šířku (stejný výpočet jako patička v layout.css). */
@media (min-width: 48rem) {
    .clients {
        max-width: min(
            var(--clients-max),
            100vw - 2 * (var(--speak-size) + var(--space-5) + var(--space-4))
        );
    }

    .clients__logo { height: var(--client-logo-h); }
}

/* Omezený pohyb: pás stojí a loga se zalomí do řádků na střed,
   aby žádné nezůstalo useknuté za okrajem. */
@media (prefers-reduced-motion: reduce) {
    .clients {
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .clients__track {
        width: auto;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: var(--space-4);
        animation: none !important;
    }

    .clients__item[aria-hidden] { display: none; }
}

/* =============================== BĚŽÍCÍ PÁS ============================== */

.marquee {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
    mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.marquee__track {
    display: flex;
    width: max-content;
    gap: var(--space-8);
    animation: marquee-scroll var(--marquee-duration, 40s) linear infinite;
}

.marquee:hover .marquee__track {
    animation-play-state: paused;
}

.marquee__item {
    display: flex;
    align-items: center;
    flex: none;
}

@keyframes marquee-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

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

/* Pomalejší varianta pásu (fotky ze studia). Rychlost pásu určuje, kolik
   fotek proběhne za vteřinu, ne samotné trvání. Pomalé tempo vyšlo při
   20 fotkách na 55 s, tedy 2,75 s na fotku. Teď jich v pásu je 30
   (data/content/about.php, photos.images), stejné tempo je proto 82 s.
   Kdo fotky přidá nebo ubere, má trvání upravit úměrně (počet fotek krát
   2,75 s). Počet fotek CSS neumí přečíst a trvání nejde nastavit ani
   z šablony, protože inline styl zakazuje CSP. */
.marquee--slow { --marquee-duration: 82s; }

.marquee--photos .marquee__item img {
    height: clamp(8rem, 6rem + 8vw, 14rem);
    width: auto;
    border-radius: var(--radius-media);
    object-fit: cover;
}

/* =========================== NAKLONĚNÉ DLAŽDICE ==========================
   Pole fotek otočené o 22.5 stupně. Řádky se při scrollu rozjíždějí
   proti sobě (obstarává motion.js).
   ========================================================================= */

.tiles {
    position: relative;
    height: 50vmax;
    max-height: 44rem;
    overflow: hidden;
    padding: 0;
}

.tiles__wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 180%;
    transform: translate3d(-50%, -50%, 0) rotate(22.5deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-4);
}

.tiles__line {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    will-change: transform;
}

.tiles__line:nth-child(odd)  { transform: translate3d(10%, 0, 0); }
.tiles__line:nth-child(even) { transform: translate3d(-10%, 0, 0); }

.tiles__line figure {
    position: relative;
    flex: none;
    width: calc(16.6666% - 1.5rem);
    height: calc(18vmax - 1.5rem);
    border-radius: var(--radius-media);
    overflow: hidden;
}

@media (max-width: 47.9rem) {
    .tiles__line figure {
        width: calc(36.6666% - 1rem);
    }
}

.tiles__line figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================ VLASTNÍ KURZOR =============================
   Bílé vrstvy s mix-blend exclusion: na světlé ploše černé, na tmavé bílé.
   Režimy: tečka (výchozí), kruh (arrow), velký kruh s popiskem (cta).
   Velikosti přesně dle reference: tečka 1rem, kruh 5rem, cta 8rem.
   ========================================================================= */

.cursor__layer {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-cursor);
    border-radius: 50%;
    color: var(--cursor-color);
    mix-blend-mode: exclusion;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
}

.cursor__dot {
    width: 1rem;
    height: 1rem;
    background-color: var(--cursor-color);
    opacity: 1;
}

/* Kruh má pořád velikost režimu cta (8rem) a menší kruh 5rem dělá
   měřítko vnitřní výplně (8 × .625 = 5). Měřítko počítá grafická karta,
   změna width a height by při každém snímku přepočítávala rozvržení
   (od 13. 10. 2026). Míchání (exclusion) zůstává na vnější vrstvě, kterou
   posouvá motion.js, takže se výplň míchá se stránkou jako dřív. */
.cursor__circle {
    width: 8rem;
    height: 8rem;
}

.cursor__fill {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--cursor-color);
    transform: scale(.625);
    transition: transform .25s ease;
}

/* Popisek uvnitř velkého kruhu (název služby). Je bílý a míchá se stejně
   jako kruh (exclusion), takže má vždy opačnou barvu než kruh pod ním:
   na světlé ploše je kruh černý a písmo bílé, na tmavé naopak. Dřív byl
   tmavý bez míchání a na černém kruhu nebyl vidět (opraveno 13. 10. 2026). */
.cursor__text {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-cursor);
    width: 8rem;
    padding-inline: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--cursor-color);
    mix-blend-mode: exclusion;
    font-size: var(--size-small);
    font-weight: var(--weight-medium);
    line-height: 1.15;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
}

.cursor.is-arrow .cursor__dot { opacity: 0; }
.cursor.is-arrow .cursor__circle { opacity: 1; }

.cursor.is-cta .cursor__dot { opacity: 0; }
.cursor.is-cta .cursor__circle {
    opacity: 1;
}

.cursor.is-cta .cursor__fill {
    transform: none;
}
.cursor.is-cta .cursor__text { opacity: 1; }

.cursor.is-hidden .cursor__layer,
.cursor.is-hidden .cursor__text {
    opacity: 0;
}

@media (hover: none), (prefers-reduced-motion: reduce) {
    .cursor { display: none; }
}

/* ========================== ODHALENÍ PŘI SCROLLU =========================
   Prvky s data-reveal naskočí zdola (40px), děti postupně za sebou.
   Bez JS zůstane vše viditelné.
   ========================================================================= */

.js [data-reveal] {
    opacity: 0;
    transform: translateY(40px);
}

.js [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    transition: opacity 1.2s var(--ease-out),
                transform 1.2s var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
    .js [data-reveal] {
        opacity: 1;
        transform: none;
    }
}

/* Pojistka: obsah nesmí zůstat na opacity 0, když odhalení z motion.js
   nepřijde. Stává se to, když se skript nenačte nebo spadne, a na iPhonu
   v úsporném režimu, který přibrzdí IntersectionObserver. Platí jen pro
   prvky, které JS ještě neodhalil, takže v běžném provozu se neuplatní
   a naskočení zůstává z motion.js.
   - Prohlížeče se scroll-driven animacemi (Chrome, Edge, Safari 26+):
     prvek dotáhne do plné viditelnosti prohlížeč sám podle polohy v okně,
     bez skriptu a bez časovače. Začíná, až je horní hrana v 55 % výšky
     okna, tedy až po bodu, kdy prvek normálně odhalí JS (85 % okna).
     Prvky viditelné hned po načtení začínají nejvýš na 62 % okna, takže
     jim pojistka naskočení nevezme.
   - Ostatní prohlížeče: po 3 s se všechno ukáže CSS animací, ta běží
     i bez JS. Naskakuje pak jen to, k čemu návštěvník do té doby dojede.
   Výplň je jen forwards, ne both. Animace s výplní dozadu drží opacity
   a transform i před svým začátkem a Chrome pak při přidání .is-revealed
   přechod (naskočení) vůbec nespustí, prvek se jen objeví (ověřeno).
   Bez výplně dozadu pojistka do svého začátku na nic nesahá.
   Aby JS odhalil prvek dřív, než pojistka začne, nesmí být prvek vyšší
   než zhruba trojnásobek okna (dnes nejvýš 2,2násobek, fáze postupu na
   mobilu). Vyšší prvek by na konci pojistky místo naskočení jen doskočil.
   Prvek uvnitř kontejneru s overflow: hidden by časovou osu view() neměl
   (kontejner se počítá jako scrollovací), proto má patička overflow: clip.
   Stejná pojistka je pro fáze postupu v pages.css. */
@keyframes reveal-failsafe {
    to {
        opacity: 1;
        transform: none;
    }
}

@supports (animation-timeline: view()) {
    .js [data-reveal]:not(.is-revealed) {
        animation: reveal-failsafe linear forwards;
        animation-timeline: view();
        animation-range: cover 45vh cover 60vh;
    }
}

@supports not (animation-timeline: view()) {
    .js [data-reveal]:not(.is-revealed) {
        animation: reveal-failsafe 1.2s var(--ease-out) 3s forwards;
    }
}

/* ============================== FORMULÁŘE ================================ */

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.field__label {
    font-size: var(--size-small);
    font-weight: var(--weight-medium);
}

.field__optional {
    color: var(--muted-2);
    font-weight: var(--weight-regular);
}

.inverted .field__optional,
.footer .field__optional {
    color: var(--muted-2-on-dark);
}

.field__desc {
    font-size: var(--size-small);
    color: var(--muted-2);
}

/* Pole podle reference: vyplněný obdélník bez rámečku, text popisku
   je přímo v poli, velkorysé vnitřní odsazení, zaoblení .75rem. */
.field__control {
    width: 100%;
    padding: 1.5rem 1.75rem;
    border: 1px solid transparent;
    border-radius: var(--radius-media);
    background-color: color-mix(in srgb, var(--ink) 5%, transparent);
    color: var(--ink);
    transition: background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}

.field__control::placeholder {
    color: var(--muted);
}

.field__control:hover {
    background-color: color-mix(in srgb, var(--ink) 8%, transparent);
}

/* Fokus musí být vidět na první pohled. Samotná změna rámečku o jeden
   pixel nestačí, proto je tu obrys v barvě fokusu (stejný jako jinde na
   webu) a k tomu výraznější rámeček a podbarvení. */
.field__control:focus {
    background-color: color-mix(in srgb, var(--ink) 8%, transparent);
    border-color: var(--ink);
}

.field__control:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-media);
}

/* Pole na tmavém panelu (formulář v patičce). */
.inverted .field__control,
.footer .field__control {
    background-color: color-mix(in srgb, var(--text-on-dark) 7%, transparent);
    color: var(--text-on-dark);
}

.inverted .field__control::placeholder,
.footer .field__control::placeholder {
    color: var(--muted-on-dark);
}

.inverted .field__control:hover,
.inverted .field__control:focus,
.footer .field__control:hover,
.footer .field__control:focus {
    background-color: color-mix(in srgb, var(--text-on-dark) 11%, transparent);
}

.inverted .field__control:focus,
.footer .field__control:focus {
    border-color: var(--text-on-dark);
}

textarea.field__control {
    min-height: 8rem;
    resize: vertical;
}

/* Částka (rozpočet v kalkulaci, typ 'amount'): užší pole jen na číslo,
   jednotka leží uvnitř pole u pravého okraje. Odsazení vpravo nechává
   místo na jednotku, odsazení jednotky je stejné jako textu v poli. */
.field__amount {
    position: relative;
    max-width: 20rem;
}

.field__amount .field__control {
    padding-right: 4.5rem;
}

.field__unit {
    position: absolute;
    top: 50%;
    right: 1.75rem;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}

.inverted .field__unit {
    color: var(--muted-on-dark);
}

/* Výběr měny místo pevné jednotky: malý select na pravém okraji pole,
   bez vlastního pozadí, aby splýval s polem. Rozbalovací nabídka má vlastní
   vzhled, viz ROZBALOVACÍ NABÍDKA níže. */
.field__amount--currency .field__control {
    padding-right: 6.5rem;
}

.field__currency {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background-color: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: var(--size-small);
    cursor: pointer;
}

.field__currency:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* ========================== ROZBALOVACÍ NABÍDKA ==========================
   Místo systémového seznamu s modrým zvýrazněním (vypadá jako z každé
   druhé šablony) dostane select nabídku v barvách webu: bílý panel se
   zaoblením a stínem jako karty, položky se při najetí jemně podbarví
   a vybraná má červenou tečku jako popisky sekcí. Šipka je tenká
   a při otevření se otočí.

   Funguje přes appearance: base-select (Chrome a Edge od verze 135).
   Ostatní prohlížeče pravidla v @supports přeskočí a ukážou svůj
   systémový seznam, takže výběr funguje všude. Klávesnice i čtečky
   obrazovky pracují se skutečným selectem, žádný skript navíc.
   Pohyb se řídí --dur-fast, který je při omezeném pohybu téměř nulový.
   ========================================================================= */
@supports (appearance: base-select) {
    .field__currency,
    select.field__control,
    .field__currency::picker(select),
    select.field__control::picker(select) {
        appearance: base-select;
    }

    .field__currency,
    select.field__control {
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

    select.field__control {
        justify-content: space-between;
    }

    /* Šipka: tenký úhel z rámečku, při otevření se překlopí. */
    .field__currency::picker-icon,
    select.field__control::picker-icon {
        content: '';
        width: .45em;
        height: .45em;
        margin-top: -.2em;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(45deg);
        transition: rotate var(--dur-fast) var(--ease-out),
                    margin var(--dur-fast) var(--ease-out);
    }

    .field__currency:open::picker-icon,
    select.field__control:open::picker-icon {
        rotate: 180deg;
        margin-top: .2em;
    }

    /* Panel s nabídkou. Otevírá se krátkým vyjetím a rozplynutím. Chrome
       sám otevírá na stranu, kde je víc místa, takže pole uprostřed
       obrazovky vyskočilo nahoru. position-try-order: normal dává přednost
       otevření dolů a nahoru přepne, jen když se nabídka dolů nevejde. */
    .field__currency::picker(select),
    select.field__control::picker(select) {
        position-try-order: normal;
        margin-block: var(--space-2);
        padding: var(--space-2);
        border: 1px solid var(--border);
        border-radius: var(--radius-media);
        background-color: var(--surface);
        color: var(--ink);
        box-shadow: var(--shadow-card);
        opacity: 1;
        translate: 0 0;
        transition: opacity var(--dur-fast) var(--ease-out),
                    translate var(--dur-fast) var(--ease-out),
                    display var(--dur-fast) allow-discrete,
                    overlay var(--dur-fast) allow-discrete;
    }

    .field__currency:not(:open)::picker(select),
    select.field__control:not(:open)::picker(select) {
        opacity: 0;
        translate: 0 calc(var(--space-2) * -1);
    }

    @starting-style {
        .field__currency:open::picker(select),
        select.field__control:open::picker(select) {
            opacity: 0;
            translate: 0 calc(var(--space-2) * -1);
        }
    }

    .field__currency option,
    select.field__control option {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-2) var(--space-3);
        border-radius: calc(var(--radius-media) - var(--space-1));
        font-size: var(--size-small);
        cursor: pointer;
        transition: background-color var(--dur-fast) var(--ease-out);
    }

    /* Najetí myší i pohyb šipkami: jemné podbarvení, žádná modrá. */
    .field__currency option:hover,
    .field__currency option:focus-visible,
    select.field__control option:hover,
    select.field__control option:focus-visible {
        background-color: color-mix(in srgb, var(--ink) 6%, transparent);
        outline: none;
    }

    .field__currency option:checked,
    select.field__control option:checked {
        font-weight: var(--weight-medium);
    }

    /* Vybraná položka: červená tečka místo systémové fajfky. U ostatních
       položek je tečka skrytá, ale místo drží, takže texty lícují. */
    .field__currency option::checkmark,
    select.field__control option::checkmark {
        content: '';
        width: .5em;
        height: .5em;
        border-radius: 50%;
        background-color: var(--red);
    }

    /* Prázdná výzva (první položka bez hodnoty) je v nabídce šedá. */
    select.field__control option[value=""] {
        color: var(--muted);
    }

    /* Na tmavém panelu (formulář v patičce) je nabídka tmavá. */
    .inverted .field__currency::picker(select),
    .inverted select.field__control::picker(select),
    .footer .field__currency::picker(select),
    .footer select.field__control::picker(select) {
        border-color: color-mix(in srgb, var(--text-on-dark) 12%, transparent);
        background-color: var(--panel-dark);
        color: var(--text-on-dark);
    }

    .inverted .field__currency option:hover,
    .inverted .field__currency option:focus-visible,
    .inverted select.field__control option:hover,
    .inverted select.field__control option:focus-visible,
    .footer .field__currency option:hover,
    .footer .field__currency option:focus-visible,
    .footer select.field__control option:hover,
    .footer select.field__control option:focus-visible {
        background-color: color-mix(in srgb, var(--text-on-dark) 10%, transparent);
    }

    .inverted select.field__control option[value=""],
    .footer select.field__control option[value=""] {
        color: var(--muted-on-dark);
    }
}

/* Čárkovaný box na odkaz se zadáním (obdoba jejich pole pro přílohu). */
.brief-box {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-6);
    border: 1px dashed var(--muted-2);
    border-radius: var(--radius-media);
    cursor: text;
    transition: border-color var(--dur-fast) var(--ease-out);
}

/* Při najetí a ve fokusu se čárkovaný rámeček zesiluje, nikdy neslábne.
   Ve fokusu k tomu přibude stejný obrys jako u ostatních polí, protože
   vlastní pole uvnitř nemá žádný (viz .brief-box__input:focus). */
.brief-box:hover,
.brief-box:focus-within {
    border-color: var(--ink);
}

.brief-box:focus-within {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.inverted .brief-box,
.footer .brief-box {
    border-color: var(--muted-2-on-dark);
}

.inverted .brief-box:hover,
.inverted .brief-box:focus-within,
.footer .brief-box:hover,
.footer .brief-box:focus-within {
    border-color: var(--text-on-dark);
}

.brief-box__icon {
    width: 2rem;
    height: 2rem;
    flex: none;
}

.brief-box__body {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
    flex: 1;
}

.brief-box__title {
    font-weight: var(--weight-semibold);
}

.brief-box__sub {
    font-size: var(--size-xs);
    color: var(--muted-2);
}

.inverted .brief-box__sub,
.footer .brief-box__sub {
    color: var(--muted-2-on-dark);
}

.brief-box__input {
    width: 100%;
    border: 0;
    background: none;
    padding: 0;
    margin-top: .35rem;
    color: inherit;
}

.brief-box__input:focus {
    outline: none;
}

.brief-box__input::placeholder {
    color: var(--muted-2);
}

.inverted .brief-box__input::placeholder,
.footer .brief-box__input::placeholder {
    color: var(--muted-2-on-dark);
}

/* Věta o ochraně údajů pod formulářem, s odkazem. */
.form-note {
    font-size: var(--size-small);
    line-height: 1.6;
    color: var(--muted-2);
    margin: 0;
}

.form-note a {
    color: inherit;
    font-weight: var(--weight-medium);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.form-note a:hover {
    color: var(--pink-ink);
}

.inverted .form-note,
.footer .form-note {
    color: var(--muted-2-on-dark);
}

.inverted .form-note a:hover,
.footer .form-note a:hover {
    color: var(--text-on-dark);
}

.field__error {
    font-size: var(--size-small);
    font-weight: var(--weight-medium);
    color: var(--error);
}

.field.has-error .field__control {
    border-color: var(--error);
}

/* Skupina přepínačů s chybou: červené obrysy všech možností. Zaškrtnutá
   možnost chybu zruší hned, takže tu žádná zaškrtnutá být nemůže. */
.field.has-error .option {
    border-color: var(--error);
}

/* Po neúspěšné kontrole dostane fokus první chybné pole ze skriptu. Když
   předtím návštěvník klikl myší (třeba na Odeslat), prohlížeč u takového
   fokusu :focus-visible nepřizná. Chybné pole proto ukazuje obrys při
   jakémkoli fokusu, ať ví, kde se zrovna nachází. */
.field.has-error .field__control:focus {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.field.has-error .option:has(input:focus) {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Tmavý panel: --error je tmavší odstín určený pro světlé plochy a na
   tmavé nedosáhne kontrastu pro drobné písmo, proto tu svítí růžová. */
.inverted .field__error,
.footer .field__error {
    color: var(--pink);
}

.inverted .field.has-error .field__control,
.footer .field.has-error .field__control {
    border-color: var(--pink);
}

.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Výběr z možností jako dlaždice. */
.options {
    display: grid;
    gap: var(--space-3);
}

.options--cols-2 { grid-template-columns: 1fr; }

/* Od šířky tabletu dva sloupce i u delších nabídek. Dřív zůstávaly
   nabídky s pěti a více možnostmi až do 75rem v jednom sloupci a osm
   dlaždic typu projektu tak zabralo několik obrazovek. */
@media (min-width: 36rem) {
    .options--cols-2,
    .options--cols-3,
    .options--cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 75rem) {
    .options--cols-3 { grid-template-columns: repeat(3, 1fr); }
    .options--cols-4 { grid-template-columns: repeat(4, 1fr); }
}

.option {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    background-color: var(--surface);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
}

.option:hover {
    border-color: var(--border-strong);
}

.option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.option__label {
    font-weight: var(--weight-medium);
}

.option__note {
    font-size: var(--size-small);
    color: var(--muted-2);
}

.option:has(input:checked) {
    border-color: var(--ink);
    background-color: color-mix(in srgb, var(--ink) 4%, var(--surface));
}

.option:has(input:focus-visible) {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Dlaždice s popiskem (typ projektu). Na telefonu jsou nízké jako běžné
   možnosti, jinak by osm dlaždic pod sebou znamenalo dlouhé scrollování.
   Velkorysá výška se zapne až tam, kde stojí vedle sebe. */
@media (min-width: 36rem) {
    .option--card {
        padding: var(--space-6);
        min-height: 7rem;
        justify-content: flex-end;
    }
}

.consent {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--size-small);
    color: var(--muted-2);
    cursor: pointer;
}

.inverted .consent {
    color: var(--muted-2-on-dark);
}

.consent input {
    margin-top: .2em;
    accent-color: var(--red);
    width: 1.1em;
    height: 1.1em;
    flex: none;
}

.consent a {
    color: var(--pink-ink);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.form-message {
    padding: var(--space-5);
    border-radius: var(--radius-btn);
    border: 1px solid var(--border);
}

/* Hláška dostává fokus ze skriptu, aby ji čtečka přečetla. Není to ovládací
   prvek a klávesou Tab se k ní nejde dostat, takže obrys by jen budil dojem
   chyby i u zprávy o úspěchu. */
.form-message[tabindex='-1']:focus {
    outline: none;
}

.form-message--success {
    border-color: color-mix(in srgb, var(--success) 50%, transparent);
    background-color: color-mix(in srgb, var(--success) 8%, transparent);
}

.form-message--error {
    border-color: color-mix(in srgb, var(--error) 50%, transparent);
    background-color: color-mix(in srgb, var(--error) 8%, transparent);
}

/* ========================== SMYČKA ZNAČKY ================================
   Karta Značka a identita na homepage. Tři dlaždice: rozříznutá slovní
   značka, vějíř vzorníků a tekoucí stuha. Podle Filipova návrhu
   (ascent-loop.html), viz components/brand-loop.php.

   Proměnné níže jsou geometrie a tempo tohohle artworku, ne tokeny
   webu; barvy jdou z tokens.css. Tvar stuhy animuje vlastnost d,
   kterou Safari neumí: tam stuha stojí a dýchá jen její světlo.
   ========================================================================= */

.brand-loop {
    --bl-loop:        6s;
    --bl-ribbon-loop: 21s;
    --bl-shear-span:  800.8px;
    --bl-shear-rest:  .26;
    --bl-shear-open:  .30;
    --bl-fan-mid:     -165px;
    --bl-fan-far:     -277px;
    --bl-ease-slow:   cubic-bezier(.65, 0, .35, 1);
    --bl-ease-fast:   cubic-bezier(.85, 0, .15, 1);
    --bl-ease-fan:    cubic-bezier(.76, 0, .24, 1);

    container-type: inline-size;
    display: flex;
    gap: 2.7%;
    aspect-ratio: 1480 / 1090;
}

.brand-loop__col {
    flex: none;
    width: 43.7%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.brand-loop__card {
    border-radius: 1.4cqw;
    overflow: hidden;
}

.brand-loop__col .brand-loop__card { height: 47.6465%; }

.brand-loop__card--mark   { background: var(--panel-dark); }
.brand-loop__card--fan    { background: var(--surface); }
.brand-loop__card--ribbon { flex: none; width: 53.6%; background: var(--panel-void); }

.brand-loop__card svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ------------------------------------------------------ slovní značka */

/* Stejné písmo jako logo v hlavičce (viz includes/sprite.php):
   Archivo 600, rozšířené na 118 %, prostrkání 1.5. Velikost je nativní
   velikost loga, měřítko řeší skupina v šabloně. */
.bl-wordmark {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-stretch: 118%;
    font-size: 40px;
    letter-spacing: 1.5px;
    fill: var(--text-on-dark);
}

.bl-dot { fill: var(--red); }

.bl-shear--upper { animation: bl-ascent-upper var(--bl-loop) infinite both; }
.bl-shear--lower { animation: bl-ascent-lower var(--bl-loop) infinite both; }

/* Poloviny při odletu i zprůhlední. Tenké proužky písma na hraně
   střihu jinak při rychlém posunu vypadají jako zbylé čárky, a na
   slabších grafikách umí zůstat viset i po odletu. Nula v průhlednosti
   zaručí, že po odletu nemá co zůstat. */
@keyframes bl-ascent-upper {
    0%      { transform: translateX(calc(var(--bl-shear-span) * var(--bl-shear-rest))); opacity: 1; animation-timing-function: var(--bl-ease-slow); }
    23.333% { transform: translateX(0); opacity: 1; animation-timing-function: linear; }
    48.333% { transform: translateX(0); opacity: 1; animation-timing-function: var(--bl-ease-slow); }
    71.667% { transform: translateX(calc(var(--bl-shear-span) * var(--bl-shear-open))); opacity: 1; animation-timing-function: var(--bl-ease-fast); }
    84.167% { transform: translateX(var(--bl-shear-span)); opacity: 0; animation-timing-function: var(--bl-ease-fast); }
    98.333% { transform: translateX(calc(var(--bl-shear-span) * var(--bl-shear-open))); opacity: 1; animation-timing-function: var(--bl-ease-fast); }
    100%    { transform: translateX(calc(var(--bl-shear-span) * var(--bl-shear-rest))); opacity: 1; }
}

@keyframes bl-ascent-lower {
    0%      { transform: translateX(calc(var(--bl-shear-span) * var(--bl-shear-rest) * -1)); opacity: 1; animation-timing-function: var(--bl-ease-slow); }
    23.333% { transform: translateX(0); opacity: 1; animation-timing-function: linear; }
    48.333% { transform: translateX(0); opacity: 1; animation-timing-function: var(--bl-ease-slow); }
    71.667% { transform: translateX(calc(var(--bl-shear-span) * var(--bl-shear-open) * -1)); opacity: 1; animation-timing-function: var(--bl-ease-fast); }
    84.167% { transform: translateX(calc(var(--bl-shear-span) * -1)); opacity: 0; animation-timing-function: var(--bl-ease-fast); }
    98.333% { transform: translateX(calc(var(--bl-shear-span) * var(--bl-shear-open) * -1)); opacity: 1; animation-timing-function: var(--bl-ease-fast); }
    100%    { transform: translateX(calc(var(--bl-shear-span) * var(--bl-shear-rest) * -1)); opacity: 1; }
}

/* ----------------------------------------------------------- vzorníky */

.bl-swatch--red   { fill: var(--red); }
.bl-swatch--dark  { fill: var(--panel-dark); }
.bl-swatch--light { fill: var(--bg); }

.bl-label {
    font-family: var(--font-body);
    font-weight: var(--weight-bold);
    font-size: 16px;
    letter-spacing: 1.4px;
}

.bl-label--dark  { fill: var(--ink); }
.bl-label--light { fill: var(--text-on-dark); }

.bl-fan--mid { animation: bl-fan-mid var(--bl-loop) infinite both; }
.bl-fan--far { animation: bl-fan-far var(--bl-loop) infinite both; }

@keyframes bl-fan-mid {
    0%, 7.5%   { transform: translateX(var(--bl-fan-mid)); animation-timing-function: var(--bl-ease-fan); }
    22.5%, 60% { transform: translateX(0); animation-timing-function: var(--bl-ease-fan); }
    75%, 100%  { transform: translateX(var(--bl-fan-mid)); }
}

@keyframes bl-fan-far {
    0%, 7.5%   { transform: translateX(var(--bl-fan-far)); animation-timing-function: var(--bl-ease-fan); }
    22.5%, 60% { transform: translateX(0); animation-timing-function: var(--bl-ease-fan); }
    75%, 100%  { transform: translateX(var(--bl-fan-far)); }
}

/* --------------------------------------------------------------- stuha */

.bl-iso { isolation: isolate; }

.bl-ribbon { animation: bl-ribbon-body var(--bl-ribbon-loop) linear infinite both; }

.bl-ribbon--halo { filter: blur(96px); opacity: .42; }
.bl-ribbon--core { filter: blur(2.5px); }

.bl-ribbon--drift-a {
    filter: blur(6px);
    opacity: 0;
    animation: bl-ribbon-body var(--bl-ribbon-loop) linear infinite both,
               bl-drift-a var(--bl-ribbon-loop) linear infinite both;
}

.bl-ribbon--drift-b {
    filter: blur(6px);
    opacity: 0;
    animation: bl-ribbon-body var(--bl-ribbon-loop) linear infinite both,
               bl-drift-b var(--bl-ribbon-loop) linear infinite both;
}

.bl-ribbon--gold {
    stroke-width: 13;
    filter: blur(8px);
    opacity: .6;
    mix-blend-mode: screen;
}

.bl-ribbon--violet {
    stroke-width: 26;
    filter: blur(13px);
    opacity: .62;
    mix-blend-mode: screen;
}

.bl-edge {
    stroke: #FFF0F4;
    stroke-width: 2.2;
    opacity: .62;
    filter: blur(1.2px);
    mix-blend-mode: screen;
    animation: bl-ribbon-edge var(--bl-ribbon-loop) linear infinite both;
}

.bl-specs { mix-blend-mode: screen; }

.bl-spec--a { filter: blur(7px); opacity: .85; animation: bl-spec-drift-a var(--bl-ribbon-loop) ease-in-out infinite both; }
.bl-spec--b { filter: blur(6px); opacity: .8;  animation: bl-spec-drift-b var(--bl-ribbon-loop) ease-in-out infinite both; }
.bl-spec--c { filter: blur(5px); opacity: .7;  animation: bl-spec-drift-a calc(var(--bl-ribbon-loop) / 2) ease-in-out infinite both; }

@keyframes bl-ribbon-body {
    0%   { d: path("M -90 240 C 60 130 150 300 280 340 C 400 377 430 500 540 545 C 640 585 720 660 845 700 L 845 955 C 700 915 630 830 530 795 C 420 757 400 630 280 590 C 150 547 60 385 -90 495 Z"); }
    25%  { d: path("M -90 300 C 50 210 160 250 290 320 C 410 385 420 470 545 520 C 650 562 710 640 845 660 L 845 915 C 700 895 640 820 535 775 C 410 727 400 640 290 570 C 160 500 50 465 -90 555 Z"); }
    50%  { d: path("M -90 210 C 70 160 140 330 275 380 C 400 426 440 520 550 580 C 655 637 730 690 845 740 L 845 995 C 720 945 650 890 545 833 C 430 771 395 676 275 630 C 140 580 70 415 -90 465 Z"); }
    75%  { d: path("M -90 270 C 80 145 170 285 300 300 C 425 315 415 490 530 555 C 640 617 700 620 845 680 L 845 935 C 705 875 645 872 535 810 C 420 745 425 570 300 555 C 170 540 80 400 -90 525 Z"); }
    100% { d: path("M -90 240 C 60 130 150 300 280 340 C 400 377 430 500 540 545 C 640 585 720 660 845 700 L 845 955 C 700 915 630 830 530 795 C 420 757 400 630 280 590 C 150 547 60 385 -90 495 Z"); }
}

@keyframes bl-ribbon-edge {
    0%   { d: path("M -90 240 C 60 130 150 300 280 340 C 400 377 430 500 540 545 C 640 585 720 660 845 700"); }
    25%  { d: path("M -90 300 C 50 210 160 250 290 320 C 410 385 420 470 545 520 C 650 562 710 640 845 660"); }
    50%  { d: path("M -90 210 C 70 160 140 330 275 380 C 400 426 440 520 550 580 C 655 637 730 690 845 740"); }
    75%  { d: path("M -90 270 C 80 145 170 285 300 300 C 425 315 415 490 530 555 C 640 617 700 620 845 680"); }
    100% { d: path("M -90 240 C 60 130 150 300 280 340 C 400 377 430 500 540 545 C 640 585 720 660 845 700"); }
}

@keyframes bl-drift-a {
    0% { opacity: 0; } 18% { opacity: .35; } 38% { opacity: .85; } 58% { opacity: .2; } 100% { opacity: 0; }
}

@keyframes bl-drift-b {
    0% { opacity: 0; } 44% { opacity: .12; } 72% { opacity: .8; } 92% { opacity: .2; } 100% { opacity: 0; }
}

@keyframes bl-spec-drift-a {
    0% { transform: translate(0, 0); } 33% { transform: translate(26px, -16px); } 66% { transform: translate(-14px, 18px); } 100% { transform: translate(0, 0); }
}

@keyframes bl-spec-drift-b {
    0% { transform: translate(0, 0); } 30% { transform: translate(-20px, 14px); } 70% { transform: translate(18px, -12px); } 100% { transform: translate(0, 0); }
}

/* Bez animací smyčka zamrzne v hezkém místě uprostřed pohybu,
   stejně jako v původním návrhu. */
@media (prefers-reduced-motion: reduce) {
    .brand-loop * {
        animation-play-state: paused !important;
        animation-delay: -2s !important;
    }
}


/* ======================= SMYČKA VÝSLEDKŮ PRO SEO ==========================
   Karta SEO a viditelnost na homepage. Vygenerováno z Filipova návrhu
   (SEO Results Loop.html), viz components/seo-loop.php; ručně needitovat,
   kromě bloku proměnných níže a čtyř pravidel upravených pro nové texty:
   sl-e4 a sl-e6 (číslo 50 000+ s popiskem) a sl-e13 a sl-e14 (popisek
   PageSpeed Desktop). U nich musí rozměry v procentech držet stejný poměr
   stran jako viewBox v šabloně. Třídy sl-e* jsou přeložené vložené styly
   návrhu, protože CSP nepovoluje unsafe-inline.
   ========================================================================== */

.seo-loop{
    /* barvy jdou z tokenů, zbytek jsou parametry artworku */
    --sl-accent: var(--red);
    --sl-ink: var(--text-on-dark);
    --sl-muted: #B4B4B8;
    --sl-card-1a: #14040B;
    --sl-card-1b: #4A0016;
    --sl-card-2a: #121014;
    --sl-card-2b: #241018;
    --sl-chart-bg: #000000;
    --sl-font: var(--font-body);
    --sl-loop: 8s;
    --sl-radius: 1.6cqw;
    --sl-ease-reveal: cubic-bezier(.33, 1, .68, 1);
    --sl-ease-draw: cubic-bezier(.65, 0, .35, 1);
    --sl-wipe-x: linear-gradient(90deg, transparent 0 33.333%, #000 42%, #000 100%);
    --sl-wipe-y: linear-gradient(180deg, transparent 0 33.333%, #000 42%, #000 100%);
}







.seo-loop{
    position:relative;
    container-type:inline-size;
    width:100%;
    aspect-ratio:1480 / 1090;
}


.sl-card{position:absolute;overflow:hidden;border-radius:var(--sl-radius)}
.sl-c1{background:linear-gradient(90deg,var(--sl-card-1a) 0%,var(--sl-card-1b) 100%)}
.sl-c2{background:linear-gradient(90deg,var(--sl-card-2a) 0%,var(--sl-card-2b) 100%)}
.sl-c3{background:var(--sl-chart-bg)}

.sl-lyr{position:absolute;display:block;overflow:visible}
.sl-grid,.sl-curvelayer,.sl-ringlayer,.sl-barlayer,.sl-markerlayer{left:0;top:0;width:100%;height:100%}

.sl-wipe-h,.sl-wipe-y{
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.sl-wipe-h{-webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-position:0% 0;mask-position:0% 0}
.sl-wipe-y{-webkit-mask-size:100% 300%;mask-size:100% 300%;-webkit-mask-position:0% 0%;mask-position:0% 0%}

.sl-wipe-h,.sl-wipe-y,.sl-bar,.sl-curve,.sl-dot-start,.sl-dot-end,.sl-ring-track,.sl-ring-arc,.sl-markerlayer{
  animation-duration:var(--sl-loop);
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  animation-fill-mode:both;
}
.sl-bar{transform-box:fill-box;transform-origin:50% 100%}
.sl-curve{animation-name:sl-a-curve;stroke-dasharray:1}
.sl-dot-start{animation-name:sl-a-dotstart;transform-box:fill-box;transform-origin:center}
.sl-dot-end{animation-name:sl-a-dotend;transform-box:fill-box;transform-origin:center}
.sl-ring-track{animation-name:sl-a-ringtrack}
.sl-ring-arc{animation-name:sl-a-ringarc}
.sl-markerlayer{animation-name:sl-a-markertext}

@media (prefers-reduced-motion:reduce){
  .sl-wipe-h,.sl-wipe-y,.sl-bar,.sl-curve,.sl-dot-start,.sl-dot-end,.sl-ring-track,.sl-ring-arc,.sl-markerlayer{
    animation-delay:calc(var(--sl-loop) / -1.6);
    animation-play-state:paused;
  }
}

@keyframes sl-a-headline{0%{-webkit-mask-position:0% 0;mask-position:0% 0;}0%{-webkit-mask-position:0% 0;mask-position:0% 0;animation-timing-function:cubic-bezier(0.33,1,0.68,1);}15%{-webkit-mask-position:100% 0;mask-position:100% 0;}80%{-webkit-mask-position:100% 0;mask-position:100% 0;animation-timing-function:cubic-bezier(0.33,1,0.68,1);}86.875%{-webkit-mask-position:0% 0;mask-position:0% 0;}100%{-webkit-mask-position:0% 0;mask-position:0% 0;}}@keyframes sl-a-sublabel{0%{-webkit-mask-position:0% 0;mask-position:0% 0;}6.875%{-webkit-mask-position:0% 0;mask-position:0% 0;animation-timing-function:cubic-bezier(0.33,1,0.68,1);}22.5%{-webkit-mask-position:100% 0;mask-position:100% 0;}80.625%{-webkit-mask-position:100% 0;mask-position:100% 0;animation-timing-function:cubic-bezier(0.33,1,0.68,1);}87.5%{-webkit-mask-position:0% 0;mask-position:0% 0;}100%{-webkit-mask-position:0% 0;mask-position:0% 0;}}@keyframes sl-a-yaxis{0%{-webkit-mask-position:0% 0;mask-position:0% 0;}0%{-webkit-mask-position:0% 0;mask-position:0% 0;animation-timing-function:cubic-bezier(0.33,1,0.68,1);}12.5%{-webkit-mask-position:100% 0;mask-position:100% 0;}81.25%{-webkit-mask-position:100% 0;mask-position:100% 0;animation-timing-function:cubic-bezier(0.33,1,0.68,1);}88.125%{-webkit-mask-position:0% 0;mask-position:0% 0;}100%{-webkit-mask-position:0% 0;mask-position:0% 0;}}@keyframes sl-a-xlabels{0%{-webkit-mask-position:0% 0;mask-position:0% 0;}0%{-webkit-mask-position:0% 0;mask-position:0% 0;animation-timing-function:cubic-bezier(0.33,1,0.68,1);}14.375%{-webkit-mask-position:100% 0;mask-position:100% 0;}81.25%{-webkit-mask-position:100% 0;mask-position:100% 0;animation-timing-function:cubic-bezier(0.33,1,0.68,1);}88.125%{-webkit-mask-position:0% 0;mask-position:0% 0;}100%{-webkit-mask-position:0% 0;mask-position:0% 0;}}@keyframes sl-a-metricnum{0%{-webkit-mask-position:0% 0;mask-position:0% 0;}10.625%{-webkit-mask-position:0% 0;mask-position:0% 0;animation-timing-function:cubic-bezier(0.33,1,0.68,1);}23.75%{-webkit-mask-position:100% 0;mask-position:100% 0;}80%{-webkit-mask-position:100% 0;mask-position:100% 0;animation-timing-function:cubic-bezier(0.33,1,0.68,1);}86.875%{-webkit-mask-position:0% 0;mask-position:0% 0;}100%{-webkit-mask-position:0% 0;mask-position:0% 0;}}@keyframes sl-a-metriclab{0%{-webkit-mask-position:0% 0;mask-position:0% 0;}10.625%{-webkit-mask-position:0% 0;mask-position:0% 0;animation-timing-function:cubic-bezier(0.33,1,0.68,1);}24.375%{-webkit-mask-position:100% 0;mask-position:100% 0;}80.25%{-webkit-mask-position:100% 0;mask-position:100% 0;animation-timing-function:cubic-bezier(0.33,1,0.68,1);}87.125%{-webkit-mask-position:0% 0;mask-position:0% 0;}100%{-webkit-mask-position:0% 0;mask-position:0% 0;}}@keyframes sl-a-dots{0%{-webkit-mask-position:0% 0%;mask-position:0% 0%;}16.875%{-webkit-mask-position:0% 0%;mask-position:0% 0%;animation-timing-function:cubic-bezier(0.33,1,0.68,1);}21.875%{-webkit-mask-position:0% 100%;mask-position:0% 100%;}81.875%{-webkit-mask-position:0% 100%;mask-position:0% 100%;animation-timing-function:cubic-bezier(0.33,1,0.68,1);}86.875%{-webkit-mask-position:0% 0%;mask-position:0% 0%;}100%{-webkit-mask-position:0% 0%;mask-position:0% 0%;}}@keyframes sl-a-markertext{0%{opacity:0;}23.125%{opacity:0;animation-timing-function:cubic-bezier(0.33,1,0.68,1);}27.5%{opacity:1;}78.75%{opacity:1;animation-timing-function:cubic-bezier(0.33,1,0.68,1);}81.875%{opacity:0;}100%{opacity:0;}}@keyframes sl-a-curve{0%{stroke-dashoffset:1;}28.125%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(0.65,0,0.35,1);}49.375%{stroke-dashoffset:0;}77.75%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(0.65,0,0.35,1);}83.75%{stroke-dashoffset:1;}100%{stroke-dashoffset:1;}}@keyframes sl-a-dotstart{0%{opacity:0;transform:scale(.3);}26.875%{opacity:0;transform:scale(.3);animation-timing-function:cubic-bezier(0.33,1,0.68,1);}30%{opacity:1;transform:scale(1);}82.5%{opacity:1;transform:scale(1);animation-timing-function:cubic-bezier(0.33,1,0.68,1);}84%{opacity:0;transform:scale(.3);}100%{opacity:0;transform:scale(.3);}}@keyframes sl-a-dotend{0%{opacity:0;transform:scale(.3);}48.75%{opacity:0;transform:scale(.3);animation-timing-function:cubic-bezier(0.33,1,0.68,1);}51.875%{opacity:1;transform:scale(1);}77.5%{opacity:1;transform:scale(1);animation-timing-function:cubic-bezier(0.33,1,0.68,1);}79%{opacity:0;transform:scale(.3);}100%{opacity:0;transform:scale(.3);}}@keyframes sl-a-ringtrack{0%{opacity:0;}35.625%{opacity:0;animation-timing-function:cubic-bezier(0.33,1,0.68,1);}38.75%{opacity:1;}77.5%{opacity:1;animation-timing-function:cubic-bezier(0.33,1,0.68,1);}81.25%{opacity:0;}100%{opacity:0;}}@keyframes sl-a-ringarc{0%{stroke-dashoffset:0.99;}35.625%{stroke-dashoffset:0.99;animation-timing-function:cubic-bezier(0.65,0,0.35,1);}54.375%{stroke-dashoffset:0;}77.5%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(0.65,0,0.35,1);}82.5%{stroke-dashoffset:0.99;}100%{stroke-dashoffset:0.99;}}@keyframes sl-a-bar0{0%{transform:scaleY(0);}4.375%{transform:scaleY(0);animation-timing-function:cubic-bezier(0.33,1,0.68,1);}8.75%{transform:scaleY(1);}86%{transform:scaleY(1);animation-timing-function:cubic-bezier(0.33,1,0.68,1);}88.75%{transform:scaleY(0);}100%{transform:scaleY(0);}}.sl-barlayer .sl-b0{animation-name:sl-a-bar0}@keyframes sl-a-bar1{0%{transform:scaleY(0);}6.875%{transform:scaleY(0);animation-timing-function:cubic-bezier(0.33,1,0.68,1);}11.25%{transform:scaleY(1);}86.15%{transform:scaleY(1);animation-timing-function:cubic-bezier(0.33,1,0.68,1);}88.75%{transform:scaleY(0);}100%{transform:scaleY(0);}}.sl-barlayer .sl-b1{animation-name:sl-a-bar1}@keyframes sl-a-bar2{0%{transform:scaleY(0);}9.375%{transform:scaleY(0);animation-timing-function:cubic-bezier(0.33,1,0.68,1);}13.75%{transform:scaleY(1);}86.3%{transform:scaleY(1);animation-timing-function:cubic-bezier(0.33,1,0.68,1);}88.75%{transform:scaleY(0);}100%{transform:scaleY(0);}}.sl-barlayer .sl-b2{animation-name:sl-a-bar2}@keyframes sl-a-bar3{0%{transform:scaleY(0);}10.625%{transform:scaleY(0);animation-timing-function:cubic-bezier(0.33,1,0.68,1);}15%{transform:scaleY(1);}86.45%{transform:scaleY(1);animation-timing-function:cubic-bezier(0.33,1,0.68,1);}88.75%{transform:scaleY(0);}100%{transform:scaleY(0);}}.sl-barlayer .sl-b3{animation-name:sl-a-bar3}@keyframes sl-a-bar4{0%{transform:scaleY(0);}19.375%{transform:scaleY(0);animation-timing-function:cubic-bezier(0.33,1,0.68,1);}23.75%{transform:scaleY(1);}86.6%{transform:scaleY(1);animation-timing-function:cubic-bezier(0.33,1,0.68,1);}88.75%{transform:scaleY(0);}100%{transform:scaleY(0);}}.sl-barlayer .sl-b4{animation-name:sl-a-bar4}@keyframes sl-a-bar5{0%{transform:scaleY(0);}23.125%{transform:scaleY(0);animation-timing-function:cubic-bezier(0.33,1,0.68,1);}27.5%{transform:scaleY(1);}86.75%{transform:scaleY(1);animation-timing-function:cubic-bezier(0.33,1,0.68,1);}88.75%{transform:scaleY(0);}100%{transform:scaleY(0);}}.sl-barlayer .sl-b5{animation-name:sl-a-bar5}@keyframes sl-a-bar6{0%{transform:scaleY(0);}25.625%{transform:scaleY(0);animation-timing-function:cubic-bezier(0.33,1,0.68,1);}30%{transform:scaleY(1);}86.9%{transform:scaleY(1);animation-timing-function:cubic-bezier(0.33,1,0.68,1);}88.75%{transform:scaleY(0);}100%{transform:scaleY(0);}}.sl-barlayer .sl-b6{animation-name:sl-a-bar6}@keyframes sl-a-bar7{0%{transform:scaleY(0);}28.125%{transform:scaleY(0);animation-timing-function:cubic-bezier(0.33,1,0.68,1);}32.5%{transform:scaleY(1);}87.05%{transform:scaleY(1);animation-timing-function:cubic-bezier(0.33,1,0.68,1);}88.75%{transform:scaleY(0);}100%{transform:scaleY(0);}}.sl-barlayer .sl-b7{animation-name:sl-a-bar7}@keyframes sl-a-bar8{0%{transform:scaleY(0);}30.625%{transform:scaleY(0);animation-timing-function:cubic-bezier(0.33,1,0.68,1);}35%{transform:scaleY(1);}87.2%{transform:scaleY(1);animation-timing-function:cubic-bezier(0.33,1,0.68,1);}88.75%{transform:scaleY(0);}100%{transform:scaleY(0);}}.sl-barlayer .sl-b8{animation-name:sl-a-bar8}@keyframes sl-a-bar9{0%{transform:scaleY(0);}33.125%{transform:scaleY(0);animation-timing-function:cubic-bezier(0.33,1,0.68,1);}37.5%{transform:scaleY(1);}87.35%{transform:scaleY(1);animation-timing-function:cubic-bezier(0.33,1,0.68,1);}88.75%{transform:scaleY(0);}100%{transform:scaleY(0);}}.sl-barlayer .sl-b9{animation-name:sl-a-bar9}@keyframes sl-a-bar10{0%{transform:scaleY(0);}35.625%{transform:scaleY(0);animation-timing-function:cubic-bezier(0.33,1,0.68,1);}40%{transform:scaleY(1);}87.5%{transform:scaleY(1);animation-timing-function:cubic-bezier(0.33,1,0.68,1);}88.75%{transform:scaleY(0);}100%{transform:scaleY(0);}}.sl-barlayer .sl-b10{animation-name:sl-a-bar10}

.sl-e1 { left:2.4%;width:71.019%;top:2.4%;height:33.13% }
.sl-e2 { left:0%;top:0%;width:100%;height:100% }
.sl-e3 { left:0%;top:0%;width:100%;height:100% }
.sl-e4 { left:1.158%;top:66.77%;width:31.396%;height:27.894%;-webkit-mask-image:var(--sl-wipe-x);mask-image:var(--sl-wipe-x);animation-name:sl-a-headline }
.sl-e5 { font:700 80.583px var(--sl-font);letter-spacing:-0.018em;fill:var(--sl-ink) }
.sl-e6 { left:32.538%;top:62.753%;width:66.891%;height:28.452%;-webkit-mask-image:var(--sl-wipe-x);mask-image:var(--sl-wipe-x);animation-name:sl-a-sublabel }
.sl-e7 { font:500 40.292px var(--sl-font);fill:var(--sl-ink) }
.sl-e8 { font:500 40.292px var(--sl-font);fill:var(--sl-ink) }
.sl-e9 { left:76.466%;width:21.134%;top:2.4%;height:33.13% }
.sl-e10 { left:0%;top:0%;width:100%;height:100% }
.sl-e11 { left:26.5%;top:18.645%;width:47%;height:40.711%;-webkit-mask-image:var(--sl-wipe-x);mask-image:var(--sl-wipe-x);animation-name:sl-a-metricnum }
.sl-e12 { font:300 71.763px var(--sl-font);letter-spacing:-0.02em;fill:var(--sl-ink) }
.sl-e13 { left:2.558%;top:63.138%;width:94.885%;height:33.231%;-webkit-mask-image:var(--sl-wipe-x);mask-image:var(--sl-wipe-x);animation-name:sl-a-metriclab }
.sl-e14 { font:600 44px var(--sl-font);letter-spacing:0.01em;fill:var(--sl-ink) }
.sl-e15 { left:2.4%;width:95.2%;top:40.099%;height:57.501% }
.sl-e16 { left:0.568%;top:7.339%;width:6.388%;height:72.852%;-webkit-mask-image:var(--sl-wipe-x);mask-image:var(--sl-wipe-x);animation-name:sl-a-yaxis }
.sl-e17 { font:500 19px var(--sl-font);letter-spacing:0.09em;fill:var(--sl-muted) }
.sl-e18 { font:500 19px var(--sl-font);letter-spacing:0.09em;fill:var(--sl-muted) }
.sl-e19 { font:500 19px var(--sl-font);letter-spacing:0.09em;fill:var(--sl-muted) }
.sl-e20 { font:500 19px var(--sl-font);letter-spacing:0.09em;fill:var(--sl-muted) }
.sl-e21 { font:500 19px var(--sl-font);letter-spacing:0.09em;fill:var(--sl-muted) }
.sl-e22 { font:500 19px var(--sl-font);letter-spacing:0.09em;fill:var(--sl-muted) }
.sl-e23 { left:6.284%;top:79.234%;width:91.131%;height:8.297%;-webkit-mask-image:var(--sl-wipe-x);mask-image:var(--sl-wipe-x);animation-name:sl-a-xlabels }
.sl-e24 { font:500 19px var(--sl-font);letter-spacing:0.09em;fill:var(--sl-muted) }
.sl-e25 { font:500 19px var(--sl-font);letter-spacing:0.09em;fill:var(--sl-muted) }
.sl-e26 { font:500 19px var(--sl-font);letter-spacing:0.09em;fill:var(--sl-muted) }
.sl-e27 { font:500 19px var(--sl-font);letter-spacing:0.09em;fill:var(--sl-muted) }
.sl-e28 { font:500 19px var(--sl-font);letter-spacing:0.09em;fill:var(--sl-muted) }
.sl-e29 { font:500 19px var(--sl-font);letter-spacing:0.09em;fill:var(--sl-muted) }
.sl-e30 { font:500 19px var(--sl-font);letter-spacing:0.09em;fill:var(--sl-muted) }
.sl-e31 { font:500 19px var(--sl-font);letter-spacing:0.09em;fill:var(--sl-muted) }
.sl-e32 { font:500 19px var(--sl-font);letter-spacing:0.09em;fill:var(--sl-muted) }
.sl-e33 { font:500 19px var(--sl-font);letter-spacing:0.09em;fill:var(--sl-muted) }
.sl-e34 { font:500 19px var(--sl-font);letter-spacing:0.09em;fill:var(--sl-muted) }
.sl-e35 { left:38.683%;top:44.743%;width:1.703%;height:32.735%;-webkit-mask-image:var(--sl-wipe-y);mask-image:var(--sl-wipe-y);animation-name:sl-a-dots }
.sl-e36 { left:0%;top:0%;width:100%;height:100% }
.sl-e37 { font:500 17px var(--sl-font);letter-spacing:0.14em;fill:var(--sl-muted) }
.sl-e38 { left:0%;top:0%;width:100%;height:100% }

/* ===================== SMYČKA NÁVRHU A TVORBY WEBU ========================
   Karta Návrh a tvorba webu na homepage. Web v okně prohlížeče, který se
   přeskládá z desktopu na tablet a na telefon. Vygenerováno z Filipova
   návrhu, viz components/web-loop.php; ručně needitovat kromě proměnných
   níže. Třídy wl-* jsou z návrhu, jen s předponou proti kolizím.
   ========================================================================= */

.web-loop{
    --wl-loop: 12s;
}
.web-loop{
    position: relative;
    container-type: inline-size;
    aspect-ratio: 1480 / 1090;
    background: var(--bg);
}

.wl-desk{position:absolute;inset:2.4cqw;border-radius:1.4cqw;overflow:hidden;
 background:radial-gradient(120% 90% at 50% 12%,#1B1E1F 0%,var(--panel-dark) 55%,#101212 100%);container-type:inline-size}
.wl-win{position:absolute;left:3cqw;top:6cqw;width:94cqw;height:60.3cqw;transform-origin:0 0;
 border-radius:0.8cqw;overflow:hidden;background:var(--panel-dark-2);
 box-shadow:0 2cqw 5cqw rgba(0,0,0,0.45);animation-name:wl-k-win}
.wl-page{position:absolute;inset:0;transform-origin:0 0;animation-name:wl-k-page}
.wl-el{position:absolute;transform-origin:0 0}
.wl-c-bar{background:var(--panel-dark-2);box-shadow:inset 0 1px 0 var(--border-on-dark)}
.wl-c-dot{border-radius:50%;background:rgba(255,255,255,0.22)}
.wl-c-pill{border-radius:0.7cqw;background:rgba(255,255,255,0.07)}
.wl-c-addr{font-family:var(--font-body);font-weight:600;font-size:2.3cqw;line-height:1;
 letter-spacing:-0.02em;color:rgba(255,255,255,0.72);white-space:nowrap}
.wl-dot{color:var(--red)}
.wl-p-body{background:var(--surface)}
.wl-n-logo{background:var(--red);border-radius:0.4cqw}
.wl-n-rule{background:rgba(0,0,0,0.11)}
.wl-n-btn{border-radius:0.6cqw;box-shadow:inset 0 0 0 2px var(--red)}
.wl-n-fill{position:absolute;inset:0;border-radius:0.6cqw;background:var(--red);animation-name:wl-k-fill}
.wl-n-lab{background:var(--red);border-radius:0.2cqw}
.wl-nvb{z-index:6;background:rgba(0,0,0,0.62);border-radius:0.2cqw}
.wl-h-1,.wl-h-2{background:rgba(0,0,0,0.9);border-radius:0.25cqw}
.wl-h-3{background:rgba(0,0,0,0.32);border-radius:0.2cqw}
.wl-cd{position:absolute;transform-origin:0 0;background:var(--surface);border-radius:0.7cqw;
 box-shadow:0 0.45cqw 1.3cqw rgba(0,0,0,0.13),inset 0 0 0 1.6px rgba(0,0,0,0.09)}
.wl-cimg{position:absolute;left:0;top:0;width:27.2cqw;height:6.4cqw;border-radius:0.55cqw;overflow:hidden}
.wl-ink{position:absolute;inset:0}
.wl-chead{position:absolute;left:1.4cqw;top:7.4cqw;width:18cqw;height:1.6cqw;
 background:rgba(0,0,0,0.84);border-radius:0.2cqw}
.wl-cmeta{position:absolute;left:1.4cqw;top:9.9cqw;width:9cqw;height:1cqw;
 background:rgba(0,0,0,0.28);border-radius:0.2cqw}
.wl-i0{background:linear-gradient(60deg,var(--orange),var(--red),var(--purple));animation-name:wl-k-drift}
.wl-i1{background:linear-gradient(140deg,var(--purple),var(--red),var(--orange));animation-name:wl-k-ink1}
.wl-i2{background:linear-gradient(24deg,var(--red),var(--purple))}
.wl-i3{background:linear-gradient(200deg,var(--orange),var(--red))}
.wl-i4{background:linear-gradient(320deg,var(--purple),var(--pink),var(--orange))}
.wl-i5{background:linear-gradient(96deg,var(--red),var(--purple),var(--orange))}
.wl-shadow{position:absolute;left:33.4cqw;top:32cqw;width:27.2cqw;height:12.15cqw;border-radius:0.7cqw;
 box-shadow:0 1.4cqw 3cqw rgba(0,0,0,0.28);animation-name:wl-k-shadow}
.wl-ring{position:absolute;left:78.4cqw;top:6.5cqw;width:12.7cqw;height:6.4cqw;border-radius:0.9cqw;
 box-shadow:0 0 0 2.4px var(--red);opacity:0;animation-name:wl-k-ring;transform-origin:50% 50%}
.wl-menu{z-index:5;position:absolute;left:26cqw;top:12.6cqw;width:42cqw;height:16cqw;background:var(--surface);
 border-radius:0.8cqw;transform-origin:50% 0;
 box-shadow:0 1.2cqw 3cqw rgba(0,0,0,0.22),inset 0 0 0 1.6px rgba(0,0,0,0.09);animation-name:wl-k-menu}
.wl-cursor{z-index:8;position:absolute;left:0;top:0;width:3.4cqw;height:3.4cqw;transform-origin:0 0;animation-name:wl-k-cur}
.wl-cursor svg{display:block;width:100%;height:100%}
.wl-gv{position:absolute;top:0;width:0.16cqw;height:100%;background:var(--red);transform-origin:0 0}
.wl-gvl{left:3cqw;animation-name:wl-k-gvl}
.wl-gvr{left:96.84cqw;animation-name:wl-k-gvr}
.wl-gh{position:absolute;left:0;top:6cqw;width:100%;height:0.16cqw;background:var(--red);
 transform-origin:0 0;animation-name:wl-k-gh}
.wl-an{animation-duration:var(--wl-loop);animation-timing-function:linear;
 animation-iteration-count:infinite;animation-fill-mode:both}
@media (prefers-reduced-motion:reduce){.wl-an{animation-delay:-1.5s;animation-play-state:paused}}
@keyframes wl-k-win{0%{transform:translate(0cqw,0cqw) scale(1,1);animation-timing-function:linear;}51.658%{transform:translate(0cqw,0cqw) scale(1,1);animation-timing-function:linear;}51.667%{transform:translate(0cqw,0cqw) scale(1,1);animation-timing-function:linear;}52.708%{transform:translate(0.639cqw,-0.248cqw) scale(0.986,1.008);animation-timing-function:linear;}53.75%{transform:translate(4.5cqw,-1.75cqw) scale(0.904,1.058);animation-timing-function:linear;}54.792%{transform:translate(8.361cqw,-3.251cqw) scale(0.822,1.108);animation-timing-function:linear;}55.833%{transform:translate(9cqw,-3.5cqw) scale(0.809,1.116);animation-timing-function:linear;}76.658%{transform:translate(9cqw,-3.5cqw) scale(0.809,1.116);animation-timing-function:linear;}76.667%{transform:translate(9cqw,-3.5cqw) scale(0.809,1.116);animation-timing-function:linear;}77.708%{transform:translate(9.994cqw,-3.5cqw) scale(0.787,1.116);animation-timing-function:linear;}78.75%{transform:translate(16cqw,-3.5cqw) scale(0.66,1.116);animation-timing-function:linear;}79.792%{transform:translate(22.006cqw,-3.5cqw) scale(0.532,1.116);animation-timing-function:linear;}80.833%{transform:translate(23cqw,-3.5cqw) scale(0.511,1.116);animation-timing-function:linear;}95.825%{transform:translate(23cqw,-3.5cqw) scale(0.511,1.116);animation-timing-function:linear;}95.833%{transform:translate(23cqw,-3.5cqw) scale(0.511,1.116);animation-timing-function:linear;}96.875%{transform:translate(21.367cqw,-3.251cqw) scale(0.545,1.108);animation-timing-function:linear;}97.917%{transform:translate(11.5cqw,-1.75cqw) scale(0.755,1.058);animation-timing-function:linear;}98.958%{transform:translate(1.633cqw,-0.248cqw) scale(0.965,1.008);animation-timing-function:linear;}100%{transform:translate(0cqw,0cqw) scale(1,1);animation-timing-function:linear;}}
@keyframes wl-k-page{0%{transform:scale(1,1) translate(0cqw,0cqw);animation-timing-function:linear;}51.658%{transform:scale(1,1) translate(0cqw,0cqw);animation-timing-function:linear;}51.667%{transform:scale(1,1) translate(0cqw,0cqw);animation-timing-function:linear;}52.708%{transform:scale(1.014,0.992) translate(-0.639cqw,0.248cqw);animation-timing-function:linear;}53.75%{transform:scale(1.106,0.945) translate(-4.5cqw,1.75cqw);animation-timing-function:linear;}54.792%{transform:scale(1.216,0.903) translate(-8.361cqw,3.252cqw);animation-timing-function:linear;}55.833%{transform:scale(1.237,0.896) translate(-9cqw,3.5cqw);animation-timing-function:linear;}76.658%{transform:scale(1.237,0.896) translate(-9cqw,3.5cqw);animation-timing-function:linear;}76.667%{transform:scale(1.237,0.896) translate(-9cqw,3.5cqw);animation-timing-function:linear;}77.708%{transform:scale(1.27,0.896) translate(-9.994cqw,3.5cqw);animation-timing-function:linear;}78.75%{transform:scale(1.516,0.896) translate(-16cqw,3.5cqw);animation-timing-function:linear;}79.792%{transform:scale(1.88,0.896) translate(-22.006cqw,3.5cqw);animation-timing-function:linear;}80.833%{transform:scale(1.958,0.896) translate(-23cqw,3.5cqw);animation-timing-function:linear;}95.825%{transform:scale(1.958,0.896) translate(-23cqw,3.5cqw);animation-timing-function:linear;}95.833%{transform:scale(1.958,0.896) translate(-23cqw,3.5cqw);animation-timing-function:linear;}96.875%{transform:scale(1.834,0.903) translate(-21.367cqw,3.252cqw);animation-timing-function:linear;}97.917%{transform:scale(1.324,0.945) translate(-11.5cqw,1.75cqw);animation-timing-function:linear;}98.958%{transform:scale(1.036,0.992) translate(-1.633cqw,0.248cqw);animation-timing-function:linear;}100%{transform:scale(1,1) translate(0cqw,0cqw);animation-timing-function:linear;}}
@keyframes wl-k-e0{0%{transform:translate(0cqw,0cqw) scale(1,1);}51.667%{transform:translate(0cqw,0cqw) scale(1,1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}55.833%{transform:translate(9cqw,-3.5cqw) scale(0.809,1);}76.667%{transform:translate(9cqw,-3.5cqw) scale(0.809,1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}80.833%{transform:translate(23cqw,-3.5cqw) scale(0.511,1);}95.833%{transform:translate(23cqw,-3.5cqw) scale(0.511,1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}100%{transform:translate(0cqw,0cqw) scale(1,1);}}
.wl-c-bar{left:0cqw;top:0cqw;width:94cqw;height:6cqw;animation-name:wl-k-e0}
@keyframes wl-k-e1{0%{transform:translate(0cqw,0cqw) scale(1,1);}51.667%{transform:translate(0cqw,0cqw) scale(1,1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}55.833%{transform:translate(9cqw,-3.5cqw) scale(1,1);}76.667%{transform:translate(9cqw,-3.5cqw) scale(1,1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}80.833%{transform:translate(23cqw,-3.5cqw) scale(1,1);}95.833%{transform:translate(23cqw,-3.5cqw) scale(1,1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}100%{transform:translate(0cqw,0cqw) scale(1,1);}}
.wl-d0{left:3cqw;top:2.4cqw;width:1.1cqw;height:1.1cqw;animation-name:wl-k-e1}
@keyframes wl-k-e2{0%{transform:translate(0cqw,0cqw) scale(1,1);}51.667%{transform:translate(0cqw,0cqw) scale(1,1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}55.833%{transform:translate(9cqw,-3.5cqw) scale(1,1);}76.667%{transform:translate(9cqw,-3.5cqw) scale(1,1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}80.833%{transform:translate(23cqw,-3.5cqw) scale(1,1);}95.833%{transform:translate(23cqw,-3.5cqw) scale(1,1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}100%{transform:translate(0cqw,0cqw) scale(1,1);}}
.wl-d1{left:5.1cqw;top:2.4cqw;width:1.1cqw;height:1.1cqw;animation-name:wl-k-e2}
@keyframes wl-k-e3{0%{transform:translate(0cqw,0cqw) scale(1,1);}51.667%{transform:translate(0cqw,0cqw) scale(1,1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}55.833%{transform:translate(9cqw,-3.5cqw) scale(1,1);}76.667%{transform:translate(9cqw,-3.5cqw) scale(1,1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}80.833%{transform:translate(23cqw,-3.5cqw) scale(1,1);}95.833%{transform:translate(23cqw,-3.5cqw) scale(1,1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}100%{transform:translate(0cqw,0cqw) scale(1,1);}}
.wl-d2{left:7.2cqw;top:2.4cqw;width:1.1cqw;height:1.1cqw;animation-name:wl-k-e3}
@keyframes wl-k-e4{0%{transform:translate(0cqw,0cqw) scale(1,1);}51.667%{transform:translate(0cqw,0cqw) scale(1,1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}55.833%{transform:translate(9cqw,-3.5cqw) scale(0.765,1);}76.667%{transform:translate(9cqw,-3.5cqw) scale(0.765,1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}80.833%{transform:translate(23cqw,-3.5cqw) scale(0.471,1);}95.833%{transform:translate(23cqw,-3.5cqw) scale(0.471,1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}100%{transform:translate(0cqw,0cqw) scale(1,1);}}
.wl-c-pill{left:12cqw;top:1.4cqw;width:34cqw;height:3.2cqw;animation-name:wl-k-e4}
@keyframes wl-k-e5{0%{transform:translate(0cqw,0cqw) scale(1,1);}51.667%{transform:translate(0cqw,0cqw) scale(1,1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}55.833%{transform:translate(9cqw,-3.5cqw) scale(1,1);}76.667%{transform:translate(9cqw,-3.5cqw) scale(1,1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}80.833%{transform:translate(23cqw,-3.5cqw) scale(1,1);}95.833%{transform:translate(23cqw,-3.5cqw) scale(1,1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}100%{transform:translate(0cqw,0cqw) scale(1,1);}}
.wl-c-addr{left:14.5cqw;top:1.85cqw;width:10cqw;height:2.3cqw;animation-name:wl-k-e5}
@keyframes wl-k-e6{0%{transform:translate(0cqw,0cqw) scale(1,1);}51.667%{transform:translate(0cqw,0cqw) scale(1,1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}55.833%{transform:translate(9cqw,-3.5cqw) scale(0.809,1.129);}76.667%{transform:translate(9cqw,-3.5cqw) scale(0.809,1.129);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}80.833%{transform:translate(23cqw,-3.5cqw) scale(0.511,1.129);}95.833%{transform:translate(23cqw,-3.5cqw) scale(0.511,1.129);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}100%{transform:translate(0cqw,0cqw) scale(1,1);}}
.wl-p-body{left:0cqw;top:6cqw;width:94cqw;height:54.3cqw;animation-name:wl-k-e6}
@keyframes wl-k-e7{0%{transform:translate(0cqw,0cqw) scale(1,1);}51.667%{transform:translate(0cqw,0cqw) scale(1,1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}55.833%{transform:translate(8.5cqw,-3cqw) scale(1.143,1.143);}76.667%{transform:translate(8.5cqw,-3cqw) scale(1.143,1.143);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}80.833%{transform:translate(22cqw,-3.2cqw) scale(1.5,1.5);}95.833%{transform:translate(22cqw,-3.2cqw) scale(1.5,1.5);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}100%{transform:translate(0cqw,0cqw) scale(1,1);}}
.wl-n-logo{left:4cqw;top:8.2cqw;width:2.8cqw;height:2.8cqw;animation-name:wl-k-e7}
@keyframes wl-k-e8{0%{transform:translate(0cqw,0cqw) scale(1,1);}51.667%{transform:translate(0cqw,0cqw) scale(1,1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}55.833%{transform:translate(9cqw,-3cqw) scale(0.809,1);}76.667%{transform:translate(9cqw,-3cqw) scale(0.809,1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}80.833%{transform:translate(23cqw,-1.5cqw) scale(0.511,1);}95.833%{transform:translate(23cqw,-1.5cqw) scale(0.511,1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}100%{transform:translate(0cqw,0cqw) scale(1,1);}}
.wl-n-rule{left:0cqw;top:13.5cqw;width:94cqw;height:0.25cqw;animation-name:wl-k-e8}
@keyframes wl-k-e9{0%{transform:translate(0cqw,0cqw) scale(1,1);}51.667%{transform:translate(0cqw,0cqw) scale(1,1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}55.833%{transform:translate(-7.5cqw,-3.1cqw) scale(1.143,1.143);}76.667%{transform:translate(-7.5cqw,-3.1cqw) scale(1.143,1.143);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}80.833%{transform:translate(-53.5cqw,25.4cqw) scale(4,1.548);}95.833%{transform:translate(-53.5cqw,25.4cqw) scale(4,1.548);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}100%{transform:translate(0cqw,0cqw) scale(1,1);}}
.wl-n-btn{left:79.5cqw;top:7.6cqw;width:10.5cqw;height:4.2cqw;animation-name:wl-k-e9}
@keyframes wl-k-e10{0%{transform:translate(0cqw,0cqw) scale(1,1);}51.667%{transform:translate(0cqw,0cqw) scale(1,1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}55.833%{transform:translate(-7.1cqw,-3.1cqw) scale(1.149,1.111);}76.667%{transform:translate(-7.1cqw,-3.1cqw) scale(1.149,1.111);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}80.833%{transform:translate(-40.4cqw,26.3cqw) scale(2.128,1.556);}95.833%{transform:translate(-40.4cqw,26.3cqw) scale(2.128,1.556);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}100%{transform:translate(0cqw,0cqw) scale(1,1);}}
.wl-n-lab{left:82.4cqw;top:9.5cqw;width:4.7cqw;height:0.9cqw;animation-name:wl-k-e10}
@keyframes wl-k-e11{0%{transform:translate(0cqw,0cqw) scale(1,1);}51.667%{transform:translate(0cqw,0cqw) scale(1,1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}55.833%{transform:translate(8.5cqw,-4cqw) scale(1.143,1.139);}76.667%{transform:translate(8.5cqw,-4cqw) scale(1.143,1.139);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}80.833%{transform:translate(22cqw,-1.5cqw) scale(0.905,1.5);}95.833%{transform:translate(22cqw,-1.5cqw) scale(0.905,1.5);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}100%{transform:translate(0cqw,0cqw) scale(1,1);}}
.wl-h-1{left:4cqw;top:16.5cqw;width:42cqw;height:3.6cqw;animation-name:wl-k-e11}
@keyframes wl-k-e12{0%{transform:translate(0cqw,0cqw) scale(1,1);}51.667%{transform:translate(0cqw,0cqw) scale(1,1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}55.833%{transform:translate(8.5cqw,-3.5cqw) scale(1.15,1.139);}76.667%{transform:translate(8.5cqw,-3.5cqw) scale(1.15,1.139);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}80.833%{transform:translate(22cqw,0.1cqw) scale(0.867,1.5);}95.833%{transform:translate(22cqw,0.1cqw) scale(0.867,1.5);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}100%{transform:translate(0cqw,0cqw) scale(1,1);}}
.wl-h-2{left:4cqw;top:21.5cqw;width:30cqw;height:3.6cqw;animation-name:wl-k-e12}
@keyframes wl-k-e13{0%{transform:translate(0cqw,0cqw) scale(1,1);}51.667%{transform:translate(0cqw,0cqw) scale(1,1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}55.833%{transform:translate(8.5cqw,-3.2cqw) scale(1.136,1.143);}76.667%{transform:translate(8.5cqw,-3.2cqw) scale(1.136,1.143);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}80.833%{transform:translate(22cqw,2.5cqw) scale(1,1.5);}95.833%{transform:translate(22cqw,2.5cqw) scale(1,1.5);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}100%{transform:translate(0cqw,0cqw) scale(1,1);}}
.wl-h-3{left:4cqw;top:27cqw;width:22cqw;height:1.4cqw;animation-name:wl-k-e13}
@keyframes wl-k-nv0{0%{transform:translate(0cqw,0cqw) scale(1,1);}51.667%{transform:translate(0cqw,0cqw) scale(1,1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}55.833%{transform:translate(-9cqw,-2.9cqw) scale(1.143,1.154);}76.667%{transform:translate(-9cqw,-2.9cqw) scale(1.143,1.154);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}80.833%{transform:translate(5.5cqw,-3.4cqw) scale(0.964,0.692);}83.75%{transform:translate(5.5cqw,-3.4cqw) scale(0.964,0.692);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}87.083%{transform:translate(-26.5cqw,6.5cqw) scale(3.036,1.692);}89.583%{transform:translate(-26.5cqw,6.5cqw) scale(3.036,1.692);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}92.917%{transform:translate(5.5cqw,-3.4cqw) scale(0.964,0.692);}95.833%{transform:translate(5.5cqw,-3.4cqw) scale(0.964,0.692);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}100%{transform:translate(0cqw,0cqw) scale(1,1);}}
.wl-nv0{left:56cqw;top:9cqw;width:5.6cqw;height:1.3cqw;animation-name:wl-k-nv0}
@keyframes wl-k-nv1{0%{transform:translate(0cqw,0cqw) scale(1,1);}51.667%{transform:translate(0cqw,0cqw) scale(1,1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}55.833%{transform:translate(-8cqw,-2.9cqw) scale(1.152,1.154);}76.667%{transform:translate(-8cqw,-2.9cqw) scale(1.152,1.154);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}80.833%{transform:translate(-2.5cqw,-1.4cqw) scale(1.174,0.692);}83.75%{transform:translate(-2.5cqw,-1.4cqw) scale(1.174,0.692);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}87.083%{transform:translate(-34.5cqw,11cqw) scale(2.935,1.692);}89.583%{transform:translate(-34.5cqw,11cqw) scale(2.935,1.692);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}92.917%{transform:translate(-2.5cqw,-1.4cqw) scale(1.174,0.692);}95.833%{transform:translate(-2.5cqw,-1.4cqw) scale(1.174,0.692);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}100%{transform:translate(0cqw,0cqw) scale(1,1);}}
.wl-nv1{left:64cqw;top:9cqw;width:4.6cqw;height:1.3cqw;animation-name:wl-k-nv1}
@keyframes wl-k-nv2{0%{transform:translate(0cqw,0cqw) scale(1,1);}51.667%{transform:translate(0cqw,0cqw) scale(1,1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}55.833%{transform:translate(-7.5cqw,-2.9cqw) scale(1.154,1.154);}76.667%{transform:translate(-7.5cqw,-2.9cqw) scale(1.154,1.154);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}80.833%{transform:translate(-9.5cqw,0.6cqw) scale(1.038,0.692);}83.75%{transform:translate(-9.5cqw,0.6cqw) scale(1.038,0.692);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}87.083%{transform:translate(-41.5cqw,15.5cqw) scale(2.981,1.692);}89.583%{transform:translate(-41.5cqw,15.5cqw) scale(2.981,1.692);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}92.917%{transform:translate(-9.5cqw,0.6cqw) scale(1.038,0.692);}95.833%{transform:translate(-9.5cqw,0.6cqw) scale(1.038,0.692);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}100%{transform:translate(0cqw,0cqw) scale(1,1);}}
.wl-nv2{left:71cqw;top:9cqw;width:5.2cqw;height:1.3cqw;animation-name:wl-k-nv2}
@keyframes wl-k-cd0{0%{transform:translate(0cqw,0cqw) scale(1,1);}51.667%{transform:translate(0cqw,0cqw) scale(1,1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}55.833%{transform:translate(8.5cqw,-4.5cqw) scale(1.222,1.222);}76.667%{transform:translate(8.5cqw,-4.5cqw) scale(1.222,1.222);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}80.833%{transform:translate(22cqw,10cqw) scale(1.544,1.544);}95.833%{transform:translate(22cqw,10cqw) scale(1.544,1.544);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}100%{transform:translate(0cqw,0cqw) scale(1,1);}}
.wl-cd0{left:4cqw;top:32cqw;width:27.2cqw;height:12.15cqw;animation-name:wl-k-cd0}
@keyframes wl-k-cd1{0%{transform:translate(0cqw,0cqw) scale(1,1);}31.25%{transform:translate(0cqw,0cqw) scale(1,1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}32.917%{transform:translate(0cqw,-1.15cqw) scale(1,1);}37.917%{transform:translate(0cqw,-1.15cqw) scale(1,1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}39.583%{transform:translate(0cqw,0cqw) scale(1,1);}51.667%{transform:translate(0cqw,0cqw) scale(1,1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}55.833%{transform:translate(14.85cqw,-4.5cqw) scale(1.222,1.222);}77.083%{transform:translate(14.85cqw,-4.5cqw) scale(1.222,1.222);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}80.833%{transform:translate(-7.4cqw,30.8cqw) scale(1.544,1.544);}95.833%{transform:translate(-7.4cqw,30.8cqw) scale(1.544,1.544);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}100%{transform:translate(0cqw,0cqw) scale(1,1);}}
.wl-cd1{left:33.4cqw;top:32cqw;width:27.2cqw;height:12.15cqw;animation-name:wl-k-cd1}
@keyframes wl-k-cd2{0%{transform:translate(0cqw,0cqw) scale(1,1);}52.417%{transform:translate(0cqw,0cqw) scale(1,1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}55.833%{transform:translate(-50.3cqw,12.85cqw) scale(1.222,1.222);}77.5%{transform:translate(-50.3cqw,12.85cqw) scale(1.222,1.222);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}80.833%{transform:translate(-36.8cqw,51.6cqw) scale(1.544,1.544);}95.833%{transform:translate(-36.8cqw,51.6cqw) scale(1.544,1.544);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}100%{transform:translate(0cqw,0cqw) scale(1,1);}}
.wl-cd2{left:62.8cqw;top:32cqw;width:27.2cqw;height:12.15cqw;animation-name:wl-k-cd2}
@keyframes wl-k-cd3{0%{transform:translate(0cqw,0cqw) scale(1,1);}52.417%{transform:translate(0cqw,0cqw) scale(1,1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}55.833%{transform:translate(44.25cqw,-1.5cqw) scale(1.222,1.222);}77.917%{transform:translate(44.25cqw,-1.5cqw) scale(1.222,1.222);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}80.833%{transform:translate(22cqw,58.05cqw) scale(1.544,1.544);}96.583%{transform:translate(22cqw,58.05cqw) scale(1.544,1.544);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}100%{transform:translate(0cqw,0cqw) scale(1,1);}}
.wl-cd3{left:4cqw;top:46.35cqw;width:27.2cqw;height:12.15cqw;animation-name:wl-k-cd3}
@keyframes wl-k-cd4{0%{transform:translate(0cqw,0cqw) scale(1,1);}53.167%{transform:translate(0cqw,0cqw) scale(1,1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}55.833%{transform:translate(-20.9cqw,15.85cqw) scale(1.222,1.222);}78.333%{transform:translate(-20.9cqw,15.85cqw) scale(1.222,1.222);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}80.833%{transform:translate(-7.4cqw,78.85cqw) scale(1.544,1.544);}96.583%{transform:translate(-7.4cqw,78.85cqw) scale(1.544,1.544);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}100%{transform:translate(0cqw,0cqw) scale(1,1);}}
.wl-cd4{left:33.4cqw;top:46.35cqw;width:27.2cqw;height:12.15cqw;animation-name:wl-k-cd4}
@keyframes wl-k-cd5{0%{transform:translate(0cqw,0cqw) scale(1,1);}53.75%{transform:translate(0cqw,0cqw) scale(1,1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}55.833%{transform:translate(-14.55cqw,15.85cqw) scale(1.222,1.222);}78.75%{transform:translate(-14.55cqw,15.85cqw) scale(1.222,1.222);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}80.833%{transform:translate(-36.8cqw,99.65cqw) scale(1.544,1.544);}96.583%{transform:translate(-36.8cqw,99.65cqw) scale(1.544,1.544);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}100%{transform:translate(0cqw,0cqw) scale(1,1);}}
.wl-cd5{left:62.8cqw;top:46.35cqw;width:27.2cqw;height:12.15cqw;animation-name:wl-k-cd5}
@keyframes wl-k-menu{0%{transform:scaleY(0);}83.75%{transform:scaleY(0);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}87.083%{transform:scaleY(1);}89.583%{transform:scaleY(1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}92.917%{transform:scaleY(0);}100%{transform:scaleY(0);}}
@keyframes wl-k-fill{0%{opacity:0;}40.417%{opacity:0;animation-timing-function:cubic-bezier(0.65,0,0.35,1);}42.083%{opacity:1;}45.417%{opacity:1;animation-timing-function:cubic-bezier(0.65,0,0.35,1);}47.083%{opacity:0;}100%{opacity:0;}}
@keyframes wl-k-ring{0%{opacity:0;transform:scale(1);}42.083%{opacity:0;transform:scale(1.06);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}43.167%{opacity:1;transform:scale(1);}45%{opacity:1;transform:scale(1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}46.667%{opacity:0;transform:scale(1);}100%{opacity:0;transform:scale(1);}}
@keyframes wl-k-shadow{0%{opacity:0;transform:translate(0cqw,0cqw);}31.25%{opacity:0;transform:translate(0cqw,0cqw);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}32.917%{opacity:1;transform:translate(0cqw,-1.15cqw);}37.917%{opacity:1;transform:translate(0cqw,-1.15cqw);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}39.583%{opacity:0;transform:translate(0cqw,0cqw);}100%{opacity:0;transform:translate(0cqw,0cqw);}}
@keyframes wl-k-ink1{0%{transform:scale(1);}31.667%{transform:scale(1);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}33.75%{transform:scale(1.08);}37.917%{transform:scale(1.08);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}40%{transform:scale(1);}100%{transform:scale(1);}}
@keyframes wl-k-drift{0%{transform:scale(1.08) translate(0cqw,0cqw);}33.333%{transform:scale(1.1) translate(-0.5cqw,0.3cqw);}66.667%{transform:scale(1.09) translate(0.4cqw,-0.25cqw);}100%{transform:scale(1.08) translate(0cqw,0cqw);}}
@keyframes wl-k-cur{0%{opacity:0;transform:translate(52cqw,42cqw);}26.25%{opacity:0;transform:translate(52cqw,42cqw);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}28.75%{opacity:1;transform:translate(52cqw,42cqw);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}32.5%{opacity:1;transform:translate(44.5cqw,37.5cqw);}37.917%{opacity:1;transform:translate(44.5cqw,37.5cqw);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}41.25%{opacity:1;transform:translate(84.5cqw,10.6cqw);}45.833%{opacity:1;transform:translate(84.5cqw,10.6cqw);animation-timing-function:cubic-bezier(0.65,0,0.35,1);}48.333%{opacity:0;transform:translate(88cqw,16cqw);}100%{opacity:0;transform:translate(52cqw,42cqw);}}
@keyframes wl-k-gvl{0%{transform:translate(0cqw,0cqw);opacity:0.5;}1.833%{transform:translate(0cqw,0cqw);opacity:0;}51.5%{transform:translate(0cqw,0cqw);opacity:0;}51.667%{transform:translate(9cqw,0cqw);opacity:0;}55.833%{transform:translate(9cqw,0cqw);opacity:0.5;}57.667%{transform:translate(9cqw,0cqw);opacity:0;}76.5%{transform:translate(9cqw,0cqw);opacity:0;}76.667%{transform:translate(23cqw,0cqw);opacity:0;}80.833%{transform:translate(23cqw,0cqw);opacity:0.5;}82.667%{transform:translate(23cqw,0cqw);opacity:0;}95.667%{transform:translate(23cqw,0cqw);opacity:0;}95.833%{transform:translate(0cqw,0cqw);opacity:0;}100%{transform:translate(0cqw,0cqw);opacity:0.5;}}
@keyframes wl-k-gvr{0%{transform:translate(0cqw,0cqw);opacity:0.5;}1.833%{transform:translate(0cqw,0cqw);opacity:0;}51.5%{transform:translate(0cqw,0cqw);opacity:0;}51.667%{transform:translate(-9cqw,0cqw);opacity:0;}55.833%{transform:translate(-9cqw,0cqw);opacity:0.5;}57.667%{transform:translate(-9cqw,0cqw);opacity:0;}76.5%{transform:translate(-9cqw,0cqw);opacity:0;}76.667%{transform:translate(-23cqw,0cqw);opacity:0;}80.833%{transform:translate(-23cqw,0cqw);opacity:0.5;}82.667%{transform:translate(-23cqw,0cqw);opacity:0;}95.667%{transform:translate(-23cqw,0cqw);opacity:0;}95.833%{transform:translate(0cqw,0cqw);opacity:0;}100%{transform:translate(0cqw,0cqw);opacity:0.5;}}
@keyframes wl-k-gh{0%{transform:translate(0cqw,0cqw);opacity:0.5;}1.833%{transform:translate(0cqw,0cqw);opacity:0;}51.5%{transform:translate(0cqw,0cqw);opacity:0;}51.667%{transform:translate(0cqw,-3.5cqw);opacity:0;}55.833%{transform:translate(0cqw,-3.5cqw);opacity:0.5;}57.667%{transform:translate(0cqw,-3.5cqw);opacity:0;}76.5%{transform:translate(0cqw,-3.5cqw);opacity:0;}76.667%{transform:translate(0cqw,-3.5cqw);opacity:0;}80.833%{transform:translate(0cqw,-3.5cqw);opacity:0.5;}82.667%{transform:translate(0cqw,-3.5cqw);opacity:0;}95.667%{transform:translate(0cqw,-3.5cqw);opacity:0;}95.833%{transform:translate(0cqw,0cqw);opacity:0;}100%{transform:translate(0cqw,0cqw);opacity:0.5;}}

/* ====================== SMYČKA SPRÁVY A PÉČE =============================
   Karta Správa a péče na homepage. Stoh záloh leží v klidu, zepředu na něj
   dosedne nový snímek a stoh o krok ustoupí. Na vrchním snímku se pak
   otočí dlaždice aktualizace a zapadne zpátky. Světlo přejde ze dne do
   noci a vrátí se, kontrolka dostupnosti tepe pořád stejně.

   Vygenerováno z Filipova návrhu, viz components/care-loop.php; ručně
   needitovat kromě proměnných níže. Třídy cl-* jsou z návrhu, jen
   s předponou proti kolizím.

   Smyčka je bezešvá jinak než ostatní: prvky si na hranici cyklu
   prohodí místa (p6 dosedne tam, kde stál p1), takže obraz je na 0 %
   a na 100 % totožný, i když jednotlivé keyframy totožné nejsou.
   Nesahat na pořadí .cl-p1 až .cl-p6 v šabloně, drží to celý efekt.
   ========================================================================= */

.care-loop {
    --cl-loop:       12s;
    --cl-pulse:      3s;      /* 12 s / 3 s = 4 celé tepy na cyklus */
    --cl-ease:       cubic-bezier(.34, 0, .18, 1);
    --cl-plate-edge: #f1f3f3; /* spodní hrana snímku, o chlup pod --surface */
    --cl-desk-hi:    #1e2123; /* nasvícený vrch plochy */
    --cl-desk-lo:    #0e1011; /* okraje plochy */
    --cl-night:      #05080a; /* vrstva soumraku */
}
.care-loop {
    position: relative;
    container-type: inline-size;
    aspect-ratio: 1480 / 1090;
    background: var(--bg);
}

.cl-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.cl-f-ink   { fill: var(--ink); }
.cl-f-title { fill-opacity: .86; }
.cl-f-sub   { fill-opacity: .26; }
.cl-f-rule  { fill-opacity: .1; }
.cl-f-line  { fill-opacity: .14; }
.cl-f-tag   { fill: var(--red); }

.cl-desk{position:absolute;inset:2.4cqw;border-radius:1.4cqw;overflow:hidden;container-type:inline-size;
 background:radial-gradient(132% 104% at 50% 82%,var(--cl-desk-hi) 0%,var(--panel-dark) 48%,var(--cl-desk-lo) 100%)}

/* ---- světlo ---- */
.cl-glow{position:absolute}
.cl-warm{left:-24cqw;top:14cqw;width:76cqw;height:76cqw;animation-name:cl-k-pass;
 background:radial-gradient(closest-side,rgba(255,206,158,.30),rgba(255,184,128,.11) 46%,rgba(255,184,128,0) 74%)}
.cl-cool{left:45cqw;top:1cqw;width:74cqw;height:74cqw;animation-name:cl-k-cool;
 background:radial-gradient(closest-side,rgba(148,196,255,.34),rgba(120,170,255,.12) 48%,rgba(120,170,255,0) 74%)}
.cl-dusk{position:absolute;inset:0;background:var(--cl-night);animation-name:cl-k-dusk}
.cl-sheen{position:absolute;left:-32cqw;top:-16cqw;width:60cqw;height:112cqw;mix-blend-mode:soft-light;
 animation-name:cl-k-sheen;
 background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,240,218,.5) 48%,rgba(255,255,255,0) 100%)}
.cl-floor{position:absolute;left:13cqw;top:54cqw;width:74cqw;height:11cqw;
 background:radial-gradient(closest-side,rgba(0,0,0,.62),rgba(0,0,0,0) 72%)}

/* ---- stoh snímků ---- */
.cl-stack{position:absolute;inset:0;transform-origin:50% 62%;animation-name:cl-k-breath}
.cl-plates{position:absolute;inset:0;animation-name:cl-k-nightdim}
.cl-plate{position:absolute;left:9cqw;top:17cqw;width:82cqw;height:42cqw;border-radius:1.1cqw;
 transform-origin:50% 100%;perspective:105cqw;
 background:linear-gradient(178deg,var(--surface) 0%,var(--cl-plate-edge) 100%);
 box-shadow:0 -0.5cqw 1.3cqw rgba(0,0,0,.42),0 1.3cqw 2.9cqw rgba(0,0,0,.52)}
.cl-face{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.cl-p1{animation-name:cl-k-p1}
.cl-p2{animation-name:cl-k-p2}
.cl-p3{animation-name:cl-k-p3}
.cl-p4{animation-name:cl-k-p4}
.cl-p5{animation-name:cl-k-p5}
.cl-p6{animation-name:cl-k-p6}

/* ---- dlaždice aktualizace ---- */
.cl-chip{position:absolute;left:66.7cqw;top:6cqw;width:9.5cqw;height:9.5cqw;transform-origin:50% 50%}
.cl-chip-f,.cl-chip-b{position:absolute;inset:0;border-radius:1.2cqw}
.cl-chip-f{background:linear-gradient(158deg,var(--panel-dark-2) 0%,var(--panel-dark) 100%);
 box-shadow:0 .35cqw .9cqw rgba(0,0,0,.26)}
.cl-chip-b{background:var(--red);opacity:0}
.cl-p6 .cl-chip{animation-name:cl-k-chip}
.cl-p6 .cl-chip-b{animation-name:cl-k-back}
.cl-cshadow{position:absolute;left:64.2cqw;top:9.7cqw;width:14.5cqw;height:8cqw;transform-origin:50% 40%;
 background:radial-gradient(closest-side,rgba(0,0,0,.38),rgba(0,0,0,0) 70%);animation-name:cl-k-cshadow}

/* ---- linka a kontrolka dostupnosti ---- */
.cl-rail{position:absolute;top:67cqw;height:.5cqw;border-radius:.25cqw}
.cl-rail-l{left:9cqw;width:35cqw;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.17))}
.cl-rail-r{left:56cqw;width:35cqw;background:linear-gradient(90deg,rgba(255,255,255,.17),rgba(255,255,255,0))}
.cl-beacon{position:absolute;left:46.7cqw;top:63.95cqw;width:6.6cqw;height:6.6cqw;animation-name:cl-k-lit}
.cl-halo{position:absolute;inset:0;border-radius:50%;transform-origin:50% 50%;animation-name:cl-k-pulse;
 background:radial-gradient(closest-side,rgba(35,213,171,.5),rgba(35,213,171,0) 72%)}
.cl-dot{position:absolute;left:2.35cqw;top:2.35cqw;width:1.9cqw;height:1.9cqw;border-radius:50%;
 background:var(--teal);box-shadow:0 0 1.3cqw rgba(35,213,171,.55)}

.cl-an{animation-duration:var(--cl-loop);animation-timing-function:linear;
 animation-iteration-count:infinite;animation-fill-mode:both}
.cl-an-p{animation-duration:var(--cl-pulse);animation-timing-function:linear;
 animation-iteration-count:infinite;animation-fill-mode:both}

@media (prefers-reduced-motion:reduce){
 .cl-an,.cl-an-p{animation-delay:-1.5s;animation-play-state:paused}
}

/* ---- snímky: každý za cyklus ustoupí o jedno místo ---- */
@keyframes cl-k-p1{
 0%,27.5%{transform:translateY(0cqw) scale(1);opacity:1;animation-timing-function:var(--cl-ease)}
 41.7%,100%{transform:translateY(-5cqw) scale(.94);opacity:.9}}
@keyframes cl-k-p2{
 0%,27.5%{transform:translateY(-5cqw) scale(.94);opacity:.9;animation-timing-function:var(--cl-ease)}
 41.7%,100%{transform:translateY(-9.5cqw) scale(.885);opacity:.78}}
@keyframes cl-k-p3{
 0%,27.5%{transform:translateY(-9.5cqw) scale(.885);opacity:.78;animation-timing-function:var(--cl-ease)}
 41.7%,100%{transform:translateY(-13.5cqw) scale(.835);opacity:.66}}
@keyframes cl-k-p4{
 0%,27.5%{transform:translateY(-13.5cqw) scale(.835);opacity:.66;animation-timing-function:var(--cl-ease)}
 41.7%,100%{transform:translateY(-17.1cqw) scale(.79);opacity:.55}}
@keyframes cl-k-p5{
 0%,27.5%{transform:translateY(-17.1cqw) scale(.79);opacity:.55;animation-timing-function:var(--cl-ease)}
 41.7%,100%{transform:translateY(-20.2cqw) scale(.75);opacity:0}}
@keyframes cl-k-p6{
 0%,27.5%{transform:translateY(9cqw) scale(1.045);opacity:0;
  animation-timing-function:cubic-bezier(.34,0,.6,1)}
 32%{transform:translateY(6.1cqw) scale(1.031);opacity:1;
  animation-timing-function:cubic-bezier(.35,0,.18,1)}
 41.7%,100%{transform:translateY(0cqw) scale(1);opacity:1}}

/* ---- aktualizace: jedno pomalé otočení ---- */
@keyframes cl-k-chip{
 0%,53.3%{transform:translateY(0cqw) rotate3d(1,.14,0,0deg) scale(1);
  animation-timing-function:cubic-bezier(.35,0,.25,1)}
 58.5%{transform:translateY(-3.2cqw) rotate3d(1,.14,0,-40deg) scale(1.06);animation-timing-function:linear}
 62.5%{transform:translateY(-4.1cqw) rotate3d(1,.14,0,-95deg) scale(1.08);animation-timing-function:linear}
 67.5%{transform:translateY(-3.8cqw) rotate3d(1,.14,0,-235deg) scale(1.07);
  animation-timing-function:cubic-bezier(.4,0,.3,1)}
 70.5%{transform:translateY(-2.2cqw) rotate3d(1,.14,0,-285deg) scale(1.03);
  animation-timing-function:cubic-bezier(.3,0,.2,1)}
 74%,100%{transform:translateY(0cqw) rotate3d(1,.14,0,-360deg) scale(1)}}
@keyframes cl-k-back{
 0%,61.6%{opacity:0}62.4%{opacity:1}69.6%{opacity:1}70.4%{opacity:0}100%{opacity:0}}
@keyframes cl-k-cshadow{
 0%,53.3%{opacity:0;transform:scale(1);animation-timing-function:cubic-bezier(.35,0,.25,1)}
 62.5%{opacity:1;transform:scale(1.5);animation-timing-function:cubic-bezier(.4,0,.3,1)}
 74%,100%{opacity:0;transform:scale(1)}}

/* ---- den, který projde ---- */
@keyframes cl-k-pass{
 0%{transform:translate(0cqw,0cqw);opacity:1}
 26%{transform:translate(20cqw,-6cqw);opacity:1}
 50%{transform:translate(40cqw,-9.5cqw);opacity:1}
 68%{transform:translate(55cqw,-4cqw);opacity:.95}
 74%{transform:translate(60cqw,-1cqw);opacity:.6}
 84%{transform:translate(66cqw,2cqw);opacity:0}
 88%{transform:translate(0cqw,0cqw);opacity:0}
 95%{transform:translate(0cqw,0cqw);opacity:.32}
 100%{transform:translate(0cqw,0cqw);opacity:1}}
@keyframes cl-k-cool{
 0%{transform:translate(0cqw,0cqw);opacity:0}
 62%{transform:translate(0cqw,0cqw);opacity:0}
 74%{transform:translate(-3cqw,3cqw);opacity:.5}
 84%{transform:translate(-6cqw,6cqw);opacity:1}
 92%{transform:translate(-8cqw,8cqw);opacity:.85}
 98%{transform:translate(-10cqw,10cqw);opacity:.15}
 100%{transform:translate(-11cqw,11cqw);opacity:0}}
@keyframes cl-k-sheen{
 0%{transform:translate(0cqw,0cqw);opacity:.85}
 46%{transform:translate(52cqw,0cqw);opacity:.85}
 66%{transform:translate(80cqw,0cqw);opacity:.7}
 76%{transform:translate(98cqw,0cqw);opacity:.25}
 85%{transform:translate(112cqw,0cqw);opacity:0}
 89%{transform:translate(0cqw,0cqw);opacity:0}
 96%{transform:translate(0cqw,0cqw);opacity:.3}
 100%{transform:translate(0cqw,0cqw);opacity:.85}}
@keyframes cl-k-dusk{
 0%{opacity:0}66%{opacity:0}78%{opacity:.28}87%{opacity:.42}95%{opacity:.2}100%{opacity:0}}
@keyframes cl-k-nightdim{
 0%,66%{opacity:1}80%{opacity:.75}88%{opacity:.7}95%{opacity:.85}100%{opacity:1}}
@keyframes cl-k-lit{
 0%,66%{opacity:.85}82%{opacity:1}92%{opacity:1}100%{opacity:.85}}
@keyframes cl-k-pulse{
 0%{transform:scale(.5);opacity:0}
 28%{transform:scale(.95);opacity:.8}
 100%{transform:scale(1.5);opacity:0}}
@keyframes cl-k-breath{
 0%{transform:scale(1);animation-timing-function:cubic-bezier(.4,0,.6,1)}
 44%{transform:scale(1.007);animation-timing-function:cubic-bezier(.4,0,.6,1)}
 100%{transform:scale(1)}}

/* ======================== SMYČKA E-SHOPŮ NA MÍRU ==========================
   Karta E-shopy na míru na homepage (od 14. 10. 2026, includes/components/
   shop-loop.php). Kurzor přidá produkt do košíku, náhled odletí do košíku,
   na ikoně naskočí počet, vyjede pokladna (doprava, platba), objednávka se
   potvrdí a po kolejnici odjede balík. Rámec jako web-loop a care-loop:
   karta 1480 : 1090, tmavá plocha, jednotky cqw (uvnitř plochy z její
   šířky, plocha je zhruba 100 × 72 cqw), cyklus 12 s.
   Při omezeném pohybu stojí na snímku s otevřenou pokladnou.
   ========================================================================= */

.shop-loop {
    --sh-loop: 12s;
    --sh-ease: cubic-bezier(.65, 0, .35, 1);
    position: relative;
    container-type: inline-size;
    aspect-ratio: 1480 / 1090;
    background: var(--bg);
}

.sh-desk{position:absolute;inset:2.4cqw;border-radius:1.4cqw;overflow:hidden;container-type:inline-size;
 background:radial-gradient(120% 90% at 50% 12%,#1B1E1F 0%,var(--panel-dark) 55%,#101212 100%)}

/* ---- výloha s produktem ---- */
.sh-win{position:absolute;left:5cqw;top:7cqw;width:54cqw;height:54cqw;border-radius:1cqw;overflow:hidden;
 background:var(--surface);box-shadow:0 2cqw 5cqw rgba(0,0,0,.45)}
.sh-win > div{position:absolute}
.sh-head{left:0;top:0;width:100%;height:6cqw;box-shadow:inset 0 -1px 0 rgba(0,0,0,.08)}
.sh-logo{left:3cqw;top:2.2cqw;width:7cqw;height:1.6cqw;border-radius:.3cqw;background:rgba(0,0,0,.86)}
.sh-nav{top:2.5cqw;height:1cqw;border-radius:.2cqw;background:rgba(0,0,0,.32)}
.sh-nav1{left:27cqw;width:5cqw}
.sh-nav2{left:34cqw;width:4.4cqw}
.sh-cart{left:46.5cqw;top:1.6cqw;width:3.6cqw;height:2.8cqw;border-radius:.3cqw .3cqw .8cqw .8cqw;
 box-shadow:inset 0 0 0 .32cqw rgba(0,0,0,.82)}
.sh-badge{position:absolute;right:-1cqw;top:-1cqw;width:2cqw;height:2cqw;border-radius:50%;background:var(--red);
 transform:scale(0);animation-name:sh-k-badge}
.sh-img{left:3cqw;top:9cqw;width:22cqw;height:22cqw;border-radius:.8cqw;overflow:hidden}
.sh-ink{position:absolute;inset:-10%;background:linear-gradient(60deg,var(--orange),var(--red),var(--purple));animation-name:sh-k-drift}
.sh-title{left:28cqw;top:10cqw;width:20cqw;height:2.2cqw;border-radius:.25cqw;background:rgba(0,0,0,.88)}
.sh-sub{left:28cqw;top:14cqw;width:14cqw;height:1.2cqw;border-radius:.2cqw;background:rgba(0,0,0,.3)}
.sh-price{left:28cqw;top:18cqw;width:8cqw;height:2.2cqw;border-radius:.25cqw;background:var(--red)}
.sh-sw{top:23cqw;width:2.2cqw;height:2.2cqw;border-radius:50%}
.sh-sw1{left:28cqw;background:rgba(0,0,0,.85);box-shadow:0 0 0 .3cqw var(--surface),0 0 0 .55cqw rgba(0,0,0,.45)}
.sh-sw2{left:31.4cqw;background:var(--red)}
.sh-sw3{left:34.8cqw;background:var(--purple)}
.sh-btn{left:28cqw;top:27.5cqw;width:17cqw;height:4.4cqw;border-radius:.7cqw;background:var(--panel-dark);
 transform-origin:50% 50%;animation-name:sh-k-btn}
.sh-btn-lab{position:absolute;left:4.5cqw;top:1.7cqw;width:8cqw;height:1cqw;border-radius:.2cqw;background:rgba(255,255,255,.85)}
.sh-mini{top:36cqw;width:15cqw;height:15cqw;border-radius:.7cqw;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.08)}
.sh-mini1{left:3cqw}
.sh-mini2{left:19.5cqw}
.sh-mini3{left:36cqw}
.sh-mini-img{position:absolute;left:0;top:0;width:100%;height:9cqw;border-radius:.7cqw .7cqw 0 0}
.sh-mini1 .sh-mini-img{background:linear-gradient(140deg,var(--purple),var(--red))}
.sh-mini2 .sh-mini-img{background:linear-gradient(200deg,var(--orange),var(--red))}
.sh-mini3 .sh-mini-img{background:linear-gradient(320deg,var(--purple),var(--pink),var(--orange))}
.sh-mini::before,.sh-mini::after{content:'';position:absolute;left:1.2cqw;border-radius:.2cqw}
.sh-mini::before{top:10.6cqw;width:9cqw;height:1.2cqw;background:rgba(0,0,0,.6)}
.sh-mini::after{top:12.8cqw;width:5cqw;height:1cqw;background:rgba(0,0,0,.25)}

/* ---- náhled letící do košíku ---- */
.sh-fly{position:absolute;left:39.5cqw;top:34.7cqw;width:4cqw;height:4cqw;border-radius:.6cqw;opacity:0;z-index:4;
 background:linear-gradient(60deg,var(--orange),var(--red),var(--purple));animation-name:sh-k-fly}

/* ---- pokladna ---- */
.sh-checkout{position:absolute;left:63cqw;top:7cqw;width:32cqw;height:54cqw;border-radius:1cqw;background:var(--surface);
 box-shadow:0 2cqw 5cqw rgba(0,0,0,.45);opacity:0;animation-name:sh-k-co}
.sh-checkout > div{position:absolute}
.sh-row{left:2.5cqw;width:27cqw;height:8.5cqw;border-radius:.7cqw;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.09)}
.sh-row1{top:4cqw;animation-name:sh-k-r1}
.sh-row2{top:14.5cqw;animation-name:sh-k-r2}
.sh-row > div{position:absolute}
.sh-pin{left:2cqw;top:2.6cqw;width:3.2cqw;height:3.2cqw;border-radius:50% 50% 50% 0;background:var(--red);
 transform:rotate(-45deg);animation-name:sh-k-pin}
.sh-pin::after{content:'';position:absolute;left:1cqw;top:1cqw;width:1.2cqw;height:1.2cqw;border-radius:50%;background:var(--surface)}
.sh-chip{left:2cqw;top:2.8cqw;width:4.4cqw;height:3cqw;border-radius:.4cqw;background:linear-gradient(135deg,var(--panel-dark-2),var(--panel-dark))}
.sh-rl{left:8cqw;height:1.2cqw;border-radius:.2cqw}
.sh-rl-a{top:2.4cqw;width:14cqw;background:rgba(0,0,0,.78)}
.sh-rl-b{top:5cqw;width:9cqw;background:rgba(0,0,0,.28)}
.sh-rule{left:2.5cqw;top:26cqw;width:27cqw;height:.2cqw;background:rgba(0,0,0,.1)}
.sh-sum{left:2.5cqw;top:29cqw;width:9cqw;height:1.4cqw;border-radius:.2cqw;background:rgba(0,0,0,.35)}
.sh-total{left:21.5cqw;top:28.6cqw;width:8cqw;height:2.2cqw;border-radius:.25cqw;background:rgba(0,0,0,.88)}
.sh-confirm{left:2.5cqw;top:42cqw;width:27cqw;height:6cqw;border-radius:.8cqw;background:var(--panel-dark);overflow:hidden}
.sh-confirm::before{content:'';position:absolute;left:9.5cqw;top:2.5cqw;width:8cqw;height:1cqw;border-radius:.2cqw;background:rgba(255,255,255,.85)}
.sh-ok{position:absolute;inset:0;background:var(--teal);opacity:0;animation-name:sh-k-ok}
.sh-tick{position:absolute;left:12cqw;top:1.4cqw;width:3cqw;height:1.6cqw;transform-origin:50% 50%;
 border-left:.45cqw solid var(--surface);border-bottom:.45cqw solid var(--surface);
 transform:rotate(-45deg) scale(0);animation-name:sh-k-tick}

/* ---- kolejnice s balíkem ---- */
.sh-rail{position:absolute;left:5cqw;top:67cqw;width:90cqw;height:.4cqw;border-radius:.2cqw;
 background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.18) 15%,rgba(255,255,255,.18) 85%,rgba(255,255,255,0))}
.sh-parcel{position:absolute;left:6cqw;top:63cqw;width:5cqw;height:4cqw;border-radius:.4cqw;background:var(--orange);
 opacity:0;animation-name:sh-k-parcel}
.sh-tape{position:absolute;left:2cqw;top:0;width:1cqw;height:100%;background:rgba(255,255,255,.55)}

.sh-cursor{position:absolute;left:0;top:0;width:3.2cqw;height:3.2cqw;z-index:8;opacity:0;transform-origin:0 0;animation-name:sh-k-cur}
.sh-cursor svg{display:block;width:100%;height:100%}

.sh-an{animation-duration:var(--sh-loop);animation-timing-function:linear;
 animation-iteration-count:infinite;animation-fill-mode:both}
@media (prefers-reduced-motion:reduce){.sh-an{animation-delay:-5.5s;animation-play-state:paused}}

@keyframes sh-k-drift{0%,100%{transform:scale(1.05) translate(0,0)}50%{transform:scale(1.12) translate(-1cqw,.6cqw)}}
@keyframes sh-k-btn{
 0%,16%{transform:scale(1);background-color:var(--panel-dark)}
 18%{transform:scale(.94);background-color:var(--red)}
 21%,34%{transform:scale(1);background-color:var(--red)}
 38%,100%{transform:scale(1);background-color:var(--panel-dark)}}
@keyframes sh-k-fly{
 0%,19%{opacity:0;transform:translate(0,0) scale(1)}
 20%{opacity:1;transform:translate(0,0) scale(1);animation-timing-function:var(--sh-ease)}
 27%{opacity:1;transform:translate(11.8cqw,-26.7cqw) scale(.3)}
 28%,100%{opacity:0;transform:translate(11.8cqw,-26.7cqw) scale(.3)}}
@keyframes sh-k-badge{
 0%,26%{transform:scale(0)}
 29%{transform:scale(1.3)}
 31%,90%{transform:scale(1)}
 94%,100%{transform:scale(0)}}
@keyframes sh-k-co{
 0%,29%{opacity:0;transform:translateY(3cqw);animation-timing-function:var(--sh-ease)}
 36%,88%{opacity:1;transform:translateY(0)}
 95%,100%{opacity:0;transform:translateY(3cqw)}}
@keyframes sh-k-r1{
 0%,38%{box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.09)}
 40%,88%{box-shadow:inset 0 0 0 .3cqw var(--red)}
 92%,100%{box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.09)}}
@keyframes sh-k-r2{
 0%,45%{box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.09)}
 47%,88%{box-shadow:inset 0 0 0 .3cqw var(--red)}
 92%,100%{box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.09)}}
@keyframes sh-k-pin{
 0%,39%{transform:rotate(-45deg) scale(1)}
 42%{transform:rotate(-45deg) scale(1.25)}
 45%,100%{transform:rotate(-45deg) scale(1)}}
@keyframes sh-k-ok{0%,58%{opacity:0}61%,88%{opacity:1}92%,100%{opacity:0}}
@keyframes sh-k-tick{
 0%,60%{transform:rotate(-45deg) scale(0)}
 63%{transform:rotate(-45deg) scale(1.2)}
 65%,88%{transform:rotate(-45deg) scale(1)}
 92%,100%{transform:rotate(-45deg) scale(0)}}
@keyframes sh-k-parcel{
 0%,64%{opacity:0;transform:translateX(0)}
 67%{opacity:1;transform:translateX(0);animation-timing-function:var(--sh-ease)}
 86%{opacity:1;transform:translateX(82cqw)}
 89%,100%{opacity:0;transform:translateX(82cqw)}}
@keyframes sh-k-cur{
 0%,6%{opacity:0;transform:translate(30cqw,50cqw)}
 9%{opacity:1;transform:translate(30cqw,50cqw);animation-timing-function:var(--sh-ease)}
 15%{opacity:1;transform:translate(41.5cqw,37cqw) scale(1)}
 17%{transform:translate(41.5cqw,37cqw) scale(.85)}
 19%{transform:translate(41.5cqw,37cqw) scale(1);animation-timing-function:var(--sh-ease)}
 25%{transform:translate(50cqw,46cqw) scale(1)}
 50%{opacity:1;transform:translate(50cqw,46cqw) scale(1);animation-timing-function:var(--sh-ease)}
 57%{transform:translate(79cqw,52.5cqw) scale(1)}
 59%{transform:translate(79cqw,52.5cqw) scale(.85)}
 61%{opacity:1;transform:translate(79cqw,52.5cqw) scale(1)}
 65%,100%{opacity:0;transform:translate(79cqw,52.5cqw) scale(1)}}

/* =================== SMYČKA APLIKACÍ, AUTOMATIZACE A AI ===================
   Karta Aplikace, automatizace a AI na homepage (od 14. 10. 2026,
   includes/components/apps-loop.php). Vyplní se a odešle formulář, data
   doputují do uzlu a rozejdou se do tří nástrojů (faktura, e-mail, nový
   řádek v tabulce), dole AI asistent odpoví na dotaz. Rámec jako ostatní
   smyčky (1480 : 1090, cqw, 12 s). Kroužek uzlu se točí vlastním tempem.
   Při omezeném pohybu stojí na snímku s odpovídajícím asistentem.
   ========================================================================= */

.apps-loop {
    --ap-loop: 12s;
    --ap-ease: cubic-bezier(.65, 0, .35, 1);
    position: relative;
    container-type: inline-size;
    aspect-ratio: 1480 / 1090;
    background: var(--bg);
}

.ap-desk{position:absolute;inset:2.4cqw;border-radius:1.4cqw;overflow:hidden;container-type:inline-size;
 background:radial-gradient(120% 90% at 50% 12%,#1B1E1F 0%,var(--panel-dark) 55%,#101212 100%)}

/* ---- formulář ---- */
.ap-form{position:absolute;left:4cqw;top:14cqw;width:24cqw;height:30cqw;border-radius:1cqw;background:var(--surface);
 box-shadow:0 2cqw 5cqw rgba(0,0,0,.45)}
.ap-field{position:absolute;left:3cqw;width:18cqw;height:3.6cqw;border-radius:.5cqw;background:rgba(0,0,0,.06);overflow:hidden}
.ap-f1{top:3.5cqw}
.ap-f2{top:9.5cqw}
.ap-f3{top:15.5cqw}
.ap-type{position:absolute;left:1.2cqw;top:1.3cqw;height:1cqw;border-radius:.2cqw;background:rgba(0,0,0,.55);
 transform-origin:0 50%;transform:scaleX(0)}
.ap-f1 .ap-type{width:10cqw;animation-name:ap-k-t1}
.ap-f2 .ap-type{width:13cqw;animation-name:ap-k-t2}
.ap-f3 .ap-type{width:8cqw;animation-name:ap-k-t3}
.ap-send{position:absolute;left:3cqw;top:22.5cqw;width:10cqw;height:4cqw;border-radius:.6cqw;background:var(--panel-dark);
 transform-origin:50% 50%;animation-name:ap-k-send}
.ap-send::after{content:'';position:absolute;left:2.8cqw;top:1.5cqw;width:4.4cqw;height:1cqw;border-radius:.2cqw;background:rgba(255,255,255,.85)}

/* ---- vedení ---- */
.ap-line{position:absolute;border-radius:.2cqw;background:rgba(255,255,255,.16)}
.ap-l-in{left:28cqw;top:28.8cqw;width:12cqw;height:.4cqw}
.ap-l-out{left:56cqw;top:28.8cqw;width:6cqw;height:.4cqw}
.ap-l-spine{left:61.8cqw;top:11.5cqw;width:.4cqw;height:39.2cqw}
.ap-l-s1{left:62cqw;top:11.3cqw;width:4cqw;height:.4cqw}
.ap-l-s2{left:62cqw;top:28.8cqw;width:4cqw;height:.4cqw}
.ap-l-s3{left:62cqw;top:50.3cqw;width:4cqw;height:.4cqw}

/* ---- uzel ---- */
.ap-hub{position:absolute;left:40cqw;top:21cqw;width:16cqw;height:16cqw;border-radius:50%;animation-name:ap-k-hub}
.ap-ring{position:absolute;inset:0;border-radius:50%;
 background:conic-gradient(from 0deg,var(--orange),var(--red),var(--purple),var(--orange));
 -webkit-mask:radial-gradient(closest-side,transparent 82%,#000 84%);mask:radial-gradient(closest-side,transparent 82%,#000 84%)}
.ap-spin{animation:ap-k-spin 6s linear infinite}
.ap-core{position:absolute;inset:2.2cqw;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--panel-dark-2),var(--panel-dark));
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ap-core::before{content:'';position:absolute;left:50%;top:50%;width:2.6cqw;height:2.6cqw;margin:-1.3cqw 0 0 -1.3cqw;border-radius:50%;
 background:var(--red);box-shadow:0 0 2cqw color-mix(in srgb,var(--red) 60%,transparent)}

/* ---- tři nástroje ---- */
.ap-out{position:absolute;left:66cqw;width:29cqw;height:13cqw;border-radius:.9cqw;background:var(--surface);
 box-shadow:0 1.4cqw 3.5cqw rgba(0,0,0,.4)}
.ap-out > div{position:absolute}
.ap-o1{top:5cqw;animation-name:ap-k-o1}
.ap-o2{top:22.5cqw;animation-name:ap-k-o2}
.ap-o3{top:44cqw;animation-name:ap-k-o3}
.ap-doc{left:2cqw;top:2.6cqw;width:6cqw;height:7.8cqw;border-radius:.4cqw;background:rgba(0,0,0,.06);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.12)}
.ap-bar{height:1.2cqw;border-radius:.2cqw}
.ap-b1{left:10.5cqw;top:3.2cqw;width:14cqw;background:rgba(0,0,0,.8)}
.ap-b2{left:10.5cqw;top:6cqw;width:9cqw;background:rgba(0,0,0,.28)}
.ap-sum{left:10.5cqw;top:8.8cqw;width:7cqw;height:1.6cqw;border-radius:.25cqw;background:var(--red);
 transform-origin:0 50%;transform:scaleX(0);animation-name:ap-k-sum}
.ap-env{left:2cqw;top:3cqw;width:7cqw;height:5cqw;border-radius:.4cqw;overflow:hidden;background:rgba(0,0,0,.06);
 box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.12)}
.ap-flap{position:absolute;left:1cqw;top:-2.4cqw;width:5cqw;height:5cqw;transform:rotate(45deg);box-shadow:inset -1.5px -1.5px 0 rgba(0,0,0,.18)}
.ap-sent{left:24cqw;top:4.6cqw;width:2.4cqw;height:2.4cqw;border-radius:50%;background:var(--teal);transform:scale(0);animation-name:ap-k-sent}
.ap-grid{left:2cqw;top:2.4cqw;width:25cqw;height:8.4cqw;border-radius:.4cqw;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.12);
 background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 2.8cqw),
            repeating-linear-gradient(90deg,rgba(0,0,0,.12) 0 1px,transparent 1px 8.33cqw)}
.ap-cell{top:3.3cqw;height:1cqw;border-radius:.2cqw;background:rgba(0,0,0,.5)}
.ap-c1{left:3.4cqw;width:5cqw}
.ap-c2{left:11.7cqw;width:4cqw}
.ap-row{left:2cqw;top:5.2cqw;width:25cqw;height:2.8cqw;background:color-mix(in srgb,var(--red) 16%,transparent);
 opacity:0;transform:translateY(-1cqw);animation-name:ap-k-row}

/* ---- data na cestě ---- */
.ap-dot{position:absolute;left:0;top:0;width:1.8cqw;height:1.8cqw;margin:-.9cqw 0 0 -.9cqw;border-radius:50%;z-index:3;opacity:0;
 background:var(--surface);box-shadow:0 0 0 .35cqw color-mix(in srgb,var(--red) 70%,transparent),0 0 2.4cqw var(--red)}
.ap-d0{animation-name:ap-k-d0}
.ap-d1{animation-name:ap-k-d1}
.ap-d2{animation-name:ap-k-d2}
.ap-d3{animation-name:ap-k-d3}

/* ---- AI asistent ---- */
.ap-chat{position:absolute;left:4cqw;top:50cqw;width:44cqw;height:15cqw;border-radius:1.2cqw 1.2cqw 1.2cqw .3cqw;
 background:var(--surface);box-shadow:0 1.4cqw 3.5cqw rgba(0,0,0,.4);opacity:0;animation-name:ap-k-chat}
.ap-chat > div{position:absolute}
.ap-ava{left:2cqw;top:2.2cqw;width:4.4cqw;height:4.4cqw;border-radius:50%;background:linear-gradient(60deg,var(--orange),var(--red),var(--purple))}
.ap-typing{left:8.5cqw;top:3.6cqw;display:flex;gap:.8cqw;opacity:0;animation-name:ap-k-typing}
.ap-typing span{width:1.3cqw;height:1.3cqw;border-radius:50%;background:rgba(0,0,0,.4);animation:ap-k-blink 1s linear infinite}
.ap-typing span:nth-child(2){animation-delay:.2s}
.ap-typing span:nth-child(3){animation-delay:.4s}
.ap-ans{left:8.5cqw;height:1.3cqw;border-radius:.2cqw;transform-origin:0 50%;transform:scaleX(0)}
.ap-ans1{top:3.4cqw;width:30cqw;background:rgba(0,0,0,.75);animation-name:ap-k-a1}
.ap-ans2{top:6.6cqw;width:22cqw;background:rgba(0,0,0,.3);animation-name:ap-k-a2}

.ap-an{animation-duration:var(--ap-loop);animation-timing-function:linear;
 animation-iteration-count:infinite;animation-fill-mode:both}
@media (prefers-reduced-motion:reduce){
 .ap-an{animation-delay:-8.5s;animation-play-state:paused}
 .ap-spin,.ap-typing span{animation-play-state:paused}
}

@keyframes ap-k-spin{to{transform:rotate(1turn)}}
@keyframes ap-k-blink{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes ap-k-t1{0%,2%{transform:scaleX(0)}6%,86%{transform:scaleX(1)}90%,100%{transform:scaleX(0)}}
@keyframes ap-k-t2{0%,6%{transform:scaleX(0)}10%,86%{transform:scaleX(1)}90%,100%{transform:scaleX(0)}}
@keyframes ap-k-t3{0%,10%{transform:scaleX(0)}13%,86%{transform:scaleX(1)}90%,100%{transform:scaleX(0)}}
@keyframes ap-k-send{
 0%,13%{transform:scale(1);background-color:var(--panel-dark)}
 15%{transform:scale(.94);background-color:var(--red)}
 17%,24%{transform:scale(1);background-color:var(--red)}
 28%,100%{transform:scale(1);background-color:var(--panel-dark)}}
@keyframes ap-k-hub{
 0%,24%{transform:scale(1);box-shadow:0 0 0 rgba(0,0,0,0)}
 27%{transform:scale(1.08);box-shadow:0 0 4cqw color-mix(in srgb,var(--red) 45%,transparent)}
 32%,100%{transform:scale(1);box-shadow:0 0 0 rgba(0,0,0,0)}}
@keyframes ap-k-d0{
 0%,14%{opacity:0;transform:translate(28cqw,29cqw)}
 15%{opacity:1;transform:translate(28cqw,29cqw);animation-timing-function:var(--ap-ease)}
 24%{opacity:1;transform:translate(40cqw,29cqw)}
 25%,100%{opacity:0;transform:translate(40cqw,29cqw)}}
@keyframes ap-k-d1{
 0%,29%{opacity:0;transform:translate(56cqw,29cqw)}
 30%{opacity:1;transform:translate(56cqw,29cqw)}
 32%{transform:translate(62cqw,29cqw)}
 37.5%{transform:translate(62cqw,11.5cqw)}
 40%{opacity:1;transform:translate(66cqw,11.5cqw)}
 41%,100%{opacity:0;transform:translate(66cqw,11.5cqw)}}
@keyframes ap-k-d2{
 0%,32%{opacity:0;transform:translate(56cqw,29cqw)}
 33%{opacity:1;transform:translate(56cqw,29cqw)}
 42%{opacity:1;transform:translate(66cqw,29cqw)}
 43%,100%{opacity:0;transform:translate(66cqw,29cqw)}}
@keyframes ap-k-d3{
 0%,35%{opacity:0;transform:translate(56cqw,29cqw)}
 36%{opacity:1;transform:translate(56cqw,29cqw)}
 38%{transform:translate(62cqw,29cqw)}
 44%{transform:translate(62cqw,50.5cqw)}
 46%{opacity:1;transform:translate(66cqw,50.5cqw)}
 47%,100%{opacity:0;transform:translate(66cqw,50.5cqw)}}
@keyframes ap-k-o1{
 0%,39%{transform:translateX(0);box-shadow:0 1.4cqw 3.5cqw rgba(0,0,0,.4)}
 41%{transform:translateX(-.8cqw);box-shadow:0 1.4cqw 3.5cqw rgba(0,0,0,.4),0 0 0 .3cqw var(--red)}
 47%,100%{transform:translateX(0);box-shadow:0 1.4cqw 3.5cqw rgba(0,0,0,.4)}}
@keyframes ap-k-o2{
 0%,41%{transform:translateX(0);box-shadow:0 1.4cqw 3.5cqw rgba(0,0,0,.4)}
 43%{transform:translateX(-.8cqw);box-shadow:0 1.4cqw 3.5cqw rgba(0,0,0,.4),0 0 0 .3cqw var(--red)}
 49%,100%{transform:translateX(0);box-shadow:0 1.4cqw 3.5cqw rgba(0,0,0,.4)}}
@keyframes ap-k-o3{
 0%,45%{transform:translateX(0);box-shadow:0 1.4cqw 3.5cqw rgba(0,0,0,.4)}
 47%{transform:translateX(-.8cqw);box-shadow:0 1.4cqw 3.5cqw rgba(0,0,0,.4),0 0 0 .3cqw var(--red)}
 53%,100%{transform:translateX(0);box-shadow:0 1.4cqw 3.5cqw rgba(0,0,0,.4)}}
@keyframes ap-k-sum{0%,40%{transform:scaleX(0)}44%,86%{transform:scaleX(1)}90%,100%{transform:scaleX(0)}}
@keyframes ap-k-sent{0%,42%{transform:scale(0)}45%{transform:scale(1.25)}47%,86%{transform:scale(1)}90%,100%{transform:scale(0)}}
@keyframes ap-k-row{
 0%,45%{opacity:0;transform:translateY(-1cqw)}
 48%{opacity:1;transform:translateY(0)}
 60%,86%{opacity:.7;transform:translateY(0)}
 90%,100%{opacity:0;transform:translateY(-1cqw)}}
@keyframes ap-k-chat{
 0%,50%{opacity:0;transform:translateY(2cqw);animation-timing-function:var(--ap-ease)}
 54%,84%{opacity:1;transform:translateY(0)}
 90%,100%{opacity:0;transform:translateY(2cqw)}}
@keyframes ap-k-typing{0%,54%{opacity:0}56%,63%{opacity:1}64%,100%{opacity:0}}
@keyframes ap-k-a1{0%,64%{transform:scaleX(0)}70%,86%{transform:scaleX(1)}90%,100%{transform:scaleX(0)}}
@keyframes ap-k-a2{0%,68%{transform:scaleX(0)}74%,86%{transform:scaleX(1)}90%,100%{transform:scaleX(0)}}