/* === app.css === */
:root {
    --farba-hlavna: #2563eb;
    --farba-hlavna-tmava: #1d4ed8;
    --farba-akcent: #06b6d4;
    --farba-text: #0f172a;
    --farba-text-jemny: #475569;
    --farba-pozadie: #ffffff;
    --farba-pozadie-jemne: #f1f5f9;
    --farba-okraj: #e2e8f0;
    --farba-chyba: #dc2626;
    --farba-uspech: #16a34a;
    --zaoblenie: 14px;
    --tien: 0 10px 30px -12px rgba(15, 23, 42, .18);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--farba-text);
    background: var(--farba-pozadie);
    line-height: 1.6;
}

a { color: var(--farba-hlavna); text-decoration: none; }
a:hover { color: var(--farba-hlavna-tmava); }
img { max-width: 100%; display: block; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .6em; }
h1:focus { outline: none; }

.kontajner { width: min(1160px, 100% - 2.5rem); margin-inline: auto; }

.preskocit { position: absolute; left: -999px; }
.preskocit:focus { left: 1rem; top: 1rem; z-index: 100; background: #fff; padding: .5rem 1rem; }

/* ---------- Hlavička ---------- */
.hlavicka {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--farba-okraj);
}
.hlavicka-vnutro { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo { font-size: 1.6rem; font-weight: 800; color: var(--farba-text); letter-spacing: -.03em; }
.logo span { color: var(--farba-hlavna); }
.menu { display: flex; gap: .3rem; align-items: center; }
.menu a { color: var(--farba-text-jemny); font-weight: 500; padding: .5rem .9rem; border-radius: 999px; }
.menu a:hover, .menu a.active { color: var(--farba-text); background: var(--farba-pozadie-jemne); }
.menu a.menu-vyzva { background: var(--farba-hlavna); color: #fff; }
.menu a.menu-vyzva:hover, .menu a.menu-vyzva.active { background: var(--farba-hlavna-tmava); color: #fff; }
.menu-prepinac, .menu-tlacidlo { display: none; }

@media (max-width: 860px) {
    .menu-tlacidlo { display: block; font-size: 1.6rem; cursor: pointer; }
    .menu {
        display: none; position: absolute; top: 72px; left: 0; right: 0;
        flex-direction: column; align-items: stretch; background: #fff;
        padding: 1rem; border-bottom: 1px solid var(--farba-okraj);
    }
    .menu-prepinac:checked ~ .menu { display: flex; }
}

/* ---------- Tlačidlá ---------- */
.tlacidlo {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .85rem 1.5rem; border-radius: 999px; font-weight: 600;
    border: 2px solid transparent; cursor: pointer; font-size: 1rem;
    transition: transform .15s, background .15s;
    font-family: inherit;
}
.tlacidlo:hover { transform: translateY(-2px); }
.tlacidlo-hlavne { background: var(--farba-hlavna); color: #fff; }
.tlacidlo-hlavne:hover { background: var(--farba-hlavna-tmava); color: #fff; }
.tlacidlo-obrys { border-color: var(--farba-okraj); color: var(--farba-text); background: #fff; }
.tlacidlo-obrys:hover { border-color: var(--farba-hlavna); color: var(--farba-hlavna); }
.tlacidlo-biele { background: #fff; color: var(--farba-hlavna); }

/* ---------- Úvodná sekcia ---------- */
.uvod {
    position: relative; overflow: hidden;
    padding: 7rem 0 6rem;
    background:
        radial-gradient(circle at 15% 20%, rgba(37, 99, 235, .15), transparent 40%),
        radial-gradient(circle at 85% 30%, rgba(6, 182, 212, .15), transparent 40%),
        var(--farba-pozadie);
    text-align: center;
}
.stitok {
    display: inline-block; padding: .35rem 1rem; border-radius: 999px;
    background: rgba(37, 99, 235, .1); color: var(--farba-hlavna);
    font-weight: 600; font-size: .9rem; margin-bottom: 1.2rem;
}
.uvod h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 800; letter-spacing: -.03em; max-width: 850px; margin-inline: auto; }
.uvod h1 em { font-style: normal; background: linear-gradient(90deg, var(--farba-hlavna), var(--farba-akcent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.uvod p { font-size: 1.2rem; color: var(--farba-text-jemny); max-width: 640px; margin: 0 auto 2rem; }
.uvod-tlacidla { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ---------- Sekcie ---------- */
.sekcia { padding: 5rem 0; }
.sekcia-jemna { background: var(--farba-pozadie-jemne); }
.sekcia-hlavicka { text-align: center; max-width: 960px; margin: 0 auto 3rem; }
.sekcia-hlavicka h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); letter-spacing: -.02em; }
.sekcia-hlavicka p { color: var(--farba-text-jemny); max-width: 680px; margin-inline: auto; }
.sekcia-pata { text-align: center; margin-top: 2.5rem; }

.nadpis-stranky { padding: 4rem 0 2rem; text-align: center; }
.nadpis-stranky h1 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.02em; }
.nadpis-stranky p { color: var(--farba-text-jemny); font-size: 1.1rem; }

/* ---------- Karty ---------- */
.mriezka { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.karta {
    background: #fff; border: 1px solid var(--farba-okraj); border-radius: var(--zaoblenie);
    padding: 2rem; transition: transform .2s, box-shadow .2s;
    display: flex; flex-direction: column;
}
.karta:hover { transform: translateY(-4px); box-shadow: var(--tien); }
.karta p { color: var(--farba-text-jemny); flex: 1; }
.karta-ikona {
    width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center;
    font-size: 1.7rem; background: linear-gradient(135deg, rgba(37, 99, 235, .12), rgba(6, 182, 212, .12));
    margin-bottom: 1.2rem;
}
.karta-obrazok { margin: -2rem -2rem 1.5rem; aspect-ratio: 16/9; overflow: hidden; border-radius: var(--zaoblenie) var(--zaoblenie) 0 0; background: var(--farba-pozadie-jemne); }
.karta-obrazok img { width: 100%; height: 100%; object-fit: cover; }
.karta-odkaz { font-weight: 600; margin-top: 1rem; }

.referencia blockquote { margin: 0 0 1rem; font-style: italic; color: var(--farba-text-jemny); }
.referencia .autor { font-weight: 600; }
.referencia img { display: block; width: auto; height: auto; max-width: min(100%, 220px); max-height: 60px; object-fit: contain; align-self: flex-start; margin-bottom: 1rem; }

/* ---------- Výzva ---------- */
.vyzva {
    background: linear-gradient(135deg, var(--farba-hlavna), var(--farba-akcent));
    color: #fff; border-radius: 24px; padding: 4rem 2rem; text-align: center;
}
.vyzva p { max-width: 640px; margin: 0 auto 2rem; opacity: .92; font-size: 1.1rem; }

/* ---------- Obsah (markdown) ---------- */
.obsah-textu { max-width: 780px; margin-inline: auto; font-size: 1.08rem; }
.obsah-textu h2 { margin-top: 2rem; }
.obsah-textu img { border-radius: var(--zaoblenie); margin: 1.5rem 0; }
.obsah-textu table { border-collapse: collapse; width: 100%; }
.obsah-textu td, .obsah-textu th { border: 1px solid var(--farba-okraj); padding: .5rem; }
.detail-obrazok { max-width: 900px; margin: 0 auto 3rem; border-radius: 20px; overflow: hidden; box-shadow: var(--tien); }

/* ---------- Formuláre ---------- */
.formular { display: grid; gap: 1.1rem; }
.pole label { display: block; font-weight: 600; margin-bottom: .35rem; font-size: .95rem; }
.pole input:not([type=checkbox]), .pole textarea, .pole select {
    width: 100%; padding: .75rem 1rem; border: 1px solid var(--farba-okraj); border-radius: 10px;
    font: inherit; background: #fff;
}
.pole input:focus, .pole textarea:focus, .pole select:focus { outline: 2px solid rgba(37, 99, 235, .35); border-color: var(--farba-hlavna); }
.pole-zaskrtavacie { display: flex; align-items: center; gap: .5rem; font-weight: 500; }
.validation-message { color: var(--farba-chyba); font-size: .9rem; }
.invalid { border-color: var(--farba-chyba) !important; }
.hlasenie { padding: 1rem 1.2rem; border-radius: 10px; margin-bottom: 1rem; }
.hlasenie-uspech { background: #dcfce7; color: #166534; }
.hlasenie-chyba { background: #fee2e2; color: #991b1b; }

.kontakt-mriezka { display: grid; gap: 3rem; grid-template-columns: 1fr 1.4fr; }
@media (max-width: 860px) { .kontakt-mriezka { grid-template-columns: 1fr; } }
.kontakt-udaj { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
.kontakt-udaj .karta-ikona { margin: 0; flex-shrink: 0; }

/* ---------- Pätička ---------- */
.paticka { background: var(--farba-text); color: #cbd5e1; padding: 3rem 0; margin-top: 4rem; }
.paticka a { color: #fff; }
.paticka-vnutro { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.paticka-maly { font-size: .9rem; opacity: .7; align-self: end; }

/* ---------- Chyba Blazor ---------- */
#blazor-error-ui {
    background: #fef3c7; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
    display: none; left: 0; padding: .6rem 1.25rem .7rem 1.25rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }
.blazor-error-boundary { background: #b32121; padding: 1rem; color: #fff; }
.blazor-error-boundary::after { content: "Nastala chyba."; }

/* ---------- Administrácia ---------- */
.admin { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; background: var(--farba-pozadie-jemne); }
.admin-bocny { background: var(--farba-text); color: #cbd5e1; padding: 1.5rem 1rem; display: flex; flex-direction: column; gap: .2rem; }
.admin-bocny .logo { color: #fff; margin: 0 .75rem 1.5rem; }
.admin-bocny a { color: #cbd5e1; padding: .6rem .75rem; border-radius: 8px; display: flex; justify-content: space-between; }
.admin-bocny a:hover, .admin-bocny a.active { background: rgba(255, 255, 255, .08); color: #fff; }
.admin-bocny a.admin-podmenu { padding: .35rem .75rem .35rem 2.1rem; font-size: .88rem; color: #94a3b8; }
.admin-bocny form { margin-top: auto; }
.admin-bocny button { width: 100%; background: transparent; color: #cbd5e1; border: 1px solid #334155; padding: .6rem; border-radius: 8px; cursor: pointer; font: inherit; }
.admin-obsah { padding: 2rem 2.5rem; min-width: 0; }
.admin-hlavicka { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap; }
.admin-hlavicka h1 { margin: 0; font-size: 1.8rem; }
.panel { background: #fff; border-radius: var(--zaoblenie); border: 1px solid var(--farba-okraj); padding: 1.5rem; margin-bottom: 1.5rem; }
.tabulka { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--zaoblenie); overflow: hidden; border: 1px solid var(--farba-okraj); }
.tabulka th, .tabulka td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--farba-okraj); vertical-align: middle; }
.tabulka th { background: #f8fafc; font-size: .85rem; text-transform: uppercase; color: var(--farba-text-jemny); letter-spacing: .03em; }
.tabulka tr:last-child td { border-bottom: none; }
.tabulka .akcie { text-align: right; white-space: nowrap; }
.tabulka .neprecitana td { font-weight: 600; }
.odznak { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.odznak-zeleny { background: #dcfce7; color: #166534; }
.odznak-sivy { background: #e2e8f0; color: #475569; }
.odznak-modry { background: #dbeafe; color: #1e40af; }
.tlacidlo-male { padding: .4rem .9rem; font-size: .9rem; }
.tlacidlo-cervene { background: var(--farba-chyba); color: #fff; }
.dve-stlpce { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
.nahlad-obrazka { max-height: 140px; border-radius: 10px; margin-top: .5rem; }
.statistiky { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.statistika { background: #fff; border: 1px solid var(--farba-okraj); border-radius: var(--zaoblenie); padding: 1.5rem; color: var(--farba-text); }
.statistika strong { display: block; font-size: 2.2rem; }
.prihlasenie { min-height: 100vh; display: grid; place-items: center; background: var(--farba-pozadie-jemne); padding: 1rem; }
.prihlasenie .panel { width: min(400px, 100%); }
@media (max-width: 860px) {
    .admin { grid-template-columns: 1fr; }
    .dve-stlpce { grid-template-columns: 1fr; }
    .admin-obsah { padding: 1.5rem 1rem; }
}

/* === doplnky.css === */
/* ---------- Doplnky: predaj, SEO prvky, časté otázky ---------- */
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

.dovery { list-style: none; padding: 0; margin: 2.5rem 0 0; display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; color: var(--farba-text-jemny); font-weight: 500; }

.omrvinky ol { list-style: none; padding: 0; margin: 0 0 1.2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; font-size: .9rem; color: var(--farba-text-jemny); }
.omrvinky li + li::before { content: "\203A"; margin-right: .4rem; opacity: .6; }
.nadpis-produktu .omrvinky ol { justify-content: flex-start; }

.postup { list-style: none; counter-reset: krok; padding: 0; margin: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.postup li { counter-increment: krok; background: #fff; border: 1px solid var(--farba-okraj); border-radius: var(--zaoblenie); padding: 1.8rem; display: flex; flex-direction: column; gap: .4rem; }
.postup li::before { content: counter(krok); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--farba-hlavna); color: #fff; font-weight: 700; margin-bottom: .6rem; }
.postup span { color: var(--farba-text-jemny); }

.otazky { max-width: 820px; margin-inline: 0; display: grid; gap: .8rem; }
.faq-detail { padding-top: 0; }
.faq-detail .otazky { max-width: 780px; }
.faq-detail h2 { max-width: 780px; margin: 0 auto 1.25rem; font-size: 1.6rem; letter-spacing: -.01em; text-align: left; }
.otazka { background: #fff; border: 1px solid var(--farba-okraj); border-radius: var(--zaoblenie); padding: 0 1.4rem; }
.otazka summary { cursor: pointer; font-weight: 600; padding: 1.1rem 0; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.otazka summary::-webkit-details-marker { display: none; }
.otazka summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--farba-hlavna); }
.otazka[open] summary::after { content: "\2013"; }
.otazka .odpoved { color: var(--farba-text-jemny); padding-bottom: 1rem; }

.produkt { display: grid; gap: 3rem; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); text-align: left; align-items: start; }
.produkt .perex { font-size: 1.2rem; }
.nazov-po-riadkoch { white-space: pre-line; hyphens: manual; overflow-wrap: normal; }
.obsah-textu .lead { font-size: 1.15rem; color: var(--farba-text-jemny); }
.obsah-textu .benefits { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); margin: 1rem 0 2rem; }
.obsah-textu .benefit { padding: 1.25rem; border: 1px solid var(--farba-okraj); border-radius: var(--zaoblenie); background: var(--farba-pozadie-jemne); }
.obsah-textu .benefit h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.obsah-textu .benefit p { margin: 0; }
.obsah-textu .cta { margin-top: 2rem; padding: 1.5rem; border-radius: var(--zaoblenie); background: rgba(29, 95, 214, .08); border-left: 4px solid var(--farba-hlavna); }
.obsah-textu .cta h2 { margin-top: 0; }
.obsah-textu .cta p:last-child { margin-bottom: 0; }
.otazka-riadok { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--farba-okraj); }
.otazka-riadok .akcie { margin-left: auto; display: flex; gap: .4rem; }
.otazka-poradie { color: var(--farba-text-jemny); min-width: 1.5rem; }
.otazka-uprava { padding: 1rem; margin: .5rem 0; border: 1px solid var(--farba-okraj); border-radius: var(--zaoblenie); }
.otazka-uprava .akcie { display: flex; gap: .5rem; }
.obsah-textu img { cursor: zoom-in; }
.vyskakovaci-obrazok { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 2rem; background: rgba(10, 15, 25, .85); cursor: zoom-out; animation: vyskocenie .2s ease; }
.vyskakovaci-obrazok img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); background: #fff; }
.vyskakovaci-zavriet { position: absolute; top: 1rem; right: 1.25rem; border: 0; background: none; color: #fff; font-size: 2.5rem; line-height: 1; cursor: pointer; }
@keyframes vyskocenie { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) { .produkt { grid-template-columns: 1fr; } }
.vyhody { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .6rem; }
.vyhody li::before { content: "\2714"; color: var(--farba-uspech); font-weight: 700; margin-right: .6rem; }
.cenovy-box { position: sticky; top: 90px; box-shadow: var(--tien); display: grid; gap: .8rem; }
.cena strong { display: block; font-size: 2rem; letter-spacing: -.02em; }
.cena span { color: var(--farba-text-jemny); }
.parametre { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; margin: .5rem 0; font-size: .95rem; }
.parametre dd { margin: 0; text-align: right; font-weight: 600; }
.informacie-nadpis { font-size: 1.2rem; margin: .5rem 0 0; }
.parametre dt { color: var(--farba-text-jemny); }
.posledna-aktualizacia { margin: .25rem 0 .75rem; font-size: .85rem; color: var(--farba-text-jemny); }
.parametre dd { margin: 0; font-weight: 600; }
.tlacidlo-plne { width: 100%; justify-content: center; }
.aktualizovane { max-width: 780px; margin: 2rem auto 0; font-size: .9rem; color: var(--farba-text-jemny); }

.karta { position: relative; }
.odkaz-karty { color: inherit; }
.odkaz-karty::after { content: ""; position: absolute; inset: 0; border-radius: var(--zaoblenie); }
.stitok-maly { font-size: .75rem; padding: .2rem .7rem; margin-bottom: .8rem; align-self: flex-start; }
.karta-pata { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; }
.karta-pata .karta-odkaz { margin: 0; }
.cena-mala { font-weight: 700; }
.hviezdy { color: #f59e0b; letter-spacing: .1em; margin-bottom: .6rem; }
.nadpis-kategorie { font-size: 1.4rem; margin: 2rem 0 1.2rem; }
.h3 { font-size: 1.17rem; }
address { font-style: normal; }

.paticka-vnutro { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
@media (max-width: 860px) { .paticka-vnutro { grid-template-columns: 1fr; } }
.paticka ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.paticka a { color: #cbd5e1; }
.paticka a:hover { color: #fff; }
.paticka-nadpis { font-size: 1rem; color: #fff; margin-bottom: 1rem; }
.paticka-popis { font-size: .92rem; opacity: .8; }
.paticka-odkazy { margin-top: 1rem !important; }
.logo-biele { color: #fff; margin-bottom: .8rem; }
.paticka-maly { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #1e293b; }

.pocitadlo { font-size: .8rem; color: var(--farba-text-jemny); float: right; }
.pocitadlo.prekrocene { color: var(--farba-chyba); }
.nahlad-google { border: 1px solid var(--farba-okraj); border-radius: 10px; padding: 1rem; background: #fff; font-family: Arial, sans-serif; }
.nahlad-google .url { color: #202124; font-size: .85rem; }
.nahlad-google .titulok { color: #1a0dab; font-size: 1.2rem; margin: .2rem 0; }
.nahlad-google .popis { color: #4d5156; font-size: .9rem; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Galéria a nové riadky ---------- */
.s-riadkami { white-space: pre-line; }
.galeria { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-bottom: 2.5rem; }
.galeria img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--zaoblenie); border: 1px solid var(--farba-okraj); transition: transform .2s; }
.galeria a:hover img { transform: scale(1.02); }
.galeria-admin { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); margin-top: .8rem; }
.galeria-polozka img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; border: 1px solid var(--farba-okraj); }
.galeria-akcie { display: flex; gap: .3rem; margin-top: .3rem; }

.galeria figure { margin: 0; }
.galeria figcaption { font-size: .85rem; color: var(--farba-text-jemny); margin-top: .4rem; }
.galeria-polozka input { width: 100%; margin-top: .3rem; font-size: .85rem; padding: .35rem .5rem; }

.logo-obrazok { display: block; height: 40px; width: auto; max-width: 200px; }
.logo-obrazok.logo-paticka { height: auto; max-height: 100px; max-width: 260px; }
.nezalomit { white-space: nowrap; }
.karta-sluzby-nadpis { display: flex; align-items: center; gap: .6rem; }
.karta-sluzby-ikona { flex: none; font-size: 1.5rem; line-height: 1; }
.obsah-textu table { width: max-content; max-width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: .98rem; }
.obsah-textu th, .obsah-textu td { text-align: left; padding: .55rem 1.1rem; border: 1px solid var(--farba-okraj); vertical-align: top; }
.obsah-textu th { background: #f1f5fb; font-weight: 700; }
.obsah-textu tr:nth-child(even) td { background: #fafbfd; }

.detail-obrazok { margin: 0 0 1.5rem; }
.detail-obrazok img { cursor: zoom-in; display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; border-radius: var(--zaoblenie); }

/* === dizajn.css === */
/* ---------- Dizajn: tmavý technologický štýl (podľa pôvodného RTsoft) ---------- */
:root {
    --farba-hlavna: #1d5fd6;
    --farba-hlavna-tmava: #174cad;
    --farba-akcent: #38bdf8;
    --farba-text: #16202f;
    --farba-text-jemny: #4f5f76;
    --farba-pozadie-jemne: #f6f8fc;
    --farba-okraj: #e3e9f3;
    --farba-tmava: #0b1120;
    --farba-tmava-2: #111a2e;
    --zaoblenie: 16px;
    --tien: 0 12px 32px rgba(16, 32, 60, .10);
    --tien-vyrazny: 0 20px 48px rgba(16, 32, 60, .18);
}

body { font-size: 17px; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { letter-spacing: -.02em; }

/* Hlavička */
.hlavicka { background: rgba(255, 255, 255, .9); }
.menu a { font-weight: 600; font-size: .97rem; }
.menu a.active { background: var(--farba-hlavna); color: #fff; }
.menu a.active:hover { background: var(--farba-hlavna-tmava); color: #fff; }

/* Tmavé hrdinské sekcie */
.uvod,
.nadpis-stranky {
    position: relative; overflow: hidden;
    background:
        radial-gradient(1000px 520px at 78% -12%, #1e3a73 0%, transparent 62%),
        radial-gradient(600px 400px at 0% 110%, rgba(56, 189, 248, .12) 0%, transparent 60%),
        linear-gradient(160deg, var(--farba-tmava) 0%, var(--farba-tmava-2) 100%);
    color: #eaf0fb;
}
.uvod::before,
.nadpis-stranky::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at 70% 0%, #000 0%, transparent 70%);
}
.uvod > *, .nadpis-stranky > * { position: relative; }
.uvod { padding: 4.5rem 0 2.5rem; }
.nadpis-stranky { padding: 2.5rem 0 2.5rem; text-align: left; margin-bottom: 3rem; }
.nadpis-stranky h1, .nadpis-stranky p { margin-inline: 0; }
.nadpis-stranky .omrvinky ol { justify-content: flex-start; }
.nadpis-produktu { text-align: left; }
.nadpis-produktu h1, .nadpis-produktu p { margin-inline: 0; }
.nadpis-stranky.nadpis-produktu h1 { max-width: none; font-size: clamp(1.5rem, 2.9vw, 2.05rem); }
.nadpis-produktu .omrvinky ol { justify-content: flex-start; }
.nadpis-kategorie { text-align: left; }
.uvod h1, .nadpis-stranky h1 { color: #fff; }
.nadpis-stranky h1 { max-width: 900px; font-size: clamp(1.7rem, 3.2vw, 2.3rem); font-weight: 800; }
.uvod p, .nadpis-stranky p { color: #c3d1e8; }
.nadpis-stranky p { max-width: 720px; font-size: 1.18rem; }
.uvod h1 em { background: linear-gradient(90deg, #60a5fa, var(--farba-akcent)); -webkit-background-clip: text; background-clip: text; }
.nadpis-stranky a:not(.tlacidlo) { color: #8db4ff; }
.nadpis-stranky a:not(.tlacidlo):hover { color: #fff; }

/* Štítok ako nadnadpis */
.stitok {
    background: none; padding: 0; border-radius: 0;
    font-size: .9rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--farba-hlavna);
}
.uvod .stitok, .nadpis-stranky .stitok { color: #8db4ff; }
.stitok-maly {
    background: rgba(29, 95, 214, .08); padding: .25rem .7rem; border-radius: 999px;
    letter-spacing: .06em; font-size: .7rem;
}

/* Omrvinky na tmavom */
.nadpis-stranky .omrvinky ol { color: #9fb0cb; }
.nadpis-stranky .omrvinky a { color: #c6d4ea; }

/* Tlačidlá na tmavom */
.uvod .tlacidlo-obrys, .nadpis-stranky .tlacidlo-obrys { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.uvod .tlacidlo-obrys:hover, .nadpis-stranky .tlacidlo-obrys:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .6); }
.tlacidlo-hlavne { box-shadow: 0 8px 24px -8px rgba(29, 95, 214, .6); }
.dovery { color: #b9c6dd; }

/* Detail produktu */
.nadpis-produktu .perex { color: #c3d1e8; }
.nadpis-produktu .vyhody li { color: #dbe6ff; }
.nadpis-produktu .vyhody li::before { color: #4ade80; }
.cenovy-box { color: var(--farba-text); border: 0; box-shadow: var(--tien-vyrazny); }
.cenovy-box .tlacidlo-obrys { color: var(--farba-text); border-color: var(--farba-okraj); background: #fff; }
.cenovy-box .tlacidlo-obrys:hover { color: var(--farba-hlavna); border-color: var(--farba-hlavna); background: #fff; }

/* Sekcie */
.sekcia { padding: 2rem 0; }
.nadpis-stranky + .sekcia { padding-top: 0; }
.sekcia-hlavicka h2 { font-weight: 800; }
.sekcia-hlavicka .stitok { margin-bottom: .4rem; }
.sekcia-hlavicka h2 { margin: 0 0 .4rem; }
.sekcia-hlavicka p { margin-top: 0; margin-bottom: 0; }

/* Karty */
.karta { border-color: var(--farba-okraj); padding: 1.75rem; }
.karta:hover { transform: translateY(-3px); box-shadow: var(--tien-vyrazny); border-color: #cfdbee; }
.karta h3 { font-size: 1.15rem; line-height: 1.35; }
.karta-obrazok {
    margin: -1.75rem -1.75rem 1.4rem; border-radius: var(--zaoblenie) var(--zaoblenie) 0 0;
    background: var(--farba-pozadie-jemne);
}
.karta-obrazok img { object-fit: contain; padding: .5rem; transition: transform .4s ease; }
.karta:hover .karta-obrazok img { transform: scale(1.04); }
.karta-ikona { background: linear-gradient(135deg, rgba(29, 95, 214, .12), rgba(56, 189, 248, .14)); }

/* Výzva */
.vyzva {
    position: relative; overflow: hidden;
    background:
        radial-gradient(600px 300px at 100% 0%, rgba(56, 189, 248, .35), transparent 60%),
        linear-gradient(135deg, var(--farba-hlavna) 0%, #1746a8 100%);
    border-radius: var(--zaoblenie); padding: 3.5rem 2rem;
}
.vyzva h2 { color: #fff; }
.vyzva p { color: #dbe6ff; opacity: 1; }

/* Časté otázky – stránka */
.faq-stranka > * { max-width: 820px; }
.faq-stranka h2 { font-size: 1.45rem; margin: 3rem 0 1.1rem; scroll-margin-top: 90px; }
.faq-stranka h2:first-child { margin-top: 0; }
.faq-odkaz { margin: 1rem 0 0; text-align: right; font-weight: 600; }

/* Časté otázky */
.otazka { border-radius: 12px; transition: border-color .2s, box-shadow .2s; }
.otazka:hover { border-color: #cfdbee; }
.otazka[open] { box-shadow: var(--tien); border-color: #cfdbee; }

/* Pätička */
.paticka { background: var(--farba-tmava); color: #cbd5e1; }
.paticka a { color: #e2e8f0; }
.paticka-popis { opacity: 1; }
.paticka-maly { border-top-color: rgba(255, 255, 255, .08); color: #b6c2d4; opacity: 1; }

@media (max-width: 860px) {
    .uvod { padding: 3.5rem 0 2rem; }
    .nadpis-stranky { padding: 2rem 0 2rem; margin-bottom: 2rem; }
    .sekcia { padding: 1.75rem 0; }
    .cenovy-box { position: static; }
    .hlavicka-vnutro { position: relative; }
    .menu a { padding: .8rem 1rem; }
}

/* ---------- Mobil ---------- */
.nadpis-stranky p, .uvod p, .sekcia-hlavicka p, .vyzva p, .karta p, .paticka-popis, .odpoved p { white-space: pre-line; }
html, body { overflow-x: hidden; }
h1, h2, h3, .karta h3 { overflow-wrap: break-word; hyphens: manual; }
.mriezka { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.vysledok-projektu { margin: 0 0 1.5rem; border-left: 4px solid var(--farba-hlavna, #2563eb); }
.vysledok-projektu h2 { margin-top: 0; }
.mriezka.mriezka-aplikacii { grid-template-columns: repeat(var(--stlpce-aplikacii, 3), minmax(0, 1fr)); }
.mriezka.mriezka-sluzieb { grid-template-columns: repeat(var(--stlpce-sluzieb, 2), minmax(0, 1fr)); }
.mriezka.mriezka-projektov { grid-template-columns: repeat(var(--stlpce-projektov, 3), minmax(0, 1fr)); }
.mriezka.mriezka-referencii { grid-template-columns: repeat(var(--stlpce-referencii, 2), minmax(0, 1fr)); }
@media (max-width: 900px) {
    .mriezka.mriezka-projektov { grid-template-columns: repeat(var(--stlpce-projektov-tablet, 2), minmax(0, 1fr)); }
    .mriezka.mriezka-referencii { grid-template-columns: repeat(var(--stlpce-referencii-tablet, 2), minmax(0, 1fr)); }
    .mriezka.mriezka-aplikacii { grid-template-columns: repeat(var(--stlpce-aplikacii-tablet, 2), minmax(0, 1fr)); }
    .mriezka.mriezka-sluzieb { grid-template-columns: repeat(var(--stlpce-sluzieb-tablet, 2), minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .mriezka.mriezka-aplikacii, .mriezka.mriezka-sluzieb, .mriezka.mriezka-projektov, .mriezka.mriezka-referencii { grid-template-columns: 1fr; }
}
.galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.galeria figure:nth-child(n+4) { display: none; }
.galeria-dalsie { position: relative; display: block; }
.galeria-dalsie::after {
    content: attr(data-zvysok); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(10, 15, 25, .6); color: #fff; font-size: 1.8rem; font-weight: 700; border-radius: var(--zaoblenie);
}
.vyskakovaci-sipka {
    position: absolute; top: 50%; transform: translateY(-50%); border: 0; background: rgba(255, 255, 255, .12); color: #fff;
    width: 3rem; height: 3rem; border-radius: 50%; font-size: 1.8rem; line-height: 1; cursor: pointer;
}
.vyskakovaci-sipka:hover { background: rgba(255, 255, 255, .25); }
.vyskakovaci-predosla { left: 1rem; }
.vyskakovaci-dalsia { right: 1rem; }
.vyskakovaci-pocet { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); color: #c6d4ea; font-size: .9rem; }
@media (max-width: 560px) {
    .galeria { gap: .5rem; }
    .galeria-dalsie::after { font-size: 1.3rem; }
    .vyskakovaci-sipka { width: 2.4rem; height: 2.4rem; font-size: 1.4rem; }
}
.postup { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.obsah-textu table { display: block; overflow-x: auto; }
.obsah-textu pre { overflow-x: auto; }
.obsah-textu { overflow-wrap: break-word; }

@media (max-width: 560px) {
    body { font-size: 16px; }
    .kontajner { width: calc(100% - 2rem); }
    .uvod { padding: 2.5rem 0 1.75rem; }
    .uvod p, .nadpis-stranky p { font-size: 1.05rem; }
    .nadpis-stranky { padding: 3rem 0 2.5rem; }
    .uvod-tlacidla { flex-direction: column; align-items: stretch; }
    .uvod-tlacidla .tlacidlo { justify-content: center; }
    .dovery { flex-direction: column; align-items: center; gap: .5rem; }
    .sekcia { padding: 1.5rem 0; }
    .sekcia-hlavicka { margin-bottom: 2rem; }
    .karta { padding: 1.4rem; }
    .karta-obrazok { margin: -1.4rem -1.4rem 1.2rem; }
    .vyzva { padding: 2.5rem 1.25rem; }
    .vyzva .tlacidlo { width: 100%; justify-content: center; }
    .cena strong { font-size: 1.6rem; }
    .otazka { padding: 0 1rem; }
    .otazka summary { padding: .95rem 0; }
    .faq-detail h2 { font-size: 1.35rem; }
    .kontakt-udaj { gap: .75rem; }
}

/* Editor obsahu (admin) */
.editor-obsahu { border: 1px solid #cbd5e1; border-radius: 8px; overflow: hidden; }
.editor-obsahu textarea { width: 100%; border: 0; border-radius: 0; }
.editor-lista { display: flex; flex-wrap: wrap; gap: .25rem; padding: .4rem; background: #f1f5f9; border-bottom: 1px solid #cbd5e1; }
.editor-lista button, .editor-lista .editor-nahrat { border: 1px solid #cbd5e1; background: #fff; border-radius: 6px; padding: .25rem .55rem; cursor: pointer; font-size: .85rem; }
.editor-lista .editor-nahrat:hover { background: #2563eb; color: #fff; }
.editor-lista button:hover, .editor-lista button.aktivne { background: #2563eb; color: #fff; }
.editor-medzera { flex: 1; }
.editor-nahlad { padding: 1rem; max-height: 600px; overflow: auto; background: #fff; }

/* Bloky v obsahu */
.blok-zvyrazneny { background: #eff6ff; border-left: 4px solid #2563eb; border-radius: 8px; padding: 1rem 1.25rem; margin: 1.5rem 0; }
.blok-stlpce { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 1.5rem 0; }
.blok-tlacidlo { display: inline-block; background: #2563eb; color: #fff !important; padding: .7rem 1.4rem; border-radius: 999px; font-weight: 600; text-decoration: none !important; }
.blok-tlacidlo:hover { background: #1d4ed8; }
.blok-video { position: relative; aspect-ratio: 16 / 9; margin: 1.5rem 0; }
.blok-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 10px; }
.obsah-textu img { max-width: 100%; height: auto; border-radius: 10px; }
.obsah-textu .zarovnanie-vlavo { text-align: left; }
.obsah-textu .zarovnanie-stred { text-align: center; }
.obsah-textu .zarovnanie-vpravo { text-align: right; }
.obsah-textu .zarovnanie-stred img { margin-left: auto; margin-right: auto; }
.obsah-textu .zarovnanie-vpravo img { margin-left: auto; margin-right: 0; }
.obsah-textu .zarovnanie-vlavo img { margin-left: 0; margin-right: auto; }
@media (max-width: 700px) { .blok-stlpce { grid-template-columns: 1fr; } }

/* Detail aplikácie a služby – obsah, dátum a časté otázky zarovnané rovnako */
.obsah-textu, .aktualizovane, .faq-detail h2, .faq-detail .otazky, .faq-detail .podnadpis, .faq-detail p { max-width: none; margin-left: 0; margin-right: 0; }
.faq-detail { padding-top: 1rem; }

/* Stránka O nás – vycentrovaný obsah */
.obsah-textu.obsah-vycentrovany { max-width: 820px; margin-left: auto; margin-right: auto; text-align: center; }
.obsah-vycentrovany ul, .obsah-vycentrovany ol { display: inline-block; text-align: left; }
