/* Lišta LEŽÍ NA FOTCE, nerezervuje si nad ní místo — to je jediné, co dnes
   tenhle kabát dělá. Barvy, sklo i vlas si bere ze základu v kp-site.css,
   stejně jako každá jiná stránka.

   Dřív tu byla průhledná lišta s bílým písmem. Nad noční fotkou to nese, nad
   denní ne: naměřeno na živých stránkách (1440 px, světlý motiv, denní fotka)
   kontrast 2,82 na `/` a 2,26 na `/reference` proti 8,08 jinde. Fotka se
   během dne mění, takže to nebyla výjimka, ale dvě stránky, kde se nabídka
   půl dne nedala přečíst. Zachránit bílé písmo scrimem znamená položit přes
   fotku zhruba padesátiprocentní černou — tedy tmavý pruh, ne lehounce
   průhlednou lištu.

   Zpevněný stav (`.is-scrolled`) přitom na sklo s tmavým písmem přepínal
   odjakživa. Tohle ruší jen tu výjimku mezi načtením stránky a prvním
   odrolováním, aby měl web jednu hlavičku, ne dvě. */
/* `.kp-header.kp-header--overlay`, ne jen `.kp-header--overlay`: základ
   `.kp-header` v kp-site.css má stejnou specifičnost (0,1,0) a načítá se
   POZDĚJI, takže by svůj vodorovně mizející gradient prosadil zpátky.
   Dvě třídy na tomtéž prvku (0,2,0) to rozhodnou bez `!important`. */
.kp-header.kp-header--overlay {
    position: fixed;
    inset-inline: 0;
    top: 0;

    /* Plocha po CELÉ šířce a v jednom krytí — žádné rozplývání doprava ani
       dolů. Základ v kp-site.css se rozplývá doprava až na 34 % krytí a
       čitelnost tam dotahuje `backdrop-filter`; nad krémovou stránkou to
       stačí, nad fotkou ne. A hlavně: rozostření se NEDÁ zachytit do snímku
       View Transition (snímek je plochý obrázek a filtr vzorkuje to, co je
       za ním), takže při přechodu z lišty zbyla průsvitná fólie a nabídka
       se nad oblohou ztratila. Vlastní plocha ten problém nemá — je to
       obyčejná barva a do snímku se vykreslí. */
    background: color-mix(in srgb, var(--kp-cream) 84%, transparent);
}

/* 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ší.

       Základ je v `--kp-hero-zoom-base` na `:root`, protože si ho bere i
       fotka na /reference (`kp-reference.css`). Je to TÁŽ fotka na tomtéž
       místě a přechod mezi stránkami ji sdílí jako jeden prvek; kdyby si
       každá stránka držela vlastní číslo, rozešly by se — a přesně to se
       stalo: reference neměla přiblížení žádné a výřez se lišil o 6 %. */
    --hero-zoom: var(--kp-hero-zoom-base);
    --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;
    animation-delay: var(--kp-in-shift, 0s);
}

/* Skutečnou výměnu nálady pozná přítomnost odcházející vrstvy (`--out`):
   jen tehdy má fade běžet od začátku, proto se u ní posun nuluje. */
.kp-hero--photo:has(> .kp-hero__media--out) > .kp-hero__media {
    animation-delay: 0s;
}

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

/* Scrim a atmosféra musí zůstat NAD oběma vrstvami obrazu.
   Pořadí vrstev hero (odspodu): fotka 1 → závoj a rozostřený lem 2 →
   atmosféra 3 → ROZPUŠTĚNÍ SPODNÍ HRANY 3 (jako `::after` je poslední
   sourozenec, takže při shodném stupni maluje nad atmosférou) → pás statistik
   a panel asistentky 4 → text 5.
   Statistiky a panel jsou o stupeň výš, než bývaly: paprsek v atmosféře je
   světlý přechod přes levou třetinu a rozpouštění pod ním vycházelo na 70 %
   krytí — hrana zůstávala vidět. Nad atmosférou vychází naplno a text nad ním
   je pořád nedotčený. */
.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: 5; }

.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%;

    /* Strop je společný s konfigurátorem (--kp-page-max), aby levá hrana
       nadpisu a levá hrana panelu stály v jedné svislici. Fotka na pozadí jde
       dál od kraje ke kraji — omezuje se obsah, ne sekce. Dřív tu strop nebyl
       vůbec a na 2560px se text táhl přes celou šířku.

       Rovnice MUSÍ být táž jako u `.kp-section` (kp-site.css), tedy strop
       VČETNĚ obou okrajů. Bez těch dvou gutterů se strop chytal dřív a text
       hero se od hlavičky i od zbytku stránky odsunul přesně o jeden gutter:
       naměřeno 0 px do 1440px šířky, ale 51,8 px na 1728px a 57,6 px na
       1920px. Přesně to bylo hlášeno jako „hero není zarovnané jako stránka
       a menu". */
    max-width: calc(var(--kp-page-max, 1560px) + 2 * var(--kp-gutter, 24px));
    margin-inline: auto;
    /* Text jde o kus VÝŠ (7 rem → 5,4 rem). Spolu s větší mezerou nad ikonami
       sítí z toho vznikne vzduch mezi sdělením a odbočkou na sociální sítě —
       přesně to klient chtěl. Blok je svisle vystředěný, takže ubrání shora
       ho posune nahoru, ne dolů. */
    padding: 5.4rem var(--kp-gutter, clamp(16px, 3vw, 72px)) 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: var(--kp-a-deep, #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;
}
/* Zvýrazněná část nadpisu hero. Třída se NEVYSKYTUJE v žádné .razor — nese
   ji přeložený text v `SharedResource*.resx` (`Hero.Title` obsahuje značky).
   Právě proto ji úklid mrtvých stylů ve v92 omylem smazal a nadpis zbělal;
   `tools/check-css.py` teď prohledává i .resx. */
.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 Agáty
 * -------------------------------------------------------------------------- */

/* 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),
        /* Stín sahá nejvýš ~28 px pod pás. Bývaly tu ještě `0 16px 38px` a
           `0 44px 96px`, dohromady 140 px — pás přitom stojí 30 px nad spodní
           hranou hero, takže se drtivá většina toho stínu ořízla o `overflow:
           hidden` a zbyla z ní vodorovná šedá linka přes celou šířku. Vypadalo
           to jako hrana fotky, a proto to přežilo tak dlouho: fotka tam
           opravdu končila. Jakmile se fotka začala rozpouštět, zůstal na
           stránce jen ten oříznutý stín. */
        0 2px 6px rgba(8, 10, 5, 0.2),
        0 8px 20px 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: 4;
    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);
}

.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)); }
/* Lem má všechny čtyři ikony společný, liší se jen barva záře. Jde do
   proměnné, protože ho potřebuje i `@keyframes kp-nudge`: `box-shadow` se
   animuje jako CELÝ seznam vrstev, takže klíčový snímek, který by nesl jen
   prstenec pulzu, by lem beze stopy smazal — a přesně to se u ikony vody
   dělo (od druhé vteřiny byla jako jediná ze čtyř plochá). */
.kp-ai__icon { --kp-ai-lem: 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); }

.kp-ai__icon--egg     { box-shadow: var(--kp-ai-lem), 0 0 16px rgba(245, 206, 148, 0.22); }
.kp-ai__icon--flock   { box-shadow: var(--kp-ai-lem), 0 0 16px rgba(108, 191, 60, 0.22); }
/* Prstenec pulzu je v klidové hodnotě taky — průhledný a nulový, takže
   není vidět. Jde o to, aby se klidový stav rovnal klíčovému snímku 0 %
   VRSTVU PO VRSTVĚ: `box-shadow` se animuje jako celý seznam, a kdyby
   klidový stav měl o vrstvu míň, přeskočí ikona ve chvíli, kdy prodleva
   doběhne. Hlídá to `tools/render/v97-fill-mode.js`. */
.kp-ai__icon--water   { box-shadow: var(--kp-ai-lem), 0 0 16px rgba(46, 147, 216, 0.24),
                                    0 0 0 0 rgba(140, 197, 232, 0); }
.kp-ai__icon--weather { box-shadow: var(--kp-ai-lem), 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: 4;
    left: 50%;
    top: auto;
    bottom: clamp(1.25rem, 3.4vh, 3.5rem);
    transform: translateX(-50%);

    /* Pás sdílí OSU s textem nad sebou, ne vlastní odsazení. Dřív tu bylo
       pevné `calc(100% - 6rem)`, tedy vždy 48 px od kraje — jenže osa obsahu
       se šířkou okna roste (gutter je `3vw`), takže rozdíl proti nadpisu
       kolísal: 17,7 px na 1010px, 9,6 px na 1280px, 4,8 px na 1440px. Nikdy
       to nesedělo a pokaždé jinak, což je přesně to, co oko čte jako
       nedodělek. Teď je pás široký jako obsah stránky a jeho levá hrana
       stojí ve svislici s nadpisem na každé šířce. */
    width: min(calc(100% - 2 * var(--kp-gutter, 24px)), var(--kp-page-max, 1560px));
}

/* 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. */
/* POZOR — celý pás byl odměřený ve ŠPATNÉ OSE.
   Velikost kolečka, kresby, čísla i popisku visela na `vh`, tedy na VÝŠCE
   okna. Místo, do kterého se to má vejít, je ale dané ŠÍŘKOU sloupce, a ta
   jde z `vw` a je zastropovaná na 1560 px. Na vysokém monitoru se proto
   poměr rozjel: kolečko 105 px, číslo 36,7 px, popisek 17,6 px — a sloupec
   pořád 238 px. Popisky se pak usekly na „Aktivníc…", „Vajec dn…".

   Naměřeno (šířka × výška okna, kolik ze šesti popisků je useknutých):
     1280×1080 → 4/6      1280×1240 → 6/6      1920×1440 → 6/6
   Při výšce 900 px se to nestane při ŽÁDNÉ šířce — proto to dlouho prošlo.

   Všechno je teď na `vw` a menší, jak si majitel přál. Po opravě 0/6
   useknutých na deseti kombinacích, výška pásu 76 px místo 123 a ve sloupci
   zbývá 42 px rezervy. */
.kp-stats {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(0.35rem, 0.55vw, 0.8rem);
    padding: clamp(0.7rem, 0.9vw, 1.15rem) clamp(0.8rem, 1vw, 1.4rem);
    border-radius: clamp(16px, 1.2vw, 22px);
    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.45rem, 0.6vw, 0.72rem);
    min-width: 0;
    padding-inline: clamp(0.3rem, 0.5vw, 0.7rem);
}

.kp-stats__item + .kp-stats__item::before {
    content: "";
    position: absolute;
    inset-block: 18%;
    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(1.85rem, 2.05vw, 2.5rem);
    height: clamp(1.85rem, 2.05vw, 2.5rem);
    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.05rem, 1.15vw, 1.4rem);
    height: clamp(1.05rem, 1.15vw, 1.4rem);
    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(0.95rem, 1.05vw, 1.3rem);
    color: #FFFFFF;
    line-height: 1.1;
    /* Tabulkové číslice: šest čísel pod sebou má stát na společné
       svislici a při dopočítávání se nesmí cukat. */
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.015em;
    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. */
/* Popisek je teď verzálkový štítek — drobný, prostrkaný, tišší než číslo.
   `text-overflow: ellipsis` je PRYČ schválně: usekávání bylo jen zametání
   pod koberec. Když by místo přece jen došlo, ať radši zalomí. */
.kp-stats__label {
    font-size: clamp(0.66rem, 0.62vw, 0.78rem);
    line-height: 1.25;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.68);
    white-space: normal;
}

/* --------------------------------------------------------------------------
 *  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. Dřív dojezd na 7px u 8px tečky —
   halo skoro tak velké jako sama tečka na malém řádku vedle textu čtenář
   přečetl jako "zelený pruh, co roste a mizí", ne jako klidný stavový puls.
   4px dojezd a nižší vrcholová opacita drží efekt při okraji vnímání. */
@keyframes kp-breathe {
    0%, 100% { box-shadow: 0 0 0 0 oklch(0.7 var(--accent-c) var(--accent-h) / 0.4); }
    70%      { box-shadow: 0 0 0 4px 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: calc(0.05s + var(--kp-in-shift, 0s)); }
.kp-hero--photo .kp-hero__title { animation-delay: calc(0.14s + var(--kp-in-shift, 0s)); }
.kp-hero--photo .kp-hero__lead  { animation-delay: calc(0.23s + var(--kp-in-shift, 0s)); }
.kp-hero--photo .kp-hero__cta   { animation-delay: calc(0.32s + var(--kp-in-shift, 0s)); }
.kp-hero--photo .kp-social      { animation-delay: calc(0.40s + var(--kp-in-shift, 0s)); }
.kp-hero--photo .kp-ai          { animation: kp-rise-right 0.75s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both; }
.kp-hero--photo .kp-ai          { animation-delay: calc(0.40s + var(--kp-in-shift, 0s)); }
.kp-hero--photo .kp-stats       { animation-delay: calc(0.50s + var(--kp-in-shift, 0s)); }

/* JEDNORÁZOVOST vstupu — jádro opravy „druhého načtení".

   Stránka se s InteractiveServer prerenderem kreslí DVAKRÁT: nejdřív statické
   SSR HTML (rychlé první vykreslení), pak ji okruh po připojení celou nahradí
   interaktivním renderem. Prvky jsou po výměně NOVÉ, takže jim CSS animace
   začnou od nuly — hotová stránka zhasla a vyjela podruhé. Přesně ten „flash
   jako refresh".

   Dřív to hlídala třída `kp-live` (vstup doběhl → nové prvky se kreslí rovnou
   hotové). Jenže to je ZÁVOD, který se prohrává: hydratace přišla naměřeně
   v 1,12 s při studeném načtení a ještě dřív při teplém (reload po přepnutí
   jazyka), zatímco `kp-live` naskakovala až v 1,6 s. Uživatel proto viděl
   přesně to, co bylo hlášeno: stránka naskočí a pak ještě jednou problikne.

   Teď se místo zákazu POSOUVÁ ČAS. `kp-site.js` v okamžiku výměny zapíše na
   <html> `--kp-in-shift: -<uplynulé sekundy>`, takže animace na nových
   prvcích nezačne od nuly, ale naváže přesně tam, kde ji výměna zastihla.
   Doběhla-li už, záporné zpoždění ji rovnou postaví do konečného stavu
   (`both`). Výsledek nezávisí na tom, KDY okruh naskočí — a to je ten rozdíl
   proti bráně.

   `kp-live` zůstává jen jako pojistka pro prohlížeče bez `calc()` nad
   custom property v `animation-delay` (a pro prvky mimo tuhle sadu). */
html.kp-live .kp-hero--photo .kp-chip,
html.kp-live .kp-hero--photo .kp-hero__title,
html.kp-live .kp-hero--photo .kp-hero__lead,
html.kp-live .kp-hero--photo .kp-hero__cta,
html.kp-live .kp-hero--photo .kp-social,
html.kp-live .kp-hero--photo .kp-ai,
html.kp-live .kp-hero--photo .kp-stats {
    animation-play-state: paused;
    animation-delay: -10s;
}

/* 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));
    /* `backwards` ze stejného důvodu jako u `.kp-hero__sweep` výš, jen je to
       tady vidět déle: zrnka mají zpoždění až 10,3 s a krytí jim dávají
       vrstvy hloubky (0,34 a 0,6). Bez fill-mode tedy zrnko celou tu dobu
       nehybně svítí na výchozím místě a pak zmizí. Naměřeno na
       `--mote--12`: krytí 0,34 bez pohybu od 46 ms do 10 470 ms, pak skok
       na 0,00 v jednom snímku.
       Pravidla vrstev a jednotlivých zrnek níž proto smějí sahat jen na
       LONGHANDY (`animation-duration`, `animation-delay`). Zkratka
       `animation:` by `animation-fill-mode` mlčky srazila zpátky na `none`
       a vada by se vrátila, aniž by se tenhle řádek změnil. */
    animation: kp-mote linear infinite backwards;
}

.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); }

/* ---- 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; }
}

@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. */
    /* SLOUPEC, NE PLOCHA. Do 2026-09-01 tu byl `display: block` a nad fotkou
       plavaly dva absolutně umístěné bloky: text přišpendlený nahoře a panel
       statistik u spodní hrany. Dokud se text vešel, vypadalo to dobře —
       jenže text mezitím povyrostl a panel si na mobilu sedl na ikony
       sociálních sítí a zakryl 28 ze 42 px jejich řádku.

       Doladit to o pár pixelů nešlo: nadpis je v němčině o 12 znaků delší
       než v češtině, takže se láme o řádek navíc a rozdíl mezi jazyky je
       kolem 40 px. Dvě absolutní kotvy nad společnou plochou se prostě
       dřív nebo později potkají.

       Teď jsou oba bloky V TOKU pod sebou a panel má `margin-top: auto`:
       když se všechno vejde, přisaje se ke spodní hraně přesně jako dřív
       a nic se opticky nezměnilo; když je textu víc, odsune se níž a hero
       povyroste. Překryv tím není odsunutý, ale nemožný. */
    .kp-hero--photo {
        display: flex;
        flex-direction: column;
        height: auto;
        /* Táž výška, jakou dřív dávala fotka v toku (poměr 9:18). Zůstává
           jako MINIMUM, aby hero na krátkém textu nesplasklo. */
        min-height: calc(100vw * 2);
        padding-bottom: 0;
    }

    /* Fotka je podklad, ne prvek toku: výšku hero teď určuje obsah, takže
       kdyby zůstala v toku, sčítala by se s ním a hero by bylo dvojnásobné. */
    .kp-hero--photo > .kp-hero__media {
        position: absolute;
        inset: 0;
        z-index: 0;
    }

    /* 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 {
        /* Poměr 9:18 se přestěhoval na `min-height` hero. Snímek teď vyplní
           podklad, ať je hero jakkoli vysoké — `cover` škáluje podle výšky
           a ořízne boky, tedy přesně jako dřív. */
        aspect-ratio: auto;
        height: 100%;
        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;
        /* `relative` kvůli vrstvení nad fotkou; odsazení převzalo to, co
           dřív drželo `inset` na `.kp-hero__copy`. */
        position: relative;
        z-index: 2;
        padding: 4.5rem 1.35rem 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: static;
        inset: auto;
        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);
    }

    /* Nadpis je nad fotkou bílý (pravidlo výš), takže zvýraznění potřebuje
       svou vlastní, SVĚTLEJŠÍ variantu akcentu — jinak by se ztratilo. */
    .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 — jen se tam už nedostane
       absolutním ukotvením, ale `margin-top: auto` na konci sloupce. Rozdíl
       je vidět jedině tehdy, když se text nevejde: tam, kde by se dřív karta
       položila na ikony sítí, se teď odsune a hero povyroste.

       Levá, pravá i `transform` se ruší schválně — základní pravidlo je
       centruje přes `left: 50%` + `translateX(-50%)`, což by prvek v toku
       posunulo o půlku šířky mimo obrazovku. */
    .kp-hero--photo .kp-hero__stats {
        position: static;
        inset: auto;
        transform: none;
        width: auto;
        margin: 1.1rem 1rem 1rem;
        margin-top: auto;
        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; }
}

/* 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; }

@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; }
}

:root[data-effects="minimal"] .kp-ai,
:root[data-effects="minimal"] .kp-stats { background: rgba(22, 20, 13, 0.94); box-shadow: 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%);
    /* `backwards` NENÍ kosmetika. Bez něj platí `animation-fill-mode: none`
       a po celou dobu zpoždění se prvek kreslí ve svém ZÁKLADNÍM stylu —
       tedy bez posunu (světlé jádro gradientu přesně uprostřed hero) a
       s plným krytím. Klíčový snímek `0%` (mimo obraz vlevo, krytí 0) se
       uplatní až ve chvíli, kdy zpoždění doběhne, takže pruh 2,2 s nehybně
       svítí a pak JEDNÍM snímkem zmizí. Prvek se navíc při každé navigaci
       na `/` vkládá znovu, takže se to opakuje při každém příchodu — to je
       ta „záře, co přejede a po animaci zmizí" ze záznamu klienta.
       Naměřeno: příspěvek pruhu +14,2 jednotky jasu ve středu obrazovky,
       skok mezi snímky v 2 337 ms (krytí 1,000 -> 0,000). S `backwards` je
       první vzorek ve 48 ms už krytí 0,000 a přejezd sám zůstává beze změny
       (rozsvěcí se ve 4,1 s, středem jde v 9,6 s).
       Musí být UVNITŘ zkratky nebo za ní — zkratka `animation:` si
       `animation-fill-mode` sama resetuje na `none`. */
    animation: kp-sweep 18s ease-in-out 2.2s infinite backwards;
    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 3.4s ease-in-out infinite; }

/* Studená záře uvnitř skla, KLIDNÁ — dřív se 14s cyklem posouvala a měnila
   krytí (`kp-aurora`), což se ve výřezu panelu (jen 240px) čte jako pruh,
   co roste a mizí, ne jako atmosféra. Pevný, tichý nádech barvy z panelu
   Vzhled beze změny je premiovější než sebepomalejší pohyb — animace na
   ploše, kde nic jiného nežije, je vždycky vidět. */
.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.14), transparent 72%);
}

.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: calc(0.62s + var(--kp-in-shift, 0s)); }
.kp-hero--photo .kp-hero__ai .kp-ai__row:nth-child(2) { animation-delay: calc(0.71s + var(--kp-in-shift, 0s)); }
.kp-hero--photo .kp-hero__ai .kp-ai__row:nth-child(3) { animation-delay: calc(0.80s + var(--kp-in-shift, 0s)); }
.kp-hero--photo .kp-hero__ai .kp-ai__row:nth-child(4) { animation-delay: calc(0.89s + var(--kp-in-shift, 0s)); }

/* 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: var(--kp-ai-lem), 0 0 16px rgba(46, 147, 216, 0.24),
                    0 0 0 0 rgba(140, 197, 232, 0);
    }
    92% {
        transform: translateY(-2px);
        box-shadow: var(--kp-ai-lem), 0 0 16px rgba(46, 147, 216, 0.24),
                    0 0 0 6px rgba(140, 197, 232, 0.14);
    }
}

/* ---- 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. */
/* Pohyb při najetí je taky v kp-site.css — ze stejného důvodu. */

/* ---- 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-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-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 {
    /* Je to <h2>, tedy nadpis — patková rodina jako všude jinde. Fredoka
       patří velkým číslům a štítkům, ne nadpisům. */
    font-family: var(--kp-font-head);
    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;
    }
}

/* Na telefonu je nálada a panel Vzhledu JEDNA karta přes celou obrazovku.
   Dvě plovoucí kartičky nad sebou vypadaly jako dvě různá nastavení a Forge
   panel navíc svítil zelenou plochou proti neutrální kartě nálady.

   Popisky skupin zůstávají jako na velkém displeji — klient je chtěl zpátky.
   Merguje se jen KRABICE: obě části mají tutéž plochu, žádné zaoblení mezi
   sebou a žádnou mezeru, takže se čtou jako jeden list.

   Výška horní části je proměnná (`--kp-mood-h`), protože podle ní se sráží
   začátek Forge panelu — ten je uzavřená komponenta a jinak než odsazením
   se pod náladu posadit nedá. */
@media (max-width: 640px) {
    /* Záloha pro první vykreslení; skutečnou výšku dopíše `kpMoodFit`
       v kp-site.js, protože karta roste s jazykem (německy a rusky jsou
       popisky delší) a natvrdo zapsané číslo by nechalo mezeru nebo překryv. */
    :root { --kp-mood-h: 11.25rem; }

    .kp-mood {
        top: 0;
        right: 0;
        left: 0;
        bottom: auto;
        width: auto;
        z-index: 2147483647;          /* nad Forge panelem, ten má o jednu míň */
        padding: max(0.85rem, env(safe-area-inset-top)) 1rem 0.9rem;
        border-radius: 0;
        border-inline: 0;
        border-top: 0;
        border-bottom: 1px solid var(--line, var(--kp-line));
        box-shadow: none;
        animation: none;              /* karta je součást listu, ne samostatné okno */
    }

    .kp-mood__group { margin-top: 0.7rem; }
    .kp-mood__row { flex-wrap: wrap; gap: 0.4rem; }
    .kp-mood__hint { display: none; }

    /* Forge panel navazuje BEZ mezery a na téže ploše. `!important` je tu
       nutné zlo: panel si polohu i barvu píše inline z vlastního balíčku. */
    .forge-tweaks-panel {
        top: var(--kp-mood-h) !important;
        right: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        max-height: none !important;
        width: auto !important;
        border-radius: 0 !important;
        border-inline: 0 !important;
        border-top: 0 !important;
        background: var(--kp-panel-surface) !important;
        box-shadow: none !important;
    }
}

/* Panel Vzhledu bere plochu z TÉŽE hodnoty jako karta nálady. Ve tmavém
   motivu měl vlastní zelenou (35,64,58) proti neutrální (0.215 0.014 280) —
   dvě různé plochy vedle sebe vypadaly jako dvě různá nastavení.

   Hodnota se bere OKLIKOU přes `:root`, ne přímo: `.forge-tweaks-panel` je
   v seznamu, kterému `kp-brand.css` podstrkává značkovou paletu, takže
   `--surface-s1` má uvnitř panelu jinou hodnotu než venku. Vlastní vlastnost
   se dědí už spočítaná, takže `--kp-panel-surface` nese kořenový odstín i tam,
   kde se `--surface-s1` mezitím přepsala. */
/* Základní přiblížení hero fotky. Na `:root`, aby ho viděla i /reference —
   viz komentář u `--hero-zoom`. */
:root { --kp-hero-zoom-base: 1.06; }

:root { --kp-panel-surface: var(--surface-s1, var(--kp-cream-2)); }

[data-theme="dark"] .forge-tweaks-panel {
    background: var(--kp-panel-surface);
}

/* ==========================================================================
 *  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)); }

/* 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%);
}

/* Spodní hrana hero — PŘEKRYV do `--kp-page-top`, ne maska do průhledna.

   Čtyři kola se hledalo, jak fotku dostat do stránky. Maska do průhledna
   selhala vždycky: pod fotkou prosvítá pole, jehož barva se v tom místě mění,
   a fotka má vlastní jas i zrno — na konci se to nikdy netrefilo.

   Řešení není v přesnějším přechodu, ale v tom, že OBĚ STRANY HRANY MAJÍ
   TÝŽ ZDROJ. `--kp-page-top` je jedna barva na dvou místech: fotka do ní
   dobíhá a pole ji drží plochou prvních 520 px stránky. Není co trefovat.

   Poslední úsek je dlouhý schválně (12 vh): zbytek fotky je tráva a ta má
   vlastní kresbu, takže krátký přechod by se v ní projevil jako pruh. */
.kp-hero--photo::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: clamp(120px, 16vh, 210px);
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(to bottom,
        transparent 0%,
        color-mix(in oklab, var(--kp-page-top, #FEFCF8) 14%, transparent) 26%,
        color-mix(in oklab, var(--kp-page-top, #FEFCF8) 42%, transparent) 50%,
        color-mix(in oklab, var(--kp-page-top, #FEFCF8) 74%, transparent) 72%,
        color-mix(in oklab, var(--kp-page-top, #FEFCF8) 94%, transparent) 88%,
        var(--kp-page-top, #FEFCF8) 97%);
}

/* Na telefonu je rozplynutí DELŠÍ. Fotka tam končí uprostřed tmavé trávy
   (změřeno 90,86,75) a stránka pod ní začíná skoro bílá (255,252,246) —
   ten rozdíl se do 135 px nedá schovat, ať má rampa jakýkoli tvar. Přes hranu
   z toho vycházel skok 74 ze 765, tedy pruh, který je vidět na první pohled.

   Zároveň se ztlumí tmavý spodek `hem`u: kreslí se pod rozplynutím a přidával
   tmu přesně tam, kde se má obraz zesvětlovat. Na desktopu vadí míň, protože
   tam je rampa proti výšce sekce krátká. */
@media (max-width: 900px) {
    .kp-hero--photo::after {
        height: clamp(210px, 34vh, 360px);
        background: linear-gradient(to bottom,
            transparent 0%,
            color-mix(in oklab, var(--kp-page-top, #FEFCF8) 10%, transparent) 22%,
            color-mix(in oklab, var(--kp-page-top, #FEFCF8) 32%, transparent) 44%,
            color-mix(in oklab, var(--kp-page-top, #FEFCF8) 62%, transparent) 64%,
            color-mix(in oklab, var(--kp-page-top, #FEFCF8) 88%, transparent) 82%,
            var(--kp-page-top, #FEFCF8) 95%);
    }

    .kp-hero--photo .kp-hero__hem::after {
        background: linear-gradient(to bottom,
            rgba(8, 12, 7, 0) 0%,
            rgba(8, 12, 7, 0.06) 45%,
            rgba(8, 12, 7, 0.14) 100%);
    }
}


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

/* ---- pás statistik na telefonu ------------------------------------------
   Na širokém displeji leží pás na fotce a tmavé sklo je správně: nese
   kontrast proti obloze. Na telefonu ale sedí až na konci hero, kde fotka
   dávno mizí do krému — a tmavá deska tam byla to poslední, co návštěvník
   před sekcí uvidí. Přechod pak nedělal obraz, ale hrana desky: tmavý blok,
   pod ním skoro bílá. Přesně ten „pruh", na který si klient stěžoval.

   Řešení není zesvětlit fotku (ta se rozplývá správně — změřeno u levého
   okraje 209 → 255 plynule přes 60 px), ale sundat z toho místa tmavou
   desku. Pás proto na telefonu vypadá jako ostatní karty webu: světlý povrch,
   inkoustový text, vlasový lem. Sklo nad fotkou zůstává tam, kde fotka je.

   `!important` tu není: pravidla níž mají stejnou specifičnost a tohle je
   v souboru za nimi. */
@media (max-width: 900px) {
    .kp-hero--photo .kp-stats,
    .kp-stats {
        background: linear-gradient(180deg in oklab,
            var(--kp-cream-2) 0%,
            color-mix(in oklab, var(--kp-cream-2) 78%, var(--kp-cream)) 100%);
        border: 1px solid var(--kp-line-soft);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.6) inset,
            0 10px 26px rgba(58, 42, 34, 0.1);
        color: var(--kp-ink);
    }

    .kp-stats::before { opacity: 0.35; }

    .kp-stats__value { color: var(--kp-ink); text-shadow: none; }
    .kp-stats__label { color: var(--kp-ink-soft); text-shadow: none; }

    /* Dělicí vlasy mezi položkami byly světlé na tmavé desce; na světlé
       potřebují opačné znaménko. */
    .kp-stats__item + .kp-stats__item::before { background: var(--kp-line-soft); }

    /* Ikony si nechávají barvu, jen ztrácejí tmavý podklad a záři — ta patří
       na sklo, ne na papír. */
    .kp-stats__icon {
        background: color-mix(in oklab, var(--kp-cream-3, #F4E8D2) 55%, transparent);
        box-shadow: inset 0 0 0 1px rgba(58, 42, 34, 0.06);
    }
}

/* --- 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; }
}


/* Sítě v hero — jen ikony, skleněné jako zbytek hero. Kdo přijde z TikToku,
   hledá potvrzení, že je na správném místě; kdo přijde odjinud, má kam odejít,
   aniž by musel dorolovat do patičky. */
/* Mezera nad ikonami je VĚTŠÍ než mezi ostatními bloky hero. Nejsou to
   pokračování textu, ale odbočka jinam — a klient chtěl, aby to bylo znát:
   text nahoru, ikony dolů, mezi tím vzduch. */
.kp-hero__links {
    display: flex;
    gap: 0.6rem;
    margin-top: clamp(1.9rem, 4.2vh, 3.2rem);
}

/* Ikony sítí — ZNAČKOVÉ barvy sítí, ne průhledné sklo.
   Nejdřív to byly bílé destičky s 12% výplní: proti ranní obloze menší rozdíl
   než šum fotky. Pak sklo s jasným lemem — čitelné, ale pořád tři stejné
   dlaždice, které se od sebe liší jen kresbou. Barva sítě se pozná dřív než
   tvar loga, takže dlaždice nese ji.

   Rám drží celek pohromadě: bílý prstenec kolem barevné plochy odděluje
   dlaždici od fotky, ať je pod ní obloha nebo listí. Uvnitř je ještě světlo
   na horní hraně, aby plocha nebyla placatá. */
.kp-hero--photo .kp-hero__links a {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    color: #FFFFFF;
    background: var(--net, rgba(255, 255, 255, 0.2));
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow:
        0 8px 20px rgba(8, 14, 9, 0.38),
        0 0 0 1px rgba(8, 14, 9, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    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);
}

/* Značkové barvy — tytéž hodnoty jako dlaždice v sekci „Sledujte nás", aby
   se hero a sekce nerozešly. TikTok je černá s tyrkysovým a růžovým nádechem,
   Instagram gradient, Facebook plná modrá. */
.kp-hero__net--tiktok { --net: linear-gradient(140deg, #25F4EE, #111 46%, #FE2C55); }
.kp-hero__net--instagram { --net: linear-gradient(140deg, #F9CE34, #EE2A7B 52%, #6228D7); }
.kp-hero__net--facebook { --net: #1877F2; }
/* YouTube má jednu plnou červenou, ne gradient — logo je plocha, ne přechod. */
.kp-hero__net--youtube   { --net: #FF0000; }

.kp-hero--photo .kp-hero__links a:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.85);
    box-shadow:
        0 14px 28px rgba(8, 14, 9, 0.44),
        0 0 0 1px rgba(8, 14, 9, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.kp-hero--photo .kp-hero__links a:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.92);
    outline-offset: 3px;
}

/* Kresba je bílá na barvě, takže stín stačí jemný — má oddělit tahy od
   světlejších míst gradientu, ne dělat druhý obrys. */
.kp-hero__links svg {
    width: 19px; height: 19px; display: block;
    filter: drop-shadow(0 1px 1.5px rgba(8, 14, 9, 0.35));
}

:root[data-effects="minimal"] .kp-hero--photo .kp-hero__links a {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(20, 30, 22, 0.6);
}

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

/* Na telefonu jde pitch pod fotku na krém. Pravidlo TU BYLO a přebarvovalo
   dlaždice na neutrální povrch — proto se značkové barvy na mobilu vůbec
   neukázaly. Barva sítě má platit všude; mění se jen lem: bílý prstenec
   funguje na fotce, na krému by zmizel, takže ho střídá tmavá vlasová linka
   a stín zůstává. */
@media (max-width: 900px) {
    .kp-hero--photo .kp-hero__links a {
        color: #FFFFFF;
        border-color: rgba(20, 16, 10, 0.16);
        box-shadow:
            0 6px 16px rgba(58, 42, 34, 0.22),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}