/* ==========================================================================
   Intivise — veřejný web
   ========================================================================== */

/* == Hlavička ============================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--header-h);
    border-bottom: 1px solid var(--line);
    background: var(--paper);
}

.site-header__inner { display: flex; align-items: center; gap: 2rem; height: 100%; }

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex: none;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-decoration: none;
}

.brand__name { display: inline-flex; align-items: center; }
.brand__word { display: block; width: auto; height: 16px; }
.brand__area { margin-left: 0.125rem; padding-left: 0.625rem; border-left: 1px solid var(--line-2); font-weight: 400; color: var(--ink-3); }

.site-nav { display: flex; flex: 1; align-items: center; gap: 1.5rem; }
.site-nav__list { display: flex; gap: 0.125rem; margin: 0; padding: 0; list-style: none; }

.site-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
    transition: color 160ms ease, background-color 160ms ease;
}

.site-nav__link .icon { width: 1rem; height: 1rem; }
.site-nav__link[aria-current="page"] { color: var(--ink); }

.site-nav__link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.125rem;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
}

.site-nav__aside { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.site-nav__link--quiet { font-size: 0.875rem; color: var(--ink-3); }

.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 2.25rem;
    padding: 0 0.625rem;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
    transition: border-color 160ms ease, color 160ms ease;
}

.lang-switch .icon { width: 1rem; height: 1rem; color: var(--ink-3); }

.nav-toggle {
    display: none;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-left: auto;
    margin-right: -0.5rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    display: block;
    width: 1.25rem;
    height: 1.5px;
    border-radius: 1px;
    background: var(--ink);
    transition: transform 220ms var(--ease-out), opacity 160ms ease;
}

.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { transform: translateY(-6px); }
.nav-toggle__bars::after { transform: translateY(6px); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: rotate(45deg); background: var(--ink); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: rotate(-45deg); background: var(--ink); }

@media (hover: hover) and (pointer: fine) {
    .site-nav__link:hover { color: var(--ink); background: var(--paper-2); }
    .lang-switch:hover { border-color: var(--ink-3); color: var(--ink); }
}

@media (max-width: 1020px) {
    .nav-toggle { display: grid; }

    .site-nav {
        position: fixed;
        inset: var(--header-h) 0 0;
        z-index: 49;
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
        padding: 0.5rem var(--gutter) 2rem;
        background: var(--paper);
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s linear 200ms;
    }

    .site-nav.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
    .site-nav__list { flex-direction: column; gap: 0; }

    .site-nav__link {
        width: 100%;
        padding: 0.875rem 0;
        border-bottom: 1px solid var(--line);
        border-radius: 0;
        font-size: 1.25rem;
        letter-spacing: -0.01em;
    }

    .site-nav__link[aria-current="page"]::after { left: auto; right: 0; top: 50%; bottom: auto; width: 0.5rem; height: 0.5rem; border-radius: 50%; transform: translateY(-50%); }
    .site-nav__aside { flex-direction: column; align-items: stretch; gap: 0.75rem; margin-left: 0; }
    .site-nav__aside .site-nav__link { font-size: 1rem; border: 0; padding: 0.5rem 0; }
    .site-nav__aside .btn { min-height: 3rem; font-size: 1rem; }
    .lang-switch { height: 3rem; justify-content: center; }

    body.nav-open { overflow: hidden; }
}

/* == Úvod ================================================================= */

.hero {
    padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) var(--section-y);
    border-bottom: 1px solid var(--line);
}

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: clamp(2.5rem, 1rem + 4vw, 5rem);
}

.hero__title {
    max-width: 15ch;
    margin: 0 0 1.5rem;
    font-size: var(--text-3xl);
    line-height: 1.03;
    letter-spacing: -0.038em;
}

.hero__lede {
    max-width: 36rem;
    margin: 0 0 2.25rem;
    font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
    line-height: 1.6;
    color: var(--ink-2);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2rem; }

.hero__points {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9375rem;
    color: var(--ink-3);
}

.hero__points li { display: flex; align-items: center; gap: 0.4rem; }
.hero__points .icon { width: 1rem; height: 1rem; color: var(--ok); }

/* Živé schéma vrstev: od kabeláže dole po aplikace a AI nahoře.
   Panel se jemně naklání za myší a tlačítko „Spustit kontrolu“ vrstvy
   postupně odškrtá. */
.stack {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    position: relative;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow);
    overflow: hidden;
    transform: perspective(1400px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transition: transform 600ms var(--ease-out), box-shadow 600ms var(--ease-out);
}

.stack.is-tilting {
    transition-duration: 140ms;
    box-shadow: 0 32px 64px -32px rgb(21 23 27 / 0.35);
}

.stack__bar,
.window__bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.875rem;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    font-size: 0.75rem;
    color: var(--ink-3);
}

.stack__dots i,
.window__dots i {
    display: inline-block;
    width: 0.5625rem;
    height: 0.5625rem;
    margin-right: 0.3rem;
    border-radius: 50%;
    background: var(--line-2);
}

.stack__title { font-weight: 600; color: var(--ink-2); }

.stack__check {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-left: auto;
    padding: 0.3125rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: rgb(45 122 79 / 0.1);
    color: var(--ok);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.stack__check::before {
    content: "";
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 0 rgb(45 122 79 / 0.45);
    animation: live 2.4s var(--ease-out) infinite;
}

.stack__check:hover { border-color: currentColor; }
.stack__check:active { transform: scale(0.96); }
.stack__check:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.stack.is-checking .stack__check { background: rgb(226 83 31 / 0.12); color: var(--accent); cursor: progress; }

@keyframes live {
    0% { box-shadow: 0 0 0 0 rgb(45 122 79 / 0.45); }
    70%, 100% { box-shadow: 0 0 0 6px rgb(45 122 79 / 0); }
}

.stack__body {
    position: relative;
    padding: 0.875rem 0.875rem 0.875rem 2.375rem;
}

/* Kolejnice, na kterou jsou vrstvy napojené. */
.stack__rail {
    position: absolute;
    top: 1.625rem;
    bottom: 1.625rem;
    left: 1.125rem;
    width: 2px;
    background: repeating-linear-gradient(to bottom, var(--line-2) 0 4px, transparent 4px 8px);
}

.stack__layers {
    display: grid;
    gap: 0.4375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stack__layer {
    position: relative;
    animation: layer-in 460ms var(--ease-out) both;
    animation-delay: calc((5 - var(--i, 0)) * 70ms + 120ms);
}

/* Přípojka vrstvy ke kolejnici. */
.stack__layer::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -1.25rem;
    width: 1.25rem;
    height: 2px;
    background: var(--line-2);
}

@keyframes layer-in {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
}

.stack__layer a {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5625rem 0.875rem 0.5625rem 0.5625rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    color: inherit;
    text-decoration: none;
    transition: transform 240ms var(--ease-out), border-color 160ms ease, background-color 160ms ease, opacity 200ms ease, box-shadow 240ms ease;
}

.stack__layer a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.stack__icon {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) - 2px);
    background: var(--white);
    color: var(--ink-2);
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 320ms var(--ease-out);
}

.stack__icon .icon { width: 1.125rem; height: 1.125rem; }
.stack__text { min-width: 0; }
.stack__text strong { display: block; font-size: 0.9375rem; font-weight: 600; line-height: 1.3; }

.stack__text span {
    display: block;
    overflow: hidden;
    font-size: 0.8125rem;
    color: var(--ink-3);
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Kontrolka vrstvy: při kontrole bliká a pak se odškrtne. */
.stack__state { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; }

.stack__state::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--ok);
}

.stack__layer.is-checking a { border-color: var(--accent); background: var(--white); }
.stack__layer.is-checking .stack__state::before { background: var(--accent); animation: stack-blink 420ms steps(2, jump-none) infinite; }
.stack__layer.is-ok a { border-color: rgb(45 122 79 / 0.35); background: rgb(45 122 79 / 0.05); }

.stack__layer.is-ok .stack__state::before {
    width: 1.125rem;
    height: 1.125rem;
    background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 70% no-repeat;
    animation: pop 360ms var(--ease-out);
}

@keyframes stack-blink { 50% { opacity: 0.25; } }
@keyframes pop { from { transform: scale(0.3); } }

.stack__caption {
    padding: 0.625rem 0.875rem;
    border-top: 1px solid var(--line);
    background: var(--paper);
    font-size: 0.8125rem;
    color: var(--ink-3);
}

@media (hover: hover) and (pointer: fine) {
    .stack__layers:hover .stack__layer:not(:hover) a { opacity: 0.55; }

    .stack__layer a:hover {
        transform: translateX(-6px);
        border-color: var(--ink);
        background: var(--white);
        box-shadow: 0 12px 28px -16px rgb(21 23 27 / 0.4);
    }

    .stack__layer a:hover .stack__icon {
        border-color: var(--ink);
        background: var(--ink);
        color: #fff;
        transform: rotate(-8deg) scale(1.06);
    }
}

@media (max-width: 960px) {
    .hero__grid { grid-template-columns: minmax(0, 1fr); }
    .hero__title { max-width: 18ch; }
}

@media (max-width: 520px) {
    .stack__body { padding-left: 1.875rem; }
    .stack__rail { left: 0.875rem; }
    .stack__layer::before { left: -1rem; width: 1rem; }
    .stack__title { display: none; }
    .stack__text span { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
    .stack { transform: none; transition: none; }
    .stack__state::before, .stack__check::before { animation: none; }
}

/* == Sekce ================================================================ */

.section { padding-block: var(--section-y); }
.section--tint { background: var(--paper-2); }
.section--night { background: var(--night); color: var(--night-text); }
.section--flush-top { padding-top: 0; }

.section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: 1rem 4rem;
    margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.25rem);
}

.section-head__title {
    max-width: 18ch;
    margin: 0;
    font-size: var(--text-2xl);
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.section-head__side { display: grid; justify-items: start; gap: 1rem; font-size: 1.0625rem; color: var(--ink-2); }
.section-head__side p { max-width: 34rem; margin: 0; }
.section-head--night .section-head__side { color: var(--night-muted); }

@media (max-width: 860px) {
    .section-head { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}

/* == Služby =============================================================== */

.service-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}

.service-grid > li { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.service-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
    padding: 1.5rem 1.5rem 1.375rem;
    color: inherit;
    text-decoration: none;
    transition: background-color 200ms ease;
}

.service-card__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 0.5rem; }

.service-card__icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--ink);
}

.service-card__icon .icon { width: 1.25rem; height: 1.25rem; }
.service-card__num { font-size: 0.75rem; color: var(--ink-3); }
.service-card__title { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.service-card__text { flex: 1; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-3); }

.service-card__more {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink-2);
    transition: color 160ms ease;
}

.service-card__more .icon { width: 1rem; height: 1rem; transition: transform 200ms var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
    .service-card:hover { background: var(--white); }
    .service-card:hover .service-card__more { color: var(--accent-ink); }
    .service-card:hover .service-card__more .icon { transform: translateX(3px); }
}

@media (max-width: 1080px) { .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .service-grid { grid-template-columns: minmax(0, 1fr); } }

.service-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }

.service-row {
    position: relative;
    display: grid;
    grid-template-columns: 5rem minmax(0, 1.3fr) minmax(0, 1fr) 2.75rem;
    align-items: start;
    gap: 1.25rem 2.5rem;
    padding: 2.25rem 0;
    border-bottom: 1px solid var(--line);
}

.service-row__head { display: flex; flex-direction: column; gap: 0.75rem; }
.service-row__num { font-size: 0.8125rem; color: var(--ink-3); }
.service-row__title { margin: 0 0 0.5rem; font-size: 1.375rem; letter-spacing: -0.02em; }
.service-row__title a { color: inherit; text-decoration: none; }
.service-row__title a::after { content: ""; position: absolute; inset: 0; }
.service-row__text { margin: 0 0 1rem; color: var(--ink-2); }

.service-row__scope { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; font-size: 0.9375rem; color: var(--ink-2); }
.service-row__scope li { display: flex; gap: 0.5rem; }
.service-row__scope .icon { margin-top: 0.2rem; color: var(--ok); }

.service-row__link {
    position: relative;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--line-2);
    border-radius: 50%;
    color: var(--ink);
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .service-row:hover .service-row__link { border-color: var(--ink); background: var(--ink); color: var(--paper); }
    .service-row:hover .service-row__title { color: var(--accent-ink); }
}

@media (max-width: 960px) {
    .service-row { grid-template-columns: 3rem minmax(0, 1fr); padding: 1.75rem 0; }
    .service-row__scope { grid-column: 2; }
    .service-row__link { display: none; }
    .service-row__head .service-card__icon { display: none; }
}

/* == Typické zakázky ====================================================== */

.solution-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.solution-grid > li { display: flex; }
.solution-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.solution-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--white);
    color: inherit;
    text-decoration: none;
    transition: border-color 200ms ease, transform 240ms var(--ease-out), box-shadow 240ms ease;
}

.solution-card__label { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; color: var(--accent-ink); }
.solution-card__title { font-size: 1.1875rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; }
.solution-card__text { flex: 1; font-size: 0.9375rem; color: var(--ink-3); }

.solution-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.solution-card__meta { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--ink-3); }
.solution-card__meta .icon { width: 0.9375rem; height: 0.9375rem; }
.solution-card__arrow .icon { width: 1.125rem; height: 1.125rem; transition: transform 200ms var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
    .solution-card:hover { border-color: var(--ink-3); transform: translateY(-2px); box-shadow: var(--shadow); }
    .solution-card:hover .solution-card__arrow .icon { transform: translateX(3px); }
}

@media (max-width: 960px) {
    .solution-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Lichý poslední prvek roztáhneme, ať v mřížce nezůstane díra. */
    .solution-grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
    .solution-grid, .solution-grid--two { grid-template-columns: minmax(0, 1fr); }
}

/* == Postup =============================================================== */

.steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line);
}

.step { position: relative; padding: 1.5rem 1.5rem 0 0; }

.step::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 2rem;
    height: 2px;
    background: var(--ink);
}

.step__num { display: block; margin-bottom: 1rem; font-size: 0.8125rem; color: var(--accent-ink); }
.step__title { margin: 0 0 0.25rem; font-size: 1.0625rem; letter-spacing: -0.01em; }
.step__duration { margin: 0 0 0.75rem; font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-3); }
.step__text { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-3); }

@media (max-width: 900px) {
    .steps { grid-template-columns: minmax(0, 1fr); border-top: 0; }
    .step { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1rem; padding: 1.25rem 0; border-top: 1px solid var(--line); }
    .step::before { display: none; }
    .step__num { grid-row: span 3; margin: 0.2rem 0 0; }
}

/* == Závazky ============================================================== */

.commitments {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    border-top: 1px solid var(--night-line);
}

.commitment { display: flex; flex-direction: column; padding: 1.75rem 1.5rem 0 0; }

.commitment__value {
    order: -1;
    margin: 0 0 1rem;
    font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.035em;
    color: var(--night-text);
    font-variant-numeric: tabular-nums;
}

.commitment__label { margin-bottom: 0.375rem; font-weight: 600; color: var(--night-text); }
.commitment__note { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--night-muted); }

@media (max-width: 900px) { .commitments { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1rem; } }
@media (max-width: 520px) { .commitments { grid-template-columns: minmax(0, 1fr); } }

/* == Okna ukázek ========================================================= */

.window {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.window__status { margin-left: auto; font-family: var(--font-mono); }
.window__note { margin: 0; padding: 1rem; font-size: 0.875rem; color: var(--ink-3); }

.window--dark { border-color: var(--night-line); background: var(--night); }
.window--dark .window__bar { border-color: var(--night-line); background: var(--night-2); color: var(--night-muted); }
.window--dark .window__dots i { background: #3a3e46; }
.window__bar--tabs { padding-block: 0; }

.terminal__screen, .code pre {
    margin: 0;
    padding: 1.25rem 1.25rem 1.5rem;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.75;
    color: var(--night-text);
    white-space: pre;
    overflow-x: auto;
}

.terminal__screen[data-terminal] { min-height: calc(11 * 1.75 * 0.8125rem + 2.75rem); }
.code pre { max-height: 24rem; min-height: 16rem; }

.t-muted { color: #80858d; }
.t-ok { color: #74c79a; }
.t-accent { color: #f09a6f; }
.t-out { color: var(--night-muted); }
.t-key { color: #e8e6df; }
.t-str { color: #9fd3b1; }
.t-num { color: #f0b27a; }

.terminal__cursor {
    display: inline-block;
    width: 0.55em;
    height: 1.15em;
    background: var(--night-text);
    vertical-align: -0.22em;
    animation: blink 1.1s steps(1) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

/* == Ukázka na úvodní stránce ============================================ */

.demo-teaser {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(2rem, 1rem + 4vw, 4.5rem);
}

.demo-teaser .section-head__title { margin-bottom: 1rem; }
.demo-teaser__lede { margin: 0 0 1.5rem; font-size: 1.0625rem; color: var(--ink-2); }
.demo-teaser .check-list { margin-bottom: 2rem; }

@media (max-width: 900px) { .demo-teaser { grid-template-columns: minmax(0, 1fr); } }

/* == Stránka ukázek ====================================================== */

.demo-index { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-bottom: 0.5rem; }

.demo-index a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: var(--white);
    font-size: 0.875rem;
    color: var(--ink-2);
    text-decoration: none;
    transition: border-color 160ms ease, color 160ms ease;
}

.demo-index span { font-size: 0.75rem; color: var(--ink-3); }

@media (hover: hover) and (pointer: fine) {
    .demo-index a:hover { border-color: var(--ink-3); color: var(--ink); }
}

.demo__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: clamp(2rem, 1rem + 4vw, 4.5rem);
}

.demo__grid--flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.demo__grid--flip .demo__copy { order: 2; }
.demo__title { margin: 0 0 1rem; font-size: var(--text-xl); letter-spacing: -0.025em; }
.demo__copy > p { color: var(--ink-2); }
.demo__copy .check-list { margin: 1.25rem 0 0; }
.demo__copy .btn { margin-top: 0.75rem; }
.demo__copy .label { margin-bottom: 0.75rem; }

@media (max-width: 900px) {
    .demo__grid, .demo__grid--flip { grid-template-columns: minmax(0, 1fr); }
    .demo__grid--flip .demo__copy { order: 0; }
}

/* Ukázka: kontrola domény */
.domain__form { padding: 1rem; border-bottom: 1px solid var(--line); }
.domain__input { display: flex; align-items: center; gap: 0.5rem; }
.domain__input > .icon { flex: none; width: 1.125rem; height: 1.125rem; color: var(--ink-3); }
.domain__input .input { flex: 1; min-width: 0; font-family: var(--font-mono); }
.domain__input .btn { flex: none; }
.domain__result { min-height: 18rem; padding: 1.25rem; }
.domain__empty, .domain__loading, .domain__error { margin: 0; font-size: 0.9375rem; color: var(--ink-3); }
.domain__error { color: var(--danger); }
.domain__loading { display: flex; align-items: center; gap: 0.625rem; }

.domain__spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--line-2);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 700ms linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes demo-in { from { opacity: 0; transform: translateY(6px); } }

.domain__summary { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; animation: demo-in 360ms var(--ease-out) both; }

.domain__grade {
    --tone: var(--ok);
    display: grid;
    flex: none;
    place-items: center;
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 50%;
    background: conic-gradient(var(--tone) calc(var(--score, 0) * 1%), var(--paper-3) 0);
}

.domain__grade strong { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--white); font-size: 1.5rem; font-weight: 600; color: var(--tone); }
.domain__summary--c .domain__grade, .domain__summary--d .domain__grade { --tone: #b7791f; }
.domain__summary--f .domain__grade { --tone: var(--danger); }
.domain__meta { display: grid; gap: 0.125rem; min-width: 0; }
.domain__meta small { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.domain__meta strong { font-family: var(--font-mono); font-size: 1rem; overflow-wrap: anywhere; }
.domain__meta span { font-size: 0.875rem; color: var(--ink-2); }

.domain__groups { display: grid; gap: 1rem; }
.domain__group h3 { margin: 0 0 0.5rem; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.domain__group ul { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }

.domain__check {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    align-items: start;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    border-radius: var(--radius);
    background: var(--paper);
    animation: demo-in 360ms var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 60ms + 120ms);
}

.domain__check strong { display: block; font-size: 0.875rem; }
.domain__detail { display: block; font-size: 0.8125rem; color: var(--ink-2); }
.domain__icon { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--ink-4); font-size: 0.75rem; font-weight: 700; color: #fff; }
.domain__check--ok .domain__icon { background: var(--ok); }
.domain__check--warn .domain__icon { background: #b7791f; }
.domain__check--bad .domain__icon { background: var(--danger); }

.domain__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    animation: demo-in 360ms var(--ease-out) both;
    animation-delay: 700ms;
}

.domain__cta p { margin: 0; font-size: 0.875rem; color: var(--ink-2); }

/* Ukázka: kvíz o podvodných e-mailech */
.quiz__body { display: grid; align-content: start; gap: 1rem; min-height: 24rem; padding: 1.25rem; }
.quiz__message { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); overflow: hidden; animation: demo-in 320ms var(--ease-out) both; }
.quiz__message--sms { max-width: 24rem; border-radius: 1.25rem; }
.quiz__head { display: grid; gap: 0.25rem; margin: 0; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); background: var(--paper); font-size: 0.8125rem; }
.quiz__head div { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 0.5rem; }
.quiz__head dt { color: var(--ink-3); }
.quiz__head dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.quiz__text { padding: 0.875rem 1rem 1rem; font-size: 0.9375rem; line-height: 1.55; }
.quiz__text p { margin: 0 0 0.5rem; }
.quiz__link { display: inline-grid; gap: 0.125rem; max-width: 100%; margin-top: 0.25rem; padding: 0.5rem 0.875rem; border-radius: var(--radius); background: var(--ink); font-size: 0.875rem; font-weight: 600; color: #fff; }
.quiz__link small { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 400; opacity: 0.75; overflow-wrap: anywhere; }
.quiz__attachment { display: inline-flex; margin: 0.25rem 0 0; padding: 0.375rem 0.625rem; border: 1px dashed var(--line-2); border-radius: var(--radius); font-family: var(--font-mono); font-size: 0.8125rem; }
.quiz__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; }
.quiz__btn { justify-content: center; min-height: 2.75rem; border: 1px solid var(--line-2); background: var(--white); font-weight: 600; color: var(--ink); }
.quiz__feedback { display: grid; gap: 0.625rem; padding: 1rem; border-radius: var(--radius); animation: demo-in 320ms var(--ease-out) both; }
.quiz__feedback--right { border: 1px solid rgb(45 122 79 / 0.3); background: rgb(45 122 79 / 0.08); }
.quiz__feedback--wrong { border: 1px solid rgb(179 38 30 / 0.3); background: rgb(179 38 30 / 0.06); }
.quiz__feedback p { margin: 0; font-size: 0.875rem; color: var(--ink-2); }
.quiz__feedback .btn { justify-self: start; }
.quiz__flags { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; font-size: 0.875rem; }
.quiz__flags li { display: flex; gap: 0.5rem; }
.quiz__flags li::before { content: "⚑"; flex: none; color: var(--accent); }
.quiz.is-wrong .quiz__message { animation: shake 420ms ease; }
.quiz.is-right .quiz__message { box-shadow: 0 0 0 3px rgb(45 122 79 / 0.25); }
.quiz__result { display: grid; justify-items: start; gap: 0.75rem; padding: 2rem 0.5rem; animation: demo-in 320ms var(--ease-out) both; }
.quiz__score { margin: 0; font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); font-weight: 600; letter-spacing: -0.03em; }
.quiz__result p { margin: 0; color: var(--ink-2); }

@keyframes shake {
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

/* Ukázka: simulace záloh */
.backup__body { display: grid; gap: 1.25rem; padding: 1.25rem; }
.backup__setup { display: grid; gap: 0.625rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.backup__heading { display: block; padding: 0; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.backup__setup > .backup__heading { margin-bottom: 0.25rem; }
.backup__copies { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; font-size: 0.9375rem; font-weight: 500; }
.backup__segmented { display: inline-flex; padding: 0.1875rem; border: 1px solid var(--line-2); border-radius: 999px; background: var(--paper); }
.backup__segmented label { position: relative; }
.backup__segmented input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.backup__segmented span { display: block; padding: 0.3125rem 0.875rem; border-radius: 999px; font-size: 0.8125rem; transition: background-color 160ms ease, color 160ms ease; }
.backup__segmented input:checked + span { background: var(--ink); color: #fff; }
.backup__segmented input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.backup__rule { display: grid; gap: 0.5rem; padding: 0.875rem 1rem; border-radius: var(--radius); background: var(--paper); }
.backup__rule-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; font-size: 0.8125rem; font-weight: 600; }
.backup__rule-head span { font-weight: 500; color: var(--ink-3); }
.backup__chips { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.backup__chips li { padding: 0.25rem 0.625rem; border: 1px solid var(--line-2); border-radius: 999px; font-size: 0.75rem; color: var(--ink-3); transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease; }
.backup__chips li.is-on { border-color: var(--ok); background: rgb(45 122 79 / 0.1); font-weight: 600; color: var(--ok); }
.backup__scenarios-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.625rem; }
.backup__list { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }

.scenario {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    transition: border-color 200ms ease, background-color 200ms ease;
}

.scenario__icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--radius-sm); background: var(--paper); color: var(--ink-2); }
.scenario__icon .icon { width: 1rem; height: 1rem; }
.scenario__name { font-size: 0.875rem; font-weight: 500; }
.scenario__state { font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.scenario[data-state="ok"] { border-color: rgb(45 122 79 / 0.35); background: rgb(45 122 79 / 0.05); }
.scenario[data-state="ok"] .scenario__state { color: var(--ok); }
.scenario[data-state="warn"] { border-color: rgb(183 121 31 / 0.4); background: rgb(183 121 31 / 0.06); }
.scenario[data-state="warn"] .scenario__state { color: #9a6416; }
.scenario[data-state="bad"] { border-color: rgb(179 38 30 / 0.35); background: rgb(179 38 30 / 0.05); }
.scenario[data-state="bad"] .scenario__state { color: var(--danger); }

@media (max-width: 520px) {
    .domain__input { flex-wrap: wrap; }
    .domain__input .btn { width: 100%; justify-content: center; }
    .quiz__head div { grid-template-columns: 4rem minmax(0, 1fr); }
    .scenario { grid-template-columns: 2rem minmax(0, 1fr); }
    .scenario__state { grid-column: 2; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
    .domain__summary, .domain__check, .domain__cta, .quiz__message, .quiz__feedback, .quiz__result, .quiz.is-wrong .quiz__message { animation: none; }
}

/* == Vnitřní stránky ===================================================== */

.page-head { padding-block: clamp(1.75rem, 1rem + 3vw, 3rem) clamp(2.5rem, 1.6rem + 3vw, 4rem); }
.page-head__grid { display: grid; gap: 2rem; }
.page-head__grid--aside { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }

.page-head__title {
    max-width: 22ch;
    margin: 0 0 1.25rem;
    font-size: var(--text-2xl);
    line-height: 1.06;
    letter-spacing: -0.032em;
}

.page-head__lede { max-width: 42rem; margin: 0; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); color: var(--ink-2); }

.detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    align-items: start;
    gap: clamp(2rem, 1rem + 4vw, 5rem);
}

.detail__aside { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.detail__intro { max-width: 44rem; margin: 0 0 1rem; font-size: 1.1875rem; line-height: 1.65; color: var(--ink); }
.detail__heading { margin: 3rem 0 1rem; font-size: 1.25rem; letter-spacing: -0.015em; }
.detail__heading--first { margin-top: 0; }

@media (max-width: 960px) {
    .detail { grid-template-columns: minmax(0, 1fr); }
    .detail__aside { position: static; }
}

.deliverables {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.deliverables li {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    font-size: 0.9375rem;
    font-weight: 500;
}

.deliverables li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.deliverables .icon { color: var(--ink-3); }

@media (max-width: 520px) { .deliverables { grid-template-columns: minmax(0, 1fr); } }

.aside-card {
    display: grid;
    align-content: start;
    gap: 1rem;
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--white);
}

.aside-card + .aside-card { margin-top: 1rem; }
.aside-card--quiet { background: transparent; }
.aside-card__title { margin: 0; font-size: 1.0625rem; font-weight: 600; }
.aside-card__text { margin: 0; font-size: 0.9375rem; color: var(--ink-3); }
.aside-card__subtitle { margin: 0.5rem 0 -0.25rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.aside-card__note { margin: 0; font-size: 0.8125rem; color: var(--ink-3); }
.aside-card .switch-row:last-of-type { margin-bottom: 0.25rem; }

.aside-links { display: grid; margin: 0; padding: 0; list-style: none; }

.aside-links a {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.9375rem;
    color: var(--ink-2);
    text-decoration: none;
}

.aside-links a:hover { color: var(--ink); }

.timeline { display: grid; margin: 0; padding: 0; list-style: none; }
.timeline__item { position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 1rem; padding-bottom: 1.5rem; }
.timeline__item::before { content: ""; position: absolute; top: 2.25rem; bottom: 0; left: calc(1.125rem - 0.5px); width: 1px; background: var(--line-2); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item:last-child::before { display: none; }
.timeline__num { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--line-2); border-radius: 50%; background: var(--white); font-size: 0.8125rem; }
.timeline__item p { margin: 0.375rem 0 0; color: var(--ink-2); }

.link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.link-tile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 100%;
    padding: 1rem 1.125rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    transition: border-color 160ms ease;
}

.link-tile .icon { color: var(--ink-3); }
.link-tile__arrow { margin-left: auto; transition: transform 200ms var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
    .link-tile:hover { border-color: var(--ink-3); }
    .link-tile:hover .link-tile__arrow { transform: translateX(3px); color: var(--ink); }
}

.split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 1.5rem 5rem; }
.split__title { margin: 0; font-size: var(--text-xl); line-height: 1.15; letter-spacing: -0.025em; }
.split__body > p:first-child { font-size: 1.125rem; color: var(--ink); }

@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } }

.tool-list { display: grid; margin: 1.5rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.tool-list li { display: flex; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.tool-list .icon { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; }
.tool-list div { display: grid; gap: 0.25rem; }
.tool-list span { color: var(--ink-3); }

.principles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.principle { padding: 1.75rem 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); }
.principle__num { font-size: 0.8125rem; color: var(--accent-ink); }
.principle__title { margin: 0.875rem 0 0.5rem; font-size: 1.125rem; }
.principle__text { margin: 0; font-size: 0.9375rem; color: var(--ink-3); }

@media (max-width: 1000px) { .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .principles { grid-template-columns: minmax(0, 1fr); } }

/* == Časté dotazy ========================================================= */

.faq-layout { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); align-items: start; gap: 2rem 5rem; }
.faq-layout__intro p { margin: 1rem 0 1.5rem; color: var(--ink-2); }

.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }

.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.25rem 0;
    font-size: 1.0625rem;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.faq__question::-webkit-details-marker { display: none; }
.faq__icon { width: 1.25rem; height: 1.25rem; color: var(--ink-3); transition: transform 220ms var(--ease-out); }
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__answer p { max-width: 62ch; margin: 0 0 1.375rem; color: var(--ink-2); }

@media (max-width: 860px) { .faq-layout { grid-template-columns: minmax(0, 1fr); } }

/* == Aktuality ============================================================ */

.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.article-card {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    height: 100%;
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--white);
    color: inherit;
    text-decoration: none;
    transition: border-color 200ms ease;
}

.article-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--ink-3); }
.article-card__tag { font-weight: 600; color: var(--accent-ink); }
.article-card__title { font-size: 1.1875rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; }
.article-card__text { flex: 1; font-size: 0.9375rem; color: var(--ink-3); }
.article-card__foot { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-3); }

@media (hover: hover) and (pointer: fine) {
    .article-card:hover { border-color: var(--ink-3); }
    .article-card:hover .article-card__title { color: var(--accent-ink); }
}

.article__head { padding-block: clamp(1.75rem, 1rem + 3vw, 3rem) 2.5rem; }
.article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 1rem; font-size: 0.875rem; color: var(--ink-3); }
.article__title { margin: 0 0 1.25rem; font-size: var(--text-2xl); line-height: 1.08; letter-spacing: -0.03em; }
.article__perex { margin: 0; font-size: 1.25rem; line-height: 1.55; color: var(--ink-2); }
.article__author { margin: 1.25rem 0 0; font-size: 0.875rem; color: var(--ink-3); }
.article__body { padding-top: 2rem; border-top: 1px solid var(--line); font-size: 1.0625rem; }
.article__back { margin: 3rem 0 var(--section-y); }

/* Obrázky v aktualitách */
.article__cover { max-width: 68ch; margin: 0 0 2rem; font-size: 1.0625rem; }
.article__cover + .article__body { padding-top: 0; border-top: 0; }
.article__copyright { max-width: 68ch; margin: 2.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.8125rem; line-height: 1.6; color: var(--ink-3); }
.article__copyright + .article__back { margin-top: 1.5rem; }
.article__cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg); background: var(--paper-2); }
.article__body figure { margin: 2rem 0; }
.article__body img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-lg); }
.article__body figcaption { margin-top: 0.5rem; font-size: 0.875rem; color: var(--ink-3); }
.article-card__cover { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); background: var(--paper-2); }

/* == Kontakt ============================================================== */

.contact { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; gap: clamp(2rem, 1rem + 3vw, 4rem); }
.contact__aside { position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; gap: 1rem; }
.contact__aside .aside-card + .aside-card { margin-top: 0; }

.card { padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); }

.form__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}

.form__foot .fineprint { max-width: 26rem; margin: 0; }

.mini-steps { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.mini-steps li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.75rem; }
.mini-steps li > span { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--line-2); border-radius: 50%; font-size: 0.8125rem; }
.mini-steps div { display: grid; gap: 0.125rem; }
.mini-steps strong { font-size: 0.9375rem; }
.mini-steps div span { font-size: 0.875rem; color: var(--ink-3); }

.contact-list { display: grid; gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
.contact-list li { display: flex; align-items: center; gap: 0.625rem; color: var(--ink-2); }
.contact-list .icon { color: var(--ink-3); }
.contact-list a { color: var(--ink); text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }

.form-success {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    padding: 3.5rem 2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--white);
    text-align: center;
}

.form-success:focus { outline: none; }
.form-success__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--ok-soft); color: var(--ok); }
.form-success__icon .icon { width: 1.5rem; height: 1.5rem; }
.form-success h2 { margin: 0; font-size: 1.5rem; }
.form-success p { max-width: 30rem; margin: 0 0 1rem; color: var(--ink-2); }

@media (max-width: 960px) {
    .contact { grid-template-columns: minmax(0, 1fr); }
    .contact__aside { position: static; }
}

/* == Právní stránky, mapa webu =========================================== */

.legal { display: grid; grid-template-columns: 13rem minmax(0, 1fr); align-items: start; gap: 2rem 5rem; }
.legal:has(.legal__aside) { grid-template-columns: minmax(0, 1fr) 20rem; }
.legal__toc { position: sticky; top: calc(var(--header-h) + 1.5rem); font-size: 0.875rem; }
.legal__toc-title { margin: 0 0 0.75rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.legal__toc ol { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.legal__toc a { color: var(--ink-2); text-decoration: none; }
.legal__toc a:hover { color: var(--ink); text-decoration: underline; }
.legal__body { min-width: 0; }
.legal__updated { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink-3); }
.legal__aside { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.legal__revoke { margin-top: 1rem; font-size: 0.875rem; color: var(--ink-3); }

.cookie-group { margin-top: 2.5rem; }
.cookie-group__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cookie-group__head h2 { margin: 0; font-size: 1.25rem; }
.cookie-group > p { max-width: 68ch; color: var(--ink-2); }
.cookie-group .table-wrap { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }

@media (max-width: 900px) {
    .legal, .legal:has(.legal__aside) { grid-template-columns: minmax(0, 1fr); }
    .legal__toc { position: static; padding: 1rem 1.25rem; border-radius: var(--radius); background: var(--paper-2); }
    .legal__aside { position: static; }
}

.sitemap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.sitemap h2 { margin: 0 0 1rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.sitemap ul + h2 { margin-top: 2rem; }
.sitemap ul { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.sitemap a { color: var(--ink-2); text-decoration: none; }
.sitemap a:hover { color: var(--ink); text-decoration: underline; }

@media (max-width: 900px) { .sitemap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sitemap { grid-template-columns: minmax(0, 1fr); } }

/* == Chybová stránka ===================================================== */

.error-page { padding-block: clamp(4rem, 3rem + 6vw, 8rem); }
/* Chybová stránka (404, 403…) na veřejném webu — uprostřed. */
.error-page__inner { max-width: calc(40rem + var(--gutter) * 2); margin-inline: auto; text-align: center; }
.error-page__code { margin: 0 0 1rem; font-size: 0.875rem; color: var(--accent-ink); }
.error-page__title { margin: 0 0 1rem; font-size: var(--text-2xl); letter-spacing: -0.03em; }
.error-page__text { margin: 0 0 2rem; font-size: 1.125rem; color: var(--ink-2); }
.error-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }

/* == Výzva a patička ===================================================== */

.cta { padding-block: clamp(3rem, 2rem + 3vw, 4.5rem); background: var(--night); color: var(--night-text); }
.cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem 4rem; }
.cta__title { max-width: 24ch; margin: 0 0 0.5rem; font-size: var(--text-xl); letter-spacing: -0.025em; }
.cta__text { max-width: 40rem; margin: 0; color: var(--night-muted); }
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.cta__phone { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 500; color: var(--night-text); text-decoration: none; }
.cta__phone:hover { text-decoration: underline; }

.site-footer { padding-block: 3.5rem 2rem; background: var(--paper); font-size: 0.9375rem; }

.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.site-footer__claim { max-width: 22rem; margin: 1rem 0 1.25rem; color: var(--ink-3); }
.site-footer__contact { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.site-footer__contact li { display: flex; align-items: center; gap: 0.5rem; color: var(--ink-2); }
.site-footer__contact .icon { width: 1rem; height: 1rem; color: var(--ink-3); }
.site-footer__title { margin: 0 0 1rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.site-footer__col ul { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.site-footer a, .site-footer .link-button { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover, .site-footer .link-button:hover { color: var(--ink); text-decoration: underline; }

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    font-size: 0.8125rem;
    color: var(--ink-3);
}

.site-footer__bottom p { margin: 0; }
.site-footer__sep { margin: 0 0.25rem; color: var(--ink-4); }
.site-footer__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.site-footer__langs { display: inline-flex; gap: 0.75rem; }
.site-footer__langs a[aria-current] { font-weight: 600; color: var(--ink); }

@media (max-width: 960px) {
    .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .site-footer__intro { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
    .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-footer__col:first-of-type { grid-column: 1 / -1; }
}

/* == Lišta souhlasu s cookies ============================================ */

.consent {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 80;
    width: min(27rem, calc(100vw - 2rem));
    padding: 1.125rem 1.25rem 1rem;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: 0 16px 48px -16px rgb(21 23 27 / 0.3);
    transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}

@starting-style {
    .consent { opacity: 0; transform: translateY(12px); }
}

.consent.is-leaving { opacity: 0; transform: translateY(12px); }
.consent__title { margin: 0 0 0.375rem; font-size: 1rem; letter-spacing: -0.01em; }
.consent__text { margin: 0 0 1rem; font-size: 0.875rem; line-height: 1.5; color: var(--ink-2); }
.consent__text a { color: var(--accent-ink); }
.consent__prefs { max-height: 40vh; margin: 0 0 1rem; border-top: 1px solid var(--line); overflow-y: auto; }
.consent__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.consent__buttons { display: flex; gap: 0.5rem; margin-left: auto; }
.consent__customize { font-size: 0.875rem; color: var(--ink-2); text-decoration: underline; text-underline-offset: 0.2em; }

@media (max-width: 520px) {
    .consent { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; width: auto; }
    .consent__buttons { width: 100%; }
    .consent__buttons .btn { flex: 1; }
}