/* =============================================================
   ZÁKLAD — reset, typografie, tlačítka, plovoucí prvky

   Načítá se za tokeny. Neobsahuje ani jednu barvu zapsanou
   natvrdo; všechno jde přes proměnnou z tokens-base.css nebo
   tokens-<produkt>.css.
   ============================================================= */

/* -------------------------------------------------------------
   RESET

   Vědomě BEZ univerzálního `* { font-family: Inter }`. Dnešní
   style.css ho má a přebíjí tím i Font Awesome, což se pak
   obchází vyšší specificitou na každé ikoně zvlášť.
   ------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd { margin: 0; }

ul[class], ol[class] { margin: 0; padding: 0; list-style: none; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font);
    font-size: 18px;
    line-height: var(--lh-body);
    color: var(--text);
    background-color: var(--surface);
    -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 { line-height: var(--lh-tight); text-wrap: balance; }

:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
    border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* -------------------------------------------------------------
   NADPISY SEKCÍ
   ------------------------------------------------------------- */
.section-title {
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: var(--content-max);
    margin: 0 auto 28px;
    padding: 0 var(--page-pad);
    font-size: 2.4rem;
    color: var(--text-strong);
    text-align: center;
}
.section-title::before,
.section-title::after {
    content: '';
    flex: 1;
    height: 2px;
    background: var(--line-strong);
}

/* -------------------------------------------------------------
   TLAČÍTKA
   ------------------------------------------------------------- */
.btn {
    display: inline-block;
    padding: 13px 30px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: none;
    border-radius: var(--r-xs);
    box-shadow: 0 4px 6px rgb(var(--black-rgb) / 0.1);
    transition: transform var(--t-base), background var(--t-base),
                box-shadow var(--t-base), color var(--t-base);
}

.btn--primary {
    background: var(--brand);
    color: var(--surface);
    border-top: 1px solid rgb(var(--white-rgb) / 0.3);
}
.btn--primary:hover {
    background: var(--brand-700);
    box-shadow: 0 10px 20px rgb(var(--brand-rgb) / 0.4);
    transform: translateY(-4px);
}

.btn--outline {
    background: transparent;
    color: var(--text-strong);
    border: 2px solid var(--text-strong);
}
.btn--outline:hover {
    background: var(--text-strong);
    color: var(--surface);
    transform: translateY(-3px);
}

.btn--back {
    background: rgb(var(--brand-rgb) / 0.08);
    color: var(--brand);
    border: 2px solid rgb(var(--brand-rgb) / 0.3);
}
.btn--back:hover {
    background: var(--brand);
    color: var(--surface);
    transform: translateY(-3px);
}

/* -------------------------------------------------------------
   PLOVOUCÍ PRVKY
   ------------------------------------------------------------- */
#backToTop {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 1001;
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
    color: var(--surface);
    cursor: pointer;
    background: var(--brand);
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgb(var(--black-rgb) / 0.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-base), transform var(--t-base), background var(--t-base);
}
#backToTop.show { opacity: 1; visibility: visible; }
#backToTop:hover {
    background: var(--brand-dark);
    transform: translateY(-5px);
}

/* Widget chatbota vkládá cizí skript, srovnáváme jen pozici */
#isvs-chatbot-btn { bottom: 30px !important; }