/*! Ploché CSS zamerne - viz komentar nize.
 * @layer se nepouziva: Monic sve styly nezavrstvuje a nezavrstvene
 * deklarace maji v kaskade prednost pred zavrstvenymi. Tenhle soubor
 * se nacita jako posledni, takze rozhoduje poradi a specificita.
 */
/*!
 * MarekStejskal.cz — podstránky, články a výpisy.
 * Navazuje na ms-front.css, přebírá z něj tokeny i vrstvy kaskády.
 */



  /* ===== POJISTKY PROTI PŘETEČENÍ ===== */

  /* Logo drží výšku bez ohledu na to, jak velký soubor se nahraje.
     Platí i pro <a> vygenerované funkcí the_custom_logo(). */
  .brand{display:flex;align-items:center;flex:none;min-inline-size:0}
  .brand a{display:flex;align-items:center}
  .brand img,
  .brand .custom-logo{block-size:46px!important;inline-size:auto!important;
    max-inline-size:min(15rem,42vw);object-fit:contain;
    transition:block-size .35s var(--swift)}
  .masthead[data-stuck] .brand img,
  .masthead[data-stuck] .brand .custom-logo{block-size:36px!important}
  @media(width < 30rem){
    .brand img,.brand .custom-logo{block-size:36px!important;max-inline-size:11rem}
  }

  /* Telefon se nesmí lámat na tři řádky. */
  .callout{flex:none}
  .callout strong,.ph-inline strong{white-space:nowrap}

  /* Hlavička se radši zalomí, než aby roztáhla stránku. */
  .masthead .shell{flex-wrap:wrap;row-gap:.6rem}

  /* Poslední záchrana: nic nesmí rozšířit dokument do strany. */
  html{overflow-x:clip}

  /* ===== ZÁHLAVÍ PODSTRÁNKY ===== */
  .pagehead{position:relative;isolation:isolate;overflow:hidden;color:#fff;
    background-color:var(--ink);
    background-image:radial-gradient(color-mix(in oklab,var(--g-500) 26%,transparent) 1.15px,transparent 1.15px);
    background-size:17px 17px;
    padding-block:clamp(3rem,7vw,5.5rem) clamp(3.5rem,8vw,6rem)}
  .pagehead::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(56rem 26rem at 8% 0%,color-mix(in oklab,var(--g-700) 38%,transparent),transparent 62%)}
  .pagehead .shell{position:relative;z-index:2}
  .pagehead h1{color:#fff;font-size:clamp(1.9rem,4.4vw,3.1rem);max-inline-size:20ch}
  .pagehead .lede{color:color-mix(in oklab,white 74%,transparent);margin-block-start:1rem}
  .pagehead--photo .shot{position:absolute;inset:0;z-index:0}
  .pagehead--photo .shot img{inline-size:100%;block-size:100%;object-fit:cover;opacity:.3}
  .pagehead--photo::before{background:linear-gradient(100deg,
    color-mix(in oklab,var(--ink) 92%,transparent),
    color-mix(in oklab,var(--ink) 62%,transparent))}

  /* klín na spodní hraně — přechod z tmavého záhlaví do světlého obsahu.
   *
   * Přesah 1 px dolů řeší vlasovou linku pod záhlavím. Výška .pagehead
   * vychází z clamp() a rem, takže spodní hrana skoro nikdy nepadne přesně
   * na celý pixel — třeba na 388,06. Poslední řádek pixelů pak prohlížeč
   * vyhladí a 6 % tmavého pozadí (#0E1A22) prosvítá přes celou šířku jako
   * světle šedá čárka. Klín je tady bílý, takže když ho necháme přetéct
   * o pixel níž, ten zlomkový řádek přemaluje. .pagehead má overflow:hidden,
   * takže přesah nikam nevyčnívá. */
  .wedge--down{position:absolute;z-index:4;inset-inline:0;inset-block-end:-1px;inset-block-start:auto;
    inline-size:100%;block-size:calc(clamp(2.2rem,4.5vw,3.4rem) + 1px);display:block}
  .wedge--down .fillup{fill:#fff}
  .band--mist + * .wedge--down .fillup{fill:var(--mist)}

  /* drobečky — Breadcrumb NavXT si vkládá vlastní oddělovače, tak jim jen dáme dýchat */
  .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.15rem .45rem;
    font-size:var(--t-xs);color:color-mix(in oklab,white 60%,transparent);margin-block-end:1rem;
    line-height:1.5}
  .crumbs a{color:var(--g-500)}
  .crumbs a:hover{color:#fff;text-decoration:underline;text-underline-offset:2px}
  .crumbs .sep{opacity:.45}
  .crumbs [aria-current],.crumbs .post-post{color:#fff}
  /* první drobeček bývá celý název webu — na mobilu ho zkrátíme */
  @media(width < 40rem){
    .crumbs > span:first-child a{display:inline-block;max-inline-size:9rem;overflow:hidden;
      text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
  }

  /* ===== OBSAH ČLÁNKU A STRÁNKY ===== */
  .entry{max-inline-size:72ch}
  .entry > * + *{margin-block-start:1.15rem}
  .entry h2{font-size:clamp(1.4rem,2.8vw,2rem);margin-block-start:2.4rem}
  .entry h3{font-size:clamp(1.15rem,2.2vw,1.45rem);margin-block-start:1.9rem}
  .entry h4{font-size:var(--t-md);margin-block-start:1.5rem}
  .entry p{line-height:1.75}
  .entry a{color:var(--g-700);text-decoration:underline;text-underline-offset:3px;
    text-decoration-thickness:1px;text-decoration-color:color-mix(in oklab,var(--g-500) 55%,transparent)}
  .entry a:hover{color:var(--g-800);text-decoration-color:currentColor}
  .entry ul,.entry ol{padding-inline-start:1.3rem;display:grid;gap:.5rem}
  .entry li{line-height:1.7}
  .entry li::marker{color:var(--g-500)}
  .entry img,.entry figure{max-inline-size:100%;height:auto}
  .entry figure{margin-inline:0}
  .entry figcaption{font-size:var(--t-xs);color:var(--slate);margin-block-start:.5rem}
  .entry blockquote{border-inline-start:3px solid var(--g-500);padding:.3rem 0 .3rem 1.2rem;
    font-size:var(--t-lg);line-height:1.5;color:var(--ink)}
  .entry table{inline-size:100%;border-collapse:collapse;font-size:var(--t-sm)}
  .entry th,.entry td{border:1px solid var(--line);padding:.6rem .8rem;text-align:start}
  .entry th{background:var(--mist);color:var(--ink);font-weight:700}
  .entry code{font-family:var(--mono);font-size:.9em;background:var(--mist);padding:.12em .38em}
  .entry hr{border:0;border-block-start:1px solid var(--line);margin-block:2.2rem}
  .tablewrap{overflow-x:auto}

  /* rozvržení článku se sloupcem vpravo */
  .withside{display:grid;gap:clamp(2rem,4vw,3.5rem);
    grid-template-columns:minmax(0,1fr) minmax(0,19rem)}
  @media(width < 62rem){.withside{grid-template-columns:1fr}}

  .aside{display:grid;gap:1.4rem;align-content:start}
  .widget{background:#fff;border:1px solid var(--line);padding:1.3rem 1.35rem;display:grid;gap:.85rem}
  .widget h3{font-size:var(--t-md);position:relative;padding-block-end:.6rem}
  .widget h3::after{content:"";position:absolute;inset-inline-start:0;inset-block-end:0;
    inline-size:30px;block-size:2px;background:var(--g-500)}
  .widget ul{list-style:none;padding:0;display:grid;gap:.6rem}
  .widget li a{font-size:var(--t-sm);display:flex;gap:.5rem;align-items:start;transition:color .25s,gap .25s}
  .widget li a::before{content:"";inline-size:5px;aspect-ratio:1;border-radius:50%;background:var(--g-500);
    flex:none;margin-block-start:.55em;opacity:.4;transition:opacity .25s}
  .widget li a:hover{color:var(--g-700);gap:.75rem}
  .widget li a:hover::before{opacity:1}

  /* postranní CTA — telefon je hlavní obchodní kanál */
  .callcard{background:var(--ink);color:#fff;padding:1.5rem 1.4rem;display:grid;gap:.7rem;
    background-image:radial-gradient(color-mix(in oklab,var(--g-500) 26%,transparent) 1.15px,transparent 1.15px);
    background-size:17px 17px}
  .callcard h3{color:#fff;font-size:var(--t-lg)}
  .callcard p{font-size:var(--t-sm);color:color-mix(in oklab,white 72%,transparent)}
  .callcard .num{font-family:var(--mono);font-size:1.5rem;font-weight:700;color:var(--g-500);
    letter-spacing:-.03em;display:block;margin-block-start:.2rem}

  /* ===== VÝPIS ČLÁNKŮ ===== */
  .postgrid{display:grid;gap:var(--gap);
    grid-template-columns:repeat(auto-fill,minmax(min(17rem,100%),1fr))}

  /* stránkování */
  .pager{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;margin-block-start:clamp(2rem,4vw,3rem)}
  .pager .page-numbers{min-inline-size:2.7rem;block-size:2.7rem;display:grid;place-items:center;
    padding-inline:.7rem;border:1px solid var(--line);background:#fff;
    font-size:var(--t-sm);font-weight:650;color:var(--ink);transition:.25s var(--swift)}
  .pager .page-numbers:hover{border-color:var(--g-500);color:var(--g-700)}
  .pager .page-numbers.current{background:var(--g-700);border-color:var(--g-700);color:#fff}
  .pager .dots{border-color:transparent;background:none}

  /* ===== HLEDÁNÍ ===== */
  .searchbox{display:flex;gap:.5rem}
  .searchbox input[type="search"]{flex:1;min-inline-size:0;border:1px solid var(--line);background:#fff;
    padding:.7rem .85rem;font:inherit;font-size:var(--t-sm);color:var(--ink)}
  .searchbox input[type="search"]:focus{outline:2px solid var(--g-500);outline-offset:-1px}
  .searchbox button{background:var(--g-700);color:#fff;padding-inline:1rem;font-weight:700;
    font-size:var(--t-sm);transition:background .25s}
  .searchbox button:hover{background:var(--g-500);color:#06120A}

  /* ===== 404 ===== */
  .lost{text-align:center;max-inline-size:44ch;margin-inline:auto;display:grid;gap:1rem;justify-items:center}
  .lost .code{font-family:var(--mono);font-size:clamp(4rem,14vw,8rem);font-weight:700;line-height:.85;
    letter-spacing:-.06em;color:var(--g-500)}

  /* ===== META U ČLÁNKU ===== */
  .postmeta{display:flex;flex-wrap:wrap;gap:.5rem 1.3rem;font-size:var(--t-xs);
    color:color-mix(in oklab,white 70%,transparent)}
  .postmeta span{display:inline-flex;align-items:center;gap:.4rem}
  .postmeta svg{color:var(--g-500)}

  .tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-block-start:2rem;
    padding-block-start:1.4rem;border-block-start:1px solid var(--line)}
  .tags a{font-size:var(--t-xs);border:1px solid var(--line);padding:.35rem .7rem;
    color:var(--slate);transition:.25s var(--swift)}
  .tags a:hover{border-color:var(--g-500);color:var(--g-700);background:var(--g-tint)}

  /* sdílení */
  .share{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-block-start:1.4rem}
  .share b{font-size:var(--t-sm);color:var(--ink)}
  .share a{inline-size:36px;aspect-ratio:1;display:grid;place-items:center;
    border:1px solid var(--line);color:var(--slate);transition:.25s var(--swift)}
  .share a:hover{background:var(--g-700);border-color:var(--g-700);color:#fff;translate:0 -2px}

  /* předchozí / další článek */
  .prevnext{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));
    margin-block-start:2.5rem}
  .prevnext a{border:1px solid var(--line);background:#fff;padding:1.1rem 1.2rem;display:grid;gap:.3rem;
    transition:.3s var(--swift)}
  .prevnext a:hover{border-color:var(--g-500);translate:0 -3px;
    box-shadow:0 18px 40px -24px color-mix(in oklab,var(--ink) 60%,transparent)}
  .prevnext .dir{font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--g-700)}
  .prevnext b{font-size:var(--t-sm);line-height:1.35;color:var(--ink)}
  .prevnext .next{text-align:end}

  /* skryté, ale čitelné pro odečítače */
  .screen-reader-text{position:absolute!important;inline-size:1px;block-size:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
  .skip-link:focus{position:fixed!important;inset-block-start:.6rem;inset-inline-start:.6rem;
    inline-size:auto;block-size:auto;clip-path:none;z-index:9999;
    background:var(--g-700);color:#fff;padding:.7rem 1.1rem;font-weight:700}
  /* ===== PREHRAVAC VIDEA ===== */
  /* karta muze byt <button>, <a> i <div> - vsechny musi vypadat stejne */
  button.reel{border:0;padding:0;font:inherit;color:inherit;text-align:start;background:var(--ink);
    appearance:none;cursor:pointer;display:block}
  a.reel,div.reel{display:block}
  /* Pozor: .knob sem nepatri. Ma z ms-front.css display:grid, kterym si
     stredi trojuhelnik prehravani — display:block by ho odsunul do leveho
     horniho rohu kolecka. Presne to se dlouho delo. */
  .reel .fade,.reel .meta,.reel .kind,.reel .len{display:block}
  .reel .knob{display:grid}
  .reel .meta b{display:block}

  /* Modalni <dialog> ma vychozi margin:auto, ale cizi CSS ho umi prebit
     a okno pak skoci do leveho horniho rohu. Radeji polohu urcime napevno. */
  dialog.vbox{position:fixed;inset:0;margin:auto;border:0;padding:0;background:transparent;
    inline-size:min(30rem,92vw);max-inline-size:min(30rem,92vw);
    block-size:max-content;max-block-size:92vh;overflow:visible}
  dialog.vbox::backdrop{background:color-mix(in srgb,#0E1A22 88%,transparent);backdrop-filter:blur(6px)}
  dialog.vbox[open]{animation:vpop .35s var(--ease)}
  @keyframes vpop{from{opacity:0;scale:.95}to{opacity:1;scale:1}}
  /* Video na sirku dostane sirsi okno; trida se navesi az podle skutecnych
     rozmeru souboru, viz ms-front.js. */
  dialog.vbox.vbox--wide{inline-size:min(56rem,94vw);max-inline-size:min(56rem,94vw)}
  .vframe{position:relative;aspect-ratio:9/16;background:#000;
    box-shadow:0 30px 70px -20px rgba(0,0,0,.8)}
  .vframe iframe{position:absolute;inset:0;inline-size:100%;block-size:100%;border:0}
  /* Vlastni soubor z naseho serveru - stejne misto jako cizi ramecek. */
  .vframe video{position:absolute;inset:0;inline-size:100%;block-size:100%;border:0;background:#000;display:block}
  .vclose{position:absolute;inset-block-start:-3rem;inset-inline-end:0;z-index:2;
    inline-size:40px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
    background:color-mix(in oklab,white 16%,transparent);color:#fff;
    border:1px solid color-mix(in oklab,white 34%,transparent);transition:.25s var(--swift)}
  .vclose:hover{background:var(--g-500);border-color:var(--g-500);color:#06120A}
  @media(width < 30rem){ .vclose{inset-block-start:-2.6rem} }

  /* ===== PROHLIZEC FOTEK =====
     Stejna logika polohovani jako u .vbox — margin:auto na modalnim dialogu
     si umi prebit cizi CSS, tak si polohu urcime sami. */
  dialog.ms-lb{position:fixed;inset:0;margin:0;border:0;padding:0;background:transparent;
    inline-size:100vw;max-inline-size:100vw;block-size:100dvh;max-block-size:100dvh;
    overflow:hidden;display:grid;place-items:center;
    grid-template-columns:auto minmax(0,1fr) auto}
  /* Zavreny dialog musi zmizet.
     `display:grid` vys prebije vychozi `dialog:not([open]){display:none}`
     z prohlizece, takze po zavreni zustaval prohlizec fotek na strance jako
     neviditelna mriz pres celou obrazovku — a uprostred ni <img>, kteremu
     se pri zavreni odebral `src`, ale zustal `alt`. To prohlizec vykresli
     jako ikonu rozbiteho obrazku s popiskem. */
  dialog.ms-lb:not([open]){display:none}
  dialog.ms-lb::backdrop{background:color-mix(in srgb,#0E1A22 92%,transparent);backdrop-filter:blur(8px)}
  dialog.ms-lb[open]{animation:vpop .3s var(--ease)}
  .ms-lb-fig{grid-column:2;margin:0;display:grid;justify-items:center;gap:.9rem;
    padding:clamp(3.2rem,7vw,4.5rem) 0 clamp(3rem,6vw,4rem);max-block-size:100dvh}
  .ms-lb-fig img{max-inline-size:100%;max-block-size:calc(100dvh - 11rem);
    inline-size:auto;block-size:auto;object-fit:contain;display:block;
    box-shadow:0 40px 90px -30px rgba(0,0,0,.9);animation:vpop .35s var(--ease)}
  .ms-lb-fig figcaption{color:color-mix(in oklab,white 76%,transparent);
    font-size:var(--t-sm);text-align:center;max-inline-size:60ch;padding-inline:1rem}
  .ms-lb-x{position:absolute;inset-block-start:1.1rem;inset-inline-end:1.1rem;z-index:3;
    inline-size:42px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
    background:color-mix(in oklab,white 14%,transparent);color:#fff;cursor:pointer;
    border:1px solid color-mix(in oklab,white 32%,transparent);transition:.25s var(--swift)}
  .ms-lb-x:hover{background:var(--g-500);border-color:var(--g-500);color:#06120A;rotate:90deg}
  .ms-lb-nav{z-index:3;inline-size:48px;block-size:48px;display:grid;place-items:center;
    background:color-mix(in oklab,white 10%,transparent);color:#fff;cursor:pointer;
    border:1px solid color-mix(in oklab,white 26%,transparent);transition:.25s var(--swift)}
  .ms-lb-nav:hover{background:var(--g-500);border-color:var(--g-500);color:#06120A}
  .ms-lb-nav[hidden]{display:none}
  .ms-lb-prev{grid-column:1;margin-inline-start:clamp(.5rem,2vw,1.6rem)}
  .ms-lb-next{grid-column:3;margin-inline-end:clamp(.5rem,2vw,1.6rem)}
  .ms-lb-num{position:absolute;inset-block-end:1.2rem;inset-inline:0;text-align:center;z-index:3;
    font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.08em;
    color:color-mix(in oklab,white 62%,transparent)}
  .ms-lb :is(button):focus-visible{outline:2px solid var(--g-500);outline-offset:3px}
  /* na uzkem displeji se sipky presunou pod fotku, jinak by ji ukrajovaly */
  @media(width < 34rem){
    dialog.ms-lb{grid-template-columns:1fr}
    .ms-lb-fig{grid-column:1;grid-row:1}
    .ms-lb-prev,.ms-lb-next{grid-row:2;position:absolute;inset-block-end:2.8rem;margin:0}
    .ms-lb-prev{inset-inline-start:1.2rem}
    .ms-lb-next{inset-inline-end:1.2rem}
  }
  /* fotka v galerii ma davat najevo, ze se da zvetsit */
  .shot2{cursor:zoom-in}

  /* ===== FILTR RUBRIK NA PREHLEDU PRISPEVKU ===== */
  .ms-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-block-end:clamp(1.6rem,3vw,2.4rem)}
  .ms-chips button{font-size:var(--t-sm);font-weight:650;cursor:pointer;
    border:1px solid var(--line);background:#fff;color:var(--slate);
    padding:.5rem 1rem;display:inline-flex;align-items:center;gap:.45rem;
    transition:border-color .25s var(--swift),color .25s,background .25s}
  .ms-chips button:hover{border-color:var(--g-500);color:var(--g-700);background:var(--g-tint)}
  .ms-chips button[aria-pressed="true"]{background:var(--g-700);border-color:var(--g-700);color:#fff}
  .ms-chips button b{font-family:var(--mono);font-size:var(--t-xs);font-weight:700;opacity:.7}
  /* skryta karta si nesmi nechat misto v mrizce */
  .postgrid .post[hidden]{display:none}
  .ms-empty{font-size:var(--t-sm);color:var(--slate)}

  /* prehled rubrik jako dlazdice */
  .ms-cats{display:grid;gap:.9rem;padding:0;margin:0;list-style:none;
    grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))}
  .ms-cats a{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;
    background:#fff;border:1px solid var(--line);padding:1rem 1.2rem;
    transition:border-color .3s var(--swift),translate .3s var(--swift),box-shadow .3s var(--swift)}
  .ms-cats a:hover{border-color:var(--g-500);translate:0 -3px;
    box-shadow:0 18px 40px -24px color-mix(in oklab,var(--ink) 60%,transparent)}
  .ms-cats b{color:var(--ink);font-size:var(--t-md);letter-spacing:-.02em}
  .ms-cats span{font-family:var(--mono);font-size:var(--t-xs);font-weight:700;color:var(--g-700);flex:none}

  /* oblak stitku bez horni linky - tady nenavazuje na clanek */
  .tags--cloud{margin-block-start:0;padding-block-start:0;border-block-start:0}

  /* ===== ANIMOVANE IKONY (inc/icons.php) =====
     Ikony berou barvu z currentColor, takze se daji polozit na svetle
     i tmave pozadi bez uprav. Animace bezi porad, ne az na hover — na
     dotykovem displeji zadny hover neni. */
  .mi{display:grid;place-items:center;inline-size:38px;block-size:38px;
    color:var(--g-700);flex:none}
  .mi svg{inline-size:100%;block-size:100%;overflow:visible}
  .mi--sm{inline-size:26px;block-size:26px}
  .mi--lg{inline-size:52px;block-size:52px}

  /* rozbihave vlny — vysilac, wi-fi, satelit, alarm */
  .mi-wave{opacity:0}
  .mi-w1{animation:miwave 2.6s var(--ease) infinite}
  .mi-w2{animation:miwave 2.6s var(--ease) infinite .35s}
  .mi-w3{animation:miwave 2.6s var(--ease) infinite .7s}
  @keyframes miwave{0%{opacity:0;scale:.75}40%{opacity:1}100%{opacity:0;scale:1.12}}

  /* obtahnuti tahu — fajfka, sipka, krivka grafu */
  .mi-draw{stroke-dasharray:44;stroke-dashoffset:44;animation:midraw 2.8s var(--ease) infinite}
  @keyframes midraw{0%{stroke-dashoffset:44}35%,70%{stroke-dashoffset:0}100%{stroke-dashoffset:-44}}

  /* tep — objektiv kamery, dioda, koncovy bod */
  .mi-pulse{animation:mipulse 2.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
  @keyframes mipulse{0%,100%{opacity:.4;scale:.82}50%{opacity:1;scale:1.1}}

  /* problikavani stavove diody */
  .mi-blink{animation:miblink 2s steps(1,end) infinite}
  @keyframes miblink{0%,55%{opacity:1}56%,100%{opacity:.2}}

  /* svetelny impulz po kabelu */
  .mi-flow{stroke-dasharray:12 68;stroke-dashoffset:80;animation:miflow 2.6s linear infinite}
  @keyframes miflow{to{stroke-dashoffset:-12}}

  /* radek, ktery projizdi obrazovkou televize */
  .mi-scan{animation:miscan 3.4s var(--ease) infinite}
  @keyframes miscan{0%{translate:0 0;opacity:0}12%{opacity:.7}88%{opacity:.7}100%{translate:0 18px;opacity:0}}

  /* zvoneni telefonu */
  .mi-ring{transform-box:fill-box;transform-origin:center;animation:miring 3s var(--ease) infinite}
  @keyframes miring{0%,72%,100%{rotate:0deg}76%{rotate:-11deg}80%{rotate:9deg}84%{rotate:-7deg}88%{rotate:5deg}92%{rotate:0deg}}

  /* dopad spendliku na mape */
  .mi-drop{transform-box:fill-box;transform-origin:50% 100%;animation:midrop 2.8s var(--ease) infinite}
  @keyframes midrop{0%,70%,100%{translate:0 0}78%{translate:0 -5px}88%{translate:0 0}}

  /* rucicky hodin */
  .mi-hand-h{transform-box:fill-box;transform-origin:bottom;animation:mispin 12s linear infinite}
  .mi-hand-m{transform-box:fill-box;transform-origin:top left;animation:mispin 3s linear infinite}
  @keyframes mispin{to{rotate:360deg}}

  /* vetracek v pocitaci */
  .mi-fan{transform-box:fill-box;transform-origin:center;animation:mispin 4s linear infinite}

  /* klic v zamku a klicova jazycek */
  .mi-shackle{transform-box:fill-box;transform-origin:bottom right;animation:mishackle 3.4s var(--ease) infinite}
  @keyframes mishackle{0%,60%,100%{rotate:0deg}72%,84%{rotate:-13deg}}

  /* klic sroubovaku */
  .mi-wrench{transform-box:fill-box;transform-origin:70% 30%;animation:miwrench 3.2s var(--ease) infinite}
  @keyframes miwrench{0%,55%,100%{rotate:0deg}68%{rotate:-14deg}80%{rotate:7deg}}

  /* clona fotoaparatu */
  .mi-shutter{transform-box:fill-box;transform-origin:center;animation:mishutter 3s var(--ease) infinite}
  @keyframes mishutter{0%,70%,100%{scale:1}80%{scale:.72}88%{scale:1.04}}

  /* sipka stahovani */
  .mi-down{stroke-dasharray:40;animation:midown 2.4s var(--ease) infinite}
  @keyframes midown{0%,100%{translate:0 0;opacity:1}45%{translate:0 4px}}

  /* pisici tecky ve zprave */
  .mi-dot{animation:midot 1.4s ease-in-out infinite}
  .mi-d2{animation-delay:.18s}
  .mi-d3{animation-delay:.36s}
  @keyframes midot{0%,100%{opacity:.28;translate:0 0}45%{opacity:1;translate:0 -3px}}

  /* jiskra hvezdy */
  .mi-twinkle{transform-box:fill-box;transform-origin:center;animation:mitwinkle 3.2s var(--ease) infinite}
  @keyframes mitwinkle{0%,100%{scale:1;opacity:.85}50%{scale:1.06;opacity:1}}

  /* kolecka nakupniho voziku */
  .mi-roll{transform-box:fill-box;transform-origin:center;animation:mipulse 2.4s ease-in-out infinite}

  /* markyza nad obchodem */
  .mi-awning{transform-box:fill-box;transform-origin:top center;animation:miawning 4s var(--ease) infinite}
  @keyframes miawning{0%,60%,100%{scale:1 1}75%{scale:1 1.14}}

  /* blesk */
  .mi-flash{animation:miflash 2.6s var(--ease) infinite}
  @keyframes miflash{0%,100%{opacity:.55}18%{opacity:1}30%{opacity:.6}44%{opacity:1}}

  /* druha postava v ikone tymu */
  .mi-fade{animation:mifade 3s ease-in-out infinite}
  @keyframes mifade{0%,100%{opacity:.35}50%{opacity:1}}

  @media(prefers-reduced-motion:reduce){
    .mi *{animation:none!important;opacity:1!important;translate:none!important;
      rotate:none!important;scale:none!important;stroke-dasharray:none!important;stroke-dashoffset:0!important}
  }

  /* ===== ROZTAZENY ODKAZ PRES CELOU KARTU =====
   *
   * Vzor stretched link stoji na tom, ze `.stretch::after{inset:0}` se
   * napozicuje proti karte. Jenze Monic dava nadpisum position:relative,
   * takze nejblizsim pozicovanym predkem byl <h3> — odkaz pak pokryval
   * jen radek nadpisu. Namereno: karta tarifu 343x486 px, klikaci plocha
   * 296x19 px. Mysi se to trefit da, prstem na mobilu prakticky ne.
   *
   * Rusime proto pozicovani vsude mezi kartou a odkazem. U .plan to jde
   * bez nahrady: je to grid a grid polozky umi z-index i bez position,
   * takze obsah zustane nad dekoracnim .plan::after. */
  .plan,.post,.ms-pkg{position:relative}
  :is(.plan,.post,.ms-pkg) :is(h3,h4,header,.body){position:static}
  .plan > *{position:static}
  :is(.plan,.post,.ms-pkg) .stretch::after{z-index:4}
  /* prazdna mista v karte at reaguji na dotek stejne jako text */
  :is(.plan,.post,.ms-pkg) .stretch{cursor:pointer}

  /* ===== MOBILNI MENU =====
   *
   * Do 1180 px se vodorovna navigace do hlavicky nevejde. Drive se proto
   * skryvala uplne (`@media(width < 1180px){.navwrap{display:none}}`)
   * a nic ji nenahrazovalo — na telefonu i tabletu se nedalo proklikat
   * nikam nez na logo a telefon.
   *
   * Nedelame druhou kopii menu. Stejny prvek .navwrap se pod tou sirkou
   * prekopi do vysouvaciho panelu, takze odkazy jsou v HTML jen jednou. */
  /* Tlacitka, ktera doplnuje JavaScript do panelu. Na desktopu nemaji co
     delat — bez tohohle by se v hlavicce objevil kriz a sipky u polozek. */
  .burger,.ms-close,.ms-sub{display:none}

  @media(width < 1180px){
    .burger{display:grid;place-content:center;gap:5px;cursor:pointer;
      inline-size:44px;block-size:44px;flex:none;order:3;
      background:transparent;border:1px solid var(--line);color:var(--ink)}
    .burger span{display:block;inline-size:20px;block-size:2px;background:currentColor;
      transition:translate .3s var(--swift),rotate .3s var(--swift),opacity .2s}
    .burger[aria-expanded="true"]{background:var(--g-700);border-color:var(--g-700);color:#fff}
    .burger[aria-expanded="true"] span:nth-child(1){translate:0 7px;rotate:45deg}
    .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
    .burger[aria-expanded="true"] span:nth-child(3){translate:0 -7px;rotate:-45deg}
    .burger:focus-visible{outline:2px solid var(--g-500);outline-offset:2px}

    /* Hlavicka ma backdrop-filter, a ten z ni dela containing block pro
       position:fixed. Panel menu se pak uveznil uvnitr 74 px vysoke listy
       misto aby prekryl obrazovku. Na mobilu rozostreni obetujeme —
       pozadi je stejne skoro nepruhledne. */
    .masthead{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}

    .masthead .shell{gap:.7rem}
    .callout{order:2}
    .brand{order:1}

    /* panel vyjizdi zprava, prekryva stranku */
    .navwrap{display:block;position:fixed;inset-block:0;inset-inline-end:0;z-index:60;
      inline-size:min(23rem,88vw);background:#fff;overflow-y:auto;overscroll-behavior:contain;
      padding:1.1rem 1.1rem 2.5rem;
      border-inline-start:1px solid var(--line);
      box-shadow:-24px 0 60px -30px color-mix(in oklab,var(--ink) 70%,transparent);
      translate:100% 0;visibility:hidden;
      transition:translate .34s var(--ease),visibility .34s}
    .navwrap[data-open]{translate:0 0;visibility:visible}

    /* Hlavicka je position:sticky se z-index:50, cimz zaklada vrstvici
       kontext. z-index:60 panelu proto plati jen uvnitr ni — navenek se
       cely panel chova jako vrstva 50 a zavoj (55) skoncil nad nim.
       Odkazy pak vypadaly aktivne, ale klik chytal zavoj.
       Po dobu otevreneho menu proto hlavicku vyzvedneme nad zavoj. */
    body[data-navopen] .masthead{z-index:70}

    .ms-veil{position:fixed;inset:0;z-index:55;
      background:color-mix(in srgb,#0E1A22 62%,transparent);backdrop-filter:blur(3px);
      opacity:0;transition:opacity .3s var(--swift)}
    .ms-veil[data-on]{opacity:1}

    /* zaviraci tlacitko doplnuje JavaScript */
    .ms-close{display:grid;place-items:center;cursor:pointer;margin-inline-start:auto;
      inline-size:44px;block-size:44px;margin-block-end:.4rem;
      background:transparent;border:1px solid var(--line);color:var(--ink);
      transition:background .25s,border-color .25s,color .25s,rotate .3s var(--swift)}
    .ms-close:hover{background:var(--g-700);border-color:var(--g-700);color:#fff;rotate:90deg}
    .ms-close:focus-visible{outline:2px solid var(--g-500);outline-offset:2px}

    .nav{flex-direction:column;align-items:stretch;gap:0;font-size:var(--t-md)}
    .nav > li{border-block-end:1px solid var(--line);position:relative}
    .nav > li > a{display:flex;align-items:center;justify-content:space-between;
      padding:.95rem .3rem;min-block-size:48px;inline-size:100%}
    .nav > li > a .caret{display:none}

    /* rozbalovaci tlacitko doplnuje JavaScript */
    .ms-sub{position:absolute;inset-block-start:0;inset-inline-end:0;
      inline-size:48px;block-size:48px;display:grid;place-items:center;cursor:pointer;
      background:transparent;border:0;color:var(--g-700)}
    .ms-sub svg{transition:rotate .28s var(--swift)}
    .ms-sub[aria-expanded="true"] svg{rotate:180deg}
    .ms-sub:focus-visible{outline:2px solid var(--g-500);outline-offset:-3px}
    .nav > li.has-drop > a{padding-inline-end:52px}

    /* podmenu jako harmonika, ne jako plovouci panel */
    .nav .drop{position:static;visibility:visible;opacity:1;transform:none;translate:none;
      box-shadow:none;border:0;background:var(--mist);margin:0 0 .7rem;
      padding:.4rem .2rem;display:grid;gap:0;inline-size:auto;min-inline-size:0}
    .nav .drop[data-collapsed]{display:none}
    .nav .drop li{border:0}
    .nav .drop a{padding:.6rem .8rem;min-block-size:44px;display:flex;align-items:center}
    .nav .drop small{color:var(--slate)}

    /* zamek rolovani, dokud je panel otevreny */
    body[data-navopen]{overflow:hidden}
  }

  /* ===== OBJEDNAVKOVY PRUVODCE =====
   *
   * Bez JavaScriptu jsou vsechny ctyri kroky pod sebou a formular odejde
   * klasickym POSTem. Skript prida na formular tridu .js-wiz a teprve pak
   * se kroky zacnou prepinat. Vychozi stav je proto ten funkcni. */
  .ms-wiz-wrap{max-inline-size:60rem}
  .ms-wiz{background:#fff;border:1px solid var(--line);
    padding:clamp(1.2rem,3.5vw,2.4rem)}

  /* ukazatel kroku */
  .ms-wiz-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;
    padding:0;margin:0 0 clamp(1.4rem,3vw,2.2rem);list-style:none}
  .ms-wiz-bar li{display:grid;gap:.45rem;justify-items:center;text-align:center;
    padding-block-start:.5rem;border-block-start:3px solid var(--line);
    transition:border-color .35s var(--swift)}
  .ms-wiz-bar li b{font-family:var(--mono);font-size:var(--t-xs);font-weight:700;
    inline-size:24px;block-size:24px;display:grid;place-items:center;
    background:var(--mist);color:var(--slate);transition:.35s var(--swift)}
  .ms-wiz-bar li span{font-size:var(--t-xs);color:var(--slate);letter-spacing:.02em}
  .ms-wiz-bar li[data-at]{border-block-start-color:var(--g-500)}
  .ms-wiz-bar li[data-at] b{background:var(--g-700);color:#fff}
  .ms-wiz-bar li[data-at] span{color:var(--ink);font-weight:700}
  .ms-wiz-bar li[data-done]{border-block-start-color:var(--g-700)}
  .ms-wiz-bar li[data-done] b{background:var(--g-tint);color:var(--g-700)}
  @media(width < 34rem){ .ms-wiz-bar li span{display:none} }

  /* krok */
  .ms-step{border:0;padding:0;margin:0 0 1.6rem;min-inline-size:0}
  .js-wiz .ms-step{display:none;margin-block-end:0}
  .js-wiz .ms-step[data-on]{display:block;animation:mswiz .32s var(--ease)}
  @keyframes mswiz{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
  .ms-step legend{display:grid;gap:.3rem;margin-block-end:1.2rem;padding:0;inline-size:100%}
  .ms-step-no{font-family:var(--mono);font-size:var(--t-xs);font-weight:700;
    letter-spacing:.09em;color:var(--g-700);text-transform:uppercase}
  .ms-step-h{font-size:var(--t-lg);font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.25}
  .ms-step-note{font-size:var(--t-sm);color:var(--slate);line-height:1.55}

  .ms-wiz-group{font-size:var(--t-xs);font-weight:800;letter-spacing:.09em;
    text-transform:uppercase;color:var(--slate);margin:1.3rem 0 .6rem}
  .ms-step legend + .ms-wiz-group{margin-block-start:0}

  /* dlazdice s vyberem */
  .ms-picks{display:grid;gap:.55rem;
    grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))}
  .ms-picks--type{grid-template-columns:repeat(auto-fit,minmax(min(11rem,100%),1fr))}
  .ms-pick{display:block;cursor:pointer}
  /* vstup schovavame vizualne, ne pro klavesnici a odecitace obrazovky */
  .ms-pick input{position:absolute;inline-size:1px;block-size:1px;
    margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .ms-pick-in{display:flex;align-items:center;gap:.7rem;min-block-size:52px;
    padding:.7rem .9rem;background:#fff;border:1px solid var(--line);
    font-size:var(--t-sm);line-height:1.35;color:var(--ink);
    transition:border-color .25s var(--swift),background .25s,translate .25s var(--swift)}
  /* obal ikony je taky <span>, takze ho z roztahovani musime vyjmout —
     jinak dostane flex:1 a rozjede rozlozeni dlazdice */
  .ms-pick-in > span:not(.mi){flex:1;min-inline-size:0}
  .ms-pick-in > .mi{flex:none}
  /* fajfka se objevi az po zaskrtnuti */
  .ms-pick-in > svg:last-child{opacity:0;color:var(--g-700);flex:none;transition:opacity .2s}
  .ms-pick:hover .ms-pick-in{border-color:var(--g-500);translate:0 -2px}
  .ms-pick input:checked + .ms-pick-in{border-color:var(--g-700);background:var(--g-tint);font-weight:650}
  .ms-pick input:checked + .ms-pick-in > svg:last-child{opacity:1}
  .ms-pick input:focus-visible + .ms-pick-in{outline:2px solid var(--g-500);outline-offset:2px}

  /* textova pole */
  .ms-grid{display:grid;gap:.9rem;
    grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr));margin-block-start:1.1rem}
  .ms-field{display:grid;gap:.35rem;margin:0;min-inline-size:0}
  .ms-field--wide{grid-column:1/-1}
  @media(width >= 40rem){ .ms-field--small{max-inline-size:9rem} }
  .ms-field label{font-size:var(--t-xs);font-weight:700;letter-spacing:.05em;
    text-transform:uppercase;color:var(--slate)}
  .ms-field label b{color:var(--g-700)}
  .ms-field :is(input,textarea){inline-size:100%;min-inline-size:0;font:inherit;
    font-size:var(--t-sm);color:var(--ink);background:#fff;
    border:1px solid var(--line);padding:.7rem .85rem;
    transition:border-color .25s var(--swift)}
  .ms-field :is(input,textarea):focus{outline:2px solid var(--g-500);outline-offset:-1px;border-color:var(--g-500)}
  .ms-field :is(input,textarea)[aria-invalid="true"]{border-color:#B3261E;background:#FFF6F5}
  .ms-field textarea{resize:vertical;line-height:1.6}

  /* shrnuti ve ctvrtem kroku */
  .ms-recap{margin-block-start:1.4rem;background:var(--mist);padding:1rem 1.1rem}
  .ms-recap dl{display:grid;gap:.5rem;margin:0}
  .ms-recap dl > div{display:flex;gap:.7rem;align-items:baseline;flex-wrap:wrap}
  .ms-recap dt{font-size:var(--t-xs);font-weight:800;letter-spacing:.06em;
    text-transform:uppercase;color:var(--slate);min-inline-size:6rem}
  .ms-recap dd{margin:0;font-size:var(--t-sm);color:var(--ink);flex:1;min-inline-size:0}

  /* souhlas */
  .ms-consent{margin-block-start:1.3rem}
  .ms-consent label{display:flex;gap:.7rem;align-items:start;cursor:pointer;
    font-size:var(--t-sm);line-height:1.6;color:var(--slate)}
  .ms-consent input{inline-size:20px;block-size:20px;flex:none;margin-block-start:.15rem;
    accent-color:var(--g-700);cursor:pointer}
  .ms-consent a{color:var(--g-700);text-decoration:underline;text-underline-offset:2px}

  /* ovladaci tlacitka */
  .ms-wiz-nav{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;
    margin-block-start:1.6rem;padding-block-start:1.4rem;border-block-start:1px solid var(--line)}
  .ms-wiz-nav .ms-wiz-next,.ms-wiz-nav .ms-wiz-send{margin-inline-start:auto}
  .ms-wiz-nav button[hidden]{display:none}

  /* hlasky */
  .ms-wiz-err{display:none;gap:.55rem;align-items:center;margin-block-start:1rem;
    background:#FFF6F5;border:1px solid #F0C8C4;color:#8C1D18;
    padding:.75rem .95rem;font-size:var(--t-sm);line-height:1.5}
  .ms-wiz-err[data-on]{display:flex}
  .ms-wiz-done{display:flex;gap:.7rem;align-items:center;
    background:var(--g-tint);border:1px solid var(--g-500);color:var(--g-900);
    padding:1rem 1.2rem;font-size:var(--t-md);font-weight:650;margin-block-end:1.4rem}
  .ms-wiz-done svg{flex:none;color:var(--g-700)}

  /* ===== PRAVNI STRANKY =====
     Text prichazi z databaze, takze mu jen dame citelnou sirku a rytmus. */
  .ms-legal{max-inline-size:74ch}
  .ms-legal .entry :is(h1,h2){font-size:var(--t-lg);letter-spacing:-.02em;
    margin-block:2rem .7rem;color:var(--ink)}
  .ms-legal .entry :is(h1,h2):first-child{margin-block-start:0}
  .ms-legal .entry :is(h3,h4){font-size:var(--t-md);margin-block:1.5rem .5rem;color:var(--ink)}
  .ms-legal .entry p{margin-block-end:.9rem;line-height:1.75;font-size:var(--t-sm);color:var(--slate)}
  .ms-legal .entry :is(ul,ol){margin:0 0 1.1rem;padding-inline-start:1.3rem;display:grid;gap:.4rem}
  .ms-legal .entry li{font-size:var(--t-sm);line-height:1.65;color:var(--slate)}
  .ms-legal .entry a{color:var(--g-700);text-decoration:underline;text-underline-offset:2px}
  .ms-legal .entry strong{color:var(--ink)}

  /* ===== DOKUMENTY KE STAZENI ===== */
  .ms-docs{display:grid;gap:.6rem;padding:0;margin:0;list-style:none}
  .ms-docs a{display:flex;align-items:center;gap:1rem;
    background:#fff;border:1px solid var(--line);padding:1rem 1.2rem;
    transition:border-color .3s var(--swift),translate .3s var(--swift),box-shadow .3s var(--swift)}
  .ms-docs a:hover{border-color:var(--g-500);translate:0 -3px;
    box-shadow:0 18px 40px -24px color-mix(in oklab,var(--ink) 60%,transparent)}
  .ms-doc-t{display:grid;gap:.15rem;flex:1;min-inline-size:0}
  .ms-doc-t b{color:var(--ink);font-size:var(--t-md);letter-spacing:-.02em}
  .ms-doc-t small{font-size:var(--t-xs);color:var(--slate);line-height:1.45}
  .ms-doc-m{display:flex;align-items:center;gap:.6rem;flex:none}
  .ms-doc-m em{font-style:normal;font-family:var(--mono);font-size:.62rem;font-weight:700;
    letter-spacing:.08em;background:var(--g-tint);color:var(--g-700);padding:.22rem .5rem}
  .ms-doc-m span{font-size:var(--t-xs);color:var(--slate);font-family:var(--mono)}
  @media(width < 30rem){ .ms-doc-m span{display:none} }

  /* odznak hodnoceni na referencich */
  .badge{display:inline-flex;align-items:center;gap:.5rem;
    background:#fff;border:1px solid var(--line);padding:.5rem .9rem;
    font-size:var(--t-sm);color:var(--slate)}
  .badge b{font-family:var(--mono);font-size:var(--t-md);color:var(--g-700)}

  /* ===== KONTAKT ===== */
  /* radek kontaktu: ikona vlevo, popisek a hodnota vpravo */
  .ms-contact{display:grid;gap:.7rem;padding:0;margin:0;list-style:none}
  .ms-contact li{display:flex;gap:.9rem;align-items:center;
    background:#fff;border:1px solid var(--line);padding:.9rem 1.1rem;
    transition:border-color .3s var(--swift),translate .3s var(--swift)}
  .ms-contact li:hover{border-color:var(--g-500);translate:4px 0}
  .ms-contact .mi{inline-size:30px;block-size:30px}
  .ms-contact div{display:grid;gap:.1rem;min-inline-size:0}
  .ms-contact small{font-size:var(--t-xs);color:var(--slate);
    text-transform:uppercase;letter-spacing:.07em;font-weight:700}
  .ms-contact a,.ms-contact b{color:var(--ink);font-size:var(--t-md);
    font-weight:700;letter-spacing:-.02em;overflow-wrap:anywhere}
  .ms-contact a:hover{color:var(--g-700)}

  /* otviraci doba */
  .ms-hours{display:grid;gap:0;padding:0;margin:0;list-style:none;
    border:1px solid var(--line);background:#fff}
  .ms-hours li{display:flex;justify-content:space-between;gap:1rem;
    padding:.7rem 1.1rem;font-size:var(--t-sm)}
  .ms-hours li + li{border-block-start:1px solid var(--line)}
  .ms-hours li[data-today]{background:var(--g-tint)}
  .ms-hours b{color:var(--ink);font-weight:650}
  .ms-hours span{color:var(--slate);font-family:var(--mono);font-size:var(--t-xs)}

  /* mapa s prepinacem mist */
  .ms-map{border:1px solid var(--line);background:var(--mist);overflow:hidden}
  .ms-map-bar{display:flex;flex-wrap:wrap;gap:.4rem;padding:.6rem;
    background:#fff;border-block-end:1px solid var(--line)}
  .ms-map-bar button{font-size:var(--t-sm);font-weight:650;cursor:pointer;
    border:1px solid transparent;background:transparent;color:var(--slate);
    padding:.5rem .95rem;display:inline-flex;align-items:center;gap:.5rem;
    transition:background .25s,color .25s,border-color .25s}
  .ms-map-bar button:hover{color:var(--g-700);background:var(--g-tint)}
  .ms-map-bar button[aria-pressed="true"]{background:var(--g-700);color:#fff;border-color:var(--g-700)}
  .ms-map-bar button[aria-pressed="true"] .mi{color:#fff}
  .ms-map-bar .mi{inline-size:20px;block-size:20px}
  .ms-map-frame{position:relative;aspect-ratio:16/10;min-block-size:20rem}
  .ms-map-frame iframe{position:absolute;inset:0;inline-size:100%;block-size:100%;border:0;display:block}
  .ms-map-foot{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;align-items:center;
    justify-content:space-between;padding:.85rem 1.1rem;background:#fff;
    border-block-start:1px solid var(--line);font-size:var(--t-sm)}
  .ms-map-foot b{color:var(--ink)}
  .ms-map-foot .go2{display:inline-flex;align-items:center;gap:.4rem;
    color:var(--g-700);font-weight:700;font-size:var(--t-sm)}
  .ms-map-foot .go2:hover{text-decoration:underline;text-underline-offset:3px}
  @media(width < 34rem){ .ms-map-frame{aspect-ratio:4/5} }

  /* ===== STAV FORMULARE ===== */
  .qerr{display:none;align-items:center;gap:.6rem;font-weight:650;margin-block-start:.7rem;
    background:color-mix(in oklab,#B3261E 22%,transparent);color:#fff;padding:.85rem 1.1rem;
    border:1px solid color-mix(in oklab,#FF6B5B 45%,transparent)}
  .qerr[data-on]{display:flex}
  .qerr svg{flex:none}
  /* medova past - clovek ji nevidi, robot ano */
  .qhp{position:absolute!important;inline-size:1px;block-size:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
  /* nadpis, ktery neni H1 (stranka uz vlastni H1 ma), musi vypadat stejne */
  .pagehead .as-h1{color:#fff;font-size:clamp(1.9rem,4.4vw,3.1rem);max-inline-size:20ch;
    font-weight:800;letter-spacing:-.04em;line-height:1.04;margin:0;text-wrap:balance}

  /* ===== DROBECKOVA NAVIGACE ===== */
  .crumbs{gap:.2rem .55rem}
  .crumbs a{color:var(--g-500);text-decoration:none;padding:.15rem .1rem;transition:color .2s}
  .crumbs a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
  /* aktualni polozka: zvyraznena, ale bez blikave vyplne */
  /* Pozor: NavXT dava tridy post-page a post-post vsem polozkam,
     ne jen aktualni - podle nich se cilit neda. */
  .crumbs .current-item,
  .crumbs [aria-current="page"],
  .crumbs > span:last-child:not(:has(a)){
    color:#fff!important;font-weight:650;background:none!important}
  /* NavXT si oddelovac vklada sam - jen mu ubereme na durazu */
  .crumbs .separator,.crumbs .sep{opacity:.4;color:color-mix(in oklab,white 55%,transparent)}
  /* nekterá témata dávají aktivní položce zvýrazněné pozadí — to nechceme */
  .crumbs mark,.crumbs .highlight{background:none;color:#fff}
  /* ===== DROBECKY: MODERNI PODOBA =====
     Breadcrumb NavXT vklada oddelovac jako holy textovy uzel ("//"),
     ktery nejde ostylovat. Nulovou velikosti pisma na obalu ho schovame
     a mezi polozky vlozime vlastni sipku. */
  .crumbs{font-size:0;display:flex;flex-wrap:wrap;align-items:center;gap:.1rem .5rem}
  .crumbs > span,.crumbs > a{font-size:var(--t-xs);line-height:1.5}
  .crumbs > span + span::before{
    content:"";display:inline-block;inline-size:5px;block-size:5px;
    border-block-start:1.5px solid currentColor;border-inline-end:1.5px solid currentColor;
    rotate:45deg;opacity:.4;margin-inline-end:.55rem;
    vertical-align:middle;translate:0 -1px}

  /* prvni polozka je nazev webu a je dlouha - nahradime ji slovem Domu.
     Puvodni text zustava v DOM kvuli strukturovanym datum i cteckam. */
  .crumbs > span:first-child a > span[property="name"]{font-size:0}
  .crumbs > span:first-child a > span[property="name"]::after{
    content:"Domů";font-size:var(--t-xs)}

  /* aktualni stranka: bila a polotucna, bez vyplne */
  .crumbs > span:last-of-type > span[property="name"],
  .crumbs > span:last-child:not(:has(a)){
    color:#fff;font-weight:650;background:none}
  .crumbs a{color:var(--g-500);text-decoration:none}
  .crumbs a:hover span[property="name"]{color:#fff}
  .crumbs a:hover span[property="name"]::after{color:#fff}
  /* ===== TYM ===== */
  .people{display:grid;gap:var(--gap);margin-block-start:2rem;
    grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))}
  .person{background:#fff;border:1px solid var(--line);overflow:hidden;
    transition:translate .35s var(--swift),box-shadow .35s var(--swift),border-color .35s}
  .person:hover{translate:0 -6px;border-color:color-mix(in oklab,var(--g-500) 50%,transparent);
    box-shadow:0 24px 50px -26px color-mix(in oklab,var(--ink) 65%,transparent)}
  .person .face{aspect-ratio:4/5;overflow:hidden;background:var(--mist);
    display:grid;place-items:center;position:relative}
  .person .face img{inline-size:100%;block-size:100%;object-fit:cover;transition:scale .7s var(--swift)}
  .person:hover .face img{scale:1.06}
  .person .face span{font-size:2.2rem;font-weight:800;color:var(--g-700);letter-spacing:-.04em}
  .person .who2{padding:1.1rem 1.2rem 1.3rem;display:grid;gap:.3rem}
  .person h3{font-size:var(--t-md)}
  .person .role{font-size:var(--t-xs);font-weight:700;letter-spacing:.08em;
    text-transform:uppercase;color:var(--g-700)}
  .person p{font-size:var(--t-sm);line-height:1.6}

  /* ===== FOTOGALERIE ===== */
  .shots{display:grid;gap:.8rem;margin-block-start:2rem;
    grid-template-columns:repeat(auto-fill,minmax(min(15rem,100%),1fr))}
  .shot2{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--ink);
    transition:translate .35s var(--swift),box-shadow .35s var(--swift)}
  .shot2:hover{translate:0 -5px;box-shadow:0 22px 46px -24px color-mix(in oklab,var(--ink) 70%,transparent)}
  .shot2 img{inline-size:100%;block-size:100%;object-fit:cover;transition:scale .7s var(--swift)}
  .shot2:hover img{scale:1.07}
  .shot2 .cap{position:absolute;inset-inline:0;inset-block-end:0;padding:1.6rem .9rem .8rem;color:#fff;
    background:linear-gradient(180deg,transparent,color-mix(in oklab,var(--ink) 92%,transparent));
    translate:0 100%;opacity:0;transition:.35s var(--swift)}
  .shot2:hover .cap{translate:0 0;opacity:1}
  .shot2 .cap b{font-size:var(--t-sm);font-weight:650;line-height:1.3}
  /* ===== TARIFY NA PODSTRANKACH ===== */
  .plans--page{margin-block:0 2.5rem}
  .plans--page .plan{grid-template-columns:minmax(11rem,1fr) auto minmax(11rem,1.1fr) minmax(10rem,auto)}
  @media(width < 62rem){
    .plans--page .plan{grid-template-columns:1fr 1fr}
    .plans--page .plan .icons{grid-column:2;justify-self:end}
    .plans--page .plan .money{grid-column:1/-1;justify-items:start;text-align:start}
  }
  @media(width < 34rem){
    .plans--page .plan{grid-template-columns:1fr}
    .plans--page .plan .icons{grid-column:1;justify-self:start}
  }
  /* ===== ANIMOVANA IKONA TYPU PRIPOJENI ===== */
  .ct{display:grid;place-items:center;inline-size:30px;block-size:30px;color:var(--g-700)}
  .plan--dark .ct{color:var(--g-500)}
  .plan:hover .ct{color:#06120A}
  .plan--dark:hover .ct{color:#06120A}
  .ct svg{inline-size:100%;block-size:100%;overflow:visible}

  /* bezdrat: vlny se rozbihaji od vysilace */
  .ct-w{opacity:0;transform-origin:24px 17px}
  .ct--air .ct-w1{animation:ctwave 2.6s var(--ease) infinite}
  .ct--air .ct-w2{animation:ctwave 2.6s var(--ease) infinite .45s}
  @keyframes ctwave{0%{opacity:0;scale:.55}35%{opacity:1}100%{opacity:0;scale:1.15}}

  /* optika: svetelny impulz probehne vlaknem */
  .ct--optika .ct-pulse{stroke-dasharray:14 74;stroke-dashoffset:88;
    animation:ctpulse 2.4s linear infinite}
  @keyframes ctpulse{to{stroke-dashoffset:-14}}
  .ct--optika .ct-dot{animation:ctglow 2.4s ease-in-out infinite}
  @keyframes ctglow{0%,100%{opacity:.35;r:2.6}50%{opacity:1;r:3.8}}

  /* metalicka linka: signal nad modemem */
  .ct--vdsl .ct-w1{animation:ctwave2 2.4s var(--ease) infinite}
  .ct--vdsl .ct-w2{animation:ctwave2 2.4s var(--ease) infinite .4s}
  @keyframes ctwave2{0%{opacity:0;translate:0 4px}40%{opacity:1;translate:0 0}100%{opacity:0;translate:0 -3px}}

  @media(prefers-reduced-motion:reduce){
    .ct-w,.ct-pulse,.ct-dot{animation:none!important;opacity:1!important;stroke-dasharray:none!important}
  }

  /* tarify na podstrance jsou az za textem a drzi se pri zemi */
  .plans--compact{margin-block:2.5rem 0}
  .plans--compact .plan{padding:1.1rem 1.3rem;gap:1rem}
  .plans--compact .plan h3{font-size:var(--t-md)}
  .plans--compact .plan .desc{font-size:var(--t-xs);margin-block-start:.3rem}
  .plans--compact .plan .kicker{font-size:.62rem}
  .plans--compact .plan .rate{font-size:clamp(1.7rem,3.4vw,2.2rem)}
  .plans--compact .plan .icons span{inline-size:42px}
  .plans--compact .plan li{font-size:var(--t-xs)}
  .plans--compact .plan .btn{padding:.7rem 1.15rem;font-size:var(--t-xs)}

  /* text v galerii at je citelny */
  .shots + p{margin-block-start:1.4rem}

  /* karta v galerii ma vypadat jako odkaz */
  .shot2::after{content:"";position:absolute;inset:0;
    border:2px solid transparent;transition:border-color .3s var(--swift)}
  .shot2:hover::after{border-color:var(--g-500)}
  .shot2 .cap{translate:0 0;opacity:1;
    background:linear-gradient(180deg,transparent,color-mix(in oklab,var(--ink) 88%,transparent))}
  .shot2 .cap::after{content:"";display:inline-block;inline-size:6px;block-size:6px;
    border-block-start:2px solid var(--g-500);border-inline-end:2px solid var(--g-500);
    rotate:45deg;margin-inline-start:.5rem;translate:0 -1px}

  /* clen tymu je klikaci */
  .person{position:relative;isolation:isolate}
  .person .stretch{position:absolute;inset:0;z-index:3}
  .person .who2 h3{transition:color .25s}
  .person:hover .who2 h3{color:var(--g-700)}
  .person .who2::after{content:"Zobrazit profil";display:block;margin-block-start:.5rem;
    font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:var(--g-700);opacity:0;translate:0 4px;transition:.3s var(--swift)}
  .person:hover .who2::after{opacity:1;translate:0}

  /* tabulka tarifu vlozena za uvodni text */
  .ms-tarify-slot{display:contents}
  .plans--compact{margin-block:clamp(1.5rem,3vw,2.5rem)}
  /* ===== PRESTAVENE STRANKY ===== */
  .reasons{list-style:none;padding:0;display:grid;gap:.85rem;margin:0}
  .reasons li{display:flex;gap:.8rem;align-items:start;
    background:#fff;border:1px solid var(--line);padding:.95rem 1.1rem;
    transition:border-color .3s var(--swift),translate .3s var(--swift)}
  .reasons li:hover{border-color:color-mix(in oklab,var(--g-500) 50%,transparent);translate:4px 0}
  .reasons svg{flex:none;margin-block-start:.2rem}
  .reasons b{display:block;color:var(--ink);font-size:var(--t-sm);margin-block-end:.15rem}
  .reasons span{font-size:var(--t-sm);line-height:1.6}

  .certs{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(min(11rem,100%),1fr));
    max-inline-size:32rem}
  .cert{margin:0;border:1px solid var(--line);background:#fff;padding:.6rem;
    transition:translate .3s var(--swift),box-shadow .3s var(--swift),border-color .3s}
  .cert:hover{translate:0 -4px;border-color:var(--g-500);
    box-shadow:0 18px 40px -22px color-mix(in oklab,var(--ink) 55%,transparent)}
  .cert img{inline-size:100%;block-size:auto;display:block}
  .cert a{display:block;cursor:zoom-in}
  .cert figcaption{font-size:var(--t-xs);color:var(--slate);
    text-align:center;margin-block-start:.55rem;line-height:1.4}

  /* karta vyhody na prestavene strance */
  .ben-wrap .ben > div{display:grid;gap:.2rem}
  /* uvodni text ve dvou sloupcich - drzi sirku tabulky pod nim */
  /* Dva sloupce, ne tri: po perexu zbyvaji dva odstavce a tretí sloupec
     by zustal prazdny — text by pak konchil daleko pred tabulkou pod nim. */
  .intro-cols{display:grid;gap:clamp(1.4rem,3vw,2.8rem);
    grid-template-columns:repeat(auto-fit,minmax(min(28rem,100%),1fr));
    margin-block-end:clamp(1.6rem,3vw,2.6rem);align-items:start}
  .intro-cols p{line-height:1.72;margin:0}
  .intro-cols p:first-child{font-size:var(--t-lg);line-height:1.55;color:var(--ink);
    grid-column:1/-1;max-inline-size:none}

  /* rozcestnik na dalsi technologie */
  .crosslinks{display:grid;gap:.9rem;margin-block-start:clamp(1.5rem,3vw,2.2rem);
    grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr))}
  .crosslink{display:flex;align-items:center;gap:.9rem;
    background:#fff;border:1px solid var(--line);padding:1rem 1.2rem;
    transition:border-color .3s var(--swift),translate .3s var(--swift),box-shadow .3s var(--swift)}
  .crosslink:hover{border-color:var(--g-500);translate:0 -3px;
    box-shadow:0 18px 40px -24px color-mix(in oklab,var(--ink) 60%,transparent)}
  /* Rozcestnik pocital jen s .ct z tarifu. Ikony z inc/icons.php maji
     vlastni velikost 38px a v uzsi karte se roztahovaly pres pul dlazdice —
     musi dostat stejny ram jako .ct. */
  .crosslink .ct,
  .crosslink .mi{inline-size:34px;block-size:34px;flex:none}
  .crosslink .mi svg{overflow:visible}
  .crosslink span{display:grid;gap:.1rem;flex:1;min-inline-size:0}
  .crosslink b{color:var(--ink);font-size:var(--t-md);letter-spacing:-.02em}
  .crosslink small{font-size:var(--t-xs);color:var(--slate)}
  .crosslink > svg{color:var(--g-700);flex:none;transition:translate .3s var(--swift)}
  .crosslink:hover > svg{translate:4px 0}

  /* zaverecna vyzva - tmavy pruh s nadpisem vlevo a tlacitkem vpravo.
     Stejna stavba jako .quick, jen v inkoustove variante, aby se dve
     zelene plochy pod sebou nebily. */
  .closer{position:relative;overflow:hidden;isolation:isolate;color:#fff;
    background:linear-gradient(112deg,var(--ink),var(--ink-3) 55%,var(--g-900));
    padding:clamp(1.7rem,3.5vw,2.6rem) clamp(1.5rem,4vw,2.8rem);
    display:grid;gap:clamp(1.2rem,3vw,2.4rem);align-items:center;
    grid-template-columns:minmax(0,1fr) auto}
  @media(width < 48rem){.closer{grid-template-columns:1fr;justify-items:start}}
  .closer::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.45;
    background-image:radial-gradient(color-mix(in oklab,white 20%,transparent) 1.1px,transparent 1.1px);
    background-size:19px 19px;mask:radial-gradient(72% 100% at 100% 0%,#000,transparent 72%)}
  .closer > *{position:relative;z-index:1}
  .closer h2{color:#fff;font-size:var(--t-lg);letter-spacing:-.02em}
  .closer p{margin-block-start:.55rem;font-size:var(--t-sm);line-height:1.65;
    max-inline-size:56ch;color:color-mix(in oklab,white 78%,transparent)}
  .closer .btn{white-space:nowrap}

  /* dvojice kontaktu v zelenem pruhu dostupnosti */
  .avail{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
  .avail .btn{white-space:nowrap}

  /* Vyzva v zelenem pruhu: text vlevo, tlacitka vpravo.
     Drive se to psalo inline stylem primo v sablone, jenze inline styl
     prebije i media query - panel se na mobilu nesložil do jednoho sloupce
     a tlacitka pretekala mimo jeho vypln. Proto je z toho trida. */
  .quick--cta{grid-template-columns:minmax(0,1fr) auto;align-items:center}
  @media(width < 48rem){.quick--cta{grid-template-columns:1fr}}
  .quick--cta .say{max-inline-size:58ch}

  /* ===== SLUZEBNI STRANKY (wi-fi mesh a dalsi) =====
     Nove nazvy trid maji predponu ms-, aby se nesrazily s tridami
     v ulozenem obsahu ze stareho page builderu. */

  /* rozsah sluzby — karta s nadpisem a odrazkami */
  .ms-scope{display:grid;gap:var(--gap);padding:0;margin:0;list-style:none;
    grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr))}
  .ms-scope > li{background:#fff;border:1px solid var(--line);
    padding:1.5rem 1.4rem 1.6rem;display:grid;gap:.85rem;align-content:start;
    transition:border-color .4s var(--swift),translate .4s var(--swift),box-shadow .4s var(--swift)}
  .ms-scope > li:hover{border-color:var(--g-500);translate:0 -4px;
    box-shadow:0 22px 46px -26px color-mix(in oklab,var(--ink) 62%,transparent)}
  .ms-scope h3{font-size:var(--t-md);letter-spacing:-.02em;display:flex;gap:.6rem;align-items:baseline}
  .ms-scope h3 i{font-family:var(--mono);font-style:normal;font-size:var(--t-xs);
    font-weight:700;color:var(--g-700);flex:none}
  .ms-scope ul{display:grid;gap:.5rem;padding:0;margin:0;list-style:none}
  .ms-scope ul li{display:flex;gap:.55rem;align-items:start;
    font-size:var(--t-sm);line-height:1.55;color:var(--slate)}
  .ms-scope ul svg{flex:none;margin-block-start:.3rem}

  /* varianty reseni — cenove balicky bez pevne castky */
  .ms-pkgs{display:grid;gap:var(--gap);padding:0;margin:0;list-style:none;
    grid-template-columns:repeat(auto-fit,minmax(min(18rem,100%),1fr))}
  .ms-pkg{position:relative;background:#fff;border:1px solid var(--line);
    padding:1.7rem 1.5rem 1.8rem;display:grid;gap:1.1rem;align-content:start;
    transition:border-color .45s var(--swift),translate .45s var(--swift),box-shadow .45s var(--swift)}
  .ms-pkg:hover{border-color:var(--g-500);translate:0 -5px;
    box-shadow:0 26px 52px -28px color-mix(in oklab,var(--ink) 68%,transparent)}
  .ms-pkg > header > p{font-size:var(--t-xs);font-weight:800;letter-spacing:.1em;
    text-transform:uppercase;color:var(--g-700)}
  /* uroven nadpisu se lisi podle zanoreni sekce, vzhled ma byt stejny */
  .ms-pkg :is(h3,h4){font-size:var(--t-lg);letter-spacing:-.025em;margin-block-start:.3rem}
  .ms-pkg > header > small{display:block;font-size:var(--t-sm);color:var(--slate);
    margin-block-start:.45rem;line-height:1.55}
  .ms-pkg ul{display:grid;gap:.5rem;padding:0;margin:0;list-style:none}
  .ms-pkg ul li{display:flex;gap:.55rem;align-items:start;font-size:var(--t-sm);line-height:1.55}
  .ms-pkg ul svg{flex:none;margin-block-start:.3rem}
  .ms-pkg > footer{border-block-start:1px solid var(--line);padding-block-start:.9rem;
    font-size:var(--t-sm);font-weight:700;color:var(--ink)}
  .ms-pkg > footer span{display:block;font-weight:500;color:var(--slate);
    font-size:var(--t-xs);margin-block-start:.2rem}

  /* widget poskytovatele (Skylink iframe, plugin SledovaniTV) —
     cizi obsah, tak mu jen dame ram a hlidame, aby nepretekal */
  .ms-tvwidget{border:1px solid var(--line);background:#fff;
    padding:clamp(.6rem,2vw,1.2rem);overflow-x:auto}
  .ms-tvwidget iframe{inline-size:100%;border:0;display:block}
  .ms-tvwidget img{max-inline-size:100%;block-size:auto}

  /* pocet kanalu jako hlavni cislo na karte televize */
  .ms-tv{position:relative}
  .ms-tv-num{display:flex;align-items:baseline;gap:.45rem;margin:0;
    padding-block:.7rem;border-block:1px solid var(--line)}
  .ms-tv-num b{font-family:var(--mono);font-size:clamp(1.9rem,4vw,2.6rem);font-weight:700;
    line-height:.9;letter-spacing:-.055em;color:var(--g-700)}
  .ms-tv-num span{font-size:var(--t-sm);color:var(--slate)}
  .ms-tv:hover .ms-tv-num b{color:var(--g-500)}

  /* pruh cisel u realizace */
  .ms-facts{display:grid;gap:.9rem;margin-block-start:clamp(1.6rem,3vw,2.4rem);
    grid-template-columns:repeat(auto-fit,minmax(min(11rem,100%),1fr))}
  .ms-facts > div{background:#fff;border:1px solid var(--line);padding:1.1rem 1.2rem;
    display:grid;gap:.25rem;justify-items:start;
    transition:border-color .3s var(--swift),translate .3s var(--swift)}
  .ms-facts > div:hover{border-color:var(--g-500);translate:0 -3px}
  .ms-facts b{font-family:var(--mono);font-size:clamp(1.7rem,3.4vw,2.3rem);font-weight:700;
    line-height:1;letter-spacing:-.05em;color:var(--g-700)}
  .ms-facts span{font-size:var(--t-xs);color:var(--slate);line-height:1.4}

  /* postup krok za krokem */
  .ms-steps{counter-reset:ms-step;display:grid;gap:.9rem;padding:0;margin:0;list-style:none}
  @media(width >= 52rem){.ms-steps{grid-template-columns:1fr 1fr}}
  .ms-steps > li{counter-increment:ms-step;position:relative;background:#fff;
    border:1px solid var(--line);padding:1.2rem 1.3rem 1.3rem 4.2rem;
    transition:border-color .35s var(--swift),translate .35s var(--swift)}
  .ms-steps > li::before{content:counter(ms-step,decimal-leading-zero);
    position:absolute;inset-block-start:1.15rem;inset-inline-start:1.3rem;
    font-family:var(--mono);font-weight:700;font-size:var(--t-md);letter-spacing:-.04em;
    color:color-mix(in oklab,var(--g-700) 55%,white)}
  .ms-steps > li:hover{border-color:var(--g-500);translate:4px 0}
  .ms-steps > li:hover::before{color:var(--g-700)}
  .ms-steps h3{font-size:var(--t-md);letter-spacing:-.02em}
  .ms-steps p{font-size:var(--t-sm);color:var(--slate);margin-block-start:.35rem;line-height:1.6}

  /* caste dotazy — nativni <details>, funguje i bez JavaScriptu */
  .ms-faq{display:grid;gap:.6rem;max-inline-size:60rem}
  .ms-faq details{background:#fff;border:1px solid var(--line);
    transition:border-color .35s var(--swift)}
  .ms-faq details[open],.ms-faq details:hover{border-color:var(--g-500)}
  .ms-faq summary{cursor:pointer;list-style:none;position:relative;
    padding:1.05rem 3.2rem 1.05rem 1.2rem;font-weight:700;color:var(--ink);
    font-size:var(--t-md);letter-spacing:-.015em;line-height:1.45}
  /* otazka je nadpis kvuli osnove stranky, ale nema vypadat jako nadpis */
  .ms-faq summary h3{font:inherit;letter-spacing:inherit;color:inherit;display:inline}
  .ms-faq summary::-webkit-details-marker{display:none}
  .ms-faq summary::after{content:"";position:absolute;inset-inline-end:1.3rem;inset-block-start:50%;
    inline-size:10px;block-size:10px;margin-block-start:-7px;
    border-inline-end:2.2px solid var(--g-700);border-block-end:2.2px solid var(--g-700);
    rotate:45deg;transition:rotate .3s var(--swift),margin .3s var(--swift)}
  .ms-faq details[open] summary::after{rotate:225deg;margin-block-start:-3px}
  .ms-faq summary:focus-visible{outline:2px solid var(--g-500);outline-offset:-2px}
  .ms-faq details > div{padding:0 1.2rem 1.2rem;font-size:var(--t-sm);
    line-height:1.72;color:var(--slate);max-inline-size:76ch}

  /* ===== SPOLUPRACE S ABEZO (template-parts/abezo.php) ===== */

  .ms-partner{position:relative;isolation:isolate;overflow:hidden;
    background:var(--ink);color:#93A79C;
    padding:clamp(1.9rem,4vw,3rem) clamp(1.6rem,4vw,3rem);
    display:grid;gap:clamp(1.6rem,3.4vw,3rem);align-items:center;
    grid-template-columns:repeat(auto-fit,minmax(min(22rem,100%),1fr))}
  /* zeleny nadech od rohu - stejny motiv jako .quick, jen tlumeny */
  .ms-partner::before{content:"";position:absolute;z-index:-1;inset-block-start:-40%;inset-inline-end:-15%;
    inline-size:60%;aspect-ratio:1;border-radius:50%;
    background:radial-gradient(circle,color-mix(in oklab,var(--g-500) 30%,transparent),transparent 68%)}
  .ms-partner h2,.ms-partner b{color:#fff}
  .ms-partner .lede{max-inline-size:46ch}
  .ms-partner__note{margin-block-start:1.1rem;padding-inline-start:.9rem;
    border-inline-start:3px solid var(--g-500);font-size:var(--t-sm);color:#B7C9BE}
  .ms-partner .btn{margin-block-start:1.5rem}

  .ms-partner__facts{list-style:none;padding:0;margin:0;display:grid;gap:.75rem}
  .ms-partner__facts li{padding:1rem 1.15rem;
    background:color-mix(in oklab,white 7%,transparent);
    border-inline-start:3px solid var(--g-500)}
  .ms-partner__facts b{display:block;font-size:var(--t-md);font-weight:800;letter-spacing:-.02em}
  .ms-partner__facts small{display:block;margin-block-start:.3rem;font-size:var(--t-xs);line-height:1.55}

  /* ===== MONTAZ INTERKOMU (template-parts/pages/montaz-interkomu.php) ===== */

  /* Nazvy trid maji predponu ms-ik-. Monic taha Bootstrap a obecne nazvy
     jako .badge nebo .chip by si s nim sahly do zeli. */

  /* stitek nad nadpisem - zaobleny zamerne, aby se necetl jako dalsi karta */
  .ms-ik-badge{display:inline-flex;align-items:center;gap:.5rem;
    padding:.42rem .9rem;border-radius:99px;
    background:var(--g-tint);color:var(--g-800);
    font-family:var(--mono);font-size:var(--t-xs);font-weight:700;
    letter-spacing:.08em;text-transform:uppercase}
  .ms-ik-badge::before{content:"";inline-size:7px;block-size:7px;flex:none;
    border-radius:50%;background:var(--g-500)}

  .ms-ik-chips{list-style:none;padding:0;margin:1.6rem 0 0;
    display:flex;flex-wrap:wrap;gap:.5rem}
  .ms-ik-chips li{display:inline-flex;align-items:center;gap:.5rem;
    padding:.55rem .85rem;background:#fff;border:1px solid var(--line);
    font-size:var(--t-xs);font-weight:650;line-height:1.3;color:var(--ink);
    transition:border-color .3s var(--swift),translate .3s var(--swift)}
  .ms-ik-chips li:hover{border-color:var(--g-500);translate:0 -2px}
  .ms-ik-chips .mi{flex:none;color:var(--g-700)}

  /* fotka z montaze vedle textu - vlastni, ne katalogova */
  .ms-ik-shot{margin:0}
  .ms-ik-shot img{display:block;inline-size:100%;block-size:auto;
    aspect-ratio:4/5;object-fit:cover;
    box-shadow:0 30px 60px -34px color-mix(in oklab,var(--ink) 75%,transparent)}
  .ms-ik-shot figcaption{margin-block-start:.75rem;padding-inline-start:.8rem;
    border-inline-start:3px solid var(--g-500);
    font-size:var(--t-xs);line-height:1.5;color:var(--slate)}
  /* pod dva sloupce se fotka roztahne na celou sirku a na vysku by zabrala
     cely displej - proto se orizne na pas a drzi horni tretinu, kde je panel */
  @media(width < 52rem){
    .ms-ik-shot img{aspect-ratio:auto;block-size:min(58vh,24rem);object-position:50% 38%}
  }

  /* retez: dverni jednotka - kabel - monitor a mobil - zamek */
  .ms-ik-flow{list-style:none;padding:0;margin:0;display:grid;gap:1.9rem}
  .ms-ik-flow__step{position:relative;background:#fff;border:1px solid var(--line);
    padding:1.35rem 1.25rem 1.45rem;display:grid;gap:.45rem;align-content:start;
    transition:border-color .4s var(--swift),translate .4s var(--swift),box-shadow .4s var(--swift)}
  .ms-ik-flow__step:hover{border-color:var(--g-500);translate:0 -4px;
    box-shadow:0 22px 46px -26px color-mix(in oklab,var(--ink) 62%,transparent)}
  .ms-ik-flow__ic{color:var(--g-700)}
  .ms-ik-flow b{font-size:var(--t-md);font-weight:800;letter-spacing:-.02em;color:var(--ink)}
  .ms-ik-flow small{font-size:var(--t-sm);line-height:1.55;color:var(--slate)}

  /* treti clanek se vetvi na dve zarizeni - obal uz karta neni */
  .ms-ik-flow__step--split{background:none;border:0;padding:0;gap:.9rem}
  .ms-ik-flow__step--split:hover{translate:0 0;box-shadow:none}
  .ms-ik-flow__step--split > div{background:#fff;border:1px solid var(--line);
    padding:1.1rem 1.15rem 1.2rem;display:grid;gap:.4rem;align-content:start;
    transition:border-color .4s var(--swift),translate .4s var(--swift)}
  .ms-ik-flow__step--split > div:hover{border-color:var(--g-500);translate:0 -3px}

  /* spojnice mezi clanky - sipka z okraju, zadny prvek navic v HTML */
  .ms-ik-flow__step::after{content:"";position:absolute;inline-size:9px;block-size:9px;
    border-inline-end:2px solid var(--g-500);border-block-end:2px solid var(--g-500);
    inset-block-end:-1.35rem;inset-inline-start:50%;translate:-50% 0;rotate:45deg}
  .ms-ik-flow__step:last-child::after{content:none}

  /* od tabletu se vetev vejde vedle sebe a retez tolik nenaroste */
  @media(width >= 34rem){
    .ms-ik-flow__step--split{grid-template-columns:1fr 1fr}
  }

  /* ctyri sloupce vedle sebe az tam, kde na kartu zbyde rozumna radka;
     driv by z popisku byly uzke prouzky po sesti slovech */
  @media(width >= 72rem){
    .ms-ik-flow{grid-template-columns:repeat(4,1fr);gap:2.6rem}
    .ms-ik-flow__step--split{grid-template-columns:1fr}
    .ms-ik-flow__step::after{inset-block-end:auto;inset-block-start:50%;
      inset-inline-start:auto;inset-inline-end:-1.75rem;translate:0 -50%;rotate:-45deg}
  }

  /* zarizeni, ktera se montuji - nazev modelu strojopisem, at je citelny */
  .ms-ik-hw{list-style:none;padding:0;margin:0;display:grid;gap:var(--gap);
    grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr))}
  .ms-ik-hw > li{background:#fff;border:1px solid var(--line);
    padding:1.7rem 1.5rem 1.8rem;display:grid;gap:1.1rem;align-content:start;
    transition:border-color .45s var(--swift),translate .45s var(--swift),box-shadow .45s var(--swift)}
  .ms-ik-hw > li:hover{border-color:var(--g-500);translate:0 -5px;
    box-shadow:0 26px 52px -28px color-mix(in oklab,var(--ink) 68%,transparent)}
  .ms-ik-hw header > p{font-size:var(--t-xs);font-weight:800;letter-spacing:.1em;
    text-transform:uppercase;color:var(--g-700)}
  .ms-ik-hw h3{font-family:var(--mono);font-size:var(--t-lg);font-weight:700;
    letter-spacing:-.02em;color:var(--ink);margin-block-start:.4rem}
  .ms-ik-hw header small{display:block;margin-block-start:.5rem;
    font-size:var(--t-sm);line-height:1.55;color:var(--slate)}
  .ms-ik-hw ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
  .ms-ik-hw ul li{display:flex;gap:.55rem;align-items:start;
    font-size:var(--t-sm);line-height:1.55;color:var(--slate)}
  .ms-ik-hw ul svg{flex:none;margin-block-start:.3rem}

  /* tri technologie - doporucena varianta ma zelenou linku nahore,
     ne vyplnene pozadi, aby zbyle dve nevypadaly jako druha liga */
  .ms-ik-tech{list-style:none;padding:0;margin:0;display:grid;gap:var(--gap);
    grid-template-columns:repeat(auto-fit,minmax(min(18rem,100%),1fr))}
  .ms-ik-tech > li{background:#fff;border:1px solid var(--line);
    padding:1.6rem 1.45rem 1.7rem;display:grid;gap:.75rem;align-content:start;
    transition:border-color .45s var(--swift),translate .45s var(--swift),box-shadow .45s var(--swift)}
  .ms-ik-tech > li:hover{border-color:var(--g-500);translate:0 -4px;
    box-shadow:0 24px 48px -28px color-mix(in oklab,var(--ink) 64%,transparent)}
  .ms-ik-tech > li.is-pick{border-color:color-mix(in oklab,var(--g-500) 55%,white);
    box-shadow:inset 0 3px 0 0 var(--g-500)}
  .ms-ik-tech__tag{font-size:var(--t-xs);font-weight:800;letter-spacing:.1em;
    text-transform:uppercase;color:var(--g-700)}
  .ms-ik-tech h3{font-size:var(--t-lg);letter-spacing:-.025em;color:var(--ink)}
  .ms-ik-tech > li > p{font-size:var(--t-sm);line-height:1.6;color:var(--slate)}
  .ms-ik-tech ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
  .ms-ik-tech ul li{display:flex;gap:.55rem;align-items:start;
    font-size:var(--t-sm);line-height:1.55;color:var(--slate)}
  .ms-ik-tech ul svg{flex:none;margin-block-start:.3rem}

  /* poznamka pod sekci - odkud jsou cisla a co plati jen pro cast modelu */
  .ms-ik-note{margin-block-start:clamp(1.6rem,3vw,2.2rem);max-inline-size:74ch;
    padding-inline-start:.95rem;border-inline-start:3px solid var(--g-500);
    font-size:var(--t-sm);line-height:1.7;color:var(--slate)}

  @media(prefers-reduced-motion:reduce){
    .ms-ik-chips li,.ms-ik-flow__step,.ms-ik-flow__step--split > div,
    .ms-ik-hw > li,.ms-ik-tech > li{transition:none}
    .ms-ik-chips li:hover,.ms-ik-flow__step:hover,.ms-ik-flow__step--split > div:hover,
    .ms-ik-hw > li:hover,.ms-ik-tech > li:hover{translate:0 0}
  }

  /* ===== INSTALACE TV NA ZED (template-parts/pages/instalace-televize-na-zed.php) ===== */

  /* Predpona ms-tvz- ("TV na zed"). Kratsi ms-tv- pouzit nejde: v tomhle
     souboru uz jsou .ms-tv, .ms-tv-num a .ms-tvwidget z televiznich stranek.
     Obecne nazvy jako .badge nebo .chip nepripadaji v uvahu vubec - Monic
     taha Bootstrap a ten by je prebarvil. */

  .ms-tvz-badge{display:inline-flex;align-items:center;gap:.5rem;
    padding:.42rem .9rem;border-radius:99px;
    background:var(--g-tint);color:var(--g-800);
    font-family:var(--mono);font-size:var(--t-xs);font-weight:700;
    letter-spacing:.08em;text-transform:uppercase}
  .ms-tvz-badge::before{content:"";inline-size:7px;block-size:7px;flex:none;
    border-radius:50%;background:var(--g-500)}

  /* stitky pod perexem v uvodu a vycet konektoru u kabelaze;
     polozka bez ikony (konektory) drzi stejnou vysku diky min-height radku */
  .ms-tvz-chips{list-style:none;padding:0;margin:1.6rem 0 0;
    display:flex;flex-wrap:wrap;gap:.5rem}
  .ms-tvz-chips li{display:inline-flex;align-items:center;gap:.5rem;
    padding:.55rem .85rem;background:#fff;border:1px solid var(--line);
    font-size:var(--t-xs);font-weight:650;line-height:1.3;color:var(--ink);
    transition:border-color .3s var(--swift),translate .3s var(--swift)}
  .ms-tvz-chips li:hover{border-color:var(--g-500);translate:0 -2px}
  .ms-tvz-chips .mi{flex:none;color:var(--g-700)}

  /* uvozovaci veta nad vyctem konektoru */
  .ms-tvz-lead{font-size:var(--t-sm);font-weight:700;color:var(--ink)}

  /* Fotka z montaze vedle textu.
     Pomer stran se drzi toho, v jakem byl snimek porizen, aby se orezavalo
     jen tam, kde to je zamer. Snimky z montazi jsou 16:9, uvodni zaber 4:3
     a zamerovani pasmem na vysku - kazdy proto ma svou variantu.
     Mobilni prepis tu zadny neni: pri sirce 328 px vyjde 16:9 na 184 px
     a 4:5 na 410 px, coz se vejde bez dalsiho orezu. */
  .ms-tvz-shot{margin:0}
  .ms-tvz-shot img{display:block;inline-size:100%;block-size:auto;
    aspect-ratio:16/9;object-fit:cover;
    box-shadow:0 30px 60px -34px color-mix(in oklab,var(--ink) 75%,transparent)}
  /* uvodni fotka - snimek je 4:3, takze se z nej nic neztrati */
  .ms-tvz-shot--hero img{aspect-ratio:4/3}
  /* snimek na vysku je 9:16; do 4:5 se orizne zamerne a drzi horni cast
     zaberu, kde technik meri - dole uz je jen naradi na koberci */
  .ms-tvz-shot--tall img{aspect-ratio:4/5;object-position:50% 28%}
  .ms-tvz-shot figcaption{margin-block-start:.75rem;padding-inline-start:.8rem;
    border-inline-start:3px solid var(--g-500);
    font-size:var(--t-xs);line-height:1.5;color:var(--slate)}

  /* co vsechno se pri montazi resi - osm kratkych dlazdic.
     Zamerne bez ramecku pres celou plochu: je to prehled, ne osm karet,
     ktere by prebily sekce pod nimi. */
  /* Spodni hranice 15.5rem drzi na siroko nejvys ctyri sloupce. Pri uzsi
     mire by se jich veslo pet a osm dlazdic by se zlomilo 5+3 - druha rada
     by zustala do poloviny prazdna. Ctyri sloupce daji 4+4. */
  .ms-tvz-does{list-style:none;padding:0;margin:0;display:grid;gap:.9rem;
    grid-template-columns:repeat(auto-fit,minmax(min(15.5rem,100%),1fr))}
  .ms-tvz-does > li{background:#fff;border:1px solid var(--line);
    padding:1.15rem 1.2rem 1.25rem;display:grid;gap:.35rem;align-content:start;
    transition:border-color .35s var(--swift),translate .35s var(--swift)}
  .ms-tvz-does > li:hover{border-color:var(--g-500);translate:0 -3px}
  .ms-tvz-does .mi{color:var(--g-700);margin-block-end:.15rem}
  .ms-tvz-does b{font-size:var(--t-md);font-weight:800;letter-spacing:-.02em;color:var(--ink)}
  .ms-tvz-does small{font-size:var(--t-xs);line-height:1.55;color:var(--slate)}

  /* ctyri typy steny - cislo strojopisem misto ikony.
     Ikonova sada zadny material zdiva nema a natlacit sem stit nebo dum
     by znamenalo, ze ikona nic nerika. */
  .ms-tvz-walls{list-style:none;padding:0;margin:0;display:grid;gap:var(--gap);
    grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))}
  .ms-tvz-walls > li{background:#fff;border:1px solid var(--line);
    padding:1.4rem 1.35rem 1.5rem;display:grid;gap:.4rem;align-content:start;
    border-block-start:3px solid var(--g-500);
    transition:border-color .4s var(--swift),translate .4s var(--swift),box-shadow .4s var(--swift)}
  .ms-tvz-walls > li:hover{translate:0 -4px;
    box-shadow:0 22px 46px -26px color-mix(in oklab,var(--ink) 62%,transparent)}
  .ms-tvz-walls > li > p{font-family:var(--mono);font-size:var(--t-xs);font-weight:700;
    letter-spacing:.06em;color:var(--g-700)}
  .ms-tvz-walls h3{font-size:var(--t-lg);letter-spacing:-.025em;color:var(--ink)}
  .ms-tvz-walls small{font-size:var(--t-sm);line-height:1.6;color:var(--slate)}

  /* co vsechno se po montazi jeste nastavi - dva sloupce fajfek */
  .ms-tvz-list{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
  @media(width >= 46rem){.ms-tvz-list{grid-template-columns:1fr 1fr;column-gap:2rem}}
  .ms-tvz-list li{display:flex;gap:.6rem;align-items:start;
    font-size:var(--t-sm);line-height:1.6;color:var(--slate)}
  .ms-tvz-list svg{flex:none;margin-block-start:.32rem}

  /* poznamka pod sekci - co plati jen podle situace a co posoudim na miste */
  .ms-tvz-note{margin-block-start:clamp(1.6rem,3vw,2.2rem);max-inline-size:74ch;
    padding-inline-start:.95rem;border-inline-start:3px solid var(--g-500);
    font-size:var(--t-sm);line-height:1.7;color:var(--slate)}

  /* Zaverecna vyzva na teto strance se sklada do jednoho sloupce driv nez
     zbytek webu. Duvod: media dotaz meri sirku okna vcetne posuvniku, ale
     na rozvrzeni zbyva o jeho sirku min - pri okne 768 px tedy dvousloupcove
     pravidlo .quick--cta jeste plati, k dispozici je vsak jen 753 px. Rada
     tlacitek si vezme 486 px a na nadpis zbyde 120 px, takze panel naroste
     na 732 px a text se lame po slabikach. Pravidlo je zamerne navazane na
     .ms-tvz-cta, ne na .quick--cta: stejna vada je i jinde na webu, ale
     opravovat ji globalne by zmenilo vzhled ostatnich stranek. */
  @media(width < 52rem){
    .ms-tvz-cta{grid-template-columns:1fr}
  }

  /* radek odkazu na navazujici sluzby v textu */
  .ms-tvz-inline{display:flex;flex-wrap:wrap;gap:.5rem .7rem;align-items:center;
    font-size:var(--t-sm);font-weight:700}
  .ms-tvz-inline a{color:var(--g-700);text-decoration:underline;
    text-underline-offset:3px;text-decoration-thickness:2px;
    text-decoration-color:color-mix(in oklab,var(--g-500) 45%,transparent);
    transition:text-decoration-color .3s var(--swift)}
  .ms-tvz-inline a:hover{text-decoration-color:var(--g-500)}
  .ms-tvz-inline span{color:color-mix(in oklab,var(--slate) 60%,white)}

  @media(prefers-reduced-motion:reduce){
    .ms-tvz-chips li,.ms-tvz-does > li,.ms-tvz-walls > li{transition:none}
    .ms-tvz-chips li:hover,.ms-tvz-does > li:hover,.ms-tvz-walls > li:hover{translate:0 0}
  }

  /* ===== TVORBA WEBU (template-parts/pages/tvorba-webovych-stranek.php) =====
     Vsechny tridy maji predponu ms-web-, protoze rodicovska sablona Monic
     tahne Bootstrap a obecne nazvy (card, box, grid) by tise prebarvil. */

  /* --- uvod --------------------------------------------------------------- */
  /* Uvod navazuje primo na zahlavi stranky s <h1>, takze shora staci min
     mista nez u bezneho pasu - jinak mezi nadpisem a textem vznikne dira. */
  .ms-web-hero{padding-block-start:clamp(2.2rem,5vw,3.6rem)}
  .ms-web-heroin{display:grid;gap:clamp(1.8rem,4vw,3.2rem);align-items:center}
  @media(width >= 62rem){.ms-web-heroin{grid-template-columns:1.02fr .98fr}}

  .ms-web-badge{display:inline-flex;align-items:center;gap:.5rem;
    padding:.42rem .9rem;border-radius:99px;
    background:var(--g-tint);color:var(--g-800);
    font-family:var(--mono);font-size:var(--t-xs);font-weight:700;
    letter-spacing:.08em;text-transform:uppercase}
  .ms-web-badge::before{content:"";inline-size:7px;block-size:7px;flex:none;
    border-radius:50%;background:var(--g-500)}

  /* veta, ktera mluvi primo na stavajiciho zakaznika */
  .ms-web-said{margin-block-start:1.1rem;max-inline-size:56ch;
    padding-inline-start:.95rem;border-inline-start:3px solid var(--g-500);
    font-size:var(--t-sm);line-height:1.7;color:var(--slate)}

  .ms-web-acts{display:flex;flex-wrap:wrap;gap:.8rem;margin-block-start:1.7rem}

  /* --- kresleny nahled webu ----------------------------------------------- */
  /* Neni to fotka ani snimek ciziho webu - jen prazdne bloky, aby bylo videt
     rozvrzeni. Cele v HTML a CSS, takze se nic nestahuje a nic neskace. */
  .ms-web-mock{position:relative;padding-block-end:2.2rem;padding-inline-end:1.6rem}

  .ms-web-grid{position:absolute;inset-block-start:-6%;inset-inline-start:-4%;
    inline-size:70%;block-size:70%;z-index:0;opacity:.5;
    background-image:radial-gradient(circle,color-mix(in oklab,var(--ink) 22%,transparent) 1px,transparent 1px);
    background-size:14px 14px}

  .ms-web-win{position:relative;z-index:1;background:#fff;
    border:1px solid var(--line);
    box-shadow:0 34px 70px -40px color-mix(in oklab,var(--ink) 70%,transparent)}

  .ms-web-bar{display:flex;align-items:center;gap:.35rem;
    padding:.6rem .8rem;background:var(--mist);
    border-block-end:1px solid var(--line)}
  .ms-web-bar i{inline-size:8px;block-size:8px;border-radius:50%;flex:none;
    background:color-mix(in oklab,var(--ink) 22%,white)}
  .ms-web-url{flex:1;block-size:11px;margin-inline-start:.6rem;
    background:color-mix(in oklab,var(--ink) 10%,white)}

  .ms-web-page{display:grid;gap:.85rem;padding:1rem}

  .ms-web-nav{display:flex;align-items:center;gap:.5rem}
  .ms-web-nav b{inline-size:34%;block-size:11px;background:var(--g-600)}
  .ms-web-nav u{flex:1;block-size:7px;text-decoration:none;
    background:color-mix(in oklab,var(--ink) 13%,white)}

  /* hlavni pruh - nadpis, radek textu a tlacitko */
  .ms-web-band{display:grid;gap:.55rem;padding:1.1rem .95rem 1.2rem;
    background:linear-gradient(135deg,
      color-mix(in oklab,var(--g-500) 16%,white),
      color-mix(in oklab,var(--mist) 70%,white))}

  .ms-web-l{display:block;block-size:9px;
    background:color-mix(in oklab,var(--ink) 16%,white)}
  .ms-web-l--x{inline-size:82%;block-size:14px;
    background:color-mix(in oklab,var(--ink) 40%,white)}
  .ms-web-l--m{inline-size:62%}
  .ms-web-l--s{inline-size:38%}
  .ms-web-btn{inline-size:34%;block-size:19px;margin-block-start:.35rem;
    background:var(--g-700)}

  .ms-web-tri{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.55rem}
  .ms-web-tri em{display:block;block-size:38px;border:1px solid var(--line);
    background:color-mix(in oklab,var(--mist) 45%,white)}

  /* telefon vedle okna - stejna stranka v uzkem rozvrzeni */
  .ms-web-ph{position:absolute;z-index:2;
    inset-block-end:0;inset-inline-end:0;
    inline-size:clamp(74px,17%,104px);aspect-ratio:9/17.5;
    background:#fff;border:1px solid var(--line);border-radius:12px;
    padding:7px 6px;
    box-shadow:0 24px 46px -26px color-mix(in oklab,var(--ink) 75%,transparent)}
  .ms-web-phin{display:grid;gap:5px;align-content:start;block-size:100%}
  .ms-web-blk{display:block;block-size:30px;
    background:color-mix(in oklab,var(--g-500) 22%,white)}

  /* --- stitky pod uvodem a pas duvery ------------------------------------- */
  .ms-web-tags,.ms-web-trust{list-style:none;padding:0;margin:0;
    display:flex;flex-wrap:wrap;gap:.5rem}
  .ms-web-tags{margin-block-start:clamp(1.8rem,4vw,2.6rem)}
  .ms-web-tags li,.ms-web-trust li{display:inline-flex;align-items:center;gap:.5rem;
    padding:.55rem .85rem;background:#fff;border:1px solid var(--line);
    font-size:var(--t-xs);font-weight:650;line-height:1.3;color:var(--ink);
    transition:border-color .3s var(--swift),translate .3s var(--swift)}
  .ms-web-tags li:hover,.ms-web-trust li:hover{border-color:var(--g-500);translate:0 -2px}
  /* pas duvery lezi na mlze, takze se rozlozi rovnomerne pres celou sirku */
  @media(width >= 52rem){
    .ms-web-trust{display:grid;grid-template-columns:repeat(4,1fr)}
    .ms-web-trust li{justify-content:center}
  }

  /* --- proc to delame jinak ------------------------------------------------ */
  .ms-web-why{list-style:none;padding:0;margin:0;display:grid;gap:var(--gap)}
  .ms-web-why > li{display:flex;gap:1rem;align-items:start;
    background:#fff;border:1px solid var(--line);padding:1.3rem 1.3rem 1.4rem;
    border-inline-start:3px solid var(--g-500);
    transition:translate .4s var(--swift),box-shadow .4s var(--swift)}
  .ms-web-why > li:hover{translate:0 -3px;
    box-shadow:0 22px 44px -28px color-mix(in oklab,var(--ink) 62%,transparent)}
  .ms-web-why .mi{color:var(--g-700)}
  .ms-web-why h3{font-size:var(--t-md);letter-spacing:-.02em}
  .ms-web-why p{margin-block-start:.3rem;font-size:var(--t-sm);
    line-height:1.65;color:var(--slate)}

  /* --- co musi web zvladnout ---------------------------------------------- */
  .ms-web-areas{display:grid;gap:var(--gap);
    grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr))}
  .ms-web-area{background:#fff;border:1px solid var(--line);
    padding:1.5rem 1.4rem 1.6rem;display:grid;gap:.5rem;align-content:start;
    transition:border-color .4s var(--swift),translate .4s var(--swift),
      box-shadow .4s var(--swift)}
  .ms-web-area:hover{border-color:var(--g-500);translate:0 -4px;
    box-shadow:0 24px 48px -28px color-mix(in oklab,var(--ink) 62%,transparent)}
  .ms-web-area .mi{color:var(--g-700)}
  .ms-web-area h3{font-size:var(--t-lg);letter-spacing:-.025em;color:var(--ink)}
  .ms-web-area p{font-size:var(--t-sm);line-height:1.65;color:var(--slate)}
  /* prvni dlazdice ma vahu - jinak je to sedm stejnych krabic */
  @media(width >= 58rem){
    .ms-web-areas{grid-template-columns:repeat(3,1fr)}
    .ms-web-area--wide{grid-column:span 2;
      background:linear-gradient(135deg,var(--g-tint),#fff)}
    .ms-web-area--wide h3{font-size:var(--t-xl)}
  }

  /* --- texty napiseme spolecne -------------------------------------------- */
  .ms-web-say{display:grid;gap:clamp(1.6rem,3.5vw,2.8rem);align-items:center}
  @media(width >= 58rem){.ms-web-say{grid-template-columns:1.15fr .85fr}}
  .ms-web-pull{font-size:var(--t-lg);font-weight:800;line-height:1.35;
    letter-spacing:-.03em;color:var(--ink);text-wrap:balance;
    padding-inline-start:1.1rem;border-inline-start:4px solid var(--g-500)}

  /* --- SEO na tmavem podkladu --------------------------------------------- */
  .ms-web-seo .h-sec{color:#fff}
  .ms-web-seolede{max-inline-size:62ch;font-size:var(--t-md);line-height:1.7;
    color:color-mix(in oklab,white 78%,transparent)}
  .ms-web-seolist{list-style:none;padding:0;margin-block-start:clamp(1.8rem,4vw,2.6rem);
    display:grid;gap:1px;background:color-mix(in oklab,white 14%,transparent);
    grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))}
  .ms-web-seolist li{display:grid;gap:.3rem;padding:1.05rem 1.1rem 1.15rem;
    background:var(--ink)}
  .ms-web-seolist b{font-size:var(--t-sm);font-weight:800;letter-spacing:-.01em;color:#fff}
  .ms-web-seolist small{font-size:var(--t-xs);line-height:1.6;
    color:color-mix(in oklab,white 66%,transparent)}
  .ms-web-seo .ms-web-note{color:color-mix(in oklab,white 72%,transparent)}

  /* poznamka pod sekci - co plati s vyhradou */
  .ms-web-note{margin-block-start:clamp(1.6rem,3vw,2.2rem);max-inline-size:74ch;
    padding-inline-start:.95rem;border-inline-start:3px solid var(--g-500);
    font-size:var(--t-sm);line-height:1.7;color:var(--slate)}

  /* --- novy web vs. rekonstrukce ------------------------------------------ */
  .ms-web-paths{display:grid;gap:var(--gap);
    grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr))}
  .ms-web-path{background:#fff;border:1px solid var(--line);
    padding:1.6rem 1.5rem 1.7rem;display:grid;gap:.55rem;align-content:start;
    border-block-start:3px solid var(--line)}
  .ms-web-path .mi{color:var(--g-700)}
  .ms-web-path h3{font-size:var(--t-lg);letter-spacing:-.025em;color:var(--ink)}
  .ms-web-path p{font-size:var(--t-sm);line-height:1.65;color:var(--slate)}
  /* rekonstrukce je ta zajimavejsi cesta, tak je zvyraznena */
  .ms-web-path--hot{border-block-start-color:var(--g-500);
    background:linear-gradient(180deg,var(--g-tint),#fff 42%)}
  .ms-web-pathnote{font-size:var(--t-sm);color:var(--slate)}
  .ms-web-keep{list-style:none;padding:0;margin-block-start:.5rem;display:grid;gap:.45rem}
  .ms-web-keep li{display:flex;gap:.55rem;align-items:start;
    font-size:var(--t-sm);line-height:1.55;color:var(--ink)}
  .ms-web-keep svg{flex:none;margin-block-start:.28rem}

  /* --- proces ------------------------------------------------------------- */
  .ms-web-proc{display:grid;gap:clamp(1.8rem,4vw,3rem)}
  @media(width >= 64rem){
    .ms-web-proc{grid-template-columns:.82fr 1.18fr}
    /* nadpis zustava na miste, kroky se pod nim posouvaji.
       Odsazeni shora pocita s lepivou hlavickou (.masthead, top:0). */
    .ms-web-prochead{position:sticky;inset-block-start:7rem;align-self:start}
  }
  .ms-web-steps{list-style:none;padding:0;margin:0;display:grid;gap:0}
  .ms-web-steps > li{display:grid;gap:.3rem;padding-block:1.15rem;
    padding-inline-start:3.6rem;position:relative;
    border-block-start:1px solid var(--line)}
  .ms-web-steps > li:first-child{border-block-start:0}
  /* g-800, ne g-700: cislo lezi na mlze a svetlejsi zelena tam ma kontrast
     4.13, kdezto AA chce 4.5. Tmavsi odstin vychazi na 5.9. */
  .ms-web-no{position:absolute;inset-block-start:1.15rem;inset-inline-start:0;
    font-family:var(--mono);font-size:var(--t-sm);font-weight:700;
    color:var(--g-800);letter-spacing:.04em}
  .ms-web-steps h3{font-size:var(--t-md);letter-spacing:-.02em;color:var(--ink)}
  .ms-web-steps > li > p:last-child{font-size:var(--t-sm);line-height:1.65;color:var(--slate)}

  /* --- vsechno pod jednou strechou ---------------------------------------- */
  .ms-web-stack{list-style:none;padding:0;margin:0;display:grid;gap:1px;
    background:var(--line);border:1px solid var(--line)}
  .ms-web-stack li{display:flex;gap:.75rem;align-items:center;
    padding:.9rem 1rem;background:#fff}
  .ms-web-stack .mi{color:var(--g-700)}
  .ms-web-stack b{display:block;font-size:var(--t-sm);font-weight:800;color:var(--ink)}
  .ms-web-stack small{display:block;font-size:var(--t-xs);line-height:1.5;color:var(--slate)}

  .ms-web-inline{display:flex;flex-wrap:wrap;gap:.4rem .6rem;align-items:center;
    margin-block-start:1.3rem;font-size:var(--t-sm);font-weight:700}
  .ms-web-inline a{color:var(--g-700);text-decoration:underline;
    text-underline-offset:3px;text-decoration-thickness:2px;
    text-decoration-color:color-mix(in oklab,var(--g-500) 45%,transparent);
    transition:text-decoration-color .3s var(--swift)}
  .ms-web-inline a:hover{text-decoration-color:var(--g-500)}
  .ms-web-inline span{color:color-mix(in oklab,var(--slate) 60%,white)}

  /* --- realizace ----------------------------------------------------------- */
  .ms-web-cases{display:grid;gap:var(--gap);
    grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr))}
  .ms-web-case{background:#fff;border:1px solid var(--line);display:grid;
    align-content:start}
  .ms-web-caseimg{inline-size:100%;block-size:auto;aspect-ratio:16/10;object-fit:cover}
  .ms-web-casein{display:grid;gap:.5rem;padding:1.3rem 1.3rem 1.4rem}
  .ms-web-casetag{font-family:var(--mono);font-size:var(--t-xs);font-weight:700;
    letter-spacing:.06em;text-transform:uppercase;color:var(--g-700)}
  .ms-web-case h3{font-size:var(--t-lg);letter-spacing:-.025em;color:var(--ink)}
  .ms-web-case p{font-size:var(--t-sm);line-height:1.65;color:var(--slate)}
  .ms-web-case b{color:var(--ink)}
  .ms-web-case a{display:inline-flex;align-items:center;gap:.4rem;
    font-size:var(--t-sm);font-weight:700;color:var(--g-700)}

  /* dokud nejsou potvrzene realizace, stoji tu jedna veta misto portfolia */
  .ms-web-empty{max-inline-size:56ch;padding-inline-start:.95rem;
    border-inline-start:3px solid var(--g-500);
    font-size:var(--t-md);line-height:1.7;color:var(--slate)}

  /* --- audit stavajiciho webu --------------------------------------------- */
  .ms-web-audit{display:grid;gap:clamp(1.4rem,3vw,2.4rem);align-items:center}
  @media(width >= 56rem){.ms-web-audit{grid-template-columns:minmax(0,1fr) auto}}
  .ms-web-audit .btn{white-space:nowrap}

  /* --- cena ---------------------------------------------------------------- */
  .ms-web-price{display:grid;gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
  .ms-web-price > div{max-inline-size:62ch}
  /* `auto auto` a zarovnani na zacatek, ne `1fr auto`.
     S 1fr se prvni sloupec roztahl pres celou sirku obalu, text se ale zastavil
     na 62ch - a kresba tak odletela az k pravemu okraji, kde stala sama
     s obrovskou mezerou. Takhle stoji hned vedle textu jako jeden celek. */
  @media(width >= 52rem){
    .ms-web-price{grid-template-columns:auto auto;justify-content:start}
  }
  /* Bez podkladoveho kolecka - je to konturova kresba, ne piktogram v disku;
     v kruhu by se musela zmensit natolik, ze by se ztratily detaily. */
  .ms-web-pricefig{margin:0;display:grid;place-items:center;
    inline-size:clamp(8.5rem,13vw,11.5rem);aspect-ratio:1;color:var(--g-700)}
  .ms-web-pricefig .mi{inline-size:100%;block-size:100%}
  /* Na uzkem displeji ikona mizi - pod textem by jen pridala vysku k odrolovani
     a nic nesdeluje, je to ozdoba.
     Musi stat az za deklaraci vys: obe maji stejnou specificitu, takze
     rozhoduje poradi v souboru. Driv `display:grid` skryti prebijelo. */
  @media(width < 52rem){.ms-web-pricefig{display:none}}
  .ms-web-pricenote{display:flex;gap:.6rem;align-items:start;
    margin-block-start:1.3rem;font-size:var(--t-sm);font-weight:700;color:var(--ink)}
  .ms-web-pricenote svg{flex:none;margin-block-start:.3rem}

  /* --- zaverecna vyzva ------------------------------------------------------ */
  /* Ocko je v panelu .quick, ktery ma zeleny prechod g-900 -> g-500. Zelene
     pismo z .eyebrow--on-dark na nem klesa az k 2.0, proto tady bile: na tmave
     casti prechodu, kde levy sloupec lezi, vychazi 4.9. */
  .ms-web-cta .eyebrow{margin-block-end:.7rem;color:#fff}
  .ms-web-human{margin-block-start:.9rem;font-size:var(--t-sm);font-weight:700;
    color:color-mix(in oklab,white 88%,transparent)}
  /* Stejny duvod jako u .ms-tvz-cta o kus vys: media dotaz meri sirku okna
     vcetne posuvniku, takze pri okne 768 px zbyva na rozvrzeni jen 753 px
     a sdilene pravidlo .quick--cta (48rem) tu jeste drzi dva sloupce.
     Tady je v levem sloupci navic ocko a veta o cloveku, takze se panel
     musi slozit driv. Vazano na vlastni tridu, aby se nemenil zbytek webu. */
  @media(width < 52rem){
    .ms-web-cta{grid-template-columns:1fr}
  }

  /* --- radek schopnosti v sekci na titulni strane ------------------------- */
  .ms-web-caps{margin-block-start:1.1rem;font-family:var(--mono);
    font-size:var(--t-xs);font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;line-height:1.8;color:var(--g-700)}

  @media(prefers-reduced-motion:reduce){
    .ms-web-tags li,.ms-web-trust li,.ms-web-why > li,.ms-web-area,.ms-web-path{transition:none}
    .ms-web-tags li:hover,.ms-web-trust li:hover,.ms-web-why > li:hover,
    .ms-web-area:hover{translate:0 0}
  }