/* Copyright (c) 2026 Bc. Jan Krejčí. All rights reserved.                  */
/* Proprietary and confidential. See LICENSE in the project root.           */

/* ==========================================================================
 *  KURNÍK PROFI — marketing site styles
 *  Warm farmyard design system. Consumes the --kp-* brand tokens defined in
 *  forge-tokens.css so everything themes in light/dark automatically.
 * ========================================================================== */
.kp-site {
    font-family: var(--kp-font-body);
    color: var(--kp-ink);
    background: var(--kp-cream);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* `hidden` na jedné ose udělá z prvku scroll kontejner (druhá osa se
       dopočítá na `auto`) — a scroll-driven animace `view()` by pak měřily
       polohu vůči kontejneru, který se nikdy neposouvá, takže by odhalovací
       animace zůstaly navždy na začátku a obsah neviditelný. `clip` ořízne
       stejně, ale scroll kontejner nevytváří. Řádek nad ním je fallback pro
       prohlížeče bez podpory `clip`. */
    overflow-x: hidden;
    overflow-x: clip;
}
.kp-site h1, .kp-site h2, .kp-site h3, .kp-site h4 {
    font-family: var(--kp-font-display); font-weight: 600; line-height: 1.1; color: var(--kp-ink); margin: 0;
}
.kp-site a { color: inherit; text-decoration: none; }
/* Grid/flex children must be allowed to shrink below their min-content so long
   text wraps instead of overflowing on narrow phones (canonical grid-blowout fix). */
.kp-hero__inner > *, .kp-split > *, .kp-demo > *, .kp-contact > *, .kp-grid > *,
.kp-footer__inner > *, .kp-steps > *, .kp-roster > *, .kp-hencard__stats > * { min-width: 0; }
.kp-hero__title, .kp-hero__lead, .kp-lead, .kp-card p, .kp-coop__body p { overflow-wrap: break-word; }

/* ---- buttons ---- */
.kp-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    /* Ovládací prvky jedou Outfit — Fredoka drží nadpisy a čísla. */
    font-family: var(--kp-font-body); font-weight: 600; font-size: 1rem;
    padding: 0.8rem 1.5rem; border-radius: 999px; border: 2px solid transparent;
    cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    white-space: nowrap;
}
/* Primární akce je zelená — stejná zelená jako v hero. Web měl dřív dvě
   „hlavní" barvy (terakota v sekcích, zelená v hero) a působil slepeně;
   terakota zůstává na dřevo, ceny a varovné stavy. */
.kp-btn--primary {
    background: linear-gradient(180deg, var(--kp-a-2), var(--kp-a));
    color: #fff;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--kp-a) 32%, transparent);
}
.kp-btn--primary:hover {
    background: linear-gradient(180deg, var(--kp-a-2), var(--kp-a-deep));
    transform: translateY(-2px);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--kp-a) 40%, transparent);
}
.kp-btn--ghost { background: transparent; border-color: var(--kp-line); color: var(--kp-ink); }
.kp-btn--ghost:hover { background: var(--kp-cream-2); border-color: var(--kp-a-line); color: var(--kp-a-deep); transform: translateY(-2px); }
.kp-btn--yolk { background: var(--kp-yolk); color: var(--kp-ink); box-shadow: var(--kp-elev-1); }
.kp-btn--yolk:hover { transform: translateY(-2px); box-shadow: var(--kp-elev-2); filter: brightness(1.03); }
.kp-btn--lg { font-size: 1.08rem; padding: 0.95rem 1.8rem; }
.kp-btn:active { transform: translateY(0) scale(0.99); }
.kp-btn:focus-visible { outline: 3px solid var(--kp-a-line); outline-offset: 3px; }

/* ---- header ---- */
.kp-header {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--kp-cream) 82%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--kp-line-soft);
}
.kp-header__inner {
    max-width: 1180px; margin: 0 auto; padding: 0.7rem 1.5rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.kp-brand { display: inline-flex; align-items: center; gap: 0.65rem; }
.kp-brand__mark { display: grid; place-items: center; filter: drop-shadow(0 3px 6px rgba(58,42,34,.12)); }

/* Zlatý kohout z loga.
   Na světlé liště je světlá zlatá proti krému málo kontrastní, proto jde
   o odstín dolů a dostane měkký hnědý stín — ne obrys, ten by z kresby
   udělal nálepku. Na fotce v hero se naopak nechává v plné zlaté a stín
   je tmavý, aby se oddělil od oblohy. */
.kp-brand__logo {
    height: 44px;
    width: auto;
    flex: none;
    object-fit: contain;
    filter:
        drop-shadow(0 1px 1px rgba(58, 42, 34, 0.55))
        drop-shadow(0 2px 5px rgba(58, 42, 34, 0.28))
        brightness(0.87) saturate(1.16);
}

.kp-brand__logo--footer { height: 40px; }

[data-theme="dark"] .kp-brand__logo {
    filter:
        drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55))
        drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}
.kp-brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.kp-brand__name { font-family: var(--kp-font-display); font-weight: 700; font-size: 1.25rem; color: var(--kp-ink); }
.kp-brand__tag { font-size: 0.72rem; color: var(--kp-ink-faint); font-weight: 500; letter-spacing: .01em; }
.kp-brand--footer .kp-brand__tag { max-width: 30ch; }

.kp-nav { display: flex; align-items: center; gap: 0.35rem; }
.kp-nav__link {
    font-family: var(--kp-font-body); font-weight: 500; font-size: 0.98rem;
    padding: 0.5rem 0.85rem; border-radius: 999px; color: var(--kp-ink-soft);
    transition: color .15s ease, background .15s ease;
}
.kp-nav__link:hover { color: var(--kp-ink); background: var(--kp-cream-2); }
.kp-nav__link--smart { color: var(--kp-sky); }
/* Vstup do aplikace — odlišený rámečkem, ať je na první pohled vidět, že vede
   jinam než ostatní položky (do /app, ne na další stránku webu). */
.kp-nav__link--app {
    color: var(--kp-leaf-dark);
    border: 1px solid var(--kp-line);
}
.kp-nav__link--app:hover { background: var(--kp-yolk-soft); color: var(--kp-leaf-dark); }
.kp-nav__spark { color: var(--kp-yolk); }
.kp-nav__cta { margin-left: 0.4rem; }

.kp-themebtn {
    position: relative; width: 40px; height: 40px; border-radius: 999px;
    border: 1px solid var(--kp-line); background: var(--kp-cream-2); cursor: pointer;
    display: grid; place-items: center; font-size: 1rem; color: var(--kp-ink-soft);
    transition: background .15s ease, transform .15s ease;
}
.kp-themebtn:hover { background: var(--kp-yolk-soft); transform: rotate(-8deg); }

/* Tlačítko Vzhledu drží stejný tvar jako přepínač motivu, jen se netočí —
   posuvníky uvnitř ikony by při rotaci působily jako závada. */
.kp-themebtn--tweaks svg { width: 1.05rem; height: 1.05rem; }
.kp-themebtn--tweaks:hover { transform: none; background: var(--kp-a-soft); color: var(--kp-a-deep); }
.kp-themebtn--tweaks.is-on { background: var(--kp-a-soft); border-color: var(--kp-a-line); color: var(--kp-a-deep); }
[data-theme="dark"] .kp-themebtn--tweaks:hover,
[data-theme="dark"] .kp-themebtn--tweaks.is-on { color: var(--kp-a-2); }
.kp-themebtn__moon { display: none; }
[data-theme="dark"] .kp-themebtn__sun { display: none; }
[data-theme="dark"] .kp-themebtn__moon { display: inline; }

.kp-burger { display: none; flex-direction: column; gap: 5px; width: 42px; height: 42px; border: 0; background: transparent; cursor: pointer; padding: 10px; }
.kp-burger span { height: 2.5px; border-radius: 2px; background: var(--kp-ink); transition: .2s; }

/* ---- main / sections ----
   Rytmus sekcí: 96 px svisle, 24 px do stran (osmibodová mřížka). Dřív tu
   bylo 4.5rem/1.5rem — 72 px není násobek osmi a rozdíl proti sousedním
   pásům byl vidět jako „skoro zarovnané". */
.kp-main { flex: 1; }
.kp-section { max-width: 1180px; margin: 0 auto; padding: var(--kp-sp-12) var(--kp-sp-3); }
.kp-section--tight { padding-top: var(--kp-sp-4); }

/* Pás jiné barvy: místo tvrdé linky nahoře i dole měkký přechod do krému.
   Přechod mezi sekcemi má být plynulý, ne švem. */
.kp-band { position: relative; background: var(--kp-cream-2); }
.kp-band::before,
.kp-band::after {
    content: ""; position: absolute; inset-inline: 0; height: var(--kp-sp-5);
    pointer-events: none;
}
.kp-band::before { top: 0; background: linear-gradient(180deg, var(--kp-cream), transparent); }
.kp-band::after { bottom: 0; background: linear-gradient(0deg, var(--kp-cream), transparent); }
/* Pozicované pseudoprvky se kreslí nad neposicovaným obsahem — bez tohohle
   by přechod ležel přes první a poslední řádek textu v pásu. */
.kp-band > .kp-section { position: relative; z-index: 1; }
.kp-band--yolk { background: var(--kp-yolk-soft); }
.kp-band--sky { background: var(--kp-sky-soft); }

.kp-eyebrow {
    display: inline-flex; align-items: center; gap: .45rem; font-family: var(--kp-font-display);
    font-weight: 600; font-size: 0.8rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--kp-a-deep); background: var(--kp-a-soft); padding: .4rem .9rem; border-radius: 999px;
    border: 1px solid var(--kp-a-line);
}
[data-theme="dark"] .kp-eyebrow { color: var(--kp-a-2); }
.kp-h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.08; letter-spacing: -0.015em; margin: var(--kp-sp-2) 0 var(--kp-sp-1); }
.kp-lead { font-size: 1.1rem; color: var(--kp-ink-soft); line-height: 1.65; max-width: 60ch; }
.kp-section-head { text-align: center; display: grid; justify-items: center; margin-bottom: var(--kp-sp-6); }
.kp-section-head .kp-lead { margin-inline: auto; }

/* ---- hero ---- */
.kp-hero { position: relative; overflow: hidden; }
.kp-hero__inner {
    max-width: 1180px; margin: 0 auto; padding: 4rem 1.5rem 3rem;
    display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 2.5rem; align-items: center;
}
.kp-hero__title { font-size: clamp(2.3rem, 5.2vw, 4rem); line-height: 1.04; letter-spacing: -0.01em; }
.kp-hero__title .kp-hl { color: var(--kp-barn); white-space: nowrap; }
.kp-hl-underline { display: inline-block; position: relative; }
.kp-hl-underline::after {
    content: ""; position: absolute; left: 2%; right: 2%; bottom: 0.06em; height: 0.28em;
    background: var(--kp-yolk); border-radius: 999px; z-index: -1; opacity: .8;
}
.kp-hero__lead { margin: 1.3rem 0 1.8rem; font-size: 1.18rem; color: var(--kp-ink-soft); line-height: 1.6; max-width: 46ch; }
.kp-hero__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.kp-hero__trust { display: flex; gap: 1.4rem; margin-top: 1.8rem; flex-wrap: wrap; }
.kp-hero__trust b { font-family: var(--kp-font-display); font-size: 1.4rem; color: var(--kp-barn); display: block; }
.kp-hero__trust span { font-size: 0.82rem; color: var(--kp-ink-faint); }

/* ---- hero s fotografií (full-bleed) ------------------------------------
   Obraz je vrstva pod textem, ne sousední sloupec. Text drží LEVOU třetinu,
   kterou fotka nechává volnou; čitelnost zajišťuje krémový scrim zleva
   (17_HTML_Composition_Bible.md §Scrim recept) — ne ztmavení celého snímku,
   to by ze zlatého rána udělalo šeď.

   `object-position: right center` drží kurník v záběru i při jiném poměru
   stran okna; bez toho by se při širokém okně ořízl pravý okraj i se
   subjektem. */
.kp-hero--photo { display: grid; align-items: center; min-height: clamp(520px, 68vh, 720px); }
.kp-hero--photo > * { grid-area: 1 / 1; }

/* `align-items: center` platí i na obraz a scrim — a prázdný scrim by se tím
   srazil na nulovou výšku, takže by text ležel přímo na fotce. Obě vrstvy
   proto explicitně roztáhneme přes celou buňku. */
.kp-hero__media,
.kp-hero__scrim { align-self: stretch; justify-self: stretch; }

.kp-hero__media { display: block; height: 100%; }
.kp-hero__media img {
    width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block;
}

.kp-hero__scrim {
    pointer-events: none;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--kp-cream) 94%, transparent) 0%,
        color-mix(in srgb, var(--kp-cream) 72%, transparent) 34%,
        color-mix(in srgb, var(--kp-cream) 0%, transparent) 62%);
}

/* Kopie sedí v levé třetině; grid rodiče ji drží přes obraz. */
.kp-hero--photo .kp-hero__inner { grid-template-columns: minmax(0, 46%); width: 100%; }
.kp-hero--photo .kp-hero__title { text-shadow: 0 1px 0 color-mix(in srgb, var(--kp-cream) 60%, transparent); }

/* Tablet — text si vezme víc místa, ale zůstává vlevo; scrim je zleva,
   vycentrovaný text by z něj vypadl na osvětlenou louku. */
@media (max-width: 1024px) {
    .kp-hero--photo .kp-hero__inner { grid-template-columns: minmax(0, 62%); text-align: start; }
    .kp-hero--photo .kp-hero__lead { margin-inline: 0; }
    .kp-hero--photo .kp-hero__cta,
    .kp-hero--photo .kp-hero__trust { justify-content: flex-start; }
}

/* Mobil — obraz nahoře (4:5 výřez), text POD ním na krému. Text přes fotku
   by na telefonu musel přebít oblohu i trávu naráz; takhle je čitelnost
   jistá a scrim jen měkce spojí obraz s pozadím stránky. */
@media (max-width: 640px) {
    .kp-hero--photo { display: block; min-height: 0; }
    .kp-hero--photo > * { grid-area: auto; }
    .kp-hero__media img { aspect-ratio: 4 / 5; height: auto; object-position: center; }
    .kp-hero__scrim {
        position: absolute; inset-inline: 0; top: calc(100vw * 1.25 - 90px); height: 90px;
        background: linear-gradient(0deg,
            var(--kp-cream) 0%,
            color-mix(in srgb, var(--kp-cream) 0%, transparent) 100%);
    }
    .kp-hero--photo .kp-hero__inner { grid-template-columns: 1fr; padding-top: 1.5rem; }
    .kp-hero--photo .kp-hero__title { text-shadow: none; }
}

.kp-hero__art { position: relative; display: grid; place-items: center; min-height: 340px; }
.kp-hero__coop {
    position: relative; width: min(100%, 420px); aspect-ratio: 1.15; border-radius: var(--kp-radius-xl);
    background:
        radial-gradient(120% 90% at 50% 12%, var(--kp-sky-soft), transparent 60%),
        linear-gradient(180deg, var(--kp-cream-2), var(--kp-cream-3));
    box-shadow: var(--kp-shadow-lg); border: 1px solid var(--kp-line);
    display: grid; place-items: center;
}
.kp-hero__hens { display: flex; align-items: flex-end; gap: 4px; }
.kp-hero__sun { position: absolute; top: 8%; right: 10%; width: 64px; height: 64px; border-radius: 999px; background: var(--kp-yolk); box-shadow: 0 0 0 10px var(--kp-yolk-soft), var(--kp-shadow); }
.kp-float { position: absolute; opacity: .95; }
.kp-float--1 { top: 4%; left: -3%; }
.kp-float--2 { bottom: 2%; right: -2%; }

/* ---- hen mascot animation ---- */
.kp-hen { display: block; will-change: transform; }
.kp-hen--bob { animation: kp-bob 3.2s ease-in-out infinite; }
.kp-hen--bob.kp-hen--d1 { animation-delay: .4s; }
.kp-hen--bob.kp-hen--d2 { animation-delay: .9s; }
@keyframes kp-bob { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(1.5deg); } }

/* ---- feature / value cards ----
   Karta má tři vrstvy, které dělají „drahý" dojem: jemný přechod v ploše,
   světlý vlas na horní hraně (jako by na ni dopadalo světlo) a stín, který
   při hoveru vystoupá o jeden stupeň žebříku. */
.kp-grid { display: grid; gap: var(--kp-sp-3); }
.kp-grid--3 { grid-template-columns: repeat(3, 1fr); }
.kp-grid--4 { grid-template-columns: repeat(4, 1fr); }
.kp-grid--2 { grid-template-columns: repeat(2, 1fr); }
.kp-card {
    position: relative; overflow: hidden;
    /* Karta je „mléčné sklo": krytí bere z globálního tokenu, takže na ni
       platí posuvník „Sklo" stejně jako na panely v hero. */
    background:
        linear-gradient(180deg, var(--kp-glass-light), var(--kp-cream-2)),
        radial-gradient(120% 80% at 50% -20%, var(--kp-a-soft), transparent 62%);
    border: 1px solid var(--kp-line); border-radius: var(--kp-radius-lg);
    padding: var(--kp-sp-4); box-shadow: var(--kp-elev-1);
    transition: transform .28s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
                box-shadow .28s ease, border-color .28s ease;
}
.kp-card::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, #fff 70%, transparent), transparent);
    opacity: .8;
}
.kp-card:hover { transform: translateY(-6px); box-shadow: var(--kp-elev-2); border-color: var(--kp-a-line); }
.kp-card__icon {
    width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center;
    font-size: 1.6rem; margin-bottom: var(--kp-sp-2);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kp-ink) 8%, transparent);
    transition: transform .28s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.kp-card:hover .kp-card__icon { transform: translateY(-2px) rotate(-4deg); }
.kp-card__icon svg { width: 1.65rem; height: 1.65rem; }
.kp-card__icon--barn { background: var(--kp-barn-soft); color: var(--kp-barn); }
.kp-card__icon--yolk { background: var(--kp-yolk-soft); color: #B9820F; }
.kp-card__icon--leaf { background: var(--kp-leaf-soft); color: var(--kp-leaf-dark); }
.kp-card__icon--sky { background: var(--kp-sky-soft); color: var(--kp-sky); }
[data-theme="dark"] .kp-card__icon--yolk { color: var(--kp-yolk); }
.kp-card h3 { font-size: 1.15rem; line-height: 1.25; margin-bottom: var(--kp-sp-1); }
.kp-card p { color: var(--kp-ink-soft); line-height: 1.6; font-size: 0.96rem; }

/* ---- steps ----
   Čtyři kroky čtou jako cesta, ne jako čtyři nezávislé kartičky: mezi
   kolečky vede tenká linka, poslední ji nemá. Na mobilu se linka vypíná
   (sloupec pod sebou by ji vedl napříč textem). */
.kp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--kp-sp-3); }
.kp-step { position: relative; text-align: center; }
.kp-step:not(:last-child)::before {
    content: ""; position: absolute; top: 26px; left: calc(50% + 40px); right: calc(-50% + 40px); height: 2px;
    background: linear-gradient(90deg, var(--kp-a-line), color-mix(in srgb, var(--kp-line) 70%, transparent));
    border-radius: 999px;
}
.kp-step__num {
    position: relative; width: 52px; height: 52px; border-radius: 999px; margin: 0 auto var(--kp-sp-2);
    display: grid; place-items: center;
    font-family: var(--kp-font-display); font-weight: 700; font-size: 1.3rem; color: #fff;
    background: linear-gradient(180deg, var(--kp-a-2), var(--kp-a));
    box-shadow: 0 6px 16px color-mix(in srgb, var(--kp-a) 34%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, .35);
    transition: transform .28s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.kp-step:hover .kp-step__num { transform: translateY(-3px) scale(1.05); }
.kp-step h4 { font-size: 1.05rem; margin-bottom: var(--kp-sp-1); }
.kp-step p { font-size: .92rem; color: var(--kp-ink-soft); line-height: 1.55; }

/* ---- CTA banner ----
   Zelený závěr stránky se světelnou skvrnou v pravém horním rohu — plochý
   dvoubarevný přechod působil jako výplň, ne jako scéna. */
.kp-cta-band {
    max-width: 1180px; margin: var(--kp-sp-6) auto; padding: var(--kp-sp-8) var(--kp-sp-4);
    border-radius: var(--kp-radius-xl);
    background:
        radial-gradient(80% 120% at 82% -10%, rgba(255, 255, 255, .22), transparent 58%),
        linear-gradient(135deg, var(--kp-a), var(--kp-a-deep));
    color: #fff; text-align: center; box-shadow: var(--kp-elev-3); position: relative; overflow: hidden;
}
.kp-cta-band::after {
    content: ""; position: absolute; inset: 1px; border-radius: inherit; pointer-events: none;
    border: 1px solid rgba(255, 255, 255, .16);
}
/* V tmavém motivu je světlá zelená z tokenů na plný blok příliš křiklavá —
   pás jde o dva stupně dolů, aby zůstal akcentem, ne světlometem. */
[data-theme="dark"] .kp-cta-band {
    background:
        radial-gradient(80% 120% at 82% -10%, rgba(255, 255, 255, .10), transparent 58%),
        linear-gradient(135deg, #2F6428, #1E4419);
}
.kp-cta-band h2 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.4rem); }
.kp-cta-band p { color: rgba(255,255,255,.88); margin: var(--kp-sp-1) auto var(--kp-sp-3); max-width: 46ch; line-height: 1.6; }
.kp-cta-band .kp-btn--yolk { color: #3B2C10; }

/* ---- footer ----
   Patička je poslední dojem: měkký přechod z krému místo tvrdé linky,
   nadpisy sloupců jako drobná verzálková návěští a odkazy s posunem
   doprava při hoveru (žádné podtržení — v teplém krému působí špinavě). */
.kp-footer {
    position: relative; margin-top: var(--kp-sp-4);
    background: linear-gradient(180deg, var(--kp-cream), var(--kp-cream-2) var(--kp-sp-8));
}
.kp-footer::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 1px;
    background: linear-gradient(90deg, transparent, var(--kp-line), transparent);
}
.kp-footer__inner {
    max-width: 1180px; margin: 0 auto; padding: var(--kp-sp-8) var(--kp-sp-3) var(--kp-sp-4);
    display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: var(--kp-sp-4);
}
.kp-footer__brand .kp-brand { margin-bottom: var(--kp-sp-1); }
.kp-footer__blurb { color: var(--kp-ink-soft); line-height: 1.65; font-size: .95rem; max-width: 40ch; }
.kp-footer__col h4 {
    font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
    margin-bottom: var(--kp-sp-2); color: var(--kp-ink-faint);
}
.kp-footer__col a {
    display: block; width: fit-content; color: var(--kp-ink-soft); padding: .35rem 0; font-size: .93rem;
    transition: color .18s ease, transform .18s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.kp-footer__col a:hover { color: var(--kp-a-deep); transform: translateX(3px); }
[data-theme="dark"] .kp-footer__col a:hover { color: var(--kp-a-2); }
.kp-footer__note { display: block; color: var(--kp-ink-faint); font-size: .85rem; margin-top: var(--kp-sp-1); }
.kp-footer__bar {
    max-width: 1180px; margin: 0 auto; padding: var(--kp-sp-2) var(--kp-sp-3);
    border-top: 1px solid var(--kp-line-soft);
    display: flex; justify-content: space-between; gap: var(--kp-sp-2); flex-wrap: wrap;
    font-size: .85rem; color: var(--kp-ink-faint);
}
.kp-footer__made strong { color: var(--kp-a-deep); }
[data-theme="dark"] .kp-footer__made strong { color: var(--kp-a-2); }

/* ---- responsive ---- */
@media (max-width: 900px) {
    .kp-hero__inner { grid-template-columns: 1fr; text-align: center; }
    .kp-hero__lead { margin-inline: auto; }
    .kp-hero__cta, .kp-hero__trust { justify-content: center; }
    .kp-grid--3, .kp-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .kp-steps { grid-template-columns: repeat(2, 1fr); gap: var(--kp-sp-4) var(--kp-sp-3); }
    /* Spojnice kroků dává smysl jen v jedné řadě; ve dvou sloupcích by
       vedla z konce řádku doprava do prázdna. */
    .kp-step:not(:last-child)::before { display: none; }
    .kp-footer__inner { grid-template-columns: 1fr 1fr; gap: var(--kp-sp-5) var(--kp-sp-4); }
}
@media (max-width: 720px) {
    .kp-burger { display: flex; }
    .kp-nav {
        position: fixed; inset: 62px 0 auto 0; flex-direction: column; align-items: stretch;
        background: var(--kp-cream); border-bottom: 1px solid var(--kp-line); padding: 1rem 1.5rem 1.5rem;
        gap: .3rem; transform: translateY(-120%); transition: transform .25s ease; box-shadow: var(--kp-shadow);
    }
    .kp-nav.is-open { transform: translateY(0); }
    .kp-nav__cta { margin: .6rem 0 0; text-align: center; justify-content: center; }
    .kp-themebtn { align-self: flex-start; }
}
@media (max-width: 560px) {
    .kp-grid--3, .kp-grid--4, .kp-grid--2, .kp-steps { grid-template-columns: 1fr; }
    .kp-footer__inner { grid-template-columns: 1fr; }
    .kp-section { padding: var(--kp-sp-8) var(--kp-sp-3); }
    .kp-cta-band { margin-inline: var(--kp-sp-3); padding: var(--kp-sp-6) var(--kp-sp-3); border-radius: var(--kp-radius-lg); }
    /* Keep the decorative hero hens inside the phone viewport (3 fixed-size
       SVGs sum wider than a ~375px screen; scale the trio + clip the card). */
    .kp-hero__coop { overflow: hidden; }
    .kp-hero__hens { transform: scale(.82); }
    .kp-float--1 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .kp-hen--bob { animation: none; }
    .kp-btn, .kp-card, .kp-themebtn { transition: none; }
}

/* ==========================================================================
 *  Split sections (media + body side-by-side)
 * ========================================================================== */
.kp-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kp-sp-8); align-items: center; }
.kp-split--reverse .kp-split__media { order: 2; }
.kp-split__body .kp-eyebrow { margin-bottom: var(--kp-sp-1); }
.kp-split__body .kp-lead { margin: var(--kp-sp-1) 0 var(--kp-sp-3); }
.kp-split__media { display: grid; place-items: center; }

.kp-ticks { list-style: none; padding: 0; margin: 0 0 var(--kp-sp-3); display: grid; gap: var(--kp-sp-1); }
.kp-ticks li { position: relative; padding-left: 2.1rem; color: var(--kp-ink-soft); line-height: 1.5; }
.kp-ticks li::before {
    content: "✓"; position: absolute; left: 0; top: 0; width: 1.4rem; height: 1.4rem;
    display: grid; place-items: center; border-radius: 999px; font-size: .74rem; font-weight: 700;
    background: var(--kp-a-soft); color: var(--kp-a-deep);
    box-shadow: inset 0 0 0 1px var(--kp-a-line);
}
[data-theme="dark"] .kp-ticks li::before { color: var(--kp-a-2); }

/* photo placeholder card (stand-in until real project photos land) */
.kp-photo {
    position: relative; width: min(100%, 440px); aspect-ratio: 4 / 3; border-radius: var(--kp-radius-xl);
    display: grid; place-items: center; box-shadow: var(--kp-elev-2); border: 1px solid var(--kp-line);
    overflow: hidden;
}
/* Jemný rastr teček dá prázdné ploše texturu — bez něj je to jen barevný
   obdélník a čtenář ho čte jako chybějící obrázek, ne jako záměr. */
.kp-photo::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(circle, color-mix(in srgb, var(--kp-ink) 8%, transparent) 1px, transparent 1px);
    background-size: 18px 18px;
    mask-image: radial-gradient(80% 70% at 50% 45%, transparent 35%, #000 100%);
    -webkit-mask-image: radial-gradient(80% 70% at 50% 45%, transparent 35%, #000 100%);
    opacity: .7;
}

/* Vnitřní světelný lem — placeholder tím přestane vypadat jako prázdná
   plocha a začne číst jako fotorámeček, dokud nedorazí skutečné snímky. */
.kp-photo::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -40px 60px rgba(58, 42, 34, .05);
}
.kp-photo--barn { background: linear-gradient(150deg, var(--kp-barn-soft), var(--kp-cream-3)); }
.kp-photo--leaf { background: linear-gradient(150deg, var(--kp-leaf-soft), var(--kp-cream-3)); }
.kp-photo--sky { background: linear-gradient(150deg, var(--kp-sky-soft), var(--kp-cream-3)); }
.kp-photo--yolk { background: linear-gradient(150deg, var(--kp-yolk-soft), var(--kp-cream-3)); }
.kp-photo__badge {
    position: absolute; top: 1rem; left: 1rem; font-family: var(--kp-font-display); font-weight: 600;
    font-size: .8rem; color: var(--kp-ink); background: color-mix(in srgb, var(--kp-cream-2) 88%, transparent);
    padding: .35rem .8rem; border-radius: 999px; box-shadow: var(--kp-shadow-sm);
}

/* ==========================================================================
 *  Live chicken card (the "wow" teaser + full demo)
 * ========================================================================== */
/* Ukázka aplikace uvnitř marketingu. Musí vypadat jako reálná obrazovka,
   ne jako obrázek — proto skutečná elevace, světelný vlas nahoře a lehké
   nadzvednutí, když na ni uživatel najede. */
.kp-hencard {
    position: relative; width: min(100%, 400px);
    background: linear-gradient(180deg, var(--kp-cream-2), color-mix(in srgb, var(--kp-cream-2) 88%, var(--kp-cream)));
    border: 1px solid var(--kp-line);
    border-radius: var(--kp-radius-lg); padding: var(--kp-sp-3); box-shadow: var(--kp-elev-3);
    transition: transform .3s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)), box-shadow .3s ease;
}
.kp-hencard::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 1px; border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent);
}
.kp-split__media:hover .kp-hencard { transform: translateY(-4px); }
.kp-hencard__head { display: flex; align-items: center; gap: .85rem; }
.kp-hencard__head > div:first-of-type { flex: 1; }
.kp-hencard__name { font-family: var(--kp-font-display); font-weight: 700; font-size: 1.3rem; color: var(--kp-ink); }
.kp-hencard__breed { font-size: .85rem; color: var(--kp-ink-faint); }
.kp-hencard__chip {
    font-size: .74rem; font-weight: 600; color: var(--kp-ink-soft); background: var(--kp-cream-3);
    padding: .3rem .6rem; border-radius: 999px; white-space: nowrap;
}
.kp-hencard__alert {
    display: flex; align-items: center; gap: .8rem; margin: 1.1rem 0; padding: .9rem 1rem;
    border-radius: var(--kp-radius); background: var(--kp-barn-soft);
    border: 1px solid color-mix(in srgb, var(--kp-barn) 25%, transparent);
}
.kp-hencard__pot { font-size: 1.9rem; animation: kp-wobble 1.4s ease-in-out infinite; }
.kp-hencard__alert strong { display: block; font-family: var(--kp-font-display); color: var(--kp-barn-dark); font-size: .98rem; }
.kp-hencard__alert span { font-size: .88rem; color: var(--kp-ink-soft); }
.kp-hencard__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.kp-hencard__stats > div {
    background: var(--kp-cream); border: 1px solid var(--kp-line-soft); border-radius: var(--kp-radius);
    padding: .7rem .6rem; text-align: center;
}
.kp-hencard__k { display: block; font-size: .72rem; color: var(--kp-ink-faint); margin-bottom: .2rem; }
.kp-hencard__stats b { font-family: var(--kp-font-display); font-size: .95rem; color: var(--kp-ink); }
@keyframes kp-wobble { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }

@media (max-width: 900px) {
    .kp-split, .kp-split--reverse { grid-template-columns: 1fr; gap: 2rem; }
    .kp-split--reverse .kp-split__media { order: 0; }
    .kp-split__body { text-align: center; }
    .kp-split__body .kp-lead { margin-inline: auto; }
    .kp-ticks { display: inline-grid; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
    .kp-hencard__pot { animation: none; }
}

/* ==========================================================================
 *  Chytrý kurník — interactive roster + detail demo
 * ========================================================================== */
.kp-demo { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 2.5rem; align-items: start; }
.kp-demo__roster {
    background: var(--kp-cream-2); border: 1px solid var(--kp-line); border-radius: var(--kp-radius-lg);
    padding: 1.4rem; box-shadow: var(--kp-shadow-sm);
}
.kp-demo__roster-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1rem; }
.kp-demo__roster-head h3 { font-family: var(--kp-font-display); font-size: 1.2rem; }
.kp-demo__roster-head span { font-size: .82rem; color: var(--kp-ink-faint); }

.kp-roster { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.kp-roster__item {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .2rem;
    padding: .7rem .4rem; border-radius: var(--kp-radius); border: 2px solid transparent;
    background: var(--kp-cream); cursor: pointer; transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.kp-roster__item:hover { transform: translateY(-2px); background: var(--kp-cream-3); }
.kp-roster__item.is-active { border-color: var(--kp-barn); background: var(--kp-barn-soft); }
.kp-roster__item.is-scanning { animation: kp-scan 0.9s ease-in-out; }
.kp-roster__name { font-family: var(--kp-font-display); font-weight: 600; font-size: .84rem; color: var(--kp-ink); }
.kp-roster__dot { position: absolute; top: .55rem; right: .55rem; width: 10px; height: 10px; border-radius: 999px; box-shadow: 0 0 0 3px var(--kp-cream); }
.kp-roster__dot--ok { background: var(--kp-leaf); }
.kp-roster__dot--watch { background: var(--kp-yolk); }
.kp-roster__dot--alert { background: var(--kp-barn); animation: kp-pulse 1.6s ease-in-out infinite; }
@keyframes kp-scan { 0%,100% { box-shadow: 0 0 0 0 transparent; } 40% { box-shadow: 0 0 0 4px var(--kp-sky); } }
@keyframes kp-pulse { 0%,100% { box-shadow: 0 0 0 3px var(--kp-cream), 0 0 0 3px transparent; } 50% { box-shadow: 0 0 0 3px var(--kp-cream), 0 0 0 7px color-mix(in srgb, var(--kp-barn) 40%, transparent); } }

.kp-demo__tap { width: 100%; justify-content: center; margin-top: 1.3rem; }
.kp-demo__tap-scan { display: inline-flex; align-items: center; gap: .4rem; }
.kp-demo__hint { font-size: .82rem; color: var(--kp-ink-faint); line-height: 1.5; margin-top: .8rem; }

.kp-demo__detail { display: grid; place-items: center; }
.kp-hencard--lg { width: min(100%, 460px); }
.kp-hencard--pop { animation: kp-pop .5s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes kp-pop { 0% { transform: scale(.94); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }

.kp-hencard__alert--ok { background: var(--kp-leaf-soft); border-color: color-mix(in srgb, var(--kp-leaf) 30%, transparent); }
.kp-hencard__alert--ok strong { color: var(--kp-leaf-dark); }
.kp-hencard__alert--watch { background: var(--kp-yolk-soft); border-color: color-mix(in srgb, var(--kp-yolk) 40%, transparent); }
.kp-hencard__alert--watch strong { color: #9a6b12; }
.kp-hencard__alert--alert { background: var(--kp-barn-soft); border-color: color-mix(in srgb, var(--kp-barn) 25%, transparent); }
.kp-hencard__alert--ok .kp-hencard__pot,
.kp-hencard__alert--watch .kp-hencard__pot { animation: none; }

.kp-hencard__spark { margin-top: 1.1rem; }
.kp-bars { display: flex; align-items: flex-end; gap: 5px; height: 62px; margin-top: .5rem; }
.kp-bar { flex: 1; background: var(--kp-sky); border-radius: 4px 4px 0 0; min-height: 4px; opacity: .85; }

/* mini alert cards */
.kp-mini {
    background: var(--kp-cream-2); border: 1px solid var(--kp-line); border-radius: var(--kp-radius);
    padding: 1.2rem; text-align: center;
}
.kp-mini__ico { font-size: 1.9rem; display: block; margin-bottom: .5rem; }
.kp-mini b { font-family: var(--kp-font-display); display: block; margin-bottom: .3rem; color: var(--kp-ink); }
.kp-mini p { font-size: .88rem; color: var(--kp-ink-soft); line-height: 1.45; }

@media (max-width: 780px) {
    .kp-demo { grid-template-columns: 1fr; }
    .kp-demo__detail { order: -1; }
}

/* ==========================================================================
 *  Kurníky — coop gallery cards
 * ========================================================================== */
.kp-coop {
    background: var(--kp-cream-2); border: 1px solid var(--kp-line); border-radius: var(--kp-radius-lg);
    overflow: hidden; box-shadow: var(--kp-shadow-sm); transition: transform .2s ease, box-shadow .2s ease;
    display: flex; flex-direction: column;
}
.kp-coop:hover { transform: translateY(-4px); box-shadow: var(--kp-shadow); }
.kp-coop .kp-photo { width: 100%; border-radius: 0; box-shadow: none; border: 0; border-bottom: 1px solid var(--kp-line-soft); aspect-ratio: 16 / 10; }
.kp-coop__body { padding: 1.4rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.kp-coop__body h3 { font-size: 1.2rem; }
.kp-coop__body p { color: var(--kp-ink-soft); line-height: 1.5; font-size: .95rem; flex: 1; }
.kp-coop__specs { display: flex; gap: 1rem; font-size: .88rem; color: var(--kp-ink-soft); font-weight: 500; }
.kp-coop__foot { display: flex; align-items: center; justify-content: space-between; margin-top: .4rem; }
.kp-coop__price { font-family: var(--kp-font-display); font-weight: 700; font-size: 1.05rem; color: var(--kp-barn); }

/* ==========================================================================
 *  Kontakt — form + info
 * ========================================================================== */
.kp-contact { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2.5rem; align-items: start; }
.kp-contact__form {
    background: var(--kp-cream-2); border: 1px solid var(--kp-line); border-radius: var(--kp-radius-lg);
    padding: 2rem; box-shadow: var(--kp-shadow-sm);
}
.kp-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.kp-field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.1rem; }
.kp-field label { font-family: var(--kp-font-display); font-weight: 600; font-size: .92rem; color: var(--kp-ink); }
.kp-input {
    font-family: var(--kp-font-body); font-size: 1rem; color: var(--kp-ink);
    background: var(--kp-cream); border: 1.5px solid var(--kp-line); border-radius: var(--kp-radius);
    padding: .7rem .9rem; width: 100%; transition: border-color .15s ease, box-shadow .15s ease;
}
.kp-input::placeholder { color: var(--kp-ink-faint); }
.kp-input:focus { outline: none; border-color: var(--kp-barn); box-shadow: 0 0 0 3px var(--kp-barn-soft); }
.kp-input--area { resize: vertical; min-height: 96px; line-height: 1.5; }
.kp-field__err { color: var(--kp-barn-dark); font-size: .82rem; font-weight: 500; }
.kp-check { display: flex; align-items: flex-start; gap: .6rem; margin: .4rem 0 1.4rem; font-size: .95rem; color: var(--kp-ink-soft); cursor: pointer; }
.kp-check input { margin-top: .2rem; width: 18px; height: 18px; accent-color: var(--kp-barn); }
.kp-contact__submit { width: 100%; justify-content: center; }
.kp-contact__gdpr { font-size: .8rem; color: var(--kp-ink-faint); line-height: 1.5; margin-top: .9rem; text-align: center; }

.kp-thanks { text-align: center; display: grid; justify-items: center; gap: .6rem; padding: 1.5rem 0; }
.kp-thanks h3 { font-size: 1.5rem; margin-top: .5rem; }
.kp-thanks p { color: var(--kp-ink-soft); line-height: 1.6; max-width: 42ch; }
.kp-thanks .kp-btn { margin-top: 1rem; }

.kp-contact__info { display: grid; gap: 1.4rem; }
.kp-info-card {
    background: var(--kp-cream-2); border: 1px solid var(--kp-line); border-radius: var(--kp-radius-lg);
    padding: 1.6rem; box-shadow: var(--kp-shadow-sm);
}
.kp-info-card--soft { background: var(--kp-yolk-soft); border-color: transparent; }
.kp-info-card__mascot { margin-bottom: .4rem; }
.kp-info-card h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.kp-info-card > p { color: var(--kp-ink-soft); line-height: 1.5; font-size: .95rem; margin-bottom: 1rem; }
.kp-info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.kp-info-list li { display: flex; align-items: center; gap: .7rem; font-size: .95rem; color: var(--kp-ink); }
.kp-info-list li span:first-child { font-size: 1.1rem; }
.kp-info-list a { color: var(--kp-barn); font-weight: 600; }
.kp-info-list a:hover { text-decoration: underline; }
.kp-info-steps { margin: 0; padding-left: 1.2rem; display: grid; gap: .5rem; color: var(--kp-ink-soft); line-height: 1.5; font-size: .93rem; }
.kp-info-steps li { padding-left: .2rem; }

@media (max-width: 860px) {
    .kp-contact { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .kp-field-row { grid-template-columns: 1fr; gap: 0; }
    .kp-contact__form { padding: 1.4rem; }
}

/* ==========================================================================
 *  Odhalování při scrollu + doladění hover stavů
 *
 *  Bez jediného řádku JavaScriptu: `animation-timeline: view()` váže průběh
 *  animace na to, kde prvek je vůči viewportu. Žádný IntersectionObserver,
 *  žádné volání z Blazoru, nulová práce na hlavním vlákně.
 *
 *  Prohlížeče bez podpory (dnes Safari a Firefox) celý blok přeskočí přes
 *  `@supports` — obsah je tam prostě rovnou vidět. To je správné pořadí
 *  priorit: čitelnost je základ, odhalování je bonus.
 * ========================================================================== */

@keyframes kp-reveal {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
    :root:not([data-motion="reduced"]) .kp-section-head,
    :root:not([data-motion="reduced"]) .kp-card,
    :root:not([data-motion="reduced"]) .kp-step,
    :root:not([data-motion="reduced"]) .kp-coop,
    :root:not([data-motion="reduced"]) .kp-split__media,
    :root:not([data-motion="reduced"]) .kp-split__body,
    :root:not([data-motion="reduced"]) .kp-cta-band {
        animation: kp-reveal 0.7s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
        animation-timeline: view();
        animation-range: entry 8% cover 26%;
    }

    /* Stagger se u scroll-driven animací nedělá zpožděním (to je časová
       jednotka, tady běží „čas" po ose scrollu), ale posunutým rozsahem —
       druhá karta dobíhá o kus později než první. */
    :root:not([data-motion="reduced"]) .kp-grid > :nth-child(2),
    :root:not([data-motion="reduced"]) .kp-steps > :nth-child(2) { animation-range: entry 12% cover 30%; }
    :root:not([data-motion="reduced"]) .kp-grid > :nth-child(3),
    :root:not([data-motion="reduced"]) .kp-steps > :nth-child(3) { animation-range: entry 16% cover 34%; }
    :root:not([data-motion="reduced"]) .kp-grid > :nth-child(4),
    :root:not([data-motion="reduced"]) .kp-steps > :nth-child(4) { animation-range: entry 20% cover 38%; }

    /* Systémové omezení pohybu vyhrává nad výchozím stavem; volba „plný
       pohyb" v panelu Vzhled ho může vědomě přebít. */
    @media (prefers-reduced-motion: reduce) {
        :root:not([data-motion="full"]) .kp-section-head,
        :root:not([data-motion="full"]) .kp-card,
        :root:not([data-motion="full"]) .kp-step,
        :root:not([data-motion="full"]) .kp-coop,
        :root:not([data-motion="full"]) .kp-split__media,
        :root:not([data-motion="full"]) .kp-split__body,
        :root:not([data-motion="full"]) .kp-cta-band {
            animation: none;
            opacity: 1;
            transform: none;
        }
    }
}

/* ---- drobnosti, které dělají rozdíl ---- */

/* Odkazy v navigaci dostávají zelenou stopu místo šedého podbarvení. */
.kp-nav__link:hover { color: var(--kp-a-deep); background: var(--kp-a-soft); }
[data-theme="dark"] .kp-nav__link:hover { color: var(--kp-a-2); }
.kp-nav__link--app { border-color: var(--kp-a-line); color: var(--kp-a-deep); }
.kp-nav__link--app:hover { background: var(--kp-a-soft); color: var(--kp-a-deep); }
[data-theme="dark"] .kp-nav__link--app,
[data-theme="dark"] .kp-nav__link--app:hover { color: var(--kp-a-2); }

/* Klávesnicová dostupnost — jednotný zelený prstenec všude, kde se klika. */
.kp-nav__link:focus-visible,
.kp-footer__col a:focus-visible,
.kp-themebtn:focus-visible,
.kp-card:focus-visible,
.kp-coop:focus-visible {
    outline: 3px solid var(--kp-a-line);
    outline-offset: 3px;
    border-radius: var(--kp-radius);
}

/* Karta realizace zvedá i svou fotku — pohyb uvnitř karty ji oživí. */
.kp-coop .kp-photo { transition: transform .4s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)); }
.kp-coop:hover .kp-photo { transform: scale(1.03); }
.kp-coop:hover { box-shadow: var(--kp-elev-2); border-color: var(--kp-a-line); }

/* Odznak nad placeholderem je sklo, ne plná placka. */
.kp-photo__badge {
    background: var(--kp-glass-light);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: var(--kp-elev-1);
    border: 1px solid color-mix(in srgb, var(--kp-line) 70%, transparent);
}

/* Plochý režim efektů z panelu Vzhled — sklo i barevné záře pryč. */
:root[data-effects="minimal"] .kp-photo__badge {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--kp-cream-2);
}
:root[data-effects="minimal"] .kp-card,
:root[data-effects="minimal"] .kp-hencard { background: var(--kp-cream-2); box-shadow: none; }
:root[data-effects="minimal"] .kp-cta-band { background: var(--kp-a); box-shadow: none; }

/* Vypnutý pohyb — žádné zvedání ani odhalování. */
:root[data-motion="reduced"] .kp-card,
:root[data-motion="reduced"] .kp-hencard,
:root[data-motion="reduced"] .kp-coop,
:root[data-motion="reduced"] .kp-btn,
:root[data-motion="reduced"] .kp-card__icon,
:root[data-motion="reduced"] .kp-step__num,
:root[data-motion="reduced"] .kp-footer__col a {
    transition: none;
}
:root[data-motion="reduced"] .kp-card:hover,
:root[data-motion="reduced"] .kp-coop:hover,
:root[data-motion="reduced"] .kp-btn:hover,
:root[data-motion="reduced"] .kp-split__media:hover .kp-hencard,
:root[data-motion="reduced"] .kp-step:hover .kp-step__num,
:root[data-motion="reduced"] .kp-coop:hover .kp-photo {
    transform: none;
}