/* ============================================================
   BATEUP — návrh č. 2 „hloubka a technologie"
   Tmavý hi-tech rukopis. Akcent je vytažený z firemního loga
   (kapka: #29abe2 / #7dd3fc / #1565c0), takže web a značka drží spolu.
   Fonty self-hostované (GDPR) — Space Grotesk (displej, čísla)
   + Manrope (text).
   ============================================================ */

/* ── FONTY (self-hosted, latin + latin-ext kvůli české diakritice) ── */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('fonty/SpaceGrotesk-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('fonty/SpaceGrotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('fonty/Manrope-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('fonty/Manrope-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ── TOKENY ── */
:root{
  --bg:#050a12;
  --bg-2:#081220;
  --bg-3:#0b1828;

  --accent:#29abe2;
  --accent-2:#7dd3fc;
  --accent-deep:#1565c0;
  --grad:linear-gradient(135deg,#1e8fd0,#29abe2 52%,#6cc9f7);
  --on-accent:#03121d;

  --text:#c3d3e4;
  --heading:#eaf4fd;
  --muted:#7b91ab;

  --card-bg:#0a1727;
  --card-border:rgba(41,171,226,.15);
  --card-border-hover:rgba(41,171,226,.52);
  --glow:rgba(41,171,226,.2);
  --glow-strong:rgba(41,171,226,.4);
  --wash:rgba(41,171,226,.07);
  --grid-line:rgba(41,171,226,.055);

  --shadow:0 18px 50px rgba(0,0,0,.5);
  --shadow-lift:0 24px 60px rgba(0,0,0,.55);
  --nav-bg:rgba(5,11,20,.82);
  --input-bg:#0a1524;

  --ok:#34d399;
  --warn:#fbbf24;
  --bad:#f87171;

  --maxw:1180px;
  --nav-h:76px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --disp:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ── RESET + mobilní pojistky ──
   touch-action:manipulation vypíná double-tap zoom (Android WebView
   v Messengeru jinak stránku přiblíží a ta „ujíždí do stran");
   overflow-x:clip je pojistka proti bočnímu tahání. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 18px);
  overflow-x:clip;touch-action:manipulation}
body{
  overflow-x:clip;touch-action:manipulation;
  font-family:var(--sans);font-size:1rem;line-height:1.7;
  color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent);color:var(--on-accent)}

/* vlastní scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#173049;border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:#20455f}

/* globální ambientní záře — drží celý web „pod hladinou" */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 620px at 82% -8%,rgba(41,171,226,.11),transparent 62%),
    radial-gradient(760px 540px at -12% 102%,rgba(21,101,192,.13),transparent 62%);
}

.skip{position:absolute;top:-100px;left:14px;z-index:1000;background:var(--accent);
  color:var(--on-accent);padding:10px 18px;border-radius:10px;font-weight:700;
  transition:top .25s var(--ease)}
.skip:focus-visible{top:14px}

/* ── LAYOUT ── */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.sekce{position:relative;z-index:1;padding:clamp(64px,9vw,110px) 0}
.sekce--alt{background:var(--bg-2)}
.sekce--tmava{background:var(--bg-3)}

/* technická mřížka na pozadí sekce + fade na okrajích */
.mrizka{
  background-image:
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:46px 46px;
}
.mrizka::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,var(--bg-2),transparent 16%,transparent 84%,var(--bg-2))}
.sekce--tmava.mrizka::before{
  background:linear-gradient(to bottom,var(--bg-3),transparent 16%,transparent 84%,var(--bg-3))}
.mrizka .wrap{position:relative}

/* ── TYPOGRAFIE ── */
h1,h2,h3,h4{font-family:var(--disp);color:var(--heading);line-height:1.12;
  font-weight:600;letter-spacing:-.02em}
h1{font-size:clamp(2.4rem,7vw,4.4rem);font-weight:700;letter-spacing:-.03em}
h2{font-size:clamp(1.85rem,3.6vw,2.9rem)}
h3{font-size:1.16rem;letter-spacing:-.01em}
h4{font-size:1rem}
p{line-height:1.8}

.eyebrow{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--disp);font-size:.72rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--accent);
  margin-bottom:14px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--grad);flex:none}

.perex{color:var(--muted);font-size:1.04rem;line-height:1.85;max-width:62ch}
.stred{text-align:center}
.stred .eyebrow{justify-content:center}
.stred .perex{margin-left:auto;margin-right:auto}
.nadpis-blok{margin-bottom:clamp(38px,5vw,58px)}

/* akcentované slovo v nadpisu */
.zvyr{background:linear-gradient(135deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ── TLAČÍTKA ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:12px;font-weight:700;font-size:.96rem;
  min-height:48px;letter-spacing:.01em;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),
    background .3s,border-color .3s,color .3s}
.btn svg{width:17px;height:17px;flex:none}
.btn-hlavni{background:var(--grad);color:var(--on-accent);
  box-shadow:0 8px 26px rgba(41,171,226,.28)}
.btn-hlavni:hover{transform:translateY(-2px);
  box-shadow:0 14px 40px rgba(41,171,226,.42),0 0 0 1px rgba(125,211,252,.5)}
.btn-obrys{border:1px solid var(--card-border-hover);color:var(--heading);
  background:rgba(41,171,226,.05)}
.btn-obrys:hover{transform:translateY(-2px);background:rgba(41,171,226,.12);
  border-color:var(--accent);box-shadow:0 12px 34px rgba(0,0,0,.4)}
.btn-velky{padding:17px 34px;font-size:1rem;min-height:56px}

/* ── HLAVIČKA ── */
.hlavicka{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  transition:background .35s var(--ease),box-shadow .35s var(--ease),
    backdrop-filter .35s,border-color .35s;
  border-bottom:1px solid transparent}
.hlavicka.pri{background:var(--nav-bg);backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:rgba(41,171,226,.16);box-shadow:0 10px 34px rgba(0,0,0,.42)}
.nav{max-width:var(--maxw);margin:0 auto;padding:0 22px;height:100%;
  display:flex;align-items:center;gap:20px}

.nav-logo{display:flex;align-items:center;min-height:44px;flex:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.nav-logo img{height:30px;width:auto;
  filter:drop-shadow(0 0 14px rgba(41,171,226,.45));
  transition:filter .35s var(--ease),transform .35s var(--ease)}
.nav-logo:hover img{transform:translateY(-1px);
  filter:drop-shadow(0 0 22px rgba(41,171,226,.75))}
/* Na úvodní stránce nese značku samo hero (zapečené logo v pozadí na desktopu,
   .hero-znacka na mobilu). Logo v hlavičce by bylo druhé v jednom pohledu,
   proto se objeví až po odscrollování. */
body.ma-hero .nav-logo{opacity:0;transform:translateY(-6px);pointer-events:none}
body.ma-hero .hlavicka.pri .nav-logo{opacity:1;transform:none;pointer-events:auto}

.nav-menu{display:none;align-items:center;gap:2px;margin-left:auto}
.nav-odkaz{position:relative;padding:9px 14px;border-radius:9px;
  font-size:.92rem;font-weight:600;color:var(--text);
  transition:color .3s,background .3s}
.nav-odkaz::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1.5px;
  background:var(--grad);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);border-radius:2px}
.nav-odkaz:hover{color:var(--heading);background:rgba(41,171,226,.08)}
.nav-odkaz:hover::after,.nav-odkaz[aria-current="page"]::after{transform:scaleX(1)}
.nav-odkaz[aria-current="page"]{color:var(--accent-2)}

.nav-tel{display:none;align-items:center;gap:9px;margin-left:14px;
  padding:11px 20px;border-radius:11px;background:var(--grad);color:var(--on-accent);
  font-weight:700;font-size:.92rem;min-height:44px;
  box-shadow:0 6px 20px rgba(41,171,226,.3);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.nav-tel:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(41,171,226,.46)}
.nav-tel svg{width:16px;height:16px}

.burger{display:grid;place-items:center;width:46px;height:46px;border-radius:11px;
  margin-left:auto;border:1px solid var(--card-border);background:rgba(41,171,226,.05);
  transition:border-color .3s,background .3s}
.burger:hover{border-color:var(--card-border-hover);background:rgba(41,171,226,.1)}
.burger span{display:block;width:20px;height:2px;background:var(--heading);border-radius:2px;
  transition:transform .3s var(--ease),opacity .25s var(--ease)}
.burger span+span{margin-top:5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobilní panel — NEPRŮHLEDNÉ pozadí, jinak přes něj prosvítá hero fotka */
.menu-mobil{position:fixed;top:var(--nav-h);left:0;right:0;z-index:99;
  background:var(--bg-2);border-bottom:1px solid var(--card-border);
  box-shadow:0 22px 50px rgba(0,0,0,.6);
  padding:10px 22px calc(22px + env(safe-area-inset-bottom,0px));
  max-height:calc(100dvh - var(--nav-h));overflow-y:auto;display:none}
.menu-mobil.otevreno{display:block}
/* display:flex, ne inline — jinak linka končí za textem a vypadá to jako chybějící CSS */
.menu-mobil a{display:flex;align-items:center;min-height:54px;
  font-size:1.02rem;font-weight:600;color:var(--text);
  border-bottom:1px solid rgba(41,171,226,.1);transition:color .25s,padding-left .25s}
.menu-mobil a:hover,.menu-mobil a[aria-current="page"]{color:var(--accent-2);padding-left:6px}
.menu-mobil .btn{width:100%;margin-top:18px}

/* linka postupu čtení */
.postup{position:fixed;top:0;left:0;height:2px;width:0;z-index:101;
  background:var(--grad);box-shadow:0 0 12px var(--glow-strong)}

/* ── HERO ──
   Pozadí je původní firemní grafika i s logem (img/pozadi.jpg). */
.hero{position:relative;isolation:isolate;overflow:hidden;
  min-height:100vh;min-height:100svh;
  padding:calc(var(--nav-h) + 64px) 0 90px;display:flex;align-items:center}
/* Pozadí je původní firemní grafika i s logem — na mobilu se ale logo
   z 2870px široké fotky nevejde, proto tam nese značku .hero-znacka. */
/* Vrstva přesahuje o 20 % dolů, aby paralaxa nepotřebovala scale() —
   to by kapku v levém rohu ořízlo. Pozadí je ukotvené nahoře, takže
   logo při scrollu neuteče. */
.hero-foto{position:absolute;left:0;right:0;top:0;bottom:-20%;z-index:0;
  background:url('img/pozadi.jpg') 32% top/cover no-repeat #050a12;
  will-change:transform}
/* Scrim musí nechat prosvítat horní pruh, kde je v grafice logo — jinak
   z bílého nápisu zůstane šedý flek. Proto svislý přechod, který sílí až
   pod značkou, a boční ztmavení (kvůli kontrastu textu) přes ::before
   s maskou, takže do horní části vůbec nezasahuje. */
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,transparent 0%,rgba(5,10,18,.1) 18%,
    rgba(5,10,18,.74) 46%,rgba(5,10,18,.86) 74%,var(--bg) 100%)}
.hero-scrim::before{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(5,10,18,.62) 0%,rgba(5,10,18,.2) 58%,transparent 88%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 30%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 30%)}
.hero-bubliny{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.55}
.hero .wrap{position:relative;z-index:3}

.hero-mrizka{display:grid;gap:clamp(38px,5vw,60px);align-items:center}

/* značka v hero — na mobilu, kde se logo zapečené v pozadí nevejde */
.hero-znacka{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.hero-znacka img{height:38px;width:auto;filter:drop-shadow(0 0 20px rgba(41,171,226,.5))}
.hero h1{margin-bottom:20px;position:relative;display:inline-block;overflow:hidden;
  padding-right:.08em}
/* foilSweep — jednorázový odlesk přes titulek, jako světlo po hladině */
.hero h1::after{content:"";position:absolute;top:0;bottom:0;left:-45%;width:32%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);animation:foilSweep 2.6s var(--ease) .9s 1 forwards;
  pointer-events:none}
@keyframes foilSweep{to{left:135%}}

.hero-perex{font-size:clamp(1.02rem,.4vw + .96rem,1.16rem);color:#a9bed4;
  max-width:53ch;margin-bottom:32px}
/* Obě tlačítka stejně široká — vedle sebe s různou šířkou podle délky textu
   to působí rozhozeně. Na mobilu se mřížka sklopí do jednoho sloupce. */
.hero-cta{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:34px}

/* Odznaky ve stejně velkých buňkách, ať drží linku (2×2 na desktopu). */
.hero-stopy{display:grid;grid-template-columns:1fr;gap:10px}
.stopa{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:999px;
  min-height:44px;
  border:1px solid var(--card-border);background:rgba(6,16,28,.6);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-size:.83rem;font-weight:600;color:var(--text);
  transition:transform .3s var(--ease),border-color .3s,background .3s,color .3s}
.stopa:hover{transform:translateY(-2px);border-color:var(--card-border-hover);
  background:rgba(41,171,226,.12);color:var(--heading)}
.stopa svg{width:15px;height:15px;color:var(--accent);flex:none}

/* ── ŽIVÝ PANEL KVALITY VODY (podpisový prvek hero) ── */
.panel{position:relative;border-radius:20px;overflow:hidden;
  background:linear-gradient(160deg,rgba(10,23,39,.94),rgba(6,15,26,.9));
  border:1px solid var(--card-border);box-shadow:var(--shadow);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.panel-hlava{display:flex;align-items:center;gap:11px;padding:15px 20px;
  border-bottom:1px solid rgba(41,171,226,.12);background:rgba(41,171,226,.04)}
.panel-dioda{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none;
  box-shadow:0 0 10px var(--ok);animation:tep 2.4s var(--ease) infinite}
@keyframes tep{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}
.panel-titul{font-family:var(--disp);font-size:.76rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--heading)}
.panel-cas{margin-left:auto;font-family:var(--disp);font-size:.72rem;
  letter-spacing:.1em;color:var(--muted);font-variant-numeric:tabular-nums}

.panel-mrizka{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:rgba(41,171,226,.1)}
.metrika{background:#081321;padding:17px 18px 15px;position:relative;
  transition:background .35s var(--ease)}
.metrika:hover{background:#0b1a2c}
.metrika-popis{font-family:var(--disp);font-size:.66rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.metrika-cislo{font-family:var(--disp);font-size:1.72rem;font-weight:700;
  color:var(--heading);line-height:1;font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;gap:5px}
.metrika-cislo small{font-size:.7rem;font-weight:600;color:var(--muted);letter-spacing:.06em}
.metrika-pruh{margin-top:11px;height:3px;border-radius:3px;background:rgba(41,171,226,.14);
  overflow:hidden}
.metrika-pruh i{display:block;height:100%;border-radius:3px;background:var(--grad);
  width:0;transition:width 1.1s var(--ease);box-shadow:0 0 10px var(--glow-strong)}
.metrika[data-stav="ok"] .metrika-cislo{color:#a8e8ff}

.panel-pata{display:flex;align-items:center;gap:9px;padding:13px 20px;
  border-top:1px solid rgba(41,171,226,.12);background:rgba(41,171,226,.04);
  font-size:.79rem;color:var(--muted)}
.panel-pata svg{width:15px;height:15px;color:var(--accent);flex:none}

/* ── KARTY (základní rukopis: podsvícený okraj + trojitý stín) ── */
.karta{position:relative;background:var(--card-bg);border:1px solid var(--card-border);
  border-radius:18px;padding:1.75rem 1.6rem;overflow:hidden;
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.karta::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  pointer-events:none;opacity:0;transition:opacity .4s var(--ease);
  background:linear-gradient(140deg,rgba(41,171,226,.85),transparent 46%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.karta:hover{transform:translateY(-5px);border-color:var(--card-border-hover);
  box-shadow:0 0 0 1px rgba(41,171,226,.22),var(--shadow-lift),0 0 56px rgba(41,171,226,.16)}
.karta:hover::before{opacity:1}

.ikona{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;
  background:rgba(41,171,226,.1);border:1px solid var(--card-border);
  color:var(--accent);margin-bottom:18px;
  transition:transform .35s var(--ease),background .35s,color .35s,box-shadow .35s}
.ikona svg{width:24px;height:24px}
.karta:hover .ikona{transform:scale(1.07) rotate(-4deg);background:var(--grad);
  color:var(--on-accent);box-shadow:0 0 24px var(--glow-strong)}
.karta h3{margin-bottom:9px}
.karta p{font-size:.94rem;color:var(--muted);line-height:1.78}

/* min-height 40px: prst není myš — grafika zůstává stejná, roste jen plocha */
.karta-odkaz{display:inline-flex;align-items:center;gap:7px;margin-top:10px;
  min-height:40px;padding:8px 0;
  font-size:.86rem;font-weight:700;color:var(--accent-2);transition:gap .3s var(--ease)}
.karta-odkaz:hover{gap:12px}
.karta-odkaz svg{width:14px;height:14px}

/* mřížka služeb + baterka (světlo sleduje kurzor) */
.sluzby-mrizka{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:20px}
.spot .karta::after{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;opacity:0;transition:opacity .45s var(--ease);
  background:radial-gradient(440px circle at var(--mx,50%) var(--my,50%),var(--wash),transparent 42%)}
.spot .karta:hover::after{opacity:1}
.spot .karta:hover::before{
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
    var(--accent),var(--accent-2) 18%,transparent 40%)}

/* ── TECHNOLOGICKÝ OKRUH (animované schéma toku vody) ── */
.okruh{position:relative;border-radius:20px;border:1px solid var(--card-border);
  background:linear-gradient(160deg,#08131f,#0a1929);padding:clamp(20px,3vw,34px);
  box-shadow:var(--shadow);overflow:hidden}
.okruh-svg{width:100%;height:auto;display:block;overflow:visible}
.okruh-drah{fill:none;stroke:rgba(41,171,226,.22);stroke-width:2.5;stroke-linecap:round}
.okruh-tok{fill:none;stroke:url(#tokGrad);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:14 220;animation:tok 5.5s linear infinite}
@keyframes tok{to{stroke-dashoffset:-234}}
.uzel rect,.uzel circle{fill:#0b1b2c;stroke:rgba(41,171,226,.36);stroke-width:1.4;
  transition:stroke .3s,fill .3s}
.uzel text{fill:#cfe4f5;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600}
.uzel .uzel-cislo{fill:var(--accent);font-size:9px;letter-spacing:.14em}
.uzel{cursor:pointer}
.uzel:hover rect,.uzel:hover circle,.uzel.akt rect,.uzel.akt circle{
  fill:#123049;stroke:var(--accent-2);stroke-width:2}
/* vybraný uzel svítí, ať je na první pohled jasné, že se dá proklikávat */
.uzel.akt{filter:drop-shadow(0 0 10px var(--glow-strong))}
.uzel.akt text{fill:#eaf6ff}
.uzel:focus-visible rect{stroke:var(--accent-2);stroke-width:2.5}
.okruh-legenda{margin-top:20px;display:grid;gap:12px}
.okruh-popis{display:none;font-size:.92rem;color:var(--muted);line-height:1.8}
.okruh-popis.akt{display:block}
.okruh-popis b{color:var(--heading);font-weight:700}

/* ── KONFIGURÁTOR BAZÉNU ── */
.konf{display:grid;gap:24px}
.konf-panel{background:var(--card-bg);border:1px solid var(--card-border);
  border-radius:18px;padding:clamp(20px,3vw,30px)}
.konf-skupina{margin-bottom:24px}
.konf-skupina:last-child{margin-bottom:0}
.konf-legenda{font-family:var(--disp);font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
  margin-bottom:12px;display:block}
.konf-volby{display:flex;flex-wrap:wrap;gap:9px}
.konf-volba{position:relative}
.konf-volba input{position:absolute;opacity:0;width:0;height:0}
.konf-volba span{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:10px 17px;border-radius:11px;cursor:pointer;
  border:1px solid var(--card-border);background:rgba(41,171,226,.04);
  font-size:.9rem;font-weight:600;color:var(--text);
  transition:transform .28s var(--ease),border-color .28s,background .28s,color .28s,box-shadow .28s}
.konf-volba span:hover{transform:translateY(-2px);border-color:var(--card-border-hover);
  background:rgba(41,171,226,.1);color:var(--heading)}
.konf-volba input:checked+span{background:var(--grad);color:var(--on-accent);
  border-color:transparent;box-shadow:0 6px 20px rgba(41,171,226,.34)}
.konf-volba input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}

.konf-posuvnik{display:flex;align-items:center;gap:14px}
/* dotyková plocha 40px, ale kolejnice zůstává vizuálně tenká (4px):
   výška je na inputu, barva až na ::track */
.konf-posuvnik input[type="range"]{flex:1;min-width:0;-webkit-appearance:none;appearance:none;
  height:40px;font-size:1rem;background:transparent;outline:none;cursor:pointer}
.konf-posuvnik input[type="range"]::-webkit-slider-runnable-track{
  height:4px;border-radius:4px;background:rgba(41,171,226,.18)}
.konf-posuvnik input[type="range"]::-moz-range-track{
  height:4px;border-radius:4px;background:rgba(41,171,226,.18)}
.konf-posuvnik input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;
  width:22px;height:22px;margin-top:-9px;border-radius:50%;background:var(--grad);cursor:pointer;
  box-shadow:0 0 0 4px rgba(41,171,226,.16),0 0 16px var(--glow-strong)}
.konf-posuvnik input[type="range"]::-moz-range-thumb{width:22px;height:22px;border:none;
  border-radius:50%;background:#29abe2;cursor:pointer;
  box-shadow:0 0 0 4px rgba(41,171,226,.16)}
.konf-hodnota{font-family:var(--disp);font-size:1.05rem;font-weight:700;color:var(--heading);
  font-variant-numeric:tabular-nums;min-width:5.2em;text-align:right}

.konf-nahled{background:linear-gradient(160deg,#08131f,#0a1929);
  border:1px solid var(--card-border);border-radius:18px;
  padding:clamp(18px,3vw,26px);display:flex;flex-direction:column;gap:18px}
.konf-rez{width:100%;height:auto;display:block}
.konf-souhrn{display:grid;gap:1px;background:rgba(41,171,226,.12);
  border-radius:12px;overflow:hidden}
.konf-radek{display:flex;justify-content:space-between;align-items:center;gap:14px;
  background:#08141f;padding:11px 15px;font-size:.9rem}
.konf-radek dt{color:var(--muted)}
.konf-radek dd{color:var(--heading);font-weight:700;text-align:right}
.konf-pozn{font-size:.82rem;color:var(--muted);line-height:1.7}

/* ── TIMELINE (scroll-progress) ── */
.timeline{position:relative;padding-left:38px;margin-top:10px}
.tl-kolej,.tl-vypln{position:absolute;left:12px;top:10px;width:2px;border-radius:2px}
.tl-kolej{bottom:10px;background:var(--card-border)}
.tl-vypln{height:0;background:var(--grad);box-shadow:0 0 14px var(--glow-strong);
  transition:height .12s linear}
.tl-krok{position:relative;padding-bottom:34px}
.tl-krok:last-child{padding-bottom:0}
.tl-uzel{position:absolute;left:-38px;top:4px;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;background:var(--bg);border:2px solid var(--card-border);
  font-family:var(--disp);font-size:.64rem;font-weight:700;color:var(--muted);
  font-variant-numeric:tabular-nums;
  transition:border-color .4s,background .4s,color .4s,box-shadow .4s,transform .4s}
.tl-krok.on .tl-uzel{border-color:transparent;background:var(--grad);color:var(--on-accent);
  transform:scale(1.1);box-shadow:0 0 0 5px var(--wash),0 0 20px var(--glow-strong)}
.tl-karta{position:relative;background:var(--card-bg);border:1px solid var(--card-border);
  border-radius:14px;padding:18px 20px;
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.tl-karta::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  pointer-events:none;opacity:0;transition:opacity .4s var(--ease);
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
    var(--accent),var(--accent-2) 18%,transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.tl-karta:hover{transform:translateY(-3px);border-color:var(--card-border-hover);
  box-shadow:var(--shadow)}
.tl-karta:hover::before{opacity:1}
.tl-krok.on .tl-karta{border-color:rgba(41,171,226,.3)}
.tl-faze{font-family:var(--disp);font-size:.7rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);display:block;margin-bottom:5px}
.tl-karta h3{font-size:1.06rem;margin-bottom:6px}
.tl-karta p{font-size:.91rem;color:var(--muted);line-height:1.75}

/* ── ČÍSLA / STATISTIKY ── */
.statistiky{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.stat{background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px;
  padding:22px 20px;position:relative;overflow:hidden;
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.stat:hover{transform:translateY(-4px);border-color:var(--card-border-hover);
  box-shadow:var(--shadow)}
.stat-cislo{font-family:var(--disp);font-size:clamp(1.9rem,4vw,2.7rem);font-weight:700;
  color:var(--heading);line-height:1;font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,var(--accent-2),var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stat-popis{margin-top:9px;font-size:.86rem;color:var(--muted);line-height:1.55}

/* ── GALERIE + LIGHTBOX ── */
.galerie{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.gal-polozka{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3;
  cursor:pointer;background:#0a1727;border:1px solid var(--card-border);
  transition:transform .4s var(--ease),border-color .35s,box-shadow .35s}
.gal-polozka img,.gal-polozka video{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease),filter .4s}
.gal-polozka::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(4,9,16,.72),transparent 52%);
  opacity:.85;transition:opacity .35s}
.gal-polozka:hover{transform:translateY(-4px);border-color:var(--card-border-hover);
  box-shadow:0 18px 44px rgba(0,0,0,.5),0 0 44px rgba(41,171,226,.14)}
.gal-polozka:hover img,.gal-polozka:hover video{transform:scale(1.06)}
.gal-lupa{position:absolute;right:11px;bottom:11px;z-index:2;width:36px;height:36px;
  border-radius:10px;display:grid;place-items:center;
  background:rgba(6,16,28,.75);border:1px solid var(--card-border);color:var(--accent-2);
  opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.gal-polozka:hover .gal-lupa{opacity:1;transform:none}
.gal-lupa svg{width:17px;height:17px}

/* U videa musí být na první pohled poznat, že se dá přehrát — proto tlačítko
   uprostřed dlaždice a natrvalo, ne až na hover (na dotykovém displeji
   žádný hover není a ikona by se neukázala vůbec). */
.gal-polozka[data-typ="video"] .gal-lupa{
  right:auto;bottom:auto;top:50%;left:50%;
  width:58px;height:58px;border-radius:50%;
  opacity:1;transform:translate(-50%,-50%);
  background:rgba(6,16,28,.62);border:2px solid rgba(125,211,252,.9);
  color:#eaf6ff;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  box-shadow:0 6px 24px rgba(0,0,0,.5),0 0 26px rgba(41,171,226,.35);
  transition:transform .35s var(--ease),background .35s,box-shadow .35s}
.gal-polozka[data-typ="video"] .gal-lupa svg{width:27px;height:27px}
.gal-polozka[data-typ="video"]:hover .gal-lupa{
  transform:translate(-50%,-50%) scale(1.09);
  background:var(--grad);color:var(--on-accent);border-color:transparent;
  box-shadow:0 8px 30px rgba(0,0,0,.55),0 0 34px var(--glow-strong)}
/* ztmavit dlaždici videa o něco víc, ať tlačítko drží kontrast i na světlé fotce */
.gal-polozka[data-typ="video"]::after{
  background:linear-gradient(to top,rgba(4,9,16,.72),rgba(4,9,16,.28) 52%,rgba(4,9,16,.28))}

/* Dávkové načítání galerie. Skryté dlaždice mají atribut hidden, který jim
   nastaví display:none už prohlížeč — tím se ani nestáhnou jejich náhledy.
   Tlačítko je v HTML schválně s hidden a odkrývá ho až skript: bez JS se
   ukáže celá galerie najednou a stránka zůstane funkční.
   Tlačítko se centruje dvakrát schválně: flexem na obalu a `margin-inline:auto`
   na samotném tlačítku. Kdyby se pravidlo obalu z jakéhokoli důvodu neuplatnilo
   (typicky starý styl.css z cache prohlížeče), zůstane inline-flex tlačítko
   viset vlevo — což se přesně tak stalo po nasazení 2026-08-05. */
.galerie-vic{display:flex;justify-content:center;margin-top:26px}
.galerie-vic #galerieVic{margin-inline:auto}
.galerie-vic button[hidden]{display:none}
.galerie-vic #galerieZbyva{opacity:.7;font-variant-numeric:tabular-nums}

.lightbox{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;
  background:rgba(3,7,13,.96);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.lightbox.otevreno{opacity:1;pointer-events:auto}
.lb-obsah{max-width:min(94vw,1280px);max-height:88svh;display:grid;place-items:center}
.lb-obsah img,.lb-obsah video{max-width:100%;max-height:88svh;object-fit:contain;
  border-radius:12px;box-shadow:0 26px 80px rgba(0,0,0,.8)}
.lb-btn{position:absolute;display:grid;place-items:center;width:48px;height:48px;
  border-radius:12px;background:rgba(41,171,226,.1);border:1px solid var(--card-border);
  color:var(--heading);transition:background .3s,border-color .3s,transform .3s var(--ease)}
.lb-btn:hover{background:rgba(41,171,226,.24);border-color:var(--accent);transform:scale(1.06)}
.lb-btn svg{width:22px;height:22px}
.lb-zavrit{top:18px;right:18px}
.lb-prev{left:14px;top:50%;transform:translateY(-50%)}
.lb-next{right:14px;top:50%;transform:translateY(-50%)}
.lb-prev:hover,.lb-next:hover{transform:translateY(-50%) scale(1.06)}
.lb-pocet{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
  font-family:var(--disp);font-size:.78rem;letter-spacing:.14em;color:var(--muted);
  font-variant-numeric:tabular-nums}

/* ── PARTNEŘI (nekonečný pás) ── */
.pas{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.pas-stopa{display:flex;gap:12px;width:max-content;animation:pasJede 34s linear infinite}
.pas:hover .pas-stopa{animation-play-state:paused}
@keyframes pasJede{to{transform:translateX(-50%)}}
.partner{display:inline-flex;align-items:center;min-height:44px;padding:11px 20px;
  border-radius:11px;border:1px solid var(--card-border);background:var(--card-bg);
  font-family:var(--disp);font-size:.86rem;font-weight:600;color:var(--text);
  white-space:nowrap;
  transition:transform .3s var(--ease),border-color .3s,color .3s,box-shadow .3s}
.partner:hover{transform:translateY(-3px);border-color:var(--card-border-hover);
  color:var(--accent-2);box-shadow:0 12px 30px rgba(0,0,0,.4),0 0 30px rgba(41,171,226,.16)}

/* ── PH ŠKÁLA (Rádce) ── */
.ph{background:var(--card-bg);border:1px solid var(--card-border);border-radius:18px;
  padding:clamp(20px,3vw,30px)}
.ph-pas{position:relative;height:16px;border-radius:999px;margin:26px 0 10px;
  background:linear-gradient(90deg,#e0524a 0%,#e0904a 22%,#34d399 40%,#34d399 52%,#4aa8e0 74%,#7a5ae0 100%)}
.ph-jezdec{position:absolute;top:50%;width:26px;height:26px;border-radius:50%;
  transform:translate(-50%,-50%);background:#eaf4fd;border:3px solid #0a1727;
  box-shadow:0 0 0 3px rgba(41,171,226,.4),0 4px 14px rgba(0,0,0,.5);pointer-events:none}
/* Plocha 40px pro prst (kolejnice i jezdec se kreslí pod ním, vzhled se nemění);
   záporný margin ji vycentruje na 16px pás. font-size 1rem kvůli iOS zoomu. */
.ph-vstup{width:100%;-webkit-appearance:none;appearance:none;background:transparent;
  height:40px;margin-top:-38px;font-size:1rem;position:relative;z-index:2;cursor:pointer}
.ph-vstup::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;
  border-radius:50%;background:transparent;cursor:pointer}
.ph-vstup::-moz-range-thumb{width:34px;height:34px;border:none;border-radius:50%;
  background:transparent;cursor:pointer}
.ph-osa{display:flex;justify-content:space-between;font-family:var(--disp);
  font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums}
.ph-vysledek{margin-top:22px;padding:18px 20px;border-radius:14px;
  border:1px solid var(--card-border);background:#08141f;
  transition:border-color .4s,background .4s}
.ph-vysledek[data-stav="ok"]{border-color:rgba(52,211,153,.4);background:rgba(52,211,153,.07)}
.ph-vysledek[data-stav="warn"]{border-color:rgba(251,191,36,.4);background:rgba(251,191,36,.07)}
.ph-vysledek[data-stav="bad"]{border-color:rgba(248,113,113,.4);background:rgba(248,113,113,.07)}
.ph-hodnota{font-family:var(--disp);font-size:2.1rem;font-weight:700;line-height:1;
  color:var(--heading);font-variant-numeric:tabular-nums;margin-bottom:8px}
.ph-stav{font-weight:700;margin-bottom:6px}
.ph-vysledek[data-stav="ok"] .ph-stav{color:var(--ok)}
.ph-vysledek[data-stav="warn"] .ph-stav{color:var(--warn)}
.ph-vysledek[data-stav="bad"] .ph-stav{color:var(--bad)}
.ph-text{font-size:.92rem;color:var(--muted);line-height:1.75}

/* ── RÁDCE: rozbalovací články ── */
.rada{background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px;
  overflow:hidden;transition:border-color .35s,box-shadow .35s}
.rada[open]{border-color:var(--card-border-hover);box-shadow:var(--shadow)}
.rada summary{list-style:none;cursor:pointer;padding:20px 22px;display:flex;
  align-items:flex-start;gap:15px;min-height:56px;
  transition:background .3s}
.rada summary::-webkit-details-marker{display:none}
.rada summary:hover{background:rgba(41,171,226,.06)}
.rada-ikona{width:40px;height:40px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:rgba(41,171,226,.1);border:1px solid var(--card-border);color:var(--accent);
  transition:background .35s,color .35s}
.rada-ikona svg{width:19px;height:19px}
.rada[open] .rada-ikona{background:var(--grad);color:var(--on-accent)}
.rada-hlava{flex:1;min-width:0}
.rada-stitek{font-family:var(--disp);font-size:.68rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);display:block;margin-bottom:4px}
.rada-hlava h3{font-size:1.04rem;line-height:1.35}
.rada-sipka{flex:none;width:26px;height:26px;display:grid;place-items:center;color:var(--muted);
  transition:transform .35s var(--ease),color .35s}
.rada-sipka svg{width:16px;height:16px}
.rada[open] .rada-sipka{transform:rotate(180deg);color:var(--accent-2)}
.rada-telo{padding:0 22px 22px;font-size:.94rem;color:var(--muted);line-height:1.82}
.rada-telo p{margin-bottom:.9rem}
.rada-telo h4{color:var(--heading);font-size:.96rem;margin:1.3rem 0 .5rem}
.rada-telo ul,.rada-telo ol{padding-left:1.3rem;margin-bottom:1rem}
.rada-telo ul{list-style:disc}
.rada-telo ol{list-style:decimal}
.rada-telo li{margin-bottom:.42rem}
.rada-telo b,.rada-telo strong{color:var(--heading);font-weight:700}

/* ── SEZNAMY ── */
.odrazky{display:grid;gap:2px}
.odrazky li{display:flex;align-items:flex-start;gap:12px;padding:11px 0;
  font-size:.94rem;color:var(--text);border-bottom:1px solid rgba(41,171,226,.09);
  transition:padding-left .3s var(--ease),color .3s}
.odrazky li:last-child{border-bottom:none}
.odrazky li:hover{padding-left:6px;color:var(--heading)}
.odrazky svg{width:17px;height:17px;color:var(--accent);flex:none;margin-top:4px}

/* ── DETAIL SLUŽBY (dvousloupec s fotkou) ── */
.detail{display:grid;gap:34px;align-items:center;padding:clamp(38px,5vw,58px) 0;
  border-bottom:1px solid rgba(41,171,226,.1)}
.detail:last-of-type{border-bottom:none}
.detail-foto{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/3;
  border:1px solid var(--card-border);box-shadow:var(--shadow)}
.detail-foto img{width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease)}
.detail-foto:hover img{transform:scale(1.05)}
.detail-cislo{position:absolute;left:14px;top:14px;z-index:2;
  font-family:var(--disp);font-size:.74rem;font-weight:700;letter-spacing:.2em;
  padding:7px 13px;border-radius:9px;background:rgba(6,16,28,.8);
  border:1px solid var(--card-border);color:var(--accent-2);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.detail h2{margin-bottom:14px}
.detail p{color:var(--muted);margin-bottom:13px;font-size:.98rem}
.detail p strong{color:var(--heading)}
.detail .odrazky{margin:20px 0 26px}

/* ── KONTAKTNÍ ŘÁDKY ── */
.kontakt-mrizka{display:grid;gap:30px}
.ci{display:flex;align-items:flex-start;gap:15px;padding:15px 0;
  border-bottom:1px solid rgba(41,171,226,.1);
  transition:padding-left .3s var(--ease)}
.ci:last-child{border-bottom:none}
.ci:hover{padding-left:6px}
.ci-ikona{width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:rgba(41,171,226,.1);border:1px solid var(--card-border);color:var(--accent);
  transition:background .35s,color .35s,box-shadow .35s}
.ci:hover .ci-ikona{background:var(--grad);color:var(--on-accent);
  box-shadow:0 0 22px var(--glow-strong)}
.ci-ikona svg{width:19px;height:19px}
.ci-popis{font-family:var(--disp);font-size:.68rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.ci-hodnota{font-size:1rem;font-weight:600;color:var(--heading)}
/* telefon i e-mail se na mobilu ťukají prstem → plocha aspoň 40 px */
.ci-hodnota a{display:inline-flex;align-items:center;min-height:40px;transition:color .3s}
.ci-hodnota a:hover{color:var(--accent-2)}

/* ── FORMULÁŘ ── */
.formular{background:var(--card-bg);border:1px solid var(--card-border);
  border-radius:20px;padding:clamp(22px,3.5vw,36px);box-shadow:var(--shadow)}
.pole{margin-bottom:17px}
.pole-radek{display:grid;grid-template-columns:1fr;gap:0}
.pole label{display:block;font-size:.85rem;font-weight:700;color:var(--heading);
  margin-bottom:7px}
.pole .nutne{color:var(--accent-2)}
/* font-size MUSÍ být 16px (1rem): iOS Safari na cokoli menšího při kliknutí
   do pole zoomne stránku a už nezoomne zpět. */
.pole input,.pole select,.pole textarea{
  width:100%;padding:13px 15px;border-radius:12px;font:inherit;font-size:1rem;
  border:1px solid var(--card-border);background:var(--input-bg);color:var(--text);
  transition:border-color .3s,box-shadow .3s,background .3s}
.pole input::placeholder,.pole textarea::placeholder{color:#4e647d}
.pole input:focus,.pole select:focus,.pole textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--wash);background:#0c1a2b}
.pole textarea{resize:vertical;min-height:130px}
.pole select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%237b91ab'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:18px;
  padding-right:42px}
.souhlas{display:flex;align-items:flex-start;gap:12px;margin:6px 0 18px}
.souhlas input{width:19px;height:19px;flex:none;margin-top:3px;accent-color:var(--accent);
  cursor:pointer}
.souhlas label{font-size:.85rem;color:var(--muted);font-weight:400;line-height:1.65}
.souhlas a{color:var(--accent-2);text-decoration:underline}
.formular .btn{width:100%}
.form-pozn{margin-top:14px;font-size:.8rem;color:var(--muted);text-align:center;
  display:flex;align-items:center;justify-content:center;gap:7px}
.form-pozn svg{width:14px;height:14px;color:var(--accent)}
/* hlášku i zvýraznění vadných polí nastavuje sdílený skript při odeslání */
.form-hlaska{margin-top:12px;font-size:.86rem;font-weight:600;color:var(--bad);text-align:center}
.form-hlaska:empty{display:none}
.pole input[aria-invalid="true"],.pole select[aria-invalid="true"],
.pole textarea[aria-invalid="true"],.souhlas input[aria-invalid="true"]{
  border-color:var(--bad);box-shadow:0 0 0 3px rgba(248,113,113,.14)}
.souhlas input[aria-invalid="true"]{outline:2px solid var(--bad);outline-offset:2px}

/* ── MAPA ── */
.mapa{border-radius:18px;overflow:hidden;border:1px solid var(--card-border);
  box-shadow:var(--shadow);line-height:0}
.mapa iframe{width:100%;height:340px;border:0;filter:grayscale(.3) contrast(1.05)}

/* ── CTA PÁS ── */
.cta-pas{position:relative;overflow:hidden;text-align:center;
  background:linear-gradient(150deg,#071624,#0a2440 55%,#06131f);
  padding:clamp(56px,8vw,86px) 0}
.cta-orb{position:absolute;width:520px;height:520px;border-radius:50%;pointer-events:none;
  right:-150px;bottom:-190px;background:radial-gradient(circle,var(--glow-strong),transparent 66%);
  filter:blur(30px);animation:glowPulse 7s var(--ease) infinite}
@keyframes glowPulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
.cta-pas .wrap{position:relative;z-index:1}
.cta-pas h2{margin-bottom:14px}
.cta-pas .perex{margin:0 auto 30px}
/* stejně široká tlačítka i v CTA pásu */
.cta-akce{display:grid;grid-template-columns:1fr;gap:12px;max-width:460px;margin:0 auto}

/* ── PATIČKA ── */
.paticka{position:relative;z-index:1;background:#040810;
  border-top:1px solid rgba(41,171,226,.14);padding:58px 0 0}
.paticka-mrizka{display:grid;gap:34px;padding-bottom:40px;
  border-bottom:1px solid rgba(41,171,226,.1)}
.paticka-logo img{height:34px;width:auto;margin-bottom:14px;
  filter:drop-shadow(0 0 14px rgba(41,171,226,.4))}
.paticka-slogan{font-family:var(--disp);font-size:.8rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.paticka p{font-size:.9rem;color:var(--muted);line-height:1.8}
.paticka h4{font-family:var(--disp);font-size:.74rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--heading);margin-bottom:16px}
.paticka-odkazy a{font-size:.91rem;color:var(--muted);
  display:inline-flex;align-items:center;min-height:40px;
  transition:color .3s,padding-left .3s var(--ease)}
.paticka-odkazy a:hover{color:var(--accent-2);padding-left:5px}
.paticka-ci{display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--muted);
  min-height:40px;transition:color .3s}
.paticka-ci:hover{color:var(--text)}
.paticka-ci a{display:inline-flex;align-items:center;min-height:40px}
.paticka-ci svg{width:15px;height:15px;color:var(--accent);flex:none}
.paticka-spod{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  align-items:center;padding:20px 0;font-size:.82rem;color:#5b718a}
.paticka-spod-odkazy{display:flex;gap:20px;flex-wrap:wrap}
/* min-height 40px — i drobné odkazy v patičce jsou dotykové cíle */
.paticka-spod-odkazy a,.paticka-spod-odkazy button{color:#5b718a;font-size:inherit;
  display:inline-flex;align-items:center;min-height:40px;transition:color .3s}
.paticka-spod-odkazy a:hover,.paticka-spod-odkazy button:hover{color:var(--accent-2)}
/* autorský kredit — jen na indexovatelných stránkách, kotva je jen jméno */
.paticka-autor{white-space:nowrap}
.paticka-autor a{color:#5b718a;transition:color .3s}
.paticka-autor a:hover{color:var(--accent-2)}

/* ── PLOVOUCÍ CTA (mobil) ── */
.cta-plovouci{position:fixed;left:14px;right:14px;z-index:95;
  bottom:calc(14px + env(safe-area-inset-bottom,0px));
  display:flex;gap:10px;
  transform:translateY(140%);transition:transform .45s var(--ease)}
.cta-plovouci.vidno{transform:none}
.cta-plovouci .btn{flex:1;box-shadow:0 12px 34px rgba(0,0,0,.55)}

/* ── COOKIE LIŠTA ── */
.cookies{position:fixed;z-index:9500;left:14px;right:14px;
  bottom:calc(14px + env(safe-area-inset-bottom,0px));
  max-width:440px;background:var(--card-bg);border:1px solid var(--card-border);
  border-radius:18px;padding:22px;box-shadow:0 24px 60px rgba(0,0,0,.65);
  transform:translateY(160%);transition:transform .5s var(--ease)}
.cookies.vidno{transform:none}
.cookies h3{font-size:1rem;margin-bottom:8px}
.cookies p{font-size:.85rem;color:var(--muted);line-height:1.7;margin-bottom:16px}
.cookies p a{color:var(--accent-2);text-decoration:underline}
.cookies-btn{display:flex;gap:10px;flex-wrap:wrap}
.cookies-btn .btn{flex:1;padding:11px 16px;min-height:44px;font-size:.88rem}


/* ── SCROLL-REVEAL ── */
.reveal{opacity:0;transform:translateY(28px);
  transition:opacity .75s var(--ease),transform .75s var(--ease)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.09s}.d2{transition-delay:.18s}.d3{transition-delay:.27s}
.d4{transition-delay:.36s}

/* ── PROSE (GDPR / cookies) ── */
.prose{max-width:74ch}
.prose h2{font-size:clamp(1.4rem,2.4vw,1.85rem);margin:2.2rem 0 .8rem}
.prose h3{margin:1.5rem 0 .6rem}
.prose p{margin-bottom:.95rem;color:var(--muted)}
.prose ul{list-style:disc;padding-left:1.3rem;margin-bottom:1.1rem;color:var(--muted)}
.prose li{margin-bottom:.4rem}
.prose a{color:var(--accent-2);text-decoration:underline}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  padding:2px 6px;border-radius:6px;background:rgba(41,171,226,.1);
  border:1px solid var(--card-border);color:var(--accent-2)}

/* ── HLAVIČKA PODSTRÁNKY ── */
.pod-hlava{position:relative;z-index:1;overflow:hidden;
  padding:calc(var(--nav-h) + 62px) 0 58px;
  background:linear-gradient(150deg,#061321,#0a2038 60%,#061523)}
.pod-hlava::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(70% 100% at 50% 0,#000,transparent 78%);
  mask-image:radial-gradient(70% 100% at 50% 0,#000,transparent 78%)}
.pod-hlava .wrap{position:relative;z-index:1}
.pod-hlava h1{font-size:clamp(2rem,5vw,3.2rem);margin-bottom:12px}
.drobky{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px;
  font-size:.82rem;color:var(--muted)}
.drobky a{display:inline-flex;align-items:center;min-height:40px;transition:color .3s}
.drobky a:hover{color:var(--accent-2)}
.drobky svg{width:13px;height:13px;opacity:.6}

/* ════════════════════════════
   DESKTOP
   ════════════════════════════ */
@media (min-width:600px){
  .hero-cta{grid-template-columns:repeat(2,minmax(0,1fr));max-width:470px}
  .hero-stopy{grid-template-columns:repeat(2,minmax(0,1fr));max-width:560px}
  .cta-akce{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sluzby-mrizka{grid-template-columns:repeat(2,minmax(0,1fr))}
  .galerie{grid-template-columns:repeat(3,minmax(0,1fr))}
  .statistiky{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pole-radek{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
}

@media (min-width:768px){
  .nav-tel{display:inline-flex}
  /* na desktopu je logo čitelné přímo z pozadí; 1% odsazení, ať se kapka
     nedotýká levého okraje a neusekne se jí obrys */
  .hero-foto{background-position:1% top}
  .hero-znacka{display:none}
  .hero{padding-top:calc(var(--nav-h) + 118px)}
  .hero-mrizka{grid-template-columns:1.05fr .95fr}
  .konf{grid-template-columns:1fr 1fr}
  .detail{grid-template-columns:1fr 1fr;gap:56px}
  .detail--obraceny .detail-foto{order:2}
  .kontakt-mrizka{grid-template-columns:.9fr 1.1fr;gap:52px;align-items:start}
  .paticka-mrizka{grid-template-columns:1.7fr 1fr 1fr 1.3fr}
  .cta-plovouci{display:none}
  /* vlevo dole sedí v hero odznaky — lišta by je při prvním dojmu zakryla */
  .cookies{left:auto;right:20px;bottom:20px}
}

@media (min-width:960px){
  .nav-menu{display:flex}
  .burger{display:none}
  .sluzby-mrizka{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* mřížka o třech kartách (hodnoty firmy) — jinak by zbyl prázdný sloupec */
  .sluzby-mrizka.hodnoty{grid-template-columns:repeat(3,minmax(0,1fr))}
  .galerie{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ── mobilní dolaďování ── */
@media (max-width:767px){
  /* na telefonu jedno tlačítko pod druhým přes celou šířku — vedle sebe by
     měla různou šířku podle délky textu a působilo by to jako smrsknutý desktop */
  .hero-cta,.cta-akce{grid-template-columns:1fr;max-width:none}
  .hero-cta .btn,.cta-akce .btn{width:100%}
  .hero-stopy{grid-template-columns:1fr;max-width:none}

  /* ── HERO NA TELEFONU ──
     Logo zapečené v pozadí je 2870 px široké — při jakémkoli ořezu na displej
     z něj vykoukne jen kus nápisu („UP"). Proto na mobilu jedeme z varianty
     grafiky BEZ loga (img/pozadi-mobil.jpg), značku nese ostré logo v rohu
     a text začíná hned pod obrazovým pásem. */
  .hero{min-height:auto;padding:0;display:block}
  /* obrazový pás je jen ochutnávka — na telefonu má být nadpis rychle vidět,
     ne až po odscrollování půlky displeje */
  .hero-foto,.hero-scrim,.hero-bubliny{height:32svh;bottom:auto}
  .hero-foto{background-image:url('img/pozadi-mobil.jpg');background-position:center 52%}
  /* fotka drží barvu skoro až dolů a teprve v posledních ~18 % přejde do
     pozadí — jinak vznikne pod obrázkem tmavý pruh, který působí jako mezera */
  .hero-scrim{background:linear-gradient(to bottom,
    rgba(5,10,18,.34) 0%,rgba(5,10,18,.06) 46%,rgba(5,10,18,.3) 82%,var(--bg) 100%)}
  .hero-scrim::before{display:none}
  /* nadpis mírně zajíždí do ztmavlého spodku fotky — bez toho zůstane
     mezi obrázkem a textem pruh, který působí jako prázdné místo */
  .hero .wrap{padding-top:calc(32svh - 30px);padding-bottom:56px}
  .hero-znacka{margin:0}
  .hero h1{margin-bottom:14px}
  .hero-perex{margin-bottom:22px}
  .hero-cta{margin-bottom:22px}

  /* značka v levém horním rohu; při scrollu ji vystřídá lepící lišta */
  .hero-znacka{position:absolute;z-index:4;margin:0;
    top:calc(16px + env(safe-area-inset-top,0px));left:22px;
    transition:opacity .3s var(--ease),transform .3s var(--ease)}
  .hero-znacka img{height:34px}
  .hlavicka.pri ~ main .hero-znacka{opacity:0;transform:translateY(-10px);pointer-events:none}

}

@media (max-width:559px){
  /* telefon je skrytý → zmizel i jeho margin-left:auto, který tlačil burger
     doprava; bez tohohle sedí burger hned vedle loga uprostřed hlavičky */
  .burger{margin-left:auto}
  .statistiky{grid-template-columns:1fr;gap:10px}
  /* tři čísla vedle sebe se na 390 px nevejdou → pod sebe, číslo vlevo */
  .stat{display:flex;align-items:baseline;gap:14px;padding:15px 18px}
  .stat-cislo{font-size:1.7rem;flex:none}
  .stat-popis{margin-top:0}
  .galerie{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .lb-prev{left:8px}.lb-next{right:8px}
  .konf-posuvnik{flex-wrap:wrap}
  .konf-hodnota{min-width:0;text-align:left}
}

/* Schéma okruhu má dvě verze: vodorovnou pro desktop a svislou pro telefon.
   Vodorovná je 940 px široká — po zmenšení na displej by byly popisky
   v boxech nečitelné, svislá má naopak uzly přes celou šířku (a tím
   i dost velké dotykové cíle). */
.okruh-svg--mobil{display:block}
.okruh-svg--desktop{display:none}
.okruh-svg--mobil .uzel text{font-size:14px}
.okruh-svg--mobil .uzel .uzel-cislo{font-size:10px}
@media (min-width:768px){
  .okruh-svg--mobil{display:none}
  .okruh-svg--desktop{display:block}
}
@media (max-width:767px){
  .okruh{padding:18px 14px}
  .okruh-legenda{margin-top:16px}
}

/* ── OMEZENÍ POHYBU ── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  .tl-vypln{height:100%!important}
  .tl-krok .tl-uzel{border-color:var(--accent);color:var(--accent)}
  .pas-stopa{animation:none}
  .pas{-webkit-mask-image:none;mask-image:none;overflow-x:auto}
  .hero h1::after{display:none}
}