:root {
    --landing-ink: #1d201b;
    --landing-muted: #686d63;
    --landing-paper: #fbfcf8;
    --landing-line: #e7e9e1;
    --landing-green: #c7f24c;
    /* Podklad ikon a odškrtnutí — limetka ztlumená do plochy. */
    --landing-green-soft: #e9fabb;
    /* Výplň falešných tlačítek v maketkách — šeď, ne limetka a ne inkoust:
       limetka plete s opravdovou výzvou, černá zbytečně táhne oko. */
    --landing-maketa: #c8ccbc;
    /* Přechod je SVISLÝ schválně — vodorovný se při exportu z Pencilu
       překlápí a návrh pak nesedí. */
    --landing-btn: linear-gradient(180deg, #dcf978 0%, #afe92f 100%);
    --landing-btn-glow: 0 8px 20px rgba(168,229,42,.4);
    --landing-dark: #20251d;
    --landing-panel: #f1f2ec;
    /* Jen pro nápovědu v prázdném poli — musí být světlejší než text,
       ale pořád čitelná. Proti prototypu o odstín temnější: ve světlejší
       verzi nevycházel kontrast 4,5:1, a nápověda v poli je taky text. */
    --landing-hint: #70756b;
    /* Jediné korálové místo na webu. Vedle sebe jsou dvě výzvy —
       Začít zdarma v liště a Vytvořit web v poli — a ve stejné limetce si
       konkurují; teplý korál dá přednost té důležitější. */
    --landing-hero-btn: linear-gradient(180deg, #ffa474 0%, #ff7036 100%);
    --landing-hero-btn-glow: 0 8px 20px rgba(255,112,54,.38);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Lišta je přilepená, takže by po doskočení na kotvu překryla nadpis sekce. */
#ukazky, #jak-to-funguje, #stary-web, #cena, #otazky { scroll-margin-top: 96px; }
body { color: var(--landing-ink); background: var(--landing-paper); }
/* Lišta se drží nahoře a přejíždí přes různě barevné sekce, takže plná
   barva by na nich dělala pruh. Rozostřený průsvit je mezi tím; saturate
   proto, že samotné blur barvu vypere. Kde prohlížeč backdrop-filter
   neumí, zůstane plná barva stránky. */
.landing-header { position: sticky; top: 0; z-index: 20; background: var(--landing-paper); }
/* Linka až ve chvíli, kdy lišta něco překrývá — nahoře má splývat s herem. */
.landing-header { border-bottom: 1px solid transparent; transition: transform .3s cubic-bezier(.22,.9,.28,1), border-color .25s ease, background-color .25s ease; }
/* Při sjíždění dolů lišta uhne z cesty, při vyjíždění se hned vrátí. */
.landing-header.je-schovana { transform: translateY(-100%); }
.landing-header.je-prilepena { border-bottom-color: var(--landing-line); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .landing-header { background: rgba(255,255,255,.44); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); }
    /* Po odrolování stojí nad bílým obsahem, kde by se při .44 ztratila. */
    .landing-header.je-prilepena { background: rgba(250,250,248,.82); }
}
/* Tři díly: značka vlevo, navigace přesně na středu, tlačítka vpravo.
   Krajní díly mají flex:1, takže střed drží i při různě dlouhých stranách —
   se space-between ho delší pravá strana odtlačila doleva. */
.landing-nav { min-height: 78px; display: flex; align-items: center; gap: 24px; }
/* Krajní skupiny jsou stejně široké, aby odkazy stály uprostřed STRÁNKY,
   ne uprostřed zbylého místa — logo je o dost užší než akce vpravo.
   min-width:max-content je u nich povinné: samotné flex:1 1 0 je nechá
   stlačit pod obsah a popisky se zalomí na dva řádky i na širokém monitoru,
   protože obsah je stropovaný na 1048 px a širší okno nepomůže. */
.landing-nav__brand { display: inline-flex; align-items: center; min-height: 44px; flex: 1 1 0; min-width: max-content; }
.landing-nav__links { flex: 0 0 auto; }
.landing-nav__actions { flex: 1 1 0; min-width: max-content; justify-content: flex-end; }
.landing-nav a { white-space: nowrap; }
.landing-logo { display: block; width: 118px; height: auto; }
.landing-nav__links, .landing-nav__actions { display: flex; align-items: center; gap: 30px; }
.landing-nav a, .landing-footer a { text-decoration: none; }
/* Odkazy v liště jsou vysoké 44 px, i když je text nižší — v liště je na to
   místo (min-height 78 px) a prst potřebuje plochu, ne jen písmo. */
.landing-nav__links a, .landing-nav__login { display: inline-flex; align-items: center; min-height: 44px; color: #4f554a; font-size: 14px; font-weight: 600; }
.landing-nav__links a:hover, .landing-nav__login:hover, .landing-footer a:hover { color: #607d16; }
/* Hamburger a menu na celou obrazovku: na širokém okně nemají co dělat,
   odkazy stojí v liště. Zapínají se až v pruhu pro úzká okna níž. */
.landing-burger { display: none; width: 44px; height: 44px; flex: 0 0 auto; padding: 0; border: 1px solid var(--landing-line); border-radius: 999px; background: #fff; color: var(--landing-ink); cursor: pointer; transition: background-color .18s ease, border-color .18s ease; }
/* Bez rozměru by se ikona roztáhla na 300×150 a rozhodila celou lištu. */
.landing-burger svg { width: 20px; height: 20px; }
.landing-burger:hover { border-color: #c9ccbe; }
.landing-burger:focus-visible { outline: 3px solid #edf3de; outline-offset: 2px; }
/* Otevřené menu má na tlačítku křížek — jinak není poznat, že tentýž klik
   menu zase zavře. Přepíná se display, ne atribut hidden: ten Firefox na SVG
   neuplatní a svítily by obě ikony přes sebe. */
.landing-burger__krizek { display: none; }
.landing-burger[aria-expanded="true"] { border-color: transparent; background: var(--landing-green-soft); }
.landing-burger[aria-expanded="true"] .landing-burger__menu { display: none; }
.landing-burger[aria-expanded="true"] .landing-burger__krizek { display: block; }

/* Menu si bere celou obrazovku a odkazy stojí uprostřed. Panel přilepený jen
   pod lištou končil v půlce stránky a zbytek obsahu pod ním vypadal spíš jako
   nedopatření. Leží pod lištou (19 proti 20), takže logo, výzva i křížek
   zůstanou nahoře vidět a menu se dá zavřít tam, kde se otevřelo. */
.landing-menu { position: fixed; inset: 0; z-index: 19; display: flex; overflow-y: auto; background: var(--landing-paper); animation: landing-menu-dovnitr .24s ease-out; }
/* Vlastní display přebíjí výchozí chování atributu hidden, takže zavřené menu
   se musí skrýt ručně. */
.landing-menu[hidden] { display: none; }
/* Limetka pod odkazy, stejným způsobem jako záře v heru: poslední zarážka je
   rgba(…,0), ne transparent — ten je průhledná černá a kolem plochy by vznikla
   šedá svatozář. */
.landing-menu::before { position: absolute; inset: 0; pointer-events: none; content: ""; background: radial-gradient(48% 32% at 50% 88%, rgba(199,242,76,.34), rgba(199,242,76,0) 72%); }
/* margin:auto místo place-items:center: na nízké obrazovce se obsah nevejde
   a vystředěná mřížka by uřízla jeho horní konec i s odkazem. */
.landing-menu__in { position: relative; width: 100%; margin: auto; display: flex; flex-direction: column; align-items: center; padding: 92px 24px 44px; text-align: center; }
.landing-menu a { padding: 13px 10px; color: var(--landing-ink); font-family: Archivo, Inter, sans-serif; font-size: 27px; font-weight: 800; letter-spacing: -.6px; animation: landing-menu-radek .34s ease-out both; }
.landing-menu a:hover { color: #607d16; }
.landing-menu a:nth-child(2) { animation-delay: .05s; }
.landing-menu a:nth-child(3) { animation-delay: .1s; }
.landing-menu a:nth-child(4) { animation-delay: .15s; }
.landing-menu a:nth-child(5) { animation-delay: .2s; }
/* Přihlášení je jiná třída věci než kotvy na sekce, tak ať je menší a oddělené.
   Vyšší váha selektoru je nutná — .landing-menu a je specifičtější než sama
   třída. */
.landing-menu a.landing-menu__ucet { width: min(220px, 70%); margin-top: 22px; padding-top: 26px; border-top: 1px solid var(--landing-line); color: #4f554a; font-family: Inter, sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0; }
@keyframes landing-menu-dovnitr { from { opacity: 0; } }
@keyframes landing-menu-radek { from { opacity: 0; transform: translateY(10px); } }
/* Pod otevřeným menu nemá co ujíždět stránka. */
body.ma-menu { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
    .landing-menu, .landing-menu a { animation: none; }
    .landing-burger { transition: none; }
}
/* ⚠️ Přechod --landing-btn a jeho záře patří JEN sem — na tlačítka, která
   opravdu něco dělají. Limetka je hlavní barva výzvy na webu; jakmile ji
   dostane i kus obrázku (maketka kroku, scéna u rezervací), přestane být
   poznat, na co se dá kliknout. V maketkách se proto jede inkoustem,
   šedou a tlumeným tintem --landing-green-soft. */
.landing-button { min-height: 52px; padding: 0 23px; border: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 13px; cursor: pointer; color: #20251d; background: var(--landing-btn); box-shadow: var(--landing-btn-glow); font-size: 16px; font-weight: 700; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.landing-button:hover { color: #20251d; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(168,229,42,.5); }
.landing-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.landing-button--small { min-height: 44px; padding: 0 18px; font-size: 14px; }
.landing-button--uzke { min-height: 44px; padding: 0 18px; font-size: 15px; }
.landing-button--uzke svg { width: 15px; height: 15px; }
.landing-button--siroke { align-self: stretch; }
/* Oranžová vede člověka cestou k hotovému webu: pole v heru, pak „Připravit
   tři návrhy". Limetková zůstává všemu ostatnímu, ať je na každé obrazovce
   jen jedno tlačítko, které říká „tudy dál". */
.landing-button--cesta { background: var(--landing-hero-btn); box-shadow: var(--landing-hero-btn-glow); }
.landing-button--cesta:hover { background: var(--landing-hero-btn); box-shadow: 0 10px 24px rgba(255,112,54,.48); }

/* Rotující světelný okraj hlavního tlačítka — převzato z prototypu.
   Prstenec je 2px rámeček vyříznutý ze dvou masek (XOR), pod ním se otáčí
   kuželový přechod. Úhel musí být registrovaná vlastnost, jinak by nešel
   animovat — bez podpory @property prstenec jen stojí, což nevadí.
   Rozptyl navíc proto, že bílá má na limetce skoro stejný jas a bez
   rozmazání nebyl prstenec vidět. */
@property --landing-uhel-zare { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes landing-zare { to { --landing-uhel-zare: 360deg; } }
@keyframes landing-pop { 0% { transform: scale(.86); } 55% { transform: scale(1.07); } 100% { transform: scale(1); } }
.landing-button { position: relative; }
.landing-button::before {
    position: absolute; inset: 0; padding: 2px; border-radius: inherit; content: "";
    background: conic-gradient(from var(--landing-uhel-zare), transparent 0deg, #fff 50deg, rgba(255,255,255,.55) 90deg, transparent 160deg);
    -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
            mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
    -webkit-mask-clip: content-box, border-box;
            mask-clip: content-box, border-box;
    -webkit-mask-origin: content-box, border-box;
            mask-origin: content-box, border-box;
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    filter: drop-shadow(0 0 5px rgba(255,255,255,.9));
    animation: landing-zare 1.7s linear infinite;
}
.landing-button.je-hotovo { animation: landing-pop .45s cubic-bezier(.2,.9,.3,1.35); }
@media (prefers-reduced-motion: reduce) {
    .anonymous-chip:hover { transform: none; }
    .landing-button::before { animation: none; }
    .landing-button.je-hotovo { animation: none; }
}

.anonymous-results__heading h1 { margin: 0; color: var(--landing-ink); font-family: Archivo, Inter, sans-serif; font-size: clamp(27px, 3.6vw, 36px); font-weight: 800; letter-spacing: -1.1px; line-height: 1.14; }
/* Zadání podle prototypu (zadani-b.html): žádná karta, všechno na ose
   stránky, aby oko šlo shora dolů jednou cestou. */
.anonymous-page { display: flex; min-height: calc(100vh - 158px); flex-direction: column; align-items: center; gap: 26px; padding-top: 44px; padding-bottom: 72px; }
.anonymous-kroky { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.anonymous-kroky li { display: flex; width: 52px; flex-direction: column; align-items: center; gap: 8px; color: var(--landing-muted); font-size: 11px; line-height: 1.2; }
.anonymous-kroky i { display: block; width: 100%; height: 4px; border-radius: 999px; background: var(--landing-line); }
.anonymous-kroky li.je-hotovy i, .anonymous-kroky li.je-ted i { background: var(--landing-green); }
/* Hotové kroky zůstávají tlumené, zvýrazněný je jen ten, na kterém člověk
   právě stojí — tři stejně silné popisky by neřekly, kde v tom je. */
.anonymous-kroky li.je-ted { color: var(--landing-ink); font-weight: 600; }
.anonymous-nadpis { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.anonymous-nadpis h1 { margin: 0; color: var(--landing-ink); font-family: Archivo, Inter, sans-serif; font-size: clamp(27px, 3.6vw, 36px); font-weight: 800; letter-spacing: -1.1px; line-height: 1.14; }
.anonymous-nadpis p { max-width: 620px; margin: 0; color: var(--landing-muted); font-size: 14.5px; line-height: 1.6; }
.anonymous-prompt { display: flex; width: 100%; flex-direction: column; align-items: center; gap: 22px; }
/* Pole je širší než nadpis (720 proti 620), ať je vidět, že se čeká věta. */
.anonymous-pole { width: 100%; max-width: 720px; border: 1px solid var(--landing-line); border-radius: 18px; background: #fff; box-shadow: 0 18px 40px rgba(15,20,10,.06); transition: border-color .15s ease, box-shadow .15s ease; }
.anonymous-pole:focus-within { border-color: #b9d97a; box-shadow: 0 18px 40px rgba(15,20,10,.08); }
.anonymous-pole textarea { display: block; width: 100%; min-height: 104px; padding: 20px 22px 6px; resize: vertical; border: 0; outline: none; background: none; color: var(--landing-ink); font: inherit; font-size: 16px; line-height: 1.5; }
.anonymous-pole textarea::placeholder { color: var(--landing-hint); }
.anonymous-pole__pata { display: flex; align-items: center; gap: 12px; padding: 0 18px 14px; }
.anonymous-pole__pocet { margin-left: auto; color: var(--landing-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.anonymous-akce { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.anonymous-tip { display: flex; max-width: 620px; align-items: flex-start; gap: 8px; margin: 0; color: var(--landing-muted); font-size: 12.5px; line-height: 1.5; }
.anonymous-tip svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.anonymous-zkuste { display: flex; max-width: 860px; flex-wrap: wrap; align-items: center; justify-content: center; gap: 9px; }
.anonymous-zkuste__popis { color: var(--landing-muted); font-size: 12.5px; }
.anonymous-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--landing-line); border-radius: 999px; background: #fff; color: var(--landing-ink); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.anonymous-chip:hover { border-color: #c9ccbc; transform: translateY(-1px); }
.anonymous-pozn { max-width: 620px; margin: 0; color: var(--landing-muted); font-size: 12.5px; line-height: 1.5; text-align: center; }
.anonymous-email label { display: block; margin-bottom: 7px; color: #373d32; font-size: 12px; font-weight: 700; }
.anonymous-email input:focus { border-color: #94aa4f; outline: 3px solid #edf3de; }
/* Oprava adresy podkladu, když se ji nepodařilo načíst. Drží tvar zbytku
   stránky — bílá karta, stejný rámeček i rádius jako panel nad kartami. */
.anonymous-oprava { box-sizing: border-box; width: 100%; max-width: 560px; margin: 0 auto 26px; padding: 16px 18px 18px; border: 1px solid var(--landing-line); border-radius: 18px; background: #fff; }
.anonymous-oprava .landing-button { margin-top: 15px; }
/* Druhá cesta dovnitř. Zavřená je stejně široká jako pole nad ní a drží
   se jejího tvaru — bílá plocha, stejný rámeček i rádius. */
.anonymous-zdroj { width: 100%; max-width: 720px; border: 1px solid var(--landing-line); border-radius: 18px; background: #fff; }
.anonymous-zdroj__spust { display: flex; align-items: center; gap: 10px; padding: 14px 18px; color: var(--landing-muted); font-size: 13px; line-height: 1.4; cursor: pointer; list-style: none; }
.anonymous-zdroj__spust::-webkit-details-marker { display: none; }
.anonymous-zdroj__spust > span { flex: 1 1 auto; }
.anonymous-zdroj__spust b { color: var(--landing-ink); font-weight: 700; }
.anonymous-zdroj__spust > svg { width: 16px; height: 16px; flex: 0 0 auto; color: #667d2b; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.anonymous-zdroj__sipka { width: 15px; height: 15px; color: var(--landing-muted); transition: transform .15s ease; }
.anonymous-zdroj[open] .anonymous-zdroj__sipka { transform: rotate(180deg); }
/* Potvrzení u složené hlavičky. Plné kolečko, ne obrys: v řádce plné drobných
   šedých ikon se tenká fajfka ztratí a nepřečte se jako „hotovo".
   Zelená drží olivovou rodinu zbytku stránky, bílá fajfka na ní je čitelná
   i na 18 px. */
.anonymous-zdroj__spust > .anonymous-zdroj__hotovo { width: 18px; height: 18px; color: #fff; stroke-width: 2.6; }
.anonymous-zdroj__spust > .anonymous-zdroj__hotovo circle { fill: #4e8b1e; stroke: none; }
.anonymous-zdroj__telo { padding: 2px 18px 18px; }
.anonymous-zdroj__popisek { display: block; margin-bottom: 8px; color: #373d32; font-size: 12px; font-weight: 700; }
.anonymous-source-url { box-sizing: border-box; width: 100%; height: 46px; padding: 0 16px; border: 1px solid #dfe3d7; border-radius: 999px; background: #fff; color: var(--landing-ink); font: inherit; font-size: 14px; }
.anonymous-source-url::placeholder { color: var(--landing-hint); }
.anonymous-source-url:focus { border-color: #94aa4f; outline: 3px solid #edf3de; }
.anonymous-source-consent { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; color: var(--landing-ink); font-size: 12.5px; line-height: 1.5; cursor: pointer; }
.anonymous-source-consent input { width: 18px; height: 18px; flex: 0 0 auto; margin: 1px 0 0; border: 1.5px solid #cdd1c2; border-radius: 6px; appearance: none; background: #fff; cursor: pointer; }
.anonymous-source-consent input:checked { border-color: var(--landing-green); background: var(--landing-green) no-repeat center/11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314160f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.anonymous-source-consent input:focus-visible { outline: 3px solid #edf3de; }
.anonymous-source-help { margin: 12px 0 0; color: var(--landing-muted); font-size: 12px; line-height: 1.6; }
/* Upozornění, ne chyba: načtení nebráníme, jen říkáme, jak to dopadne.
   Proto okrová, ne červená jako chybějící souhlas. */
.anonymous-zdroj__pozor { display: flex; align-items: flex-start; gap: 8px; margin: 11px 0 0; color: #8b5c2d; font-size: 12px; line-height: 1.5; }
.anonymous-zdroj__pozor svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Chybí-li souhlas, musí být vidět co a kde — ne jen že to někde drhne. */
.anonymous-source-consent.je-chyba { color: #8f3929; }
.anonymous-source-consent.je-chyba input { border-color: #d2694f; box-shadow: 0 0 0 3px #fdeee8; }
.anonymous-zdroj__chyba { margin: 7px 0 0 27px; color: #8f3929; font-size: 12px; line-height: 1.5; }
.anonymous-notice { margin: 15px 0 0; color: #8b5c2d; font-size: 11px; line-height: 1.5; }
/* Hláška drží tvar zbytku stránky, svoje má jen barvy. Ikona je tu proto, že
   samotný růžový obdélník nahoře se dá přehlédnout. */
.anonymous-error, .anonymous-success { display: flex; width: 100%; max-width: 720px; align-items: flex-start; gap: 10px; margin: 0 auto; padding: 13px 16px; border: 1px solid #f0d2c8; border-radius: 14px; background: #fff7f4; color: #8f3929; font-size: 13px; line-height: 1.5; }
.anonymous-error svg, .anonymous-success svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.anonymous-success { border-color: #dbe6c2; color: #4c6720; background: #f8fbed; }
.anonymous-results { padding-top: 72px; padding-bottom: 85px; }
.anonymous-results .anonymous-kroky { justify-content: center; margin-bottom: 22px; }
/* Dlouhé zadání se ořízne na jeden řádek — pilulka má držet kontext, ne
   přepisovat celé zadání zpátky na obrazovku. */
.anonymous-veta { display: flex; width: max-content; max-width: min(560px, 100%); align-items: center; gap: 9px; margin: 0 auto 26px; padding: 9px 16px; border: 1px solid var(--landing-line); border-radius: 999px; background: #fff; color: var(--landing-ink); font-size: 13px; }
.anonymous-veta svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--landing-muted); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.anonymous-veta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Podklad visí pod pilulkou se zadáním jako její druhý řádek, proto se pilulka
   v tom případě drží blíž. Vystředěný sloupec, ne řádka od levého okraje. */
.anonymous-veta:has(+ .anonymous-podklad) { margin-bottom: 11px; }
.anonymous-podklad { display: flex; max-width: min(560px, 100%); flex-direction: column; align-items: center; gap: 7px; margin: 0 auto 26px; }
.anonymous-podklad p { display: flex; align-items: flex-start; gap: 7px; margin: 0; font-size: 12px; line-height: 1.5; text-align: left; }
.anonymous-podklad svg { width: 13px; height: 13px; flex: 0 0 auto; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.anonymous-podklad__zdroj { color: var(--landing-muted); }
.anonymous-podklad__zdroj a { color: #667d2b; text-decoration: none; }
.anonymous-podklad__zdroj a:hover { text-decoration: underline; text-underline-offset: 2px; }
/* Okrová, ne červená: načtení nebráníme, jen říkáme, jak dopadlo. */
.anonymous-podklad__pozor { color: #8b5c2d; }
.anonymous-results__heading { max-width: 700px; margin: 0 auto 36px; text-align: center; }
.anonymous-results__heading p { margin: 14px auto 0; max-width: 620px; color: var(--landing-muted); font-size: 14.5px; line-height: 1.6; }
/* Panel má stejný tvar jako karty pod ním — bílá plocha, stejný rámeček
   i rádius. Zelené pozadí z něj dělalo jediný barevný blok na stránce. */
.anonymous-generation { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 26px; padding: 15px 18px; border: 1px solid var(--landing-line); border-radius: 18px; background: #fff; }
.anonymous-generation__copy { display: flex; flex-direction: column; gap: 4px; }
.anonymous-generation__copy strong { color: var(--landing-ink); font-family: Archivo, Inter, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; }
.anonymous-generation__copy span { color: var(--landing-muted); font-size: 12.5px; line-height: 1.45; }
.anonymous-generation form { flex: 0 0 auto; }
.anonymous-generation button:disabled { cursor: wait; opacity: .6; }
.anonymous-variants { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.anonymous-modal { width: min(420px, calc(100vw - 32px)); padding: 22px; border: 1px solid var(--landing-line); border-radius: 18px; background: #fff; color: var(--landing-ink); }
.anonymous-modal::backdrop { background: rgba(20,22,15,.45); }
.anonymous-modal__hlava { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.anonymous-modal__navrh { margin: 0; color: var(--landing-muted); font-size: 12.5px; }
.anonymous-modal__navrh strong { color: var(--landing-ink); }
.anonymous-modal__x { display: flex; width: 30px; height: 30px; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--landing-line); border-radius: 999px; background: #fff; color: var(--landing-ink); cursor: pointer; }
.anonymous-modal__x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.anonymous-modal h2 { margin: 0 0 8px; font-family: Archivo, Inter, sans-serif; font-size: 20px; font-weight: 800; letter-spacing: -.5px; }
.anonymous-modal > p { margin: 0 0 16px; color: var(--landing-muted); font-size: 13px; line-height: 1.6; }
.anonymous-modal .landing-button { width: 100%; margin-top: 14px; }
.anonymous-modal__zmenit { display: block; margin: 12px auto 0; padding: 0; border: 0; background: none; color: var(--landing-ink); font: inherit; font-size: 12.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.anonymous-modal__pravni { margin: 14px 0 0; color: var(--landing-muted); font-size: 11px; line-height: 1.5; text-align: center; }
.anonymous-modal__pravni a { text-decoration: underline; text-underline-offset: 3px; }
.anonymous-modal__pravni a:hover { color: #607d16; }
.anonymous-variant { display: flex; flex-direction: column; gap: 12px; padding: 10px; border: 1px solid var(--landing-line); border-radius: 18px; background: #fff; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; }
/* Vybraná karta má v prototypu rámeček o pixel silnější. Druhý pixel přidává
   vnitřní stín, aby karta při přepnutí neposkočila. */
.anonymous-variant:has(.anonymous-variant__volba) { cursor: pointer; }
.anonymous-variant:has(.anonymous-variant__volba):hover { border-color: #c9ccbe; transform: translateY(-2px); }
.anonymous-variant:has(.anonymous-variant__volba:checked) { border-color: var(--landing-green); background: #f6fce6; box-shadow: inset 0 0 0 1px var(--landing-green); }
.anonymous-variant:has(.anonymous-variant__volba:focus-visible) { outline: 3px solid #edf3de; outline-offset: 2px; }
.anonymous-variant__volba { width: 18px; height: 18px; flex: 0 0 auto; margin: 0; border: 1.5px solid #cdd1c2; border-radius: 999px; appearance: none; background: #fff; cursor: pointer; }
.anonymous-variant__volba:checked { border-color: var(--landing-green); background: var(--landing-green) no-repeat center/11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314160f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
/* Překryv malého náhledu je tlačítko: přehodí návrh do velkého okna. Ve velkém
   přes náhled neleží nic, jinak by se v něm nedalo skrolovat. */
.anonymous-okno__klik { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 0 0 10px; border: 0; background: none; font: inherit; cursor: pointer; }
.anonymous-okno__klik span { padding: 5px 11px; border-radius: 999px; background: rgba(20,22,15,.82); color: #fff; font-size: 11px; font-weight: 600; opacity: 0; transform: translateY(5px); transition: opacity .16s ease, transform .16s ease; }
.anonymous-okno__klik:hover span, .anonymous-okno__klik:focus-visible span { opacity: 1; transform: none; }
.anonymous-okno__klik:focus-visible { outline: 3px solid #edf3de; outline-offset: -3px; }
/* Bez myši se pilulka nemá jak ukázat, takže na dotyku a na úzké obrazovce
   svítí pořád. Jinak nic neprozradí, že je náhled klikací. */
@media (hover: none), (max-width: 850px) {
    .anonymous-okno__klik { padding-bottom: 12px; }
    .anonymous-okno__klik span { opacity: 1; font-size: 12px; transform: none; }
}
.anonymous-okno { overflow: hidden; border: 1px solid var(--landing-line); border-radius: 12px; }
.anonymous-okno__lista { display: flex; height: 24px; align-items: center; gap: 4px; padding: 0 9px; background: #f1f2ec; }
.anonymous-okno__lista i { width: 5px; height: 5px; border-radius: 999px; background: #d3d6c9; }
/* Falešná lišta slibuje prohlížeč, tak ať v něm stojí i adresa. */
.anonymous-okno__adresa { overflow: hidden; margin-left: 7px; color: #9aa092; font-size: 9.5px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.anonymous-variant:not(.je-velka) .anonymous-okno__adresa { display: none; }
.anonymous-okno__telo { position: relative; display: flex; overflow: hidden; height: 284px; flex-direction: column; background: #fff; }
/* Rozměr a měřítko dopočítá anonymous-preview.js podle šířky karty. */
.anonymous-okno__telo iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; background: #fff; transform-origin: 0 0; }
.anonymous-variant__pata { display: flex; align-items: center; gap: 9px; padding: 0 4px 2px; }
.anonymous-variant__nazev { display: block; margin: 0; color: var(--landing-ink); font-family: Archivo, Inter, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; }
label.anonymous-variant__nazev { cursor: pointer; }
.anonymous-variant__popis { display: block; color: var(--landing-muted); font-size: 11.5px; line-height: 1.35; }
/* Odkaz na pracovní adresu. Stojí na konci řádky s názvem, aby pod kartou
   nepřibývala další. Je to odkaz, takže ho výběr karty v anonymous-select.js
   přeskakuje a klik na něj návrh nepřepíná. */
.anonymous-variant__otevrit { display: grid; width: 28px; height: 28px; flex: 0 0 auto; margin-left: auto; place-items: center; border: 1px solid var(--landing-line); border-radius: 9px; background: #fff; color: #7c8375; }
.anonymous-variant__otevrit svg { width: 15px; height: 15px; }
.anonymous-variant__otevrit:hover { border-color: var(--landing-green); background: #f6fce6; color: var(--landing-ink); }
.anonymous-variant__otevrit:focus-visible { outline: 3px solid #edf3de; outline-offset: 2px; }
/* Na širší obrazovce stačí tlačítko pod kartami, tam je výběr pohromadě. */
.anonymous-variant__akce { display: none; }
.anonymous-email { width: min(360px, 100%); text-align: left; }
.anonymous-email input { box-sizing: border-box; width: 100%; height: 44px; padding: 0 15px; border: 1px solid #dfe3d7; border-radius: 999px; font: inherit; font-size: 13px; }
.anonymous-zaver { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 24px; }
.anonymous-variant__waiting { display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: center; padding: 25px; background: #fafbf8; color: #8e957f; text-align: center; }
.anonymous-variant__waiting > span { color: #91a94a; font-size: 27px; line-height: 1; }
.anonymous-variant__waiting p { max-width: 190px; font-size: 11px; line-height: 1.6; }
.anonymous-variant__waiting--chyba { background: #fdf7f5; color: #9a6b5d; }
.anonymous-variant__waiting--chyba > span { color: #c98068; }
/* Kolečko místo hvězdičky: hvězdička u rozdělané varianty vypadala stejně
   jako u té, na kterou ještě nedošlo. */
.anonymous-kolecko { box-sizing: border-box; width: 26px; height: 26px; border: 2.5px solid #e6eadb; border-top-color: #91a94a; border-radius: 999px; animation: anonymous-toceni .85s linear infinite; }
@keyframes anonymous-toceni { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) {
    .anonymous-kolecko { animation: anonymous-dychani 1.9s ease-in-out infinite; }
    @keyframes anonymous-dychani { 50% { opacity: .35; } }
}
/* Rozdělaná varianta ukazuje, co se staví: bloky stránky naskakují shora dolů,
   jak se píšou. Jedna varianta se kreslí minuty a samotné kolečko za tu dobu
   neřekne vůbec nic — tady je aspoň vidět, že vzniká stránka, a jaká. */
/* Plán se kreslí na bílou jako hotový web, jinak se bloky od podkladu neodliší. */
.anonymous-stavba { display: flex; height: 100%; flex-direction: column; gap: 8px; padding: 12px; background: #fff; }
.anonymous-stavba__plan { display: flex; min-height: 0; flex: 1; flex-direction: column; gap: 6px; }
/* Odstíny se liší po částech stránky, ať je z plánu poznat rozvržení a ne jen
   komín stejných pruhů. */
.anonymous-stavba__blok { display: grid; flex: 1 1 22%; place-items: center; border-radius: 8px; background: var(--landing-line); color: var(--landing-muted); font-size: 9.5px; letter-spacing: .03em; animation: anonymous-stavi 5.5s ease-in-out infinite; }
.anonymous-stavba__blok--hlavicka { flex: 0 0 13%; background: #dcdfd2; }
.anonymous-stavba__blok--uvod { flex: 1 1 32%; background: #eff1ea; }
.anonymous-stavba__blok--pata { flex: 0 0 13%; background: #dcdfd2; }
/* Velké okno je přes osm set pixelů široké, tam je devítka k nepřečtení. */
.je-velka .anonymous-stavba__blok { font-size: 11.5px; }
.anonymous-stavba__blok:nth-child(2) { animation-delay: 1.1s; }
.anonymous-stavba__blok:nth-child(3) { animation-delay: 2.2s; }
.anonymous-stavba__blok:nth-child(4) { animation-delay: 3.3s; }
.anonymous-stavba__blok:nth-child(5) { animation-delay: 4.4s; }
/* Plán je vidět celý a po blocích jím projíždí vlna — stránka se staví shora
   dolů. Dřív bloky mizely úplně a okno pak vypadalo spíš nedopečeně než
   rozdělaně. */
@keyframes anonymous-stavi {
    0%, 30%, 100% { opacity: .5; }
    6%, 20% { opacity: 1; }
}
.anonymous-stavba__popis { display: flex; align-items: center; justify-content: center; gap: 8px; color: #6f7664; font-size: 11.5px; font-weight: 600; }
.anonymous-stavba__popis .anonymous-kolecko { width: 15px; height: 15px; flex: 0 0 auto; border-width: 2px; }
.anonymous-stavba__cekani { color: #9aa092; font-size: 10.5px; text-align: center; }
/* V malém náhledu zbývá na plán stránky sotva dvě stě pixelů: popisky bloků
   ani věta o čekání by se tam nevešly, aniž by z toho byla tlačenice. */
.anonymous-variant:not(.je-velka) .anonymous-stavba__blok { font-size: 0; }
.anonymous-variant:not(.je-velka) .anonymous-stavba__cekani { display: none; }
@media (prefers-reduced-motion: reduce) {
    .anonymous-stavba__blok { animation: none; }
}
/* Rozložení „jeden velký, dva bokem". Přeskládá se při spuštění generování,
   dál ho přepíná jen člověk klikem — viz anonymous-preview.js. */
.anonymous-variants.je-rozlozene { grid-template-columns: minmax(0, 1fr) 280px; align-content: start; }
.je-rozlozene .anonymous-variant.je-velka { grid-column: 1; grid-row: 1 / span 2; }
.je-rozlozene .anonymous-variant:not(.je-velka) { grid-column: 2; }
/* Výška se veze s oknem: na notebooku s nízkou obrazovkou by pevných 600 px
   odsunulo jméno návrhu i tlačítko „Pokračovat" až někam pod okraj. */
.je-rozlozene .je-velka .anonymous-okno__telo { height: clamp(380px, 64vh, 600px); }
.je-rozlozene .je-velka .anonymous-okno__lista { height: 28px; }
.je-rozlozene .anonymous-variant:not(.je-velka) .anonymous-okno__telo { height: 232px; }
/* Při přehazování se karty na okamžik překrývají. Ta, která letí do velkého
   okna, má být nahoře — jinak ji po cestě přikryje ta, co jde pryč. */
.anonymous-variant.je-velka { position: relative; z-index: 1; }
/* Velká karta se pod myší nenadzvedává, člověk v ní skroluje. */
.anonymous-variant.je-velka:has(.anonymous-variant__volba) { cursor: default; }
.anonymous-variant.je-velka:has(.anonymous-variant__volba):hover { border-color: var(--landing-line); transform: none; }
.anonymous-variant.je-velka:has(.anonymous-variant__volba:checked):hover { border-color: var(--landing-green); }
/* Doběhlý návrh na sebe jednou upozorní a dál čeká. Sami ho nepřehazujeme —
   přepnout rozkoukaný návrh pod rukama je ta nejhorší odměna za čekání. */
.anonymous-variant.je-nove { animation: anonymous-doblikni 2.4s ease-out; }
@keyframes anonymous-doblikni {
    0%, 100% { box-shadow: 0 0 0 0 rgba(145,169,74,0); }
    14%, 56% { box-shadow: 0 0 0 4px rgba(145,169,74,.3); }
}
@media (max-width: 850px) {
    /* 1fr se neumí zmenšit pod obsah a dlouhá pracovní adresa v kartě tím
       roztahovala sloupec přes okraj obrazovky. */
    .anonymous-variants { grid-template-columns: minmax(0, 1fr); }
    .anonymous-variant { max-width: 640px; width: 100%; min-width: 0; margin: 0 auto; }
    .anonymous-okno__telo { height: 420px; }
    /* Na úzké obrazovce není „bokem" kam dát, takže jdou pod sebe a prohlížený
       návrh si jen stoupne na začátek. */
    .anonymous-variants.je-rozlozene { grid-template-columns: minmax(0, 1fr); width: auto; margin-left: 0; }
    .je-rozlozene .anonymous-variant.je-velka { grid-column: 1; grid-row: auto; order: -1; }
    .je-rozlozene .anonymous-variant:not(.je-velka) { grid-column: 1; }
    .je-rozlozene .je-velka .anonymous-okno__telo { height: 520px; }
    .je-rozlozene .anonymous-variant:not(.je-velka) .anonymous-okno__telo { height: 300px; }
    /* Po klepnutí stránka doskroluje k velkému návrhu, takže potvrzení musí být
       u něj. To pod kartami zůstává jako konec stránky. */
    .anonymous-variant__akce { display: flex; padding: 6px 4px 4px; }
    .anonymous-variant__akce .landing-button { width: 100%; }
}
@media (max-width: 580px) {
    .anonymous-page, .anonymous-results { padding-top: 32px; padding-bottom: 60px; }
    .anonymous-akce { width: 100%; }
    .anonymous-results__heading h1 { font-size: 26px; letter-spacing: -.7px; }
    .anonymous-generation { align-items: stretch; flex-direction: column; }
    .anonymous-akce .landing-button, .anonymous-generation .landing-button { width: 100%; }
    .anonymous-generation { padding: 16px; }
    .anonymous-okno__telo { height: 400px; }
    .je-rozlozene .je-velka .anonymous-okno__telo { height: 440px; }
    .je-rozlozene .anonymous-variant:not(.je-velka) .anonymous-okno__telo { height: 260px; }
}
/* Teprve za 1336 px se vejde víc než 1000px sloupec stránky. Velký náhled tím
   vyroste ze 700 na 920 px, což je rozdíl mezi mžouráním a čtením. */
@media (min-width: 1336px) {
    .anonymous-variants.je-rozlozene { width: 1240px; margin-left: -120px; grid-template-columns: minmax(0, 1fr) 300px; }
    .je-rozlozene .je-velka .anonymous-okno__telo { height: clamp(420px, 68vh, 660px); }
    .je-rozlozene .anonymous-variant:not(.je-velka) .anonymous-okno__telo { height: 256px; }
}
/* --- hero ------------------------------------------------------------------
   Převzato z prototypu (návrh B „Čistá plocha"), css/landing-b.css.
   Hero schválně NEMÁ pevnou výšku: pod jeho spodní hranu musí vykukovat kus
   ukázky, jinak není poznat, že stránka pokračuje. */
.landing-hero { position: relative; overflow: hidden; padding: 40px 0; }
/* Dvě záře míří na stejné místo: limetka drží levý konec pole, korál pravý
   s tlačítkem, a spolu podsvítí zadávací řádek, ne celé hero. Poslední
   zarážka je rgba(…,0), ne transparent — transparent je průhledná černá
   a kolem plochy by vznikla šedá svatozář. */
.landing-hero::before, .landing-hero::after { position: absolute; inset: 0; z-index: 0; pointer-events: none; content: ""; }
/*.landing-hero::before { background: radial-gradient(38% 50% at 33% 56%, rgba(199,242,76,.38), rgba(199,242,76,0) 72%); }*/
.landing-hero::after { background: radial-gradient(34% 42% at 68% 64%, rgba(255,138,74,.26), rgba(255,138,74,0) 72%); }
.landing-hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }

/* Odznak nad nadpisem je bílý, ne limetkový — limetka je na stránce
   vyhrazená pro to, na co se dá kliknout. Vlasová linka místo stínu, aby
   na světlém podkladu nezmizel. */
.landing-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px; border: 1px solid var(--landing-line); border-radius: 999px; background: #fff; color: var(--landing-ink); font-size: 12.5px; font-weight: 600; }
.landing-badge svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.landing-badge--maly { padding: 6px 13px; font-size: 12.5px; }
.landing-badge--maly svg { width: 13px; height: 13px; }
.landing-eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #687d31; font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.landing-eyebrow > span { width: 8px; height: 8px; border-radius: 50%; background: #8dad2f; box-shadow: 0 0 0 4px #eef6d9; }
.landing-hero h1 { color: var(--landing-ink); font-family: Archivo, Inter, sans-serif; font-weight: 800; }
.landing-hero h1 { max-width: 820px; margin: 0; font-size: clamp(32px, 5.2vw, 52px); line-height: 1.1; letter-spacing: -1.3px; }
.landing-hero__lead { max-width: 600px; margin: 0; color: var(--landing-muted); font-size: 17px; line-height: 1.55; }
.landing-text-link { display: inline-flex; align-items: center; min-height: 44px; color: #32382d; font-size: 16px; font-weight: 700; text-decoration: none; }
.landing-text-link:hover { color: #718d25; }
.landing-hero__note { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--landing-muted); font-size: 14px; }
.landing-hero__note svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; }

/* --- pole s větou ----------------------------------------------------------
   Zadání je hlavní výzva stránky, proto pruh přes celou šířku obsahu
   a tlačítko rovnou v něm. */
.landing-prompt { width: 100%; max-width: 760px; padding: 8px 8px 8px 22px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--landing-line); border-radius: 999px; background: #fff; box-shadow: 0 18px 40px rgba(15,20,10,.08); }
.landing-prompt__field { flex: 1; min-width: 0; align-self: stretch; display: flex; align-items: center; gap: 12px; }
.landing-prompt__ico { width: 18px; height: 18px; flex: 0 0 auto; color: var(--landing-muted); fill: none; stroke: currentColor; }
/* V poli je textarea, ne input: delší zadání se musí zalomit, jinak text
   ujede do strany a na mobilu z něj zbude pár slov. Výšku dorovnává
   landing.js podle obsahu, strop je tady — za ním se v poli roluje. */
.landing-prompt textarea { flex: 1; min-width: 0; max-height: 126px; padding: 0 8px 0 0; overflow-y: hidden; scrollbar-width: thin; resize: none; border: 0; background: none; outline: none; color: var(--landing-ink); font: inherit; font-size: 17px; line-height: 1.45; }
.landing-prompt textarea::placeholder { color: var(--landing-hint); }
.landing-prompt .landing-button { min-height: 46px; padding: 0 20px; border-radius: 999px; gap: 7px; background: var(--landing-hero-btn); box-shadow: var(--landing-hero-btn-glow); }
.landing-prompt .landing-button:hover { background: var(--landing-hero-btn); box-shadow: 0 10px 24px rgba(255,112,54,.48); }
.landing-prompt .landing-button svg { width: 16px; height: 16px; stroke-width: 2; }
/* Jak pole poroste, pilulka se narovná: oblouk vysoký jako několik řádků
   vypadá jako omyl a tlačítko by u textu plavalo na středu. Třídu přidává
   landing.js, až když se text opravdu zalomí. */
.landing-prompt.je-vicradkova { border-radius: 22px; }
.landing-prompt.je-vicradkova .landing-prompt__field { align-items: flex-start; }
.landing-prompt.je-vicradkova .landing-prompt__ico { margin-top: 2px; }

/* --- poznámka vedle pole ---------------------------------------------------
   Kdo přijde s hotovým webem, má svoji sekci až dole. Tohle je vodítko
   hned u pole, aby na ni nemusel narazit náhodou.

   Visí absolutně vedle pole a schválně přetéká z osy obsahu do okrajů
   stránky — vedle 760px pole by jinak zbylo na stranu moc málo. Ořízne
   ji až overflow: hidden na .landing-hero, tedy okraj okna.

   Odsazení od pole drží šipku: ta potřebuje kus plochy, aby se oblouk
   stihl rozvinout; natěsno u pilulky vypadá jako zlomená čárka. */
.landing-prompt-obal { position: relative; width: 100%; max-width: 760px; }
.landing-jina { position: absolute; right: calc(100% + 28px); bottom: calc(50% + 38px); width: 156px; color: var(--landing-muted); font-size: 13px; line-height: 1.45; text-decoration: none; }

/* Poznámka stojí volně na ploše — žádný podklad ani stín. Kolem pole už
   jsou tři bílé plochy (pilulka, odznak, chipy) a čtvrtá by z vodítka
   udělala další prvek rozhraní; takhle se čte jako dopsaná poznámka.

   Otáčí se kolem pravého dolního rohu: tam začíná šipka, takže ať je
   náklon jakýkoli, hrot zůstane přesně tam, kam míří. */
.landing-jina__text { display: block; text-align: center; transform: rotate(-2.5deg); transform-origin: 100% 100%; }
.landing-jina b { display: block; margin-bottom: 1px; color: var(--landing-ink); font-weight: 600; }
.landing-jina:hover b { text-decoration: underline; }

/* Řetízek na stejné dlaždici jako ikonky u případů v sekci Web z odkazu.
   display: flex a auto okraje místo zděděného inline-flex: na vlastním
   řádku se tak vystředí spolehlivě, ať se text pod ním láme jakkoli.
   Inkoust natvrdo, protože dlaždice dědí tlumenou barvu z poznámky. */
.landing-jina__ico { display: flex; margin: 0 auto 10px; color: var(--landing-ink); }

/* Špička cesty sedí u pravého okraje rámečku, takže šipka míří do pole;
   nad ní stojí text. Oblouk začíná až pod pravou třetinou poznámky, aby
   měl kam zatočit, a odsazení shora ho odlepí od dolního dotahu písmen —
   natěsno pod textem vypadal jako jeho součást. O stejných 14 px je
   poznámka výš, aby hrot zůstal na ose pole. */
.landing-jina__sipka { position: absolute; top: 100%; right: -14px; margin-top: 14px; width: 72px; height: 38px; color: var(--landing-hint); transition: transform .18s ease, color .18s ease; }
.landing-jina:hover .landing-jina__sipka { transform: translateX(3px); color: var(--landing-muted); }

/* Pod 1240 px už vedle pole místo není ani v okrajích stránky — poznámka
   spadne pod pole.

   Šipka tu nestojí v řadě vedle textu, ale visí absolutně. Dva důvody:
   v řadě odsouvala text z osy stránky (celá dvojice se centrovala jako
   jeden blok, takže text skončil napravo od středu) a mířila doleva vedle
   dlaždice, tedy mimo pole. Takhle text drží střed a šipka stoupá přesně
   do mezery mezi polem a poznámkou. */
@media (max-width: 1240px) {
    /* inset: auto je nutné — odsazení z plovoucí polohy platí i pro
       position: relative, jenže tam prvek posouvá z toku místo aby ho
       ukotvilo, a poznámka by odletěla mimo stránku. */
    .landing-jina { position: relative; inset: auto; display: block; width: auto; margin-top: 22px; }
    /* Blok je vystředěný, tak ať se naklání kolem své osy, ne kolem rohu. */
    .landing-jina__text { transform-origin: 50% 100%; }
    /* Otočená o čtvrt kruhu a překlopená doleva: oblouk tím vychází od textu
       a stoupá nahoru k poli. Bez překlopení šel obráceně — začínal venku
       vlevo a k textu se vracel, takže vypadal, že míří od pole pryč.
       Odsazení zprava je od středu poznámky, ne od jejího okraje — šířka
       bloku se s oknem mění, ale střed zůstává.

       Otáčení je kolem středu prvku, takže se kresba posune i vodorovně;
       right a top jsou doladěné na výsledek, ne na původní rámeček. */
    .landing-jina__sipka { top: 2px; right: calc(50% + 22px); margin: 0; width: 62px; height: 33px; transform: scaleX(-1) rotate(-90deg); }
    /* Po otočení míří místní osa x nahoru a vodorovné překlopení s tím nehne,
       takže posun jde k poli. */
    .landing-jina:hover .landing-jina__sipka { transform: scaleX(-1) rotate(-90deg) translateX(3px); }
}

/* --- návrhy vět ------------------------------------------------------------
   Prázdné pole je nejtěžší místo stránky. Hotová věta na jedno kliknutí
   je rychlejší než vymýšlet vlastní. */
.landing-tries { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 9px; }
.landing-tries__label { color: var(--landing-muted); font-size: 13px; }
.landing-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--landing-line); border-radius: 999px; background: #fff; color: var(--landing-ink); font-size: 12.5px; font-weight: 600; text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.landing-chip svg { width: 13px; height: 13px; flex: 0 0 auto; fill: none; stroke: currentColor; }
.landing-chip:hover { border-color: #c9ccbe; transform: translateY(-1px); }
/* Prstem se chip trefuje hůř než myší, 44 px tedy jen na dotyku — na myši
   by z řádku s nabídkami byly čtyři zbytečně vysoké pilulky. */
@media (hover: none) and (pointer: coarse) {
    .landing-chip { min-height: 44px; }
}

/* --- ukázka pod herem ------------------------------------------------------
   Malé horní odsazení schválně: panel má vykukovat přes spodní hranu hera,
   ne začínat až o kus níž. */
.landing-demo { padding: 22px 36px 96px; }
.landing-demo__panel { max-width: 1208px; margin: 0 auto; padding: 34px 28px 30px; display: flex; flex-direction: column; align-items: center; gap: 18px; border-radius: 28px; background: var(--landing-panel); }
/* Nadpis sekce má menší mezeru pod sebou než jinde — rám s ukázkou je hned za ním. */
/* Menší mezera než u ostatních sekcí — rám s ukázkou je hned za nadpisem.
   Výběr přes .landing-demo schválně: společné .landing-hlav stojí v souboru
   až za tímhle blokem, takže samotná třída by prohrála na pořadí. */
.landing-demo .landing-hlav { margin-bottom: 6px; }
.landing-demo__hint { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--landing-muted); font-size: 15px; }
/* Dvě věty, z nich svítí vždycky jedna — každá s vlastní ikonou, protože
   kurzor myši nad „klepnutím" je stejný nesmysl jako telefon nad „zarolujte".
   Oba výběry jsou dvojtřídní schválně: s jednou třídou by je přebilo
   pravidlo nad nimi a schovaná věta by zůstala vidět. */
.landing-demo__hint span { display: inline-flex; align-items: center; gap: 8px; }
.landing-demo__hint svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; }
.landing-demo__hint .landing-demo__dotyk { display: none; }
.landing-eyebrow svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; }

/* --- rám s ukázkou ---------------------------------------------------------
   Uvnitř je opravdový web v iframe, ne obrázek — proto se v něm dá rolovat
   a proto na to upozorňuje řádek pod rámem. */
.landing-browser { width: 100%; max-width: 1000px; overflow: hidden; border: 1px solid var(--landing-line); border-radius: 16px; background: #fff;
    /* Po přepnutí oboru k rámu sjíždíme; stejná rezerva jako u kotev,
       ať nekončí pod přilepenou lištou. */
    scroll-margin-top: 96px; }
.landing-browser__bar { padding: 11px 14px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--landing-line); }
.landing-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 999px; background: #dde0d4; }
.landing-browser__url { flex: 1; color: var(--landing-muted); font-size: 13px; text-align: center; }
.landing-browser__plocha { position: relative; height: 540px; background: #fff; transition: height .25s ease; }
.landing-browser__view { width: 100%; height: 100%; display: block; border: 0; }
/* Telefon je na výšku — v 540 px působil podsaditě, proto se plocha zvýší.
   Přechod je tam proto, aby to při přepnutí nepraskalo. */
.landing-browser[data-zarizeni="mob"] .landing-browser__plocha { height: 760px; padding: 18px 0; display: flex; justify-content: center; background: var(--landing-panel); }
.landing-browser[data-zarizeni="mob"] .landing-browser__view { width: 390px; max-width: 100%; border: 1px solid var(--landing-line); border-radius: 14px; background: #fff; }

/* --- přepínač Počítač / Mobil ---------------------------------------------- */
.landing-zar { flex: 0 0 auto; padding: 3px; display: flex; gap: 3px; border-radius: 999px; background: var(--landing-panel); }
.landing-zar button { min-height: 34px; padding: 0 12px; display: flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; background: none; color: var(--landing-muted); font: inherit; font-size: 13px; cursor: pointer; }
.landing-zar button svg { width: 13px; height: 13px; fill: none; stroke: currentColor; }
.landing-zar button[aria-pressed="true"] { background: #fff; color: var(--landing-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(15,20,10,.08); }

/* --- ukázka na dotyku ------------------------------------------------------
   Na myši je rám živý hned. Na dotyku ne: prst, který chce posunout stránku,
   by místo toho posunul obsah uvnitř cizího webu a stránka by uvízla přesně
   v místě, kde má zapůsobit. Do prvního klepnutí je proto přes ukázku
   překryv „Klepněte a prozkoumejte" — ten dotyky vezme na sebe, takže prst
   posouvá stránku. Tlačítko Hotovo ukázku zamkne zpátky.

   Blokuje schválně jen ten překryv. Rám sám pointer-events: none nedostane:
   Chrome si mapu dotykových oblastí drží z posledního vykreslení, a když se
   rámu pointer-events vrátí, zůstane pro prst hluchý — stránka pod ním jede
   dál a v ukázce to nerolovalo, dokud do ní člověk na něco neklepl.

   Třídu .je-zive nasazuje landing.js, takže bez skriptu zůstane rám obrázkem
   a rolování stránky funguje — to je ta bezpečnější polovina. */
.landing-browser__klik, .landing-browser__dost { display: none; }
@media (hover: none) and (pointer: coarse) {
    .landing-demo__hint .landing-demo__mys { display: none; }
    .landing-demo__hint .landing-demo__dotyk { display: inline-flex; }

    .landing-browser__bar { padding: 7px 10px; }
    .landing-zar button { min-height: 44px; }

    .landing-browser:not(.je-zive) .landing-browser__klik { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: rgba(29,32,27,.10); font: inherit; cursor: pointer; }
    .landing-browser__klik span { min-height: 44px; padding: 0 22px; display: inline-flex; align-items: center; border-radius: 999px; background: rgba(20,22,15,.88); color: #fff; font-size: 15px; font-weight: 600; box-shadow: 0 8px 20px rgba(15,20,10,.24); }
    /* Visí v rohu nad živou ukázkou, takže vlastní podklad i stín — pod ním
       může být cokoli. */
    .landing-browser.je-zive .landing-browser__dost { position: absolute; right: 12px; bottom: 12px; min-height: 44px; padding: 0 18px; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; background: rgba(20,22,15,.88); color: #fff; box-shadow: 0 8px 20px rgba(15,20,10,.24); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
    .landing-browser__dost svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
}

/* --- přepínač oboru --------------------------------------------------------- */
.landing-segy { width: 100%; max-width: 1000px; display: flex; gap: 16px; }
.landing-segy button { flex: 1; min-width: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; border: 0; background: none; font: inherit; text-align: center; cursor: pointer; }
.landing-segy img { width: 100%; height: auto; aspect-ratio: 238/152; object-fit: cover; border: 1px solid var(--landing-line); border-radius: 11px; transition: border-color .15s ease, transform .15s ease; }
.landing-segy span { color: var(--landing-muted); font-size: 14px; font-weight: 600; }
.landing-segy button:hover img { transform: translateY(-2px); }
.landing-segy button[aria-pressed="true"] img { border-color: #9fb45c; }
.landing-segy button[aria-pressed="true"] span { color: var(--landing-ink); }
.landing-footer { border-top: 1px solid var(--landing-line); background: white; }
.landing-footer__inner { min-height: 79px; display: flex; align-items: center; gap: 24px; }
.landing-footer img { width: 94px; height: auto; display: block; }
.landing-footer__inner > span, .landing-footer__inner > small, .landing-footer__inner > a:not(:first-child) { color: #5e6459; font-size: 13px; }
/* Odkazy v patičce dostanou 44 px na výšku. Patička má min-height 79 px,
   takže se tím na širokém okně nezvětší. */
.landing-footer__inner > a, .landing-footer__pravni a { display: inline-flex; align-items: center; min-height: 44px; }
.landing-footer__inner > a:nth-of-type(2) { margin-left: auto; }
.landing-footer__inner > small { margin-left: 14px; }
/* Právní odkazy stojí ve vlastním rámu, aby výběry nth-of-type výše dál
   mířily na logo a na e-mail. */
.landing-footer__pravni { display: flex; align-items: center; gap: 16px; }
.landing-footer__pravni a { color: #5e6459; font-size: 13px; }
.landing-footer__pravni a:hover { color: #607d16; }

/* ===========================================================================
   SEKCE POD UKÁZKOU
   Rozestupy dělá spodní odsazení sekce, stejně jako v návrhu — horní nechávám
   na nule, ať se odsazení nesčítají.
   =========================================================================== */
.landing-sec { position: relative; }

/* --- společné kousky -------------------------------------------------------- */
.landing-eyebrow { margin: 0; display: flex; align-items: center; gap: 10px; color: var(--landing-muted); font-size: 13px; font-weight: 600; letter-spacing: .9px; }
.landing-eyebrow svg { width: 14px; height: 14px; flex: 0 0 auto; }
.landing-h2 { margin: 0; font-family: Archivo, Inter, sans-serif; font-weight: 800; font-size: clamp(27px, 3.6vw, 36px); line-height: 1.14; letter-spacing: -1.05px; }
.landing-h2--tlum { color: var(--landing-muted); }
.landing-lead { max-width: 560px; margin: 0; color: var(--landing-muted); font-size: 16.5px; line-height: 1.6; }
.landing-lead--uzky { max-width: 620px; }

.landing-hlav { margin-bottom: 46px; display: flex; flex-direction: column; gap: 16px; }
.landing-hlav--stred { align-items: center; text-align: center; }
.landing-hlav--stred .landing-eyebrow { justify-content: center; }

.landing-ikona { width: 52px; height: 52px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 16px; background: var(--landing-green-soft); }
.landing-ikona svg { width: 24px; height: 24px; }
.landing-ikona--sm { width: 32px; height: 32px; border-radius: 10px; }
.landing-ikona--sm svg { width: 16px; height: 16px; }

.landing-pozn { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--landing-muted); font-size: 14px; }
.landing-pozn svg { width: 15px; height: 15px; flex: 0 0 auto; }
.landing-pozn--stred { margin-top: 30px; justify-content: center; }

.landing-body { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.landing-body li { display: flex; align-items: center; gap: 11px; font-size: 16px; }
.landing-body i { width: 22px; height: 22px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--landing-green-soft); }
.landing-body svg { width: 13px; height: 13px; }

/* Ikony v sekcích kreslí Lucide — tenká čára, ne výplň. */
.landing-sec svg, .landing-cenik svg, .landing-zaver svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* --- tři kroky -------------------------------------------------------------- */
.landing-kroky { padding-bottom: 112px; }
.landing-kroky__rada { display: flex; gap: 30px; }
.landing-krok { flex: 1; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.landing-krok__c { margin: 0; color: var(--landing-muted); font-size: 13px; font-weight: 600; letter-spacing: .9px; }
.landing-krok__h { margin: 0; font-family: Archivo, Inter, sans-serif; font-weight: 800; font-size: 19.5px; letter-spacing: -.5px; }
.landing-krok__p { margin: 0; flex: 1; color: var(--landing-muted); font-size: 16px; line-height: 1.6; }

/* Maketka pod každým krokem. Výška jen jako minimum: karty vedle sebe drží
   stejnou výšku samy (jsou to položky jednoho flexu), ale v úzkém sloupci se
   chipy zalomí na dva řádky a do pevných 122 px by přetekly. */
.landing-mini { min-height: 122px; padding: 16px; display: flex; flex-direction: column; justify-content: center; gap: 10px; border-radius: 14px; background: var(--landing-panel); }
.landing-mini__pole { padding: 7px 7px 7px 12px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--landing-line); border-radius: 10px; background: #fff; font-size: 13px; }
.landing-mini__pole svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--landing-muted); }
.landing-mini__pole span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.landing-mini__send { width: 26px; height: 26px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--landing-line); color: var(--landing-muted); }
.landing-mini__send svg { width: 13px; height: 13px; transform: rotate(-90deg); }
.landing-mini__pozn { margin: 0; display: flex; align-items: center; gap: 7px; color: var(--landing-muted); font-size: 13px; }
.landing-mini__pozn svg { width: 12px; height: 12px; }

.landing-mini__rada { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.landing-mini__rada svg { width: 13px; height: 13px; flex: 0 0 auto; }
.landing-mini__rada span { flex: 1; min-width: 0; }
.landing-pruh { height: 6px; overflow: hidden; border-radius: 999px; background: var(--landing-line); }
.landing-pruh i { display: block; width: 68%; height: 100%; border-radius: 999px; background: var(--landing-muted); }
.landing-mini__chipy { display: flex; flex-wrap: wrap; gap: 6px; }
.landing-mini__chip { padding: 5px 10px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--landing-line); border-radius: 999px; background: #fff; color: var(--landing-muted); font-size: 13px; }
.landing-mini__chip svg { width: 11px; height: 11px; }
.landing-mini__chip.je-hotovo { color: var(--landing-ink); font-weight: 600; }

/* Místo pevné výšky padding — tlačítko je vyšší a drží se textu. */
.landing-mini__btn { padding: 13px 14px; display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 10px; background: var(--landing-maketa); font-size: 14px; font-weight: 700; }
.landing-mini__btn svg { width: 13px; height: 13px; }
.landing-mini__url { padding: 7px 8px 7px 11px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--landing-line); border-radius: 10px; background: #fff; font-size: 13px; }
.landing-mini__url svg { width: 13px; height: 13px; flex: 0 0 auto; color: var(--landing-muted); }
.landing-mini__url span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.landing-odznak { padding: 3px 8px; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; background: var(--landing-line); color: var(--landing-ink); font-size: 13px; font-style: normal; font-weight: 600; }
.landing-odznak em { width: 6px; height: 6px; border-radius: 999px; background: var(--landing-muted); }

/* --- web z odkazu ------------------------------------------------------------
   Druhá cesta dovnitř, proto je stavěná stejně jako hero: všechno na střed
   a pod tím vlastní limetková záře. */
.landing-pred { position: relative; overflow: hidden; padding-bottom: 112px; }
/* Záře je oproti heru plošší a slabší: tady nemá přetahovat pozornost,
   jen oddělit sekci od bílého okolí. Konec musí být rgba(…,0) — `transparent`
   je průhledná ČERNÁ a udělal by kolem šedý lem. */
.landing-pred::before { position: absolute; left: 50%; top: -70px; width: 920px; height: 600px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(199,242,76,.22), rgba(199,242,76,0)); pointer-events: none; content: ""; }
.landing-pred__in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }

/* Pole na adresu je užší než hlavní pole v heru, ať mu nekonkuruje. */
.landing-odkaz { width: 100%; max-width: 620px; padding: 7px 7px 7px 16px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--landing-line); border-radius: 999px; background: #fff; box-shadow: 0 12px 28px rgba(15,20,10,.08); text-align: left; }
.landing-odkaz__ico { flex: 0 0 auto; display: flex; color: var(--landing-muted); }
.landing-odkaz__ico svg { width: 16px; height: 16px; }
.landing-odkaz input { flex: 1; min-width: 0; align-self: stretch; min-height: 44px; border: 0; background: none; outline: none; color: var(--landing-ink); font: inherit; font-size: 17px; }
.landing-odkaz input::placeholder { color: var(--landing-hint); }

/* Dva případy vedle sebe: ikona vlevo, text vpravo, oboje na jedné ose.
   Text je uvnitř zarovnaný vlevo — vycentrovaný vedle ikony by se rozpadl
   na nesouměrné řádky. Vystředěná je až dvojice jako celek. */
.landing-pripady { margin: 38px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 34px; text-align: left; }
.landing-pripady li { flex: 0 1 340px; display: flex; align-items: center; gap: 14px; }
.landing-pripady li > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.landing-pripady b { font-family: Archivo, Inter, sans-serif; font-weight: 700; font-size: 17px; }
.landing-pripady p { margin: 0; color: var(--landing-muted); font-size: 16px; line-height: 1.55; }
/* Věta o nekopírování se láme na dva řádky — štítek musí zůstat u prvního. */
.landing-pred .landing-pozn { align-items: flex-start; }
.landing-pred .landing-pozn svg { margin-top: 2px; }

/* --- úpravy v chatu ---------------------------------------------------------- */
.landing-chat { padding-bottom: 112px; }
.landing-chat__in { display: flex; align-items: center; gap: 70px; }
.landing-chat__text { flex: 0 0 360px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.landing-chat__text .landing-pozn { margin-top: 8px; }

.landing-radky { flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; }
.landing-radky li { padding: 15px 0; display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--landing-line); }
.landing-radky li:last-child { border-bottom: 1px solid var(--landing-line); }
.landing-radky div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.landing-radky b { font-family: Archivo, Inter, sans-serif; font-weight: 700; font-size: 17px; }
.landing-radky span { color: var(--landing-muted); font-size: 16px; }

/* --- rezervační formulář ------------------------------------------------------
   Scéna je přepsaná z návrhu jedna ku jedné (550 × 512), proto px a ne
   procenta — natočené karty na sebe musí nasedat přesně. */
.landing-rez { padding-bottom: 112px; }
.landing-rez__in { display: flex; align-items: center; gap: 70px; }
.landing-rez__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.landing-rez__obory { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--landing-line); color: var(--landing-muted); font-size: 14px; line-height: 1.55; }

.landing-scena { position: relative; flex: 0 0 440px; height: 608px; }
.landing-scena__zar { position: absolute; left: 10px; top: 20px; width: 420px; height: 560px; background: radial-gradient(closest-side, rgba(199,242,76,.23), rgba(199,242,76,0)); pointer-events: none; }
/* Fotka vyplní celou scénu a dlaždice oborů jí poletují nad rohy. Zaoblení
   a stín jsou stejné jako u ostatních bílých karet na stránce. */
.landing-scena__foto { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 24px; box-shadow: 0 16px 38px rgba(15,20,10,.10); }

/* Kalendář visí přes pravý dolní roh fotky, kousek pod telefonem v ruce —
   tam je fotka klidná a maketa z ní vypadá jako to, co si člověk právě
   vybírá. Kousek přečuhuje ven, aby to byl floating prvek, ne výřez. */
.landing-kart { position: absolute; left: 236px; top: 468px; width: 226px; padding: 18px; display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--landing-line); border-radius: 16px; background: #fff; box-shadow: 0 16px 38px rgba(15,20,10,.10); transform: rotate(-3deg); }
.landing-pr { display: block; width: 84px; height: 9px; border-radius: 999px; background: var(--landing-line); }
.landing-tydny, .landing-mrizka { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.landing-tydny s { height: 4px; border-radius: 999px; background: var(--landing-line); }
.landing-mrizka u { height: 18px; border-radius: 5px; background: var(--landing-panel); }
.landing-mrizka u.je { background: var(--landing-green-soft); }
.landing-mrizka u.vybr { background: var(--landing-ink); }

/* Dlaždice oborů obíhají scénu. Obal nese odskok od myši, dlaždice uvnitř
   natočení a vznášení — kdyby to bylo na jednom prvku, jeden transform by
   přepsal druhý. Přejezd zpátky je delší a měkčí než uhnutí. */
.landing-tile-pos { position: absolute; display: block; transform: translate(var(--dx, 0px), var(--dy, 0px)); transition: transform .5s cubic-bezier(.2,1.3,.35,1); }
.landing-tile-pos.je-blizko { transition: transform .14s ease-out; }   /* u myši ať stíhá */
.landing-tile { position: static; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--landing-line); border-radius: 14px; background: #fff; box-shadow: 0 10px 22px rgba(15,20,10,.08); transform: rotate(var(--rot, 0deg)); }
.landing-tile svg { width: 21px; height: 21px; }
.landing-tile--r1 { left: -22px; top: 150px; --rot: -9deg; }
.landing-tile--r2 { left: 6px; top: 380px; --rot: 7deg; }
.landing-tile--r3 { left: 120px; top: 568px; --rot: -6deg; }
.landing-tile--r4 { left: 396px; top: 40px; --rot: 8deg; }
.landing-tile--r5 { left: 418px; top: 190px; --rot: -7deg; }
.landing-tile--r6 { left: 386px; top: 330px; --rot: 6deg; }

/* --- péče o web ---------------------------------------------------------------- */
.landing-pece { padding-bottom: 112px; }
.landing-zpravy { margin: 0; padding: 0; list-style: none; }
.landing-zpravy li { padding: 20px 0; display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--landing-line); }
.landing-zpravy li:last-child { border-bottom: 1px solid var(--landing-line); }
.landing-zpravy__kdy { flex: 0 0 190px; display: flex; flex-direction: column; gap: 3px; }
.landing-zpravy__kdy b { font-family: Archivo, Inter, sans-serif; font-weight: 700; font-size: 15px; }
.landing-zpravy__kdy span { color: var(--landing-muted); font-size: 13px; }
.landing-bublina { flex: 1; min-width: 0; margin: 0; padding: 13px 17px; border-radius: 14px; background: var(--landing-panel); font-size: 16px; line-height: 1.55; }

/* --- ceník ----------------------------------------------------------------------
   Jediná sekce s vlastní barvou plochy. Bílý panel uvnitř je stejný princip
   jako šedý pás s bílým prohlížečem u ukázky — ne karta odnikud. */
.landing-cenik { padding: 104px 0; background: var(--landing-panel); }
.landing-cenik .landing-hlav { margin-bottom: 52px; }
/* Dokud testovací provoz platí, musí být upozornění čitelné. V 10px šedi
   to byla doložka pod smlouvou — tady stojí hned u ceny, takže si zaslouží
   vlastní podklad a velikost, se kterou se počítá, že se přečte. */
.landing-cenik__notice { box-sizing: border-box; max-width: 680px; margin: 26px auto 0; padding: 14px 20px; border: 1px solid #e4dcbf; border-radius: 14px; background: #fdf8e7; color: #5c5531; font-size: 15px; line-height: 1.55; text-align: center; }

.landing-tarif { display: flex; overflow: hidden; border: 1px solid var(--landing-line); border-radius: 20px; background: #fff; }
.landing-tarif__ceny, .landing-tarif__vcene { flex: 1; min-width: 0; padding: 40px 44px; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.landing-tarif__vcene { gap: 18px; border-left: 1px solid var(--landing-line); }
.landing-tarif__vcene h3 { margin: 0; font-family: Archivo, Inter, sans-serif; font-weight: 700; font-size: 16px; }
.landing-tarif .landing-badge--maly { align-self: flex-start; }

.landing-ceny { display: flex; align-items: center; gap: 20px; }
.landing-cena { display: flex; flex-direction: column; gap: 7px; }
.landing-cena__lbl { margin: 0; color: var(--landing-muted); font-size: 13px; font-weight: 600; letter-spacing: .9px; }
.landing-cena__c { margin: 0; font-family: Archivo, Inter, sans-serif; font-weight: 800; font-size: clamp(38px, 4.6vw, 52px); line-height: 1; letter-spacing: -1.9px; }
.landing-cena__pod { margin: 0; color: var(--landing-muted); font-size: 14px; }
.landing-sipka { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; }
.landing-sipka s { display: block; width: 22px; height: 1px; background: var(--landing-line); }
.landing-sipka i { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--landing-line); border-radius: 999px; }
.landing-sipka svg { width: 14px; height: 14px; color: var(--landing-muted); }

.landing-tarif__pozn { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.landing-tarif__pozn span { display: flex; align-items: center; gap: 7px; color: var(--landing-muted); font-size: 14px; }
.landing-tarif__pozn svg { width: 14px; height: 14px; }

/* --- otázky a odpovědi ----------------------------------------------------------
   Otázka je mřížka o dvou řádcích: otázka a odpověď. Rozbalení je přechod
   druhého řádku z 0fr na 1fr — žádné počítání výšek, tu si prohlížeč
   odvodí z obsahu sám.

   Proč ne jinak:
   • `::details-content` ani s hlášenou podporou přechod nespustí (ověřeno
     přes transitionrun — žádná událost) a obsah naskočí ostře.
   • Animovat výšku skriptem šlo, ale odpověď má spodní okraj, který
     z <details> vyklouzne ven (splývání okrajů), a obsah pod otázkou pak
     v závěru poskočí. Tady okraj zůstává uvnitř obalu pořád.

   Zavírání samotné CSS neumí, protože atribut `open` zmizí v okamžik
   kliknutí. Skript v landing.js ho proto sundá až po doběhnutí přechodu. */
.landing-faq { padding: 104px 0 108px; }
.landing-otazky details { display: grid; grid-template-rows: auto 0fr; border-top: 1px solid var(--landing-line); transition: grid-template-rows .3s cubic-bezier(.22,.9,.28,1); }
.landing-otazky details[open] { grid-template-rows: auto 1fr; }
/* Mezistav: `open` ještě drží obsah v dokumentu, ale řádek už sjíždí. */
.landing-otazky details.je-zavirajici { grid-template-rows: auto 0fr; }
.landing-otazky details:last-of-type { border-bottom: 1px solid var(--landing-line); }
/* Ořez druhého řádku. min-height:0 je nutné, jinak položka mřížky odmítne
   klesnout pod vlastní obsah a řádek zůstane rozbalený.
   ⚠️ Musí sedět na obou místech. Položkou mřížky není obal .landing-otazky__telo,
   ale ::details-content — anonymní obálka, kterou kolem obsahu dělá prohlížeč
   sám. Obal je tu pro prohlížeče, které ::details-content nemají. */
.landing-otazky details::details-content { overflow: hidden; min-height: 0; }
.landing-otazky__telo { overflow: hidden; min-height: 0; }
.landing-otazky summary { padding: 21px 0; display: flex; align-items: center; gap: 20px; cursor: pointer; list-style: none; font-family: Archivo, Inter, sans-serif; font-size: 17px; font-weight: 700; }
.landing-otazky summary::-webkit-details-marker { display: none; }
.landing-otazky summary i { position: relative; width: 18px; height: 18px; flex: 0 0 auto; margin-left: auto; }
/* Plus se po rozbalení změní na minus — bez ikon, jen dvě čárky. */
.landing-otazky summary i::before, .landing-otazky summary i::after { position: absolute; left: 0; top: 8px; width: 18px; height: 2px; border-radius: 2px; background: var(--landing-muted); transition: transform .24s cubic-bezier(.22,.9,.28,1); content: ""; }
.landing-otazky summary i::after { transform: rotate(90deg); }
.landing-otazky details[open] summary i::after { transform: rotate(0); }
.landing-otazky p { margin: -6px 0 21px; padding-right: 38px; color: var(--landing-muted); font-size: 16px; line-height: 1.65; }

.landing-faq__pata { margin-top: 28px; display: flex; align-items: center; gap: 24px; }
.landing-faq__pata div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.landing-faq__pata b { font-family: Archivo, Inter, sans-serif; font-weight: 700; font-size: 17px; }
.landing-faq__pata span { color: var(--landing-muted); font-size: 15px; }
.landing-faq__mail { min-height: 44px; padding: 0 18px; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; border-radius: 10px; background: var(--landing-green-soft); color: var(--landing-ink); font-family: Archivo, Inter, sans-serif; font-size: 16px; font-weight: 700; text-decoration: none; }
.landing-faq__mail svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* --- závěrečná výzva ------------------------------------------------------------- */
.landing-zaver { padding: 0 0 56px; }
.landing-zaver__blok { position: relative; overflow: hidden; padding: 72px 100px 74px; display: flex; flex-direction: column; align-items: center; gap: 20px; border-radius: 30px; background: #15180f; text-align: center; }
/* Záře přetažená nad horní hranu, aby světlo přicházelo zvenku. */
.landing-zaver__blok::before { position: absolute; left: 50%; top: -120px; width: 820px; height: 560px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(199,242,76,.19), rgba(199,242,76,0)); pointer-events: none; content: ""; }
.landing-zaver__h, .landing-zaver__p, .landing-zaver__blok .landing-prompt, .landing-jistoty { position: relative; z-index: 1; }
.landing-zaver__h { margin: 0; color: #fff; font-family: Archivo, Inter, sans-serif; font-weight: 800; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.1; letter-spacing: -1.3px; }
.landing-zaver__p { max-width: 600px; margin: 0; color: rgba(255,255,255,.72); font-size: 17px; line-height: 1.55; }
.landing-prompt--zaver { max-width: 720px; box-shadow: 0 20px 44px rgba(0,0,0,.25); }
.landing-jistoty { margin-top: 6px; display: flex; flex-wrap: wrap; justify-content: center; gap: 26px; }
.landing-jistoty span { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.8); font-size: 15px; font-weight: 500; }
.landing-jistoty svg { width: 15px; height: 15px; color: var(--landing-green); }

@media (max-width: 900px) {
    .landing-nav__links { display: none; }
    /* Přihlášení se stěhuje do menu — v liště musí zbýt místo na výzvu. */
    .landing-nav__login { display: none; }
    .landing-burger { display: grid; place-items: center; }
    .landing-demo { padding: 22px 16px 64px; }
    .landing-demo__panel { padding: 26px 16px 24px; border-radius: 24px; }
    .landing-browser__plocha { height: 440px; }
    .landing-browser[data-zarizeni="mob"] .landing-browser__plocha { height: 640px; }
    .landing-segy { flex-wrap: wrap; gap: 12px; }
    /* Dvě vedle sebe. Růst nesmějí: lichý počet oborů by nechal poslední
       dlaždici roztáhnout přes celou šířku a vypadala by jako nadpis. */
    .landing-segy button { flex: 0 1 calc(50% - 6px); }
    /* Popisky by v úzkém pruhu zabraly víc místa než samotné přepínače. */
    .landing-zar button span { display: none; }
    .landing-zar button { padding: 6px 9px; }
    .landing-chat__in, .landing-rez__in { flex-direction: column; gap: 36px; }
    .landing-chat__text { width: 100%; flex: 0 0 auto; }
    /* Rodič je vystředěný flex, takže si krátké řádky bez šířky sednou
       doprostřed jako úzký sloupec — pod textem mají držet celou šířku. */
    .landing-radky { width: 100%; }
    .landing-kroky__rada { flex-wrap: wrap; }
    .landing-krok { flex: 1 1 280px; }
    .landing-tarif { flex-direction: column; }
    .landing-tarif__vcene { border-top: 1px solid var(--landing-line); border-left: 0; }
    /* Na úzkém je z fotky prostě obrázek přes celou šířku: dlaždice kolem
       ní se skrývají, nemají kam poletovat. */
    .landing-scena { width: 100%; height: auto; flex: 0 0 auto; display: flex; flex-direction: column; gap: 14px; }
    .landing-scena__zar, .landing-scena .landing-tile-pos { display: none; }
    /* Dlaždice jsou ozdoba a na úzkém jen překážejí, kalendář ale ukazuje,
       co si člověk vybírá — zůstává, jen menší a zavěšený za roh fotky. */
    .landing-kart { left: auto; top: auto; right: -4px; bottom: -10px; width: 182px; padding: 14px; gap: 9px; }
    .landing-scena__foto { position: static; height: auto; border-radius: 20px; }
}
@media (min-width: 901px) {
    .landing-menu { display: none; }
}
@media (max-width: 640px) {
    .landing-nav { min-height: 67px; gap: 10px; }
    .landing-logo { width: 98px; }
    .landing-nav__actions { gap: 13px; }
    .landing-button--small { min-height: 44px; padding: 0 14px; font-size: 14px; }
    .landing-hero { padding: 28px 0 40px; }
    .landing-hero h1 { letter-spacing: -.8px; }
    .landing-hero__lead { font-size: 16px; }
    /* Tlačítko se v úzkém pruhu nevejde vedle pole, tak si vezme vlastní řádek. */
    .landing-prompt { flex-wrap: wrap; padding: 14px; border-radius: 20px; }
    .landing-prompt__field { width: 100%; padding: 0 4px 4px; }
    .landing-prompt .landing-button { width: 100%; justify-content: center; }
    /* Přepínač Počítač/Mobil tu nemá co přepínat — rám je v úzkém okně tak
       jako tak užší než telefon, takže obě polohy vypadají stejně. Mizí
       a zůstává mobilní podoba; platí bez ohledu na data-zarizeni, aby
       zúžení okna po přepnutí na Počítač nenechalo rám v půli cesty. */
    .landing-zar { display: none; }
    .landing-browser__plocha,
    .landing-browser[data-zarizeni="mob"] .landing-browser__plocha { height: 640px; padding: 0; display: block; background: #fff; }
    .landing-browser[data-zarizeni="mob"] .landing-browser__view { width: 100%; border: 0; border-radius: 0; }
    .landing-kroky, .landing-chat, .landing-rez, .landing-pece, .landing-pred { padding-bottom: 76px; }
    .landing-hlav { margin-bottom: 34px; }
    .landing-odkaz { flex-wrap: wrap; padding: 12px; border-radius: 20px; }
    .landing-odkaz input { width: 100%; }
    .landing-odkaz .landing-button { width: 100%; justify-content: center; }
    .landing-odkaz__ico { display: none; }
    .landing-cenik { padding: 72px 0; }
    .landing-tarif__ceny, .landing-tarif__vcene { padding: 28px 24px; }
    .landing-ceny { flex-direction: column; align-items: flex-start; gap: 14px; }
    .landing-sipka { transform: rotate(90deg); }
    .landing-faq { padding: 72px 0 76px; }
    .landing-zpravy li { flex-wrap: wrap; }
    .landing-zpravy__kdy { flex: 0 0 100%; }
    .landing-faq__pata { flex-direction: column; align-items: flex-start; }
    .landing-zaver__blok { padding: 48px 22px 52px; border-radius: 22px; }
    .landing-footer__inner { padding-top: 19px; padding-bottom: 19px; flex-wrap: wrap; gap: 13px 18px; }
    .landing-footer__inner > span { width: calc(100% - 105px); }
    .landing-footer__inner > a:nth-of-type(2) { margin-left: 0; }
    .landing-footer__inner > small { margin-left: auto; }
    /* Na mobilu se patička láme; odkazy si berou vlastní řádek, jinak by
       e-mail i rok zůstaly vmáčknuté mezi nimi. */
    .landing-footer__pravni { width: 100%; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .landing-button { transition: none; }
    .landing-otazky details { transition: none; }
    .landing-otazky summary i::before, .landing-otazky summary i::after { transition: none; }
}
/* ===========================================================================
   POHYB V SEKCÍCH
   Schovaný stav visí na .js-rozjezd, kterou nasadí skript — bez JS se tedy
   nikdy nic neschová. landing.js pak přidá .je-videt, jakmile prvek vjede
   do obrazu.
   =========================================================================== */
@keyframes landing-toci { to { transform: rotate(360deg); } }
@keyframes landing-plni { from { width: 0; } }
@keyframes landing-tep { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes landing-vznasi { 0%, 100% { transform: rotate(var(--rot, 0deg)) translateY(0); } 50% { transform: rotate(var(--rot, 0deg)) translateY(-7px); } }

@media (prefers-reduced-motion: no-preference) {
    /* :where() drží specificitu na nule, jinak by výběry s prvkem (> li,
       details) přebily odkrývací pravidlo .je-videt a prvky by zůstaly
       schované. */
    .js-rozjezd :where(
        .landing-demo__panel, .landing-hlav, .landing-krok, .landing-odkaz,
        .landing-pripady li, .landing-chat__text, .landing-radky li,
        .landing-scena, .landing-rez__text, .landing-zpravy li, .landing-tarif,
        .landing-otazky details, .landing-faq__pata, .landing-zaver__blok
    ) { opacity: 0; transform: translateY(14px); }

    .js-rozjezd .je-videt { opacity: 1; transform: none; transition: opacity .55s ease-out, transform .55s cubic-bezier(.22,.9,.28,1); transition-delay: var(--landing-rd, 0s); }

    /* ⚠️ Pravidlo nad tímhle nastavuje `transition` zkratkou, a ta přepíše
       všechno, co si prvek nesl sám. Otázka tím po odkrytí přišla o přechod
       řádku: rozbalování přestalo být plynulé a `transitionend` se nespustil,
       takže ji skript nedokázal ani zavřít. Vrací se jí tu zpátky — delší
       zápis po vlastnostech, aby rozjezd mohl mít svoje zpoždění a řádek
       naopak žádné. */
    .js-rozjezd .landing-otazky details.je-videt {
        transition-property: opacity, transform, grid-template-rows;
        transition-duration: .55s, .55s, .3s;
        transition-timing-function: ease-out, cubic-bezier(.22,.9,.28,1), cubic-bezier(.22,.9,.28,1);
        transition-delay: var(--landing-rd, 0s), var(--landing-rd, 0s), 0s;
    }

    /* Drobnosti uvnitř maketek, ať nejsou mrtvé. */
    .landing-mini__rada svg { animation: landing-toci 1.8s linear infinite; }
    .landing-krok.je-videt .landing-pruh i { animation: landing-plni 1.1s cubic-bezier(.22,.9,.28,1) .25s both; }
    .landing-odznak em { animation: landing-tep 2.4s ease-in-out infinite; }
    .landing-tile { animation: landing-vznasi 7s ease-in-out infinite; }
    .landing-tile--r2 .landing-tile, .landing-tile--r5 .landing-tile { animation-duration: 8.5s; animation-delay: -2s; }
    .landing-tile--r3 .landing-tile, .landing-tile--r6 .landing-tile { animation-duration: 7.8s; animation-delay: -4s; }
    .landing-tile--r4 .landing-tile { animation-duration: 9s; animation-delay: -1s; }
}