/*
 * Vzhled webu safezone.cz.
 *
 * Písmo je převzaté z dnešního ostrého webu (Poppins). Barva NE: fialovou
 * #5a49f8 nahradila modrá #1657cf na Otův pokyn (4. 9. 2026).
 * Modrá má navíc vyšší kontrast na bílé (6,37:1 proti 5,61:1), takže je to
 * i čitelnější, ne jen jiné. Co převzaté NENÍ, je ta nálož pluginů:
 * dnešní web táhne Bootstrap, jQuery, tři karusely a animační knihovnu.
 * Tady je jeden soubor stylů, žádný JavaScript a žádné sestavování.
 *
 * 🔴 PÍSMO JE HOSTOVANÉ U NÁS (`/fonty`), ne z Google Fonts. Načítání
 * z cizí domény by znamenalo, že si každý návštěvník sáhne ke Googlu
 * a ten se o něm dozví — u webu bezpečnostní firmy je to zbytečná stopa.
 * Poppins má otevřenou licenci (OFL), takže to jde.
 *
 * Rozbalovací nabídka na mobilu je `<details>`, tedy věc prohlížeče.
 * Bez JavaScriptu funguje i tehdy, když se něco nenačte.
 */

/* --- písmo ------------------------------------------------------------ */

@font-face {
    font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("/fonty/poppins-400-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("/fonty/poppins-400-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("/fonty/poppins-600-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("/fonty/poppins-600-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("/fonty/poppins-700-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("/fonty/poppins-700-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- základ ----------------------------------------------------------- */

:root {
    --znacka: #1657cf;
    --znacka-tmava: #0f3f9c;
    --znacka-svetla: #e9f0fd;
    --text: #16181d;
    --text-tlumeny: #5b6470;
    --linka: #e4e7ec;
    --plocha: #f7f8fb;
    --bila: #fff;
    --tmava: #14161c;
    --varovani: #8a5a00;
    --varovani-plocha: #fff8e6;
    --sirka: 72rem;
    --sirka-textu: 44rem;
    --radius: 12px;
    --stin: 0 1px 2px rgba(20, 22, 28, .06), 0 8px 24px rgba(20, 22, 28, .06);
}

*, *::before, *::after { box-sizing: border-box; }

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

/* Na krátkých stránkách (obchod, tržiště) patička nedosáhla na spodek okna
   a pod ní zbýval bílý pruh — vypadalo to, že se stránka nedopsala. */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--text);
    background: var(--bila);
}

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

a { color: var(--znacka); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--znacka-tmava); }

.preskocit {
    position: absolute; left: -9999px;
    background: var(--znacka); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 8px 0;
}
.preskocit:focus { left: 0; top: 0; z-index: 100; }

/* --- hlavička --------------------------------------------------------- */

.hlavicka {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--linka);
}

/* ⚠️ Hlavička má VLASTNÍ šířku a je to záměr: `--sirka` (72rem) drží
   šířku OBSAHU, aby se text dobře četl. Hlavička ale není text, je to lišta —
   a při 72 rem se nabídka lámala do dvou řádků (změřeno: položky potřebují
   ~823 px, dostávaly 700). Rozšiřuje se JEN ona a JEN na širokých oknech. */
.hlavicka__vnitrek {
    max-width: var(--sirka);
    margin: 0 auto;
    padding: .75rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

@media (min-width: 75rem) {
    .hlavicka__vnitrek { max-width: 82rem; }
}

.logo { display: inline-flex; flex: 0 0 auto; }
.logo img { display: block; width: auto; height: 40px; }

.nabidka { flex: 1 1 auto; min-width: 0; }

/* Přepínač je vidět JEN na mobilu a JEN když běží JavaScript. Bez něj
   zůstane nabídka rozbalená — menu, které nejde schovat, je lepší než menu,
   které nejde otevřít. */
.prepinac {
    display: none;
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    padding: .5rem .9rem;
    color: var(--text);
    background: var(--bila);
    border: 1px solid var(--linka);
    border-radius: 8px;
    cursor: pointer;
}
.prepinac:hover { border-color: var(--znacka); color: var(--znacka); }

/* ⚠️ `>` je tu NUTNÉ, ne kosmetika. Dokud tu stálo `.nabidka ul`,
   mělo to specifičnost 0-1-1 a přebíjelo to `.podmenu { display: none }`
   (0-1-0) — podnabídka „Pro koho" byla na počítači ROZBALENÁ POŘÁD
   a překrývala hero. Změřeno v prohlížeči 5. 9. 2026: display:flex,
   visibility:visible, 240×159 px, i když je myš úplně jinde. */
.nabidka > ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .1rem 1.1rem;   /* zúženo kvůli lámání nabídky */
    margin: 0; padding: 0; list-style: none;
}

.nabidka a {
    display: inline-block;
    padding: .35rem 0;
    color: var(--text-tlumeny);
    text-decoration: none;
    font-size: .97rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
}
.nabidka a:hover { color: var(--text); }

/* Aktuální stránka: barvou I tučností — barva sama je slabý signál. */
.nabidka a[aria-current="page"] {
    color: var(--znacka);
    font-weight: 600;
    border-bottom-color: var(--znacka);
}

.telefon {
    flex: 0 0 auto;
    display: inline-block;
    padding: .55rem 1.05rem;
    background: var(--znacka);
    color: #fff !important;
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    border-radius: 999px;
    white-space: nowrap;
}
.telefon:hover { background: var(--znacka-tmava); }

/* ⚠️ Hranice je 74.99rem, ne 62rem, a je to MĚŘENÍ, ne odhad: mezi 992
   a 1200 px se sedm položek do jednoho řádku nevejde (nav dostane 648 px,
   potřebuje ~800) a nabídka se lámala do dvou řádků přes celou hlavičku.
   Radši přepínač než rozsypaná lišta. Obě `@media` musí mít TUTÉŽ hodnotu —
   druhá řídí podnabídku a při rozejití by se podnabídka chovala
   po počítačovsku uvnitř mobilní nabídky. */
@media (max-width: 74.99rem) {
    .hlavicka__vnitrek { flex-wrap: wrap; }
    .nabidka { order: 3; flex-basis: 100%; }

    /* Se zapnutým JavaScriptem se nabídka sbalí a otevírá přepínačem.
       Bez něj (žádná třída `js`) zůstane vidět. */
    .js .nabidka { display: none; }
    .js .nabidka[data-otevreno] { display: block; }
    .js .prepinac { display: inline-block; margin-left: auto; }

    .nabidka > ul { flex-direction: column; align-items: stretch; gap: 0; }

    /* 🔴 `display: block` a `width: 100%` až sem, ne jen na odkaz: odkaz se
       roztáhne jen na svého rodiče, a `li` jako položka flexu se s
       `flex-start` smrskla na obsah — klepnutí vedle textu pak neudělalo nic.
       (Změřil claude11-testovac: živých 84 px z 350.) */
    .nabidka > ul > li { margin: 0; width: 100%; }

    .nabidka a {
        display: block;
        width: 100%;
        padding: .7rem .2rem;
        border-bottom: 1px solid var(--linka);
        color: var(--znacka);
        font-weight: 600;
    }
    .nabidka a::after { content: " →"; opacity: .5; }
    .nabidka a[aria-current="page"]::after { content: ""; }

    .telefon { margin-left: auto; }
}

/* --- obsah ------------------------------------------------------------ */

main { display: block; flex: 1 0 auto; }

main > h1,
main > h2, main > h3, main > p, main > ul, main > ol,
main > table, main > address, main > .duraz, main > .varovani,
main > .faq, main > .vstupy, main > .perex, main > .podnadpis {
    max-width: var(--sirka-textu);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

main > h1 { margin-top: 3rem; }

h1 {
    font-size: clamp(1.9rem, 5vw, 2.6rem);
    line-height: 1.18;
    letter-spacing: -.02em;
    font-weight: 700;
    margin: 0 0 .85rem;
}

h2 {
    font-size: clamp(1.35rem, 3.2vw, 1.7rem);
    line-height: 1.3;
    letter-spacing: -.01em;
    font-weight: 600;
    margin: 2.75rem 0 .75rem;
}

h3 { font-size: 1.12rem; font-weight: 600; margin: 1.75rem 0 .4rem; }

p { margin: 0 0 1.1rem; }

.perex, .podnadpis {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--text-tlumeny);
    margin-bottom: 1.75rem;
}

ul, ol { margin: 0 0 1.1rem; padding-left: 1.35rem; }
li { margin-bottom: .4rem; }

.duraz {
    padding: 1.15rem 1.35rem;
    background: var(--znacka-svetla);
    border-left: 4px solid var(--znacka);
    border-radius: 0 var(--radius) var(--radius) 0;
    margin-bottom: 1.5rem;
}

.varovani {
    padding: 1.15rem 1.35rem;
    background: var(--varovani-plocha);
    border-left: 4px solid var(--varovani);
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--varovani);
    margin-bottom: 1.5rem;
}

/* --- rozcestník na úvodní --------------------------------------------- */

.vstupy {
    max-width: var(--sirka) !important;
    list-style: none;
    padding: 0 1.25rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1rem;
}

.vstupy li {
    margin: 0;
    padding: 1.5rem;
    background: var(--bila);
    border: 1px solid var(--linka);
    border-radius: var(--radius);
    box-shadow: var(--stin);
    transition: transform .15s ease, box-shadow .15s ease;
}

.vstupy li:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(20,22,28,.07), 0 16px 40px rgba(20,22,28,.09); }

.vstupy a { font-size: 1.1rem; font-weight: 600; text-decoration: none; }
.vstupy a::after { content: " →"; color: var(--znacka); }

/* --- tabulka „co to umí a co ne" -------------------------------------- */

.meze {
    max-width: var(--sirka-textu);
    margin: 0 auto 1.75rem;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bila);
    border: 1px solid var(--linka);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--stin);
}

.meze th, .meze td {
    text-align: left;
    vertical-align: top;
    padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--linka);
}

.meze tr:last-child td { border-bottom: 0; }

.meze thead th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    color: var(--text-tlumeny);
    background: var(--plocha);
}

.meze td:first-child { color: var(--text-tlumeny); width: 40%; }

@media (max-width: 40rem) {
    .meze, .meze tbody, .meze tr, .meze td { display: block; width: 100%; }
    .meze thead { display: none; }
    .meze tr { padding: .85rem 1.1rem; border-bottom: 1px solid var(--linka); }
    .meze td { border: 0; padding: .1rem 0; }
    .meze td:first-child { width: auto; font-weight: 600; color: var(--text); }
}

/* --- nejčastější otázky ----------------------------------------------- */

.faq { margin-top: 3rem; }
.faq > h2 { margin-top: 0; }

.faq-polozka {
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--linka);
}
.faq-polozka:last-child { border-bottom: 0; }

.faq-otazka { margin: 0 0 .3rem; font-size: 1.05rem; font-weight: 600; }
.faq-odpoved { margin: 0; color: var(--text-tlumeny); }

/* --- poptávkový formulář ---------------------------------------------- */

.poptavka {
    margin: 4rem auto 0;
    max-width: var(--sirka);
    padding: 2.25rem 1.25rem 3rem;
    background: var(--plocha);
    border-top: 1px solid var(--linka);
}

.poptavka > * { max-width: var(--sirka-textu); margin-left: auto; margin-right: auto; }
.poptavka h2 { margin-top: 0; }
.poptavka form { display: grid; gap: .85rem; }

.poptavka label { display: block; font-weight: 600; font-size: .95rem; }
.poptavka label span { font-weight: 400; color: var(--text-tlumeny); }
/* ⚠️ `margin: 0` by přebilo automatické okraje výš a odstavec by utekl
   o 200 px vlevo (změřil claude11-testovac). Nulují se proto jen svislé. */
.poptavka p { margin-top: 0; margin-bottom: 0; }

.poptavka input[type="text"], .poptavka input[type="email"],
.poptavka input:not([type]), .poptavka select, .poptavka textarea {
    width: 100%;
    margin-top: .3rem;
    padding: .65rem .8rem;
    font: inherit;
    color: inherit;
    background: var(--bila);
    border: 1px solid var(--linka);
    border-radius: 8px;
}

.poptavka textarea { resize: vertical; }

.poptavka :is(input, select, textarea):focus-visible {
    outline: 2px solid var(--znacka);
    outline-offset: 1px;
    border-color: var(--znacka);
}

button {
    font: inherit;
    font-weight: 600;
    padding: .7rem 1.5rem;
    color: #fff;
    background: var(--znacka);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}
button:hover { background: var(--znacka-tmava); }

[role="alert"] { color: #b3261e; font-weight: 600; }
[role="status"] { color: #146c43; font-weight: 600; }

/* --- patička ---------------------------------------------------------- */

.paticka {
    margin-top: 0;
    padding: 3rem 1.25rem 1.5rem;
    background: var(--tmava);
    color: #b9bfcc;
    font-size: .95rem;
}

.paticka__vnitrek {
    max-width: var(--sirka);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 2rem;
}

.paticka h2 {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #fff;
    margin: 0 0 .75rem;
}

.paticka ul { list-style: none; padding: 0; margin: 0; }
.paticka li { margin-bottom: .35rem; }
.paticka a { color: #d6dae4; text-decoration: none; }
.paticka a:hover { color: #fff; text-decoration: underline; }
.paticka img { margin-bottom: 1rem; height: 34px; width: auto; }

.paticka__patka {
    max-width: var(--sirka);
    margin: 2.5rem auto 0;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255,255,255,.12);
    font-size: .85rem;
    color: #8b93a3;
}

/* --- potvrzení plnoletosti u zbraní ------------------------------------
   Překryv NAD hotovou stránkou, ne brána před ní — obsah zůstává v HTML
   kvůli vyhledávačům. */

.potvrzeni-veku {
    position: fixed; inset: 0; z-index: 60;
    display: flex; align-items: center; justify-content: center;
    padding: 1.25rem;
    background: rgba(20, 22, 28, .8);
}

.potvrzeni-veku__obsah {
    max-width: 27rem;
    padding: 2rem;
    background: var(--bila);
    border-radius: var(--radius);
    text-align: center;
    box-shadow: var(--stin);
}
.potvrzeni-veku__obsah h2 { margin-top: 0; }

/* --- stránky tržiště a obchodu ---------------------------------------- */

.zbrane-obsah { max-width: var(--sirka-textu); margin: 3rem auto; padding: 0 1.25rem; }

/* --- úvodní hlavička (hero) -------------------------------------------
   Jediné místo, kde si web může dovolit velké gesto. Bez fotky: fotka
   instalace je u bezpečnostní firmy údaj o zákazníkovi (rozhodnutí Oty),
   takže se pracuje s barvou a typografií. */

.hero {
    max-width: none !important;
    margin: 0 0 3rem;
    padding: clamp(3rem, 8vw, 5.5rem) 1.25rem clamp(2.5rem, 6vw, 4rem);
    background:
        radial-gradient(60rem 30rem at 15% -10%, rgba(22, 87, 207, .16), transparent 60%),
        radial-gradient(45rem 26rem at 95% 10%, rgba(11, 132, 199, .13), transparent 55%),
        var(--plocha);
    border-bottom: 1px solid var(--linka);
}

.hero__vnitrek {
    max-width: var(--sirka);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: center;
    gap: 2.5rem;
}

.hero__kresba { display: flex; justify-content: center; }
.hero__kresba svg { width: 100%; max-width: 29rem; height: auto; }

/* Titulek v hlavičce začínal o 224 px vlevo od textu pod ní a oko ten skok
   vidělo (změřil claude11-testovac: 144 proti 368). Obojí je zarovnané
   doleva, takže to musí začínat na téže svislici. Posun je rozdíl mezi
   vystředěním širokého pásu a užšího sloupce textu. */
@media (min-width: 72rem) {
    .hero__vnitrek { padding-left: calc((var(--sirka) - var(--sirka-textu)) / 2); }
}

@media (max-width: 54rem) {
    .hero__vnitrek { grid-template-columns: 1fr; gap: 1.5rem; }
    .hero__kresba { order: -1; }
    .hero__kresba svg { max-width: 15rem; }
}

.hero__nadpisek {
    display: inline-block;
    margin: 0 0 1rem;
    padding: .3rem .85rem;
    background: var(--bila);
    border: 1px solid var(--linka);
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--znacka);
}

.hero h1 {
    max-width: 20ch;
    font-size: clamp(2.1rem, 6vw, 3.4rem);
    line-height: 1.1;
    margin: 0 0 1rem;
}

.hero__perex {
    max-width: 44ch;
    font-size: clamp(1.1rem, 2.4vw, 1.35rem);
    line-height: 1.55;
    color: var(--text-tlumeny);
    margin: 0 0 1.75rem;
}

.hero__tlacitka { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 2.25rem; }

.tlacitko {
    display: inline-block;
    padding: .8rem 1.6rem;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    background: var(--znacka);
    color: #fff !important;
    border: 1px solid var(--znacka);
}
.tlacitko:hover { background: var(--znacka-tmava); border-color: var(--znacka-tmava); }

.tlacitko--tise {
    background: var(--bila);
    color: var(--text) !important;
    border-color: var(--linka);
}
.tlacitko--tise:hover { background: var(--bila); border-color: var(--znacka); color: var(--znacka) !important; }

/* Značky jako text, ne loga: cizí ochranné známky se nevystavují jen proto,
   že to hezky vypadá — a texty se navíc dají přečíst vyhledávačem. */
.hero__znacky {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Štítky značek jsou v celé hlavičce nejlepší doklad, že tomu firma rozumí —
   a byly nejméně viditelné ze všeho (tenký šedý obrys, malé písmo). */
.hero__znacky li {
    margin: 0;
    padding: .4rem 1rem;
    background: var(--bila);
    border: 1px solid var(--znacka-svetla);
    border-radius: 999px;
    font-size: .92rem;
    font-weight: 600;
    color: var(--znacka);
    box-shadow: 0 1px 2px rgba(20, 22, 28, .05);
}

/* Právní patička u zbraní — je to důležitý text, ne drobné písmo v rohu. */
.paticka--pravni { padding: 2.5rem 1.25rem; }
.paticka--pravni p {
    max-width: var(--sirka-textu);
    margin: 0 auto 1rem;
    font-size: .92rem;
}
.paticka--pravni strong { color: #fff; }

/* ======================================================================
   POHYB
   ======================================================================
   Oto: „Jsou tam i nějaké pohyblivé prvky apod." Dnešní web to řeší jQuery,
   karusely a animační knihovnou. Tady je to CSS — žádný JavaScript.

   🔴 VŠECHNO JE POD `prefers-reduced-motion: no-preference`. Kdo si v systému
   nastavil, že animace nechce, dostane statickou stránku. Není to zdvořilost:
   pohyb dokáže vyvolat nevolnost nebo migrénu a ten přepínač je jediný
   způsob, jak nám to takový člověk může říct.

   ⚠️ A druhá pojistka: animace jen ZJEMŇUJÍ příchod obsahu, nikdy ho
   nepodmiňují. Když prohlížeč `animation-timeline` neumí (dnes většina
   Safari), nestane se nic — obsah je vidět tak jako tak. Kdyby byl obsah
   schovaný a čekal na animaci, rozbil by se web každému, komu ta vlastnost
   chybí, a nám by to nikdo nenahlásil.
   ------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

    /* Jemné vynoření při rolování. `view()` je čistě CSS; prohlížeč, který
       ho neumí, tenhle blok přeskočí a obsah zůstane normálně vidět. */
    @supports (animation-timeline: view()) {
        .vstupy li,
        .meze,
        .faq-polozka,
        .pas__vnitrek--dva > *,
        .kroky li,
        main > h2,
        .duraz {
            animation: vynorit linear both;
            animation-timeline: view();
            /* ⚠️ Rozsah i posun jsou MĚŘENÉ, ne odhadnuté. Původně
               `entry 0% entry 45%` a 16 px: animace doběhla dřív, než byl
               prvek pořádně v okně, takže na každé změřené poloze vyšel
               posun NULOVÝ — pohyb existoval jen v souboru.
               (claude11 to popsal jako „u nás se nehýbe nic" a měl pravdu.) */
            animation-range: entry 0% entry 90%;
        }

        /* Dvousloupcové pásy najíždějí z boku, každá strana ze své —
           tenhle pohyb má ostrý web a je na něm nejvíc vidět.
           🔴 JEN NA ŠIROKÝCH OKNECH, a je to měřená nutnost: na mobilu se
           sloupce skládají pod sebe (boční nájezd tam nedává smysl) a posun
           o 34 px doprava vyrobil 14 px VODOROVNÉHO PŘETEČENÍ — stránka
           šla posouvat do strany. Změřeno při 390 px, prvek končil na 404
           při okně 390. */
        @media (min-width: 62rem) {
            .pas__vnitrek--dva > *:first-child  { animation-name: najezd-zleva; }
            .pas__vnitrek--dva > *:last-child   { animation-name: najezd-zprava; }
        }
    }

    /* 🔴 ŽÁDNÁ PRŮHLEDNOST, JEN POSUN. Původně to bylo `opacity: 0 → 1`
       a mělo to následek, na který jsem nepomyslel: SNÍMEK CELÉ STRÁNKY
       (a tisk, a čtečky, které stránku vykreslí najednou) zachytí všechno
       pod ohybem jako PRÁZDNÉ MÍSTO. Oto poslal snímek s bílými plochami
       a myslel si, že se web nedopsal.
       Posun bez průhlednosti dělá týž dojem pohybu, ale text je čitelný
       v každé chvíli i v každém nástroji. */
    @keyframes vynorit {
        from { transform: translateY(30px); }
        to   { transform: none; }
    }

    /* Boční nájezd. Pořád JEN POSUN, žádná průhlednost — důvod je o pár
       řádků výš a platí i tady: snímek celé stránky a tisk musí zůstat
       čitelné v každé chvíli. */
    @keyframes najezd-zleva  {
        from { transform: translate3d(-34px, 14px, 0); }
        to   { transform: none; }
    }
    @keyframes najezd-zprava {
        from { transform: translate3d(34px, 14px, 0); }
        to   { transform: none; }
    }

    /* Úvodní hlavička se rozjede sama, bez ohledu na rolování — je hned
       nahoře a čekat na rolování by u ní nedávalo smysl. */
    .hero__nadpisek, .hero h1, .hero__perex, .hero__tlacitka, .hero__znacky {
        animation: prijezd .55s cubic-bezier(.22, .61, .36, 1) both;
    }
    .hero h1          { animation-delay: .05s; }
    .hero__perex      { animation-delay: .12s; }
    .hero__tlacitka   { animation-delay: .19s; }
    .hero__znacky     { animation-delay: .26s; }

    /* Hlavička se rozjíždí hned po načtení, takže tady průhlednost vadit
       nemůže — ale držím to stejné, ať se to chová jednotně. */
    @keyframes prijezd {
        from { transform: translateY(12px); }
        to   { transform: none; }
    }

    /* Pomalu plující světlo v pozadí hlavičky. 24 s je schválně dlouhá doba:
       má to být cítit periferně, ne přitahovat pohled. */
    .hero { background-size: 140% 140%, 140% 140%, auto; animation: plout 24s ease-in-out infinite alternate; }

    @keyframes plout {
        from { background-position: 0% 0%, 100% 0%, 0 0; }
        to   { background-position: 12% 8%, 88% 6%, 0 0; }
    }

    /* Drobnosti, které dělají web „živý" víc než velké animace. */
    .vstupy li, .tlacitko, .telefon, button, .nabidka a, .hero__znacky li {
        transition: transform .18s ease, box-shadow .18s ease,
                    background-color .18s ease, border-color .18s ease, color .18s ease;
    }

    .tlacitko:hover, .telefon:hover, button:hover { transform: translateY(-1px); }
    .hero__znacky li:hover { border-color: var(--znacka); color: var(--znacka); }

    .faq-polozka { transition: background-color .18s ease; }
    .faq-polozka:hover { background: var(--plocha); }
}

/* Kdo animace nechce, ať je opravdu nemá — ani přechody. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- karty rozcestníku: ikona, nadpis, věta --------------------------- */

.vstupy li {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: 1.75rem 1.6rem;
}

.vstupy__ikona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1rem;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--znacka), #0b84c7);
    color: #fff;
    box-shadow: 0 6px 16px rgba(22, 87, 207, .28);
}
.vstupy__ikona svg { width: 1.6rem; height: 1.6rem; stroke-width: 1.8; }

.vstupy a { font-size: 1.15rem; }
.vstupy li p { margin: .5rem 0 0; color: var(--text-tlumeny); font-size: .97rem; line-height: 1.6; }

/* --- postup „jak to u nás chodí" --------------------------------------
   Číslovaný seznam kroků je na těchhle stránkách všude stejný a je to
   jedna z mála věcí, kterou si člověk odnese. Zaslouží si vypadat jako
   postup, ne jako odrážky. */

main ol {
    counter-reset: krok;
    list-style: none;
    padding-left: 0;
}

main ol > li {
    counter-increment: krok;
    position: relative;
    padding: .1rem 0 1.1rem 3.1rem;
    margin: 0;
}

main ol > li::before {
    content: counter(krok);
    position: absolute;
    left: 0;
    top: .1rem;
    width: 2.1rem;
    height: 2.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--znacka-svetla);
    color: var(--znacka);
    font-weight: 700;
    font-size: .95rem;
}

/* Svislá linka mezi kroky — drží je pohromadě jako jeden postup. */
main ol > li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 1.05rem;
    top: 2.4rem;
    bottom: .2rem;
    width: 2px;
    background: var(--linka);
}

/* Seznamy uvnitř textu tímhle projít nesmějí. */
.paticka ol, .poptavka ol { counter-reset: none; }

/* --- oddělení oddílů --------------------------------------------------- */

main > h2 { position: relative; padding-top: 1rem; }

main > h2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 1.25rem;
    width: 2.5rem;
    height: 3px;
    border-radius: 2px;
    background: var(--znacka);
}

/* --- pásmo s fakty ----------------------------------------------------
   Tři doložená tvrzení, aby se stránka po hlavičce nadechla. Vědomě tu
   NEJSOU počty realizací ani lidí — ta čísla neznáme a vymyslet se nedají. */

.fakta {
    max-width: var(--sirka) !important;
    list-style: none;
    margin: 0 auto 2.5rem;
    padding: 0 1.25rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1px;
    background: var(--linka);
    border: 1px solid var(--linka);
    border-radius: var(--radius);
    overflow: hidden;
}

.fakta li {
    margin: 0;
    padding: 1.35rem 1.5rem;
    background: var(--bila);
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.fakta strong { font-size: 1.45rem; font-weight: 700; color: var(--znacka); line-height: 1.2; }
.fakta span { font-size: .93rem; color: var(--text-tlumeny); line-height: 1.5; }

/* „a další" není značka, tak ať tak nevypadá. */
.hero__znacky--dalsi {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--text-tlumeny) !important;
    font-weight: 400 !important;
}

/* ======================================================================
   PÁSY — stavba podle ostrého webu (rozhodl Oto 4. 9. 2026)
   ======================================================================
   Stránka se skládá z pásů přes celou šířku: střídá se bílá a světlá,
   uprostřed jeden barevný. Uvnitř pásu je obsah vystředěný na 72 rem.
   Je to stavba převzatá z ostrého webu; převzatá NENÍ jeho nálož
   (Bootstrap, jQuery, tři karusely, preloader).
   ------------------------------------------------------------------- */

.pas { padding: clamp(3rem, 7vw, 5rem) 1.25rem; }
.pas--tise { background: var(--plocha); }
.pas--uvod {
    padding-top: clamp(2.5rem, 6vw, 4.5rem);
    background:
        radial-gradient(50rem 26rem at 12% -10%, rgba(22, 87, 207, .13), transparent 60%),
        radial-gradient(40rem 24rem at 92% 0%, rgba(11, 132, 199, .12), transparent 55%),
        var(--bila);
}

.pas__vnitrek { max-width: var(--sirka); margin: 0 auto; }
.pas__vnitrek--uzky { max-width: var(--sirka-textu); }

.pas__vnitrek--dva {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    align-items: center;
    gap: clamp(1.75rem, 4vw, 3.5rem);
}

.pas h2 { margin-top: 0; }
.pas h2::before { display: none; }   /* barevná čárka patří jen do textových stránek */
.pas p { max-width: 40rem; }

.pas__perex {
    font-size: 1.1rem;
    opacity: .92;
    max-width: 34rem;
}

/* --- obrázky ---------------------------------------------------------- */

.obrazek { margin: 0; }
.obrazek img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    box-shadow: 0 2px 6px rgba(20,22,28,.08), 0 18px 44px rgba(20,22,28,.12);
}

/* Na úzkém displeji ať je fotka nad textem, ne pod ním. */
@media (max-width: 46rem) {
    .obrazek--vlevo { order: -1; }
}

/* --- štítek, tlačítka, značky ----------------------------------------- */

.stitek {
    margin: 0 0 .75rem;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--znacka);
}

.tlacitka { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.75rem 0 1.5rem; }

.znacky { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin: 0; padding: 0; list-style: none; }

.znacky li {
    margin: 0;
    padding: .35rem .9rem;
    background: var(--bila);
    border: 1px solid var(--znacka-svetla);
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--znacka);
}

.znacky--dalsi {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--text-tlumeny) !important;
    font-weight: 400 !important;
}

.dal { font-weight: 600; text-decoration: none; }
.dal::after { content: " →"; }
.dal:hover { text-decoration: underline; }

/* --- barevný pás s kroky ---------------------------------------------- */

.pas--barevny {
    background: linear-gradient(135deg, var(--znacka) 0%, #3f6fe0 55%, #0b84c7 100%);
    color: #fff;
    text-align: center;
}

.pas--barevny h2 { color: #fff; }
.pas--barevny .pas__perex { margin: 0 auto 2.5rem; }

.kroky {
    counter-reset: none;
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1rem;
    text-align: left;
}

.kroky li {
    margin: 0;
    padding: 1.5rem 1.4rem;
    background: var(--bila);
    color: var(--text);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(10, 20, 60, .18);
}
.kroky li::before, .kroky li::after { display: none; }   /* přebíjí obecný postup */

.kroky__cislo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem; height: 2.2rem;
    margin-bottom: .85rem;
    border-radius: 999px;
    background: var(--znacka-svetla);
    color: var(--znacka);
    font-weight: 700;
}

.kroky strong { display: block; margin-bottom: .25rem; font-size: 1.05rem; }
.kroky span:last-child { color: var(--text-tlumeny); font-size: .95rem; line-height: 1.55; }

/* Poptávka na úvodní navazuje na pásy, ne na textový sloupec. */
.pas + .poptavka { margin-top: 0; }

.paticka__nazev {
    margin: 0 0 1rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.01em;
}

/* --- proč my ----------------------------------------------------------
   Konkurence tady vede čísly (1000 instalací, 30 let na trhu). Ta nemáme
   ověřená, takže tu nejsou — místo nich doklady, které obstojí. */

.duvody {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    margin-top: 1.75rem;
}

.duvod {
    padding: 1.5rem 1.4rem;
    background: var(--bila);
    border: 1px solid var(--linka);
    border-radius: var(--radius);
}

.duvod h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.duvod p { margin: 0; font-size: .96rem; color: var(--text-tlumeny); line-height: 1.6; max-width: none; }

/* --- podmenu pod Alarmem ----------------------------------------------
   Oto 4. 9.: „Rodinný dům, Bytový dům a SVJ a Firma by mělo být pod Alarmy."

   Rozbaluje se najetím myší I klávesnicí (`:focus-within`), takže na to
   není potřeba JavaScript a projde se to tabulátorem. Na mobilu je vidět
   rovnou, jen odsazené — tam se najíždět nedá. */

.nabidka .ma-podmenu { position: relative; }

.nabidka .ma-podmenu > a::after {
    content: " ▾";
    font-size: .8em;
    opacity: .6;
}

.podmenu {
    display: none;
    position: absolute;
    top: 100%;
    left: -.9rem;
    min-width: 15rem;
    margin: 0;
    padding: .5rem 0;
    background: var(--bila);
    border: 1px solid var(--linka);
    border-radius: var(--radius);
    box-shadow: var(--stin);
    list-style: none;
    z-index: 50;
}

.ma-podmenu:hover > .podmenu,
.ma-podmenu:focus-within > .podmenu { display: block; }

.podmenu li { margin: 0; }

.podmenu__nadpis {
    padding: .2rem 1rem .45rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-tlumeny);
}

.podmenu a {
    display: block;
    padding: .45rem 1rem;
    border-bottom: 0;
    white-space: nowrap;
}
.podmenu a:hover { background: var(--znacka-svetla); color: var(--znacka); }

/* ⚠️ Hranice je 74.99rem, ne 62rem, a je to MĚŘENÍ, ne odhad: mezi 992
   a 1200 px se sedm položek do jednoho řádku nevejde (nav dostane 648 px,
   potřebuje ~800) a nabídka se lámala do dvou řádků přes celou hlavičku.
   Radši přepínač než rozsypaná lišta. Obě `@media` musí mít TUTÉŽ hodnotu —
   druhá řídí podnabídku a při rozejití by se podnabídka chovala
   po počítačovsku uvnitř mobilní nabídky. */
@media (max-width: 74.99rem) {
    /* Na dotyku se nenajíždí — podmenu je vidět rovnou, jen odsazené. */
    .podmenu {
        display: block;
        position: static;
        min-width: 0;
        margin: 0 0 .25rem 1rem;
        padding: 0;
        border: 0;
        border-left: 2px solid var(--linka);
        border-radius: 0;
        box-shadow: none;
    }
    .podmenu a { padding: .55rem .8rem; font-weight: 500; }
    .podmenu__nadpis { padding: .5rem .8rem .1rem; }
    .nabidka .ma-podmenu > a::after { content: ""; }
}

/* --- konfigurátor alarmu ---------------------------------------------
   Formulář je záměrně v mřížce po dvou: šest otázek pod sebou by vypadalo
   jako dotazník na úřadě a lidé to nedokončí. */

.konfigurator {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem 1.75rem;
    max-width: var(--sirka-textu);
    /* ⚠️ `auto` po stranách, ne 0. Obsah stránky se středí automatickými
       okraji, a `margin: 2rem 0` je zrušilo — formulář pak začínal
       u levého okraje okna, zatímco nadpis nad ním byl vystředěný. */
    margin: 2rem auto 2.5rem;
    padding: 1.5rem;
    background: var(--bila);
    border: 1px solid var(--linka);
    border-radius: var(--radius);
    box-shadow: var(--stin);
}

.konfigurator__otazka { margin: 0; }
.konfigurator__otazka label { display: block; font-size: .96rem; }
.konfigurator__otazka strong { display: block; margin-bottom: .15rem; }

.konfigurator__napoveda {
    display: block;
    margin-bottom: .4rem;
    font-size: .84rem;
    line-height: 1.45;
    color: var(--text-tlumeny);
}

.konfigurator input[type="number"],
.konfigurator select {
    width: 100%;
    padding: .55rem .7rem;
    font: inherit;
    color: var(--text);
    background: var(--bila);
    border: 1px solid var(--linka);
    border-radius: 8px;
}
.konfigurator input[type="number"]:focus,
.konfigurator select:focus { outline: 2px solid var(--znacka); outline-offset: 1px; }

/* Tlačítko přes obě sloupce, ať je jasné, že patří k celku. */
.konfigurator > p:last-child { grid-column: 1 / -1; margin: .25rem 0 0; }

.konfigurator__soupis {
    width: 100%;
    max-width: var(--sirka-textu);
    margin: 1.25rem auto 2rem;
    border-collapse: collapse;
    font-size: .95rem;
}
.konfigurator__soupis th,
.konfigurator__soupis td {
    padding: .7rem .9rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--linka);
}
.konfigurator__soupis thead th {
    font-size: .78rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-tlumeny);
}
.konfigurator__soupis td:nth-child(2) { white-space: nowrap; font-weight: 700; }
.konfigurator__soupis td:last-child { color: var(--text-tlumeny); font-size: .9rem; }

@media (max-width: 44rem) {
    /* Na mobilu mřížka po dvou nedává smysl — pole by byla užší než text
       v nich. A tabulka se rozpadá na bloky, jinak by přetékala do strany
       (na to jsme dnes u téhle stránky už jednou narazili). */
    .konfigurator { grid-template-columns: 1fr; padding: 1.1rem; }

    .konfigurator__soupis,
    .konfigurator__soupis tbody,
    .konfigurator__soupis tr,
    .konfigurator__soupis td { display: block; width: 100%; }
    .konfigurator__soupis thead { display: none; }
    .konfigurator__soupis tr { padding: .8rem 0; border-bottom: 1px solid var(--linka); }
    .konfigurator__soupis td { border: 0; padding: .1rem 0; }
    .konfigurator__soupis td:first-child { font-weight: 700; }
    .konfigurator__soupis td:nth-child(2) { color: var(--znacka); }
}

/* --- podmenu skupin a hledání v nabídce obchodu -----------------------
   🔴 Jméno `skupiny-nabidky`, ne `podmenu`: `podmenu` je v tomhle souboru
   výš rozbalovací nabídka s `display: none` a nová navigace by pod ním byla
   neviditelná. Vypadalo by to jako chybějící HTML, a přitom je značka na
   místě — chytil to jedině snímek z prohlížeče, ne test. */
.skupiny-nabidky ul {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1.5rem 0 1rem;
    padding: 0;
    list-style: none;
}

.skupiny-nabidky a {
    display: inline-block;
    padding: .45rem 1rem;
    border: 1px solid var(--linka);
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: .95rem;
}

.skupiny-nabidky a:hover { border-color: var(--znacka); color: var(--znacka); }

.skupiny-nabidky a[aria-current="page"] {
    background: var(--znacka);
    border-color: var(--znacka);
    color: #fff;
}

.hledani-zbozi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1.75rem;
}

/* Popisek je pro čtečku; vedle pole by jen zabíral místo. */
.hledani-zbozi label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%);
}

.hledani-zbozi input[type="search"] {
    flex: 1 1 16rem;
    padding: .55rem .8rem;
    border: 1px solid var(--linka);
    border-radius: var(--radius);
    font: inherit;
}

.hledani-zbozi button {
    padding: .55rem 1.2rem;
    border: 1px solid var(--znacka);
    border-radius: var(--radius);
    background: var(--znacka);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.vysledek-hledani { color: var(--text-tlumeny); }

/* --- obrázky zboží --------------------------------------------------- */
.polozka__nahled img {
    width: 100%;
    max-width: 320px;
    height: auto;
    border-radius: var(--radius);
    border: 1px solid var(--linka);
}

.galerie {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1rem 0 1.5rem;
}

.galerie figure { margin: 0; max-width: 20rem; }

.galerie img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    border: 1px solid var(--linka);
}

.galerie figcaption {
    margin-top: .35rem;
    font-size: .9rem;
    color: var(--text-tlumeny);
}

/* --- štítky u zboží a druhá úroveň nabídky ---------------------------- */
.skupiny-nabidky--druha ul { margin-top: -.5rem; }
.skupiny-nabidky--druha a { padding: .3rem .8rem; font-size: .88rem; font-weight: 500; }

.stitky { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0; }

.stitek {
    display: inline-block;
    padding: .15rem .6rem;
    border-radius: 999px;
    background: var(--plocha);
    border: 1px solid var(--linka);
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-tlumeny);
}

/* Použité a výprodej se musí poznat na první pohled — je to informace
   o ceně i o očekávání, ne ozdoba. */
.stitek--stav { background: #fff8e6; border-color: #f0dca8; color: #8a5a00; }
.stitek--vyprodej { background: var(--znacka-svetla); border-color: var(--znacka); color: var(--znacka-tmava); }

.vyprodej-prepinac { margin: 0 0 1rem; }