/* Instalatérství Perlík — archetyp „Technický modrotisk".
   Výkres na modrém papíře: mřížka, kóty, popisky verzálkami.
   Fonty Anton + Chivo, paleta z dna.json. Žádná fotka — plochy nese
   mřížka, barva a čísla. */

:root{
  --papir:#16273a;        /* odstín pozadí pro odsazené bloky */
  --cara:rgba(159,182,204,.24);
  --cara-silna:rgba(159,182,204,.42);
  --sirka:min(1120px, 92vw);
  --mezera:clamp(3.5rem, 7vw, 6.5rem);
}

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

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--pozadi);
  color:var(--text);
  font-family:"Chivo",-apple-system,sans-serif;
  font-weight:300;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:"Anton",sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.01em;
  /* Anton má krátký prostor nad verzálkami; při line-height pod 1,05 se
     české háčky a čárky otírají o řádek nad sebou. Proto 1,08, ne 0,98. */
  line-height:1.08;
  margin:0;
}

a{color:var(--primarni)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--primarni);
  outline-offset:3px;
}

.skryte{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* --- pruh, který přiznává, že je to ukázka ------------------------------ */
.ukazka-pruh{
  background:var(--primarni);
  color:#08131f;
  font-size:.78rem;
  letter-spacing:.03em;
  padding:.5rem 1rem;
  display:flex;
  gap:.75rem;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  text-align:center;
}
.ukazka-pruh__stitek{
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  border:1.5px solid currentColor;
  padding:.05rem .45rem;
}

/* --- hlavička ----------------------------------------------------------- */
.hlava{
  width:var(--sirka);
  margin-inline:auto;
  padding:1.4rem 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
  border-bottom:1px solid var(--cara);
}
.znacka{text-decoration:none;color:var(--text);display:flex;align-items:baseline;gap:.6rem}
.znacka__jmeno{font-family:"Anton",sans-serif;font-size:1.6rem;text-transform:uppercase;letter-spacing:.02em}
.znacka__obor{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.22em;color:var(--akcent);
}
.menu{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}
.menu a{
  color:var(--akcent);text-decoration:none;
  font-size:.8rem;text-transform:uppercase;letter-spacing:.13em;
}
.menu a:hover{color:var(--text)}
.menu__tel{
  color:var(--pozadi) !important;background:var(--primarni);
  padding:.45rem .85rem;font-weight:700;
}

/* --- kóta: podpisové měřítko sekce --------------------------------------
   Vodorovná kóta jako na výkresu — čárka s koncovými zarážkami a číslem.
   Nese vždycky skutečný údaj té sekce, ne ozdobné pořadové číslo. */
.kota{
  display:flex;align-items:center;gap:.75rem;
  margin:0 0 1.1rem;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;
  color:var(--akcent);
}
.kota__cara{
  flex:0 0 clamp(48px,10vw,120px);height:1px;background:var(--akcent);
  position:relative;
}
.kota__cara::before,.kota__cara::after{
  content:"";position:absolute;top:-4px;width:1px;height:9px;background:var(--akcent);
}
.kota__cara::before{left:0}
.kota__cara::after{right:0}

/* --- hero --------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;padding:var(--mezera) 0 calc(var(--mezera) * .8)}
.hero__vykres{
  position:absolute;inset:0;
  background-image:
    linear-gradient(var(--cara) 1px,transparent 1px),
    linear-gradient(90deg,var(--cara) 1px,transparent 1px),
    linear-gradient(var(--cara-silna) 1px,transparent 1px),
    linear-gradient(90deg,var(--cara-silna) 1px,transparent 1px);
  background-size:28px 28px,28px 28px,140px 140px,140px 140px;
  mask-image:linear-gradient(to bottom,#000 0%,#000 55%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 55%,transparent 100%);
  pointer-events:none;
}
.hero__obsah{position:relative;width:var(--sirka);margin-inline:auto}
.hero h1{
  font-size:clamp(3.2rem,11vw,7.5rem);
  margin:0 0 1.4rem;
  text-shadow:0 0 40px rgba(15,27,42,.9);
}
.hero__perex{
  max-width:46ch;font-size:clamp(1.05rem,1rem + .4vw,1.3rem);
  color:#cfdcea;margin:0 0 2rem;
}
.hero__akce{display:flex;gap:.9rem;flex-wrap:wrap;margin-bottom:3rem}

.tlacitko{
  display:inline-block;
  font-family:"Chivo",sans-serif;font-weight:700;font-size:.85rem;
  text-transform:uppercase;letter-spacing:.1em;
  padding:.95rem 1.6rem;
  border:1.5px solid var(--primarni);
  color:var(--primarni);text-decoration:none;
  background:transparent;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.tlacitko:hover{background:rgba(90,169,240,.14)}
.tlacitko--plne{background:var(--primarni);color:var(--pozadi)}
.tlacitko--plne:hover{background:#7cbcf5}

.hero__cisla{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:1px;margin:0;background:var(--cara);
  border:1px solid var(--cara);
}
.hero__cisla > div{background:var(--pozadi);padding:1.1rem 1.2rem}
.hero__cisla dt{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;color:var(--akcent);
  margin-bottom:.35rem;
}
.hero__cisla dd{
  margin:0;font-family:"Anton",sans-serif;font-size:1.65rem;
  text-transform:uppercase;color:var(--primarni);
}

/* --- podpisový prvek: běžící pás ---------------------------------------- */
.pas{
  border-block:1px solid var(--cara-silna);
  background:var(--papir);
  overflow:hidden;
  padding:.85rem 0;
}
.pas__stopa{
  display:flex;gap:2.5rem;width:max-content;
  animation:jede 38s linear infinite;
}
.pas__stopa span{
  font-family:"Anton",sans-serif;text-transform:uppercase;
  font-size:1.05rem;letter-spacing:.04em;color:var(--akcent);
  white-space:nowrap;
}
.pas__stopa span::after{content:" ·";color:var(--primarni)}
@keyframes jede{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .pas__stopa{animation:none;flex-wrap:wrap;width:100%;justify-content:center}
}

/* --- bloky -------------------------------------------------------------- */
.blok{width:var(--sirka);margin-inline:auto;padding:var(--mezera) 0}
/* Sekce přes celou šířku, ale s obsahem v pruhu jako zbytek webu.
   Přes mřížku, ne přes `> * {width;margin:auto}` — to by přebilo každý potomek,
   který si vlastní šířku nebo margin nastavuje sám (tabulka, perex). */
.blok--tmavsi{
  width:100%;background:var(--papir);
  border-block:1px solid var(--cara);
  display:grid;
  grid-template-columns:1fr var(--sirka) 1fr;
}
.blok--tmavsi > *{grid-column:2}
.blok h2{font-size:clamp(2.1rem,5.5vw,3.4rem);margin-bottom:1.1rem}
.blok__uvod{max-width:56ch;color:#c3d2e2;margin:0 0 2.6rem}

/* --- legenda výkresu (služby) ------------------------------------------- */
.legenda{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:1px;background:var(--cara);border:1px solid var(--cara);
}
.legenda li{background:var(--pozadi);padding:1.6rem 1.5rem 1.7rem}
.legenda__kod{
  display:inline-block;font-weight:700;font-size:.7rem;letter-spacing:.16em;
  color:var(--pozadi);background:var(--akcent);padding:.1rem .45rem;margin-bottom:.9rem;
}
.legenda h3{font-size:1.35rem;margin-bottom:.5rem}
.legenda p{margin:0;color:#bccbdc;font-size:.96rem}

/* --- ceník -------------------------------------------------------------- */
.cenik{width:100%;border-collapse:collapse;text-align:left}
.cenik th,.cenik td{padding:.95rem .4rem;border-bottom:1px solid var(--cara)}
.cenik thead th{
  font-family:"Chivo",sans-serif;font-weight:700;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.18em;color:var(--akcent);
  border-bottom:1px solid var(--cara-silna);
}
.cenik tbody th{font-weight:400}
.cenik td{
  font-family:"Anton",sans-serif;text-transform:uppercase;
  color:var(--primarni);white-space:nowrap;text-align:right;font-size:1.1rem;
}
.cenik__pozn{margin-top:1.4rem;color:var(--akcent);font-size:.92rem;max-width:56ch}

/* --- postup (skutečná posloupnost, proto číslované) ---------------------- */
.postup{
  list-style:none;margin:0;padding:0;counter-reset:none;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2rem;
}
.postup li{border-top:2px solid var(--primarni);padding-top:1.1rem}
.postup__cislo{
  display:block;font-family:"Anton",sans-serif;font-size:2.4rem;
  color:var(--primarni);line-height:1;margin-bottom:.5rem;
}
.postup h3{font-size:1.2rem;margin-bottom:.45rem}
.postup p{margin:0;color:#bccbdc;font-size:.95rem}

/* --- formulář ----------------------------------------------------------- */
.formular{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.2rem 1.4rem;max-width:720px;
}
.pole{margin:0;display:flex;flex-direction:column;gap:.4rem}
.pole--siroke{grid-column:1/-1}
.pole label{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--akcent);
}
.pole__pozn{text-transform:none;letter-spacing:0;opacity:.8}
.pole input,.pole textarea{
  font-family:"Chivo",sans-serif;font-size:1rem;color:var(--text);
  background:rgba(9,18,29,.65);
  border:1px solid var(--cara-silna);border-radius:0;
  padding:.8rem .9rem;width:100%;
}
.pole textarea{resize:vertical}
.pole input::placeholder,.pole textarea::placeholder{color:#7d90a5}
.formular__akce{
  grid-column:1/-1;margin:0;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
}
.formular__pozn{font-size:.85rem;color:var(--akcent)}

/* --- patička ------------------------------------------------------------ */
.pata{
  border-top:1px solid var(--cara-silna);
  background:var(--papir);
  padding:var(--mezera) 0 2.5rem;
}
.pata__mrizka{
  width:var(--sirka);margin-inline:auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2.5rem;
}
.pata__nadpis{font-size:1.15rem;margin-bottom:.8rem}
.pata p{margin:0 0 .6rem;color:#c3d2e2;font-size:.95rem}
.pata__tel a{
  font-family:"Anton",sans-serif;font-size:1.9rem;text-decoration:none;
  letter-spacing:.01em;
}
.doba{margin:0}
.doba > div{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;border-bottom:1px solid var(--cara)}
.doba dt{color:var(--akcent);font-size:.85rem;text-transform:uppercase;letter-spacing:.1em}
.doba dd{margin:0;font-size:.95rem}
.pata__demo{
  width:var(--sirka);margin:3rem auto 0;padding-top:1.5rem;
  border-top:1px solid var(--cara);
  font-size:.86rem;color:var(--akcent);max-width:none;
}

/* --- chybová stránka ---------------------------------------------------- */
.ctyristaCtyri{
  width:var(--sirka);margin-inline:auto;padding:var(--mezera) 0;
  min-height:52vh;display:flex;flex-direction:column;justify-content:center;
}
.ctyristaCtyri h1{font-size:clamp(3rem,12vw,7rem);margin-bottom:1rem}
.ctyristaCtyri p{max-width:46ch;color:#c3d2e2}

@media (max-width:600px){
  .hlava{padding:1rem 0}
  .menu{gap:.9rem}
  .hero__cisla{grid-template-columns:1fr}
}