/* Spojuji.cz – vlajkový web. Vlastní kód, žádné knihovny ani cizí zdroje. */
@font-face{font-family:Poppins;font-weight:500;font-display:swap;src:url(/fonty/poppins-v23-latin-ext-500.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:600;font-display:swap;src:url(/fonty/poppins-v23-latin-ext-600.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:700;font-display:swap;src:url(/fonty/poppins-v23-latin-ext-700.woff2) format("woff2")}
@font-face{font-family:"General Sans";font-weight:400;font-display:swap;src:url(/fonty/general-sans-latin-ext-regular.woff2) format("woff2")}

:root{
  --pozadi:#f6f5f8; --karta:#ffffff; --text:#0e0b14; --text2:#3d3747; --tlumene:#6b6474;
  --linka:rgba(14,11,20,.08); --linka2:rgba(14,11,20,.14);
  --fi:#841cdf; --fi-tm:#6a12b8; --fi-sv:#f3e8fd; --fi-hl:#b26bff;
  --noc:#0d0716; --noc2:#170d26; --tyrkys:#00d1b2;
  --nadpis:Poppins,system-ui,sans-serif; --telo:"General Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:28px; --r-s:16px; --sirka:1240px; --okraj:clamp(16px,4vw,40px);
  --stin:0 1px 2px rgba(14,11,20,.04),0 12px 40px -12px rgba(52,16,96,.14);
  --stin-v:0 2px 4px rgba(14,11,20,.04),0 40px 80px -24px rgba(72,18,140,.28);
  --hladce:cubic-bezier(.2,.7,.1,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;background:var(--pozadi);color:var(--text);font:400 17px/1.65 var(--telo);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--nadpis);font-weight:600;letter-spacing:-.035em;line-height:1.06;margin:0;text-wrap:balance}
p{margin:0 0 1em;text-wrap:pretty}
::selection{background:var(--fi);color:#fff}
:focus-visible{outline:2px solid var(--fi);outline-offset:3px;border-radius:8px}
.skryte{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.preskocit{position:fixed;left:16px;top:-60px;z-index:100;background:var(--text);color:#fff;padding:10px 16px;border-radius:12px;text-decoration:none}
.preskocit:focus{top:16px}
.obal{width:min(var(--sirka),100% - 2*var(--okraj));margin-inline:auto}

/* zrnitost – jemná textura přes celou stránku */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ------------------------------------------------------------------ hlavička */
.hlavicka{position:fixed;inset:14px 0 auto;z-index:50;pointer-events:none}
.hlavicka .lista{pointer-events:auto;display:flex;align-items:center;gap:20px;
  width:min(var(--sirka),100% - 2*var(--okraj));margin-inline:auto;padding:10px 10px 10px 22px;
  background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);border-radius:999px;
  backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);
  box-shadow:0 1px 0 rgba(14,11,20,.04),0 10px 30px -14px rgba(52,16,96,.18);
  transition:padding .4s var(--hladce),box-shadow .4s}
.posunuto .hlavicka .lista{box-shadow:0 1px 0 rgba(14,11,20,.05),0 18px 40px -16px rgba(52,16,96,.28)}
.logo{display:flex;align-items:center;color:var(--text);text-decoration:none;flex:0 0 auto}
.logo svg{width:132px;height:auto}
.menu{display:flex;gap:2px;margin:0 auto;padding:0;list-style:none}
.menu>li{position:relative}
.menu a,.menu button{display:block;font:500 15px/1 var(--nadpis);letter-spacing:-.01em;color:var(--text2);text-decoration:none;
  padding:12px 14px;border-radius:999px;background:none;border:0;cursor:pointer;transition:background .2s,color .2s}
.menu a:hover,.menu button:hover,.menu a[aria-current=page]{color:var(--text);background:rgba(132,28,223,.07)}
.menu a[aria-current=page]{color:var(--fi)}
.menu button::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;vertical-align:3px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .25s}
.podmenu{position:absolute;left:50%;top:calc(100% + 10px);width:360px;padding:10px;margin:0;list-style:none;
  background:#fff;border:1px solid var(--linka);border-radius:22px;box-shadow:var(--stin-v);
  opacity:0;visibility:hidden;transform:translate(-50%,-6px);transition:opacity .25s,transform .25s var(--hladce),visibility .25s}
.menu li:hover>.podmenu,.menu li:focus-within>.podmenu,.menu li.otevreno>.podmenu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.menu li:hover>button::after,.menu li.otevreno>button::after{transform:rotate(225deg);vertical-align:0}
.podmenu a{display:grid;grid-template-columns:44px 1fr;gap:4px 14px;padding:14px;border-radius:14px;line-height:1.3}
.podmenu a b{grid-column:2;grid-row:1;align-self:end;font-weight:600;color:var(--text)}
.podmenu a>span:not(.ikona){grid-column:2;grid-row:2;font:400 14px/1.4 var(--telo);color:var(--tlumene);letter-spacing:0}
.podmenu .ikona{grid-column:1;grid-row:1/3;align-self:center;width:44px;height:44px;border-radius:12px;background:var(--fi-sv);color:var(--fi);display:grid;place-items:center}
.podmenu .ikona svg{width:22px}
.akce-hlavicka{display:flex;align-items:center;gap:8px}
.telefon-odkaz{font:500 15px/1 var(--nadpis);text-decoration:none;color:var(--text2);padding:12px 12px;white-space:nowrap}
.telefon-odkaz:hover{color:var(--fi)}
.hamburger{display:none;width:46px;height:46px;border-radius:50%;border:0;background:var(--text);color:#fff;cursor:pointer;position:relative}
.hamburger span{position:absolute;left:14px;right:14px;height:1.6px;background:currentColor;transition:transform .35s var(--hladce),top .35s}
.hamburger span:nth-child(1){top:19px}.hamburger span:nth-child(2){top:26px}
.menu-otevreno .hamburger span:nth-child(1){top:22.5px;transform:rotate(45deg)}
.menu-otevreno .hamburger span:nth-child(2){top:22.5px;transform:rotate(-45deg)}

/* ------------------------------------------------------------------ tlačítka */
.tl{--b:var(--text);display:inline-flex;align-items:center;justify-content:center;gap:10px;position:relative;isolation:isolate;overflow:hidden;
  font:600 16px/1 var(--nadpis);letter-spacing:-.01em;text-decoration:none;white-space:nowrap;cursor:pointer;
  padding:18px 26px;border-radius:999px;border:0;background:var(--b);color:#fff;
  transition:transform .35s var(--hladce),box-shadow .35s}
.tl::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(110deg,var(--fi) 0%,#a24bf0 50%,var(--fi-tm) 100%);opacity:0;transition:opacity .35s}
.tl:hover{transform:translateY(-2px);box-shadow:0 18px 36px -14px rgba(132,28,223,.55)}
.tl:hover::before{opacity:1}
.tl .sipka{width:18px;height:18px;transition:transform .35s var(--hladce)}
.tl:hover .sipka{transform:translateX(4px)}
.tl.fialove{--b:var(--fi)}
.tl.male{padding:13px 20px;font-size:15px}
.tl.obrys{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--linka2)}
.tl.obrys::before{background:var(--text)}
.tl.obrys:hover{color:#fff;box-shadow:0 18px 36px -16px rgba(14,11,20,.4)}
.tl.svetle{background:#fff;color:var(--text)}
.tl.svetle:hover{color:#fff}

.stitek{display:inline-flex;align-items:center;gap:10px;font:500 13px/1 var(--nadpis);letter-spacing:.08em;text-transform:uppercase;
  color:var(--text2);padding:9px 14px 9px 12px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid var(--linka)}
.stitek::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tyrkys);box-shadow:0 0 0 4px rgba(0,209,178,.15);animation:tep 2.4s infinite}
@keyframes tep{50%{box-shadow:0 0 0 7px rgba(0,209,178,0)}}
.na-tmavem .stitek{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#d9cdea}

/* ------------------------------------------------------------------ úvod */
.uvod{position:relative;padding:clamp(140px,18vh,200px) 0 clamp(60px,8vw,110px);overflow:hidden}
.aurora{position:absolute;inset:-20% -10% auto;height:120%;z-index:-1;pointer-events:none;opacity:.9;contain:strict}
.aurora i{position:absolute;border-radius:50%;will-change:transform;animation:plout 22s ease-in-out infinite alternate}
.aurora i:nth-child(1){width:46vw;height:46vw;right:-6vw;top:2vw;background:radial-gradient(circle,#d9b6ff 0%,rgba(217,182,255,0) 68%)}
.aurora i:nth-child(2){width:34vw;height:34vw;right:22vw;top:18vw;background:radial-gradient(circle,#f1d5ff 0%,rgba(241,213,255,0) 70%);animation-duration:28s;animation-delay:-6s}
.aurora i:nth-child(3){width:30vw;height:30vw;left:-8vw;top:24vw;background:radial-gradient(circle,#c9f3ec 0%,rgba(201,243,236,0) 70%);animation-duration:32s;opacity:.7}
@keyframes plout{to{transform:translate3d(-4vw,3vw,0) scale(1.08)}}
.mrizka-pozadi{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--linka) 1px,transparent 1px),linear-gradient(90deg,var(--linka) 1px,transparent 1px);
  background-size:72px 72px;mask-image:radial-gradient(ellipse 70% 60% at 60% 30%,#000 10%,transparent 70%);opacity:.55}
.uvod-mrizka{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr);gap:clamp(32px,5vw,80px);align-items:center}
.uvod h1{font-size:clamp(44px,5.6vw,82px);font-weight:600;letter-spacing:-.05em;line-height:.98;margin:26px 0 28px}
.uvod h1 em{font-style:normal;background:linear-gradient(100deg,var(--fi) 0%,#b05cff 35%,var(--fi-tm) 70%,var(--fi) 100%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:lesk 9s linear infinite}
@keyframes lesk{to{background-position:-220% 0}}
.uvod .perex{font-size:clamp(18px,1.6vw,21px);color:var(--text2);max-width:34em;margin-bottom:38px}
.tlacitka{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.uvod-pata{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:44px;padding-top:28px;border-top:1px solid var(--linka);
  font:500 14px/1.4 var(--nadpis);color:var(--text2);letter-spacing:-.005em}
.uvod-pata span{display:inline-flex;align-items:center;gap:9px}
.uvod-pata svg{width:18px;height:18px;color:var(--fi)}

/* živá karta leadu */
.scena{position:relative;height:600px;perspective:1400px}
.scena .spojnice{position:absolute;inset:-40px -20px;width:calc(100% + 40px);height:calc(100% + 80px);z-index:0;pointer-events:none}
.spojnice path{fill:none;stroke:url(#prechod-spojnice);stroke-width:1.5;stroke-dasharray:4 7;animation:tok 2.4s linear infinite}
@keyframes tok{to{stroke-dashoffset:-44}}
.balicek{position:absolute;inset:40px 0 auto 0;margin-inline:auto;width:min(420px,100%);height:440px;transform-style:preserve-3d;
  transform:rotateY(-10deg) rotateX(6deg);transition:transform .6s var(--hladce)}
.lead{position:absolute;inset:0;background:#fff;border:1px solid rgba(255,255,255,.8);border-radius:var(--r);padding:30px 30px 26px;
  box-shadow:var(--stin-v);transition:transform .9s var(--hladce),opacity .9s;display:flex;flex-direction:column}
.lead[data-poradi="1"]{transform:translate3d(18px,-22px,-60px) scale(.95);opacity:.75}
.lead[data-poradi="2"]{transform:translate3d(34px,-42px,-120px) scale(.9);opacity:.4}
.lead[data-poradi="3"]{transform:translate3d(-30px,40px,40px) scale(1.02);opacity:0;pointer-events:none}
.lead>*{transition:opacity .5s}
.lead:not([data-poradi="0"])>*{opacity:0}
.lead[data-poradi="0"]{z-index:3}.lead[data-poradi="1"]{z-index:2}.lead[data-poradi="2"]{z-index:1}
.lead-hlava{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--linka);
  font:500 12px/1 var(--nadpis);letter-spacing:.12em;text-transform:uppercase;color:var(--tlumene)}
.overeno{display:inline-flex;align-items:center;gap:7px;background:var(--fi-sv);color:var(--fi);padding:8px 12px;border-radius:999px;letter-spacing:.08em}
.overeno::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--fi)}
.lead dl{margin:20px 0 0;display:grid;gap:15px}
.lead dt{font:500 13px/1.2 var(--nadpis);color:var(--tlumene);margin-bottom:5px}
.lead dd{margin:0;font:600 18px/1.3 var(--nadpis);letter-spacing:-.02em}
.lead-pata{margin-top:auto;display:flex;align-items:center;gap:12px;padding-top:16px;font:500 14px/1.3 var(--nadpis);color:var(--text2)}
.fajfka{width:30px;height:30px;border-radius:50%;background:var(--tyrkys);display:grid;place-items:center;flex:0 0 auto}
.fajfka svg{width:16px;color:#fff}
.plovak{position:absolute;z-index:3;display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid #fff;border-radius:18px;padding:12px 16px 12px 12px;box-shadow:var(--stin);font:500 14px/1.25 var(--nadpis);animation:vznaset 7s ease-in-out infinite}
.plovak small{display:block;font:400 12.5px/1.3 var(--telo);color:var(--tlumene)}
.plovak .bod{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--fi);color:#fff;flex:0 0 auto}
.plovak .bod svg{width:20px}
.plovak.p1{left:0;bottom:0;animation-delay:-2s}
.plovak.p2{right:-6%;top:-2%}
.plovak.p2 .bod{background:var(--text)}
@keyframes vznaset{50%{transform:translateY(-10px)}}
.ukazka-poznamka{position:absolute;bottom:14px;left:0;right:0;text-align:right;font:400 12.5px/1 var(--telo);color:var(--tlumene)}

/* ------------------------------------------------------------------ pás oborů */
.pas{padding:22px 0;border-block:1px solid var(--linka);background:rgba(255,255,255,.5);overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.pas-stopa{display:flex;gap:56px;width:max-content;animation:jizda 46s linear infinite}
.pas:hover .pas-stopa{animation-play-state:paused}
.pas-stopa span{display:inline-flex;align-items:center;gap:56px;font:500 clamp(18px,2vw,24px)/1 var(--nadpis);letter-spacing:-.03em;color:var(--text2);white-space:nowrap}
.pas-stopa span::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--fi);opacity:.5}
@keyframes jizda{to{transform:translateX(-50%)}}

/* ------------------------------------------------------------------ sekce */
.sekce{padding:clamp(80px,11vw,160px) 0;position:relative}
.sekce-hlava{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:24px 60px;align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.sekce-hlava.stred{grid-template-columns:1fr;text-align:center;justify-items:center;max-width:860px;margin-inline:auto}
.nadtitul{font:500 13px/1 var(--nadpis);letter-spacing:.14em;text-transform:uppercase;color:var(--fi);margin-bottom:22px;display:flex;align-items:center;gap:12px}
.nadtitul::before{content:"";width:28px;height:1.5px;background:currentColor}
.stred .nadtitul::after{content:"";width:28px;height:1.5px;background:currentColor}
h2{font-size:clamp(36px,5vw,68px);letter-spacing:-.045em}
h2 em{font-style:normal;color:var(--fi)}
.sekce-hlava p{color:var(--text2);font-size:clamp(17px,1.4vw,19px);margin:0}

/* služby – dvě velké karty */
.sluzby{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.karta{position:relative;background:var(--karta);border:1px solid var(--linka);border-radius:var(--r);overflow:hidden;isolation:isolate;
  transition:transform .5s var(--hladce),box-shadow .5s,border-color .5s}
.karta::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%),rgba(132,28,223,.09),transparent 60%)}
.karta:hover{transform:translateY(-4px);box-shadow:var(--stin-v);border-color:rgba(132,28,223,.18)}
.karta:hover::before{opacity:1}
.sluzba{padding:clamp(30px,3.6vw,52px);display:flex;flex-direction:column;min-height:580px;text-decoration:none}
.sluzba .cislo{font:500 14px/1 var(--nadpis);color:var(--tlumene);letter-spacing:.06em}
.sluzba h3{font-size:clamp(30px,3.2vw,44px);margin:auto 0 18px;letter-spacing:-.04em}
.sluzba p{color:var(--text2);max-width:30em}
.sluzba .vic{margin-top:22px;display:inline-flex;align-items:center;gap:12px;font:600 16px/1 var(--nadpis)}
.sluzba .vic i{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--text);color:#fff;transition:background .35s,transform .45s var(--hladce)}
.sluzba:hover .vic i{background:var(--fi);transform:rotate(-45deg)}
.sluzba .vic svg{width:20px}
.sluzba-grafika{position:absolute;top:clamp(30px,3.6vw,52px);right:clamp(30px,3.6vw,52px);width:38%;max-width:190px;aspect-ratio:1;color:var(--fi)}
.sluzba.tmava{background:var(--noc);color:#fff;border-color:transparent}
.sluzba.tmava p{color:#c9bdd9}
.sluzba.tmava .cislo{color:#9c8cb3}
.sluzba.tmava .vic i{background:#fff;color:var(--text)}
.sluzba.tmava:hover .vic i{background:var(--fi);color:#fff}
.sluzba.tmava::before{background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%),rgba(178,107,255,.22),transparent 60%)}
.sluzba.tmava .sluzba-grafika{color:var(--fi-hl)}

/* postup – 4 kroky */
.kroky{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:krok;position:relative}
.kroky::before{content:"";position:absolute;left:0;right:0;top:34px;height:1.5px;background:linear-gradient(90deg,var(--fi),rgba(132,28,223,.1));
  transform-origin:left;transform:scaleX(var(--prubeh,0));transition:transform 1.4s var(--hladce)}
.krok{position:relative;padding-top:76px}
.krok .kolecko{position:absolute;top:12px;left:0;width:46px;height:46px;border-radius:50%;background:var(--pozadi);border:1.5px solid var(--fi);
  display:grid;place-items:center;font:600 15px/1 var(--nadpis);color:var(--fi)}
.krok:nth-child(4) .kolecko{background:var(--fi);color:#fff}
.krok h3{font-size:24px;margin-bottom:12px;letter-spacing:-.03em}
.krok p{color:var(--text2);font-size:16px;margin:0}

/* tmavý pás */
.na-tmavem{background:var(--noc);color:#f3eefa;position:relative;overflow:hidden;isolation:isolate}
.na-tmavem::before{content:"";position:absolute;inset:auto -10% -40% 30%;height:90%;z-index:-1;
  background:radial-gradient(closest-side,rgba(132,28,223,.5),rgba(132,28,223,.15) 55%,transparent)}
.na-tmavem::after{content:"";position:absolute;inset:-30% 50% auto -20%;height:70%;z-index:-1;
  background:radial-gradient(closest-side,rgba(0,209,178,.12),transparent)}
.na-tmavem h2,.na-tmavem h3{color:#fff}
.na-tmavem h2 em{color:var(--fi-hl)}
.na-tmavem .nadtitul{color:var(--fi-hl)}
.na-tmavem p{color:#c9bdd9}
.manifest{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(40px,6vw,100px);align-items:center}
.manifest blockquote{margin:0;font:500 clamp(30px,3.8vw,54px)/1.12 var(--nadpis);letter-spacing:-.04em;color:#fff}
.manifest blockquote em{font-style:normal;color:var(--fi-hl)}
.manifest .text p{font-size:18px}
.cisla{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:clamp(56px,7vw,96px);background:rgba(255,255,255,.1);border-radius:var(--r);overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.cisla div{background:var(--noc);padding:34px 32px}
.cisla b{display:block;font:600 clamp(40px,4.6vw,64px)/1 var(--nadpis);letter-spacing:-.05em;color:#fff;margin-bottom:14px}
.cisla span{color:#a998c0;font-size:15.5px;line-height:1.5;display:block}

/* odlišnosti */
.vyhody{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.vyhoda{padding:34px 32px 30px}
.vyhoda .ikona{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:var(--fi-sv);color:var(--fi);margin-bottom:56px;transition:transform .5s var(--hladce),background .4s,color .4s}
.vyhoda:hover .ikona{background:var(--fi);color:#fff;transform:rotate(-8deg) scale(1.05)}
.vyhoda .ikona svg{width:26px}
.vyhoda h3{font-size:23px;margin-bottom:12px;letter-spacing:-.03em}
.vyhoda p{color:var(--text2);font-size:16px;margin:0}

/* obory */
.obory{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.obor{display:flex;flex-direction:column;text-decoration:none;padding:32px;min-height:300px}
.obor .domena{font:500 13px/1 var(--nadpis);color:var(--tlumene);letter-spacing:.02em;display:flex;align-items:center;justify-content:space-between}
.obor .domena svg{width:18px;transition:transform .4s var(--hladce)}
.obor:hover .domena svg{transform:translate(3px,-3px);color:var(--fi)}
.obor h3{font-size:clamp(28px,2.6vw,36px);margin:auto 0 12px}
.obor p{color:var(--text2);font-size:16px;margin:0}
.obor .velke{font:700 150px/1 var(--nadpis);letter-spacing:-.06em;color:var(--fi-sv);position:absolute;right:26px;top:40px;z-index:-1;transition:color .4s,transform .6s var(--hladce)}
.obor:hover .velke{transform:translateY(-6px)}
.obor:hover .velke{color:#ead6fd}
.obor{min-height:340px}

/* reference */
.reference-pas{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(290px,40vw,560px);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 0 30px;scrollbar-width:none;overscroll-behavior-x:contain}
.reference-pas::-webkit-scrollbar{display:none}
.reference{scroll-snap-align:start;padding:clamp(28px,3vw,44px);display:flex;flex-direction:column;margin:0}
.reference .uvozovky{width:44px;color:var(--fi);margin-bottom:26px}
.reference blockquote{margin:0 0 30px;font:400 clamp(17px,1.4vw,19.5px)/1.6 var(--telo);color:var(--text)}
.reference figcaption{margin-top:auto;display:flex;align-items:center;gap:14px;padding-top:22px;border-top:1px solid var(--linka)}
.reference .inicialy{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--fi),var(--fi-tm));color:#fff;display:grid;place-items:center;font:600 16px/1 var(--nadpis);flex:0 0 auto}
.reference b{display:block;font:600 16px/1.25 var(--nadpis)}
.reference small{color:var(--tlumene);font-size:14.5px}
.ovladani{display:flex;gap:10px}
.ovladani button{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--linka2);background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--text);transition:background .3s,color .3s,border-color .3s}
.ovladani button:hover{background:var(--text);color:#fff;border-color:var(--text)}
.ovladani svg{width:20px}
.reference-mrizka{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.reference-mrizka .reference:first-child,.reference-mrizka .reference:last-child:nth-child(even){grid-column:1/-1}
.reference-mrizka .reference:first-child blockquote{font:500 clamp(22px,2.2vw,30px)/1.4 var(--nadpis);letter-spacing:-.025em}

/* dokumenty */
.dokumenty{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.dokument{display:flex;align-items:center;gap:22px;padding:26px 28px;text-decoration:none}
.dokument .pdf{width:60px;height:72px;border-radius:12px;background:var(--fi-sv);color:var(--fi);display:grid;place-items:center;font:700 13px/1 var(--nadpis);letter-spacing:.06em;flex:0 0 auto;position:relative}
.dokument .pdf::after{content:"";position:absolute;top:0;right:0;width:16px;height:16px;background:linear-gradient(225deg,var(--pozadi) 50%,#dcc0f7 50%);border-top-right-radius:12px}
.dokument h3{font-size:21px;letter-spacing:-.02em;margin-bottom:4px}
.dokument span{color:var(--tlumene);font-size:15px}
.dokument .stahnout{margin-left:auto;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--linka2);display:grid;place-items:center;flex:0 0 auto;transition:all .3s}
.dokument:hover .stahnout{background:var(--fi);border-color:var(--fi);color:#fff}
.dokument .stahnout svg{width:18px}

/* výzva + formulář */
.vyzva{padding:clamp(80px,10vw,140px) 0}
.sekce+.vyzva{padding-top:0}
.vyzva-ram{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(36px,5vw,80px);padding:clamp(28px,5vw,72px);border-radius:clamp(28px,3vw,44px)}
.vyzva-ram h2{font-size:clamp(38px,5vw,72px)}
.kontakty{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:12px}
.kontakty a,.kontakty li>div{display:flex;align-items:center;gap:16px;text-decoration:none;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);transition:background .3s,border-color .3s}
.kontakty a:hover{background:rgba(255,255,255,.09);border-color:rgba(178,107,255,.4)}
.kontakty i{width:44px;height:44px;border-radius:12px;background:rgba(178,107,255,.16);color:var(--fi-hl);display:grid;place-items:center;flex:0 0 auto}
.kontakty i svg{width:20px}
.kontakty small{display:block;color:#a998c0;font-size:13px;line-height:1.2}
.kontakty b{font:600 17px/1.3 var(--nadpis);color:#fff;letter-spacing:-.01em}
.formular{background:#fff;color:var(--text);border-radius:var(--r);padding:clamp(24px,3vw,40px);box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
.formular h3{font-size:28px;margin-bottom:6px}
.na-tmavem .formular h3{color:var(--text)}
.na-tmavem .formular p{color:var(--text2)}
.na-tmavem .formular .pod,.na-tmavem .formular .souhlas{color:var(--tlumene)}
.na-tmavem .formular .hlaska.ok{color:#05624f}.na-tmavem .formular .hlaska.chyba{color:#9a1d44}
.formular .pod{color:var(--tlumene);font-size:15.5px;margin-bottom:24px}
.volby{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;border:0;padding:0}
.volby legend{font:500 14px/1 var(--nadpis);margin-bottom:12px;padding:0;color:var(--text2)}
.volby label{position:relative;cursor:pointer}
.volby input{position:absolute;opacity:0;pointer-events:none}
.volby span{display:block;padding:12px 16px;border-radius:999px;border:1.5px solid var(--linka2);font:500 14.5px/1 var(--nadpis);transition:all .25s}
.volby input:checked+span{background:var(--text);color:#fff;border-color:var(--text)}
.volby input:focus-visible+span{outline:2px solid var(--fi);outline-offset:2px}
.pole-mrizka{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pole{position:relative;margin:0}
.pole.cele{grid-column:1/-1}
.pole input,.pole textarea{width:100%;font:400 16.5px/1.4 var(--telo);color:var(--text);background:#f7f6f9;border:1.5px solid transparent;border-radius:16px;
  padding:26px 18px 10px;outline:0;transition:border-color .25s,background .25s;appearance:none}
.pole textarea{min-height:120px;resize:vertical}
.pole label{position:absolute;left:19px;top:18px;font:400 16px/1.2 var(--telo);color:var(--tlumene);pointer-events:none;transition:all .2s var(--hladce);transform-origin:left top}
.pole input:focus,.pole textarea:focus{border-color:var(--fi);background:#fff}
.pole input:focus+label,.pole input:not(:placeholder-shown)+label,.pole textarea:focus+label,.pole textarea:not(:placeholder-shown)+label{transform:translateY(-9px) scale(.78);color:var(--fi)}
.pole .chyba{display:block;color:#c42b5a;font-size:13.5px;margin-top:6px;min-height:0}
.pole.spatne input,.pole.spatne textarea{border-color:#e5718f;background:#fff7f9}
.past{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.odeslat-radek{display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px;margin-top:20px}
.odeslat-radek .tl{flex:0 0 auto}
.souhlas{font-size:13.5px;color:var(--tlumene);line-height:1.5;flex:1 1 220px;margin:0}
.souhlas a{color:var(--text2)}
.hlaska{margin-top:16px;padding:14px 16px;border-radius:14px;font-size:15px;display:none}
.hlaska.ok{display:block;background:#e6faf6;color:#05624f}
.hlaska.chyba{display:block;background:#fdecf1;color:#9a1d44}
.formular.odeslano form{display:none}
.diky{display:none;text-align:center;padding:30px 10px}
.formular.odeslano .diky{display:block}
.diky .fajfka{width:76px;height:76px;margin:0 auto 24px}
.diky .fajfka svg{width:36px}
.diky h3{font-size:30px;margin-bottom:10px}
.diky p{color:var(--text2)}

/* podstránky */
.podhlava{padding:clamp(150px,20vh,210px) 0 clamp(50px,6vw,90px);position:relative;overflow:hidden}
.drobky{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 30px;font:500 14px/1 var(--nadpis);color:var(--tlumene)}
.drobky li+li::before{content:"/";margin-right:8px;opacity:.5}
.drobky a{text-decoration:none}
.drobky a:hover{color:var(--fi)}
.podhlava h1{font-size:clamp(42px,6.4vw,92px);letter-spacing:-.05em;line-height:1;max-width:14em}
.podhlava h1 em{font-style:normal;color:var(--fi)}
.podhlava .perex{font-size:clamp(18px,1.6vw,21px);color:var(--text2);max-width:40em;margin:30px 0 0}
.dva-sloupce{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,100px);align-items:start}
.lepkave{position:sticky;top:120px}
.obsah{font-size:clamp(17px,1.35vw,19px);color:var(--text2)}
.obsah p:first-child{font:500 clamp(22px,2vw,28px)/1.45 var(--nadpis);letter-spacing:-.025em;color:var(--text)}
.obsah strong{color:var(--text);font-weight:600}
.seznam{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.seznam li{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;align-items:start;padding:22px 24px;background:#fff;border:1px solid var(--linka);border-radius:20px}
.seznam li>i{grid-row:span 2;width:32px;height:32px;border-radius:50%;background:var(--fi-sv);color:var(--fi);display:grid;place-items:center;margin-top:-2px}
.seznam li>i svg{width:16px}
.seznam b{font:600 18px/1.35 var(--nadpis);letter-spacing:-.02em;color:var(--text)}
.seznam span{color:var(--text2);font-size:16px}
.ramecek{margin-top:30px;padding:26px 28px;border-radius:20px;background:var(--fi-sv);color:#3d1466;font-size:16px;border-left:3px solid var(--fi)}
.ramecek p,.obsah .ramecek p:first-child{margin:0;font:400 16.5px/1.6 var(--telo);letter-spacing:0;color:#3d1466}
.pribeh{max-width:780px;margin-inline:auto;font-size:clamp(18px,1.5vw,20.5px);color:var(--text2)}
.pribeh p{margin-bottom:1.3em}
.pribeh .velky{font:500 clamp(26px,3vw,40px)/1.3 var(--nadpis);letter-spacing:-.035em;color:var(--text);margin-bottom:1em}
.pribeh .zaver{font:600 clamp(30px,3.6vw,50px)/1.1 var(--nadpis);letter-spacing:-.045em;color:var(--text);margin-top:1.4em}
.pribeh .zaver em{font-style:normal;color:var(--fi)}
.osa{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.osa li{padding:30px;border-top:1.5px solid var(--fi)}
.osa b{display:block;font:600 34px/1 var(--nadpis);letter-spacing:-.04em;color:var(--fi);margin-bottom:14px}
.osa span{color:var(--text2);font-size:16px}
.na-tmavem .osa li{border-color:var(--fi-hl)}
.na-tmavem .osa b{color:var(--fi-hl)}
.na-tmavem .osa span{color:#c9bdd9}
.pravni{max-width:820px}
.pravni h2{font-size:clamp(24px,2.4vw,30px);letter-spacing:-.03em;margin:56px 0 16px}
.pravni p,.pravni li{color:var(--text2)}
.pravni ul{padding-left:1.2em}
.pravni li{margin-bottom:8px}
.kontakt-karty{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:20px}
.kontakt-karta{padding:28px;text-decoration:none;display:flex;flex-direction:column;gap:30px;min-height:200px}
.kontakt-karta i{width:48px;height:48px;border-radius:14px;background:var(--fi-sv);color:var(--fi);display:grid;place-items:center}
.kontakt-karta i svg{width:22px}
.kontakt-karta small{display:block;color:var(--tlumene);font-size:14px;margin-bottom:6px;margin-top:auto}
.kontakt-karta b{font:600 19px/1.35 var(--nadpis);letter-spacing:-.02em}
.kontakt-karta div{margin-top:auto}

/* ------------------------------------------------------------------ patička */
.paticka{background:var(--noc);color:#c9bdd9;padding:clamp(70px,9vw,120px) 0 30px;position:relative;overflow:hidden;isolation:isolate}
.paticka::before{content:"";position:absolute;inset:-50% -20% auto 40%;height:100%;z-index:-1;background:radial-gradient(closest-side,rgba(132,28,223,.32),transparent)}
.paticka-mrizka{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px}
.paticka .logo{color:#fff;margin-bottom:22px}
.paticka .logo svg{width:160px}
.paticka p{font-size:15.5px;max-width:26em}
.paticka h4{font:500 13px/1 var(--nadpis);letter-spacing:.14em;text-transform:uppercase;color:#8f7fa8;margin:8px 0 22px}
.paticka ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.paticka a{text-decoration:none;color:#e6ddf2;transition:color .2s}
.paticka a:hover{color:var(--fi-hl)}
.socialni{display:flex;gap:10px;margin-top:26px}
.socialni a{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;transition:all .3s}
.socialni a:hover{background:var(--fi);border-color:var(--fi);color:#fff}
.socialni svg{width:18px}
.paticka .obri{max-width:none;font:700 clamp(64px,17vw,250px)/.8 var(--nadpis);letter-spacing:-.065em;margin:clamp(60px,8vw,110px) 0 0;text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.02) 90%);-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none;white-space:nowrap}
.spodek{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 30px;padding-top:26px;border-top:1px solid rgba(255,255,255,.08);font-size:14px;color:#8f7fa8}

/* mobilní spodní lišta */
.spodni-lista{display:none}

/* 404 */
.nenalezeno{min-height:80vh;display:grid;place-items:center;text-align:center;padding:160px 0 80px}
.nenalezeno b{display:block;font:700 clamp(120px,22vw,260px)/.9 var(--nadpis);letter-spacing:-.07em;color:var(--fi-sv)}

/* ------------------------------------------------------------------ odhalování při posunu */
.js .odhal{opacity:0;transform:translateY(28px);transition:opacity 1s var(--hladce),transform 1s var(--hladce);transition-delay:var(--zpozdeni,0s)}
.js .odhal.videt{opacity:1;transform:none}
.js .slova .slovo{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.js .slova .slovo>span{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--hladce);transition-delay:calc(var(--i)*55ms + .1s)}
.js .slova.videt .slovo>span{transform:none}

/* ------------------------------------------------------------------ responzivita */
@media (max-width:1080px){
  .menu{display:none}
  .hamburger{display:block}
  .telefon-odkaz{display:none}
  .akce-hlavicka{margin-left:auto}
  .menu-otevreno .menu{display:flex;flex-direction:column;position:fixed;inset:84px var(--okraj) auto;padding:14px;background:#fff;border-radius:26px;box-shadow:var(--stin-v);max-height:calc(100vh - 110px);overflow:auto}
  .menu-otevreno .menu a,.menu-otevreno .menu button{font-size:18px;padding:16px 18px;width:100%;text-align:left}
  .podmenu{position:static;opacity:1;visibility:visible;transform:none;width:auto;box-shadow:none;border:0;padding:0 0 0 8px;display:none}
  .menu li.otevreno>.podmenu{display:block;transform:none}
  .menu li:hover>.podmenu{transform:none}
  .uvod-mrizka{grid-template-columns:1fr}
  .scena{height:500px;max-width:520px;margin-inline:auto;width:100%}
  .sekce-hlava{grid-template-columns:1fr}
  .kroky{grid-template-columns:1fr 1fr;row-gap:40px}
  .kroky::before{display:none}
  .manifest{grid-template-columns:1fr}
  .vyhody,.obory{grid-template-columns:1fr 1fr}
  .vyzva-ram{grid-template-columns:1fr}
  .paticka-mrizka{grid-template-columns:1fr 1fr}
  .dva-sloupce{grid-template-columns:1fr}
  .lepkave{position:static}
  .kontakt-karty{grid-template-columns:1fr 1fr}
  .osa{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  body{font-size:16.5px}
  .hlavicka{inset:10px 0 auto}
  .hlavicka .lista{padding:8px 8px 8px 18px}
  .logo svg{width:118px}
  .akce-hlavicka .tl{display:none}
  .uvod h1{font-size:clamp(40px,11.5vw,58px)}
  .uvod .tlacitka .tl{width:100%}
  .scena{height:470px}
  .balicek{transform:none;height:400px}
  .plovak{display:none}
  .sluzby,.vyhody,.obory,.dokumenty,.reference-mrizka,.kontakt-karty,.osa{grid-template-columns:1fr}
  .sluzba{min-height:440px}
  .kroky{grid-template-columns:1fr}
  .cisla{grid-template-columns:1fr}
  .reference-pas{grid-auto-columns:88%}
  .pole-mrizka{grid-template-columns:1fr}
  .paticka-mrizka{grid-template-columns:1fr}
  .odeslat-radek .tl{width:100%}
  .spodni-lista{display:grid;grid-template-columns:1fr 1.4fr;gap:8px;position:fixed;left:10px;right:10px;bottom:10px;z-index:60;
    padding:8px;border-radius:22px;background:rgba(14,11,20,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    transform:translateY(130%);transition:transform .45s var(--hladce)}
  .ukaz-listu .spodni-lista{transform:none}
  .spodni-lista a{display:flex;align-items:center;justify-content:center;gap:8px;padding:15px 10px;border-radius:15px;font:600 15px/1 var(--nadpis);text-decoration:none;color:#fff;background:rgba(255,255,255,.1)}
  .spodni-lista a:last-child{background:var(--fi)}
  .spodni-lista svg{width:18px}
  .paticka{padding-bottom:100px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .odhal,.js .slova .slovo>span{opacity:1;transform:none}
}