/* Dizajn webu RTsoft */

:root {
    --farba-pozadie: #0b1120;
    --farba-pozadie-2: #111a2e;
    --farba-panel: #ffffff;
    --farba-svetla: #f6f8fc;
    --farba-text: #16202f;
    --farba-text-tlmeny: #5b6b82;
    --farba-text-inverzny: #eaf0fb;
    --farba-akcent: #2f7bff;
    --farba-akcent-tmavy: #1f5fd0;
    --farba-ram: #e3e9f3;
    --radius: 16px;
    --radius-maly: 10px;
    --tien: 0 12px 32px rgba(16, 32, 60, .10);
    --tien-vyrazny: 0 20px 48px rgba(16, 32, 60, .16);
    --sirka: 1160px;
    --prechod: .2s ease;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    color: var(--farba-text);
    background: var(--farba-panel);
    -webkit-font-smoothing: antialiased;
}

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

a { color: var(--farba-akcent); text-decoration: none; transition: color var(--prechod); }
a:hover { color: var(--farba-akcent-tmavy); }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.02em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 750; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1em; }

.obal { width: 100%; max-width: var(--sirka); margin: 0 auto; padding: 0 24px; }

.preskoc {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--farba-akcent); color: #fff; padding: 10px 18px; border-radius: 0 0 var(--radius-maly) 0;
}
.preskoc:focus { left: 0; color: #fff; }

/* Hlavička */
.hlavicka {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--farba-ram);
}
.hlavicka-obsah { display: flex; align-items: center; gap: 24px; min-height: 72px; }

.znacka {
    font-size: 1.45rem; font-weight: 800; letter-spacing: -.03em; color: var(--farba-text);
}
.znacka span { color: var(--farba-akcent); }

.menu { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.menu a {
    padding: 9px 14px; border-radius: 999px; color: var(--farba-text-tlmeny); font-weight: 600; font-size: .97rem;
}
.menu a:hover { background: var(--farba-svetla); color: var(--farba-text); }
.menu a.aktivny { background: var(--farba-akcent); color: #fff; }

.prepinac-menu {
    display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--farba-ram);
    background: #fff; border-radius: var(--radius-maly); cursor: pointer; padding: 11px 10px;
    flex-direction: column; justify-content: space-between;
}
.prepinac-menu span { display: block; height: 2px; background: var(--farba-text); border-radius: 2px; }

/* Sekcie */
.sekcia { padding: 36px 0; }
.sekcia.svetla { background: var(--farba-svetla); }
.sekcia.tmava { background: var(--farba-pozadie); color: var(--farba-text-inverzny); }
.sekcia.tmava h2 { color: #fff; }

.nadnadpis {
    display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--farba-akcent); margin-bottom: 14px;
}
.uvodny-text { font-size: 1.15rem; color: var(--farba-text-tlmeny); max-width: 720px; }
.sekcia.tmava .uvodny-text { color: #b9c6dd; }

.hlavicka-sekcie { margin-bottom: 32px; }
.hlavicka-sekcie.stred { text-align: center; }
.hlavicka-sekcie.stred .uvodny-text { margin-left: auto; margin-right: auto; }

/* Hrdina */
.hrdina {
    position: relative; overflow: hidden;
    background: radial-gradient(1000px 520px at 78% -12%, #1e3a73 0%, transparent 62%), linear-gradient(160deg, var(--farba-pozadie) 0%, var(--farba-pozadie-2) 100%);
    color: var(--farba-text-inverzny);
    padding: 108px 0 96px;
}
.hrdina h1 { color: #fff; max-width: 900px; }
.hrdina-logo {
    display: block; width: auto; height: auto;
    max-width: min(420px, 80%); max-height: 180px;
    margin: 0 auto 32px;
}
.hrdina .uvodny-text { color: #c3d1e8; font-size: 1.22rem; }
.hrdina-tlacidla { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* Vycentrovaná varianta hrdinu (úvodná stránka s logom). */
.hrdina.stred { padding-top: 56px; }
.hrdina.stred .obal {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.hrdina.stred .hrdina-logo { margin-left: auto; margin-right: auto; }
.hrdina.stred h1 { max-width: 900px; margin-left: auto; margin-right: auto; }
.hrdina.stred .uvodny-text { max-width: 720px; margin-left: auto; margin-right: auto; }
.hrdina.stred .hrdina-tlacidla { justify-content: center; }

.hrdina.mala { padding: 76px 0 64px; }

/* Tlačidlá */
.tlacidlo {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 26px; border-radius: 999px; font-weight: 650; font-size: 1rem;
    background: var(--farba-akcent); color: #fff; border: 1px solid var(--farba-akcent);
    cursor: pointer; transition: transform var(--prechod), background var(--prechod), box-shadow var(--prechod);
}
.tlacidlo:hover { background: var(--farba-akcent-tmavy); border-color: var(--farba-akcent-tmavy); color: #fff; transform: translateY(-1px); box-shadow: var(--tien); }
.tlacidlo.obrysove { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.tlacidlo.obrysove:hover { background: rgba(255, 255, 255, .10); }
.tlacidlo.svetle { background: #fff; color: var(--farba-text); border-color: #fff; }

/* Mriežky a karty */
.mriezka { display: grid; gap: 24px; }
.mriezka.dve { grid-template-columns: repeat(2, 1fr); }
.mriezka.tri { grid-template-columns: repeat(3, 1fr); }
.mriezka.styri { grid-template-columns: repeat(4, 1fr); }

.karta {
    background: #fff; border: 1px solid var(--farba-ram); border-radius: var(--radius);
    padding: 28px; transition: transform var(--prechod), box-shadow var(--prechod), border-color var(--prechod);
    display: flex; flex-direction: column;
}
.karta:hover { transform: translateY(-3px); box-shadow: var(--tien); border-color: #cfdbee; }
.karta h3 { margin-bottom: .4em; }
.karta p { color: var(--farba-text-tlmeny); margin: 0; }
.karta-text p { color: var(--farba-text-tlmeny); margin: 0 0 .7em; }
.karta-text p:last-child { margin-bottom: 0; }
.karta .cislo { display: none; }

/* Aplikácie */
.aplikacia-nahlad { border-radius: var(--radius-maly); overflow: hidden; margin: -4px 0 18px; background: var(--farba-svetla); aspect-ratio: 16 / 9; }
.aplikacia-nahlad img { width: 100%; height: 100%; object-fit: cover; }
.karta-aplikacie .odkaz-detail { margin-top: 18px; font-weight: 650; }
.znacky { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.znacka-mala {
    font-size: .8rem; font-weight: 650; color: var(--farba-text-tlmeny);
    background: var(--farba-svetla); border: 1px solid var(--farba-ram); border-radius: 999px; padding: 4px 12px;
}

.detail-rozlozenie { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.text-obsah { max-width: 800px; }
.text-obsah p { margin: 0 0 16px; line-height: 1.75; }
.bocny-panel {
    background: #fff; border: 1px solid var(--farba-ram); border-radius: var(--radius);
    padding: 24px; box-shadow: var(--tien); position: sticky; top: 96px;
}
.bocny-panel dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; }
.bocny-panel dt { color: var(--farba-text-tlmeny); font-size: .92rem; }
.bocny-panel dd { margin: 0; font-size: .92rem; font-weight: 500; text-align: right; }

.zoznam-vlastnosti { list-style: none; margin: 0; padding: 0; }
.zoznam-vlastnosti li { position: relative; padding-left: 30px; margin-bottom: 10px; }
.zoznam-vlastnosti li::before {
    content: "✓"; position: absolute; left: 0; top: 0; color: var(--farba-akcent); font-weight: 800;
}

/* Galéria */
.nadpis-ukazky { font-size: 1.15rem; font-weight: 700; margin: 40px 0 .4em; }
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.galeria button {
    padding: 0; border: 1px solid var(--farba-ram); background: none; border-radius: var(--radius-maly);
    overflow: hidden; cursor: pointer; aspect-ratio: 16 / 10;
}
.galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--prechod); }
.galeria button:hover img { transform: scale(1.04); }

.lightbox {
    position: fixed; inset: 0; background: rgba(6, 12, 24, .92); display: none;
    align-items: center; justify-content: center; z-index: 100; padding: 32px;
}
.lightbox.otvoreny { display: flex; }
.lightbox img { max-width: 100%; max-height: 88vh; border-radius: var(--radius-maly); }
.lightbox button {
    position: absolute; top: 20px; right: 24px; background: none; border: 0; color: #fff;
    font-size: 2.2rem; line-height: 1; cursor: pointer;
}

/* Kontakt */
.kontakt-rozlozenie { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 40px; align-items: start; }
.kontakt-udaje p { margin-bottom: 1.2em; }
.kontakt-udaje strong { display: block; color: var(--farba-text); }

.formular {
    background: #fff; border: 1px solid var(--farba-ram); border-radius: var(--radius);
    padding: 32px; box-shadow: var(--tien);
}
.pole { margin-bottom: 18px; }
.pole label { display: block; font-weight: 650; font-size: .93rem; margin-bottom: 7px; }
.pole input, .pole textarea {
    width: 100%; padding: 12px 14px; font: inherit; font-size: .98rem; color: var(--farba-text);
    border: 1px solid var(--farba-ram); border-radius: var(--radius-maly); background: #fff;
    transition: border-color var(--prechod), box-shadow var(--prechod);
}
.pole textarea { min-height: 150px; resize: vertical; }
.pole input:focus, .pole textarea:focus {
    outline: 0; border-color: var(--farba-akcent); box-shadow: 0 0 0 3px rgba(47, 123, 255, .15);
}
.pole-skryte { position: absolute; left: -9999px; }

.sprava { padding: 14px 18px; border-radius: var(--radius-maly); margin-bottom: 22px; font-weight: 600; }
.sprava.uspech { background: #e7f7ee; color: #14663b; border: 1px solid #b9e6cd; }
.sprava.chyba { background: #fdeaea; color: #8f2020; border: 1px solid #f5c2c2; }

/* Výzva */
.vyzva {
    background: linear-gradient(135deg, var(--farba-akcent) 0%, #1746a8 100%);
    color: #fff; border-radius: var(--radius); padding: 52px; text-align: center;
}
.vyzva h2 { color: #fff; }
.vyzva p { color: #dbe6ff; max-width: 680px; margin: 0 auto 26px; }

/* Pätička */
.paticka { background: var(--farba-pozadie); color: #9fb0cb; padding: 56px 0 28px; margin-top: 0; }
.paticka-obsah { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; }
.paticka a { color: #c6d4ea; }
.paticka a:hover { color: #fff; }
.znacka-paticka { color: #fff; font-size: 1.2rem; display: block; margin-bottom: 10px; }
.paticka-menu { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: flex-start; }
.paticka-spodok {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, .08); margin-top: 36px; padding-top: 20px; color: #78889f;
}

/* Responzivita */
@media (max-width: 1000px) {
    .mriezka.styri { grid-template-columns: repeat(2, 1fr); }
    .detail-rozlozenie, .kontakt-rozlozenie { grid-template-columns: 1fr; }
    .bocny-panel { position: static; }
}

@media (max-width: 820px) {
    .prepinac-menu { display: flex; }
    .menu {
        display: none; position: absolute; top: 72px; left: 0; right: 0;
        flex-direction: column; gap: 2px; padding: 14px 24px 20px;
        background: #fff; border-bottom: 1px solid var(--farba-ram); box-shadow: var(--tien);
    }
    .menu.otvorene { display: flex; }
    .mriezka.tri, .mriezka.dve, .galeria { grid-template-columns: 1fr 1fr; }
    .sekcia { padding: 32px 0; }
    .hrdina { padding: 76px 0 64px; }
    .vyzva { padding: 36px 24px; }
}

@media (max-width: 560px) {
    body { font-size: 16px; }
    .mriezka.tri, .mriezka.dve, .mriezka.styri, .galeria { grid-template-columns: 1fr; }
    .obal { padding: 0 18px; }
    .formular { padding: 22px; }
    .hrdina-logo { max-height: 120px; max-width: 100%; margin: 0 auto 24px; }
    .hrdina-tlacidla .tlacidlo { width: 100%; }
}