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

/* ==========================================================================
 *  KURNÍK PROFI — hero na fotografii, statistiky, komunitní sekce
 *
 *  Vlastní soubor, ne dodatek do kp-site.css: hero má vlastní jazyk
 *  (sklo, tmavé pásy, zelený akcent) a míchat ho mezi obecné stránkové
 *  styly by znamenalo, že se každá pozdější úprava webu dotkne i heru.
 *
 *  AKCENT. Zelená je výchozí a je to záměr — Forge sada akcentů
 *  (blue/teal/violet/amber/rose) žádnou zelenou nemá, takže slepé
 *  navázání na `--accent` by hero obarvilo na modro. Celý blok proto
 *  visí na jediné proměnné `--kp-a`: kdo chce hero řídit z Tweaks,
 *  přepíše ji jedním řádkem a nic dalšího neřeší.
 * ========================================================================== */

/* Akcent se pro celý web dopočítává ve forge-tokens.css z `--accent-*`
   (řídí ho panel Vzhled). Tady se přebíjí jen SVĚTLOST — kontexty ležící na
   fotce nebo na tmavém panelu mají stejný podklad v obou motivech, takže
   zesvětlená tmavá varianta by tu jen ztratila kontrast. Odstín a sytost
   zůstávají z akcentu, takže hero se přebarví spolu se zbytkem webu. */
.kp-header--overlay,
.kp-hero--photo,
.kp-community {
    --kp-a:      oklch(0.52  var(--accent-c) var(--accent-h));
    --kp-a-2:    oklch(0.635 var(--accent-c) var(--accent-h));
    --kp-a-deep: oklch(0.43  var(--accent-c) var(--accent-h));
    --kp-a-soft: oklch(0.52  var(--accent-c) var(--accent-h) / 0.16);
    --kp-glass: rgba(18, 26, 20, 0.52);
    --kp-glass-line: rgba(255, 255, 255, 0.16);
}

/* --------------------------------------------------------------------------
 *  Hlavička nad fotkou
 *  Žádný plný pruh — jen velmi lehký přechod shora, aby text držel kontrast
 *  nad světlou oblohou. Po odscrollování se hlavička zpevní.
 * -------------------------------------------------------------------------- */

/* Pruh je ZÁMĚRNĚ skoro neviditelný. Předchozí verze měla 0,55 krytí přes
   celou výšku hlavičky a zašeďovala tím nejsvětlejší část zlatého rána —
   čitelnost menu drží text-shadow níž v souboru, ne ztmavená obloha. */
.kp-header--overlay {
    position: fixed;
    inset-inline: 0;
    top: 0;
    background: linear-gradient(180deg, rgba(12, 20, 14, 0.24) 0%, rgba(12, 20, 14, 0) 100%);
    backdrop-filter: none;
    border-bottom: 0;
    transition: background var(--t-med, 0.24s) ease, backdrop-filter var(--t-med, 0.24s) ease;
}

/* Na fotce zůstává zlatá plná — ztmavení je tu na škodu. Stín je tmavý
   a měkký, aby kresba držela hranu i nad světlou oblohou. */
.kp-header--overlay .kp-brand__logo {
    filter:
        drop-shadow(0 1px 2px rgba(8, 14, 9, 0.6))
        drop-shadow(0 4px 14px rgba(8, 14, 9, 0.4));
}

/* Po zpevnění lišty je pod logem zase krém — vrací se ztmavená varianta. */
.kp-header--overlay.is-scrolled .kp-brand__logo {
    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);
}

[data-theme="dark"] .kp-header--overlay.is-scrolled .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));
}

/* Dvojitý stín: úzký drží hranu písmene, široký a měkký dělá „halo", které
   nese kontrast nad světlou oblohou. Levnější než ztmavit celou fotku. */
.kp-header--overlay .kp-brand__name,
.kp-header--overlay .kp-nav__link {
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(10, 16, 10, 0.55), 0 2px 12px rgba(10, 16, 10, 0.45);
}

.kp-header--overlay .kp-brand__tag {
    color: rgba(255, 255, 255, 0.78);
    text-shadow: 0 1px 2px rgba(10, 16, 10, 0.55), 0 2px 10px rgba(10, 16, 10, 0.4);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: 0.62rem;
}

.kp-header--overlay .kp-nav__link:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.14);
}

/* Aktivní odkaz nese tenkou zelenou linku — stejně jako v referenci. */
.kp-header--overlay .kp-nav__link--active {
    color: #FFFFFF;
    position: relative;
}

.kp-header--overlay .kp-nav__link--active::after {
    content: "";
    position: absolute;
    left: 0.85rem;
    right: 0.85rem;
    bottom: 0.15rem;
    height: 2px;
    border-radius: 2px;
    background: var(--kp-a-2);
}

.kp-header--overlay .kp-themebtn {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.28);
    color: #FFFFFF;
}

.kp-header--overlay .kp-nav__link--app {
    border-color: rgba(255, 255, 255, 0.34);
    color: #FFFFFF;
}

/* Zelené pill CTA v pravém rohu. */
.kp-header--overlay .kp-nav__cta {
    background: linear-gradient(180deg, var(--kp-a-2), var(--kp-a));
    border-color: var(--kp-a-deep);
    color: #FFFFFF;
    box-shadow: 0 6px 18px rgba(30, 70, 26, 0.38);
}

.kp-header--overlay .kp-nav__cta:hover {
    background: linear-gradient(180deg, var(--kp-a-2), var(--kp-a-deep));
}

.kp-header--overlay.is-scrolled {
    background: color-mix(in srgb, var(--kp-cream) 88%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--kp-line-soft);
}

.kp-header--overlay.is-scrolled .kp-brand__name,
.kp-header--overlay.is-scrolled .kp-nav__link {
    color: var(--kp-ink);
    text-shadow: none;
}

.kp-header--overlay.is-scrolled .kp-brand__tag { color: var(--kp-ink-faint); text-shadow: none; }
.kp-header--overlay.is-scrolled .kp-nav__link:hover { background: var(--kp-cream-2); }
.kp-header--overlay.is-scrolled .kp-themebtn { background: var(--kp-cream-2); border-color: var(--kp-line); color: var(--kp-ink-soft); }
.kp-header--overlay.is-scrolled .kp-nav__link--app { border-color: var(--kp-line); color: var(--kp-leaf-dark); }

/* Hlavička je fixed, takže hero začíná pod ní — bez toho by ji fotka podtekla. */
.kp-site--hero .kp-main { padding-top: 0; }

/* --------------------------------------------------------------------------
 *  Hero
 * -------------------------------------------------------------------------- */

/* Fotka musí být vyšší než viewport: panel statistik na ní PLAVE a pod ním
   ještě zbývá kus obrazu. Kdyby hero končilo přesně na výšce okna, panel by
   dosedl na hranu a spodním okrajem přetekl na krémové pozadí za hero. */
.kp-hero--photo {
    position: relative;
    display: grid;
    align-items: center;

    /* CELÉ OKNO, od kraje ke kraji. Dřív tu byl `clamp(620px, 100vh - 6rem,
       1040px)`: strop 1040 px znamenal, že na 1440px vysokém monitoru
       zůstalo pod fotkou 400 px prázdna a hero vypadalo jako pruh, ne jako
       úvodní obrazovka. Odečet 6 rem tu byl kvůli panelu statistik, který
       přesahoval spodní hranu — ten je teď uvnitř, takže odpadá.

       `100dvh`, ne `100vh`: na mobilu se lišta prohlížeče schovává a `vh`
       drží původní hodnotu, takže by hero přetékalo o výšku lišty.

       Spodní mez drží obsah čitelný na nízkém okně na šířku (nadpis +
       tlačítka potřebují svoje). */
    --hero-h: max(620px, 100dvh);

    /* Filmové přiblížení (Ken Burns) jede mezi `--hero-zoom` a
       `--hero-zoom-max`. Dopočet polohy zvířat níž počítá vždy s MAXIMEM:
       čím větší přiblížení, tím níž motiv u spodní hrany klesá, takže
       nejtěsnější okamžik je ten nejpřiblíženější. */
    --hero-zoom: 1.06;
    --hero-zoom-max: 1.10;

    /* --- kde ve snímku končí hejno --------------------------------------
       Panel statistik se kotví POD ně (viz komentář u .kp-hero__stats).
       Fixní odsazení odspoda nefunguje: na širokém displeji je fotka
       ořezaná svisle jinak než na notebooku a panel po hejnu putuje.

       Postup je stejný jako u kurníku — replikuje `object-fit: cover`:
         • šířkou řízený režim (široký displej): výška obrazu = 100vw / poměr
         • výškou řízený režim (notebook):       výška obrazu = výška hero
       Svislý přesah se dělí podle `object-position`, zbytek je přepočet
       přes zvětšení kolem středu.

       Hodnota je naměřená na VYGENEROVANÉ sadě, ne na masteru — generátor
       snímky zarovnává na společnou kompozici a přitom je o 15 % přibližuje,
       takže se hejno posunulo níž. Po každém přegenerování se hodnota ověřuje
       znovu; všech osm snímků teď sdílí kompozici do ~19 px, takže platí
       pro každý z nich. */
    --img-h: max(var(--hero-h), calc(100vw / 1.7787));   /* poměr 1672 / 940 */
    --focal-y: 0.92;
    --paw-bottom: 0.89;
    --paw-raw: calc(var(--paw-bottom) * var(--img-h)
                     - (var(--img-h) - var(--hero-h)) * var(--focal-y));
    --paw-y: calc(var(--hero-h) * 0.5
                   + (var(--paw-raw) - var(--hero-h) * 0.5) * var(--hero-zoom-max));

    /* Střecha tam, kde padne levá hrana panelu asistentky (≈ 84 % šířky
       snímku). Přeměřeno po zarovnání sady — přiblížení o 15 % vytáhlo
       hřeben výš a přisazení ke spodní hraně ještě o kus (0,372 → 0,281). */
    --eave-top: 0.281;
    --eave-raw: calc(var(--eave-top) * var(--img-h)
                      - (var(--img-h) - var(--hero-h)) * var(--focal-y));
    --eave-y: calc(var(--hero-h) * 0.5
                    + (var(--eave-raw) - var(--hero-h) * 0.5) * var(--hero-zoom-max));

    height: var(--hero-h);

    /* Hero teď ořezává samo: nic z něj nevyčnívá, panel statistik sedí
       uvnitř u spodní hrany. Dřív byl `overflow: visible` + spodní padding,
       aby měl přesahující panel kam — na velkém monitoru to ale znamenalo,
       že panel vyjel z fotky ven a visel nad tmavou sekcí pod ní. */
    overflow: hidden;
    z-index: 2;
}

.kp-hero--photo > .kp-hero__media { overflow: hidden; }

/* Vypnutý pohyb = žádné zvětšení, takže i dopočet kuřátek musí počítat s 1.
   Bez toho by panel v klidovém režimu sjel o pár desítek pixelů přes ně. */
/* Vypnutý pohyb = žádný Ken Burns. Dopočet zůstává na maximu, takže panel
   sedí o kousek níž, než by musel — to je bezpečná strana. */
:root[data-motion="reduced"] .kp-hero--photo { --hero-zoom: 1.06; }

@media (prefers-reduced-motion: reduce) {
    :root:not([data-motion="full"]) .kp-hero--photo { --hero-zoom: 1.06; }
}

.kp-hero--photo > .kp-hero__inner { grid-area: 1 / 1; }

/* Obraz a scrim jsou POD mřížkou, ne v ní. Jako položky mřížky se držely
   jejího obsahového boxu, takže spodní `padding` (pás pro plovoucí panel
   statistik) zůstal nepokrytý — fotka končila 90 px nad hranou hero a pod
   panelem prosvítalo krémové pozadí stránky. Absolutní pozice je natáhne
   přes celý padding box.

   Vedlejší efekt, na kterém závisí kompozice: `height: 100%` u obrázku
   se teď má oč opřít (definitivní výška), takže `object-fit: cover`
   konečně ořezává vodorovně místo toho, aby se snímek jen položil ve
   svém vlastním poměru stran. */
.kp-hero--photo > .kp-hero__media,
.kp-hero--photo > .kp-hero__scrim {
    position: absolute;
    inset: 0;
}

/* Sezónní prolnutí. Nový snímek leží NAD odcházejícím a vkresluje se do
   něj; bez toho by se obraz na okamžik ztratil, dokud se nový nestáhne.
   Odcházející vrstva zůstává v DOM jen po dobu přechodu (viz HeroPhoto). */
.kp-hero--photo > .kp-hero__media { z-index: 1; }

.kp-hero--photo > .kp-hero__media--out {
    z-index: 0;
    animation: none;
}

.kp-hero--photo > .kp-hero__media:not(.kp-hero__media--out) {
    animation: kp-mood-in var(--kp-mood-fade, 700ms) ease both;
}

@keyframes kp-mood-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Scrim a atmosféra musí zůstat NAD oběma vrstvami obrazu. */
.kp-hero--photo > .kp-hero__scrim { z-index: 2; }
.kp-hero--photo > .kp-hero__atmos { z-index: 3; }
.kp-hero--photo > .kp-hero__inner { z-index: 4; }

.kp-hero__media { display: block; height: 100%; }

.kp-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Výřez posunutý doprava (70 %, ne 50 %) posune kurník o ~30 px doleva
       a přesně o tolik povolí místo napravo od něj — tam stojí jednosloupcový
       panel asistentky. Zleva se ořízne o kus víc, ale slunce zůstává
       v záběru; kdyby se šlo na 100 %, glow za nadpisem by odešel. */
    /* Svisle 78 %: na širokém displeji je snímek vyšší než hero a ořez se
       musí ubrat NAHOŘE (obloha), ne dole — jinak z louky zmizí kuřátka
       i hejno, kvůli kterým ta fotka je. Na notebooku je svislý přesah
       nulový a hodnota nedělá nic. */
    object-position: 70% 100%;

    /* Přiblížení se odvíjí od SPODNÍ hrany, ne od středu. Se středem ubíralo
       Ken Burns z rezervy pod hejnem, kterou klient v obrázku nechal právě
       pro panel statistik — panel pak slepicím zajížděl přes nohy. Takhle
       zůstává spodek přisazený a ubývá obloha, o kterou nejde. */
    transform-origin: 50% 100%;
    display: block;
}

/* Scrim kryje TEXT, ne fotku. Plošný pruh zleva (0,58 přes celou výšku)
   zašeďoval i oblohu nad nadpisem a ze zlatého rána dělal mlhu; elipsa
   posazená přesně na textový sloupec udrží kontrast a nad ní i pod ní
   zůstane snímek beze změny. Recept viz 17_HTML_Composition_Bible.md. */
.kp-hero__scrim {
    pointer-events: none;
    /* Odstín je TEPLÝ (28, 18, 10), ne zelenočerný. Studený scrim nad
       zlatým oparem čte jako mlha; teplý čte jako stín a ráno zůstane
       zlaté i tam, kde musí podepřít text. */
    background:
        /* podklad pod kopií — měkká elipsa, ne pruh */
        radial-gradient(52% 54% at 23% 55%,
            rgba(28, 18, 10, 0.50) 0%,
            rgba(28, 18, 10, 0.28) 48%,
            rgba(28, 18, 10, 0) 76%),
        /* velmi lehké srovnání od levé hrany, aby elipsa neměla viditelný okraj */
        linear-gradient(90deg,
            rgba(28, 18, 10, 0.18) 0%,
            rgba(28, 18, 10, 0.06) 28%,
            rgba(28, 18, 10, 0) 46%),
        /* spodní pás pod plovoucími statistikami */
        linear-gradient(0deg,
            rgba(20, 16, 10, 0.34) 0%,
            rgba(20, 16, 10, 0) 30%),
        /* náznak pod hlavičkou — jen tolik, aby menu mělo o co se opřít */
        linear-gradient(180deg,
            rgba(20, 16, 10, 0.12) 0%,
            rgba(20, 16, 10, 0) 11%);
}

.kp-hero--photo .kp-hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 2rem;
    width: 100%;

    /* Bez středového stropu. S `max-width: 1320px` zůstávalo na 2560px
       monitoru 620 px prázdna po obou stranách a text začínal až ve čtvrtině
       plochy — přesně to „moře prázdna", které klient hlásil. Odsazení je
       teď stejné jako u pásu statistik (3 rem), takže levá hrana nadpisu
       a levá hrana pásu stojí v jedné svislici. */
    max-width: none;
    margin: 0;
    padding: 7rem clamp(1.75rem, 3vw, 3rem) 1.25rem;
}

/* Kopie sedí NAD oblohou a loukou, ne přes slepice. Šířka je proto svázaná
   s tím, kde v záběru začíná první slepice (~40 % šířky), ne s pohodlnou
   délkou řádku. */
.kp-hero__copy { max-width: clamp(33rem, 44vw, 58rem); }

/* ---- eyebrow chip ----
   Barvy jsou tady ZÁMĚRNĚ pevné, ne z motivu: chip leží na fotce, která je
   pořád stejná. S tokenem `--kp-cream-2` by ve večerním režimu ztmavl
   a světlá pilulka z reference by se změnila v tmavou skvrnu. */
.kp-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.05rem;
    border-radius: 999px;
    background: rgba(252, 248, 238, 0.94);
    color: #2B5C26;
    font-family: var(--kp-font-display);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    box-shadow: 0 4px 16px rgba(12, 20, 12, 0.18);
}

/* ---- nadpis ---- */
/* Bílá je pevná, ne z motivu — nadpis leží na fotce v obou režimech.
   Druhý řádek drží pohromadě (`nowrap`), aby se „chovu začíná dnes"
   nerozpadlo na tři řádky jako v prvním pokusu. */
/* Na 2560px displeji působila levá strana prázdně — nadpis končil někde
   v první třetině a zbytek byla obloha. Strop je proto výš (3,5 → 5,6 rem)
   a `vw` složka strmější, takže titulek roste s oknem, ne skokem. */
.kp-hero--photo .kp-hero__title {
    margin: 1.5rem 0 0;
    font-size: clamp(2.2rem, 4.6vw, 5.6rem);
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    text-shadow: 0 2px 18px rgba(10, 16, 10, 0.42);
    white-space: nowrap;
}

.kp-hero__accent { color: var(--kp-a-2); }

.kp-hero__leaf {
    display: inline-block;
    width: 0.62em;
    height: 0.62em;
    margin-left: 0.12em;
    color: var(--kp-a-2);
    vertical-align: baseline;
}

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

.kp-hero--photo .kp-hero__lead {
    margin: clamp(1.1rem, 1.8vh, 1.9rem) 0 clamp(1.5rem, 2.4vh, 2.4rem);
    font-size: clamp(1.05rem, 1.35vw, 1.6rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 10px rgba(10, 16, 10, 0.4);
    max-width: 34ch;
}

/* --------------------------------------------------------------------------
 *  Tlačítka hero (pill + kolečko s ikonou)
 *  Jeden tvar pro obě varianty — liší se jen výplní, ne geometrií.
 * -------------------------------------------------------------------------- */

.kp-hero__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; }

.kp-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.62rem 0.62rem 0.62rem 1.5rem;
    border-radius: 999px;
    /* Tlačítko je ovládací prvek, ne nadpis — Outfit. */
    font-family: var(--kp-font-body);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.kp-cta:hover { transform: translateY(-2px); }

.kp-cta__dot {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    flex: none;
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--kp-a-deep);
}

.kp-cta__dot svg { width: 1.05rem; height: 1.05rem; }
.kp-cta__dot--dark { background: var(--kp-ink); color: #FFFFFF; }

/* Selektor je záměrně `.kp-site a.kp-cta…`, ne jen `.kp-cta…`:
   kp-site.css deklaruje `.kp-site a { color: inherit }`, což je element +
   třída — vyšší specificita než samotná třída. Bez toho tlačítko podědí
   barvu textu hero sekce a nápis na skle zmizí. */
.kp-site a.kp-cta--primary {
    background: linear-gradient(180deg, var(--kp-a-2), var(--kp-a));
    border-color: var(--kp-a-deep);
    color: #FFFFFF;
    box-shadow: 0 10px 26px rgba(28, 66, 24, 0.42);
}

.kp-site a.kp-cta--primary:hover { box-shadow: 0 14px 32px rgba(28, 66, 24, 0.5); }

/* Také pevné barvy — světlé sklo na fotce. S `--kp-ink` by se ve večerním
   režimu obarvil text na světlý a na bílém skle by zmizel. */
.kp-site a.kp-cta--glass {
    background: rgba(255, 255, 255, calc(0.72 + 0.34 * var(--kp-glass-fill)));
    border-color: rgba(255, 255, 255, 0.7);
    color: #2A2118;
    backdrop-filter: blur(calc(var(--kp-glass-blur) * 0.45));
    -webkit-backdrop-filter: blur(calc(var(--kp-glass-blur) * 0.45));
}

.kp-site a.kp-cta--glass:hover { background: #FFFFFF; }
.kp-cta--glass .kp-cta__dot--dark { background: #2A2118; color: #FFFFFF; }

/* --------------------------------------------------------------------------
 *  Panel asistentky Kuki
 * -------------------------------------------------------------------------- */

/* Sklo ve stylu Vision: tři vrstvy nad sebou.
     1. difuzní výplň — svisle laděná, aby deska měla „tloušťku"
     2. ambientní zelená záře v levém horním rohu (z akcentu, ne pevná)
     3. spekulární lem — světlý nahoře, tmavý dole, jako sklo v protisvětle
   Fotka pod panelem musí prosvítat (krytí kolem 0,30), kontrast písma nese
   text-shadow a vnitřní světlo, ne hutnější výplň. */
/* JEDEN skleněný recept pro OBA panely — doslova tentýž blok.

   Tmu NEDĚLÁ hustá barva v desce, ale ZTLUMENÍ PODKLADU (`brightness`).
   Rozdíl je zásadní: pigmentem se panel nad oblohou stejně nezatemní
   (obloha ho protlačí do světle modré) a nad trávou naopak sklo zabetonuje
   do černa. Ztlumení působí násobně, takže srovná obojí — panel drží
   stejnou váhu nad oblohou i nad loukou a zůstane průsvitný. Naměřeno na
   referencích: vnitřek obou panelů leží mezi #292B1A a #3D3523, tedy tmavá
   teplá oliva, ne zelenočerná.

   Sytost jen mírně (1,2): při 1,5 se pás nad trávou rozjel do jedovaté
   zeleně, kterou reference nemá. */
.kp-ai,
.kp-stats {
    background:
        /* spekulární záblesk pod horní hranou */
        linear-gradient(180deg,
            rgba(255, 255, 255, var(--kp-glass-sheen)) 0%,
            rgba(255, 255, 255, calc(var(--kp-glass-sheen) * 0.22)) 22%,
            rgba(255, 255, 255, 0) 46%),
        /* difuzní výplň — svisle laděná, aby deska měla „tloušťku" */
        linear-gradient(180deg,
            rgba(30, 26, 16, calc(var(--kp-glass-fill-soft) * 0.78)) 0%,
            rgba(18, 16, 10, calc(var(--kp-glass-fill) * 0.84)) 100%);
    border: 1px solid var(--kp-glass-edge);
    backdrop-filter: blur(var(--kp-glass-blur)) saturate(1.2) brightness(0.68);
    -webkit-backdrop-filter: blur(var(--kp-glass-blur)) saturate(1.2) brightness(0.68);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 -1px 0 rgba(0, 0, 0, 0.28),
        0 2px 6px rgba(8, 10, 5, 0.2),
        0 16px 38px rgba(8, 10, 5, 0.34),
        0 44px 96px rgba(8, 10, 5, 0.34);
}

.kp-ai {
    position: relative;
    width: 16.5rem;
    padding: 0.85rem 0.9rem 0.9rem;
    border-radius: 28px;
    color: #FFFFFF;
    text-shadow: 0 1px 6px rgba(8, 14, 9, 0.5);
}

/* Panel je ukotvený k pravému hornímu rohu HERO, ne k mřížce obsahu:
   mřížka je svisle vystředěná, takže panel v ní klesal do půlky snímku
   a zakrýval kurník. Absolutní pozice ho drží nahoře bez ohledu na to,
   jak vysoký je text vlevo.

   POLOHA JE DANÁ SILUETOU, ne vkusem. Na masteru začíná stavba v 53,5 %
   šířky, hřeben je v 39,6 % výšky na x ≈ 0,78 W a pravá okapová hrana
   klesá k 59,3 % výšky na x ≈ 0,847 W. Jednosloupcový panel je vysoký,
   takže se NAD hřeben nevejde — stojí VPRAVO od něj, kde už střecha klesá.

   Svisle jde tak nízko, jak dovolí právě ta klesající střecha: spodní
   hrana panelu se kotví k okapu v místě, kde padne jeho LEVÝ okraj
   (≈ 0,485 výšky snímku). Vycentrovat panel na výšku nejde — od poloviny
   hero dolů už je pod ním stavba a zakryl by ji. Dopočet přes
   `object-fit: cover` je stejný jako u panelu statistik a počítá s
   MAXIMÁLNÍM přiblížením Ken Burns, protože to je nejtěsnější okamžik.

   `object-position` posouvá výřez doprava (70 %), čímž se kurník posune
   vlevo a napravo od něj zbude o ~30 px víc oblohy. */
/* Poloha je CLAMP mezi třemi mezemi, ne jedna hodnota:
     dolní mez — pod hlavičkou, aby ji nepodtekl,
     preferovaná — těsně nad střechou kurníku,
     horní mez — tak, aby se celý vešel do okna.
   Klient hlásil useknutý panel: dřív rozhodoval jen dopočet ke střeše a na
   nízkém okně vyšel nad horní hranu. Aby clamp mohl počítat, má panel
   PEVNOU výšku `--ai-h` (obsah je stálý, žádné překvapení).

   `100dvh`, ne `100vh`: na mobilu se lišta prohlížeče schovává a `vh` drží
   původní hodnotu, takže by panel opět vyjel z viditelné plochy. */
/* Na velkém monitoru působil panel jako drobná kartička v rohu. Šířka
   i výška proto rostou s oknem (`vw` / `vh` složka v `clamp()`) a spolu
   s nimi i písmo uvnitř — jinak by se roztáhl rám kolem stejně drobného
   obsahu.

   `--ai-drop` ho posadí níž pod hlavičku, ale ne natvrdo: pořád platí
   clamp mezi třemi mezemi (pod hlavičkou / nad střechou / celý v okně),
   takže na nízkém okně panel nevyjede ven. */
.kp-hero--photo .kp-hero__ai {
    --ai-h: clamp(21.4rem, 27vh, 30rem);
    --ai-drop: clamp(4.75rem, 13vh, 12rem);

    position: absolute;
    right: clamp(1.5rem, 2.2vw, 3.25rem);
    top: clamp(var(--ai-drop),
               calc(var(--eave-y) - var(--ai-h) - 0.75rem),
               calc(100dvh - var(--ai-h) - 1.5rem));
    bottom: auto;
    width: clamp(15rem, 17vw, 22rem);
    height: var(--ai-h);
    z-index: 3;
    justify-self: unset;
    align-self: unset;
    margin-top: 0;
}

/* Písmo a rozestupy uvnitř panelu jdou s jeho velikostí. */
.kp-hero--photo .kp-hero__ai .kp-ai { padding: clamp(0.85rem, 1.2vh, 1.35rem) clamp(0.9rem, 1vw, 1.4rem); }
.kp-hero--photo .kp-hero__ai .kp-ai__name { font-size: clamp(0.92rem, 1.1vh, 1.2rem); }
.kp-hero--photo .kp-hero__ai .kp-ai__status { font-size: clamp(0.72rem, 0.88vh, 0.95rem); }
.kp-hero--photo .kp-hero__ai { --kp-ai-avatar: clamp(2.6rem, 3.4vh, 3.8rem); }
.kp-hero--photo .kp-hero__ai .kp-ai__icon { width: clamp(2.35rem, 3vh, 3.4rem); height: clamp(2.35rem, 3vh, 3.4rem); }
.kp-hero--photo .kp-hero__ai .kp-ai__icon svg { width: clamp(1.55rem, 2vh, 2.25rem); height: clamp(1.55rem, 2vh, 2.25rem); }
.kp-hero--photo .kp-hero__ai .kp-ai__label { font-size: clamp(0.72rem, 0.88vh, 0.95rem); }
.kp-hero--photo .kp-hero__ai .kp-ai__value { font-size: clamp(0.92rem, 1.1vh, 1.2rem); }
.kp-hero--photo .kp-hero__ai .kp-ai__note { font-size: clamp(0.68rem, 0.82vh, 0.88rem); }
.kp-hero--photo .kp-hero__ai .kp-ai__row { padding-block: clamp(0.55rem, 0.95vh, 1.05rem); }

.kp-hero--photo .kp-hero__ai .kp-ai__rows { margin-top: 0.15rem; }

/* Jeden sloupec, mezi řádky vlasový předěl vybledlý u obou konců. */
.kp-hero--photo .kp-hero__ai .kp-ai__row {
    position: relative;
    padding: 0.55rem 0.15rem;
    border-bottom: 0;
}

.kp-hero--photo .kp-hero__ai .kp-ai__row + .kp-ai__row::after {
    content: "";
    position: absolute;
    inset-inline: 0.4rem;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent, rgba(255, 255, 255, 0.14) 20%, rgba(255, 255, 255, 0.14) 80%, transparent);
}

/* Poznámky pod hodnotami zůstávají — referenční snímek je má a nesou
   kontext („+2 oproti včerejšku"). Panel se tím prodlouží a spodní hranou
   zasahuje nad kurník; v referenci je to stejně a klientovi to sedí. */

.kp-ai__head {
    display: flex;
    align-items: center;
    position: relative;
    gap: 0.55rem;
    padding: 0.05rem 0.15rem 0.55rem;
    border-bottom: 0;
}

/* Předěl pod hlavičkou je vlas, který u obou konců vybledne — plná linka
   by kartu rozsekla na dvě poloviny. */
.kp-ai__head::after {
    content: "";
    position: absolute;
    inset-inline: -0.25rem;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent, rgba(255, 255, 255, 0.22) 18%, rgba(255, 255, 255, 0.22) 82%, transparent);
}

.kp-ai__head > div:first-child { flex: 1; min-width: 0; }

.kp-ai__name {
    font-family: var(--kp-font-display);
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: -0.015em;
}

.kp-ai__status {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.12rem;
    font-size: 0.72rem;
    font-weight: 500;
    color: oklch(0.82 var(--accent-c) var(--accent-h));
}

.kp-ai__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: oklch(0.78 var(--accent-c) var(--accent-h));
    box-shadow: 0 0 0 3px oklch(0.7 var(--accent-c) var(--accent-h) / 0.26);
}

/* Kolečko je TEPLE KRÉMOVÉ, ne zelené: v referenci má avatar naměřený
   světlý konec #EACB8E, tedy podklad ze slámy a peří. Zelené kolečko
   slepičku pohlcovalo. Zlatý prstenec zůstává — je to jediné místo panelu
   ve značkové zlaté. */
.kp-ai__avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    flex: none;
    overflow: hidden;
    border-radius: 999px;
    background:
        radial-gradient(120% 120% at 30% 18%,
            #FFFFFF 0%, #FBF0DC 45%, #EACB8E 100%);
    border: 0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        0 4px 12px rgba(6, 12, 8, 0.4),
        0 0 0 2px rgba(240, 190, 90, 0.65);
}

/* Kresba je o kousek větší než kolečko a přesahuje ho — slepička tak
   vyplní avatar až k okraji místo aby v něm plavala. */
.kp-ai__avatar > img,
.kp-ai__hen {
    width: 112%;
    height: 112%;
    display: block;
    object-fit: cover;
}

.kp-ai__rows { list-style: none; margin: 0; padding: 0; }

.kp-ai__row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.62rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.kp-ai__row:last-child { border-bottom: 0; padding-bottom: 0.15rem; }

/* Stejné kolečko jako v pásu statistik — oba panely mluví jedním jazykem.
   Skleněný ČTVEREČEK, který tu byl původně, dělal z panelu seznam tlačítek;
   tmavý kruh naopak kresbu jen podloží. */
.kp-ai__icon {
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    flex: none;
    border-radius: 999px;
    background:
        radial-gradient(115% 115% at 50% 18%,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(0, 0, 0, 0.22) 45%,
            rgba(0, 0, 0, 0.34) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        0 2px 6px rgba(0, 0, 0, 0.22);
}

/* Záře je ve stejné barvě jako kresba a stejně silná jako v pásu statistik —
   ikona vejce má být v obou panelech k nerozeznání. */
.kp-ai__icon svg { width: 1.55rem; height: 1.55rem; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)); }
.kp-ai__icon--egg     { box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.22), 0 0 16px rgba(245, 206, 148, 0.22); }
.kp-ai__icon--flock   { box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.22), 0 0 16px rgba(108, 191, 60, 0.22); }
.kp-ai__icon--water   { box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.22), 0 0 16px rgba(46, 147, 216, 0.24); }
.kp-ai__icon--weather { box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.22), 0 0 16px rgba(195, 207, 224, 0.2); }

.kp-ai__body { min-width: 0; }
/* Popisek normálním řezem, ne verzálkami — reference má prostý řádek
   „Dnes / Hejno / Voda / Počasí" nad tučnou hodnotou. */
.kp-ai__label {
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255, 255, 255, 0.7);
}

.kp-ai__value {
    font-family: var(--kp-font-display);
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: -0.005em;
    margin: 0.08rem 0 0.06rem;
}

.kp-ai__note { font-size: 0.68rem; line-height: 1.35; color: rgba(255, 255, 255, 0.62); }

/* --------------------------------------------------------------------------
 *  Statistikový pás
 * -------------------------------------------------------------------------- */

/* Panel plave NAD fotkou a je odsazený od krajů — není to lišta přilepená
   ke spodní hraně. Sklo je stejné jako u panelu asistentky, jen hutnější:
   pod šesti čísly musí být text čitelný i nad světlou trávou. */
/* Selektor je záměrně dvojitý: `.kp-stats` níž nastavuje `position: relative`
   (kvůli hairline v ::before) a při stejné specificitě by vyhrálo pravidlo
   pozdější v souboru — panel by se přestal držet spodní hrany a skončil
   uprostřed hero, přes nadpis. */
/* Panel je VŽDY UVNITŘ fotky u její spodní hrany.

   Dřív se kotvil horní hranou k nejnižšímu bodu hejna a spodní hranu hero
   schválně přesahoval. Na velkém monitoru to dopadlo špatně: hero mělo strop
   1040 px, takže panel vyjel z fotky ven a visel nad tmavou sekcí pod ní —
   klient ho viděl POD obrázkem, ne na něm.

   Teď rozhoduje spodní hrana hero, ne motiv ve fotce. `bottom` je pevné
   odsazení a `max()` ho zvedne jen tehdy, kdyby panel zajel přes hejno:
   `--paw-y` je nejnižší bod hejna, takže rozdíl proti výšce hero říká,
   kolik místa pod hejnem zbývá. Na běžném okně vyhrává 2,5 rem a panel sedí
   nad trávou; na hodně širokém a nízkém okně, kde je hejno vysoko, ho
   `max()` posadí pod ně. */
.kp-hero--photo .kp-hero__stats {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: auto;
    bottom: clamp(1.25rem, 3.4vh, 3.5rem);
    transform: translateX(-50%);

    /* Skoro celá šířka, ne plovoucí pilulka. Na předloze klienta má pás
       okraje 2 % na každé straně (naměřeno) — proto `100% - 6rem`, což na
       2560px displeji vyjde na 96 %. Bez horního stropu schválně: poměr
       má platit i na ultraširokém monitoru. */
    width: calc(100% - 6rem);
}

/* Sklo je stejného rodu jako panel asistentky (blur, bílý lem, světlo na
   horní hraně) — recept mají doslova společný, viz blok `.kp-ai, .kp-stats`.

   Průsvitnost a čitelnost se řeší ODDĚLENĚ, ne jednou hodnotou krytí:
   deska sama je lehká, takže fotka pod ní prosvítá, a kontrast dodává
   text-shadow. Jedno hutné krytí by bylo čitelné, ale panel by vypadal
   jako neprůhledná placka. */
/* Rozměry jdou z předlohy, ne od oka. Naměřeno na `15057de6`, kde je pás
   vysoký 0,11 výšky hero a jednotlivé díly drží tenhle poměr k jeho výšce:
   kolečko 0,65 · číslo 0,23 · popisek 0,11 · rádius 0,24.

   Proto `vh` v `clamp()`: na velkém monitoru pás povyroste tak, jak ukazuje
   předloha, na notebooku se srazí na rozumné minimum. Pevné `rem` by daly
   buď drobný proužek na 2560px, nebo neúnosně tlustý pás na 1366px. */
.kp-stats {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(0.4rem, 0.8vw, 1.25rem);
    padding: clamp(0.85rem, 1.95vh, 1.9rem) clamp(1rem, 1.4vw, 2.25rem);
    border-radius: clamp(18px, 2.7vh, 40px);
    text-shadow: 0 1px 8px rgba(6, 12, 8, 0.55);
}

/* Přítmí uprostřed panelu tu bylo, ale reference ho nemá: naměřený medián
   je uprostřed pásu SVĚTLEJŠÍ (#3C3412) než u kraje (#2C2B13), tedy přesně
   naopak. Elipsa proto zmizela; sklo je rovnoměrné a čitelnost drží stín
   písma. Zůstává jen jemné ztmavení u dolní hrany, kde deska „sedí". */
.kp-stats::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(8, 10, 5, 0) 55%,
        rgba(8, 10, 5, 0.1) 100%);
}

/* Předěly nejsou plné linky, ale hairline vyblednutá u obou konců —
   stejný trik jako v referenci, drží panel vzdušný. */
.kp-stats__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(0.6rem, 1vw, 1.15rem);
    min-width: 0;
    padding-inline: clamp(0.45rem, 0.9vw, 1.4rem);
}

.kp-stats__item + .kp-stats__item::before {
    content: "";
    position: absolute;
    inset-block: 12%;
    inset-inline-start: -0.25rem;
    width: 1px;
    background: linear-gradient(180deg,
        transparent, rgba(255, 255, 255, 0.16) 22%, rgba(255, 255, 255, 0.16) 78%, transparent);
}

/* Tmavé kolečko pod ikonou. Ve v20 zmizelo (na referenci klienta žádné
   nebylo), ale klient ho chce zpět — a má pravdu v tom, že barevná kresba
   na něm drží sytost líp než na proměnlivém skle. Kolečko je proto tmavé
   a měkké, ne plná placka: uvnitř má lehký přechod a nahoře světlý lem,
   takže působí jako důlek ve skle, ne jako tlačítko. */
.kp-stats__icon {
    display: grid;
    place-items: center;
    width: clamp(2.5rem, 7.3vh, 6.6rem);
    height: clamp(2.5rem, 7.3vh, 6.6rem);
    flex: none;
    border-radius: 999px;
    background:
        radial-gradient(115% 115% at 50% 18%,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(0, 0, 0, 0.22) 45%,
            rgba(0, 0, 0, 0.34) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        0 2px 6px rgba(0, 0, 0, 0.22);
}

/* Ikony jsou plnobarevné, takže `currentColor` nemají kde použít — tříd
   `--egg`, `--heart`… se drží jen kvůli měkké záři v barvě ikony, která
   kresbu opticky odlepí od kolečka. */
/* Kresba vyplní kolečko ze dvou třetin — na předloze je poměr stejný. */
.kp-stats__icon svg {
    width: clamp(1.6rem, 4.7vh, 4.3rem);
    height: clamp(1.6rem, 4.7vh, 4.3rem);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
.kp-stats__icon--flock  { box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.22), 0 0 16px rgba(80, 170, 230, 0.22); }
.kp-stats__icon--egg    { box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.22), 0 0 16px rgba(245, 206, 148, 0.22); }
.kp-stats__icon--heart  { box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.22), 0 0 16px rgba(240, 128, 80, 0.24); }
.kp-stats__icon--leaf   { box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.22), 0 0 16px rgba(160, 208, 80, 0.22); }
.kp-stats__icon--ai     { box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.22), 0 0 16px rgba(240, 128, 48, 0.26); }
.kp-stats__icon--family { box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.22), 0 0 16px rgba(240, 192, 32, 0.24); }

.kp-stats__body { min-width: 0; }

.kp-stats__value {
    font-family: var(--kp-font-display);
    font-weight: 700;
    font-size: clamp(1.05rem, 2.55vh, 2.3rem);
    color: #FFFFFF;
    line-height: 1.15;
    white-space: nowrap;
}

/* Popisek jde o dva stupně nahoru (0,62 → 0,76). Průsvitnější sklo pod ním
   propouští světlou trávu a při původním krytí se drobné písmo u krajních
   položek ztrácelo. */
.kp-stats__label {
    font-size: clamp(0.68rem, 1.22vh, 1.1rem);
    color: rgba(255, 255, 255, 0.76);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
 *  Komunitní sekce pod statistikami — čtyři sloupce
 *
 *  Panel má stejný skleněný jazyk jako statistiky nad ním, jen v tmavě
 *  zeleném odstínu a bez rozostření pozadí (leží na plné barvě, ne na fotce).
 *  Předěly mezi sloupci jsou vyblednuté hairliny, ne plné čáry.
 * -------------------------------------------------------------------------- */

/* Horní odsazení musí uhnout panelu statistik, který od v16 přesahuje spodní
   hranu hero do téhle sekce (~50 px). Bez toho by se karta komunity dotýkala
   jeho spodní hrany a z „mostu mezi sekcemi" by byl slepenec. */
.kp-community {
    padding: 5.5rem 1.5rem 4rem;
    background: linear-gradient(180deg, #16241B 0%, #101B14 100%);
}

.kp-community__panel {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    max-width: 1180px;
    margin: 0 auto;
    padding: 2rem 1.25rem 2.25rem;
    border-radius: 28px;
    background:
        radial-gradient(120% 90% at 18% 0%,
            oklch(0.635 var(--accent-c) var(--accent-h) / 0.12), transparent 62%),
        /* Krytí řídí posuvník „Sklo" — panel je součástí stejného skleněného
           jazyka jako hero, jen sytější, protože nese text bez fotky pod ním. */
        linear-gradient(160deg,
            rgba(40, 66, 48, calc(0.72 + 0.34 * var(--kp-glass-fill))),
            rgba(18, 30, 22, calc(0.78 + 0.30 * var(--kp-glass-fill))));
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 28px 70px rgba(4, 10, 6, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ---- sloupec ---- */
.kp-col {
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 1rem;
    padding: 0 1.5rem;
    min-width: 0;
}

.kp-col + .kp-col::before {
    content: "";
    position: absolute;
    inset-block: 6%;
    inset-inline-start: 0;
    width: 1px;
    background: linear-gradient(180deg,
        transparent, rgba(255, 255, 255, 0.14) 20%, rgba(255, 255, 255, 0.14) 80%, transparent);
}

.kp-col__art { display: grid; place-items: end center; min-height: 148px; }
.kp-col__body { min-width: 0; }

.kp-col__text {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.68);
}

/* Placeholder na rendery — prosklený rámeček s maskotem. Až dorazí finální
   obrázky, mění se obsah, ne rozvržení. */
.kp-col__slot {
    display: grid;
    place-items: center;
    width: 7.6rem;
    height: 7.6rem;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed rgba(255, 255, 255, 0.16);
}

.kp-col__slot--tall { width: 8.8rem; height: 8.8rem; }

/* ---- kruhový ukazatel ---- */
.kp-community__meter { position: relative; width: 132px; height: 132px; }
.kp-community__ring { width: 100%; height: 100%; transform: rotate(-90deg); }

.kp-community__ring-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 8;
}

.kp-community__ring-value {
    fill: none;
    stroke: var(--kp-a-2, #54A046);
    stroke-width: 8;
    stroke-linecap: round;
    filter: drop-shadow(0 0 8px rgba(84, 160, 70, 0.5));
}

.kp-community__ring-icon {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.86);
}

.kp-community__ring-icon svg { width: 2.6rem; height: 2.6rem; }

/* ---- text prvního sloupce ---- */
.kp-community__eyebrow {
    display: inline-block;
    font-family: var(--kp-font-display);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #7BC96F;
}

.kp-community__number {
    font-family: var(--kp-font-display);
    font-weight: 600;
    font-size: clamp(2.1rem, 3.2vw, 2.9rem);
    line-height: 1.05;
    color: #FFFFFF;
    margin: 0.3rem 0 0.35rem;
}

/* Ve sloupci je málo místa — tlačítko drží jeden řádek a zmenší se,
   místo aby se zalomilo doprostřed slova. */
.kp-site a.kp-community__cta {
    color: #FFFFFF;
    white-space: nowrap;
    padding: 0.5rem 0.5rem 0.5rem 1.15rem;
    font-size: 0.92rem;
}

.kp-community__cta .kp-cta__dot { width: 1.85rem; height: 1.85rem; }

/* --------------------------------------------------------------------------
 *  Pohyb a atmosféra (Motion Bible §hero)
 *
 *  Všechno níž je ČISTÉ CSS. Jediné, co potřebuje JS, je parallax na scroll
 *  a dojezd čísel — obojí sedí v kp-site.js a běží lokálně v prohlížeči.
 *  Přes hranici .NET ↔ JS neteče ani jeden snímek animace.
 *
 *  Rytmus vstupu: chip → nadpis → claim → tlačítka → panel → statistiky,
 *  po ~90 ms. Pohyb je krátký (700 ms) a malý (14 px) — má naznačit, že
 *  se stránka „usazuje", ne předvádět animaci.
 * -------------------------------------------------------------------------- */

@keyframes kp-rise {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes kp-rise-right {
    from { opacity: 0; transform: translate3d(18px, 6px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Panely se sotva znatelně vznášejí — amplituda 5 px, perioda přes 7 s.
   Cílem je, aby sklo působilo jako by leželo NAD fotkou, ne na ní. */
@keyframes kp-float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -5px, 0); }
}

@keyframes kp-float-stats {
    0%, 100% { transform: translate3d(-50%, 0, 0); }
    50%      { transform: translate3d(-50%, -5px, 0); }
}

/* Sluneční paprsek — pomalé projasnění, nikdy plný jas. */
@keyframes kp-ray {
    0%, 100% { opacity: 0.16; }
    50%      { opacity: 0.34; }
}

/* Pyl stoupá a mírně se stáčí; každé zrnko má jinou dobu i zpoždění,
   aby nevznikl viditelný rytmus. */
/* Filmové přiblížení — pomalé, tam a zpět, aby nikdy „neskočilo". */
@keyframes kp-kenburns {
    from { scale: var(--hero-zoom); }
    to   { scale: var(--hero-zoom-max); }
}

/* Světelný přejezd: úzký teplý pruh, který jednou za 18 s projde záběrem.
   Vypadá jako sluneční paprsek mezi mraky, stojí jeden kompozitní layer. */
@keyframes kp-sweep {
    0%, 8%    { transform: translate3d(-65%, 0, 0); opacity: 0; }
    18%       { opacity: 1; }
    62%       { opacity: 1; }
    72%, 100% { transform: translate3d(65%, 0, 0); opacity: 0; }
}

/* Třpyt u zlatého světla — krátké probliknutí, ne blikání. */
@keyframes kp-twinkle {
    0%, 100% { opacity: 0; transform: scale(0.6); }
    45%      { opacity: 0.9; transform: scale(1); }
    70%      { opacity: 0; transform: scale(0.7); }
}

/* Dýchající tečka „Online" u asistentky. */
@keyframes kp-breathe {
    0%, 100% { box-shadow: 0 0 0 0 oklch(0.7 var(--accent-c) var(--accent-h) / 0.55); }
    70%      { box-shadow: 0 0 0 7px oklch(0.7 var(--accent-c) var(--accent-h) / 0); }
}

@keyframes kp-mote {
    0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(0.8); }
    12%  { opacity: 0.7; }
    88%  { opacity: 0.5; }
    100% { opacity: 0; transform: translate3d(26px, -180px, 0) scale(1.1); }
}

.kp-hero--photo .kp-chip,
.kp-hero--photo .kp-hero__title,
.kp-hero--photo .kp-hero__lead,
.kp-hero--photo .kp-hero__cta,
.kp-hero--photo .kp-social,
.kp-hero--photo .kp-ai,
.kp-hero--photo .kp-stats {
    animation: kp-rise 0.7s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
}

.kp-hero--photo .kp-chip        { animation-delay: 0.05s; }
.kp-hero--photo .kp-hero__title { animation-delay: 0.14s; }
.kp-hero--photo .kp-hero__lead  { animation-delay: 0.23s; }
.kp-hero--photo .kp-hero__cta   { animation-delay: 0.32s; }
.kp-hero--photo .kp-social      { animation-delay: 0.40s; }
.kp-hero--photo .kp-ai          { animation: kp-rise-right 0.75s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 0.40s both; }
.kp-hero--photo .kp-stats       { animation-delay: 0.50s; }

/* Vznášení se pouští AŽ po vstupu, aby se obě animace nervaly o transform. */
/* Panel asistentky se ZÁMĚRNĚ nevznáší. Svislé houpání celé karty ubírá
   na serióznosti — živost obstarají mikroefekty uvnitř (příchod řádků,
   dýchající tečka, plynoucí záře). Zůstává jen vstupní animace. */

.kp-hero--photo .kp-hero__stats {
    animation: kp-float-stats 9s ease-in-out 1.5s infinite;
}

/* ---- atmosféra ---- */
.kp-hero__atmos {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.kp-hero__ray {
    position: absolute;
    top: -22%;
    left: 4%;
    width: 46%;
    height: 130%;
    transform: rotate(14deg);
    background: linear-gradient(100deg,
        transparent 0%,
        rgba(255, 236, 190, 0.22) 42%,
        rgba(255, 244, 214, 0.30) 52%,
        transparent 66%);
    filter: blur(26px);
    animation: kp-ray 11s ease-in-out infinite;
}

.kp-hero__mote {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 246, 214, 0.95), rgba(255, 226, 150, 0));
    animation: kp-mote linear infinite;
}

.kp-hero__mote--1 { left: 12%; bottom: 22%; animation-duration: 15s; animation-delay: 0s; }
.kp-hero__mote--2 { left: 27%; bottom: 14%; animation-duration: 19s; animation-delay: 2.6s; }
.kp-hero__mote--3 { left: 44%; bottom: 28%; animation-duration: 17s; animation-delay: 5.2s; width: 4px; height: 4px; }
.kp-hero__mote--4 { left: 61%; bottom: 12%; animation-duration: 21s; animation-delay: 1.4s; }
.kp-hero__mote--5 { left: 76%; bottom: 25%; animation-duration: 16s; animation-delay: 7.1s; width: 4px; height: 4px; }
.kp-hero__mote--6 { left: 88%; bottom: 18%; animation-duration: 23s; animation-delay: 3.8s; }

/* ---- hover ---- */
.kp-site a.kp-cta--primary:hover { transform: translateY(-2px) scale(1.012); }
.kp-site a.kp-cta:active { transform: translateY(0) scale(0.99); }

.kp-cta__dot { transition: transform 0.24s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)); }
.kp-cta:hover .kp-cta__dot { transform: translateX(3px); }
.kp-cta--glass:hover .kp-cta__dot { transform: translateX(0) scale(1.06); }

.kp-stats__item { transition: transform 0.28s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)); }
.kp-stats__item:hover { transform: translateY(-2px); }

.kp-ai__row { transition: background 0.24s ease; border-radius: 12px; }
.kp-ai__row:hover { background: rgba(255, 255, 255, 0.06); }

.kp-col__slot { transition: transform 0.3s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)), border-color 0.3s ease; }
.kp-col:hover .kp-col__slot { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.3); }

/* ---- parallax ----
   `--kp-parallax` píše kp-site.js jednou za snímek přes requestAnimationFrame.
   Je to jediná proměnná, kterou JS na téhle stránce mění. */
.kp-hero__media img {
    will-change: transform;
    transform: translate3d(0, var(--kp-parallax, 0px), 0);
    /* Přiblížení jde přes samostatnou vlastnost `scale`, ne přes `transform` —
       jinak by se Ken Burns pral s parallaxem o jednu deklaraci. */
    scale: var(--hero-zoom, 1.06);
    animation: kp-kenburns 26s ease-in-out infinite alternate;
    /* Bez závoje vyplavala na povrch skutečná vlastnost snímku: horní část
       je zalitá sluncem a tím pádem plochá. Lehké dosycení a kontrast vrátí
       zlato do oblohy, aniž by cokoli ztmavily. */
    filter: saturate(1.12) contrast(1.05);
}

/* --------------------------------------------------------------------------
 *  Responzivita
 * -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
    .kp-hero__ai { display: none; }              /* panel by tlačil text do fotky */
    .kp-hero--photo .kp-hero__inner { grid-template-columns: minmax(0, 1fr); }
    .kp-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem 0.5rem; }
    .kp-stats__item:nth-child(3n) { border-inline-end: 0; }
    .kp-community__panel { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
    .kp-col:nth-child(3)::before { display: none; }
}

@media (max-width: 900px) {
    .kp-hero--photo { min-height: clamp(560px, 86vh, 760px); }
}

@media (max-width: 640px) {
    /* Mobil — full-bleed hero: přes fotku jde CELÝ textový blok (chip,
       nadpis, claim i obě tlačítka). Čitelnost drží gradientový scrim shora,
       ne ztmavení celé fotky — spodní třetina se subjektem zůstává čistá.
       Snímek je proto vyšší (3:5), aby text měl svoji oblohu a slepice
       svoje místo. */
    .kp-hero--photo {
        display: block;
        height: auto;
        min-height: 0;
        padding-bottom: 0;
    }

    /* Na mobilu je fotka zpátky v toku — určuje výšku hero, takže ji nesmí
       vytrhnout absolutní pozice z desktopového pravidla. */
    .kp-hero--photo > .kp-hero__media { position: static; inset: auto; }

    /* Vyšší výřez, než má samotný snímek (9:18 vs. nativních ~9:16,3):
       `cover` proto škáluje podle VÝŠKY, ukáže celý svislý rozsah a ořízne
       jen boky. Kurník tím klesne o ~80 px níž a nad ním zbude čistá obloha
       pro celý textový blok. `object-position` svisle už nemá co posouvat
       (svislý přesah je nulový), vodorovně drží kurník i hejno v záběru. */
    .kp-hero__media img {
        aspect-ratio: 9 / 18;
        height: auto;
        object-position: 52% center;
        transform: none;   /* bez parallaxu nemá zvětšení smysl */
    }

    /* Scrim je o třetinu lehčí než dřív (0,78 → 0,46 na temeni). Horní část
       snímku je tmavě modrá obloha, kde bílé písmo kontrast nepotřebuje;
       podporu chce až pásmo zlatých mraků kolem 30 % výšky. Proto gradient
       nezačíná nejtmavší — má vrchol uprostřed textu a rychle doběhne do nuly,
       aby ráno zůstalo zlaté. */
    .kp-hero__scrim {
        position: absolute;
        inset: 0 0 auto 0;
        height: calc(100vw * 2);
        background: linear-gradient(180deg,
            rgba(10, 17, 12, 0.34) 0%,
            rgba(10, 17, 12, 0.46) 18%,
            rgba(10, 17, 12, 0.38) 34%,
            rgba(10, 17, 12, 0.14) 48%,
            rgba(10, 17, 12, 0) 60%);
    }

    /* `position: static` je nutnost: na desktopu je vnitřní blok `relative`,
       takže by se absolutně umístěná kopie pozicovala vůči NĚMU — a ten na
       mobilu začíná až pod fotkou. */
    .kp-hero--photo .kp-hero__inner {
        display: block;
        position: static;
        padding: 0;
    }

    /* Celý textový blok leží nad fotkou. */
    /* Blok je stlačený schválně: musí celý skončit NAD střechou kurníku,
       která na mobilu začíná zhruba ve 49 % výšky snímku. Každý řádek navíc
       ho tlačí do stavby. */
    .kp-hero__copy {
        position: absolute;
        inset: 4.5rem 1.35rem auto 1.35rem;
        z-index: 2;
        max-width: none;
    }

    .kp-chip { font-size: 0.7rem; padding: 0.42rem 0.9rem; }

    .kp-hero--photo .kp-hero__title {
        margin: 0.6rem 0 0;
        font-size: clamp(1.8rem, 8.2vw, 2.25rem);
        white-space: normal;
        color: #FFFFFF;
        text-shadow: 0 2px 18px rgba(8, 14, 9, 0.55);
    }

    .kp-hero__accent { color: oklch(0.78 var(--accent-c) var(--accent-h)); }

    .kp-hero__pitch { margin: 0; padding: 0; background: none; }

    .kp-hero--photo .kp-hero__lead {
        margin: 0.65rem 0 1rem;
        font-size: 0.95rem;
        line-height: 1.45;
        color: rgba(255, 255, 255, 0.9);
        text-shadow: 0 1px 12px rgba(8, 14, 9, 0.5);
    }

    .kp-hero--photo .kp-hero__lead br { display: none; }

    .kp-hero__cta { gap: 0.5rem; }
    .kp-cta { width: 100%; justify-content: space-between; padding-block: 0.42rem; font-size: 0.95rem; }
    .kp-cta__dot { width: 1.9rem; height: 1.9rem; }

    /* Karta zůstává UVNITŘ fotky u spodní hrany, stejně jako na desktopu.
       Dřív visela pod fotkou (`position: relative` + záporný margin), jenže
       hero teď kryje celé okno a samo ořezává — karta by se do ořezu schovala
       a část by spadla pod přehyb. Mění se tedy jen mřížka a odsazení,
       ne způsob ukotvení. */
    .kp-hero--photo .kp-hero__stats {
        width: calc(100% - 2rem);
        bottom: 1rem;
        animation: none;
    }

    .kp-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.7rem 0.4rem;
        border-radius: 22px;
        padding: 1rem 1.1rem;
    }

    .kp-stats__item { padding-block: 0.3rem; padding-inline: 0.2rem; }
    .kp-stats__item + .kp-stats__item::before { display: none; }
    .kp-stats__value { font-size: 1.05rem; }
    .kp-stats__icon { width: 2.2rem; height: 2.2rem; }

    /* Pyl a paprsek jsou na malém displeji spíš rušivé než atmosférické. */
    .kp-hero__atmos { display: none; }

    .kp-community { padding: 2.5rem 1.1rem 2.75rem; }
    .kp-community__panel { grid-template-columns: 1fr; row-gap: 1.75rem; padding: 1.5rem 1.25rem 1.75rem; }
    .kp-col { padding: 0; grid-template-rows: auto auto; text-align: center; }
    .kp-col + .kp-col::before {
        inset: 0 10% auto 10%;
        width: auto;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
    }
    .kp-col__art { place-items: center; min-height: 0; }
    .kp-community__meter { margin: 0 auto; }
    .kp-site a.kp-community__cta { justify-content: center; }
}

/* Vypnutý pohyb — žádné vstupy, vznášení, paprsek ani pyl. Obsah je od
   začátku na svém místě a v plné viditelnosti; atmosféra se skryje úplně. */
:root[data-motion="reduced"] .kp-hero--photo .kp-chip,
:root[data-motion="reduced"] .kp-hero--photo .kp-hero__title,
:root[data-motion="reduced"] .kp-hero--photo .kp-hero__lead,
:root[data-motion="reduced"] .kp-hero--photo .kp-hero__cta,
:root[data-motion="reduced"] .kp-hero--photo .kp-social,
:root[data-motion="reduced"] .kp-hero--photo .kp-ai,
:root[data-motion="reduced"] .kp-hero--photo .kp-stats,
:root[data-motion="reduced"] .kp-hero--photo .kp-hero__stats {
    animation: none !important;
    opacity: 1 !important;
    transform: none;
}

:root[data-motion="reduced"] .kp-hero--photo .kp-hero__stats { transform: translateX(-50%); }
:root[data-motion="reduced"] .kp-hero__atmos { display: none; }
:root[data-motion="reduced"] .kp-hero__media img { transform: none; }

:root[data-motion="reduced"] .kp-cta,
:root[data-motion="reduced"] .kp-header--overlay { transition: none; }

@media (prefers-reduced-motion: reduce) {
    :root:not([data-motion="full"]) .kp-hero--photo .kp-chip,
    :root:not([data-motion="full"]) .kp-hero--photo .kp-hero__title,
    :root:not([data-motion="full"]) .kp-hero--photo .kp-hero__lead,
    :root:not([data-motion="full"]) .kp-hero--photo .kp-hero__cta,
    :root:not([data-motion="full"]) .kp-hero--photo .kp-social,
    :root:not([data-motion="full"]) .kp-hero--photo .kp-ai,
    :root:not([data-motion="full"]) .kp-hero--photo .kp-stats,
    :root:not([data-motion="full"]) .kp-hero--photo .kp-hero__stats {
        animation: none !important;
        opacity: 1 !important;
        transform: none;
    }

    :root:not([data-motion="full"]) .kp-hero--photo .kp-hero__stats { transform: translateX(-50%); }
    :root:not([data-motion="full"]) .kp-hero__atmos { display: none; }
    :root:not([data-motion="full"]) .kp-hero__media img { transform: none; }
    :root:not([data-motion="full"]) .kp-cta:hover { transform: none; }
    :root:not([data-motion="full"]) .kp-cta,
    :root:not([data-motion="full"]) .kp-header--overlay { transition: none; }
}

/* Plochý režim efektů — sklo i záře pryč, obsah zůstává čitelný. */
:root[data-effects="minimal"] .kp-ai,
:root[data-effects="minimal"] .kp-stats,
:root[data-effects="minimal"] .kp-cta--glass,
:root[data-effects="minimal"] .kp-header--overlay.is-scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

:root[data-effects="minimal"] .kp-ai,
:root[data-effects="minimal"] .kp-stats { background: rgba(22, 20, 13, 0.94); box-shadow: none; }
:root[data-effects="minimal"] .kp-community__ring-value { filter: none; }

/* ==========================================================================
 *  „WOW" vrstva — filmový pohyb hero (v16)
 *
 *  Všechno je CSS. Jediná hodnota, kterou dodává JavaScript, je
 *  `--kp-parallax` (jeden zápis za snímek přes requestAnimationFrame) —
 *  vrstvy částic si z ní jen berou různý podíl a vzniká tím hloubka.
 *  Žádné volání z Blazoru, žádná práce na hlavním vlákně navíc.
 * ========================================================================== */

/* ---- světelný přejezd ---------------------------------------------------
   Úzký teplý pruh, který jednou za 18 s projde záběrem. Je široko přesahující
   (inset -30% -55%), aby při náklonu nevykoukla jeho hrana. */
.kp-hero__sweep {
    position: absolute;
    inset: -30% -55%;
    pointer-events: none;
    background: linear-gradient(104deg,
        transparent 40%,
        rgba(255, 244, 214, 0.05) 47%,
        rgba(255, 248, 226, 0.16) 50%,
        rgba(255, 244, 214, 0.05) 53%,
        transparent 60%);
    animation: kp-sweep 18s ease-in-out 2.2s infinite;
    will-change: transform, opacity;
}

/* ---- vrstvy částic ------------------------------------------------------
   Dvě roviny hloubky. Vzdálená se scrollem posouvá o třetinu, blízká
   jeden a půl násobkem — oko to čte jako prostor, ne jako nalepené tečky. */
.kp-hero__layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.kp-hero__layer--far  { transform: translate3d(0, calc(var(--kp-parallax, 0px) * 0.35), 0); }
.kp-hero__layer--near { transform: translate3d(0, calc(var(--kp-parallax, 0px) * 1.5), 0); }

.kp-hero__layer--far .kp-hero__mote {
    width: 3px;
    height: 3px;
    opacity: 0.34;
    filter: blur(1px);
}

.kp-hero__layer--near .kp-hero__mote {
    width: 6px;
    height: 6px;
    opacity: 0.6;
}

.kp-hero__mote--7  { left: 18%; bottom: 30%; animation-duration: 26s; animation-delay: 1.1s; }
.kp-hero__mote--8  { left: 34%; bottom: 20%; animation-duration: 30s; animation-delay: 4.4s; }
.kp-hero__mote--9  { left: 52%; bottom: 34%; animation-duration: 24s; animation-delay: 8.2s; }
.kp-hero__mote--10 { left: 67%; bottom: 22%; animation-duration: 28s; animation-delay: 2.9s; }
.kp-hero__mote--11 { left: 81%; bottom: 31%; animation-duration: 32s; animation-delay: 6.6s; }
.kp-hero__mote--12 { left: 93%; bottom: 26%; animation-duration: 27s; animation-delay: 10.3s; }

/* ---- třpytky u slunce ---------------------------------------------------
   Krátká probliknutí v levé části, kde na fotce leží zlaté světlo. Čtyři
   kusy stačí; víc už je vánoční stromek. */
.kp-hero__spark {
    position: absolute;
    width: 7px;
    height: 7px;
    pointer-events: none;
    background:
        radial-gradient(circle, rgba(255, 252, 236, 0.95) 0%, rgba(255, 236, 178, 0) 70%);
    opacity: 0;
    animation: kp-twinkle 6.5s ease-in-out infinite;
}

.kp-hero__spark::before {
    content: "";
    position: absolute;
    inset: -3px;
    background:
        linear-gradient(0deg, transparent 46%, rgba(255, 250, 228, 0.75) 50%, transparent 54%),
        linear-gradient(90deg, transparent 46%, rgba(255, 250, 228, 0.75) 50%, transparent 54%);
}

.kp-hero__spark--1 { left: 9%;  top: 44%; animation-delay: 0.4s; }
.kp-hero__spark--2 { left: 15%; top: 55%; animation-delay: 2.6s; animation-duration: 7.5s; }
.kp-hero__spark--3 { left: 6%;  top: 62%; animation-delay: 4.3s; animation-duration: 8s; }
.kp-hero__spark--4 { left: 21%; top: 39%; animation-delay: 6.1s; }

/* ---- živý panel asistentky ---------------------------------------------- */

/* Tečka „Online" dýchá — prstenec se rozeběhne a zhasne, ne blikání. */
.kp-ai__dot { animation: kp-breathe 2.9s ease-out infinite; }

/* Velmi pomalá zelená polární záře uvnitř skla. Drží panel „živý" i když
   se na stránce nic neděje. */
.kp-ai::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(76% 60% at 20% 4%,
        oklch(0.72 var(--accent-c) var(--accent-h) / 0.22), transparent 72%);
    animation: kp-aurora 14s ease-in-out infinite alternate;
}

.kp-ai__head,
.kp-ai__rows { position: relative; z-index: 1; }

/* Řádky přijdou po panelu, jeden po druhém. */
.kp-hero--photo .kp-hero__ai .kp-ai__row {
    animation: kp-rise 0.6s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
}

.kp-hero--photo .kp-hero__ai .kp-ai__row:nth-child(1) { animation-delay: 0.62s; }
.kp-hero--photo .kp-hero__ai .kp-ai__row:nth-child(2) { animation-delay: 0.71s; }
.kp-hero--photo .kp-hero__ai .kp-ai__row:nth-child(3) { animation-delay: 0.80s; }
.kp-hero--photo .kp-hero__ai .kp-ai__row:nth-child(4) { animation-delay: 0.89s; }

/* Upozornění na vodu decentně pulzuje — je to jediný řádek, který po
   uživateli něco chce. */
.kp-hero--photo .kp-hero__ai .kp-ai__row:nth-child(3) .kp-ai__icon {
    animation: kp-nudge 4.5s ease-in-out 2s infinite;
}

@keyframes kp-nudge {
    0%, 88%, 100% { transform: none; box-shadow: 0 0 0 0 rgba(140, 197, 232, 0); }
    92%           { transform: translateY(-2px); box-shadow: 0 0 0 6px rgba(140, 197, 232, 0.14); }
}

@keyframes kp-aurora {
    from { transform: translate3d(-4%, -2%, 0); opacity: 0.5; }
    to   { transform: translate3d(6%, 3%, 0);   opacity: 1; }
}

/* ---- mikrointerakce ----------------------------------------------------- */

/* Přejezd světla po primárním tlačítku při hoveru. Maskovaný na tvar
   pilulky, takže nikde nepřeteče. */
.kp-site a.kp-cta--primary { position: relative; overflow: hidden; }

.kp-site a.kp-cta--primary::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, 0.28) 50%, transparent 62%);
    transform: translateX(-120%);
    transition: transform 0.7s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.kp-site a.kp-cta--primary:hover::after { transform: translateX(120%); }

/* Ikona statistiky se při najetí rozsvítí. */
.kp-stats__icon { transition: box-shadow 0.3s ease, transform 0.3s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)); }

.kp-stats__item:hover .kp-stats__icon {
    transform: translateY(-1px) scale(1.06);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.07), 0 6px 16px rgba(6, 12, 8, 0.35);
}

/* Zelený akcent v hlavičce dostane při najetí jemné doznívající světlo. */
.kp-header--overlay .kp-nav__cta { transition: box-shadow 0.3s ease, background 0.3s ease, transform 0.2s ease; }
.kp-header--overlay .kp-nav__cta:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(30, 70, 26, 0.5); }

/* ---- klidový režim ------------------------------------------------------
   Vypnutý pohyb (systémově i z panelu Vzhled) zhasne celou vrstvu. Obsah
   zůstává na svém místě a v plné viditelnosti. */
:root[data-motion="reduced"] .kp-hero__media img,
:root[data-motion="reduced"] .kp-hero__sweep,
:root[data-motion="reduced"] .kp-hero__spark,
:root[data-motion="reduced"] .kp-ai__dot,
:root[data-motion="reduced"] .kp-ai::after,
:root[data-motion="reduced"] .kp-hero--photo .kp-hero__ai .kp-ai__row,
:root[data-motion="reduced"] .kp-hero--photo .kp-hero__ai .kp-ai__row .kp-ai__icon {
    animation: none !important;
    opacity: 1;
}

:root[data-motion="reduced"] .kp-hero__layer { transform: none; }
:root[data-motion="reduced"] .kp-site a.kp-cta--primary::after { display: none; }

@media (prefers-reduced-motion: reduce) {
    :root:not([data-motion="full"]) .kp-hero__media img,
    :root:not([data-motion="full"]) .kp-hero__sweep,
    :root:not([data-motion="full"]) .kp-hero__spark,
    :root:not([data-motion="full"]) .kp-ai__dot,
    :root:not([data-motion="full"]) .kp-ai::after,
    :root:not([data-motion="full"]) .kp-hero--photo .kp-hero__ai .kp-ai__row,
    :root:not([data-motion="full"]) .kp-hero--photo .kp-hero__ai .kp-ai__row .kp-ai__icon {
        animation: none !important;
        opacity: 1;
    }

    :root:not([data-motion="full"]) .kp-hero__layer { transform: none; }
    :root:not([data-motion="full"]) .kp-site a.kp-cta--primary::after { display: none; }
}

/* Plochý režim efektů — atmosféra i přejezdy pryč, sklo zůstane. */
:root[data-effects="minimal"] .kp-hero__sweep,
:root[data-effects="minimal"] .kp-hero__spark,
:root[data-effects="minimal"] .kp-ai::after { display: none; }

/* ==========================================================================
 *  Nálada webu — sekce vedle Forge panelu Vzhledu (v19)
 *
 *  ForgeTweaksPanel je uzavřená komponenta bez slotu na vlastní obsah, takže
 *  sezónní přepínač stojí vedle ní jako samostatná karta se stejným
 *  vzhledem. Žádné podstrkávání obsahu do cizího DOM.
 * ========================================================================== */

.kp-mood {
    position: fixed;
    z-index: 1001;                     /* nad Forge panelem i scrimem */
    right: calc(360px + 3rem);         /* šířka Forge panelu + mezera */
    bottom: 1.25rem;
    width: 16rem;
    padding: 1rem 1.1rem 1.1rem;
    border-radius: var(--r-xl, 22px);
    background: var(--surface-s1, var(--kp-cream-2));
    border: 1px solid var(--line, var(--kp-line));
    box-shadow: var(--kp-elev-3);
    color: var(--fg-1, var(--kp-ink));
    animation: kp-rise 0.4s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
}

.kp-mood__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}

.kp-mood__title {
    font-family: var(--kp-font-display);
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
}

.kp-mood__auto {
    font: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    cursor: pointer;
    border: 1px solid var(--kp-a-line);
    background: transparent;
    color: var(--kp-ink-soft);
    transition: background 0.2s ease, color 0.2s ease;
}

.kp-mood__auto.is-on {
    background: var(--kp-a-soft);
    color: var(--kp-a-deep);
}

[data-theme="dark"] .kp-mood__auto.is-on { color: var(--kp-a-2); }

.kp-mood__group + .kp-mood__group { margin-top: 0.8rem; }

.kp-mood__label {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--kp-ink-faint);
    margin-bottom: 0.4rem;
}

.kp-mood__row { display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* Puntík u každého období nese jeho barvu — stejný princip jako u rychlých
   předvoleb v panelu Vzhledu. Jednobarevné odrážky by z přepínače udělaly
   seznam, ne paletu. */
.kp-mood__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    cursor: pointer;
    border: 1px solid var(--line, var(--kp-line));
    background: var(--surface-s2, var(--kp-cream));
    color: var(--fg-1, var(--kp-ink));
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.kp-mood__chip::before {
    content: "";
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 999px;
    background: var(--kp-mood-dot, currentColor);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--kp-mood-dot, currentColor) 22%, transparent);
}

.kp-mood__chip:hover { transform: translateY(-1px); }
.kp-mood__chip.is-on {
    border-color: var(--kp-mood-dot, var(--kp-a));
    background: color-mix(in srgb, var(--kp-mood-dot, var(--kp-a)) 14%, transparent);
    font-weight: 600;
}

.kp-mood__chip--spring { --kp-mood-dot: #7CC77C; }
.kp-mood__chip--summer { --kp-mood-dot: #F2C230; }
.kp-mood__chip--autumn { --kp-mood-dot: #E08A3C; }
.kp-mood__chip--winter { --kp-mood-dot: #8FC2E8; }
.kp-mood__chip--day    { --kp-mood-dot: #F6C453; }
.kp-mood__chip--night  { --kp-mood-dot: #5A6FA8; }

.kp-mood__hint {
    margin: 0.9rem 0 0;
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--kp-ink-faint);
}

/* Na užším okně se karta postaví nad Forge panel, ne vedle něj. */
@media (max-width: 1100px) {
    .kp-mood {
        right: 0.75rem;
        left: auto;
        bottom: auto;
        top: 4.5rem;
        width: 15rem;
    }
}

@media (max-width: 640px) {
    .kp-mood { right: 0.75rem; left: 0.75rem; width: auto; }
}

/* ==========================================================================
 *  Rychlé předvolby v panelu Vzhledu — puntík v barvě PŘEDVOLBY
 *
 *  Forge kreslí puntík z `--accent`, takže všechny čtyři vycházely stejně
 *  (zeleně, protože zelená je náš výchozí akcent). Barvu proto dodáváme
 *  podle pořadí tlačítek — to je dané pořadím popisků, které panelu
 *  předáváme v MainLayout/AppLayout.
 * ========================================================================== */

.forge-tweaks-panel__preset:nth-of-type(1)::before { background: linear-gradient(135deg, oklch(0.62 0.20 295), oklch(0.45 0.18 295)); }
.forge-tweaks-panel__preset:nth-of-type(2)::before { background: linear-gradient(135deg, oklch(0.66 0.17 262), oklch(0.48 0.16 262)); }
.forge-tweaks-panel__preset:nth-of-type(3)::before { background: linear-gradient(135deg, oklch(0.68 0.10 148), oklch(0.48 0.09 148)); }
.forge-tweaks-panel__preset:nth-of-type(4)::before { background: linear-gradient(135deg, oklch(0.80 0.15  75), oklch(0.62 0.14  62)); }

/* ==========================================================================
 *  Přepnutí motivu bez probliknutí
 *
 *  Světlý a tmavý motiv mění desítky proměnných naráz. Bez společného
 *  přechodu se část ploch překreslí okamžitě a část až s vlastní animací —
 *  a přesně to čte oko jako bliknutí. Jedna sjednocená doba na velkých
 *  plochách to srovná.
 * ========================================================================== */

.kp-site,
.kp-header,
.kp-footer,
.kp-band,
.kp-card,
.kp-coop,
.kp-hencard,
.kp-info-card,
.kp-mood,
.kp-cta-band {
    transition:
        background-color var(--t-slow, 420ms) ease,
        border-color var(--t-slow, 420ms) ease,
        color var(--t-slow, 420ms) ease;
}

:root[data-motion="reduced"] .kp-site,
:root[data-motion="reduced"] .kp-header,
:root[data-motion="reduced"] .kp-footer,
:root[data-motion="reduced"] .kp-card,
:root[data-motion="reduced"] .kp-mood {
    transition: none;
}

/* Prolnutí sezón při vypnutém pohybu — obraz se vymění bez animace. */
:root[data-motion="reduced"] .kp-hero--photo > .kp-hero__media:not(.kp-hero__media--out) {
    animation: none;
}

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

/* --------------------------------------------------------------------------
 *  Rozostřená spodní hrana + sociální důkaz (v23)
 * -------------------------------------------------------------------------- */

/* Fotka se u spodní hrany ztrácí do ztracena, aby dotyk panelu statistik
   s trávou neměl ostrou hranu.

   Je to `backdrop-filter` s maskou, ne pruh barvy přes obraz: obraz se
   opravdu rozmaže a efekt sílí směrem dolů. Přechod v masce má víc zastávek
   než dvě — lineární náběh je na velké ploše vidět jako pruh (Machovy pásy),
   proto se rozostření nabaluje pozvolna. */
.kp-hero--photo .kp-hero__hem {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: clamp(9rem, 26vh, 22rem);
    z-index: 2;
    pointer-events: none;

    backdrop-filter: blur(clamp(6px, 1.4vh, 16px));
    -webkit-backdrop-filter: blur(clamp(6px, 1.4vh, 16px));
    mask-image: linear-gradient(to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.06) 24%,
        rgba(0, 0, 0, 0.22) 44%,
        rgba(0, 0, 0, 0.52) 64%,
        rgba(0, 0, 0, 0.82) 82%,
        rgba(0, 0, 0, 1) 100%);
    -webkit-mask-image: linear-gradient(to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.06) 24%,
        rgba(0, 0, 0, 0.22) 44%,
        rgba(0, 0, 0, 0.52) 64%,
        rgba(0, 0, 0, 0.82) 82%,
        rgba(0, 0, 0, 1) 100%);
}

/* Jemné ztmavení v téže ploše — samotné rozostření by pod bílým písmem
   panelu nestačilo, a tmavší pata zároveň drží oko u statistik. */
.kp-hero--photo .kp-hero__hem::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(8, 12, 7, 0) 0%,
        rgba(8, 12, 7, 0.1) 45%,
        rgba(8, 12, 7, 0.32) 100%);
}

:root[data-effects="minimal"] .kp-hero--photo .kp-hero__hem {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* --- sociální důkaz ------------------------------------------------------ */

.kp-social {
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 0.9vh, 0.85rem);
    margin-top: clamp(1.1rem, 2vh, 2rem);
}

.kp-social__lead {
    margin: 0;
    font-size: clamp(0.82rem, 1vw, 1.05rem);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 1px 10px rgba(10, 16, 10, 0.5);
}

.kp-social__row {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 0.7vw, 0.9rem);
}

.kp-social__faces {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Překryv řeší záporný margin, ne absolutní pozice: řádek pak roste
   přirozeně s počtem tváří a nemusí se nic přepočítávat. Pořadí vrstvení
   je obrácené (`--i`), aby levá tvář ležela NA pravé — tak to má předloha. */
.kp-social__face {
    position: relative;
    z-index: calc(10 - var(--i, 0));
    width: clamp(2.1rem, 2.5vw, 3.1rem);
    height: clamp(2.1rem, 2.5vw, 3.1rem);
    border-radius: 999px;
    overflow: hidden;
    background: var(--kp-a-soft, rgba(255, 255, 255, 0.2));
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.92),
        0 3px 10px rgba(8, 14, 9, 0.35);
}

.kp-social__face + .kp-social__face { margin-inline-start: clamp(-0.75rem, -0.8vw, -0.5rem); }

.kp-social__face svg,
.kp-social__face img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Odznak navazuje na řádek tváří a mírně ho podebírá, jako v předloze. */
.kp-social__badge {
    display: inline-grid;
    place-items: center;
    margin-inline-start: clamp(-0.6rem, -0.55vw, -0.35rem);
    padding: clamp(0.3rem, 0.5vh, 0.5rem) clamp(0.6rem, 0.75vw, 0.95rem);
    min-height: clamp(2.1rem, 2.5vw, 3.1rem);
    border-radius: 999px;
    background: linear-gradient(180deg,
        oklch(0.46 var(--accent-c) var(--accent-h)),
        oklch(0.36 var(--accent-c) var(--accent-h)));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 0 0 2px rgba(255, 255, 255, 0.92),
        0 3px 10px rgba(8, 14, 9, 0.35);
    color: #FFFFFF;
    font-family: var(--kp-font-display);
    font-weight: 700;
    font-size: clamp(0.74rem, 0.85vw, 0.98rem);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .kp-social { align-items: flex-start; }
    .kp-social__lead { font-size: 0.82rem; }
}