/* ============================================================
   CORE landing — design systém „Měkký moderní pastel"
   Namespace .cl- (nekoliduje s app CSS). Mobile-first.
   Paleta: teplá krémová + pudrová modrá / sage / levandule / broskev.
   Fonty: Space Grotesk (display) + Hanken Grotesk (body) — SELF-HOST woff2 (GDPR, žádné Google CDN).
   Šířka 1480px, full-bleed pastel sekce, glassmorphism, gradient mesh, animace.
   Třídy .cl-* zachovány kvůli PHP komponentám; přidány nové.
   ============================================================ */

/* ============================================================
   FONTY — SELF-HOST (GDPR + výkon, žádné Google CDN)
   woff2 subsety latin + latin-ext (CZ) v /public/fonts/.
   font-display:swap → text vidět hned (náhradní), výměna bez FOIT.
   unicode-range převzat z oficiálních Google subsetů (latin / latin-ext).
   ============================================================ */

/* ---- Space Grotesk (display) 500 / 600 / 700 ---- */
@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/space-grotesk-latin-500-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/space-grotesk-latin-ext-500-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/space-grotesk-latin-600-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/space-grotesk-latin-ext-600-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/space-grotesk-latin-700-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/space-grotesk-latin-ext-700-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Hanken Grotesk (body) 400 / 500 / 600 / 700 ---- */
@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/hanken-grotesk-latin-ext-400-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/hanken-grotesk-latin-ext-500-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/hanken-grotesk-latin-ext-600-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/hanken-grotesk-latin-700-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/hanken-grotesk-latin-ext-700-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ============================================================
   TOKENY
   ============================================================ */
:root {
    /* ---- Plátna ---- */
    --cl-canvas: #FBFAF8;          /* teplá krémová bílá */
    --cl-soft:   #F2F5FB;          /* pudrová modrá */
    --cl-sage:   #F3F7F4;          /* sage nádech (druhý alt) */
    --cl-card:   #FFFFFF;          /* karty */

    /* ---- Text ---- */
    --cl-ink:    #2A2D34;          /* charcoal */
    --cl-ink-press: #1B1D22;
    --cl-body:   #3C424C;
    --cl-muted:  #646A75;          /* AA na světlém plátně */

    /* ---- Pastelové akcenty: soft (podklad) / sytá (text, ikona, akcent) ---- */
    --cl-blue:        #5B8DD9;     /* pudrová modrá — sytá */
    --cl-blue-soft:   #BBD3F2;
    --cl-blue-bg:     #E7F0FC;     /* velmi jemný podklad chipu */
    --cl-blue-ink:    #2F5C9E;     /* tmavší pro AA text na soft */

    --cl-sagec:       #4F9E7E;     /* sage — sytá */
    --cl-sage-soft:   #C3E0D4;
    --cl-sage-bg:     #E6F2EC;
    --cl-sage-ink:    #2F6B53;

    --cl-lav:         #8B72C9;     /* levandule — sytá */
    --cl-lav-soft:    #D8CDF2;
    --cl-lav-bg:      #EFEAFA;
    --cl-lav-ink:     #5E47A0;

    --cl-peach:       #DB8C62;     /* broskev — sytá */
    --cl-peach-soft:  #F6D7C5;
    --cl-peach-bg:    #FBEDE3;
    --cl-peach-ink:   #B5663D;

    /* ---- Modulové signature barvy (mapováno na pastel) ----
       nabidky=levandule, sklad=broskev, banky=sage, adresar=modrá, finance=sage */
    --cl-mod-nabidky: var(--cl-lav);
    --cl-mod-sklad:   var(--cl-peach);
    --cl-mod-banky:   var(--cl-sagec);
    --cl-mod-finance: var(--cl-sagec);
    --cl-mod-adresar: var(--cl-blue);
    --cl-cream:       #FBEDE3;      /* broskvový meziblok */

    /* Akcent (primární) = modrá */
    --cl-accent:      var(--cl-blue);
    --cl-accent-ink:  var(--cl-blue-ink);
    --cl-accent-soft: var(--cl-blue-soft);

    --cl-hairline: #E7E4DD;        /* teplá hairline na krémové */
    --cl-hairline-cool: #DEE5F0;

    /* ---- Sémantické ---- */
    --cl-success: #2F8F66;
    --cl-warning: #C77700;
    --cl-error:   #D14B57;

    /* ---- Spacing (base 4px) ---- */
    --cl-s1: 4px;  --cl-s2: 8px;  --cl-s3: 12px; --cl-s4: 16px;
    --cl-s6: 24px; --cl-s8: 32px; --cl-s12: 48px; --cl-s16: 64px;
    --cl-s10: 40px;
    --cl-s20: 80px; --cl-s24: 104px;

    /* ---- Radius (velký, měkký) ---- */
    --cl-r-btn: 12px;
    --cl-r-card: 22px;
    --cl-r-card-sm: 16px;
    --cl-r-input: 10px;

    /* ---- Layout ---- */
    --cl-max: 1480px;
    --cl-gutter: 18px;
    --cl-nav-h: 70px;

    /* ---- Stíny (pastel-tónované, vrstvené, měkké) ---- */
    --cl-shadow-1:
        0 1px 2px rgba(43, 45, 52, .04),
        0 4px 12px rgba(91, 141, 217, .06);
    --cl-shadow-2:
        0 2px 6px rgba(43, 45, 52, .05),
        0 12px 28px rgba(91, 141, 217, .10),
        0 24px 48px rgba(139, 114, 201, .06);
    --cl-shadow-3:
        0 8px 20px rgba(43, 45, 52, .06),
        0 24px 56px rgba(91, 141, 217, .14),
        0 40px 80px rgba(139, 114, 201, .08);
    --cl-glow: 0 6px 22px rgba(91, 141, 217, .32);

    /* ---- Fonty ---- */
    --cl-font-display: "Space Grotesk", "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --cl-font-body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

    /* ---- Motion ---- */
    --cl-ease: cubic-bezier(.22, .61, .36, 1);
    --cl-ease-soft: cubic-bezier(.4, 0, .2, 1);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--cl-font-body);
    font-weight: 400;
    font-size: 17.5px;
    line-height: 1.7;
    color: var(--cl-body);
    background: var(--cl-canvas);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "tnum" 1;   /* tabulkové číslice */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

@media (min-width: 768px) { body { font-size: 18px; } }

main { flex: 1 0 auto; }

img, svg { max-width: 100%; height: auto; display: block; }

a {
    color: var(--cl-accent-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
a:hover { text-decoration: underline; }

ul { list-style: none; }

:focus-visible {
    outline: 2.5px solid var(--cl-blue);
    outline-offset: 3px;
    border-radius: 4px;
}

::selection { background: var(--cl-lav-soft); color: var(--cl-ink); }

/* ============================================================
   TYPOGRAFIE
   ============================================================ */
h1, h2, h3 {
    font-family: var(--cl-font-display);
    font-weight: 600;
    color: var(--cl-ink);
    line-height: 1.12;
    letter-spacing: -0.02em;       /* Space Grotesk: lehce stazene pro ostrost */
    font-feature-settings: "tnum" 1;
}

h1 {
    font-size: clamp(2.75rem, 5.6vw, 4.25rem);  /* ~44–68px */
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.04;
}
h2 {
    font-size: clamp(2rem, 3.8vw, 2.85rem);     /* ~32–46px */
    font-weight: 700;
    letter-spacing: -0.025em;
}
h3 {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.cl-lead {
    font-family: var(--cl-font-body);
    font-size: clamp(1.25rem, 2.2vw, 1.375rem); /* 20–22px */
    line-height: 1.6;
    color: var(--cl-body);
    max-width: 60ch;
    font-weight: 400;
}

.cl-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--cl-s2);
    font-family: var(--cl-font-body);
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cl-accent-ink);
}
.cl-eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--cl-blue), var(--cl-lav));
}

/* ============================================================
   LAYOUT — sekce + max-width bound
   ============================================================ */
.cl-section__bound {
    width: 100%;
    max-width: var(--cl-max);
    margin-inline: auto;
    padding-inline: var(--cl-gutter);
}

.cl-section {
    position: relative;
    width: 100%;
    max-width: var(--cl-max);
    margin-inline: auto;
    padding-inline: var(--cl-gutter);
    padding-block: var(--cl-s16);
}
.cl-section > * + * { margin-top: var(--cl-s6); }

@media (min-width: 768px) {
    :root { --cl-gutter: 40px; }
    .cl-section { padding-block: var(--cl-s20); }
}

/* ---- Jednotne hlavicky sekci (eyebrow -> h2 -> lead) ----
   Vsechny *-head bloky sdili stejny vertikalni rytmus, spodni odstup,
   jednotnou max-sirku nadpisove zony i jednotnou radkovou delku leadu.
   Vsechny hlavicky jsou left-aligned (konzistentni typ napric strankou). */
.cl-steps-head,
.cl-modules-head,
.cl-faq-head,
.cl-compare-head,
.cl-roadmap-head {
    margin-bottom: var(--cl-s12);
    max-width: 760px;        /* jednotna sirka nadpisove zony */
}
.cl-steps-head > * + *,
.cl-modules-head > * + *,
.cl-faq-head > * + *,
.cl-compare-head > * + *,
.cl-roadmap-head > * + * {
    margin-top: var(--cl-s3);
}
/* Nadpis v hlavicce: jednotne omezeni delky pro vyvazenou sazbu */
.cl-steps-head h2,
.cl-modules-head h2,
.cl-faq-head h2,
.cl-compare-head h2,
.cl-roadmap-head h2 {
    max-width: 20ch;
}
/* Lead v hlavicce ma jednotnou radkovou delku a jednotny odstup od nadpisu */
.cl-steps-head .cl-lead,
.cl-modules-head .cl-lead,
.cl-faq-head .cl-lead,
.cl-compare-head .cl-lead,
.cl-roadmap-head .cl-lead {
    margin-top: var(--cl-s4);
    max-width: 60ch;
}

/* ============================================================
   DEKORATIVNÍ PASTEL BLOBS / MESH
   ============================================================ */
.cl-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .55;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}
.cl-blob--blue  { background: radial-gradient(circle, var(--cl-blue-soft), transparent 70%); }
.cl-blob--lav   { background: radial-gradient(circle, var(--cl-lav-soft), transparent 70%); }
.cl-blob--sage  { background: radial-gradient(circle, var(--cl-sage-soft), transparent 70%); }
.cl-blob--peach { background: radial-gradient(circle, var(--cl-peach-soft), transparent 70%); }

@keyframes cl-float {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(0, -22px, 0) scale(1.06); }
}
.cl-blob--anim { animation: cl-float 13s var(--cl-ease-soft) infinite; }
.cl-blob--anim.cl-blob--lav { animation-duration: 17s; animation-direction: alternate-reverse; }

/* ============================================================
   SKIP LINK
   ============================================================ */
.cl-skip-link {
    position: absolute;
    left: -9999px; top: 0; z-index: 1000;
    background: var(--cl-ink);
    color: #fff;
    padding: var(--cl-s3) var(--cl-s4);
    border-radius: var(--cl-r-btn);
}
.cl-skip-link:focus { left: var(--cl-s4); top: var(--cl-s4); text-decoration: none; }

/* ============================================================
   TLAČÍTKA
   ============================================================ */
.cl-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cl-s2);
    padding: 13px 24px;
    border-radius: var(--cl-r-btn);
    font-family: var(--cl-font-body);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.1;
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: transform .16s var(--cl-ease), background .2s var(--cl-ease),
                box-shadow .22s var(--cl-ease), border-color .2s var(--cl-ease);
}
.cl-btn:hover { text-decoration: none; }
.cl-btn:active { transform: scale(0.97); }

/* Primární = jemný gradient modrá→levandule, glow */
.cl-btn-primary {
    background: linear-gradient(135deg, var(--cl-blue) 0%, var(--cl-lav) 100%);
    color: #fff;
    box-shadow: var(--cl-shadow-1);
}
.cl-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--cl-glow), var(--cl-shadow-2);
}

.cl-btn-secondary {
    background: var(--cl-card);
    color: var(--cl-ink);
    border-color: var(--cl-hairline);
    box-shadow: var(--cl-shadow-1);
}
.cl-btn-secondary:hover {
    border-color: var(--cl-blue-soft);
    transform: translateY(-2px);
    box-shadow: var(--cl-shadow-2);
}

.cl-btn-row { display: flex; flex-wrap: wrap; gap: var(--cl-s3); }

/* ============================================================
   NAV — glassmorphism
   ============================================================ */
.cl-nav {
    position: sticky;
    top: 0; z-index: 200;
    background: rgba(251, 250, 248, .72);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid rgba(231, 228, 221, .8);
}
.cl-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--cl-nav-h);
}
.cl-nav__logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--cl-font-display);
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: -0.03em;
    color: var(--cl-ink);
    text-decoration: none;
}
.cl-nav__logo:hover { text-decoration: none; }
.cl-nav__logo::before {
    content: "";
    width: 14px; height: 14px;
    border-radius: 5px;
    background: linear-gradient(135deg, var(--cl-blue), var(--cl-lav));
    box-shadow: 0 2px 8px rgba(91,141,217,.4);
}

.cl-nav__menu { display: flex; align-items: center; gap: var(--cl-s6); }
.cl-nav__list { display: flex; align-items: center; gap: var(--cl-s6); }
.cl-nav__link {
    position: relative;
    color: var(--cl-ink);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    padding-block: 4px;
}
.cl-nav__link::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--cl-blue), var(--cl-lav));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s var(--cl-ease);
}
.cl-nav__link:hover { color: var(--cl-ink); text-decoration: none; }
.cl-nav__link:hover::after { transform: scaleX(1); }
.cl-nav__cta { white-space: nowrap; }

.cl-nav__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px; height: 44px;
    padding: 9px;
    background: var(--cl-card);
    border: 1px solid var(--cl-hairline);
    border-radius: var(--cl-r-input);
    cursor: pointer;
}
.cl-nav__toggle-bar {
    display: block; width: 100%; height: 2px;
    background: var(--cl-ink); border-radius: 2px;
    transition: transform .2s var(--cl-ease), opacity .2s var(--cl-ease);
}

@media (max-width: 920px) {
    .cl-nav__toggle { display: flex; }
    .cl-nav__menu {
        position: absolute;
        top: var(--cl-nav-h); left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: var(--cl-s4);
        padding: var(--cl-s6) var(--cl-gutter);
        background: rgba(251, 250, 248, .98);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--cl-hairline);
        box-shadow: var(--cl-shadow-2);
        display: none;
    }
    .cl-nav__menu.is-open { display: flex; }
    .cl-nav__list { flex-direction: column; align-items: stretch; gap: var(--cl-s4); }
    .cl-nav__cta { text-align: center; }
    .cl-nav__toggle[aria-expanded="true"] .cl-nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .cl-nav__toggle[aria-expanded="true"] .cl-nav__toggle-bar:nth-child(2) { opacity: 0; }
    .cl-nav__toggle[aria-expanded="true"] .cl-nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ============================================================
   FOOTER
   ============================================================ */
.cl-footer {
    margin-top: var(--cl-s24);
    background: var(--cl-soft);
    border-top: 1px solid var(--cl-hairline-cool);
}
.cl-footer__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cl-s12);
    padding-block: var(--cl-s16);
}
.cl-footer__logo {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--cl-font-display);
    font-weight: 700; font-size: 1.4rem;
    letter-spacing: -0.03em; color: var(--cl-ink);
}
.cl-footer__logo::before {
    content: ""; width: 13px; height: 13px; border-radius: 5px;
    background: linear-gradient(135deg, var(--cl-blue), var(--cl-lav));
}
.cl-footer__claim { margin-top: var(--cl-s3); color: var(--cl-body); max-width: 36ch; }
.cl-footer__trust {
    margin-top: var(--cl-s4); display: inline-flex; flex-wrap: wrap; gap: var(--cl-s2);
    font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--cl-muted);
}
.cl-footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--cl-s8); }
.cl-footer__heading {
    font-family: var(--cl-font-display);
    font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--cl-accent-ink); margin-bottom: var(--cl-s4);
}
.cl-footer__col ul > li + li { margin-top: var(--cl-s3); }
.cl-footer__col a { color: var(--cl-body); font-size: 1rem; text-decoration: none; }
.cl-footer__col a:hover { color: var(--cl-accent-ink); text-decoration: underline; }
.cl-footer__legal {
    border-top: 1px solid var(--cl-hairline-cool);
    padding-block: var(--cl-s6);
    font-size: 0.875rem; color: var(--cl-muted);
}

@media (min-width: 768px) {
    .cl-footer__inner { grid-template-columns: 1.4fr 2fr; align-items: start; }
    .cl-footer__cols { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   HERO
   ============================================================ */
.cl-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cl-s12);
    align-items: center;
    padding-top: var(--cl-s16);
    overflow: visible;
}
.cl-hero .cl-blob--blue  { top: -80px;  left: -120px; width: 460px; height: 460px; }
.cl-hero .cl-blob--lav   { top: -40px;  right: -100px; width: 420px; height: 420px; }
.cl-hero .cl-blob--sage  { bottom: -120px; left: 30%; width: 380px; height: 380px; opacity: .4; }
.cl-hero__copy { position: relative; z-index: 1; }
.cl-hero__copy > * + * { margin-top: var(--cl-s4); }
.cl-hero__h1 { max-width: 16ch; }
.cl-hero__h1 .cl-grad {
    background: linear-gradient(115deg, var(--cl-blue) 0%, var(--cl-lav) 60%, var(--cl-peach) 110%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--cl-lav);
}
.cl-hero__lead { max-width: 54ch; }
.cl-hero__cta { margin-top: var(--cl-s6); }

.cl-hero__mockup-wrap { position: relative; z-index: 1; width: 100%; }

/* Mockup — glassmorphism okno (abstraktní náznak rozhraní, bez vymyšlených dat) */
.cl-hero-mockup {
    position: relative;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: var(--cl-r-card);
    box-shadow: var(--cl-shadow-3);
    overflow: hidden;
}
.cl-hero-mockup__bar {
    display: flex; align-items: center; gap: var(--cl-s2);
    padding: var(--cl-s4) var(--cl-s6);
    background: rgba(242, 245, 251, .7);
    border-bottom: 1px solid var(--cl-hairline-cool);
}
.cl-hero-mockup__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--cl-blue-soft); }
.cl-hero-mockup__dot:nth-child(2) { background: var(--cl-peach-soft); }
.cl-hero-mockup__dot:nth-child(3) { background: var(--cl-sage-soft); }
.cl-hero-mockup__tab {
    margin-left: auto; font-family: var(--cl-font-display);
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; color: var(--cl-muted);
}
/* Abstraktní náznak aplikace: boční navigace + obsahová plocha */
.cl-hero-mockup__app {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 0;
    min-height: 320px;
}
.cl-hero-mockup__side {
    display: flex; flex-direction: column; gap: var(--cl-s3);
    padding: var(--cl-s6) var(--cl-s4);
    background: rgba(242, 245, 251, .55);
    border-right: 1px solid var(--cl-hairline-cool);
}
.cl-hero-mockup__logo {
    height: 26px; width: 26px; border-radius: 8px;
    background: linear-gradient(135deg, var(--cl-blue), var(--cl-lav));
    margin-bottom: var(--cl-s3);
}
.cl-hero-mockup__nav {
    height: 9px; border-radius: 5px;
    background: var(--cl-hairline-cool);
}
.cl-hero-mockup__nav:nth-child(3) { width: 78%; }
.cl-hero-mockup__nav:nth-child(4) { width: 88%; }
.cl-hero-mockup__nav:nth-child(5) { width: 70%; }
.cl-hero-mockup__nav:nth-child(6) { width: 82%; }
.cl-hero-mockup__nav--on {
    background: linear-gradient(90deg, var(--cl-blue-soft), var(--cl-lav-soft));
}
.cl-hero-mockup__main {
    padding: var(--cl-s6) var(--cl-s8) var(--cl-s8);
    display: flex; flex-direction: column; gap: var(--cl-s5, 20px);
}
/* Horní lišta obsahu: titulek + akční pilulka */
.cl-hero-mockup__topline {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--cl-s1);
}
.cl-hero-mockup__title-bar {
    height: 12px; width: 38%; border-radius: 6px;
    background: linear-gradient(90deg, var(--cl-blue-soft), var(--cl-lav-soft));
}
.cl-hero-mockup__pill {
    height: 22px; width: 64px; border-radius: 999px;
    background: linear-gradient(135deg, var(--cl-blue), var(--cl-lav));
    opacity: .85;
}
/* KPI karty s jemným vnitřním obsahem */
.cl-hero-mockup__kpis {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cl-s4);
}
.cl-hero-mockup__kpi {
    display: flex; flex-direction: column; gap: 7px;
    padding: var(--cl-s3) var(--cl-s4);
    min-height: 64px; border-radius: var(--cl-r-card-sm);
    background: var(--cl-card);
    border: 1px solid var(--cl-hairline-cool);
    box-shadow: var(--cl-shadow-1);
}
.cl-hero-mockup__kpi--blue { background: linear-gradient(135deg, #fff, var(--cl-blue-bg)); }
.cl-hero-mockup__kpi--sage { background: linear-gradient(135deg, #fff, var(--cl-sage-bg)); }
.cl-hero-mockup__kpi--lav  { background: linear-gradient(135deg, #fff, var(--cl-lav-bg)); }
.cl-hero-mockup__kpi-dot { width: 16px; height: 16px; border-radius: 5px; }
.cl-hero-mockup__kpi--blue .cl-hero-mockup__kpi-dot { background: var(--cl-blue); }
.cl-hero-mockup__kpi--sage .cl-hero-mockup__kpi-dot { background: var(--cl-sagec); }
.cl-hero-mockup__kpi--lav  .cl-hero-mockup__kpi-dot { background: var(--cl-lav); }
.cl-hero-mockup__kpi-l1 { height: 9px; width: 80%; border-radius: 5px; background: rgba(42, 45, 52, .14); }
.cl-hero-mockup__kpi-l2 { height: 7px; width: 55%; border-radius: 4px; background: rgba(42, 45, 52, .09); }
/* Obsahový panel: graf vlevo + seznam řádků vpravo */
.cl-hero-mockup__panel {
    display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--cl-s4);
    align-items: stretch;
}
.cl-hero-mockup__chart {
    display: flex; align-items: flex-end; gap: var(--cl-s2);
    min-height: 120px; padding: var(--cl-s4) var(--cl-s4) var(--cl-s4);
    border-radius: var(--cl-r-card-sm);
    background: var(--cl-card);
    border: 1px solid var(--cl-hairline-cool);
    box-shadow: var(--cl-shadow-1);
}
.cl-hero-mockup__bar-c {
    flex: 1 1 0; min-height: 8px;
    border-radius: 5px 5px 0 0;
    background: linear-gradient(180deg, var(--cl-blue-soft), var(--cl-lav-soft));
}
.cl-hero-mockup__bar-c:nth-child(even) {
    background: linear-gradient(180deg, var(--cl-sage-soft), var(--cl-blue-soft));
}
.cl-hero-mockup__rows {
    display: flex; flex-direction: column; justify-content: center; gap: var(--cl-s3);
    padding: var(--cl-s4);
    border-radius: var(--cl-r-card-sm);
    background: var(--cl-card);
    border: 1px solid var(--cl-hairline-cool);
    box-shadow: var(--cl-shadow-1);
}
.cl-hero-mockup__row { height: 11px; border-radius: 6px; background: var(--cl-hairline-cool); }
.cl-hero-mockup__row:nth-child(1) { width: 100%; }
.cl-hero-mockup__row:nth-child(2) { width: 86%; }
.cl-hero-mockup__row:nth-child(3) { width: 72%; }
.cl-hero-mockup__row:nth-child(4) { width: 58%; }
@media (max-width: 520px) {
    .cl-hero-mockup__panel { grid-template-columns: 1fr; }
    .cl-hero-mockup__app { grid-template-columns: 56px 1fr; }
}

@media (min-width: 920px) {
    .cl-hero { grid-template-columns: 1.04fr 0.96fr; gap: var(--cl-s16); }
}

/* ============================================================
   TRUST PRUH — souvisly korporatni pas (hairline oddelovace, bez pilulek)
   ============================================================ */
.cl-trust {
    background: var(--cl-card);
    border-block: 1px solid var(--cl-hairline-cool);
}
.cl-trust__list {
    display: flex; flex-wrap: wrap; align-items: stretch;
    justify-content: space-between;
    padding-block: var(--cl-s6);
}
.cl-trust__item {
    flex: 1 1 0; min-width: 0;
    display: flex; align-items: center; justify-content: center; gap: var(--cl-s3);
    padding-inline: var(--cl-s6);
    text-align: center;
    color: var(--cl-ink);
    font-size: 1.0625rem; font-weight: 700; letter-spacing: 0.005em; line-height: 1.2;
}
/* jemny 1px vertikalni oddelovac mezi polozkami (ne pred prvni) */
.cl-trust__item + .cl-trust__item {
    border-inline-start: 1px solid var(--cl-hairline-cool);
}
.cl-trust__icon {
    color: var(--cl-accent);
    font-size: 1.375rem; line-height: 1;
    flex: 0 0 auto;
}
.cl-trust__text { white-space: nowrap; }

/* Mobil / uzke viewporty: zalom uhledne do 2-3 radku, skryj oddelovace */
@media (max-width: 760px) {
    .cl-trust__list {
        justify-content: center;
        gap: var(--cl-s4) var(--cl-s8);
        padding-block: var(--cl-s6);
    }
    .cl-trust__item {
        flex: 0 0 auto;
        padding-inline: 0;
        font-size: 1rem;
    }
    .cl-trust__item + .cl-trust__item { border-inline-start: 0; }
}

/* ============================================================
   FEATURE ŘÁDEK
   ============================================================ */
.cl-feature {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cl-s12);
    align-items: center;
}
.cl-feature__copy { position: relative; z-index: 1; }
.cl-feature__copy > * + * { margin-top: var(--cl-s4); }
.cl-feature__h2 { max-width: 20ch; }
.cl-feature__text { max-width: 58ch; }
.cl-feature__cta { margin-top: var(--cl-s4); }

/* Mockup — glass karta s jemným pastel pozadím */
.cl-feature__mockup-wrap { position: relative; z-index: 1; }
.cl-feature__mockup {
    position: relative;
    background: rgba(255, 255, 255, .7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: var(--cl-r-card);
    box-shadow: var(--cl-shadow-2);
    overflow: hidden;
}
.cl-feature__mockup::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(120% 90% at 0% 0%, var(--cl-blue-bg), transparent 60%);
    opacity: .8; pointer-events: none;
}
.cl-feature__mockup-bar {
    position: relative;
    display: flex; gap: var(--cl-s2);
    padding: var(--cl-s4) var(--cl-s6);
    background: rgba(242, 245, 251, .6);
    border-bottom: 1px solid var(--cl-hairline-cool);
}
.cl-feature__mockup-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cl-blue-soft); }
.cl-feature__mockup-dot:nth-child(2) { background: var(--cl-peach-soft); }
.cl-feature__mockup-dot:nth-child(3) { background: var(--cl-sage-soft); }
.cl-feature__mockup-body { position: relative; padding: var(--cl-s8); }
.cl-feature__mockup-body > * + * { margin-top: var(--cl-s4); }
.cl-feature__mockup-line { display: block; height: 14px; border-radius: 7px; }
.cl-feature__mockup-line--lg { width: 78%; background: linear-gradient(90deg, var(--cl-blue-soft), var(--cl-lav-soft)); }
.cl-feature__mockup-line--md { width: 56%; background: linear-gradient(90deg, var(--cl-sage-soft), var(--cl-blue-soft)); }
.cl-feature__mockup-line--sm { width: 42%; background: var(--cl-hairline-cool); }

@media (min-width: 920px) {
    .cl-feature { grid-template-columns: 1.08fr 0.92fr; gap: var(--cl-s16); }
    .cl-feature--reverse .cl-feature__copy { order: 2; }
    .cl-feature--reverse .cl-feature__mockup-wrap { order: 1; }
    /* Mockupy napric feature radky drzi konzistentni velikost (= aside textsec) */
    .cl-feature__mockup { min-height: 360px; display: flex; flex-direction: column; }
    .cl-feature__mockup-body { flex: 1 1 auto; }
}

/* ============================================================
   KRÉMOVÝ / BAREVNÝ MEZIBLOK (full-bleed)
   ============================================================ */
.cl-cream {
    position: relative;
    background:
        radial-gradient(60% 120% at 100% 0%, var(--cl-peach-bg), transparent 60%),
        radial-gradient(50% 110% at 0% 100%, var(--cl-lav-bg), transparent 60%),
        var(--cl-cream);
    overflow: hidden;
}
.cl-cream__inner { position: relative; z-index: 1; padding-block: var(--cl-s16); }
@media (min-width: 768px) { .cl-cream__inner { padding-block: var(--cl-s20); } }

/* ============================================================
   TEXTOVÁ SEKCE
   ============================================================ */
.cl-textsec__body { max-width: 60ch; }
.cl-textsec__body > * + * { margin-top: var(--cl-s4); }
.cl-textsec__h2 { max-width: 22ch; }
.cl-textsec__cta { margin-top: var(--cl-s6); }

/* Vyvážené 2 sloupce: text vlevo, grafický akcent vpravo (od 920px). */
.cl-textsec--split { position: relative; }
@media (min-width: 920px) {
    .cl-textsec--split {
        display: grid;
        grid-template-columns: 1.08fr 0.92fr;   /* shodne s .cl-feature */
        gap: var(--cl-s16);
        align-items: center;
    }
    .cl-textsec--split .cl-textsec__body { max-width: 52ch; }
}

/* Grafický akcent (dekorativní glass karta) */
.cl-textsec__aside {
    position: relative;
    margin-top: var(--cl-s12);
    padding: var(--cl-s8);
    display: flex; flex-direction: column; gap: var(--cl-s4);
    border-radius: var(--cl-r-card);
    background: rgba(255, 255, 255, .7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: var(--cl-shadow-2);
    overflow: hidden;
}
@media (min-width: 920px) {
    .cl-textsec__aside { margin-top: 0; min-height: 360px; justify-content: center; }
}
.cl-textsec__aside::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120% 90% at 100% 0%, var(--cl-blue-bg), transparent 60%);
    opacity: .8;
}
.cl-textsec__aside--peach::before {
    background: radial-gradient(120% 90% at 100% 0%, var(--cl-peach-bg), transparent 60%);
}
.cl-textsec__aside > * { position: relative; z-index: 1; }
.cl-textsec__aside-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: var(--cl-r-card-sm);
    font-size: 1.5rem; color: var(--cl-blue);
    background: var(--cl-blue-bg);
    box-shadow: var(--cl-shadow-1);
    margin-bottom: var(--cl-s2);
}
.cl-textsec__aside--peach .cl-textsec__aside-icon {
    color: var(--cl-peach-ink); background: var(--cl-peach-bg);
}
.cl-textsec__aside-line { display: block; height: 14px; border-radius: 7px; }
.cl-textsec__aside-line--lg { width: 80%; background: linear-gradient(90deg, var(--cl-blue-soft), var(--cl-lav-soft)); }
.cl-textsec__aside-line--md { width: 60%; background: linear-gradient(90deg, var(--cl-sage-soft), var(--cl-blue-soft)); }
.cl-textsec__aside-line--sm { width: 44%; background: var(--cl-hairline-cool); }
.cl-textsec__aside--peach .cl-textsec__aside-line--lg { background: linear-gradient(90deg, var(--cl-peach-soft), var(--cl-lav-soft)); }
.cl-textsec__aside-dots { display: flex; gap: var(--cl-s2); margin-top: var(--cl-s2); }
.cl-textsec__aside-dots span {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--cl-blue-soft);
}
.cl-textsec__aside-dots span:nth-child(2) { background: var(--cl-sage-soft); }
.cl-textsec__aside-dots span:nth-child(3) { background: var(--cl-lav-soft); }
.cl-textsec__aside--peach .cl-textsec__aside-dots span { background: var(--cl-peach-soft); }

/* ============================================================
   FULL-BLEED PASTEL PÁSY (obal sekcí)
   ============================================================ */
.cl-band--soft {
    position: relative;
    background: var(--cl-soft);
    border-block: 1px solid var(--cl-hairline-cool);
    overflow: hidden;
}
.cl-band--sage {
    position: relative;
    background: var(--cl-sage);
    border-block: 1px solid var(--cl-hairline);
    overflow: hidden;
}
.cl-band--soft .cl-section,
.cl-band--sage .cl-section { background: transparent; position: relative; z-index: 1; }
.cl-band--soft .cl-blob,
.cl-band--sage .cl-blob { opacity: .4; }

/* ============================================================
   MODULOVÉ KARTY — pastel s gradient akcentem
   ============================================================ */
/* .cl-modules-head: rytmus a max-sirka resi jednotna pravidla hlavicek vyse */
.cl-module-cards {
    display: grid; grid-template-columns: 1fr; gap: var(--cl-s6);
    align-items: stretch;
}
.cl-module-card {
    position: relative;
    display: flex; flex-direction: column; gap: var(--cl-s3);
    height: 100%;
    min-height: 240px;
    padding: var(--cl-s8);
    border-radius: var(--cl-r-card);
    background: var(--cl-card);
    border: 1px solid var(--cl-hairline-cool);
    color: var(--cl-ink);
    text-decoration: none;
    box-shadow: var(--cl-shadow-1);
    overflow: hidden;
    transition: transform .24s var(--cl-ease), box-shadow .24s var(--cl-ease), border-color .24s var(--cl-ease);
}
.cl-module-card::before {
    content: "";
    position: absolute; inset: 0; z-index: 0;
    opacity: .5;
    transition: opacity .24s var(--cl-ease);
}
.cl-module-card > * { position: relative; z-index: 1; }
.cl-module-card:hover {
    text-decoration: none;
    transform: translateY(-6px);
    box-shadow: var(--cl-shadow-3);
}
.cl-module-card:hover::before { opacity: .9; }
.cl-module-card__name {
    font-family: var(--cl-font-display);
    font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--cl-ink);
}
.cl-module-card__desc { color: var(--cl-body); line-height: 1.55; }
.cl-module-card__cta {
    margin-top: auto;
    display: inline-flex; align-items: center; gap: var(--cl-s2);
    font-weight: 700; font-size: 1rem;
}
.cl-module-card__arrow { transition: transform .22s var(--cl-ease); }
.cl-module-card:hover .cl-module-card__arrow { transform: translateX(4px); }

.cl-module-card__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px;
    border-radius: var(--cl-r-card-sm);
    font-size: 1.5rem;
    margin-bottom: var(--cl-s1);
    box-shadow: var(--cl-shadow-1);
}

/* per-modul: gradient mesh pozadí + ikona + cta + akcent border */
.cl-module-card--nabidky::before { background: radial-gradient(110% 90% at 100% 0%, var(--cl-lav-bg), transparent 65%); }
.cl-module-card--nabidky .cl-module-card__icon { color: var(--cl-lav); background: var(--cl-lav-bg); }
.cl-module-card--nabidky .cl-module-card__cta { color: var(--cl-lav-ink); }
.cl-module-card--nabidky:hover { border-color: var(--cl-lav-soft); }

.cl-module-card--sklad::before { background: radial-gradient(110% 90% at 100% 0%, var(--cl-peach-bg), transparent 65%); }
.cl-module-card--sklad .cl-module-card__icon { color: var(--cl-peach); background: var(--cl-peach-bg); }
.cl-module-card--sklad .cl-module-card__cta { color: var(--cl-peach-ink); }
.cl-module-card--sklad:hover { border-color: var(--cl-peach-soft); }

.cl-module-card--banky::before { background: radial-gradient(110% 90% at 100% 0%, var(--cl-sage-bg), transparent 65%); }
.cl-module-card--banky .cl-module-card__icon { color: var(--cl-sagec); background: var(--cl-sage-bg); }
.cl-module-card--banky .cl-module-card__cta { color: var(--cl-sage-ink); }
.cl-module-card--banky:hover { border-color: var(--cl-sage-soft); }

.cl-module-card--adresar::before { background: radial-gradient(110% 90% at 100% 0%, var(--cl-blue-bg), transparent 65%); }
.cl-module-card--adresar .cl-module-card__icon { color: var(--cl-blue); background: var(--cl-blue-bg); }
.cl-module-card--adresar .cl-module-card__cta { color: var(--cl-blue-ink); }
.cl-module-card--adresar:hover { border-color: var(--cl-blue-soft); }

@media (min-width: 600px) { .cl-module-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cl-module-cards { grid-template-columns: repeat(4, 1fr); } }

/* ============================================================
   FAQ ACCORDION — karty
   ============================================================ */
/* .cl-faq-head: rytmus a max-sirka resi jednotna pravidla hlavicek vyse */
/* Jemne ladeny accordion: jednotne odsazeni, zarovnani otazka/odpoved,
   hairline oddelovac otevreneho stavu, kruhovy +/- terc vpravo.
   --cl-faq-pad: vnitrni horizontalni padding (sdileny otazkou i odpovedi),
   --cl-faq-q-indent: sirka ikony otazky + mezera -> odpoved zacina pod textem otazky. */
.cl-faq {
    --cl-faq-pad: 28px;
    --cl-faq-q-icon: 38px;
    --cl-faq-q-indent: calc(var(--cl-faq-q-icon) + var(--cl-s4));
    /* Dvousloupcovy grid: vyuziva sirku 1480px boundu, karty jsou sirsi
       a vyvazene napric sekci. Kazda karta se rozbaluje samostatne
       (JS pocita vysku per panel), grid layout to neovlivnuje. */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--cl-s4);
    align-items: start;
}
.cl-faq__item {
    background: var(--cl-card);
    border: 1px solid var(--cl-hairline-cool);
    border-radius: var(--cl-r-card-sm);
    box-shadow: var(--cl-shadow-1);
    overflow: hidden;
    transition: box-shadow .2s var(--cl-ease), border-color .2s var(--cl-ease), background-color .2s var(--cl-ease);
}
.cl-faq__item:hover { box-shadow: var(--cl-shadow-2); border-color: var(--cl-blue-soft); }
.cl-faq__item:has(.cl-faq__q[aria-expanded="true"]) {
    border-color: var(--cl-blue-soft);
    box-shadow: var(--cl-shadow-2);
}
.cl-faq__q-wrap { margin: 0; font-size: inherit; font-weight: inherit; }
.cl-faq__q {
    display: flex; align-items: center; justify-content: space-between; gap: var(--cl-s4);
    width: 100%;
    padding: var(--cl-s6) var(--cl-faq-pad);
    background: transparent; border: 0; cursor: pointer; text-align: left;
    font-family: var(--cl-font-display);
    font-size: 1.0625rem; font-weight: 700; color: var(--cl-ink); line-height: 1.4;
    transition: color .2s var(--cl-ease);
}
.cl-faq__q:hover { color: var(--cl-accent-ink); }
.cl-faq__q:focus-visible {
    outline: 2px solid var(--cl-accent); outline-offset: -2px; border-radius: var(--cl-r-card-sm);
}
.cl-faq__q-text {
    display: inline-flex; align-items: center; gap: var(--cl-s4);
    line-height: 1.4; min-width: 0;
}
.cl-faq__q-icon {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--cl-faq-q-icon); height: var(--cl-faq-q-icon); border-radius: 11px;
    background: var(--cl-blue-bg); color: var(--cl-blue);
    font-size: 0.9375rem;
}
.cl-faq__item:nth-child(2n) .cl-faq__q-icon { background: var(--cl-lav-bg); color: var(--cl-lav); }
.cl-faq__item:nth-child(3n) .cl-faq__q-icon { background: var(--cl-sage-bg); color: var(--cl-sagec); }
.cl-faq__item:nth-child(4n) .cl-faq__q-icon { background: var(--cl-peach-bg); color: var(--cl-peach); }
/* Kruhovy +/- terc vpravo, svisle vystredeny vuci otazce */
.cl-faq__icon {
    position: relative; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
    background: var(--cl-blue-bg);
    transition: transform .25s var(--cl-ease), background-color .2s var(--cl-ease);
}
.cl-faq__icon::before, .cl-faq__icon::after {
    content: ""; position: absolute; background: var(--cl-accent); border-radius: 2px;
    transition: transform .25s var(--cl-ease), opacity .25s var(--cl-ease);
}
.cl-faq__icon::before { top: 16px; left: 9px; width: 16px; height: 2px; }
.cl-faq__icon::after  { top: 9px; left: 16px; width: 2px; height: 16px; }
.cl-faq__q[aria-expanded="true"] .cl-faq__icon { transform: rotate(180deg); }
.cl-faq__q[aria-expanded="true"] .cl-faq__icon::after { transform: scaleY(0); opacity: 0; }

.cl-faq__a { overflow: hidden; max-height: 0; transition: max-height .28s var(--cl-ease); }
/* Odpoved zarovnana pod text otazky: levy padding = horizontalni padding + odsazeni o ikonu.
   Hairline oddelovac nad odpovedi (jen kdyz je otevreno). */
.cl-faq__a-inner {
    padding: var(--cl-s4) var(--cl-faq-pad) var(--cl-s6);
    padding-left: calc(var(--cl-faq-pad) + var(--cl-faq-q-indent));
    margin: 0 var(--cl-faq-pad);
    border-top: 1px solid var(--cl-hairline-cool);
    color: var(--cl-body); max-width: 68ch; line-height: 1.7;
    font-family: var(--cl-font-body);
}
.cl-faq__a-inner p { margin: 0; }
.cl-faq[data-cl-faq-ready] .cl-faq__a { max-height: 0; }
.cl-faq[data-cl-faq-ready] .cl-faq__a.is-open { max-height: var(--cl-faq-h, 600px); }
.cl-faq-more { margin-top: var(--cl-s12); }

/* Na uzsich obrazovkach (tablet/mobil) zpet na jeden sloupec */
@media (max-width: 760px) {
    .cl-faq { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .cl-faq { --cl-faq-pad: 18px; }
    /* Na mobilu odpoved nezasouvat pod ikonu — citelnejsi cely radek */
    .cl-faq__a-inner {
        padding-left: var(--cl-faq-pad);
        margin: 0 var(--cl-faq-pad);
    }
    .cl-faq__q { font-size: 1rem; }
}

/* ============================================================
   CTA PÁS — gradient / glass na tmavém
   ============================================================ */
.cl-cta__inner { text-align: center; }
.cl-cta__inner > * + * { margin-top: var(--cl-s6); }
.cl-cta__h2 {
    max-width: 22ch; margin-inline: auto;
    font-size: clamp(2rem, 4vw, 2.75rem);   /* ~32–44px, hero-like */
    line-height: 1.08;
    letter-spacing: -0.03em;
}
.cl-cta__text {
    max-width: 56ch; margin-inline: auto;
    color: var(--cl-body);
    font-size: clamp(1.1875rem, 1.6vw, 1.25rem);  /* ~19–20px */
    line-height: 1.6;
}
.cl-cta__btns { justify-content: center; margin-top: var(--cl-s10); }

.cl-cta--dark {
    position: relative;
    background:
        radial-gradient(70% 130% at 12% 0%, rgba(91,141,217,.5), transparent 55%),
        radial-gradient(60% 120% at 100% 100%, rgba(139,114,201,.5), transparent 55%),
        linear-gradient(135deg, #2A2D34 0%, #20232b 100%);
    border-radius: 0;
    overflow: hidden;
}
/* Zaverecny CTA pas — vzdusny, hero-like (96–120px vertikalni padding) */
.cl-cta--dark .cl-cta__inner { padding-block: 96px; }
@media (min-width: 768px) { .cl-cta--dark .cl-cta__inner { padding-block: 120px; } }
.cl-cta--dark .cl-cta__btns .cl-btn { padding: 16px 30px; font-size: 1.0625rem; }
.cl-cta--dark .cl-cta__h2 { color: #fff; }
.cl-cta--dark .cl-cta__text { color: rgba(255, 255, 255, .85); }

/* ------------------------------------------------------------------
   Zaverecny tmavy CTA pas — roztazeni do sirky na velkych obrazovkach.
   Misto uzkeho vycentrovaneho sloupce (h2 22ch / text 56ch) prejde
   na PC na dvousloupcove rozlozeni: nadpis vlevo, text + tlacitka
   vpravo. Lepsi vyuziti --cl-max (1480px), zadne zbytecne zalamovani.
   Mobil/tablet zustava 1 sloupec, vycentrovany (zadeni: 1 sloupec).
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
    .cl-cta--dark .cl-cta__inner {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        column-gap: clamp(48px, 6vw, 96px);
        row-gap: 0;
        align-items: center;
        text-align: left;
    }
    /* V gridu nepouzivame vertikalni margin mezi sourozenci. */
    .cl-cta--dark .cl-cta__inner > * + * { margin-top: 0; }

    /* Nadpis: levy sloupec, roztazeny (zrusi se uzky 22ch limit). */
    .cl-cta--dark .cl-cta__h2 {
        grid-column: 1;
        grid-row: 1 / span 2;
        align-self: center;
        max-width: 18ch;
        margin-inline: 0;
        font-size: clamp(2.25rem, 3.2vw, 3rem);
    }
    /* Text: pravy sloupec, sirsi nez 56ch, zarovnany vlevo. */
    .cl-cta--dark .cl-cta__text {
        grid-column: 2;
        grid-row: 1;
        max-width: none;
        margin-inline: 0;
        margin-bottom: var(--cl-s8);
    }
    /* Tlacitka: pravy sloupec pod textem, zarovnana vlevo. */
    .cl-cta--dark .cl-cta__btns {
        grid-column: 2;
        grid-row: 2;
        justify-content: flex-start;
        margin-top: 0;
    }
}


.cl-btn-on-dark {
    background: #fff; color: var(--cl-ink); box-shadow: var(--cl-shadow-2);
}
.cl-btn-on-dark:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255,255,255,.25); background: #fff; }
.cl-btn-ghost-on-dark {
    background: rgba(255, 255, 255, .08);
    color: #fff;
    border-color: rgba(255, 255, 255, .4);
    backdrop-filter: blur(4px);
}
.cl-btn-ghost-on-dark:hover { border-color: #fff; background: rgba(255, 255, 255, .16); transform: translateY(-2px); }

/* ============================================================
   IKONOVÝ CHIP (pastel)
   ============================================================ */
.cl-chip {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    width: 58px; height: 58px;
    border-radius: var(--cl-r-card-sm);
    font-size: 1.5rem; line-height: 1;
    color: var(--cl-blue);
    background: var(--cl-blue-bg);
    box-shadow: var(--cl-shadow-1);
}
.cl-chip--sklad   { color: var(--cl-peach); background: var(--cl-peach-bg); }
.cl-chip--finance { color: var(--cl-sagec); background: var(--cl-sage-bg); }
.cl-chip--banky   { color: var(--cl-sagec); background: var(--cl-sage-bg); }
.cl-chip--adresar { color: var(--cl-blue);  background: var(--cl-blue-bg); }
.cl-chip--nabidky { color: var(--cl-lav);   background: var(--cl-lav-bg); }
.cl-chip--sm { width: 44px; height: 44px; border-radius: 12px; font-size: 1.125rem; }

.cl-feature__icon { margin-bottom: var(--cl-s2); }

/* mockup chip-row */
.cl-mockup__chip-row { display: flex; align-items: center; gap: var(--cl-s3); margin-bottom: var(--cl-s4); }
.cl-feature__mockup-body .cl-mockup__chip-row + * { margin-top: 0; }

/* ============================================================
   STEPS — „Jak to funguje" (číslované karty + spojnice)
   ============================================================ */
/* .cl-steps-head: rytmus a max-sirka resi jednotna pravidla hlavicek vyse */
.cl-steps {
    position: relative;
    display: grid; grid-template-columns: 1fr; gap: var(--cl-s6);
    counter-reset: cl-step;
    align-items: stretch;
}
.cl-step {
    position: relative;
    display: flex; flex-direction: column; gap: var(--cl-s3);
    height: 100%;
    min-height: 240px;
    padding: var(--cl-s8);
    background: var(--cl-card);
    border: 1px solid var(--cl-hairline-cool);
    border-radius: var(--cl-r-card);
    box-shadow: var(--cl-shadow-1);
    transition: transform .24s var(--cl-ease), box-shadow .24s var(--cl-ease);
}
.cl-step::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: var(--cl-r-card);
    padding: 1.5px;
    background: linear-gradient(135deg, var(--cl-blue-soft), var(--cl-lav-soft));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .24s var(--cl-ease); pointer-events: none;
}
.cl-step:hover { transform: translateY(-5px); box-shadow: var(--cl-shadow-3); }
.cl-step:hover::after { opacity: 1; }
.cl-step__num {
    counter-increment: cl-step;
    display: inline-flex; align-items: center;
    font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; color: var(--cl-muted);
}
.cl-step__num::before {
    content: counter(cl-step, decimal-leading-zero);
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 14px;
    background: linear-gradient(135deg, var(--cl-blue), var(--cl-lav));
    color: #fff; font-family: var(--cl-font-display);
    font-size: 1.0625rem; font-weight: 700; letter-spacing: 0;
    box-shadow: var(--cl-shadow-1);
}
.cl-step:nth-child(2) .cl-step__num::before { background: linear-gradient(135deg, var(--cl-sagec), var(--cl-blue)); }
.cl-step:nth-child(3) .cl-step__num::before { background: linear-gradient(135deg, var(--cl-lav), var(--cl-peach)); }
.cl-step__title { font-family: var(--cl-font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--cl-ink); }
.cl-step__text { color: var(--cl-body); }
.cl-step__icon {
    position: absolute; top: var(--cl-s8); right: var(--cl-s8);
    font-size: 1.375rem; color: var(--cl-blue-soft); opacity: .85;
}
@media (min-width: 768px) { .cl-steps { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   KVALITATIVNÍ SROVNÁNÍ — bez CORE / s CORE
   ============================================================ */
/* .cl-compare-head: rytmus a max-sirka resi jednotna pravidla hlavicek vyse */
.cl-compare {
    display: grid; grid-template-columns: 1fr; gap: var(--cl-s6);
    align-items: stretch;
}
.cl-compare__col {
    display: flex; flex-direction: column;
    height: 100%;
    border-radius: var(--cl-r-card);
    padding: var(--cl-s8);
    border: 1px solid var(--cl-hairline-cool);
}
.cl-compare__col--bad {
    background: var(--cl-card);
    box-shadow: var(--cl-shadow-1);
}
.cl-compare__col--good {
    background:
        radial-gradient(120% 80% at 100% 0%, var(--cl-blue-bg), transparent 60%),
        radial-gradient(100% 90% at 0% 100%, var(--cl-lav-bg), transparent 60%),
        var(--cl-card);
    border-color: var(--cl-blue-soft);
    box-shadow: var(--cl-shadow-2);
}
.cl-compare__label {
    display: inline-flex; align-items: center; gap: var(--cl-s2);
    font-family: var(--cl-font-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em;
    margin-bottom: var(--cl-s6);
}
.cl-compare__col--bad .cl-compare__label { color: var(--cl-muted); }
.cl-compare__col--good .cl-compare__label { color: var(--cl-accent-ink); }
.cl-compare__label i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 10px; font-size: 0.9375rem;
}
.cl-compare__col--bad .cl-compare__label i { background: #F0EDE8; color: var(--cl-muted); }
.cl-compare__col--good .cl-compare__label i { background: var(--cl-blue-bg); color: var(--cl-blue); }
.cl-compare__list { display: flex; flex-direction: column; gap: var(--cl-s4); }
.cl-compare__row {
    display: flex; align-items: flex-start; gap: var(--cl-s3);
    line-height: 1.5; color: var(--cl-body);
}
.cl-compare__row i { flex: 0 0 auto; margin-top: 4px; font-size: 0.9375rem; }
.cl-compare__col--bad .cl-compare__row i { color: var(--cl-peach-ink); }
.cl-compare__col--good .cl-compare__row i { color: var(--cl-sagec); }
.cl-compare__col--good .cl-compare__row { color: var(--cl-ink); }
@media (min-width: 880px) { .cl-compare { grid-template-columns: 1fr 1fr; gap: var(--cl-s6); } }

/* ============================================================
   ROADMAPA — 3 vrstvy (vizuální)
   ============================================================ */
/* .cl-roadmap-head: rytmus a max-sirka resi jednotna pravidla hlavicek vyse */
.cl-roadmap { display: grid; grid-template-columns: 1fr; gap: var(--cl-s6); align-items: stretch; }
.cl-roadmap__col {
    position: relative;
    display: flex; flex-direction: column; gap: var(--cl-s4);
    height: 100%;
    padding: var(--cl-s8);
    border-radius: var(--cl-r-card);
    background: var(--cl-card);
    border: 1px solid var(--cl-hairline-cool);
    box-shadow: var(--cl-shadow-1);
}
.cl-roadmap__col::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
    border-radius: var(--cl-r-card) var(--cl-r-card) 0 0;
}
.cl-roadmap__col--now::before    { background: linear-gradient(90deg, var(--cl-sagec), var(--cl-sage-soft)); }
.cl-roadmap__col--soon::before   { background: linear-gradient(90deg, var(--cl-blue), var(--cl-blue-soft)); }
.cl-roadmap__col--later::before  { background: linear-gradient(90deg, var(--cl-lav), var(--cl-lav-soft)); }
.cl-roadmap__badge {
    display: inline-flex; align-items: center; gap: var(--cl-s2);
    align-self: flex-start;
    padding: 6px 14px; border-radius: 999px;
    font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em;
}
.cl-roadmap__col--now   .cl-roadmap__badge { background: var(--cl-sage-bg); color: var(--cl-sage-ink); }
.cl-roadmap__col--soon  .cl-roadmap__badge { background: var(--cl-blue-bg); color: var(--cl-blue-ink); }
.cl-roadmap__col--later .cl-roadmap__badge { background: var(--cl-lav-bg); color: var(--cl-lav-ink); }
.cl-roadmap__title { font-family: var(--cl-font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--cl-ink); }
.cl-roadmap__list { display: flex; flex-direction: column; gap: var(--cl-s3); }
.cl-roadmap__list li {
    display: flex; align-items: flex-start; gap: var(--cl-s3);
    color: var(--cl-body); line-height: 1.5; font-size: 0.9375rem;
}
.cl-roadmap__list li i { flex: 0 0 auto; margin-top: 4px; font-size: 0.875rem; }
.cl-roadmap__col--now   .cl-roadmap__list li i { color: var(--cl-sagec); }
.cl-roadmap__col--soon  .cl-roadmap__list li i { color: var(--cl-blue); }
.cl-roadmap__col--later .cl-roadmap__list li i { color: var(--cl-lav); }
.cl-roadmap__note {
    margin-top: var(--cl-s12);
    text-align: center; font-size: 1.0625rem; color: var(--cl-body);
}
.cl-roadmap__note strong { color: var(--cl-accent-ink); }
@media (min-width: 920px) { .cl-roadmap { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }

/* ============================================================
   REVEAL ON SCROLL (staggered)
   ============================================================ */
[data-cl-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s var(--cl-ease), transform .6s var(--cl-ease);
    transition-delay: var(--cl-reveal-delay, 0ms);
    will-change: opacity, transform;
}
[data-cl-reveal].is-revealed { opacity: 1; transform: none; }

/* jemný oddělovač */
.cl-rule { height: 1px; background: var(--cl-hairline); border: 0; margin-block: 0; }

/* ============================================================
   DROBEČKOVÁ NAVIGACE (breadcrumbs)
   ============================================================ */
.cl-breadcrumb {
    width: 100%;
    padding-block: var(--cl-s6) 0;
}
.cl-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cl-s2);
    list-style: none;
    margin: 0;
    padding-top: var(--cl-s4);
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
    color: var(--cl-muted);
}
.cl-breadcrumb__item {
    display: inline-flex;
    align-items: center;
    gap: var(--cl-s2);
}
.cl-breadcrumb__link {
    color: var(--cl-muted);
    text-decoration: none;
    border-radius: 4px;
    transition: color .15s ease;
}
.cl-breadcrumb__link:hover { color: var(--cl-ink); text-decoration: underline; }
.cl-breadcrumb__sep { color: var(--cl-blue-soft); }
.cl-breadcrumb__current { color: var(--cl-ink); font-weight: 600; }

/* ============================================================
   KONTAKT — karty (o-nas)
   ============================================================ */
.cl-contact {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cl-s4);
}
@media (min-width: 600px) { .cl-contact { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .cl-contact { grid-template-columns: repeat(4, 1fr); } }
.cl-contact__card {
    display: flex;
    flex-direction: column;
    gap: var(--cl-s2);
    background: var(--cl-card);
    border: 1px solid var(--cl-hairline-cool);
    border-radius: var(--cl-r-card-sm);
    box-shadow: var(--cl-shadow-1);
    padding: var(--cl-s6);
    transition: box-shadow .2s var(--cl-ease), border-color .2s var(--cl-ease), transform .2s var(--cl-ease);
}
.cl-contact__card:hover {
    box-shadow: var(--cl-shadow-2);
    border-color: var(--cl-blue-soft);
    transform: translateY(-2px);
}
.cl-contact__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--cl-blue-bg); color: var(--cl-blue);
    font-size: 1.0625rem; margin-bottom: var(--cl-s2);
}
.cl-contact__card:nth-child(2n) .cl-contact__icon { background: var(--cl-lav-bg); color: var(--cl-lav); }
.cl-contact__card:nth-child(3n) .cl-contact__icon { background: var(--cl-sage-bg); color: var(--cl-sagec); }
.cl-contact__card:nth-child(4n) .cl-contact__icon { background: var(--cl-peach-bg); color: var(--cl-peach); }
.cl-contact__label {
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--cl-muted);
}
.cl-contact__value {
    margin: 0; color: var(--cl-ink); font-weight: 600; line-height: 1.6;
}
.cl-contact__value a { color: var(--cl-accent-ink); text-decoration: none; word-break: break-word; }
.cl-contact__value a:hover { text-decoration: underline; }
.cl-contact__muted { color: var(--cl-muted); font-weight: 400; font-size: 0.9375rem; }
.cl-contact__note {
    margin-top: var(--cl-s8); color: var(--cl-body); max-width: 60ch;
}
.cl-contact__note a { color: var(--cl-accent-ink); }

/* ============================================================
   FORMULÁŘ — předběžný přístup (early-access)
   ============================================================ */
.cl-form {
    width: 100%;
    max-width: 860px;
    margin-inline: auto;
    background: var(--cl-card);
    border: 1px solid var(--cl-hairline-cool);
    border-radius: var(--cl-r-card);
    box-shadow: var(--cl-shadow-1);
    padding: var(--cl-s8);
}
@media (min-width: 768px) { .cl-form { padding: var(--cl-s12); } }

/* Honeypot — kompletně skryté i pro asistivní technologie, mimo tab pořadí. */
.cl-form__hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
}

.cl-form__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cl-s6);
}
@media (min-width: 640px) { .cl-form__grid { grid-template-columns: repeat(2, 1fr); } }

.cl-field { display: flex; flex-direction: column; gap: var(--cl-s2); min-width: 0; }
.cl-field--full { grid-column: 1 / -1; }
.cl-field__label {
    font-size: 0.875rem; font-weight: 700; color: var(--cl-ink);
}
.cl-field__req { color: var(--cl-peach-ink); }
.cl-field__hint { font-size: 0.8125rem; color: var(--cl-muted); }
.cl-field__input {
    width: 100%;
    font-family: var(--cl-font-body);
    font-size: 1rem; color: var(--cl-ink);
    background: var(--cl-bg, #fff);
    border: 1.5px solid var(--cl-hairline-cool);
    border-radius: var(--cl-r-input);
    padding: 0.7rem 0.9rem;
    transition: border-color .18s var(--cl-ease), box-shadow .18s var(--cl-ease);
}
.cl-field__input::placeholder { color: var(--cl-muted); opacity: .8; }
.cl-field__input:hover { border-color: var(--cl-blue-soft); }
.cl-field__input:focus-visible {
    outline: none;
    border-color: var(--cl-blue);
    box-shadow: 0 0 0 3px var(--cl-blue-bg);
}
.cl-field__textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
select.cl-field__input { cursor: pointer; appearance: none; -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--cl-muted) 50%),
                      linear-gradient(135deg, var(--cl-muted) 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(50% - 2px), calc(100% - 14px) calc(50% - 2px);
    background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
    padding-right: 2.4rem;
}

/* Checkbox GDPR — vlastní vzhled */
.cl-field__check {
    display: grid; grid-template-columns: auto 1fr; gap: var(--cl-s4); align-items: start;
    cursor: pointer; color: var(--cl-body); line-height: 1.6;
}
.cl-field__check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cl-field__check-box {
    margin-top: 2px;
    width: 22px; height: 22px; flex: 0 0 auto;
    border: 1.5px solid var(--cl-hairline-cool);
    border-radius: 6px; background: #fff;
    position: relative;
    transition: border-color .18s var(--cl-ease), background-color .18s var(--cl-ease);
}
.cl-field__check-box::after {
    content: ""; position: absolute; left: 7px; top: 3px;
    width: 6px; height: 11px;
    border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0); transform-origin: center;
    transition: transform .18s var(--cl-ease);
}
.cl-field__check input:checked + .cl-field__check-box {
    background: var(--cl-blue); border-color: var(--cl-blue);
}
.cl-field__check input:checked + .cl-field__check-box::after { transform: rotate(45deg) scale(1); }
.cl-field__check input:focus-visible + .cl-field__check-box {
    box-shadow: 0 0 0 3px var(--cl-blue-bg);
}
.cl-field__check-text a { color: var(--cl-accent-ink); }

.cl-form__actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--cl-s6);
    margin-top: var(--cl-s8);
}
.cl-form__status { margin: 0; font-size: 0.9375rem; font-weight: 600; }
.cl-form__status.is-error { color: var(--cl-peach-ink); }
.cl-form__status.is-ok { color: var(--cl-sagec); }
.cl-form__reassure {
    margin-top: var(--cl-s6); font-size: 0.875rem; color: var(--cl-muted); line-height: 1.6;
    max-width: 64ch;
}

/* Pole označené jako nevalidní (nastavuje JS) */
.cl-field__input[aria-invalid="true"] { border-color: var(--cl-peach); }
.cl-field__input[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px var(--cl-peach-bg); }

/* ============================================================
   MOTION — respekt reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .cl-btn:active { transform: none; }
    .cl-btn-primary:hover, .cl-btn-secondary:hover, .cl-btn-on-dark:hover, .cl-btn-ghost-on-dark:hover { transform: none; }
    [data-cl-reveal] { opacity: 1; transform: none; transition: none; }
    .cl-module-card:hover, .cl-step:hover { transform: none; }
    .cl-blob--anim { animation: none; }
}

/* ============================================================
   PŘIHLAŠOVACÍ MODAL (nový landing) — pastel/glass styl
   Komponenta: public/site/components/login-modal.php
   JS:         public/js/core-login.js
   ============================================================ */

html.cl-login-open { overflow: hidden; }

.cl-login-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--cl-s6);
    background: rgba(27, 29, 34, .42);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    backdrop-filter: blur(8px) saturate(120%);
    animation: cl-login-fade .22s var(--cl-ease);
}
.cl-login-overlay[hidden] { display: none; }

@keyframes cl-login-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.cl-login-card {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: calc(100dvh - 2 * var(--cl-s6));
    overflow-y: auto;
    padding: clamp(28px, 5vw, 48px);
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: var(--cl-r-card);
    box-shadow: var(--cl-shadow-3);
    animation: cl-login-pop .26s var(--cl-ease);
}

@keyframes cl-login-pop {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.cl-login-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cl-hairline);
    border-radius: 50%;
    background: var(--cl-card);
    color: var(--cl-muted);
    font-size: 1rem;
    cursor: pointer;
    transition: background .2s var(--cl-ease), color .2s var(--cl-ease), transform .16s var(--cl-ease);
}
.cl-login-close:hover { background: var(--cl-soft); color: var(--cl-ink); transform: rotate(90deg); }
.cl-login-close:focus-visible { outline: 2px solid var(--cl-blue); outline-offset: 2px; }

/* ---- Hlavička ---- */
.cl-login-head { text-align: center; margin-bottom: var(--cl-s8); }

.cl-login-badge {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--cl-s4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--cl-blue) 0%, var(--cl-lav) 100%);
    box-shadow: var(--cl-glow);
}
.cl-login-badge--shield {
    background: linear-gradient(135deg, var(--cl-sagec) 0%, var(--cl-blue) 100%);
}

.cl-login-eyebrow { margin-bottom: var(--cl-s2); }

.cl-login-title {
    font-family: var(--cl-font-display);
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--cl-ink);
    margin-bottom: var(--cl-s2);
}

.cl-login-sub {
    font-size: 1rem;
    color: var(--cl-muted);
    line-height: 1.5;
    max-width: 36ch;
    margin: 0 auto;
}

/* ---- Formulář ---- */
.cl-login-form { display: flex; flex-direction: column; gap: var(--cl-s4); }
.cl-login-form[hidden] { display: none; }
.cl-login-field[hidden] { display: none; }

.cl-login-field { display: flex; flex-direction: column; gap: var(--cl-s2); text-align: left; }

.cl-login-field label {
    font-family: var(--cl-font-body);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--cl-ink);
}

.cl-login-field input {
    width: 100%;
    padding: 14px 16px;
    font-family: var(--cl-font-body);
    font-size: 1rem;
    color: var(--cl-ink);
    background: var(--cl-card);
    border: 1.5px solid var(--cl-hairline);
    border-radius: var(--cl-r-input);
    transition: border-color .18s var(--cl-ease), box-shadow .18s var(--cl-ease);
}
.cl-login-field input::placeholder { color: var(--cl-muted); opacity: .7; }
.cl-login-field input:focus {
    outline: none;
    border-color: var(--cl-blue);
    box-shadow: 0 0 0 4px var(--cl-blue-bg);
}

/* Heslo + toggle */
.cl-login-pass-wrap { position: relative; }
.cl-login-pass-wrap input { padding-right: 48px; }
.cl-login-pass-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--cl-muted);
    cursor: pointer;
    border-radius: 8px;
    transition: color .18s var(--cl-ease), background .18s var(--cl-ease);
}
.cl-login-pass-toggle:hover { color: var(--cl-ink); background: var(--cl-soft); }
.cl-login-pass-toggle:focus-visible { outline: 2px solid var(--cl-blue); outline-offset: 1px; }

/* Captcha */
.cl-login-captcha-wrap { display: flex; gap: var(--cl-s2); }
.cl-login-captcha-wrap input { flex: 1; }
.cl-login-captcha-refresh {
    flex: 0 0 auto;
    width: 50px;
    border: 1.5px solid var(--cl-hairline);
    border-radius: var(--cl-r-input);
    background: var(--cl-card);
    color: var(--cl-muted);
    cursor: pointer;
    transition: color .18s var(--cl-ease), border-color .18s var(--cl-ease);
}
.cl-login-captcha-refresh:hover { color: var(--cl-blue-ink); border-color: var(--cl-blue-soft); }
.cl-login-captcha-refresh:focus-visible { outline: 2px solid var(--cl-blue); outline-offset: 2px; }

/* CTA */
.cl-login-submit { width: 100%; padding: 15px 24px; font-size: 1.0625rem; margin-top: var(--cl-s1); }

.cl-login-foot-note {
    text-align: center;
    font-size: .875rem;
    color: var(--cl-muted);
    margin-top: var(--cl-s1);
}
.cl-login-foot-note a { color: var(--cl-blue-ink); font-weight: 600; }

/* Odkaz "Zapomneli jste heslo?" — zarovnany vpravo pod polem hesla. */
.cl-login-forgot-row {
    display: flex;
    justify-content: flex-end;
    margin-top: calc(-1 * var(--cl-s2));
}
.cl-login-forgot {
    font-size: .875rem;
    font-weight: 600;
    color: var(--cl-blue-ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .18s var(--cl-ease), color .18s var(--cl-ease);
}
.cl-login-forgot:hover { border-bottom-color: var(--cl-blue-soft); }
.cl-login-forgot:focus-visible { outline: 2px solid var(--cl-blue); outline-offset: 2px; border-radius: 2px; }

/* Chyba / info */
.cl-login-error {
    padding: 12px 14px;
    font-size: .9375rem;
    color: var(--cl-error);
    background: #FCEDEE;
    border: 1px solid #F3C9CD;
    border-radius: var(--cl-r-input);
    text-align: left;
}
.cl-login-error[hidden] { display: none; }

.cl-login-info {
    padding: 10px 14px;
    font-size: .875rem;
    color: var(--cl-blue-ink);
    background: var(--cl-blue-bg);
    border: 1px solid var(--cl-blue-soft);
    border-radius: var(--cl-r-input);
    text-align: center;
}
.cl-login-info[hidden] { display: none; }

/* ---- 2FA krok ---- */
.cl-login-2fa-head { text-align: center; margin-bottom: var(--cl-s2); }
.cl-login-2fa-head .cl-login-badge { width: 56px; height: 56px; font-size: 1.375rem; }
.cl-login-2fa-head .cl-login-title { font-size: 1.375rem; }
.cl-login-2fa-head .cl-login-sub { font-size: .9375rem; }

.cl-login-2fa-methods { display: flex; gap: var(--cl-s2); flex-wrap: wrap; }
.cl-login-2fa-method {
    flex: 1 1 90px;
    padding: 10px 12px;
    font-family: var(--cl-font-body);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--cl-ink);
    background: var(--cl-card);
    border: 1.5px solid var(--cl-hairline);
    border-radius: var(--cl-r-btn);
    cursor: pointer;
    transition: all .18s var(--cl-ease);
}
.cl-login-2fa-method[hidden] { display: none; }
.cl-login-2fa-method:hover { border-color: var(--cl-blue-soft); }
.cl-login-2fa-method.is-active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--cl-blue) 0%, var(--cl-lav) 100%);
    box-shadow: var(--cl-shadow-1);
}
.cl-login-2fa-method:focus-visible { outline: 2px solid var(--cl-blue); outline-offset: 2px; }

.cl-login-2fa-code {
    letter-spacing: 4px;
    text-align: center;
    font-size: 1.25rem !important;
    font-variant-numeric: tabular-nums;
}

.cl-login-2fa-cancel {
    width: 100%;
    padding: 12px;
    font-family: var(--cl-font-body);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--cl-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: var(--cl-r-btn);
    transition: color .18s var(--cl-ease), background .18s var(--cl-ease);
}
.cl-login-2fa-cancel:hover { color: var(--cl-ink); background: var(--cl-soft); }
.cl-login-2fa-cancel:focus-visible { outline: 2px solid var(--cl-blue); outline-offset: 2px; }

/* ---- Responsivita ---- */
@media (max-width: 560px) {
    .cl-login-overlay { padding: var(--cl-s3); align-items: flex-start; }
    .cl-login-card { padding: 28px 22px; margin-top: var(--cl-s6); }
}

/* ---- Respekt reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
    .cl-login-overlay, .cl-login-card { animation: none; }
    .cl-login-close:hover { transform: none; }
}