/* ==========================================================================
   Dimi landing: sdílené styly stránek /, /lektori a /start
   --------------------------------------------------------------------------
   Vlastní CSS balíčku, nezávislé na app.css aplikace. Tokeny odpovídají
   motivu, který dnes vidí nepřihlášený návštěvník (B&W, plochý podklad).
   Světlý režim je výchozí, tmavý se zapne podle systému (prefers-color-scheme)
   nebo tlačítkem v liště (třída .dark / .light na <html>).
   ========================================================================== */

@font-face {
    font-family: 'League Spartan';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('../fonts/league-spartan-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'League Spartan';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('../fonts/league-spartan-latin.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;
}

/* ── Tokeny: světlý režim ─────────────────────────────────────────────── */
:root {
    color-scheme: light;

    --bg: #EEEEF1;
    --text: #1B1A2E;
    --text-muted: #4A4960;
    --text-subtle: #5B5971;

    /* Akcent = inkoust (B&W motiv). --accent-rgb je pro průhlednosti: rgb(var(--accent-rgb) / .1) */
    --accent: #1B1A2E;
    --accent-rgb: 27 26 46;
    --accent-text: #1B1A2E;
    --accent-fg: #FFFFFF;
    --ink: #1B1A2E;
    --ink-fg: #FFFFFF;
    --ink-shadow: 0 12px 26px -12px rgba(20, 19, 31, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    --ink-shadow-hover: 0 18px 34px -14px rgba(20, 19, 31, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.14);

    /* Hero gradient: akcent → broskev → nebe */
    --peach: #E89A7E;
    --sky: #6FAEC0;
    --hero-gradient: linear-gradient(120deg, var(--accent), var(--peach) 55%, var(--sky));

    /* Stavy (fixní) a jejich čitelné textové varianty */
    --status-ok: #7BAE99;
    --status-krize: #E08D7F;
    --status-ok-text: #406B5C;
    --status-krize-text: #9C5144;
    --status-pozor-text: #7A6140;

    /* Pastelové doplňky z palety Dimi */
    --plum-tile-bg: rgba(219, 171, 204, 0.30);
    --plum-tile-fg: #7A3F66;
    --sand-avatar-bg: rgba(232, 212, 184, 0.50);
    --sand-avatar-fg: #5F4E32;
    --sage: #7BAE99;

    /* Povrchy a sklo */
    --surface-strong: rgba(255, 255, 255, 0.75);
    --border: rgba(255, 255, 255, 0.70);
    --glass-bg-panel: rgba(255, 255, 255, 0.55);
    --glass-bg-heavy: rgba(255, 255, 255, 0.70);
    --glass-bg-light: rgba(255, 255, 255, 0.40);
    --glass-bg-input: rgba(255, 255, 255, 0.65);
    --glass-border: rgba(255, 255, 255, 0.70);
    --glass-border-luminous: rgba(255, 255, 255, 0.85);
    --glass-border-bottom: rgba(255, 255, 255, 0.18);
    --glass-specular: rgba(255, 255, 255, 0.6);
    --glass-shadow-outer: rgba(60, 50, 110, 0.08);
    --glass-edge-top: rgba(255, 255, 255, 0.7);
    --glass-edge-left: rgba(255, 255, 255, 0.4);
    --glass-edge-bottom: rgba(255, 255, 255, 0.08);
    --glass-edge-right: rgba(255, 255, 255, 0.15);
    --shadow-glass:
        0 30px 80px -24px rgba(20, 19, 31, 0.28),
        0 8px 24px -6px rgba(20, 19, 31, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(20, 19, 31, 0.05);

    /* Zaoblení */
    --radius-sm: 12px;   /* pole formulářů */
    --radius-card: 15px; /* karty, panely */
    --radius-md: 32px;   /* řádky v ukázkách, dlaždice ikon */
    --radius-pill: 999px;

    --font: 'League Spartan', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
}

/* ── Tokeny: tmavý režim (systém, pokud návštěvník nepřepnul na světlý) ── */
@media (prefers-color-scheme: dark) {
    :root:not(.light) {
        color-scheme: dark;
        --bg: #121216;
        --text: #F4EEE7;
        --text-muted: #BEBDD3;
        --text-subtle: #B0AFC6;
        --accent: #F4EEE7;
        --accent-rgb: 244 238 231;
        --accent-text: #E6E1DA;
        --accent-fg: #0E0D17;
        --ink: #F4EEE7;
        --ink-fg: #14131F;
        --ink-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.7);
        --ink-shadow-hover: 0 18px 34px -14px rgba(0, 0, 0, 0.75);
        --peach: #EFA988;
        --status-ok-text: #B5D9C9;
        --status-krize-text: #F4C7C0;
        --status-pozor-text: #E8D4B8;
        --plum-tile-bg: rgba(204, 143, 186, 0.20);
        --plum-tile-fg: #DBABCC;
        --sand-avatar-bg: rgba(217, 190, 147, 0.30);
        --sand-avatar-fg: #E8D4B8;
        --surface-strong: rgba(255, 255, 255, 0.10);
        --border: rgba(255, 255, 255, 0.12);
        --glass-bg-panel: rgba(255, 255, 255, 0.06);
        --glass-bg-heavy: rgba(255, 255, 255, 0.10);
        --glass-bg-light: rgba(255, 255, 255, 0.04);
        --glass-bg-input: rgba(255, 255, 255, 0.06);
        --glass-border: rgba(255, 255, 255, 0.12);
        --glass-border-luminous: rgba(255, 255, 255, 0.18);
        --glass-border-bottom: rgba(255, 255, 255, 0.05);
        --glass-specular: rgba(255, 255, 255, 0.2);
        --glass-shadow-outer: rgba(0, 0, 0, 0.45);
        --glass-edge-top: rgba(255, 255, 255, 0.18);
        --glass-edge-left: rgba(255, 255, 255, 0.08);
        --glass-edge-bottom: rgba(255, 255, 255, 0.03);
        --glass-edge-right: rgba(255, 255, 255, 0.05);
        --shadow-glass:
            0 40px 100px -28px rgba(0, 0, 0, 0.85),
            0 10px 30px -6px rgba(0, 0, 0, 0.55),
            inset 0 1px 0 rgba(255, 255, 255, 0.18),
            inset 0 -1px 0 rgba(0, 0, 0, 0.25);
    }
}

/* Stejné hodnoty, když návštěvník přepne na tmavý tlačítkem (site.js). */
:root.dark {
    color-scheme: dark;
    --bg: #121216;
    --text: #F4EEE7;
    --text-muted: #BEBDD3;
    --text-subtle: #B0AFC6;
    --accent: #F4EEE7;
    --accent-rgb: 244 238 231;
    --accent-text: #E6E1DA;
    --accent-fg: #0E0D17;
    --ink: #F4EEE7;
    --ink-fg: #14131F;
    --ink-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.7);
    --ink-shadow-hover: 0 18px 34px -14px rgba(0, 0, 0, 0.75);
    --peach: #EFA988;
    --status-ok-text: #B5D9C9;
    --status-krize-text: #F4C7C0;
    --status-pozor-text: #E8D4B8;
    --plum-tile-bg: rgba(204, 143, 186, 0.20);
    --plum-tile-fg: #DBABCC;
    --sand-avatar-bg: rgba(217, 190, 147, 0.30);
    --sand-avatar-fg: #E8D4B8;
    --surface-strong: rgba(255, 255, 255, 0.10);
    --border: rgba(255, 255, 255, 0.12);
    --glass-bg-panel: rgba(255, 255, 255, 0.06);
    --glass-bg-heavy: rgba(255, 255, 255, 0.10);
    --glass-bg-light: rgba(255, 255, 255, 0.04);
    --glass-bg-input: rgba(255, 255, 255, 0.06);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-border-luminous: rgba(255, 255, 255, 0.18);
    --glass-border-bottom: rgba(255, 255, 255, 0.05);
    --glass-specular: rgba(255, 255, 255, 0.2);
    --glass-shadow-outer: rgba(0, 0, 0, 0.45);
    --glass-edge-top: rgba(255, 255, 255, 0.18);
    --glass-edge-left: rgba(255, 255, 255, 0.08);
    --glass-edge-bottom: rgba(255, 255, 255, 0.03);
    --glass-edge-right: rgba(255, 255, 255, 0.05);
    --shadow-glass:
        0 40px 100px -28px rgba(0, 0, 0, 0.85),
        0 10px 30px -6px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}

/* ── Základ ───────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

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

/* Na telefonu je základ 15 px, stejně jako v aplikaci. */
@media (max-width: 767px) {
    html {
        font-size: 15px;
    }
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ul, figure {
    margin: 0;
}

h1, h2, h3 {
    font-size: inherit;
    font-weight: inherit;
}

ul {
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
    text-decoration: inherit;
}

button,
input {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

svg {
    display: block;
}

strong {
    font-weight: 600;
}

[hidden] {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Ikony (lucide): <svg class="icon" viewBox="0 0 24 24">…</svg> */
.icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.icon-xs { width: 0.875rem; height: 0.875rem; }
.icon-sm { width: 1rem; height: 1rem; }
.icon-lg { width: 1.5rem; height: 1.5rem; }
.icon-bold { stroke-width: 2.2; }

/* ── Rozložení ────────────────────────────────────────────────────────── */
.page {
    position: relative;
    min-height: 100vh;
    overflow-x: clip;
}

main {
    position: relative;
    z-index: 1;
}

.section {
    padding: 0 1rem 4rem;
}

.section-hero {
    padding-top: 8rem;
    padding-bottom: 4rem;
}

.container {
    max-width: 72rem;
    margin: 0 auto;
}
.container-lg { max-width: 64rem; }
.container-md { max-width: 56rem; }
.container-sm { max-width: 48rem; }

.text-center { text-align: center; }

.grid {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 640px) {
    .section {
        padding: 0 1.5rem 6rem;
    }
    .section-hero {
        padding-top: 10rem;
        padding-bottom: 5rem;
    }
    .grid-sm-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-sm-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
    .grid-md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .grid-lg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-lg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Typografie ───────────────────────────────────────────────────────── */
.eyebrow {
    margin-bottom: 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--accent-text);
}

.hero-title {
    margin-bottom: 1.5rem;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.025em;
}
.hero-title-sm { font-size: 1.875rem; }

.gradient-text {
    display: block;
    background-image: var(--hero-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .gradient-text {
        background: none;
        -webkit-text-fill-color: currentColor;
        color: var(--text);
    }
}

.hero-lead {
    max-width: 42rem;
    margin: 0 auto 2.5rem;
    font-size: 1.125rem;
    line-height: 1.625;
    color: var(--text-muted);
}

.note {
    margin-top: 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--text-subtle);
}

.section-title {
    margin-bottom: 1rem;
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 700;
    text-align: center;
}

.section-title-spaced { margin-bottom: 3rem; }

/* Cíl kotvy nezajede pod lištu */
.anchor { scroll-margin-top: 6rem; }

.section-lead {
    max-width: 42rem;
    margin: 0 auto 3rem;
    text-align: center;
    color: var(--text-muted);
}

.card-title {
    margin-bottom: 0.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
}

.card-text {
    font-size: 0.875rem;
    line-height: 1.625;
    color: var(--text-muted);
}

.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }

.text-link {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color 0.2s ease;
}
.text-link:hover { color: var(--accent-text); }

@media (min-width: 640px) {
    .hero-title { font-size: 3rem; line-height: 1; }
    .hero-lead { font-size: 1.25rem; line-height: 1.75rem; }
    .section-title { font-size: 2.25rem; line-height: 2.5rem; }
}

@media (min-width: 1024px) {
    .hero-title { font-size: 3.75rem; }
}

/* ── Liquid glass (přibližně jako v aplikaci) ─────────────────────────── */
.glass-light,
.glass-panel,
.glass-heavy {
    position: relative;
    isolation: isolate;
    border: 1px solid var(--glass-border);
    border-top-color: var(--glass-border-luminous);
    border-bottom-color: var(--glass-border-bottom);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    backdrop-filter: blur(12px) saturate(130%);
    transition: border-color 0.3s ease;
}

/* Odlesk hrany přes celou kartu (jako v aplikaci leží nad obsahem a lehce ho tlumí). */
.glass-light::before,
.glass-panel::before,
.glass-heavy::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--glass-edge-top) 0%, var(--glass-edge-left) 25%, transparent 50%, var(--glass-edge-right) 75%, var(--glass-edge-bottom) 100%);
    opacity: 0.7;
    mix-blend-mode: overlay;
    pointer-events: none;
    clip-path: inset(0);
    transition: opacity 0.3s ease;
}
.glass-light:hover::before,
.glass-panel:hover::before,
.glass-heavy:hover::before {
    opacity: 0.85;
}

.glass-light {
    background: var(--glass-bg-light);
    box-shadow: inset 0 1px 0 0 var(--glass-specular), 0 2px 12px var(--glass-shadow-outer);
}

.glass-panel {
    background: var(--glass-bg-panel);
    box-shadow: inset 0 1px 0 0 var(--glass-specular), 0 4px 24px var(--glass-shadow-outer);
}

.glass-heavy {
    background: var(--glass-bg-heavy);
    box-shadow: inset 0 1px 0 0 var(--glass-specular), 0 8px 32px var(--glass-shadow-outer);
}

.glass-panel:hover,
.glass-heavy:hover {
    border-top-color: var(--glass-specular);
}

.card {
    padding: 1.5rem;
    border-radius: var(--radius-card);
}

.panel {
    border-radius: var(--radius-card);
}

/* ── Tlačítka ─────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1.25rem;
    white-space: nowrap;
    color: var(--text);
    background: transparent;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn .icon { width: 15px; height: 15px; stroke-width: 1.8; }

/* Velké tlačítko v hero a na konci stránky */
.btn-lg {
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
}

.btn-block {
    justify-content: center;
    width: 100%;
}

/* Primární akce: plný inkoust, jedna na obrazovku */
.btn-cta {
    background: var(--ink);
    color: var(--ink-fg);
    box-shadow: var(--ink-shadow);
}
.btn-cta:hover {
    transform: translateY(-2px);
    background: color-mix(in oklab, var(--ink) 86%, var(--ink-fg));
    box-shadow: var(--ink-shadow-hover);
}

/* Sekundární akce: obrys, hover vyplní */
.btn-outline {
    border: 1.5px solid color-mix(in oklab, var(--ink) 40%, transparent);
    color: var(--text);
}
.btn-outline:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--ink-fg);
}

/* Skleněné tlačítko (ceník) */
.btn-glass {
    background: var(--surface-strong);
    border-color: var(--border);
    box-shadow: var(--shadow-glass);
}

.btn:focus-visible,
.icon-btn:focus-visible,
a:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

/* Kulaté ikonové tlačítko (přepínač režimu) */
.icon-btn {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface-strong);
    color: var(--text);
    transition: transform 0.15s ease;
}
.icon-btn:hover { transform: translateY(-1px); }
.icon-btn .icon { width: 18px; height: 18px; }

/* ── Horní lišta ──────────────────────────────────────────────────────── */
.site-nav {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 50;
    padding: 1.25rem 0;
    border: 1px solid transparent;
    transition: padding 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

/* site.js přidá .is-scrolled po 40 px scrollu */
.site-nav.is-scrolled {
    padding: 0.75rem 0;
    background: var(--glass-bg-heavy);
    border-color: var(--glass-border);
    border-bottom-color: var(--glass-border-bottom);
    box-shadow: inset 0 1px 0 0 var(--glass-specular), 0 8px 32px var(--glass-shadow-outer);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    backdrop-filter: blur(12px) saturate(130%);
}

.site-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1rem;
}

.site-nav-logo {
    display: flex;
    align-items: center;
    color: var(--text);
}
.site-nav-logo svg { width: 56px; height: auto; }

.site-nav-links {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.site-nav-link {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--text-muted);
    transition: color 0.2s ease;
}
.site-nav-link:hover { color: var(--text); }

/* Na telefonu skryté (odkazy a CTA v liště) */
.hide-mobile { display: none; }

@media (min-width: 640px) {
    .site-nav-inner { padding: 0 1.5rem; }
    .site-nav-links { gap: 1.5rem; }
    .hide-mobile { display: inline-flex; }
}

/* Přepínač režimu: v tmavém ukazuje slunce, ve světlém měsíc */
.theme-icon-sun { display: none; }
:root.dark .theme-icon-sun { display: block; }
:root.dark .theme-icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not(.light) .theme-icon-sun { display: block; }
    :root:not(.light) .theme-icon-moon { display: none; }
}

/* ── Patička ──────────────────────────────────────────────────────────── */
.site-footer {
    padding: 0 1rem 2rem;
}

.site-footer-divider {
    height: 1px;
    margin-bottom: 2rem;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
}

.site-footer-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--text-subtle);
}

.site-footer-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.site-footer-brand svg { width: 44px; height: auto; color: var(--text-muted); }

.site-footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1.5rem;
}
.site-footer-links a { transition: color 0.2s ease; }
.site-footer-links a:hover { color: var(--text); }

@media (min-width: 640px) {
    .site-footer { padding: 0 1.5rem 2rem; }
    .site-footer-row { flex-direction: row; }
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .hero-actions { flex-direction: row; }
}

/* Odznaky pod hero (4 dlaždice) */
.badges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.badge-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 1rem;
    border-radius: var(--radius-card);
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
}
.badge-tile .icon { color: var(--text-muted); }

@media (min-width: 640px) {
    .badges { gap: 1rem; }
}

@media (min-width: 1024px) {
    .badges { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Dlaždice s ikonou v kartách */
.icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1rem;
    border-radius: var(--radius-md);
    background: var(--plum-tile-bg);
    color: var(--plum-tile-fg);
}

.icon-tile-accent {
    width: 3rem;
    height: 3rem;
    background: rgb(var(--accent-rgb) / 0.15);
    color: var(--accent-text);
}
.icon-tile-accent .icon { width: 1.5rem; height: 1.5rem; }

.icon-tile-square { border-radius: var(--radius-card); margin-bottom: 0; }

.chip {
    display: inline-flex;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    background: rgb(var(--accent-rgb) / 0.1);
    color: var(--accent-text);
}

/* ── Benefity se střídavými ukázkami (/) ──────────────────────────────── */
.feature-list {
    display: grid;
    gap: 2.5rem;
}

.feature {
    display: grid;
    align-items: center;
    gap: 2rem;
}

.feature-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--accent-text);
}
.feature-eyebrow .icon { width: 1rem; height: 1rem; stroke-width: 2; }

.feature-title {
    margin-bottom: 1rem;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.feature-text {
    line-height: 1.625;
    color: var(--text-muted);
}

.mock {
    padding: 1.25rem;
    border-radius: var(--radius-card);
}

@media (min-width: 640px) {
    .feature-list { gap: 4rem; }
    .feature-title { font-size: 1.875rem; line-height: 2.25rem; }
    .mock { padding: 1.5rem; }
}

@media (min-width: 768px) {
    .feature {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3rem;
    }
    .feature-reverse > :first-child { order: 2; }
}

/* Ukázky z aplikace: čisté HTML, žádné screenshoty */
.mock-label {
    margin-bottom: 0.75rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    color: var(--text-subtle);
}

.mock-rows {
    display: grid;
    gap: 0.5rem;
}

.mock-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.mock-row-active { background: rgb(var(--accent-rgb) / 0.1); font-weight: 500; }
.mock-row-title { flex: 1; }

.dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--accent);
}
.dot-sage { background: var(--sage); }
.dot-sky { background: var(--sky); }

.tiny {
    font-size: 11px;
    line-height: 15px;
    color: var(--text-subtle);
}

.tag-krize {
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-pill);
    font-size: 11px;
    line-height: 15px;
    background: rgba(224, 141, 127, 0.15);
    color: var(--status-krize-text);
}

.mock-foot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--text-subtle);
}
.mock-foot .icon { width: 0.875rem; height: 0.875rem; }
.mock-foot-tight { margin-top: 0; }
.ok { color: var(--status-ok-text); }

.bubble-row-me {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

.bubble {
    max-width: 85%;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-card);
    font-size: 0.875rem;
    line-height: 1.625;
}
.bubble-me {
    border-bottom-right-radius: 10px;
    background: rgb(var(--accent-rgb) / 0.15);
}
.bubble-dimi {
    max-width: none;
    border-bottom-left-radius: 10px;
}
.bubble-dimi + .bubble-row-me,
.bubble-dimi + .bubble-dimi { margin-top: 0.75rem; }

.wave {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    height: 1.5rem;
}
.wave span {
    width: 0.25rem;
    border-radius: var(--radius-pill);
    background: var(--accent);
}

.mentor-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    font-size: 0.875rem;
    font-weight: 600;
    background: var(--sand-avatar-bg);
    color: var(--sand-avatar-fg);
}

.lesson {
    margin-bottom: 0.5rem;
    padding: 0.75rem;
    border-radius: var(--radius-md);
}

.lesson-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.progress {
    height: 0.375rem;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--border);
}
.progress span {
    display: block;
    width: 66.6667%;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--accent);
}

.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.fw-500 { font-weight: 500; }

/* ── Kroky ────────────────────────────────────────────────────────────── */
.step-number {
    margin-bottom: 0.75rem;
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 700;
    color: rgb(var(--accent-rgb) / 0.4);
}
.step-title { margin-bottom: 0.25rem; }
.step-text { font-size: 0.875rem; line-height: 1.25rem; color: var(--text-muted); }

/* ── Srovnání ─────────────────────────────────────────────────────────── */
.compare {
    overflow: hidden;
    border-radius: var(--radius-card);
}

.compare table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.compare th {
    padding: 1rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    text-align: center;
    color: var(--text-subtle);
}
.compare th:first-child { padding: 1rem; text-align: left; }

.compare td {
    padding: 0.875rem 0.5rem;
    border-top: 1px solid var(--border);
    text-align: center;
}
.compare td:first-child { padding: 0.875rem 1rem; text-align: left; }
.compare .icon { display: inline-block; vertical-align: middle; stroke-width: 2.2; }

.compare .col-dimi { background: rgb(var(--accent-rgb) / 0.1); }
.compare th.col-dimi { font-weight: 600; color: var(--text); }

.mark-yes { color: var(--status-ok-text); }
.mark-partial { color: var(--text-subtle); }
.mark-no { color: rgb(224 141 127 / 0.85); }

@media (min-width: 640px) {
    .compare th { padding: 1rem; }
    .compare th:first-child,
    .compare td:first-child { padding-left: 1.5rem; padding-right: 1.5rem; }
    .compare td { padding-left: 1rem; padding-right: 1rem; }
}

/* ── Ceník (načítá pricing.js, bez tarifů je sekce skrytá) ────────────── */
.pricing-grid {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 640px) {
    .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.price-card {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    border-radius: var(--radius-card);
}

.price-card-highlight {
    box-shadow: 0 0 0 1px rgb(var(--accent-rgb) / 0.4), inset 0 1px 0 0 var(--glass-specular), 0 8px 32px var(--glass-shadow-outer);
}

.price-badge {
    position: absolute;
    top: -0.75rem;
    left: 1.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    background: var(--accent);
    color: var(--accent-fg);
}

.price-amount {
    margin: 1rem 0 1.25rem;
}
.price-amount strong {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 700;
}

.price-features {
    display: grid;
    flex: 1;
    align-content: start;
    gap: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--text-muted);
}
.price-features li { display: flex; align-items: flex-start; gap: 0.5rem; }
.price-features .icon { width: 1rem; height: 1rem; margin-top: 0.125rem; stroke-width: 2; color: var(--status-ok-text); }

.price-card .btn { margin-top: 1.5rem; font-weight: 600; }

.pricing-note { margin-top: 2rem; }

/* ── Časté otázky (<details name="faq">) ──────────────────────────────── */
.faq {
    display: grid;
    gap: 0.75rem;
}

.faq-item {
    overflow: hidden;
    border-radius: var(--radius-card);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icon {
    color: var(--text-muted);
    stroke-width: 1.5;
    transition: transform 0.2s ease;
}
.faq-item[open] summary .icon { transform: rotate(180deg); }

.faq-item p {
    padding: 0 1.25rem 1.25rem;
    font-size: 0.875rem;
    line-height: 1.625;
    color: var(--text-muted);
}

/* ── Závěrečná výzva ──────────────────────────────────────────────────── */
.divider-accent {
    height: 1px;
    margin-bottom: 3rem;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.6;
}

.final-title {
    margin-bottom: 0.75rem;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
}

.final-lead {
    margin-bottom: 2.5rem;
    color: var(--text-muted);
}

.final-aside {
    margin-top: 2rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--text-subtle);
}
.final-aside-tight { margin-top: 1.5rem; }

@media (min-width: 640px) {
    .divider-accent { margin-bottom: 4rem; }
    .final-title { font-size: 1.875rem; line-height: 2.25rem; }
}

/* ── Kalkulačka (/lektori) ────────────────────────────────────────────── */
.calc {
    display: grid;
    gap: 2rem;
    padding: 1.5rem;
    border-radius: var(--radius-card);
}

.calc-inputs {
    display: grid;
    align-content: start;
    gap: 2rem;
}

.calc-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.calc-head label,
.calc-head .calc-label {
    font-weight: 500;
}

.calc-value {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.calc-value small {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-subtle);
}

.calc-help {
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--text-subtle);
}

.calc-range {
    width: 100%;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.calc-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--text-subtle);
}

.calc-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.calc-legend {
    margin-bottom: 0.5rem;
    padding: 0;
    font-weight: 500;
}

.calc-prices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.calc-price {
    position: relative;
    display: block;
    cursor: pointer;
}

.calc-price input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.calc-price span {
    display: block;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    text-align: center;
    background: color-mix(in oklab, var(--ink) 8%, transparent);
    transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease;
}
.calc-price:hover span { background: color-mix(in oklab, var(--ink) 14%, transparent); }
.calc-price input:checked + span {
    background: var(--ink);
    color: var(--ink-fg);
    box-shadow: var(--ink-shadow);
}
.calc-price input:focus-visible + span {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

.calc-recommended {
    position: absolute;
    top: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-style: normal;
    line-height: 15px;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    background: var(--accent);
    color: var(--accent-fg);
    white-space: nowrap;
}

.calc-results {
    display: flex;
    flex-direction: column;
}

.calc-result-card {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem;
    border-radius: var(--radius-card);
}

.calc-result-label {
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--text-subtle);
}

.calc-result-value {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.calc-result-total {
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}
.calc-result-total .gradient-text {
    display: block;
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.calc-compare {
    font-size: 0.875rem;
    line-height: 1.625;
    color: var(--text-muted);
}
.calc-compare strong { font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }

.calc-results .btn { margin-top: 1.25rem; }

.calc-disclaimer {
    margin-top: 0.75rem;
    font-size: 0.75rem;
    line-height: 1rem;
    text-align: center;
    color: var(--text-subtle);
}

@media (min-width: 640px) {
    .calc { padding: 2.5rem; }
    .calc-prices { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .calc {
        grid-template-columns: 3fr 2fr;
        gap: 3rem;
    }
}

/* Lektoři: karty benefitů a „Pro koho" */
.benefit-card { padding: 1.5rem; border-radius: var(--radius-card); }
.benefit-card .card-title { font-size: 1.25rem; line-height: 1.75rem; }
.benefit-card .card-text { font-size: 1rem; line-height: 1.625; }

.persona-card .icon { margin-bottom: 0.75rem; color: var(--text-muted); width: 1.5rem; height: 1.5rem; }
.persona-card .card-title { margin-bottom: 0.25rem; font-size: 1rem; line-height: 1.5rem; }

@media (min-width: 640px) {
    .benefit-card { padding: 1.75rem; }
}

/* ── Rozcestník kanálů (/start) ───────────────────────────────────────── */
.start-head {
    margin-bottom: 3rem;
    text-align: center;
}
.start-head .eyebrow { margin-bottom: 0.75rem; }
.start-head .hero-title { margin-bottom: 1rem; font-size: 1.875rem; line-height: 2.25rem; }
.start-head .hero-lead { margin-bottom: 0; font-size: 1.125rem; line-height: 1.625; }

.channels {
    display: grid;
    gap: 1.25rem;
}

.channel {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    border-radius: var(--radius-card);
}

.channel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.channel-title {
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 600;
}

.channel-lead {
    margin-bottom: 1.25rem;
    line-height: 1.625;
    color: var(--text-muted);
}

.channel-points {
    display: grid;
    flex: 1;
    align-content: start;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--text-muted);
}
.channel-points li { display: flex; align-items: flex-start; gap: 0.5rem; }
.channel-points .icon { width: 1rem; height: 1rem; margin-top: 0.125rem; stroke-width: 2; color: var(--status-ok-text); }

.channel .btn { justify-content: center; padding-top: 0.75rem; padding-bottom: 0.75rem; font-size: 1rem; line-height: 1.5rem; }
.channel .btn .icon { width: 1rem; height: 1rem; stroke-width: 2; }

.start-foot {
    margin-top: 2rem;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--text-subtle);
}
.start-foot .sep { margin: 0 0.5rem; }

@media (min-width: 640px) {
    .start-head { margin-bottom: 4rem; }
    .start-head .hero-title { font-size: 2.25rem; line-height: 2.5rem; }
    .channels { gap: 1.5rem; }
    .channel { padding: 2rem; }
}

@media (min-width: 768px) {
    .channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .start-head .hero-title { font-size: 3rem; line-height: 1; }
}

/* ── Animace ──────────────────────────────────────────────────────────── */

/* Hero vyjede při načtení (čisté CSS, bez JS). */
.rise {
    animation: rise 0.6s ease-out both;
}

/* Bloky pod ohybem: site.js jim přidá .reveal-pending a po najetí do
   viewportu ho zase odebere. Bez JS zůstanou prostě vidět. */
.reveal-pending {
    opacity: 0;
    transform: translateY(24px);
}
.reveal {
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

@keyframes rise {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .rise { animation: none; }
    .reveal-pending { opacity: 1; transform: none; }
    .reveal { transition: none; }
}