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

/* ═══════════════════════════════════════════════════════════════════════════
   HLAVNÍ STRÁNKA — výtvarná vrstva podle `_refs/ref1.png` + `_refs/ref5.png`

   Předlohy mají tři věci, které samotné karty a mřížky nedají:
     1. sekce se PROLÍNAJÍ (žádná ostrá hrana mezi pásy, jen měkké mytí barvou),
     2. po okrajích vykukují SLEPIČKY a snítky — stránka není tabulka,
     3. „Jak to probíhá" spojuje kroky ČÁRKOVANOU linkou, ne jen mezerou.

   Barvy jdou z design bible A1: zelená je primární, zlatá akcentní,
   terakota je vyhrazená pro kritická hlášení — proto se tu nikde nepoužívá
   jako dekorace, i když ji ref5 používá pro nadpisy. Místo ní nese důraz
   zlatá; jinak by byla „červená" na webu bezvýznamná a v aplikaci by
   přestala fungovat jako varování.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Barva, kterou stránka ZAČÍNÁ pod hero.

   Je to TOKEN, ne hodnota na dvou místech: touhle barvou dobíhá spodní hrana
   hero (kp-hero.css) a touž barvou začíná atmosférické pole. Kdyby to byly
   dva zápisy, rozejdou se při první úpravě a mezi fotkou a stránkou se objeví
   pruh — přesně ten, co se řešil čtyři kola. Není co trefovat: obě strany
   hrany čtou jeden token.

   Odvozená, ne zapsaná: světlá slonovina o chlup teplejší než bílá, aby na ni
   šlo fotku dovést, aniž by na konci vysvitla. */
:root {
    --kp-page-top: color-mix(in oklab, var(--kp-cream-2, #FFFBF3) 72%, #FFFFFF);
}

/* V noci stránka nezačíná bílou, ale nejsvětlejším odstínem tmavé řady —
   jinak by pod hero svítil pruh. */
[data-theme="dark"] {
    --kp-page-top: color-mix(in oklab, var(--kp-cream-2, #2A211A) 82%, var(--kp-cream, #201812));
}

:root {
    /* Tón vlnitých hran: teplejší odstín TÉŽE plochy, ne jiná barva. */
    --kp-wash: color-mix(in oklab, var(--kp-cream-3, #EBDDC4) 52%, var(--kp-cream-2, #FFFBF3));
}

[data-theme="dark"] {
    --kp-wash: color-mix(in oklab, var(--kp-gold, #D9A441) 8%, var(--kp-cream-2, #2A211A));
}

/* ── 0. Tvary vln ─────────────────────────────────────────────────────────
   Dvě křivky, čtyři tokeny. Používá je pás sítí (dole na úvodní stránce) i
   deska konfigurátoru — a konfigurátor je bere PROHOZENĚ, takže obě místa
   mají vlnu, ale ne tutéž. Dvakrát stejný tvar na jedné stránce se čte jako
   ornament ze šablony; prohozený se čte jako záměr.

   Prohodit je nešlo prostou záměnou proměnných: každá křivka má plochu jen
   v jedné polovině rámečku, takže `A` umí být jen horní hrana a `B` jen dolní.
   Varianty `-alt` jsou proto tytéž křivky PŘEKLOPENÉ (`scale(1 -1)`): křivka B
   jako horní hrana a A jako dolní. Hrana zůstane celistvá a změní se jen tvar.

   Křivky jsou nesouměrné schválně — souměrná vlna vypadá jako oddělovač,
   nesouměrná jako tvar světla. Jsou to `data:` URI, tedy geometrie bez
   jediného dotazu na server. */
:root {
    --kp-wave-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120V44c118-30 236-46 354-34 118 12 236 52 354 56 118 4 236-28 354-46 46-7 92-11 138-12v112z' fill='%23000'/%3E%3C/svg%3E");
    --kp-wave-a-alt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cg transform='translate(0 120) scale(1 -1)'%3E%3Cpath d='M0 0v70c140 26 280 34 420 20 140-14 280-50 420-48 96 1 192 22 288 40 24 4 48 8 72 10V0z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E");
    --kp-wave-b-alt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cg transform='translate(0 120) scale(1 -1)'%3E%3Cpath d='M0 120V44c118-30 236-46 354-34 118 12 236 52 354 56 118 4 236-28 354-46 46-7 92-11 138-12v112z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E");
    --kp-wave-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 0v70c140 26 280 34 420 20 140-14 280-50 420-48 96 1 192 22 288 40 24 4 48 8 72 10V0z' fill='%23000'/%3E%3C/svg%3E");
}

/* ── 1. Prolnutá pozadí ──────────────────────────────────────────────────── */

/* Sekce s měkkým mytím — nahoře i dole vyblednutí do barvy stránky, takže
   přechod mezi pásy nemá viditelnou hranu (ref5 nemá ani jednu ostrou linku). */
/* Mytí je `background-image` PŘÍMO na sekci, ne pseudoprvek. `.kp-band` už
   svoje `::before` a `::after` používá na prolnutí horní a dolní hrany do
   barvy stránky — první verze si je vzala pro sebe a přechody mezi pásy tím
   ztvrdly. Vrstvení obrázků přes barvu pozadí dělá totéž a nic nepřebíjí. */
/* Sekce už NEMAJÍ vlastní mytí.

   Měly ho: dvě radiálky na `::before` s maskou u hran. Dávalo to smysl, dokud
   stránka stála na jedné ploché barvě — mytí bylo jediné, co ji členilo. Od
   chvíle, kdy pod stránkou leží atmosférické pole, jsou to dvě konkurenční
   vrstvy: pole plyne přes celou stránku, mytí se u každé sekce znovu rozsvítí
   a u hran zhasne. Na spojích z toho byly ty „fleky", které klient viděl —
   nešlo o hranu, ale o dvě světla přes sebe.

   Členění je teď VÝHRADNĚ věcí pole (a tam, kde má být předěl vidět, věcí
   vlnky níž). Jedna vrstva, jeden zdroj pravdy. */
.kp-sect { position: relative; }

/* Třetí vrstva: široké, velmi slabé prosvětlení HORNÍ třetiny sekce. Dvě
   radiály samy o sobě dělaly „skvrnu vlevo a skvrnu vpravo dole"; tohle je
   spojí do jednoho světla, které sekci dá střed. Krytí je záměrně na hranici
   viditelnosti — má se to poznat jen tím, že stránka nepůsobí plocho. */
.kp-sect {
    --kp-wash-top: color-mix(in oklab, var(--kp-cream-2, #FFFBF3) 62%, transparent);
}

/* Sousední sekce si mytí ZRCADLÍ. Když stály obě skvrny pořád na stejné
   straně, vznikl při scrollování svislý pruh přes celou stránku; střídavé
   ukotvení z toho udělá rytmus. */
.kp-sect:nth-of-type(even) {
    --kp-wash-x: 85%;
    --kp-wash-x2: 12%;
}

/* Sousední sekce si střídají teplé a zelené mytí a obě jsou jen ODSTÍNEM na
   téže barvě stránky — pod nimi neleží vlastní plocha, takže mezi nimi
   nemůže vzniknout hrana. Sekce s vlastní plochou byly na hlavní stránce
   tři (krémová, modrá a founder) a každá
   dělala přes celou šířku viditelný předěl. Zbyly dvě, obě záměrné a obě s
   prolnutými okraji: konfigurátor (rozostřená zahrada) a pás komunity.

   Mytí drží pravidlo „všechno přes tweaks": barvy jdou z `--kp-green` a
   `--kp-gold`, které se odvozují od `--accent-h` — přebarvení akcentu v
   panelu Vzhled se propíše i sem.

   Sekce se ZÁMĚRNĚ nepřetahují zápornou mezerou. Nabízí se to — dvě plná
   odsazení pod sebou dělají velkou mezeru — jenže sekce jsou `relative` a
   ta pozdější by pak malovala svoje mytí přes patu té předchozí. Rytmus
   drží odsazení `.kp-section`, přechod dělá to, že pod mytím není žádná
   vlastní plocha. */

/* Sekce, která nese SPLIT i founder kartu, potřebuje mezi nimi vlastní
   rozestup — jsou to dva bloky jednoho příběhu, ne dvě sekce. */
.kp-smart .kp-founder { margin-top: clamp(2.5rem, 5vw, 4.5rem); }


/* ── 2. Dekorativní slepičky a snítky ───────────────────────────────────── */

/* Slepička u okraje sekce. Absolutně, mimo tok, `aria-hidden` v markupu —
   je to ozdoba, ne obsah. Pod 1180 px mizí: na užší stránce by lezla
   do textu a předloha ji tam taky nemá. */
.kp-deco {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    filter: drop-shadow(0 18px 26px rgba(60, 40, 20, 0.18));
    opacity: 0.9;
}

/* `KpAvatar` je čtvercový a bere výšku z `--kp-avatar-size`. Když se mu předá
   `100 %`, potřebuje rodiče se ZNÁMOU výškou — jinak je výsledek nula a kresba
   visí mimo box (v CTA pásu ji pak ořízlo `overflow: hidden`). Poměr stran to
   uzavírá: šířku známe, výška z ní plyne. */
.kp-deco {
    aspect-ratio: 1;
}

.kp-deco img,
.kp-deco .kp-avatar {
    display: block;
    width: 100%;
    height: 100%;
}

.kp-deco--l { left: clamp(4px, 1.6vw, 44px); }
.kp-deco--r { right: clamp(4px, 1.6vw, 44px); transform: scaleX(-1); }

.kp-deco--sm { width: clamp(96px, 9vw, 148px); }
.kp-deco--md { width: clamp(128px, 12vw, 196px); }
.kp-deco--lg { width: clamp(160px, 15vw, 248px); }

.kp-deco--top { top: 6%; }
.kp-deco--mid { top: 42%; }
.kp-deco--bot { bottom: 4%; }

/* Sloupec s obsahem je široký až 1560 px (--kp-page-max). Pod tím žádný
   postranní okraj nezbývá a ozdoba by lezla do textu — ověřeno měřením:
   při 1440 px kolidovala se seznamem u „Naše kurníky", při 1600 px už ne. */
@media (max-width: 1559px) {
    .kp-deco { display: none; }
}

/* Jemné pohupování — jako by slepička dýchala. Vypnuté při redukovaném
   pohybu i v našem `data-motion="reduced"`, aby to nebyl rušivý prvek. */
@keyframes kp-deco-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

@keyframes kp-deco-bob-flip {
    0%, 100% { transform: scaleX(-1) translateY(0); }
    50% { transform: scaleX(-1) translateY(-7px); }
}

.kp-deco--l { animation: kp-deco-bob 7s ease-in-out infinite; }
.kp-deco--r { animation: kp-deco-bob-flip 8.5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    :root:not([data-motion="full"]) .kp-deco { animation: none; }
}

:root[data-motion="reduced"] .kp-deco { animation: none; }

/* ── 3. Nadpis sekce s hvězdičkou ───────────────────────────────────────── */

/* Ref5 dává před každý štítek malou zlatou hvězdu. Je to drobnost, která
   drží rytmus celé stránky — bez ní vypadají štítky jako popisky formuláře. */
.kp-eyebrow--star::before {
    content: "✦";
    margin-right: 0.5em;
    color: var(--kp-gold, #D9A441);
    font-size: 0.95em;
}

/* Nadpis s jedním zvýrazněným slovem (ref1: „chovu **začíná dnes**").

   Barva jde z AKCENTU (`--kp-a`), ne ze značkové zeleně. `--kp-green` je
   definovaná jen uvnitř aplikační skořápky, takže na webu vždycky spadla na
   pevný hex — v tmavém motivu se zvýrazněné slovo přebarvovalo s posuvníkem
   „Odstín akcentu" a ve světlém ne. Přesně to zákazník nahlásil.
   Výchozí akcent (odstín 141) vychází na původní #3C7A34, takže se vzhled
   nemění, jen se konečně hýbe. */
.kp-h2 .kp-accent {
    color: var(--kp-a, #3C7A34);
}

[data-theme="dark"] .kp-h2 .kp-accent { color: var(--kp-a-2, #7FBF5F); }

/* ── 4. Kroky spojené čárkovanou linkou ─────────────────────────────────── */

/* Ref5 vede mezi kroky čárkovanou křivku. Původní `::before` kreslil jen
   rovnou čárku mezi sousedy — tady je jedna průběžná linka za všemi kroky,
   takže drží i při pěti sloupcích a nerozpadne se na kusy. */
.kp-steps--path {
    position: relative;
    grid-template-columns: repeat(5, 1fr);
}

.kp-steps--path::before {
    content: "";
    position: absolute;
    inset-inline: 8%;
    top: 30px;
    height: 2px;
    z-index: 0;
    background-image: linear-gradient(90deg, currentColor 55%, transparent 0);
    background-size: 12px 2px;
    background-repeat: repeat-x;
    color: color-mix(in oklab, var(--kp-a, #3C7A34) 42%, transparent);
}

.kp-steps--path .kp-step { z-index: 1; }

/* Kolečko s číslem musí linku překrýt, jinak jí projede skrz. */
.kp-steps--path .kp-step__num {
    box-shadow: 0 0 0 8px var(--kp-surface, #FBF6EC);
}

/* Původní spojnice mezi sousedy je v této variantě navíc. */
.kp-steps--path .kp-step:not(:last-child)::before { display: none; }

@media (max-width: 980px) {
    .kp-steps--path { grid-template-columns: repeat(2, 1fr); }
    .kp-steps--path::before { display: none; }
    .kp-steps--path .kp-step__num { box-shadow: none; }
}

@media (max-width: 560px) {
    .kp-steps--path { grid-template-columns: 1fr; }
}
/* ── 6. Karta „proč my" s ilustrací ─────────────────────────────────────── */

/* Ref5 dává nad titulek karty velký kreslený objekt. Naše karty mají jen
   malou ikonu v kroužku — zvětšení a měkké pozadí je posune blíž předloze,
   aniž bychom museli dokreslovat pět nových ilustrací. */
.kp-card--art { text-align: center; }

.kp-card--art .kp-card__icon {
    width: clamp(58px, 6vw, 74px);
    height: clamp(58px, 6vw, 74px);
    margin-inline: auto;
    border-radius: 24px;
}

.kp-card--art .kp-card__icon svg {
    width: 58%;
    height: 58%;
}

/* ── 7. Terakota patří výstrahám, ne dekoraci ───────────────────────────── */

/* Design bible A1 drží terakotu (`--kp-barn`) VÝHRADNĚ pro kritická hlášení
   a destruktivní akce. Karty ji používaly jen jako barvu ikony — na stránce plné klidných tónů pak vypadala jako varování
   a v aplikaci tím oslabovala skutečné výstrahy. Tady nese stejnou roli
   zelená, která je primární. */
.kp-card__icon--barn {
    background: color-mix(in oklab, var(--kp-a, #3C7A34) 16%, transparent);
    color: var(--kp-a, #3C7A34);
}

[data-theme="dark"] .kp-card__icon--barn {
    color: var(--kp-a-2, #7FBF5F);
}

/* ── 8. Ikony upozornění na stránce Funkce ──────────────────────────────── */

/* Dlaždice „Poznáme problém dřív než vy" nesly emoji. Každá platforma je
   kreslí jinak (na Windows ploše, na iOS barevně), takže čtyři dlaždice
   vedle sebe měly čtyři výtvarné jazyky — a zbytek stránky kreslí vlastní
   tahy. Teď je to inline SVG jako všude jinde. */
.kp-mini__ico {
    display: block;
    width: 34px;
    height: 34px;
    margin: 0 auto 0.55rem;
    color: var(--kp-gold, #D9A441);
}

.kp-mini__ico svg { width: 100%; height: 100%; }

/* Ikona ve „třech vrstvách" je teď kresba, ne znak — musí vyplnit dlaždici. */
.kp-card__icon > svg { width: 55%; height: 55%; }

/* ── 9. Seznam chovatelů ─────────────────────────────────────────────────── */

.kp-breeders__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

.kp-breeders__row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.75rem;
    border-radius: 14px;
    background: color-mix(in oklab, var(--kp-cream-2) 70%, transparent);
    border: 1px solid var(--kp-line, rgba(0, 0, 0, 0.08));
}

.kp-breeders__ico { flex: none; }
.kp-breeders__name { font-weight: 700; }

/* Odznak nese jméno úrovně, ne jen barvu — koruna sama je drobná a
   barvoslepý čtenář by zlatou od černé u 34px nerozeznal. */
.kp-breeders__tag {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
}

.kp-breeders__tag--gold {
    background: color-mix(in oklab, var(--kp-gold, #D9A441) 22%, transparent);
    color: #8A5F12;
}

.kp-breeders__tag--diamond {
    background: color-mix(in oklab, #111114 82%, transparent);
    color: #9FE8FF;
}

[data-theme="dark"] .kp-breeders__tag--gold { color: var(--kp-yolk, #E8B84B); }

.kp-breeders__meta { margin-left: auto; font-size: 0.85rem; opacity: 0.66; }
.kp-breeders__note { margin-top: 0.8rem; font-size: 0.84rem; opacity: 0.66; }

/* Rozbalení zbytku seznamu. Vypadá jako řádek seznamu, ne jako tlačítko akce:
   nic neodesílá, jen ukáže víc téhož — a kdyby mělo plnou váhu primárního
   tlačítka, přebilo by výzvu ke kontaktu o kus výš. */
.kp-breeders__more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
    padding: 11px 16px;
    border-radius: var(--kp-radius-md, 14px);
    border: 1px dashed color-mix(in oklab, var(--kp-line) 80%, transparent);
    background: color-mix(in oklab, var(--kp-surface) 60%, transparent);
    color: var(--kp-a-deep, #2F6428);
    font: inherit;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    transition: background var(--motion-durationFast, 160ms) var(--motion-easing, ease),
                border-color var(--motion-durationFast, 160ms) var(--motion-easing, ease);
}

.kp-breeders__more:hover {
    background: color-mix(in oklab, var(--kp-a, #3C7A34) 8%, var(--kp-surface));
    border-color: color-mix(in oklab, var(--kp-a, #3C7A34) 38%, var(--kp-line));
}

.kp-breeders__more:focus-visible { outline: 2px solid var(--kp-a, #3C7A34); outline-offset: 2px; }

.kp-breeders__more svg {
    width: 16px;
    height: 16px;
    transition: transform var(--motion-durationBase, 320ms) var(--motion-easing, ease);
}

.kp-breeders__more[aria-expanded="true"] svg { transform: rotate(180deg); }

:root[data-motion="reduced"] .kp-breeders__more,
:root[data-motion="reduced"] .kp-breeders__more svg { transition: none; }


/* ── 6. Ukázka karty z aplikace ──────────────────────────────────────────── */

/* Uvnitř je PŘÍMO `LiteHenCard` z aplikace i s vlastními styly (kp-lite.css).
   Tenhle blok proto neřeší, jak karta vypadá — jen kolik místa dostane. Kdyby
   sahal dovnitř, byla by z toho zase napodobenina: karta by se na webu
   vyvíjela jinak než v aplikaci a rozdíl by si nikdo nevšiml, dokud by ho
   klient neukázal na screenshotu.

   Šířka odpovídá jednomu sloupci mřížky `/lite`, ať karta na webu není větší,
   než jakou ji uživatel v aplikaci uvidí. */
.kp-appdemo {
    width: min(100%, 320px);
    /* Dva tokeny jednoduché verze, které `.henc*` potřebuje. Žijí na `.kp-lite`,
       což je celá skořápka aplikace i s rozvržením — tu sem vzít nejde. Hodnoty
       jsou proto psané STEJNÝM VÝRAZEM jako v kp-lite.css, ne přepsané na hex:
       když se změní značkový token, změní se obojí.
       Zbytek palety (zelená, zlatá, terakota, povrch) si karta bere z
       kp-brand.css — `.kp-appdemo` je tam v seznamu selektorů. */
    --lite-card: var(--kp-surface);
    --lite-track: color-mix(in oklab, var(--kp-ink) 10%, transparent);
}

[data-theme="dark"] .kp-appdemo { --lite-track: rgba(255, 255, 255, 0.09); }

/* ── 7. Sociální sítě ──────────────────────────────────────────────────────
   POZOR na jméno: `.kp-social` UŽ PATŘÍ sociálnímu důkazu v hero
   (kp-hero.css) — pás avatarů pod tlačítky. První verze téhle sekce si ho
   vzala a přepsala mu `display: flex` na `grid`; v hero se tím rozsypal pás
   a hledalo se to o dvě obrazovky jinde. Odtud `.kp-follow`. */

.kp-follow { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }

.kp-follow__links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.85rem;
}

/* Odkaz na profil je karta, ne ikonka: na tři sítě potřebuje čtenář vidět,
   KTERÁ to je a co tam najde, ne hádat podle piktogramu. */
.kp-follow__link {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.95rem 1.1rem;
    border-radius: var(--kp-radius-lg, 22px);
    background: var(--kp-surface);
    border: 1px solid var(--kp-line);
    box-shadow: var(--kp-shadow-sm);
    text-decoration: none;
    color: var(--kp-ink);
    transition: transform var(--motion-durationFast, 160ms) var(--motion-easing, ease),
                box-shadow var(--motion-durationFast, 160ms) var(--motion-easing, ease),
                border-color var(--motion-durationFast, 160ms) var(--motion-easing, ease);
}

.kp-follow__link:hover {
    transform: translateY(-2px);
    box-shadow: var(--kp-shadow);
    border-color: color-mix(in oklab, var(--kp-a, #3C7A34) 34%, var(--kp-line));
}

:root[data-motion="reduced"] .kp-follow__link { transition: none; }
:root[data-motion="reduced"] .kp-follow__link:hover { transform: none; }

/* Značková barva sítě jen v ikoně, ne na ploše. Tři plné firemní barvy vedle
   sebe by z pásu udělaly reklamní banner a rozbily by paletu stránky. */
.kp-follow__ico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    color: #fff;
}

.kp-follow__ico svg { width: 22px; height: 22px; }

.kp-follow__link--tiktok .kp-follow__ico { background: linear-gradient(140deg, #25F4EE, #111, #FE2C55); }
.kp-follow__link--instagram .kp-follow__ico { background: linear-gradient(140deg, #F9CE34, #EE2A7B, #6228D7); }
.kp-follow__link--facebook .kp-follow__ico { background: #1877F2; }
.kp-follow__link--youtube .kp-follow__ico { background: #FF0000; }

.kp-follow__text { display: grid; min-width: 0; }
.kp-follow__text b { font-size: 1rem; }
.kp-follow__text em { font-style: normal; font-size: 0.84rem; color: var(--kp-ink-faint); }

.kp-follow__go { margin-left: auto; color: var(--kp-ink-faint); }
.kp-follow__go svg { width: 18px; height: 18px; display: block; }
.kp-follow__link:hover .kp-follow__go { color: var(--kp-a-deep, #2F6428); }

/* ---- stěna videí ---- */

.kp-follow__wall {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kp-follow__tile {
    position: relative;
    /* Poměr svislého videa — TikTok i Reels. Rezervuje místo dřív, než se
       přehrávač načte, takže se stránka po kliknutí nepřeskládá. */
    aspect-ratio: 9 / 16;
    max-height: 62vh;
    border-radius: var(--kp-radius-lg, 22px);
    overflow: hidden;
    background: var(--kp-cream-3);
    border: 1px solid var(--kp-line);
}

.kp-follow__player { width: 100%; height: 100%; border: 0; display: block; }

/* Náhled do kliknutí. Není to jen ozdoba: vložený přehrávač s sebou nese
   skript té sítě a ten sleduje návštěvníka i bez přehrání. */
.kp-follow__play {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 0.8rem;
    width: 100%;
    height: 100%;
    padding: 1.25rem;
    border: 0;
    cursor: pointer;
    font: inherit;
    text-align: center;
    color: var(--kp-ink);
    background:
        radial-gradient(90% 70% at 50% 0%, color-mix(in oklab, var(--kp-a, #3C7A34) 12%, transparent), transparent 70%),
        var(--kp-cream-2);
}

.kp-follow__play:focus-visible { outline: 3px solid var(--kp-a-line); outline-offset: -3px; }

.kp-follow__badge {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--kp-cream-3);
    color: var(--kp-ink-soft);
    font-size: 0.72rem;
    font-weight: 700;
}

.kp-follow__disc {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(140deg, var(--kp-a, #3C7A34), var(--kp-a-deep, #2F6428));
    box-shadow: var(--kp-elev-2);
    transition: transform var(--motion-durationFast, 160ms) var(--motion-easing, ease);
}

.kp-follow__disc svg { width: 24px; height: 24px; margin-left: 3px; }
.kp-follow__play:hover .kp-follow__disc { transform: scale(1.06); }
:root[data-motion="reduced"] .kp-follow__disc { transition: none; }
:root[data-motion="reduced"] .kp-follow__play:hover .kp-follow__disc { transform: none; }

.kp-follow__title { font-size: 0.9rem; line-height: 1.45; color: var(--kp-ink-soft); }


/* ── 8. Tři vrstvy chytrého kurníku ──────────────────────────────────────── */

/* Karty jsou KROKY jedné cesty (kroužek → jednotka → telefon), ne tři nezávislé
   vlastnosti — z mřížky rovnocenných karet to nešlo poznat. Číslo v kroužku a
   čárkovaná spojnice mezi nimi to řeknou dřív, než čtenář dočte nadpisy; je to
   stejný jazyk jako „Jak to probíhá" na hlavní stránce, takže se web neučí
   podruhé. */
.kp-layers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2.4vw, 2rem);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: layer;
}

.kp-layer {
    position: relative;
    padding: clamp(1.4rem, 2.4vw, 2rem) clamp(1.2rem, 2vw, 1.8rem) clamp(1.4rem, 2.4vw, 1.9rem);
    border-radius: var(--kp-radius-lg, 22px);
    background: var(--kp-surface);
    border: 1px solid var(--kp-line);
    box-shadow: var(--kp-shadow-sm);
}

/* Spojnice VEDE OD karty doprava, nekreslí se pod ní přes celou šířku: mezi
   kartami je mezera z `gap` a čára ji přesně vyplní. Poslední ji nemá — cesta
   tam končí. */
.kp-layer:not(:last-child)::after {
    content: "";
    position: absolute;
    top: clamp(2.6rem, 4vw, 3.4rem);
    left: 100%;
    width: clamp(1rem, 2.4vw, 2rem);
    border-top: 2px dashed color-mix(in oklab, var(--kp-a, #3C7A34) 34%, transparent);
}

.kp-layer__num {
    position: absolute;
    top: clamp(1.2rem, 2vw, 1.6rem);
    right: clamp(1.2rem, 2vw, 1.6rem);
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--kp-a, #3C7A34) 12%, transparent);
    color: var(--kp-a-deep, #2F6428);
    font-family: var(--kp-font-display);
    font-size: 0.92rem;
    font-weight: 700;
}

.kp-layer__ico {
    display: grid;
    place-items: center;
    width: clamp(46px, 5vw, 56px);
    height: clamp(46px, 5vw, 56px);
    margin-bottom: 0.9rem;
    border-radius: 18px;
    color: var(--kp-a-deep, #2F6428);
    background: linear-gradient(150deg,
        color-mix(in oklab, var(--kp-a, #3C7A34) 16%, transparent),
        color-mix(in oklab, var(--kp-gold, #D9A441) 12%, transparent));
}

.kp-layer__ico svg { width: 55%; height: 55%; }
.kp-layer h3 { margin: 0 0 0.4rem; font-size: 1.12rem; }
.kp-layer p { margin: 0; color: var(--kp-ink-soft); line-height: 1.6; }

@media (max-width: 900px) {
    .kp-layers { grid-template-columns: minmax(0, 1fr); }
    /* Na jednom sloupci vede cesta dolů, ne doprava. */
    .kp-layer:not(:last-child)::after {
        top: 100%;
        left: clamp(2rem, 6vw, 3rem);
        width: 0;
        height: clamp(0.8rem, 3vw, 1.4rem);
        border-top: 0;
        border-left: 2px dashed color-mix(in oklab, var(--kp-a, #3C7A34) 34%, transparent);
    }
}


/* ── 9. Zóna aplikace (ukázka + náhled + hra) ────────────────────────────── */

/* Tři sekce s vlastním pozadím se slily do jedné. Byl to jeden příběh
   rozstřihaný na tři pásy: „takhle vypadá vaše hejno" → „tohle dostanete do
   telefonu" → „a takhle vás to baví". Uvnitř se pozadí mění jen jednou, pod
   hrou — a to je záměr, ne pozůstatek. */
.kp-appzone .kp-demo,
.kp-appzone .kp-appshow,
.kp-appzone .kp-play { margin-top: clamp(2.5rem, 5vw, 4.5rem); }

.kp-appzone .kp-demo { margin-top: 0; }

/* Karta z aplikace uprostřed ukázky. `is-fresh` naskočí po „načtení" čtečkou —
   krátké nadzvednutí a prosvětlení, ne poskočení: karta se nemá tvářit, že se
   překreslila, ale že přišla nová hodnota. */
.kp-appzone .kp-appdemo { margin-inline: auto; }

@keyframes kp-fresh {
    0%   { transform: translateY(6px) scale(0.985); box-shadow: 0 0 0 0 color-mix(in oklab, var(--kp-a, #3C7A34) 45%, transparent); }
    45%  { box-shadow: 0 0 0 10px color-mix(in oklab, var(--kp-a, #3C7A34) 0%, transparent); }
    100% { transform: none; box-shadow: 0 0 0 0 color-mix(in oklab, var(--kp-a, #3C7A34) 0%, transparent); }
}

.kp-appzone .kp-appdemo.is-fresh {
    animation: kp-fresh 0.7s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
    border-radius: 22px;
}

:root[data-motion="reduced"] .kp-appzone .kp-appdemo.is-fresh { animation: none; }

/* Věta pod kartou nese to, co karta z aplikace neumí říct: proč se na ni
   zrovna teď díváme. V aplikaci to řekne upozornění, tady popisek. */
.kp-demo__caption {
    max-width: 340px;
    margin: 1rem auto 0;
    text-align: center;
    line-height: 1.5;
}

.kp-demo__caption b { display: block; font-family: var(--kp-font-display); color: var(--kp-ink); }
.kp-demo__caption span { font-size: 0.9rem; color: var(--kp-ink-soft); }

.kp-demo__tapico { display: grid; place-items: center; }
.kp-demo__tapico svg { width: 18px; height: 18px; }

/* ---- hra ---- */

/* Jediná tmavá plocha na stránce, a záměrně: odděluje nástroj od zábavy.
   Není to pás přes celou šířku, ale deska uvnitř zóny — tím zmizel předěl,
   kvůli kterému stránka v tom místě „skákala". */
.kp-play {
    padding: clamp(1.75rem, 3.5vw, 3rem);
    border-radius: var(--kp-radius-xl, 28px);
    color: #fff;
    background:
        radial-gradient(110% 130% at 12% -10%,
            color-mix(in oklab, var(--kp-yolk, #E8B84B) 22%, transparent), transparent 56%),
        linear-gradient(150deg,
            color-mix(in oklab, var(--kp-a-deep, #2F6428) 88%, #000),
            color-mix(in oklab, var(--kp-a-deep, #2F6428) 62%, #000));
    box-shadow: 0 28px 70px color-mix(in oklab, var(--kp-a-deep, #2F6428) 26%, transparent);
}

.kp-play__head { text-align: center; margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.kp-play__head .kp-eyebrow { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.86); }
.kp-play__head .kp-h3 { margin: 0.5rem 0 0; color: #fff; font-size: clamp(1.4rem, 2.4vw, 2rem); }

.kp-play__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.85rem;
}

.kp-play__card {
    display: grid;
    justify-items: center;
    gap: 0.3rem;
    padding: 1.15rem 0.9rem 1.25rem;
    text-align: center;
    border-radius: var(--kp-radius-lg, 22px);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.kp-play__ico {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 0.35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: var(--kp-yolk, #E8B84B);
}

.kp-play__ico svg { width: 21px; height: 21px; }
.kp-play__val { font-family: var(--kp-font-display); font-size: 1.35rem; color: #fff; }
.kp-play__name { font-size: 0.92rem; color: rgba(255, 255, 255, 0.9); }
.kp-play__note { font-size: 0.78rem; color: rgba(255, 255, 255, 0.6); }


/* ── 5. Závěrečný pás „Večerní klid" ─────────────────────────────────────────
   Poslední blok každé stránky. Podoba jde z klientovy předlohy: tmavá deska,
   vlevo výzva, uprostřed rozsvícený kurník, vpravo karta upozornění a u kraje
   spící slepička.

   Není to pás přes celou šířku, ale KARTA na barvě stránky. Plný tmavý pruh
   by mezi krémovými sousedy udělal přesně ten předěl, kterého se web na všech
   stránkách zbavoval; karta drží kontrast a hranu nemá.

   Barvy jdou z `--kp-a*` a `--kp-yolk` (tedy z `--accent-h`), takže přebarvení
   akcentu v panelu Vzhled se propíše i sem. */

.kp-night { position: relative; }

.kp-night__card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    /* Dva sloupce, ne tři. Fotka NENÍ sloupec — leží pod obsahem přes celou
       desku (viz `.kp-night__art`), takže se může rozpouštět do obou stran.
       Když měla vlastní sloupec, končila na jeho hraně a maska musela hádat,
       kde přesně; výsledek byl obdélník s měkkými rohy, ne rozplynutí. */
    /* Karta upozornění je UŽŠÍ než dřív (0,68 místo 0,85). Byla skoro stejně
       široká jako text a brala kurníku místo; teď je to poznámka vedle výzvy,
       ne druhý sloupec obsahu. Strop navíc drží její šířku i na 2560px
       monitoru, kde by z podílu vyšla karta přes 600 px. */
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.58fr);
    align-items: center;
    gap: clamp(1.25rem, 3vw, 3rem);
    padding: clamp(1.75rem, 3.4vw, 3rem);
    /* Vpravo je místo REZERVOVANÉ pro slepičku. Sedí `absolute`, takže z toku
       nic neposouvá — bez rezervy by přelezla přes kartu upozornění. */
    padding-right: clamp(1.75rem, 3.4vw + clamp(140px, 14vw, 215px), 16rem);
    border-radius: var(--kp-radius-xl, 28px);
    color: #fff;
    /* Modrá hodina, ne černá: fotka má teplá okna a na černém podkladu by z ní
       byl vystřižený obdélník. */
    background:
        radial-gradient(120% 150% at 84% -30%,
            color-mix(in oklab, var(--kp-yolk, #E8B84B) 14%, transparent), transparent 55%),
        linear-gradient(145deg, #16233A, #0D1524 58%, #0A1020);
    box-shadow: 0 34px 80px rgba(6, 12, 22, 0.42);
}

.kp-night__card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.12);
    pointer-events: none;
}

/* Hvězdy. Tři vrstvy jemných teček, žádný obrázek — je to dekorace, která
   nesmí stát ani jeden dotaz na server. */
.kp-night__sky {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
    background-image:
        radial-gradient(1.4px 1.4px at 12% 22%, rgba(255, 255, 255, 0.9), transparent 60%),
        radial-gradient(1.1px 1.1px at 28% 12%, rgba(255, 255, 255, 0.7), transparent 60%),
        radial-gradient(1.6px 1.6px at 46% 30%, rgba(255, 255, 255, 0.55), transparent 60%),
        radial-gradient(1.2px 1.2px at 63% 8%, rgba(255, 255, 255, 0.8), transparent 60%),
        radial-gradient(1.5px 1.5px at 78% 26%, rgba(255, 255, 255, 0.6), transparent 60%),
        radial-gradient(1.1px 1.1px at 91% 14%, rgba(255, 255, 255, 0.75), transparent 60%);
}

:root[data-effects="minimal"] .kp-night__sky { display: none; }

/* ---- fotka kurníku ---- */

/* PŘES CELOU VÝŠKU desky a rozpuštěná do stran. Tohle je celé to „rozplynutí":
   svisle se nemaskuje vůbec (deska má zaoblené rohy a `overflow: hidden`, takže
   se fotka o ně ořízne sama), vodorovně jede přechod na obou stranách přes
   pětinu šířky obrázku.

   Předchozí verze měla RADIÁLNÍ masku uvnitř mřížkového sloupce. Radiála na
   obdélníku nikdy nedojde do nuly na všech čtyřech stranách současně: kde má
   být krytí nulové v rozích, na hranách zůstane. Odtud ten „skoro obdélník".

   `mask-repeat: no-repeat` je povinné — výchozí `repeat` nasadí za hranou
   další dlaždici masky a krytí vyskočí zpátky na plno. */
.kp-night__art {
    position: absolute;
    top: 0;
    bottom: 0;
    /* Začíná UŽ POD TEXTEM a končí pod kartou upozornění — přesně tak, aby
       kurník vyšel do mezery mezi ně a NEZMIZEL za kartou. Šířka je menší než
       poměr výřezu × výška, takže `cover` ořezává do stran a `object-position`
       níž rozhoduje, kterou částí — jinak by o výsledku rozhodovala náhoda. */
    left: 20%;
    width: 40%;
    z-index: 0;
    pointer-events: none;
    /* Delší náběh vlevo než doprava: vlevo pod fotkou leží text a musí zůstat
       čitelný, vpravo jen prázdná deska. */
    --kp-night-fade: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 0, 0, 0.22) 14%,
        #000 34%, #000 76%,
        rgba(0, 0, 0, 0.32) 91%,
        transparent 100%);
    mask-image: var(--kp-night-fade);
    -webkit-mask-image: var(--kp-night-fade);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
}

.kp-night__art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Vodorovná složka rozhoduje, svislá ne: místo v pásu je nižší než výřez,
       takže `cover` ořezává do stran. Slepičky u spodní hrany proto nešlo
       schovat posunem — musely ven už z výřezu (viz build-vecer.py). */
    object-position: 64% 50%;
    /* Fotka je pozadí, ne obsah — o pár procent ztlumená, aby text vlevo a
       karta vpravo držely kontrast i tam, kde přes ni přesahují. */
    opacity: 0.92;
}

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

.kp-night__body { position: relative; z-index: 1; }

.kp-night__card .kp-night__title {
    margin: 0;
    /* Patkový nadpisový font. Karta stojí na KAŽDÉ stránce webu, takže
       to byl jediný nadpis, který se s patkovou sazbou minul všude
       najednou — a přesně proto si ho člověk všimne. */
    font-family: var(--kp-font-head);
    font-size: clamp(1.65rem, 2.9vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #fff;
    /* Nadpis leží nad fotkou; stín ho udrží čitelný i tam, kde pod ním
       prosvítá rozsvícené okno. */
    text-shadow: 0 2px 18px rgba(6, 12, 22, 0.6);
}

.kp-night__accent { color: var(--kp-yolk, #E8B84B); }

.kp-night__card .kp-night__lead {
    margin: 0.75rem 0 0;
    max-width: 40ch;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.6;
    text-shadow: 0 1px 12px rgba(6, 12, 22, 0.55);
}

.kp-night__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem 1.3rem;
    margin-top: 1.4rem;
}

/* Tlačítko je OBRYSOVÉ, ne plné — v předloze taky. Plná zlatá by na tmavé
   desce přesvítila fotku a pás by se rozpadl na dvě soutěžící místa. */
.kp-site a.kp-night__btn {
    display: inline-flex;
    align-items: center;
    padding: 0.7rem 1.5rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    background: rgba(10, 16, 30, 0.42);
    backdrop-filter: blur(calc(var(--kp-glass-blur, 24px) * 0.25));
    -webkit-backdrop-filter: blur(calc(var(--kp-glass-blur, 24px) * 0.25));
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--motion-durationFast, 160ms) var(--motion-easing, ease),
                border-color var(--motion-durationFast, 160ms) var(--motion-easing, ease);
}

.kp-site a.kp-night__btn:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.62);
}

.kp-site a.kp-night__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
    text-decoration: none;
    text-shadow: 0 1px 10px rgba(6, 12, 22, 0.6);
}

.kp-site a.kp-night__link:hover { color: var(--kp-yolk, #E8B84B); }
.kp-night__link svg { width: 16px; height: 16px; transition: transform var(--motion-durationFast, 160ms) var(--motion-easing, ease); }
.kp-night__link:hover svg { transform: translateX(3px); }

.kp-night__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    margin: 1.4rem 0 0;
    padding: 1.1rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    list-style: none;
}

.kp-night__facts li { display: grid; }
.kp-night__facts b { font-size: 0.86rem; color: rgba(255, 255, 255, 0.94); text-shadow: 0 1px 10px rgba(6, 12, 22, 0.6); }
.kp-night__facts em { font-style: normal; font-size: 0.76rem; color: rgba(255, 255, 255, 0.55); }

/* ---- karta upozornění ---- */

.kp-night__panel {
    position: relative;
    z-index: 1;
    justify-self: end;
    width: 100%;
    max-width: 400px;
    padding: 1rem 1rem 0.85rem;
    border-radius: var(--kp-radius-lg, 22px);
    background: rgba(10, 17, 30, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(var(--kp-glass-blur, 12px));
    -webkit-backdrop-filter: blur(var(--kp-glass-blur, 12px));
}

:root[data-effects="minimal"] .kp-night__panel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(10, 17, 30, 0.95);
}

.kp-night__panelhead {
    display: block;
    margin-bottom: 0.7rem;
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.78rem;
    font-weight: 700;
}

.kp-night__panel ul { display: grid; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }

.kp-night__panel li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.7rem;
    border-radius: var(--kp-radius, 14px);
    background: rgba(255, 255, 255, 0.06);
}

.kp-night__dot {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    color: var(--kp-a-2, #74C463);
    background: color-mix(in oklab, var(--kp-a-2, #74C463) 22%, transparent);
}

.kp-night__panel li.is-warn .kp-night__dot {
    color: var(--kp-yolk, #E8B84B);
    background: color-mix(in oklab, var(--kp-yolk, #E8B84B) 22%, transparent);
}

.kp-night__dot svg { width: 14px; height: 14px; }
.kp-night__alert { display: grid; min-width: 0; }
.kp-night__alert b { font-size: 0.84rem; font-weight: 600; color: rgba(255, 255, 255, 0.94); }
.kp-night__alert em { font-style: normal; font-size: 0.72rem; color: rgba(255, 255, 255, 0.45); }
.kp-night__chev { width: 14px; height: 14px; margin-left: auto; color: rgba(255, 255, 255, 0.35); }

/* ---- spící slepička ---- */

/* `moods/sleeping-full` ze sady avatarů — spí, má čepičku a „zzz" nakreslené.
   Průhledné pozadí, takže žádná maska: dřív to byl výřez z fotky a za slepicí
   zůstával kus trávy, který se maskou nedal odstranit, jen rozmazat.
   Pod 1200 px mizí — na užší desce by přelezla přes kartu upozornění. */
.kp-night__hen {
    position: absolute;
    right: clamp(-14px, -0.6vw, 0px);
    bottom: -2px;
    width: clamp(140px, 14vw, 215px);
    z-index: 1;
    pointer-events: none;
    filter: drop-shadow(0 14px 26px rgba(4, 9, 18, 0.55));
}

.kp-night__hen img { display: block; width: 100%; height: auto; }

@media (max-width: 1200px) {
    .kp-night__card { padding-right: clamp(1.75rem, 3.4vw, 3rem); }
    /* Fotka i slepička mizí společně: bez slepičky by fotka zabrala celý
       pravý kraj a karta upozornění by na ní ztratila kontrast. */
    .kp-night__art { display: none; }
    .kp-night__hen { display: none; }
}

@media (max-width: 820px) {
    .kp-night__card { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .kp-night__card .kp-night__lead { max-width: none; }
}

@media (max-width: 560px) {
    .kp-night__card { padding: 1.5rem 1.2rem; border-radius: var(--kp-radius-lg, 22px); }
    .kp-night__cta .kp-night__btn { width: 100%; justify-content: center; }
}

:root[data-motion="reduced"] .kp-night__btn,
:root[data-motion="reduced"] .kp-night__link svg { transition: none; }

/* ── 10. Patička ─────────────────────────────────────────────────────────────
   Poslední plocha stránky, a proto ne odkladiště odkazů. Předchozí verze měla
   čtyři stejně vážné sloupce a značku v nich utopenou; claim běžel verzálkami
   s prostrkáním a na dvou třetinách šířky se lámal do tří řádků.

   Teď je to deska s vlastním světlem: značka a věta vlevo, tři užší sloupce
   vpravo, tenký pruh dole. Barvy jdou ze značkových tokenů, takže patička
   ztmavne s motivem a reaguje na akcent v panelu Vzhled. */

.kp-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* Táž mezera jako mezi sekcemi — patička je další blok, ne jiný svět. */
    margin-top: var(--kp-sect-pad, 4.6rem);
    color: var(--kp-ink);
    /* Vlastní plocha, ale o chlup teplejší než stránka — hrana mezi obsahem
       a patičkou má být znát, ne ale řezat. Nahoře proto ještě vlas. */
    background:
        linear-gradient(180deg in oklab,
            var(--kp-cream) 0%,
            color-mix(in oklab, var(--kp-cream-3, #EBDDC4) 55%, var(--kp-cream)) 22%,
            color-mix(in oklab, var(--kp-cream-3, #EBDDC4) 72%, var(--kp-cream)) 100%);
}

.kp-footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent,
        color-mix(in oklab, var(--kp-a, #3C7A34) 32%, transparent), transparent);
}

/* Zelený nádech za značkou. Jediný „efekt" v patičce; nesmí být vidět jako
   kruh, proto rozostření a nízké krytí. */
.kp-footer__glow {
    position: absolute;
    z-index: -1;
    left: -6%;
    bottom: -40%;
    width: min(52%, 620px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in oklab, var(--kp-a, #3C7A34) 22%, transparent), transparent 66%);
    filter: blur(60px);
    opacity: 0.5;
    pointer-events: none;
}

:root[data-effects="minimal"] .kp-footer__glow { display: none; }

.kp-footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.6fr);
    gap: clamp(2rem, 5vw, 5rem);
    /* Táž šířka jako sekce a konfigurátor — patička je poslední místo, kde by
       si obsah měl skočit o 200 px doprostřed. */
    max-width: calc(var(--kp-page-max, 1560px) + 2 * var(--kp-gutter, 24px));
    margin: 0 auto;
    padding: clamp(2.5rem, 5vw, 4.5rem) var(--kp-gutter, 24px) clamp(1.5rem, 3vw, 2.5rem);
}

/* ---- značka ---- */

.kp-site a.kp-footer__mark {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
    color: var(--kp-ink);
    /* TÁŽ rodina jako značka v hlavičce (`.kp-brand__name`). Jedno
       jméno psané nahoře patkově a dole bezpatkově je rozpor, který
       oko chytí dřív, než ho pojmenuje. */
    font-family: var(--kp-font-head);
    font-size: clamp(1.3rem, 1.8vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.kp-footer__mark img { display: block; width: clamp(44px, 3.4vw, 58px); height: auto; }

/* Claim je VĚTA, ne štítek. Verzálky s prostrkáním z něj dělaly popisek
   formuláře a na užší desce se lámal do tří řádků. */
.kp-footer__claim {
    margin: 1rem 0 0;
    max-width: 26ch;
    /* Věta pod značkou patří ke značce — tedy táž rodina jako ona. */
    font-family: var(--kp-font-head);
    font-size: clamp(1.15rem, 1.6vw, 1.5rem);
    line-height: 1.3;
    color: var(--kp-ink);
}

.kp-footer__claim em { font-style: normal; color: var(--kp-a-deep, #2F6428); }
[data-theme="dark"] .kp-footer__claim em { color: var(--kp-a-2, #7FBF5F); }

.kp-footer__blurb {
    margin: 0.75rem 0 0;
    max-width: 42ch;
    font-size: 0.94rem;
    line-height: 1.65;
    color: var(--kp-ink-soft);
}

.kp-footer__social { display: flex; gap: 0.55rem; margin-top: 1.4rem; }

.kp-footer__social a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    color: var(--kp-ink-soft);
    background: color-mix(in oklab, var(--kp-surface) 70%, transparent);
    border: 1px solid var(--kp-line);
    transition: color var(--motion-durationFast, 160ms) var(--motion-easing, ease),
                border-color var(--motion-durationFast, 160ms) var(--motion-easing, ease),
                transform var(--motion-durationFast, 160ms) var(--motion-easing, ease);
}

.kp-footer__social a:hover {
    color: var(--kp-a-deep, #2F6428);
    border-color: color-mix(in oklab, var(--kp-a, #3C7A34) 42%, var(--kp-line));
    transform: translateY(-2px);
}

.kp-footer__social svg { width: 19px; height: 19px; display: block; }

/* ---- sloupce ---- */

.kp-footer__nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 3vw, 2.5rem);
}

.kp-footer__col { display: grid; align-content: start; gap: 0.55rem; min-width: 0; }

.kp-footer__col h2 {
    margin: 0 0 0.3rem;
    font-family: var(--kp-font-body);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--kp-ink-faint);
}

.kp-site .kp-footer__col > a {
    color: var(--kp-ink-soft);
    text-decoration: none;
    font-size: 0.95rem;
    width: fit-content;
    transition: color var(--motion-durationFast, 160ms) var(--motion-easing, ease);
}

.kp-site .kp-footer__col > a:hover { color: var(--kp-a-deep, #2F6428); }
[data-theme="dark"] .kp-site .kp-footer__col > a:hover { color: var(--kp-a-2, #7FBF5F); }

/* ---- kontakt ---- */

/* Telefon a e-mail mají vlastní tvar: čtenář je hledá očima, ne čtením, a
   v seznamu odkazů se ztrácely. */
.kp-site a.kp-footer__reach {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--kp-radius, 14px);
    background: color-mix(in oklab, var(--kp-surface) 62%, transparent);
    border: 1px solid var(--kp-line);
    text-decoration: none;
    color: var(--kp-ink);
    transition: border-color var(--motion-durationFast, 160ms) var(--motion-easing, ease),
                background var(--motion-durationFast, 160ms) var(--motion-easing, ease);
}

.kp-site a.kp-footer__reach:hover {
    border-color: color-mix(in oklab, var(--kp-a, #3C7A34) 42%, var(--kp-line));
    background: color-mix(in oklab, var(--kp-a, #3C7A34) 6%, var(--kp-surface));
}

.kp-footer__reachico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    color: var(--kp-a-deep, #2F6428);
    background: color-mix(in oklab, var(--kp-a, #3C7A34) 12%, transparent);
}

.kp-footer__reachico svg { width: 17px; height: 17px; }
.kp-footer__reach span:last-child { display: grid; min-width: 0; }
.kp-footer__reach small { font-size: 0.72rem; color: var(--kp-ink-faint); }
.kp-footer__reach b { font-size: 0.94rem; font-weight: 600; white-space: nowrap; }

.kp-footer__note { font-size: 0.82rem; color: var(--kp-ink-faint); line-height: 1.5; }

/* ---- spodní pruh ---- */

.kp-footer__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    max-width: calc(var(--kp-page-max, 1560px) + 2 * var(--kp-gutter, 24px));
    margin: 0 auto;
    padding: 1.1rem var(--kp-gutter, 24px) 1.6rem;
    border-top: 1px solid color-mix(in oklab, var(--kp-line) 70%, transparent);
    font-size: 0.84rem;
    color: var(--kp-ink-faint);
}

.kp-footer__dot { opacity: 0.5; }
.kp-footer__made { margin-left: auto; }
.kp-footer__made strong { color: var(--kp-ink-soft); font-weight: 600; }

@media (max-width: 980px) {
    .kp-footer__inner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
    .kp-footer__nav { grid-template-columns: minmax(0, 1fr); }
    .kp-footer__bar { justify-content: center; text-align: center; }
    .kp-footer__made { margin-left: 0; width: 100%; }
}

:root[data-motion="reduced"] .kp-footer__social a,
:root[data-motion="reduced"] .kp-footer__reach,
:root[data-motion="reduced"] .kp-footer__col > a { transition: none; }

:root[data-motion="reduced"] .kp-footer__social a:hover { transform: none; }


/* ── 11. Náhled aplikace v zóně Funkcí ───────────────────────────────────── */

/* Levý sloupec byl holý text na krému: nadpis, odrážky, dvě černá tlačítka.
   Vedle živé desky aplikace vpravo to vypadalo jako popisek k obrázku.
   Teď je to karta se stejnou anatomií jako ostatní karty webu — a odrážky
   dostaly vlastní tvar, aby se četly jako výčet schopností, ne jako seznam
   úkolů. */
.kp-appzone .kp-appshow__body {
    padding: clamp(1.5rem, 2.6vw, 2.4rem);
    border-radius: var(--kp-radius-lg, 22px);
    background: var(--kp-surface);
    border: 1px solid var(--kp-line);
    box-shadow: var(--kp-shadow-sm);
}

.kp-appzone .kp-appshow__body .kp-h3 { margin: 0 0 1rem; font-size: clamp(1.2rem, 1.9vw, 1.5rem); }

/* Odrážky ve dvou sloupcích: pět položek pod sebou natáhne kartu tak, že
   tlačítka obchodů spadnou pod spodní hranu desky vedle. */
.kp-appzone .kp-appshow__body .kp-ticks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 1.25rem;
    margin-bottom: 1.4rem;
}

.kp-appzone .kp-appshow__body .kp-ticks li { padding-left: 1.9rem; font-size: 0.94rem; }

@media (max-width: 620px) {
    .kp-appzone .kp-appshow__body .kp-ticks { grid-template-columns: minmax(0, 1fr); }
}


/* ══════════════════════════════════════════════════════════════════════════
   ATMOSFÉRICKÉ POLE STRÁNKY
   ──────────────────────────────────────────────────────────────────────────
   Pozadí celého webu. Na první pohled jedna teplá slonovinová plocha; teprve
   při zadívání se v ní pozná, že se tón po stránce posouvá.

   ROZLOŽENÍ (odshora dolů, podle klientova zadání):
     · úplně nahoře    — sotva znatelný šampaňsko-broskvový nádech zleva,
     · horní třetina   — skoro neutrální krémový porcelán,
     · střed           — klidná světlá slonovina, největší plocha ticha,
     · dolní třetina   — nepatrná máslová teplota,
     · dole            — širší, o kousek sytější slonovina do písku.

   TŘI PRAVIDLA:

   1. VŠECHNO SVĚTLÉ. Nejtmavší místo pole je světlejší než `--kp-cream-3`;
      pole smí barvu POSOUVAT, ne ztmavovat. Předchozí verze stahovala plochu
      na 244,239,222 a proti hero vypadala jako béžový papír — teď se drží
      nad 248 v červeném kanálu.

   2. ŽÁDNÁ VIDITELNÁ HRANA. Všechny vrstvy jsou obrovské (60–140 vmax) a
      mají střed daleko za oknem, takže se z nich v ploše objeví jen výseč.
      Dva „oblouky" nejsou tvary, ale prstence s natolik roztaženými
      zastávkami, že se z nich stane měkký pás — jemný ohyb světla, ne linka.

   3. TÓN SE POSOUVÁ PO STRÁNCE, NE PO OKNĚ. Pole je `absolute` přes celý
      dokument, ne `fixed` přes výřez. Při `fixed` byl vršek okna VŽDY ten
      nejsvětlejší, takže se pod hero pokaždé objevil světlý pruh, který se
      choval jako druhá hrana. Tón teď patří místu na stránce.

   Vše se míchá z `--kp-cream*`, `--kp-gold` a `--kp-barn` (tedy z
   `--accent-h`), takže pole reaguje na akcent, motiv i volbu efektů.
   ══════════════════════════════════════════════════════════════════════════ */

.kp-site::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;

    /* Odstíny. Odvozené, ne zapsané. Všechny leží mezi `--kp-cream` a bílou —
       pole nikde neztmavuje, jen posouvá teplotu. */
    --amb-champ: color-mix(in oklab, var(--kp-gold, #D9A441) 9%, var(--kp-cream-2, #FFFBF3));
    --amb-peach: color-mix(in oklab, var(--kp-barn, #B4633A) 6%, var(--kp-cream-2, #FFFBF3));
    --amb-porcelain: color-mix(in oklab, var(--kp-cream-2, #FFFBF3) 70%, #FFFFFF);
    --amb-butter: color-mix(in oklab, var(--kp-gold, #D9A441) 7%, var(--kp-cream, #FBF3E4));
    /* Dva odstíny berou AKCENT, ne pevnou zeleň — panel Vzhled tak posune
       náladu celé plochy, ne jen tlačítek. Je to schválně jen 7 a 4 procenta
       do krémové: při výchozím akcentu (značková zeleň) se plocha od dřívější
       verze neliší a při jiném se posune o odstín, ne o barvu. Víc by z pole
       udělalo barevný podklad a to je přesně to, co na něm nemá být. */
    --amb-sand: color-mix(in oklab, var(--kp-a, #4A7A2C) 4%,
        color-mix(in oklab, var(--kp-cream-3, #EBDDC4) 42%, var(--kp-cream, #FBF3E4)));
    --amb-sage: color-mix(in oklab, var(--kp-a, #4A7A2C) 7%, var(--kp-cream-2, #FFFBF3));

    background-color: var(--kp-cream);
    background-image:
        /* ── měkké obloukové rozhraní ──────────────────────────────────────
           Prstenec s roztaženými zastávkami. Střed hluboko nad stránkou, takže
           je vidět jen spodní výseč — ohyb světla mezi dvěma tóny, ne linka.
           Dva, ne tři, a oba slabší než dřív: minulá verze je měla natolik
           čitelné, že se z nich staly pásy. */
        radial-gradient(150vmax 150vmax at 38% -96vmax,
            transparent 70%,
            color-mix(in oklab, var(--amb-porcelain) 74%, transparent) 73%,
            color-mix(in oklab, var(--amb-champ) 50%, transparent) 80%,
            transparent 90%),
        radial-gradient(160vmax 160vmax at 62% 172vmax,
            transparent 64%,
            color-mix(in oklab, var(--amb-butter) 46%, transparent) 72%,
            color-mix(in oklab, var(--amb-porcelain) 62%, transparent) 80%,
            transparent 90%),

        /* ── velké světelné rozkvěty ───────────────────────────────────────
           Střed za hranou plochy, takže z každého je vidět jen kus. */
        /* Šampaň zleva — střed AŽ POD hero (16 %), ne nad stránkou.
           Nahoře nesmí malovat nic než plateau: hero do plateau dobíhá a každá
           další vrstva by na hraně přidala pár jednotek, které se změří jako
           pruh. Bylo to na −4 % a stálo to 15 z 765. */
        radial-gradient(70vmax 46vmax at 6% 16%,
            color-mix(in oklab, var(--amb-champ) 78%, transparent), transparent 64%),
        /* Broskev ze středu, ještě slabší a taky pod hero. */
        radial-gradient(58vmax 34vmax at 46% 14%,
            color-mix(in oklab, var(--amb-peach) 52%, transparent), transparent 62%),
        /* Šalvěj vlevo — jediné chladné místo, drží plochu od zežloutnutí. */
        radial-gradient(56vmax 52vmax at -10% 42%,
            color-mix(in oklab, var(--amb-sage) 46%, transparent), transparent 66%),
        /* Máslová teplota vpravo pod středem. */
        radial-gradient(66vmax 48vmax at 104% 64%,
            color-mix(in oklab, var(--amb-butter) 62%, transparent), transparent 64%),
        /* Písek dole — nejsytější místo plochy, pořád velmi světlé. */
        radial-gradient(90vmax 44vmax at 34% 104%,
            color-mix(in oklab, var(--amb-sand) 62%, transparent), transparent 66%),

        /* ── podklad ───────────────────────────────────────────────────────
           Svislý posun tónu po STRÁNCE. Vršek je porcelánový, střed
           slonovinový, pata do písku — jen o pár jednotek, ale drží to
           kompozici pohromadě. */
        /* PLATEAU nahoře: pole drží přesně `--kp-page-top` až za spodní hranu
           hero, a teprve pak se rozjede. Kdyby se tón měnil dřív, potkala by
           fotka o pár jednotek jinou barvu a pruh by se vrátil.
           `100vh + 140px` proto, že hero je nejvýš na výšku okna; sto čtyřicet
           navíc je rezerva na jeho vlastní dojezd. */
        linear-gradient(180deg in oklab,
            var(--kp-page-top) 0px,
            var(--kp-page-top) calc(100vh + 140px),
            var(--kp-cream-2, #FFFBF3) 22%,
            var(--kp-cream) 52%,
            color-mix(in oklab, var(--amb-butter) 55%, var(--kp-cream)) 78%,
            color-mix(in oklab, var(--amb-sand) 60%, var(--kp-cream)) 100%);
}

/* Mikrotextura. Dvě velmi jemné soustavy teček v nesoudělných roztečích, takže
   se vzor neopakuje viditelně. Není to šum ani grunge: krytí kolem 1 % a při
   běžném odstupu se pozná jen tím, že plocha nevypadá jako čistý pixel.

   Je to `background-image`, ne obrázek: `feTurbulence` v SVG stojí na velkých
   plochách výkon a na slabších strojích se projeví trhaným scrollováním,
   zatímco tohle je jen malování. */
.kp-site::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.28;
    background-image:
        radial-gradient(circle at 50% 50%,
            color-mix(in oklab, var(--kp-ink) 4%, transparent) 0.6px, transparent 0.8px),
        radial-gradient(circle at 50% 50%,
            color-mix(in oklab, var(--kp-ink) 3%, transparent) 0.5px, transparent 0.7px);
    background-size: 3px 3px, 7px 7px;
    background-position: 0 0, 1px 2px;
}

/* Ploché efekty = žádná atmosféra ani textura. Volba „minimální efekty"
   v panelu Vzhled má znamenat opravdu klid, ne slabší ozdobu. */
:root[data-effects="minimal"] .kp-site::before { background-image: none; }
:root[data-effects="minimal"] .kp-site::after { display: none; }

/* Záložní hodnoty u KAŽDÉHO tokenu, i tady. `--kp-green`, `--kp-gold` a
   `--kp-barn` jsou definované jen uvnitř aplikační skořápky (kp-brand.css);
   na webu jsou prázdné. Jediné `var()` bez fallbacku udělá celý `color-mix()`
   neplatný, prohlížeč zahodí CELOU deklaraci `background-image` — a pole
   zmizí. Nic nespadne a v konzoli není ani řádka; poprvé to takhle zmizelo
   u karty slepičky, podruhé tady. */
[data-theme="dark"] .kp-site::before {
    --amb-champ: color-mix(in oklab, var(--kp-gold, #F7C65A) 10%, var(--kp-cream-2, #2A211A));
    --amb-peach: color-mix(in oklab, var(--kp-barn, #E0714B) 8%, var(--kp-cream-2, #2A211A));
    --amb-porcelain: color-mix(in oklab, var(--kp-cream-2, #2A211A) 78%, var(--kp-cream, #201812));
    --amb-butter: color-mix(in oklab, var(--kp-gold, #F7C65A) 8%, var(--kp-cream, #201812));
    --amb-sand: color-mix(in oklab, var(--kp-cream-3, #171009) 46%, var(--kp-cream, #201812));
    --amb-sage: color-mix(in oklab, var(--kp-a, #5FB050) 8%, var(--kp-cream-2, #2A211A));
}

[data-theme="dark"] .kp-site::after { opacity: 0.18; }


/* Sekce hned pod hero.
   Tmavá zóna tu chvíli byla (v78) a je pryč: řešila přechod, ale za cenu
   tmavého pásu uprostřed světlé stránky. Ve světlém režimu tam nepatří.

   Přechod teď drží `--kp-page-top` — jediná barva, kterou hero dole končí a
   kterou tahle sekce začíná. Není co trefovat: je to jeden token na dvou
   místech. Odsazení nahoře je menší, protože se na hero navazuje, ne
   odděluje. */
/* Pod hero jen vlas navíc. Hero se dole rozpouští, takže tam mezera působí
   větší, než jaká je — plná porce odsazení z toho udělala díru. */
.kp-smart { position: relative; padding-top: clamp(0.4rem, 0.9vw, 1.1rem); }

/* Prvních pár set pixelů pod hero maluje sekce TOUTÉŽ barvou, do které hero
   dobíhá, a teprve pak ji pustí do pole.

   Znělo by logičtěji nechat to na poli — a čtyři kola to tak bylo. Jenže pole
   se skládá z osmi vrstev a i když se základ nahoře drží plochý, ostatní
   vrstvy (mikrotextura, náběhy rozkvětů) přidají pár jednotek. Změřeno:
   nad hranou 254,251,245, pod ní 252,245,235. Osm jednotek v modrém kanálu
   stačí na viditelný pruh přes celou šířku.

   Takhle čtou obě strany hrany JEDEN token a rozdíl nemůže vzniknout: nahoře
   ho maluje hero, dole tahle sekce. Pole se přebírá až o 260 px níž, kde už
   žádná hrana není. */
.kp-smart::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 260px;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg in oklab,
        var(--kp-page-top) 0%,
        var(--kp-page-top) 22%,
        color-mix(in oklab, var(--kp-page-top) 55%, transparent) 62%,
        transparent 100%);
}

.kp-smart > .kp-section { position: relative; z-index: 1; }


/* ══════════════════════════════════════════════════════════════════════════
   VLNITÝ PÁS
   ──────────────────────────────────────────────────────────────────────────
   Jedna sekce dole na stránce stojí na vlastní, o kousek teplejší ploše —
   a rozhraní není rovná čára, ale mělká vlna. Je to jediné místo na webu,
   kde je předěl VIDĚT ZÁMĚRNĚ; všude jinde se předěly potlačují.

   Proč jen jednou a až dole: pravidelně opakovaný předěl by z pásů udělal
   pruhy a stránka by se rozpadla na patra. Jeden takový zlom naopak dá
   dlouhé stránce rytmus a čtenář pozná, že se blíží konec.

   Tvar dělá MASKA ze tří vrstev — vlna nahoře, vlna dole a obdélník mezi
   nimi. Vlny jsou SVG v `data:` URI, tedy geometrie bez jediného dotazu na
   server; barvu si drží plocha pod maskou, takže vlna nemá vlastní odstín,
   který by se musel hlídat.

   `mask-composite: add` je nutné: bez něj by se vrstvy protnuly a zůstal by
   jen průnik, tedy nic. Ve WebKitu se stará vlastnost jmenuje jinak, proto
   dvojice.

   Vlny nejsou souměrné a každá má jiný průběh — souměrná vlna vypadá jako
   ozdobný oddělovač z šablony, nesouměrná jako tvar světla.
   ══════════════════════════════════════════════════════════════════════════ */

.kp-waveband {
    position: relative;
    isolation: isolate;
    /* Vlna ukrojí z plochy nahoře i dole, takže obsah potřebuje víc místa,
       aby se nedostal do zubu. */
    padding-block: clamp(0.7rem, 1.5vw, 1.6rem);
}

.kp-waveband::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    /* Teplejší než stránka, pořád ale velmi světlá — je to jiný TÓN téže
       plochy, ne jiná barva. Odvozené z krémové řady, takže se to posune
       s motivem i s akcentem. */
    background:
        radial-gradient(90% 70% at 22% 6%,
            color-mix(in oklab, var(--kp-gold, #D9A441) 8%, transparent), transparent 62%),
        radial-gradient(80% 66% at 88% 96%,
            color-mix(in oklab, var(--kp-barn, #B4633A) 6%, transparent), transparent 60%),
        linear-gradient(180deg in oklab,
            color-mix(in oklab, var(--kp-cream-3, #EBDDC4) 62%, var(--kp-cream-2, #FFFBF3)) 0%,
            color-mix(in oklab, var(--kp-cream-3, #EBDDC4) 44%, var(--kp-cream-2, #FFFBF3)) 44%,
            color-mix(in oklab, var(--kp-cream-3, #EBDDC4) 70%, var(--kp-cream-2, #FFFBF3)) 100%);

    --kp-wave-h: clamp(48px, 6vw, 96px);
    mask-image: var(--kp-wave-a), var(--kp-wave-b), linear-gradient(#000, #000);
    mask-position: top center, bottom center, center;
    mask-size: 100% var(--kp-wave-h), 100% var(--kp-wave-h), 100% calc(100% - var(--kp-wave-h) * 2);
    mask-repeat: no-repeat, no-repeat, no-repeat;
    mask-composite: add;

    -webkit-mask-image: var(--kp-wave-a), var(--kp-wave-b), linear-gradient(#000, #000);
    -webkit-mask-position: top center, bottom center, center;
    -webkit-mask-size: 100% var(--kp-wave-h), 100% var(--kp-wave-h), 100% calc(100% - var(--kp-wave-h) * 2);
    -webkit-mask-repeat: no-repeat, no-repeat, no-repeat;
    -webkit-mask-composite: source-over;
}

/* ── Vlnité hrany pro libovolnou sekci ────────────────────────────────────
   `.kp-wavesect` udělá z horní i dolní hrany sekce vlnu: teplejší tón téže
   plochy, který u křivky drží a do sekce mizí. Je to táž myšlenka jako u pásu
   sítí a u konfigurátoru, jen zabalená tak, aby ji šlo přidat jedním názvem
   třídy — třetí kopie téhož kódu už by se rozešla.

   Tón je JEDINÉ, co vlnu dělá viditelnou; křivka sama o sobě nic nekreslí.
   (Zkoušelo se to obráceně — maska bez rozdílu tónů je změřitelná a neviditelná.)

   Sekce má vlastní odsazení a vlna se vejde do něj, takže nikam nepřesahuje
   ani nesahá na obsah. Leží na `z-index: -1`, tedy pod textem v toku. */
.kp-wavesect { position: relative; }

.kp-wavesect::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    --kp-wave-h: clamp(52px, 5.5vw, 96px);
    background: linear-gradient(180deg in oklab,
        var(--kp-wash) 0px,
        var(--kp-wash) calc(var(--kp-wave-h) * 1.1),
        transparent calc(var(--kp-wave-h) * 2.4),
        transparent calc(100% - var(--kp-wave-h) * 2.4),
        var(--kp-wash) calc(100% - var(--kp-wave-h) * 1.1),
        var(--kp-wash) 100%);

    mask-image: var(--kp-wave-a), var(--kp-wave-b), linear-gradient(#000, #000);
    mask-position: top center, bottom center, center;
    mask-size: 100% var(--kp-wave-h), 100% var(--kp-wave-h),
               100% calc(100% - var(--kp-wave-h) * 1.9);
    mask-repeat: no-repeat, no-repeat, no-repeat;
    mask-composite: add;
    -webkit-mask-image: var(--kp-wave-a), var(--kp-wave-b), linear-gradient(#000, #000);
    -webkit-mask-position: top center, bottom center, center;
    -webkit-mask-size: 100% var(--kp-wave-h), 100% var(--kp-wave-h),
                       100% calc(100% - var(--kp-wave-h) * 1.9);
    -webkit-mask-repeat: no-repeat, no-repeat, no-repeat;
    -webkit-mask-composite: source-over;
}

/* Vlas po hraně vlny tu BYL a je pryč. Měl ji obtáhnout (dvě masky přes sebe
   s odečtením), jenže z `mask-composite: exclude` vyšla rovná čára přes celou
   šířku — přesně ten artefakt, kvůli kterému se tahle iterace dělá. Vlna se
   pozná podle rozdílu tónů; obtah nepotřebuje. */

/* ==========================================================================
 *  Patička — doladění
 *
 *  Patička je poslední plocha stránky a zároveň jediná, kterou návštěvník
 *  vidí na KAŽDÉ stránce. Drobnosti se v ní proto sečtou: odkazy bez odezvy,
 *  nadpisy sloupců ve stejné váze jako odkazy pod nimi, kontaktní karty bez
 *  hrany. Tenhle blok to srovnává — beze změny rozvržení, jen v detailu.
 * ========================================================================== */

/* Nadpis sloupce má být ORIENTAČNÍ BOD, ne položka navíc: menší, prostrkaný,
   tišší. Když měl stejnou váhu jako odkazy, četl se sloupec jako pět odkazů,
   z nichž jeden nikam nevede. */
.kp-footer__col h2 {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--kp-ink-faint);
    margin: 0 0 0.9rem;
}

/* Odkaz reaguje POSUNEM a podtržením, ne jen barvou. Posun o dva pixely je
   na hranici vnímání a přesně proto působí kvalitně: ruka pozná, že prvek
   žije, aniž by se to dalo popsat. */
.kp-footer__col a {
    position: relative;
    display: inline-block;
    padding: 0.18rem 0;
    color: var(--kp-ink-soft);
    transition: color var(--t-fast, .15s) ease, transform var(--t-fast, .15s) ease;
}

.kp-footer__col a::after {
    content: "";
    position: absolute;
    left: 0; right: 100%; bottom: 0.06rem;
    height: 1px;
    background: currentColor;
    opacity: 0.55;
    transition: right var(--t-med, .24s) var(--ease-out, ease);
}

.kp-footer__col a:hover { color: var(--kp-a, #3C7A34); transform: translateX(2px); }
.kp-footer__col a:hover::after { right: 0; }
[data-theme="dark"] .kp-footer__col a:hover { color: var(--kp-a-2, #7FBF5F); }
:root[data-motion="reduced"] .kp-footer__col a,
:root[data-motion="reduced"] .kp-footer__col a::after { transition: none; }

/* Kontaktní řádky jsou KARTY, ne odkazy v seznamu: telefon a e-mail hledá
   oko, ne čtení, takže potřebují plochu a hranu, o kterou se zachytí. */
.kp-footer__reach {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.8rem;
    border-radius: 14px;
    border: 1px solid var(--kp-line-soft);
    background: color-mix(in oklab, var(--kp-cream-2) 60%, transparent);
    transition: border-color var(--t-fast, .15s) ease, background var(--t-fast, .15s) ease,
                transform var(--t-fast, .15s) ease;
}

.kp-footer__reach:hover {
    border-color: var(--kp-a-line);
    background: color-mix(in oklab, var(--kp-a, #3C7A34) 8%, var(--kp-cream-2));
    transform: translateY(-1px);
}

:root[data-motion="reduced"] .kp-footer__reach { transition: none; }

.kp-footer__reachico {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    flex: none;
    border-radius: 11px;
    background: color-mix(in oklab, var(--kp-a, #3C7A34) 12%, transparent);
    color: var(--kp-a-deep, #2B5C26);
}

[data-theme="dark"] .kp-footer__reachico { color: var(--kp-a-2, #7FBF5F); }
.kp-footer__reachico svg { width: 17px; height: 17px; }

.kp-footer__reach small {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--kp-ink-faint);
}

.kp-footer__reach b {
    font-size: 0.98rem;
    font-variant-numeric: tabular-nums;
    color: var(--kp-ink);
}

/* Ikony sítí v patičce dostávají tvar i odezvu — dosud to byly jen glyfy
   v prázdnu a mezi textem se ztrácely. */
.kp-footer__social a {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: 12px;
    border: 1px solid var(--kp-line-soft);
    background: color-mix(in oklab, var(--kp-cream-2) 55%, transparent);
    color: var(--kp-ink-soft);
    transition: color var(--t-fast, .15s) ease, border-color var(--t-fast, .15s) ease,
                background var(--t-fast, .15s) ease, transform var(--t-fast, .15s) ease;
}

.kp-footer__social a:hover {
    color: var(--kp-a-deep, #2B5C26);
    border-color: var(--kp-a-line);
    background: color-mix(in oklab, var(--kp-a, #3C7A34) 10%, var(--kp-cream-2));
    transform: translateY(-2px);
}

[data-theme="dark"] .kp-footer__social a:hover { color: var(--kp-a-2, #7FBF5F); }
:root[data-motion="reduced"] .kp-footer__social a { transition: none; }
.kp-footer__social a svg { width: 17px; height: 17px; }

/* Spodní pruh se odděluje VLASEM, který u krajů slábne — plná čára přes celou
   šířku dělá z patičky tabulku. */
.kp-footer__bar {
    position: relative;
    padding-top: 1.1rem;
    margin-top: clamp(1.6rem, 3vw, 2.4rem);
}

.kp-footer__bar::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent, var(--kp-line-soft) 12%, var(--kp-line-soft) 88%, transparent);
}

.kp-footer__made strong { color: var(--kp-ink); font-weight: 700; }

/* ==========================================================================
 *  Video o prémiovém kurníku
 *
 *  Poslední ukázka před závěrečnou výzvou. Plocha je záměrně KLIDNÁ: jeden
 *  široký obraz, nadpis nad ním, řada schopností pod ním. Žádný rámeček
 *  telefonu ani ozdoby — obraz sám je to nejzajímavější na stránce a cokoli
 *  kolem něj by s ním soupeřilo.
 *
 *  Přehrávač se načítá až na kliknutí (viz PremiumVideo.razor), takže do té
 *  doby je tu naše fotka — a ta musí unést tlačítko přehrání. Proto závoj
 *  zdola, ne ztmavení celého snímku: fotka zůstane fotkou a text na ní drží.
 * ========================================================================== */

.kp-film { display: grid; justify-items: center; }

.kp-film__head { text-align: center; max-width: 60ch; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.kp-film__head .kp-h2 { margin: 0.6rem 0 0; }
.kp-film__head .kp-lead { margin: 1rem auto 0; }

/* Jeviště drží poměr 16:9 samo, takže se při načítání nic nehne (CLS 0)
   a vyměnit obálku za rám přehrávače je pak beze skoku. */
.kp-film__stage {
    position: relative;
    width: 100%;
    max-width: 1040px;
    aspect-ratio: 16 / 9;
    border-radius: clamp(16px, 2vw, 26px);
    overflow: hidden;
    background: var(--kp-cream-2, #FFFBF3);
    border: 1px solid var(--kp-line, rgba(120, 90, 60, 0.16));
    box-shadow: var(--kp-elev-2, 0 28px 60px rgba(40, 30, 20, 0.22));
}

.kp-film__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Obálka je TLAČÍTKO: klávesnice ho najde, čtečka přečte popisek. */
.kp-film__cover {
    position: absolute;
    inset: 0;
    display: block;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: #FFFFFF;
}

.kp-film__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--kp-dur-slow, 620ms) var(--kp-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.kp-film__cover:hover img,
.kp-film__cover:focus-visible img { transform: scale(1.03); }

/* Závoj zdola — jen tolik, aby tlačítko a popisek držely kontrast. */
.kp-film__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(12, 16, 10, 0.05) 0%,
        rgba(12, 16, 10, 0.16) 46%,
        rgba(12, 16, 10, 0.62) 100%);
}

/* Skleněný knoflík s akcentním jádrem. Roste jen nepatrně — velké nafouknutí
   působí jako reklama, tohle jako dobře udělané tlačítko. */
.kp-film__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: clamp(64px, 7vw, 88px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: color-mix(in oklab, var(--kp-a, #3C7A34) 88%, #FFFFFF);
    border: 2px solid rgba(255, 255, 255, 0.55);
    box-shadow:
        0 10px 30px rgba(10, 20, 8, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition:
        transform var(--kp-dur, 320ms) var(--kp-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
        box-shadow var(--kp-dur, 320ms) ease;
}

.kp-film__play svg {
    width: 42%;
    height: 42%;
    margin-left: 8%;   /* optické vystředění trojúhelníku v kruhu */
    color: #FFFFFF;
}

.kp-film__cover:hover .kp-film__play,
.kp-film__cover:focus-visible .kp-film__play {
    transform: translate(-50%, -50%) scale(1.06);
    box-shadow:
        0 14px 38px rgba(10, 20, 8, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.kp-film__label {
    position: absolute;
    left: 50%;
    bottom: clamp(1rem, 2.5vw, 1.75rem);
    transform: translateX(-50%);
    max-width: 90%;
    font-family: var(--kp-font-display, inherit);
    font-weight: 600;
    font-size: clamp(0.9rem, 1.3vw, 1.05rem);
    text-align: center;
    text-shadow: 0 2px 14px rgba(8, 14, 9, 0.6);
}

.kp-film__cover:focus-visible {
    outline: 3px solid var(--kp-a, #3C7A34);
    outline-offset: 3px;
}

.kp-film__note {
    margin: 0.9rem 0 0;
    max-width: 62ch;
    text-align: center;
    font-size: 0.85rem;
    color: var(--kp-ink-faint, #7A6A5C);
}

/* Řada schopností — pilulky, ne odrážky: čtou se jako výbava, ne jako text. */
.kp-film__feats {
    list-style: none;
    margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}

.kp-film__feats li {
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--kp-ink, #3A2A22);
    background: var(--kp-cream-2, #FFFBF3);
    border: 1px solid var(--kp-line, rgba(120, 90, 60, 0.16));
}

.kp-film__feats li::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 0.5rem;
    border-radius: 50%;
    background: var(--kp-a, #3C7A34);
    vertical-align: 1px;
}

[data-theme="dark"] .kp-film__feats li,
[data-theme="dark"] .kp-film__stage {
    background: color-mix(in oklab, var(--kp-cream-2) 92%, #000000);
}

@media (prefers-reduced-motion: reduce) {
    .kp-film__cover img,
    .kp-film__play { transition: none; }

    .kp-film__cover:hover img,
    .kp-film__cover:focus-visible img { transform: none; }
}