/* ==========================================================================
   SafeRegal - verejny web
   Sirka: sekce jsou vzdy pres celou sirku okna, obsah drzi .wrap
   ========================================================================== */

:root{
  /* Svetle sede plochy s vystouplym okrajem. Modra zustava jen v logu -
     jinde je neutralni seda, znackova barva je cervena. */
  --navy:#2f3338;      /* tmavy text a nadpisy */
  --navy-2:#e7e7e7;    /* plocha paticky */
  --navy-3:#dcdcdc;
  --blue:#5c626b;      /* ikony a neutralni akcent */
  --blue-2:#42474e;
  --red:#e01521;
  --red-2:#b91019;
  --bg:#f0f0f0;
  --bg-2:#e4e4e4;
  --ink:#26292e;
  --mute:#6d7278;
  --line:#c9c9c9;
  --white:#fff;
  --r:10px;
  --r-sm:6px;
  /* embos: svetlo vlevo nahore, stin vpravo dole */
  --emb:inset 1px 1px 0 rgba(255,255,255,.95), inset -1px -1px 0 rgba(0,0,0,.17), 0 1px 3px rgba(0,0,0,.10);
  --emb-lg:inset 1px 1px 0 rgba(255,255,255,.95), inset -1px -1px 0 rgba(0,0,0,.19), 0 6px 16px rgba(0,0,0,.14);
  --sunk:inset 1px 1px 3px rgba(0,0,0,.16), inset -1px -1px 0 rgba(255,255,255,.9);
  /* vsechny karty na webu pouzivaji --sh / --sh-lg, takze staci prepsat je */
  --sh:var(--emb);
  --sh-lg:var(--emb-lg);
  --wrap:1800px;
  --pad:clamp(14px,2.4vw,40px);
  --sec:clamp(56px,6vw,104px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;padding:0;width:100%;overflow-x:hidden;
  font-family:'Barlow',-apple-system,'Segoe UI',Arial,sans-serif;
  font-size:16px;line-height:1.65;color:var(--ink);background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-2)}
h1,h2,h3,h4{margin:0;line-height:1.18;font-weight:800;letter-spacing:-.02em;color:var(--navy)}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
button{font:inherit}
:focus-visible{outline:3px solid var(--blue-2);outline-offset:2px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:200;background:#fff;padding:10px 16px;border-radius:8px}
.ic{width:1.25em;height:1.25em;flex:0 0 auto}
.mute{color:var(--mute)}
.center{text-align:center}

/* ---------------------------------------------------------------- hlavicka */
.hdr{position:sticky;top:0;z-index:90;background:#fff;border-bottom:1px solid var(--line);transition:box-shadow .2s}
.hdr.stuck{box-shadow:0 6px 22px rgba(20,40,80,.1)}
.hdr-in{display:flex;align-items:center;gap:clamp(10px,2vw,32px);min-height:78px}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;color:var(--navy)}
.brand img{max-height:52px;width:auto}
.brand-mark{width:34px;height:39px}
.brand-txt{font-size:clamp(20px,2vw,26px);font-weight:800;letter-spacing:-.03em;color:#12328f}
.brand-txt span{color:var(--red)}

.nav{display:flex;align-items:center;gap:clamp(4px,1.1vw,20px);margin-left:auto}
.nav>a,.drop>a{
  display:flex;align-items:center;gap:4px;padding:9px 4px;font-size:15px;font-weight:600;
  color:var(--navy);white-space:nowrap;position:relative;
}
.nav>a::after,.drop>a::after{
  content:"";position:absolute;left:4px;right:4px;bottom:2px;height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .22s;
}
.nav>a:hover::after,.drop:hover>a::after,.nav>a.on::after,.drop>a.on::after{transform:scaleX(1)}
.nav>a.on,.drop>a.on{color:var(--blue)}
.chev{width:14px;height:14px;transform:rotate(90deg);opacity:.55}
.drop{position:relative}
.drop-menu{
  position:absolute;top:100%;left:-14px;min-width:260px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-sm);box-shadow:var(--sh-lg);padding:8px;opacity:0;visibility:hidden;
  transform:translateY(6px);transition:.2s;
}
.drop:hover .drop-menu,.drop:focus-within .drop-menu{opacity:1;visibility:visible;transform:none}
.drop-menu a{display:block;padding:9px 12px;border-radius:7px;font-size:14.5px;font-weight:600;color:var(--navy)}
.drop-menu a:hover{background:var(--bg);color:var(--blue)}

.hdr-act{display:flex;align-items:center;gap:clamp(8px,1.2vw,18px);flex:0 0 auto}
.hdr-tel{display:flex;align-items:center;gap:7px;font-weight:700;font-size:15px;color:var(--navy);white-space:nowrap}
.hdr-tel .ic{color:var(--red)}
.hdr-usr{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--bg);color:var(--navy)}
.hdr-usr:hover{background:var(--navy);color:#fff}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line);background:#fff;border-radius:9px;color:var(--navy);align-items:center;justify-content:center;cursor:pointer}
.nav-mob-extra{display:none}

/* ---------------------------------------------------------------- tlacitka */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 30px;border:2px solid transparent;border-radius:var(--r-sm);
  font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;transition:.2s;white-space:nowrap;
}
.btn-sm{padding:11px 20px;font-size:12.5px}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-2);color:#fff;transform:translateY(-2px)}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-2);color:#fff;transform:translateY(-2px)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--blue-2);color:#fff}
/* svetle sede tlacitko s vystouplym okrajem, po stisku se "zamackne" */
.btn-out,.btn-ghost{
  background:linear-gradient(180deg,#fafafa,#ececec);border-color:var(--line);color:var(--navy);
  box-shadow:var(--emb);
}
.btn-out:hover,.btn-ghost:hover{background:linear-gradient(180deg,#fff,#f2f2f2);color:var(--navy);border-color:#b4b4b4}
.btn-out:active,.btn-ghost:active{box-shadow:var(--sunk);transform:translateY(1px)}
.btn-red:active,.btn-blue:active{transform:translateY(1px)}
.btn-wide{width:100%}

/* ---------------------------------------------------------------- sekce */
.sec{padding-block:var(--sec)}
.sec-alt{background:var(--bg);border-block:1px solid var(--line);box-shadow:var(--emb)}
/* drive tmave modry pruh - ted svetle sedy s vystouplym okrajem */
.sec-navy{background:var(--bg-2);color:var(--ink);border-block:1px solid var(--line);box-shadow:var(--emb)}
.sec-navy h2,.sec-navy h3,.sec-navy h4{color:var(--navy)}
.kicker{
  display:block;font-size:13px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--red);margin-bottom:12px;
}
.sec-navy .kicker{color:var(--red)}
.sec-head{max-width:820px;margin-inline:auto;text-align:center;margin-bottom:clamp(34px,4vw,60px)}
.sec-head h2{font-size:clamp(26px,3.1vw,42px)}
.sec-head p{margin-top:14px;color:var(--mute);font-size:17px}
.sec-navy .sec-head p{color:var(--mute)}

/* ---------------------------------------------------------------- hero
   Svetla varianta podle navrhu: fotka vpravo, plynule prechazi do bile,
   text tmave modry. Bez nahrane fotky zustane cisty bily banner. */
.hero{position:relative;background:#fff;color:var(--ink);overflow:hidden;border-bottom:1px solid var(--line)}
/* Fotka zacina na 40 % sirky a drzi pravych 60 %. Bily prechod uvnitr teto
   plochy ubira 14,7 % fotky - zbytek je uplne cisty. */
.hero-bg{
  position:absolute;top:0;right:0;bottom:0;left:40%;
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    #fff 0%,
    rgba(255,255,255,.95) 4%,
    rgba(255,255,255,.45) 14%,
    rgba(255,255,255,.10) 26%,
    rgba(255,255,255,0) 36%);
}
/* Misto silneho zavoje chranime jen pismo - bily zar kolem znaku.
   Fotku to nestoji ani procento, protoze pusobi jen pod pismem.
   Stejny stin nekolikrat za sebou se scita do temer plne bile obrysove linky,
   coz drobne pismo potrebuje - velky nadpis si vystaci s mensi davkou. */
.hero h1{
  text-shadow:0 0 6px rgba(255,255,255,.9),0 0 18px rgba(255,255,255,.8),0 1px 0 rgba(255,255,255,.9);
}
.hero-sub,.hero-tags li{
  text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 5px #fff,0 0 12px rgba(255,255,255,.95);
}
.hero-in{position:relative;padding-block:clamp(52px,6.4vw,104px);max-width:min(760px,100%)}
.hero h1{color:var(--navy);font-size:clamp(30px,4.6vw,60px);text-transform:uppercase;letter-spacing:-.025em}
.hero h1 .ac{color:var(--red);display:block}
.hero-sub{margin:22px 0 0;font-size:clamp(17px,1.5vw,21px);font-weight:700;color:#4a4f56;max-width:520px}
.hero-tags{display:flex;flex-wrap:wrap;gap:10px 26px;margin:30px 0 34px}
.hero-tags li{display:flex;align-items:center;gap:9px;font-weight:600;font-size:15.5px;color:var(--navy)}
.hero-tags .ic{width:17px;height:17px;color:var(--red)}
.hero-btns{display:flex;flex-wrap:wrap;gap:14px}
/* Pod 1100 px lezi text primo na fotce, takze zavoj musi byt rovnomerny.
   Drzime ho nizko - zmerena ztrata 29 % - a citelnost resi bily zar kolem pisma. */
@media(max-width:1100px){
  .hero-bg{left:0}
  .hero-bg::after{background:linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.24) 100%)}
}

/* ---------------------------------------------------------------- pruh cisel */
.statbar{background:#fff;border-bottom:1px solid var(--line)}
.statbar-in{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(18px,2vw,30px);padding-block:clamp(26px,3vw,42px);
}
.stat{display:flex;align-items:center;gap:14px;justify-content:center}
.stat .ic{width:34px;height:34px;color:var(--blue);flex:0 0 auto}
.stat b{display:block;font-size:clamp(17px,1.6vw,21px);font-weight:800;color:var(--navy);line-height:1.2}
.stat span{font-size:14px;color:var(--mute)}

/* ---------------------------------------------------------------- o nas */
.about-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4vw,70px);align-items:center}
.about-img{border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-lg);aspect-ratio:4/4.4;background:var(--bg-2)}
.about-img img{width:100%;height:100%;object-fit:cover}
.about-body h2{font-size:clamp(25px,2.8vw,38px);margin-bottom:18px}
.about-body p{color:#4d5257}
.about-split{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,3vw,50px);align-items:start}
.about-nums{display:grid;gap:26px;min-width:190px}
.about-nums .stat{justify-content:flex-start}
.about-nums .stat b{font-size:clamp(22px,2.2vw,30px)}

/* ---------------------------------------------------------------- sluzby */
/* Pevny pocet sloupcu, aby posledni karta nikdy nezustala sama na radku.
   Sest sluzeb = jedna rada na velkych monitorech, jako v navrhu. */
.svc-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,1.2vw,20px)}
@media(max-width:1399px){.svc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:860px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.svc-grid{grid-template-columns:minmax(0,1fr)}}
.svc{
  display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(18px,1.5vw,26px);transition:.24s;position:relative;overflow:hidden;
}
.svc::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .24s}
.svc:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:transparent}
.svc:hover::before{transform:scaleX(1)}
.svc .ic{width:44px;height:44px;color:var(--blue);stroke-width:1.3}
.svc h3{font-size:19px;margin-top:6px}
.svc p{color:var(--mute);font-size:15px;margin:0}
.svc-more{margin-top:auto;padding-top:12px;font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--blue);display:inline-flex;align-items:center;gap:7px}
.svc-more .ic{width:15px;height:15px;transition:transform .2s}
.svc:hover .svc-more .ic{transform:translateX(4px)}

/* ---------------------------------------------------------------- proces */
.proc{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(18px,2vw,26px);position:relative}
.proc::before{
  content:"";position:absolute;top:38px;left:12%;right:12%;height:1px;
  background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 16px);
}
.step{text-align:center;position:relative}
.step-ic{
  width:76px;height:76px;margin:0 auto 18px;border-radius:50%;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--blue);position:relative;box-shadow:var(--sh);
}
.step-ic .ic{width:30px;height:30px}
.step-n{
  position:absolute;right:-4px;bottom:-4px;width:26px;height:26px;border-radius:50%;
  background:var(--red);color:#fff;font-size:13px;font-weight:800;display:grid;place-items:center;
}
.step h3{font-size:17px;margin-bottom:7px}
.step p{color:var(--mute);font-size:14.5px;margin:0}

/* ---------------------------------------------------------------- proc SafeRegal (na celou sirku) */
.why{background:var(--bg);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.why-txt{padding:var(--sec) clamp(20px,4vw,72px) var(--sec) max(var(--pad),calc((100vw - var(--wrap))/2 + var(--pad)))}
.why-txt h2{font-size:clamp(25px,2.8vw,38px);margin-bottom:16px}
.why-txt>p{color:#4d5257;max-width:460px}
.why-list{display:grid;gap:13px;margin:26px 0 32px}
.why-list li{display:flex;gap:12px;align-items:flex-start;font-weight:600;font-size:15.5px}
.why-list .ic{width:20px;height:20px;color:var(--blue);margin-top:3px}
.why-img{background:var(--navy-3) center/cover no-repeat;min-height:340px}

/* ---------------------------------------------------------------- pas realizaci */
.gal-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(12px,1.4vw,22px)}
.gal-strip a{
  position:relative;display:block;border-radius:var(--r-sm);overflow:hidden;aspect-ratio:4/3;
  background:var(--bg-2);box-shadow:var(--sh);
}
.gal-strip img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.gal-strip a:hover img{transform:scale(1.06)}
.gal-strip a::after{
  content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,31,61,.62),transparent 55%);
  opacity:0;transition:opacity .3s;
}
.gal-strip a:hover::after{opacity:1}
.gal-cap{
  position:absolute;left:0;right:0;bottom:0;padding:16px;color:#fff;font-weight:700;font-size:15px;
  z-index:2;transform:translateY(10px);opacity:0;transition:.3s;
}
.gal-strip a:hover .gal-cap{transform:none;opacity:1}

/* ---------------------------------------------------------------- certifikace + vyrobci */
.cert-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.1fr);gap:clamp(26px,3.4vw,60px);align-items:center}
.cert-txt h2{font-size:clamp(23px,2.4vw,32px);margin-bottom:14px}
.cert-txt p{color:var(--mute)}
.cert-frame{
  width:min(240px,100%);padding:12px;background:#fff;border:1px solid var(--line);border-radius:6px;
  box-shadow:var(--sh-lg);cursor:zoom-in;
}
.cert-frame img{width:100%;border:1px solid var(--line)}
.cert-frame.empty{display:grid;place-items:center;aspect-ratio:3/4;color:var(--mute);font-size:13px;text-align:center;padding:20px;cursor:default}
.brands{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(14px,2vw,28px);align-items:center}
.brands span,.brands img{
  display:grid;place-items:center;min-height:52px;font-size:19px;font-weight:800;letter-spacing:-.02em;
  color:var(--navy);text-align:center;filter:grayscale(1);opacity:.75;transition:.25s;
}
.brands img{object-fit:contain;max-height:52px;width:100%}
.brands a:hover span,.brands a:hover img,.brands span:hover,.brands img:hover{filter:none;opacity:1}

/* ---------------------------------------------------------------- reference (rotujici karusel) */
.mq{overflow:hidden;--gap:22px;position:relative;width:100%}
.mq::before,.mq::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(30px,6vw,110px);z-index:3;pointer-events:none;
}
.mq::before{left:0;background:linear-gradient(90deg,var(--mq-fade,var(--bg-2)),transparent)}
.mq::after{right:0;background:linear-gradient(270deg,var(--mq-fade,var(--bg-2)),transparent)}
.mq-track{display:flex;gap:var(--gap);width:max-content;animation:mq var(--dur,44s) linear infinite}
.mq-rev .mq-track{animation-direction:reverse}
.mq:hover .mq-track,.mq:focus-within .mq-track{animation-play-state:paused}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(calc(-50% - var(--gap)/2))}}
.rev{
  flex:0 0 auto;width:min(360px,82vw);background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:22px 24px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--emb);transition:transform .25s;
}
.rev:hover{transform:scale(1.035) rotate(.5deg)}
.rev-stars{display:flex;gap:2px;color:#f5a623}
.rev-stars .st{opacity:.28}
.rev-stars .st.on{opacity:1}
.rev-stars .ic{width:16px;height:16px}
.rev p{margin:0;font-size:14.5px;line-height:1.62;color:#3f4348;text-align:justify}
.rev p mark{background:none;color:var(--red);font-weight:700}
.rev-who{display:flex;align-items:center;gap:12px;margin-top:auto}
.rev-who img,.rev-av{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.rev-av{display:grid;place-items:center;background:var(--bg-2);color:var(--navy);font-weight:800;font-size:17px;box-shadow:var(--emb)}
.rev-who b{display:block;font-size:15px;color:var(--navy);line-height:1.25}
.rev-who span{font-size:13px;color:var(--mute)}
.rev-cta{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,2.6vw,36px);box-shadow:var(--emb);
}
.rev-cta h3{font-size:22px;margin-bottom:10px}
.rev-cta p{color:var(--mute);font-size:15px}
.rev-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(24px,3vw,54px);align-items:center;margin-bottom:clamp(30px,3.4vw,48px)}
.rev-top h2{font-size:clamp(25px,2.8vw,38px)}

/* reference v mrizce (stranka Reference) */
.rev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(16px,1.8vw,24px)}
.rev-grid .rev{width:auto;box-shadow:var(--sh);border:1px solid var(--line)}
.rev-grid .rev:hover{transform:translateY(-4px) rotate(0)}

/* detail sluzby */
.svc-big{width:56px;height:56px;stroke-width:1.2}

/* certifikaty */
.cert-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(18px,2.2vw,34px);align-items:start}
.cert-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--sh);text-align:center}
.cert-card .cert-frame{width:100%;margin:0 auto 16px}
.cert-card h3{font-size:17px;margin-bottom:8px}
.cert-card p{color:var(--mute);font-size:14.5px;margin:0}

/* ---------------------------------------------------------------- vnitrni stranky */
.phead{
  background:linear-gradient(180deg,#f7f7f7,var(--bg));color:var(--ink);
  padding-block:clamp(38px,4.6vw,74px);position:relative;overflow:hidden;
  border-bottom:1px solid var(--line);box-shadow:var(--emb);
}
.phead::after{
  content:"";position:absolute;right:-60px;top:-60px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(224,21,33,.10),transparent 70%);
}
.phead h1{color:var(--navy);font-size:clamp(28px,3.4vw,46px);position:relative}
.phead p{margin:14px 0 0;color:var(--mute);max-width:720px;font-size:17px;position:relative}
.crumbs{display:flex;gap:8px;align-items:center;font-size:13.5px;color:var(--mute);margin-bottom:14px;position:relative}
.crumbs a{color:var(--mute)}
.crumbs a:hover{color:var(--red)}

/* ---------------------------------------------------------------- galerie (masonry) */
/* Kazdy sloupec navic zmensuje fotku, proto jsou prahy posunute nahoru -
   fotka je pak o polovinu az dvojnasobek vetsi nez predtim.
   Dva sloupce zustavaji uz od 640, aby na tabletu nevznikla jedna obri fotka. */
.mas{columns:1;column-gap:22px}
@media(min-width:640px){.mas{columns:2}}
@media(min-width:1320px){.mas{columns:3}}
@media(min-width:1800px){.mas{columns:4}}
@media(min-width:2600px){.mas{columns:5}}
.mas-item{break-inside:avoid;margin-bottom:20px}
.mcard{
  background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);
  transition:transform .28s,box-shadow .28s;cursor:zoom-in;
}
.mcard:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)}
.mcard-img{position:relative;overflow:hidden;padding:14px 14px 0}
.mcard-img img{width:100%;border-radius:var(--r-sm);transition:transform .35s}
.mcard:hover .mcard-img img{transform:scale(1.05)}
.mcard-zoom{
  position:absolute;right:24px;top:24px;width:38px;height:38px;border-radius:50%;
  background:rgba(20,40,77,.72);color:#fff;display:grid;place-items:center;opacity:0;transition:.25s;
}
.mcard:hover .mcard-zoom{opacity:1}
.mcard-body{padding:16px 20px 20px}
.mcard-body h3{font-size:17px;margin-bottom:7px;transition:color .2s}
.mcard:hover .mcard-body h3{color:var(--blue)}
.mcard-body p{color:var(--mute);font-size:14.5px;margin:0}
.chip{
  display:inline-block;margin-top:12px;padding:4px 11px;border-radius:99px;
  background:var(--bg);color:var(--navy);font-size:12px;font-weight:700;box-shadow:var(--emb);
}
.empty-note{text-align:center;color:var(--mute);padding:60px 20px;border:1px dashed var(--line);border-radius:var(--r)}
/* filtry nad galerii - vystredene */
.gal-filters{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin-bottom:clamp(24px,2.6vw,38px);
}

/* ---------------------------------------------------------------- lightbox */
.lb{
  position:fixed;inset:0;z-index:300;background:rgba(18,18,20,.96);display:none;
  grid-template-rows:1fr auto;padding:clamp(12px,2vw,28px) clamp(12px,2vw,28px) 0;
}
.lb.open{display:grid}
body.lb-lock{overflow:hidden}
.lb-stage{display:grid;place-items:center;min-height:0;overflow:hidden;position:relative}
.lb-stage img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
/* Popis fotky drzi pas pres celou spodni hranu, aby byl videt vzdycky -
   je soucasti mrizky, takze si sam ubere vysku a nikdy fotku neprekryje. */
.lb-info{
  color:#fff;text-align:center;
  margin:12px calc(-1 * clamp(12px,2vw,28px)) 0;
  padding:14px clamp(16px,5vw,60px) 16px;
  background:rgba(0,0,0,.55);
  border-top:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);
}
.lb-info>*{max-width:1100px;margin-inline:auto}
.lb-info h3{color:#fff;font-size:clamp(17px,2vw,23px);margin-bottom:6px}
/* margin:0 auto, ne margin:0 - jinak by cutie s max-width zustala u leveho okraje */
.lb-info p{color:#d2d4d7;font-size:15px;margin:0 auto}
.lb-info .chip{background:rgba(255,255,255,.13);color:#e2e4e7;box-shadow:none}
.lb-count{display:block;margin-top:10px;font-size:13px;color:#9a9da1;letter-spacing:.08em}
.lb-btn{
  position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.1);color:#fff;
  display:grid;place-items:center;cursor:pointer;transition:.2s;z-index:4;
}
.lb-btn:hover{background:#fff;color:var(--navy)}
.lb-prev{left:0}
.lb-next{right:0}
.lb-close{
  position:fixed;top:clamp(12px,2vw,24px);right:clamp(12px,2vw,24px);width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.1);color:#fff;
  display:grid;place-items:center;cursor:pointer;z-index:6;transition:.2s;
}
.lb-close:hover{background:var(--red);border-color:var(--red)}
.lb-close .ic{width:22px;height:22px}

/* ---------------------------------------------------------------- formulare */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
label.fl{display:block;font-size:13.5px;font-weight:700;color:var(--navy);margin-bottom:6px}
/* pole vypadaji "zamacknute" dovnitr, jako v klasickem okenim rozhrani */
.inp,input[type=text],input[type=email],input[type=tel],input[type=password],textarea,select{
  width:100%;padding:13px 15px;border:1px solid #b4b4b4;border-radius:var(--r-sm);
  font:inherit;font-size:15px;color:var(--ink);background:#fff;transition:.18s;box-shadow:var(--sunk);
}
textarea{min-height:150px;resize:vertical}
.inp:focus,input:focus,textarea:focus,select:focus{outline:none;border-color:var(--red);box-shadow:var(--sunk),0 0 0 3px rgba(224,21,33,.14)}
.form-note{font-size:13px;color:var(--mute);margin:14px 0 0}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,2.6vw,38px);box-shadow:var(--sh)}
.flash{
  margin:18px 0;padding:14px 18px;border-radius:var(--r-sm);background:#e9f6ed;border:1px solid #a9dcb8;
  color:#1b7038;font-weight:600;
}
.flash-err{background:#fdeaea;border-color:#f3b8b8;color:#9e2b2b}

.contact-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,3vw,54px);align-items:start}
.cinfo{display:grid;gap:18px}
.cinfo li{display:flex;gap:14px;align-items:flex-start}
.cinfo .ic{width:22px;height:22px;color:var(--red);margin-top:3px}
.cinfo b{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--mute);font-weight:700}
.cinfo a,.cinfo span{font-size:16.5px;font-weight:600;color:var(--navy)}
.map-box{margin-top:26px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.map-box iframe{width:100%;height:300px;border:0;display:block}

.auth{max-width:470px;margin-inline:auto}
.auth h1{font-size:28px;margin-bottom:8px}
.auth .sub{color:var(--mute);margin-bottom:24px}
.auth .row{margin-bottom:16px}
.auth-alt{text-align:center;margin-top:20px;font-size:14.5px;color:var(--mute)}

/* ---------------------------------------------------------------- CTA pas */
.cta-band{background:var(--red);color:#fff}
.cta-in{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between;padding-block:clamp(28px,3vw,46px)}
.cta-in h3{color:#fff;font-size:clamp(20px,2.2vw,29px)}
.cta-in p{margin:6px 0 0;color:rgba(255,255,255,.86)}

/* ---------------------------------------------------------------- paticka */
.ftr{
  background:var(--navy-2);color:#4a4f56;padding-top:clamp(44px,4.6vw,74px);
  border-top:1px solid var(--line);box-shadow:inset 1px 1px 0 rgba(255,255,255,.9);
}
.ftr-in{display:grid;grid-template-columns:minmax(240px,1.4fr) repeat(auto-fit,minmax(180px,1fr));gap:clamp(26px,3vw,54px);padding-bottom:clamp(34px,3.4vw,54px)}
.ftr h4{font-size:13px;text-transform:uppercase;letter-spacing:.16em;color:var(--navy);margin-bottom:18px}
.ftr p{font-size:14.5px;line-height:1.75;margin:16px 0 0;max-width:360px}
.ftr-logo .brand-txt{color:var(--navy)}
.ftr-logo .brand-txt span{color:var(--red)}
.ftr-list{display:grid;gap:13px}
.ftr-list li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px}
.ftr-list .ic{width:17px;height:17px;color:var(--red);margin-top:4px}
.ftr-list a,.ftr-list span{color:#4a4f56}
.ftr-list a:hover{color:var(--red)}
.ftr-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
.ftr-links a{color:#4a4f56;font-size:14.5px}
.ftr-links a:hover{color:var(--red)}
.socials{display:flex;gap:10px;margin-bottom:20px}
.socials a{
  width:38px;height:38px;border-radius:50%;background:var(--bg);display:grid;place-items:center;
  color:var(--navy);box-shadow:var(--emb);
}
.socials a:hover{background:var(--red);color:#fff}
.ftr-cta{margin-top:4px}
.ftr-bot{border-top:1px solid var(--line);padding-block:20px;font-size:13.5px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.ftr-bot-in{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between}

/* ---------------------------------------------------------------- responsive */
@media(max-width:1180px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);
       flex-direction:column;align-items:stretch;gap:0;padding:10px var(--pad) 22px;box-shadow:var(--sh-lg);max-height:78vh;overflow:auto}
  .nav.open{display:flex}
  .nav>a,.drop>a{padding:14px 2px;border-bottom:1px solid var(--line);font-size:16px}
  .nav>a::after,.drop>a::after{display:none}
  .drop-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
             padding:4px 0 10px 14px;min-width:0;border-left:2px solid var(--line);border-radius:0;margin:6px 0 6px 4px}
  .chev{transform:rotate(90deg)}
  .burger{display:flex}
  .hdr-tel span{display:none}
  .nav-mob-extra{display:grid;gap:0;margin-top:6px}
  .nav-mob-extra a{padding:14px 2px;font-weight:700;color:var(--blue)}
  .why{grid-template-columns:1fr}
  .why-txt{padding:var(--sec) var(--pad)}
  .why-img{min-height:300px;order:-1}
  .cert-row{grid-template-columns:minmax(0,1fr) auto}
  .brands{grid-column:1/-1}
}
@media(max-width:900px){
  /* Cisla jdou pod sebe. Kazda polozka se do te doby centrovala sama za sebe,
     takze text zacinal pokazde jinde - vlevo srovnane to drzi jednu linku. */
  .statbar-in{justify-items:start}
  .statbar-in .stat{justify-content:flex-start;width:100%}
  .about-grid{grid-template-columns:1fr}
  .about-img{aspect-ratio:16/10;max-height:420px}
  .about-split{grid-template-columns:1fr}
  .about-nums{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .rev-top{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .proc::before{display:none}
  .hdr-act .btn-red{display:none}
}
@media(max-width:620px){
  .hdr-in{min-height:66px}
  .brand img{max-height:40px}
  .brand-mark{width:28px;height:32px}
  .cert-row{grid-template-columns:1fr}
  .cert-frame{margin-inline:auto}
  .ftr-in{grid-template-columns:1fr}
  .btn{padding:13px 22px}
  .lb-btn{width:42px;height:42px}
  .rev{width:min(320px,86vw)}
  .cta-in{flex-direction:column;align-items:flex-start}
}
/* Bublina hlasoveho asistenta (ElevenLabs).
   POZOR: nikdy nedavat na tuto komponentu transform. transform:scale() zalozi
   novy containing block a panel chatu, ktery uvnitr pouziva position:fixed,
   se pak umisti vuci bubline misto vuci oknu - policko pro psani skonci pres
   odpovedi. Overeno na mobilu 2026-07-30.
   Rozmery se meni jen promennymi, ktere komponenta sama nabizi. */
@media(max-width:640px){
  elevenlabs-convai{
    position:fixed;right:6px;bottom:10px;
    --elevenlabs-convai-widget-width:min(92vw,360px);
    --elevenlabs-convai-widget-height:min(72vh,540px);
  }
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.001s!important;scroll-behavior:auto}
  .mq-track{animation:none}
}
@media print{.hdr,.ftr,.lb,elevenlabs-convai{display:none!important}}