/*
Theme Name: Krobosoft Identity 2026
Theme URI: https://krobosoft.cz
Author: Krobosoft
Description: Vlastní téma pro krobosoft.cz. Kresba je generovaná v prohlížeči,
 jediné rastry jsou autorský otisk, tvář a snímky referenčních webů.
Version: 1.29.1
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: krobosoft-id
*/

/* ============================================================
   KROBOSOFT — homepage
   Vlastní světelný svět značky, proto jeden motiv bez přepínání;
   všechny barvy i pozadí jsou vypsané explicitně.
   ============================================================ */
:root{
  --navy:#141B4D; --navy-2:#1B2360; --navy-deep:#101641;
  --ink:#141B4D; --body:#5F6588; --body-soft:#8189A8;
  --orange:#F0552B; --purple:#5B4AD8;
  --lav:#EFEDFB; --lav-2:#F6F5FD; --page:#FCFBFE; --white:#fff;
  --lav-sec:#ECE9FF; /* plocha sekce služeb = spodek vodovky přechodů (krobosoft_edge.py) */
  --line:#E4E2F2; --line-dark:rgba(255,255,255,.13);
  --r-card:22px; --r-lg:44px;
  --sh-card:0 18px 40px -22px rgba(28,25,80,.30);
  --sh-pop:0 20px 44px -18px rgba(240,85,43,.44);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;background:var(--page);color:var(--body);
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:15px;line-height:1.62;-webkit-font-smoothing:antialiased;
  /* clip, ne hidden: hidden u body (html má clip, takže se nepřenese na okno)
     udělá z body vlastní posuvný kontejner a lepicí hlavička pak ujede */
  overflow-x:hidden;overflow-x:clip;
}
h1,h2,h3,h4,p{margin:0}
a{color:inherit;text-decoration:none}
img,svg,canvas{display:block;max-width:100%}
.wrap{max-width:1280px;margin:0 auto;padding:0 36px}
h1,h2,h3{color:var(--ink);font-weight:800;letter-spacing:-.033em;line-height:1.06}
.rule{width:52px;height:3px;background:var(--orange);border-radius:2px;margin-top:20px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 26px;border:0;
  border-radius:25px 30px 30px 25px/25px 25px 25px 25px;
  font-family:inherit;font-weight:700;font-size:14.5px;letter-spacing:-.005em;
  cursor:pointer;position:relative;overflow:hidden;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .28s,background-color .28s;
}
.btn > *{position:relative;z-index:2}
.btn--primary{background:var(--orange);color:#fff;box-shadow:var(--sh-pop)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 26px 52px -16px rgba(240,85,43,.56)}
.btn--ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn--ghost:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn--sm{height:44px;padding:0 20px;font-size:13.5px}
.btn__pr{position:absolute;inset:0;z-index:1;opacity:.16;transition:opacity .35s}
.btn:hover .btn__pr{opacity:.34}
.btn__pr canvas{width:100%;height:100%}

/* ---------- header ---------- */
/* Hlavička je sama průhledná (na úvodní stránce pod menu dobíhá hlavní tah
   hera). Matný podklad nese ::before: rozsvítí se až po odrolování (.stuck)
   a dole měkce dobíhá do ztracena — žádná ostrá spodní hrana ani linka,
   která by přes tahy hera působila jako bílý pruh. Bez JS je podklad
   zapnutý pořád (.stuck by se nepřidalo). */
header{position:sticky;top:0;z-index:60;background:transparent;border-bottom:1px solid transparent}
header::before{content:"";position:absolute;left:0;right:0;top:0;bottom:-6px;z-index:-1;pointer-events:none;
  background:rgba(252,251,254,.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 12px),transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 12px),transparent 100%);
  opacity:0;transition:opacity .35s ease}
header.stuck::before,html:not(.js-menu) header::before{opacity:1}
/* desktop: menu na středu mezi logem a tlačítkem */
@media (min-width:861px){
  header .nav{display:grid;grid-template-columns:1fr auto 1fr}
  header .nav ul{margin:0;justify-self:center}
  header .nav .hdr-cta{justify-self:end}
}
.nav{display:flex;align-items:center;gap:32px;height:var(--hdr-h)}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.02em;
  font-size:16.5px;color:var(--ink)}
.brand .brand-logo{display:block;width:auto;height:24px;max-width:none}
/* Logo a výška hlavičky podle pravidel značky. Logo se mění jen výškou,
   šířka plyne z poměru SVG (133,3 : 22,0), takže se nikdy nedeformuje.
   Ochranná zóna = výška znaku „O“ (0,716 výšky loga) nad i pod logem, takže
   hlavička je 2,44× vyšší než logo: na 1440 px logo 40 px a hlavička 98 px,
   na 2560 px 46 a 112 px. Pod 1440 px se obojí plynule zmenšuje, od 1024 px
   dolů zůstává logo 28 px a hlavička původních 82 px (logo se tam musí vejít
   do svého sloupce vedle menu). Levá hrana K lícuje s nadpisem (obojí začíná
   na hraně .wrap), menu zůstává přesně na středu stránky (mřížka 1fr auto
   1fr). Výšku hlavičky (--hdr-h) přebírá i hero (--hdr) a kotvy projektů.
   Mobilní panel má stejné logo jako hlavička. Patička má vlastní, menší. */
:root{--logo:clamp(28px,calc(2.885vw - 1.54px),40px);--hdr-h:max(82px,calc(var(--logo) * 2.44))}
@media (min-width:1441px){:root{--logo:min(46px,calc(40px + (100vw - 1440px) * 6 / 1120))}}
@media (max-width:860px){:root{--logo:28px}}
header .brand .brand-logo,.mnav-top .brand .brand-logo{height:var(--logo)}
/* Logo na světlé hlavičce je v modré hera #303B70, ne černé (14. 10. 2026).
   Logo je černé SVG v <img>, přebarví ho filtr (spočítaný nástrojem
   krobosoft-3d/hero-holub/nastroje/filtr_barvy.py, vychází rgb 49 60 112).
   Nad navy herem je bílé stejnou řadou funkcí, přechod je proto plynulý. */
header .brand .brand-logo{filter:brightness(0) saturate(100%) invert(23%) sepia(14%) saturate(2418%) hue-rotate(192deg) brightness(92%) contrast(92%)}
.nav ul{list-style:none;display:flex;gap:30px;margin:0 0 0 auto;padding:0;font-size:14.5px;font-weight:600}
.nav ul a{color:var(--body);transition:color .2s;position:relative;white-space:nowrap}
/* Šest položek se mezi 860 a 1120 px přestane vejít vedle loga a tlačítka
   a menu se zalomí do dvou řádků. Rozestupy se proto v tomhle pásmu
   utáhnou; pod 860 px se menu skrývá tak jako dřív. */
@media (max-width:1120px){.nav{gap:20px}.nav ul{gap:19px}}
@media (max-width:980px){.nav{gap:16px}.nav ul{gap:13px;font-size:13.5px}}
.nav ul a:hover{color:var(--ink)}
.nav ul a.on{color:var(--orange)}
.nav ul a.on::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;
  background:var(--orange);border-radius:2px}

/* ============================================================
   MOBILNÍ MENU

   Hlavička se převrátí do tmavé a sjede přes stránku: stejná výška
   horního pruhu, stejné logo, jen v inverzi. Otevírá to clip-path
   od horní hrany — panel je pořád vysázený, jen oříznutý, takže
   přechod nepotřebuje ani vynucený reflow, ani requestAnimationFrame.

   .js-menu na <html> přidává menu.js. Bez skriptu tedy zůstane
   navigace vypsaná pod logem a přepínač se vůbec neukáže — odkazy
   jsou dostupné i tak.
   ============================================================ */
.nav-toggle{display:none}
.mnav{display:none}

.nav-toggle{margin-left:12px;width:46px;height:46px;flex:none;padding:0;cursor:pointer;
  border:1px solid var(--line);border-radius:14px;background:var(--white);color:var(--ink);
  place-items:center;transition:border-color .25s,box-shadow .25s}
.nav-toggle:hover{border-color:var(--ink)}
.nav-toggle:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.nav-toggle-bars{display:block;width:18px;height:12px;position:relative}
.nav-toggle-bars i{position:absolute;left:0;right:0;height:2px;border-radius:2px;
  background:currentColor;transition:transform .38s cubic-bezier(.3,1.1,.35,1)}
.nav-toggle-bars i:nth-child(1){top:0}
.nav-toggle-bars i:nth-child(2){bottom:0}
.mnav-open .nav-toggle-bars i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.mnav-open .nav-toggle-bars i:nth-child(2){transform:translateY(-5px) rotate(-45deg)}

.mnav{position:fixed;inset:0;z-index:70;background:var(--navy-deep);
  overflow-y:auto;overscroll-behavior:contain;
  visibility:hidden;clip-path:inset(0 0 100% 0);
  transition:clip-path .5s cubic-bezier(.5,0,.16,1),visibility 0s linear .5s}
.mnav-open .mnav{visibility:visible;clip-path:inset(0 0 0 0);
  transition:clip-path .58s cubic-bezier(.22,.82,.26,1),visibility 0s}

.mnav-top{height:82px;display:flex;align-items:center;position:relative;z-index:3}
.mnav-top .wrap{display:flex;align-items:center;width:100%}
.mnav-top .brand{color:#fff}
.mnav-top .brand-logo{filter:brightness(0) invert(1)}
.mnav-close{margin-left:auto;width:46px;height:46px;flex:none;padding:0;cursor:pointer;
  border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  color:#fff;display:grid;place-items:center;transition:background .25s,border-color .25s}
.mnav-close:hover{background:var(--orange);border-color:var(--orange)}
.mnav-close:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

.mnav-in{position:relative;z-index:3;min-height:calc(100% - 82px);
  padding:clamp(16px,4vw,34px) 0 clamp(26px,6vw,48px);display:flex}
.mnav-in .wrap{display:flex;flex-direction:column;flex:1;gap:clamp(26px,6vw,48px)}

.mnav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.mnav-list li{border-bottom:1px solid rgba(255,255,255,.10)}
.mnav-list li:first-child{border-top:1px solid rgba(255,255,255,.10)}
.mnav-list a{display:block;padding:16px 0;color:#fff;
  font-size:clamp(22px,6.2vw,29px);font-weight:800;letter-spacing:-.032em;line-height:1.14;
  transition:color .22s ease,padding-left .32s cubic-bezier(.2,.8,.3,1)}
.mnav-list a:hover{color:var(--orange);padding-left:10px}
.mnav-list a.on,.mnav-list .current-menu-item > a{color:var(--orange)}

.mnav-foot{margin-top:auto;display:grid;gap:24px}
.mnav-cta{width:100%;justify-content:center;height:54px}
.mnav-contacts{display:grid;gap:14px;padding-top:22px;border-top:1px solid rgba(255,255,255,.11)}
.mnav-contacts a,.mnav-contacts span{display:flex;align-items:center;gap:13px;
  color:#D6DAEB;font-size:14.5px;font-weight:500}
.mnav-contacts i{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.07);
  display:grid;place-items:center;flex:none;color:#fff;transition:background .25s}
.mnav-contacts a:hover i{background:var(--orange)}

/* Obsah nabíhá po blocích, teprve tím to přestane být odhalení plochy
   a začne to být příchod. */
.mnav-list li,.mnav-foot{opacity:0;transform:translateY(15px);
  transition:opacity .48s ease,transform .55s cubic-bezier(.22,1,.28,1)}
.mnav-open .mnav-list li,.mnav-open .mnav-foot{opacity:1;transform:none}
.mnav-open .mnav-list li:nth-child(1){transition-delay:.15s}
.mnav-open .mnav-list li:nth-child(2){transition-delay:.20s}
.mnav-open .mnav-list li:nth-child(3){transition-delay:.25s}
.mnav-open .mnav-list li:nth-child(4){transition-delay:.30s}
.mnav-open .mnav-list li:nth-child(5){transition-delay:.35s}
.mnav-open .mnav-list li:nth-child(6){transition-delay:.40s}
.mnav-open .mnav-list li:nth-child(n+7){transition-delay:.44s}
.mnav-open .mnav-foot{transition-delay:.46s}

@media (prefers-reduced-motion:reduce){
  .mnav,.mnav-list li,.mnav-foot,.mnav-list a,.nav-toggle-bars i{transition:none!important}
  .mnav{clip-path:none}
}

/* ---------- hero: holub (nahrazuje Hranu z 1.16.0) ----------
   Celé hero je navy plocha, vlevo nadpis „Tvoříme / weby“, vpravo obří holub
   oříznutý pravým okrajem okna a dole pery přechodu do sekce služeb.

   JEDNA MÍRA PRO CELOU SCÉNU. Návrh měří od levé hrany obsahu k pravému okraji
   okna 1344 jednotek a na výšku 700 až 860. Všechny rozměry v heru jsou
   násobky --u = jedna jednotka návrhu:
       --u = (šířka okna − levá hrana obsahu) / 1344
   Scéna se tím roztáhne od loga přesně k pravému okraji okna, a na 1280 i na
   2560 px proto vypadá stejně: stejně velký holub vůči nadpisu, zobák u konce
   slova „Tvoříme“, holub oříznutý ve stejném místě. Levá hrana obsahu je
   hrana .wrap, tedy totéž místo, kde začíná logo v hlavičce.
   Jediná výjimka je široké a nízké okno (užší poměr než zhruba 1344 : 700):
   tam by se scéna nevešla na výšku, tak ji omezí výška okna a vpravo se ukáže
   víc těla. Proto má holub dokreslená záda, letky i ocas
   (krobosoft-3d/hero-holub/holub_v3.py). --vh je výška okna: svh, kde ho
   prohlížeč umí, jinak vh.

   Slovo ve druhém řádku se mění (weby, e-shopy, systémy, portály). Delší slova
   dostanou menší písmo (--s, nastavuje krobosoft.js), aby řádek nebyl širší
   než „Tvoříme“ a neskončil pod zobákem. Všechna slova sdílejí účaří (grid,
   align-items:baseline), výška nadpisu se při změně nehýbe.

   Do 900 px je scéna pod sebou: text nahoře, holub dole vpravo.
   Markup: template-parts/hero-holub.php (holuba generuje
   krobosoft-3d/hero-holub/sablona.py, SVG ručně neupravovat). */
.hero{--k:calc((100vw - 1440px) / 1120);--hdr:calc(var(--hdr-h) + 1px);position:relative}
header{--k:calc((100vw - 1440px) / 1120)}
/* o kolik sekce služeb najede na spodek hera (sekci přebíjí portfolio.css na 0) */
:root{--ov:2px}
@media (min-width:1200px){:root{--ov:clamp(40px,calc(40px + 20 * (100vw - 1440px) / 1120),60px)}}
header .wrap,.hero .wrap{max-width:clamp(1280px,calc(1280px + 492 * var(--k)),1772px)}
.services{position:relative;z-index:2}
.hero .wrap{position:relative;z-index:2}

.hero.hb{
  --xl:max(36px,calc((100vw - clamp(1280px,calc(1280px + 492 * var(--k)),1772px)) / 2 + 36px));
  --vh:100vh;
  --u:min(calc((100vw - var(--xl)) / 1344),calc(var(--vh) / 700));
  /* navy běží i pod průhlednou hlavičkou, hero proto začíná nahoře na stránce */
  margin-top:calc(-1 * var(--hdr));
  height:min(var(--vh),calc(860 * var(--u)));min-height:calc(700 * var(--u));
  padding:0;overflow:hidden;color:#FCFBFE;
  /* pozadí je jen přechod, bez textury (zrno má jen holub) */
  background:radial-gradient(120% 100% at 15% 10%,#3B4785 0%,#303B70 45%,#1E2659 100%);
}
@supports (height:100svh){.hero.hb{--vh:100svh}}
.hb .wrap,.hb-in{height:100%}
.hb-in{position:relative}
.hb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.hb-bird{position:absolute;z-index:1;left:calc(479 * var(--u));top:calc(104 * var(--u));
  width:calc(880 * var(--u));height:auto;max-width:none;overflow:visible;pointer-events:none}
.hb-copy{position:absolute;z-index:2;left:0;top:calc(196 * var(--u))}
.hb h1{margin:0;font-size:calc(135 * var(--u));line-height:.86;letter-spacing:-.045em;font-weight:800;color:#fff}
.hb-l1{display:block}
/* slova leží v jedné buňce na společném účaří; vidět je jen to s .is-on */
.hb-words{display:grid;align-items:baseline;justify-items:start;color:#C3BBF2;
  /* Výřez pro výměnu slova. Nahoře končí přesně na horní hraně řádku: ta je
     0,02 em pod účařím slova „Tvoříme“, takže odjíždějící slovo zmizí hned
     pod ním a nepřekryje ho (čárky nad á, é sahají 0,83 em nad účaří, řádek
     0,84 em, vejdou se). Dole je místo na dotahy y, p (0,2 em pod řádkem). */
  clip-path:inset(0 -100vw -.24em -.1em)}
.hb-w{grid-area:1/1;white-space:nowrap;font-size:calc(1em * var(--s,1));visibility:hidden;
  transition:transform .56s cubic-bezier(.2,.8,.2,1),visibility 0s .56s}
.hb-w.is-on{visibility:visible;transition:transform .56s cubic-bezier(.2,.8,.2,1)}
.hb-w.is-below{transform:translateY(1.5em);transition:none}
.hb-w.is-above{transform:translateY(-1.5em);transition:transform .4s cubic-bezier(.6,0,.8,.3),visibility 0s .4s}

.hb .lede{margin:calc(34 * var(--u)) 0 calc(38 * var(--u));max-width:none;white-space:nowrap;
  font-size:clamp(17px,calc(22 * var(--u)),34px);line-height:1.5;letter-spacing:-.008em;color:#D9DBF0}
/* poslední věta podnadpisu se nedělí: na mobilu spadne celá na další řádek */
.hb-nb{white-space:nowrap}
/* Akce: tlačítko a odkaz jako jeden celek. Tlačítko má proporce běžného
   tlačítka šablony (.btn, 50 px), jen o kousek větší písmo, a s oknem roste
   jen mírně: 50 px do okna kolem 1600, 52 px na 1920, nejvýš 56 px. Pravý
   odsazení je o 2 px menší než levé: šipka má v kresbě vlastní volný okraj,
   takže text se šipkou pak opticky sedí na střed. Odkaz má stejně velké písmo
   jako tlačítko a klikací plochu 48 px na výšku. */
.hb-acts{display:flex;align-items:center;gap:clamp(22px,calc(24 * var(--u)),32px)}
.hb .hb-cta{--cta-x:clamp(24px,calc(21 * var(--u)),30px);
  height:clamp(50px,calc(42 * var(--u)),56px);padding:0 calc(var(--cta-x) - 2px) 0 var(--cta-x);
  border-radius:999px;gap:.5em;font-size:clamp(15.5px,calc(13 * var(--u)),17.5px);letter-spacing:-.005em}
.hb .hb-cta svg{width:1em;height:1em;flex:none}
.hb-link{display:inline-flex;align-items:center;min-height:48px;font-weight:700;
  font-size:clamp(15.5px,calc(13 * var(--u)),17.5px);color:#fff;text-decoration:underline;
  text-decoration-thickness:max(1.5px,.09em);text-underline-offset:.34em;
  text-decoration-color:rgba(255,255,255,.5);transition:text-decoration-color .2s}
.hb-link:hover{text-decoration-color:#F0552B}
.hb a:focus-visible{outline:2px solid #F0552B;outline-offset:4px}
/* u odkazu kroužek těsně kolem textu, ne kolem celé 48px klikací plochy
   (ta by byla vyšší než text a na mobilu by najela na tlačítko) */
.hb .hb-link:focus-visible{outline:none;text-decoration-color:#F0552B}
.hb .hb-link:focus-visible span{outline:2px solid #F0552B;outline-offset:6px;border-radius:4px}

/* zrno je jen na holubovi: je součástí jeho SVG (holub_v3.py, zrno=True),
   pozadí hera je čistý přechod bez textury */
.hb-bird .zrno{pointer-events:none}
.hero.hb + .services{margin-top:0}

/* tablet na výšku a mobil: text nahoře, holub dole vpravo */
@media (max-width:900px){
  .hero.hb{--u:calc(min(100vw,640px) / 390);height:auto;min-height:0;padding-top:calc(var(--hdr) + 22 * var(--u))}
  .hb .wrap,.hb-in{height:auto}
  .hb-in{padding-bottom:calc(304 * var(--u))}
  .hb-copy{position:relative;top:auto}
  .hb h1{font-size:calc(68 * var(--u))}
  .hb .lede{white-space:normal;max-width:34ch;margin:calc(22 * var(--u)) 0 calc(24 * var(--u));
    font-size:clamp(17px,calc(17.5 * var(--u)),24px)}
  .hb-acts{flex-wrap:wrap;gap:6px 22px}
  .hb .hb-cta{--cta-x:24px;height:50px;font-size:16px}
  .hb-link{font-size:16px}
  .hb-bird{left:0;top:auto;bottom:calc(-183 * var(--u));width:calc(640 * var(--u))}
}
@media (prefers-reduced-motion:reduce){.hb-w{transition:none!important}}

/* Hlavička nad navy herem: dokud je stránka v heru, je světlá na tmavém.
   Třídu .past-hero přidá krobosoft.js, jakmile hero odroluje; pak platí
   běžná světlá hlavička. Matný podklad má v heru barvu hera. */
body.home header:not(.past-hero)::before{background:rgba(36,45,100,.86)}
/* Bílé logo stejnou řadou filtrů jako modré na světlé hlavičce (style.css,
   hlavička): sepia, saturate a hue-rotate mají obě varianty stejné, liší se
   jen invert, brightness a contrast (bílou drží brightness 1000 %). Při
   přechodu se tak mezistavy drží v bílé a modré; s jinými hodnotami hue-rotate
   by logo na okamžik prošlo zelenou. */
body.home header:not(.past-hero) .brand .brand-logo{filter:brightness(0) saturate(100%) invert(100%) sepia(14%) saturate(2418%) hue-rotate(192deg) brightness(1000%) contrast(100%)}
body.home header:not(.past-hero) .nav ul a{color:#D9DBF0}
body.home header:not(.past-hero) .nav ul a:hover,
body.home header:not(.past-hero) .nav ul a.on{color:#fff}
body.home header .brand .brand-logo{transition:filter .25s}

/* ---------- hero: holub — přechod do služeb (od 1.18.0) ----------
   Nahrazuje světlou hranu .hb-ledge z 1.17.0 (generátor ji umí vrátit:
   sablona.py --prechod zadny). Pera leží PŘED holubem: přední plocha má barvu
   horního okraje sekce služeb, takže hero do ní přechází bez švu, prostřední
   je tmavší a zadní je průsvitný závoj přes spodek holuba.
   Kresba je v jednotkách hera od levé hrany obsahu (prechod.py: X0 = −900,
   šířka 3500, výška 380), proto se vůči holubovi nehýbe na žádné šířce.
   --pu je jednotka přechodu: na desktopu stejná jako --u, na mobilu menší,
   aby se tatáž kresba vešla do úzkého okna. */
.hero.hb{--pu:var(--u);
  /* jemné prosvětlení u spodní hrany: navy se tu zvedá k barvě sekce, takže
     přechod není skok; nad ním původní přechod hera beze změny */
  background:
    radial-gradient(120% 100% at 15% 10%,#3B4785 0%,#303B70 45%,#1E2659 100%)}
.hb-prechod{position:absolute;z-index:4;display:block;max-width:none;pointer-events:none;bottom:-1px;
  left:calc(var(--xl) - 900 * var(--pu));width:calc(3500 * var(--pu));height:calc(380 * var(--pu))}
@media (max-width:900px){
  /* měřítko a výřez kresby na mobilu podle varianty (prechod.py: MOBIL) */
  .hero.hb{--pu:calc(var(--u) * 0.62)}
  .hb-prechod{left:calc(100vw - 2050 * var(--pu))}
}


/* ---------- services ----------
   Světle levandulová plocha (--lav-sec), do které přechází hero. Dole končí
   roztřepeným okrajem vodovky (.svc-edge, už složený s barvou stránky,
   horní řádky = --lav-sec) — pod ním je zase stránka a tmavý pás
   s projekty.
   Karty jsou jedna sada čtyř modulů: stejná šířka i výška, stejné
   odsazení, těsné mezery, žádné posuny nahoru a dolů. Charakter dělá jen
   kvalita karty (světlý levandulový podklad, jemný obrys, měkký stín),
   sjednocené ikony v dlaždici a jemná mokrá lazura za skupinou — žádné
   ozdoby. Lazura i spodní okraj jsou pod obsahem (.svc-edge z-index -1
   v kontextu sekce), aby lazura mohla jít přes multiply: .wrap nesmí
   tvořit vlastní stacking context (vnořené multiply nad průhledným
   podkladem Chrome nevykreslí). */
/* Měřítko sekce roste plynule od 1440 px (dnešní velikosti) do 2560 px
   (velkorysý desktop): --k je 0 na 1440 px a 1px na 2560 px, každá míra
   je clamp(A, A + (B − A)·k, B). Pod 1440 px platí A — tablet a mobil se
   nemění. Obsah sekce na 2560 px ~1700 px, karta ~310 px. */
.services{--k:calc((100vw - 1440px) / 1120);--svc-edge:max(84px,9.375vw);
  padding:clamp(44px,calc(44px + 36 * var(--k)),80px) 0 calc(var(--svc-edge) + clamp(30px,calc(30px + 24 * var(--k)),54px));background:var(--lav-sec);
  overflow:hidden} /* lazura (multiply) nesmí přesáhnout nad sekci — tam nemá podklad a byla by bílá */
.services .wrap{max-width:clamp(1280px,calc(1280px + 492 * var(--k)),1772px)}
/* hero a služby jako jeden celek: sekce najede na spodek hera (ten je už
   v barvě sekce), hlavy končí výš — 66 px nad koncem hera na 1440 px */
/* hero končí na zlomku px — sekce vždy aspoň o 2 px najede, jinak ve sdíleném
   řádku prosvítá šev; od 1200 px najede o 40–60 px (--ov) */
.services{margin-top:calc(-1 * var(--ov))}
.svc-edge{position:absolute;left:0;bottom:0;z-index:-1;width:100%;height:var(--svc-edge);max-width:none;
  object-fit:cover;object-position:50% 0;pointer-events:none}
.services .head{max-width:clamp(250px,calc(250px + 120 * var(--k)),370px);padding:clamp(58px,calc(58px + 26 * var(--k)),84px) clamp(22px,calc(22px + 10 * var(--k)),32px) 0 0}
.services h2{font-size:min(62px,max(clamp(27px,3.1vw,37px),calc(37px + 25 * var(--k))))}
.svc-row{display:grid;grid-template-columns:clamp(250px,calc(250px + 120 * var(--k)),370px) repeat(4,minmax(0,1fr));gap:clamp(14px,calc(14px + 8 * var(--k)),22px);
  align-items:stretch;position:relative}
/* lazura za skupinou karet: přesahuje ji, měkké okraje doběhnou mimo karty */
.svc-wash{position:absolute;grid-column:2/-1;grid-row:1;left:-7%;top:-9%;width:114%;height:122%;
  max-width:none;z-index:0;pointer-events:none;mix-blend-mode:multiply}
.svc{position:relative;z-index:2;border-radius:clamp(20px,calc(20px + 6 * var(--k)),26px);padding:clamp(44px,calc(44px + 18 * var(--k)),62px) clamp(22px,calc(22px + 12 * var(--k)),34px) clamp(26px,calc(26px + 14 * var(--k)),40px);
  background:#FDFCFF;box-shadow:0 0 0 1px rgba(91,74,216,.10),0 1px 2px rgba(36,28,99,.05),
  0 18px 36px -24px rgba(36,28,99,.30);
  transition:transform .35s cubic-bezier(.2,.7,.3,1)}
/* hover jen jemně: zvednutí a o něco větší stín (vrstva se jen rozsvítí — bez přepočtu stínu) */
.svc::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  box-shadow:0 26px 44px -24px rgba(36,28,99,.38);opacity:0;transition:opacity .35s}
.svc:hover{transform:translateY(-4px)}
.svc:hover::after{opacity:1}
.svc .num{position:absolute;top:calc(clamp(18px,calc(18px + 5 * var(--k)),23px) * -1);left:clamp(22px,calc(22px + 12 * var(--k)),34px);width:clamp(38px,calc(38px + 10 * var(--k)),48px);height:clamp(38px,calc(38px + 10 * var(--k)),48px);border-radius:50%;
  background:#fff;color:var(--purple);
  box-shadow:0 0 0 1px rgba(91,74,216,.13),0 6px 14px -8px rgba(36,28,99,.40);
  display:grid;place-items:center;font-size:clamp(15px,calc(15px + 4 * var(--k)),19px);font-weight:800}
/* „v ceně" je prodejní argument, ne poznámka pod čarou — patří ven z textu */
.svc .badge{position:absolute;top:calc(clamp(13px,calc(13px + 3 * var(--k)),16px) * -1);right:clamp(18px,calc(18px + 8 * var(--k)),26px);z-index:3;
  background:var(--orange);color:#fff;font-size:clamp(15px,calc(15px + 3 * var(--k)),18px);font-weight:800;line-height:1;
  letter-spacing:.02em;padding:clamp(6px,calc(6px + 2 * var(--k)),8px) clamp(13px,calc(13px + 3 * var(--k)),16px) clamp(7px,calc(7px + 2 * var(--k)),9px);border-radius:20px;
  box-shadow:0 7px 16px -7px rgba(240,85,43,.75)}
/* block, ne inline — na inline se svislý margin neuplatní a karty
   by měly každá jinou výšku ikonového bloku */
.svc .ico{display:block;width:54px;height:54px;margin-bottom:22px}
/* ============================================================
   Chytré propojení — oddělené služby, jedna cesta, tok.
   Nejdřív tři samostatné moduly, pak se mezi nimi nakreslí
   jediná čistá linka (ne síť uzlů) a po ní projede impuls:
   objednávka → platba → e-mail. Každý krok se po dojezdu
   potvrdí obrysem, na konci potvrdí všechny tři. Loop 5,2 s.
   ============================================================ */
.svc .cxui{display:block;width:92px;height:54px;margin-bottom:22px}
.svc .cxui svg{width:100%;height:100%;display:block}
.cxui .cx-line{stroke-dasharray:100;stroke-dashoffset:100;
  animation:cxLine 5.2s cubic-bezier(.36,0,.18,1) infinite}
.cxui .cx-dot{opacity:0;animation:cxDot 5.2s cubic-bezier(.42,0,.3,1) infinite}
.cxui .cx-r1,.cxui .cx-r2,.cxui .cx-r3{opacity:0;
  transform-box:fill-box;transform-origin:center}
.cxui .cx-r1{animation:cxR1 5.2s cubic-bezier(.3,1.4,.4,1) infinite}
.cxui .cx-r2{animation:cxR2 5.2s cubic-bezier(.3,1.4,.4,1) infinite}
.cxui .cx-r3{animation:cxR3 5.2s cubic-bezier(.3,1.4,.4,1) infinite}

@keyframes cxLine{
  0%,10%{stroke-dashoffset:100}
  26%,88%{stroke-dashoffset:0}
  96%,100%{stroke-dashoffset:100}
}
/* impuls jede k platbě, tam se „zpracuje", a pokračuje k e-mailu */
@keyframes cxDot{
  0%,30%{transform:translateX(0);opacity:0}
  34%{transform:translateX(0);opacity:1}
  46%{transform:translateX(9px);opacity:1}
  50%{transform:translateX(9px);opacity:0}
  56%{transform:translateX(33px);opacity:0}
  60%{transform:translateX(33px);opacity:1}
  70%{transform:translateX(42px);opacity:1}
  74%,100%{transform:translateX(42px);opacity:0}
}
@keyframes cxR1{
  0%,26%{opacity:0;transform:scale(.94)}
  32%{opacity:1;transform:scale(1.06)}
  40%,74%{opacity:0;transform:scale(1)}
  80%{opacity:1;transform:scale(1.05)}
  90%,100%{opacity:0;transform:scale(1)}
}
@keyframes cxR2{
  0%,48%{opacity:0;transform:scale(.94)}
  54%{opacity:1;transform:scale(1.06)}
  62%,74%{opacity:0;transform:scale(1)}
  82%{opacity:1;transform:scale(1.05)}
  90%,100%{opacity:0;transform:scale(1)}
}
@keyframes cxR3{
  0%,70%{opacity:0;transform:scale(.94)}
  76%{opacity:1;transform:scale(1.06)}
  84%{opacity:1;transform:scale(1)}
  92%,100%{opacity:0;transform:scale(1)}
}

/* vypnuté animace → statický finální stav: propojeno jednou cestou */
@media (prefers-reduced-motion:reduce){
  .cxui *{animation:none!important}
  .cxui .cx-line{stroke-dashoffset:0}
  .cxui .cx-dot{opacity:0}
  .cxui .cx-r1,.cxui .cx-r2,.cxui .cx-r3{opacity:1}
}

/* ============================================================
   Vývoj — plán, stavba, hotová struktura.
   Nejdřív se nakreslí konstrukční linky a uzly (plán projektu),
   podle nich pak dosednou díly layoutu, a nakonec linky zmizí
   a zůstane čistá hotová struktura. Loop 5,4 s.
   Kreslení přes stroke-dashoffset s pathLength="100", takže
   je jedno, jak jsou tvary dlouhé.
   ============================================================ */
.svc .buildui{display:block;width:92px;height:54px;margin-bottom:22px}
.svc .buildui svg{width:100%;height:100%;display:block}
.buildui g{transform-box:fill-box;transform-origin:center}
.buildui .bd-guide *{stroke-dasharray:100;stroke-dashoffset:100}
.buildui .bd-guide{animation:bdGuide 5.4s cubic-bezier(.36,0,.18,1) infinite}
.buildui .bd-guide rect{animation:bdDraw 5.4s cubic-bezier(.36,0,.18,1) infinite}
.buildui .bd-guide path{animation:bdDraw 5.4s cubic-bezier(.36,0,.18,1) infinite}
.buildui .bd-node{animation:bdNode 5.4s cubic-bezier(.3,1.4,.4,1) infinite}
.buildui .bd-a{opacity:0;animation:bdA 5.4s cubic-bezier(.24,1.05,.3,1) infinite}
.buildui .bd-b{opacity:0;animation:bdB 5.4s cubic-bezier(.24,1.05,.3,1) infinite}
.buildui .bd-c{opacity:0;animation:bdC 5.4s cubic-bezier(.24,1.05,.3,1) infinite}
.buildui .bd-cta{animation:bdCta 5.4s ease-out infinite}

@keyframes bdDraw{0%,5%{stroke-dashoffset:100}24%,100%{stroke-dashoffset:0}}
@keyframes bdGuide{0%,58%{opacity:1}72%,100%{opacity:0}}
@keyframes bdNode{0%,9%{opacity:0;transform:scale(.3)}19%,58%{opacity:1;transform:scale(1)}
  70%,100%{opacity:0;transform:scale(.3)}}

@keyframes bdA{0%,26%{opacity:0;transform:translateY(-3.5px)}
  34%,86%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(-3.5px)}}
@keyframes bdB{0%,34%{opacity:0;transform:translateY(4px)}
  42%,86%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(4px)}}
@keyframes bdC{0%,44%{opacity:0;transform:translateY(4px)}
  52%,86%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(4px)}}
@keyframes bdCta{0%,72%{fill:#F0552B}78%{fill:#FF8763}86%,100%{fill:#F0552B}}

/* vypnuté animace → hotová struktura bez konstrukce */
@media (prefers-reduced-motion:reduce){
  .buildui *{animation:none!important}
  .buildui .bd-guide,.buildui .bd-node{opacity:0}
  .buildui .bd-a,.buildui .bd-b,.buildui .bd-c{opacity:1}
}

/* ============================================================
   Značka — dvě šablony a jedna vlastní tvář.
   Tři stejné náhledy stránky; třetí přestane být šablonou:
   přeskládá si vnitřní kompozici, vezme akcent, povyroste
   a mírně se natočí. Zbylé dvě zároveň ustoupí do pozadí,
   protože odlišení je vztah, ne jen barva. Loop 4,8 s.
   ============================================================ */
.svc .brandmark{display:block;width:92px;height:54px;margin-bottom:22px}
.svc .brandmark svg{width:100%;height:100%;display:block;overflow:visible}
.brandmark .bm-tpl,.brandmark .bm-own,.brandmark .bm-card{
  transform-box:fill-box;transform-origin:center}
.brandmark .bm-tpl{animation:bmTpl 4.8s cubic-bezier(.4,0,.2,1) infinite}
.brandmark .bm-own{animation:bmOwn 4.8s cubic-bezier(.26,1.1,.3,1) infinite}
.brandmark .bm-card{animation:bmCard 4.8s cubic-bezier(.4,0,.2,1) infinite}
.brandmark .bm-uni{animation:bmUni 4.8s cubic-bezier(.4,0,.2,1) infinite}
.brandmark .bm-new{opacity:0;animation:bmNew 4.8s cubic-bezier(.4,0,.2,1) infinite}

@keyframes bmTpl{0%,18%{opacity:1}34%,76%{opacity:.42}92%,100%{opacity:1}}
@keyframes bmOwn{0%,18%{transform:none}
  36%,76%{transform:translateY(-2.4px) scale(1.09) rotate(-3.5deg)}
  92%,100%{transform:none}}
@keyframes bmCard{0%,18%{stroke:#E2DEF5;stroke-width:1}
  36%,76%{stroke:#F0552B;stroke-width:1.6}92%,100%{stroke:#E2DEF5;stroke-width:1}}
@keyframes bmUni{0%,20%{opacity:1}30%,80%{opacity:0}90%,100%{opacity:1}}
@keyframes bmNew{0%,24%{opacity:0}34%,78%{opacity:1}88%,100%{opacity:0}}

/* vypnuté animace → rovnou výsledný stav, myšlenka zůstane čitelná */
@media (prefers-reduced-motion:reduce){
  .brandmark *{animation:none!important}
  .brandmark .bm-tpl{opacity:.42}
  .brandmark .bm-uni{opacity:0}
  .brandmark .bm-new{opacity:1}
  .brandmark .bm-card{stroke:#F0552B;stroke-width:1.6}
  .brandmark .bm-own{transform:translateY(-2.4px) scale(1.09) rotate(-3.5deg)}
}

/* ============================================================
   Mini dashboard v kartě — tři stavy na jedné sdílené časové ose
   (7,2 s; každý stav ~2,4 s). Rám a postranní menu se nemění,
   mění se jen obsah — to je celá pointa vlastního dashboardu.
   Čisté SVG + CSS, žádné JS, ostré na retině.
   ============================================================ */
.svc .dashui{display:block;width:92px;height:54px;margin-bottom:22px}
.svc .dashui svg{width:100%;height:100%;display:block}
.dashui .dui-s{opacity:0}
.dashui .dui-photoB,.dashui .dui-badge{opacity:0}
.dashui .dui-plus,.dashui .dui-newrow,.dashui .dui-swap,.dashui .dui-badge{
  transform-box:fill-box;transform-origin:center}

.dashui .dui-s1{animation:duiS1 7.2s cubic-bezier(.4,0,.2,1) infinite}
.dashui .dui-s2{animation:duiS2 7.2s cubic-bezier(.4,0,.2,1) infinite}
.dashui .dui-s3{animation:duiS3 7.2s cubic-bezier(.4,0,.2,1) infinite}
.dashui .dui-rail{animation:duiRail 7.2s cubic-bezier(.4,0,.2,1) infinite}
.dashui .dui-photoA{animation:duiPhotoA 7.2s cubic-bezier(.32,0,.16,1) infinite}
.dashui .dui-photoB{animation:duiPhotoB 7.2s cubic-bezier(.32,0,.16,1) infinite}
.dashui .dui-swap{animation:duiSwap 7.2s cubic-bezier(.4,0,.2,1) infinite}
.dashui .dui-plus{animation:duiPlus 7.2s cubic-bezier(.34,1.3,.4,1) infinite}
.dashui .dui-newrow{animation:duiRowIn 7.2s cubic-bezier(.24,1.1,.3,1) infinite,
                              duiRowFlash 7.2s ease-out infinite}
.dashui .dui-oldrows{animation:duiShift 7.2s cubic-bezier(.24,1.05,.3,1) infinite}
.dashui .dui-newmsg{animation:duiMsgIn 7.2s cubic-bezier(.24,1.05,.3,1) infinite}
.dashui .dui-badge{animation:duiBadge 7.2s cubic-bezier(.3,1.5,.4,1) infinite}

@keyframes duiS1{0%{opacity:0;transform:translateY(3px)}3%{opacity:1;transform:none}
  30%{opacity:1;transform:none}33.3%{opacity:0;transform:translateY(-3px)}
  100%{opacity:0;transform:translateY(-3px)}}
@keyframes duiS2{0%,33.3%{opacity:0;transform:translateY(3px)}36.3%{opacity:1;transform:none}
  63.3%{opacity:1;transform:none}66.6%{opacity:0;transform:translateY(-3px)}
  100%{opacity:0;transform:translateY(-3px)}}
@keyframes duiS3{0%,66.6%{opacity:0;transform:translateY(3px)}69.6%{opacity:1;transform:none}
  96.5%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-3px)}}

@keyframes duiRail{0%,30%{transform:translateY(0)}36.3%,61%{transform:translateY(7px)}
  69.6%,95%{transform:translateY(14px)}100%{transform:translateY(0)}}

@keyframes duiPhotoA{0%,13%{transform:translateY(0);opacity:1}
  21%,100%{transform:translateY(-20px);opacity:0}}
@keyframes duiPhotoB{0%,13%{transform:translateY(20px);opacity:0}
  21%,100%{transform:translateY(0);opacity:1}}
@keyframes duiSwap{0%,10%{transform:scale(1)}14%{transform:scale(.88)}
  19%,100%{transform:scale(1)}}

@keyframes duiPlus{0%,43%{transform:scale(1)}47%{transform:scale(1.22)}
  52%,100%{transform:scale(1)}}
@keyframes duiRowIn{0%,48%{opacity:0;transform:translateY(5px) scaleY(.45)}
  55%,100%{opacity:1;transform:none}}
@keyframes duiRowFlash{0%,52%{fill:#EFEDFB}58%{fill:#FBD8CB}68%,100%{fill:#EFEDFB}}

@keyframes duiShift{0%,80%{transform:translateY(-8px)}87%,100%{transform:none}}
@keyframes duiMsgIn{0%,80%{opacity:0;transform:translateY(-7px)}87%,100%{opacity:1;transform:none}}
@keyframes duiBadge{0%,78%{opacity:0;transform:scale(.4)}84%{opacity:1;transform:scale(1.18)}
  89%,96.5%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}

/* vypnuté animace → jeden statický, reprezentativní stav */
@media (prefers-reduced-motion:reduce){
  .dashui *{animation:none!important}
  .dashui .dui-s1{opacity:1}
}

.svc h3{font-size:clamp(19px,calc(19px + 8 * var(--k)),27px);line-height:1.22;letter-spacing:-.028em}
.svc p{margin-top:clamp(12px,calc(12px + 4 * var(--k)),16px);font-size:clamp(15px,calc(15px + 4.5 * var(--k)),19.5px);line-height:1.6}
/* Ikony v jednotné dlaždici: stejná plocha, stejná velikost, střed — sada
   působí jako jeden systém. Uvnitř zůstávají jejich animace beze změny. */
.svc .brandmark,.svc .buildui,.svc .cxui,.svc .dashui{display:grid;place-items:center;
  width:100%;height:clamp(96px,calc(96px + 42 * var(--k)),138px);margin-bottom:clamp(22px,calc(22px + 10 * var(--k)),32px);border-radius:clamp(14px,calc(14px + 4 * var(--k)),18px);background:#F3F1FE;
  box-shadow:inset 0 0 0 1px rgba(91,74,216,.07)}
.svc .brandmark svg,.svc .buildui svg,.svc .cxui svg,.svc .dashui svg{width:clamp(108px,calc(108px + 50 * var(--k)),158px);height:clamp(63px,calc(63px + 29 * var(--k)),92px)}

/* ---------- work ---------- */
.work{background:var(--navy);border-radius:var(--r-lg);position:relative;overflow:hidden;margin:0 24px}
/* otisk jako textura celé sekce — velký a oříznutý, ne vinětka */
.work .deco{position:absolute;inset:0;opacity:.19;z-index:0}
.work .deco canvas{width:100%;height:100%;display:block}
.work .wrap{max-width:1440px;display:grid;grid-template-columns:210px minmax(0,1fr);gap:26px;align-items:center;
  padding-top:62px;padding-bottom:62px;position:relative;z-index:2}
.work h2{color:#fff;font-size:clamp(25px,2.9vw,33px)}
.projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.proj{user-select:none;min-width:0;border-radius:16px;overflow:hidden;transition:transform 180ms cubic-bezier(.23,1,.32,1)}
.proj:focus-visible{outline:3px solid #B9AEFF;outline-offset:4px}
.proj-stage{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;perspective:900px}
.proj-laptop{position:absolute;left:4%;top:9%;width:92%;height:82%;transform:translate3d(0,0,0);
  transform-origin:45% 75%;transition:transform 280ms cubic-bezier(.77,0,.175,1),
  filter 180ms cubic-bezier(.23,1,.32,1),opacity 180ms ease}
.proj-screen{position:absolute;inset:0 0 10%;overflow:hidden;border:5px solid #171A2E;
  border-radius:9px 9px 4px 4px;background:#fff;box-shadow:0 15px 24px -12px rgba(0,0,0,.5)}
.proj-viewport{position:absolute;inset:14px 0 0;overflow:hidden;container-type:size}
.proj-viewport--phone{inset:5px;border-radius:8px;background:#fff}
.proj-viewport>img{display:block;width:100%;height:auto;min-height:100%;object-fit:cover;object-position:top;
  transform:translateY(0);transition:transform 450ms cubic-bezier(.23,1,.32,1)}
.proj-browser{position:absolute;z-index:1;top:0;left:0;right:0;height:14px;padding:0 5px;
  display:flex;align-items:center;gap:3px;background:#F8F7FC;border-bottom:1px solid #DFDCEB}
.proj-browser i{width:3px;height:3px;border-radius:50%;background:#B6B0CA}
.proj-browser b{margin-left:4px;color:#77708F;font-size:4px;font-weight:600;white-space:nowrap}
.proj-base{position:absolute;left:-3%;right:-3%;top:calc(90% - 1px);height:clamp(5px,3.5%,9px);
  border-radius:1px 1px 9px 9px/1px 1px 5px 5px;background:linear-gradient(#DADCE3,#B6BAC6);
  box-shadow:inset 0 1px rgba(255,255,255,.65),0 5px 8px -5px rgba(0,0,0,.45)}
.proj-base::after{content:"";position:absolute;top:0;left:43%;width:14%;height:2px;
  border-radius:0 0 3px 3px;background:rgba(86,92,109,.3)}
.proj-phone{position:absolute;z-index:3;right:0;bottom:5%;width:30%;height:82%;padding:5px;
  border-radius:14px;background:#171A2E;box-shadow:0 19px 30px -10px rgba(0,0,0,.58);
  opacity:.45;transform:translate3d(112%,10%,0) rotate(4deg);
  transition:transform 280ms cubic-bezier(.77,0,.175,1),opacity 180ms ease}
.proj-phone>img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:8px;background:#fff}
.proj-phone-notch{position:absolute;z-index:2;top:6px;left:50%;width:32%;height:4px;
  transform:translateX(-50%);border-radius:4px;background:#171A2E}
.proj-sleep{position:absolute;z-index:2;inset:14px 0 0;
  background:radial-gradient(circle at 50% 115%,color-mix(in srgb,var(--proj-accent) 44%,transparent),transparent 54%),#0A0F35;
  clip-path:inset(0 0 0 0);opacity:1;
  transition:clip-path 280ms cubic-bezier(.77,0,.175,1),opacity 180ms ease}
.proj-sleep::before{content:"";position:absolute;left:16%;right:16%;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
  box-shadow:0 8px 28px rgba(255,255,255,.24);transform:scaleX(.32);
  transition:transform 280ms cubic-bezier(.77,0,.175,1),opacity 180ms ease}
.proj-sleep img{position:absolute;z-index:2;left:50%;top:50%;width:64px;height:auto;margin:0;
  filter:brightness(0) invert(1);opacity:.78;transform:translate(-50%,-50%);
  transition:opacity 180ms ease,transform 280ms cubic-bezier(.77,0,.175,1)}
@media (hover:hover) and (pointer:fine){
  .proj:hover .proj-viewport>img{transform:translateY(min(0px,calc(100cqh - 100%)));
    transition:transform var(--proj-duration,14000ms) linear 700ms}
  .proj:hover,.proj:focus-visible{transform:translateY(-4px)}
  .proj:hover .proj-laptop,.proj:focus-visible .proj-laptop{
    transform:translate3d(-7%,2%,0) scale(.86) rotateY(4deg);filter:brightness(.92)}
  .proj:hover .proj-phone,.proj:focus-visible .proj-phone{
    transform:translate3d(-4%,0,0) rotate(-1.5deg);opacity:1}
  .proj:hover .proj-sleep,.proj:focus-visible .proj-sleep{clip-path:inset(0 0 100% 0);opacity:.2}
  .proj:hover .proj-sleep::before,.proj:focus-visible .proj-sleep::before{transform:scaleX(1);opacity:0}
  .proj:hover .proj-sleep img,.proj:focus-visible .proj-sleep img{
    opacity:0;transform:translate(-50%,-70%) scale(.95)}
}
@media (prefers-reduced-motion:reduce){
  .proj:hover .proj-viewport>img{transform:none;transition:none}
  .proj,.proj-laptop,.proj-phone,.proj-sleep,.proj-sleep::before,.proj-sleep img{transition-duration:160ms}
  .proj:hover .proj-laptop,.proj:focus-visible .proj-laptop{
    transform:translate3d(-10%,0,0) scale(.86);filter:brightness(.92)}
  .proj:hover .proj-phone,.proj:focus-visible .proj-phone{
    transform:translate3d(-4%,0,0);opacity:1}
  .proj:hover .proj-sleep,.proj:focus-visible .proj-sleep{clip-path:none;opacity:0}
}
.work-more{display:flex;justify-content:flex-end;margin-top:-24px;position:relative;z-index:5}

/* ---------- process ---------- */
.process{padding:100px 0 96px}
.process .wrap{display:grid;grid-template-columns:240px minmax(0,1fr);gap:40px;align-items:center}
.process h2{font-size:clamp(25px,2.9vw,33px)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;position:relative}
.path{position:absolute;inset:-46px -20px;z-index:0;pointer-events:none;overflow:visible}
.step{position:relative;z-index:2;display:grid;grid-template-columns:88px minmax(0,1fr);gap:16px;align-items:start}
.step .disc{width:88px;height:88px}
/* ============================================================
   Medailonky kroků — jeden pohybový jazyk pro všechny tři.
   Zásada: POUZE transformace, žádné objevování z opacity 0
   (to vypadá jako načítání). Vše přes transition, ne keyframes,
   aby to stejně hezky odjelo i zpátky. Pružina v křivce dělá
   to dosednutí, kvůli kterému působí kompas dobře.
   ============================================================ */
.step .disc svg circle,
.step .disc svg path,
.step .disc .gly{transform-box:fill-box;transform-origin:center}

/* společný podpis: vnější čárkovaný prstenec se pootočí,
   vnitřní se nadechne — drží všechny tři pohromadě */
.step .disc .ring-dash{transition:transform 1.05s cubic-bezier(.22,1.06,.28,1),opacity .5s ease}
.step:hover .disc .ring-dash{transform:rotate(64deg);opacity:.42}
.step .disc .ring-in{transition:transform .62s cubic-bezier(.22,1.14,.28,1),opacity .5s ease}
.step:hover .disc .ring-in{transform:scale(1.075);opacity:.5}

/* 1 — kompas: střelka udělá celé kolo a dosedne zpátky na sever */
.step .disc .gly.compass{transition:transform 1.1s cubic-bezier(.22,1.12,.28,1)}
.step:hover .disc .gly.compass{transform:rotate(360deg)}

/* 2 — systém: stoh se rozevře, ať jsou vrstvy vidět, a zase se sesadí.
   Otevírá se kaskádou, zavírá naráz — proto je prodleva jen na hoveru. */
.step .disc .gly.layers .lay{transition:transform .6s cubic-bezier(.22,1.2,.28,1)}
.step:hover .disc .gly.layers .lay:nth-child(1){transform:translateY(4.5px)}
.step:hover .disc .gly.layers .lay:nth-child(2){transform:translateY(1.2px);transition-delay:.05s}
.step:hover .disc .gly.layers .lay:nth-child(3){transform:translateY(-5px);transition-delay:.1s}

/* 3 — výsledek: fajfka se opře do velikosti a zůstane stát */
.step .disc .gly.check path{transition:transform .62s cubic-bezier(.22,1.38,.28,1)}
.step:hover .disc .gly.check path{transform:scale(1.16)}

@media (prefers-reduced-motion:reduce){
  .step .disc svg circle,.step .disc svg path,.step .disc .gly{transition:none}
}
.step h3{font-size:19px;letter-spacing:-.028em;margin-top:2px}
.step p{margin-top:9px;font-size:13.5px;line-height:1.6}
.step:nth-child(2){margin-top:34px} .step:nth-child(3){margin-top:6px}

/* ---------- CTA + footer ---------- */
/* Patička jde přes celou šířku okna až k bokům, s rovnou horní hranou
   bez zaoblení (7. 10. 2026). */
.tail{background:var(--navy-deep);
  position:relative;overflow:hidden;margin:0}
.tail-main{position:relative;overflow:hidden}
.cta-row{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;
  padding:62px 0 52px;position:relative;z-index:2}
.cta-row h2{color:#fff;font-size:clamp(25px,3vw,35px);line-height:1.12}
.cta-row h2 .o{color:var(--orange)}
.cta-row p{margin-top:16px;color:#A7AECD;font-size:14.5px;max-width:38ch}
.cta-btn{display:flex;align-items:center;gap:16px;margin-top:26px}
.contact-col{display:grid;align-content:center}
.contacts{display:grid;gap:16px}
.contacts a,.contacts div{display:flex;align-items:center;gap:13px;color:#D6DAEB;font-size:14px;font-weight:500}
.contacts i{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.07);
  display:grid;place-items:center;flex:none;transition:background .25s}
.contacts a:hover i{background:var(--orange)}
.social{display:flex;gap:10px}
.social a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.07);
  display:grid;place-items:center;transition:background .25s,transform .25s}
.social a:hover{background:var(--orange);transform:translateY(-2px)}
/* Blok začíná vlasem přes šířku textového sloupce — art zůstane volný. */
.social-block{margin-top:30px;padding-top:24px;max-width:266px;
  border-top:1px solid rgba(255,255,255,.11)}
.social-label{color:#8189A8;font-size:10.5px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;margin-bottom:14px}
/* odkazy na služby nad spodním pruhem patičky */
.foot-nav{border-top:1px solid var(--line-dark);position:relative;z-index:2;background:var(--navy-deep)}
.foot-nav .wrap{display:flex;flex-wrap:wrap;gap:10px 26px;padding-top:20px;padding-bottom:20px;font-size:13.5px;font-weight:600;color:#A9AFCB}
.foot-nav a:hover{color:#fff}
.foot-nav a:focus-visible{outline:2px solid #FFB59F;outline-offset:4px;border-radius:4px}
.foot{border-top:1px solid var(--line-dark);position:relative;z-index:2;background:var(--navy-deep)}
.foot .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;padding-top:22px;padding-bottom:26px}
.foot .brand{color:#fff}
.foot .brand-logo{filter:brightness(0) invert(1)}
.foot .cp{color:#7A82A6;font-size:12.5px}
.foot .links{display:flex;flex-wrap:wrap;gap:22px;margin-left:auto;font-size:12.5px;color:#7A82A6;font-weight:500}
.foot .links a:hover{color:#fff}

@media (max-width:1080px){
  .work .deco{opacity:.23}
  .svc-row{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto repeat(2,1fr);gap:34px 14px}
  .services .head{grid-column:1/-1;padding:0;max-width:none}
  .svc-wash{grid-column:1/-1;grid-row:2/4;left:-8%;width:116%;top:-6%;height:112%}
  .process .wrap,.work .wrap{grid-template-columns:1fr;gap:30px}
  .work .wrap{padding:48px 18px}
  .steps{grid-template-columns:1fr;gap:20px} .step:nth-child(n){margin-top:0} .path{display:none}
}
@media (max-width:860px){
  .work .deco{opacity:.25}
  .projects{grid-template-columns:1fr;gap:20px} .cta-row{grid-template-columns:1fr;gap:34px}
  .proj-stage{aspect-ratio:16/9}
  .proj-laptop{left:4%;top:4%;width:88%;height:91%;transform:translate3d(0,0,0)}
  .proj-phone{right:2%;bottom:4%;width:26%;height:88%;opacity:1;
    transform:translate3d(0,0,0) rotate(-2deg)}
  .proj-sleep{clip-path:inset(0 0 100% 0);opacity:0}
  /* Bez JS se navigace zalomí pod logo — ošklivější, ale dostupná.
     S JS ji nahradí přepínač a tmavý panel. */
  .nav{flex-wrap:wrap;height:auto;min-height:82px;align-content:center}
  .nav ul{order:3;width:100%;margin:0 0 16px;flex-wrap:wrap;gap:14px 20px}
  .hdr-cta{margin-left:auto}
  .js-menu .nav{flex-wrap:nowrap;height:82px;min-height:0}
  .js-menu .nav ul{display:none}
  .js-menu .nav-toggle{display:grid}
  .js-menu .mnav{display:block}
}
@media (max-width:560px){
  /* Logo, tlačítko i přepínač se vedle sebe přestanou vejít. Tlačítko
     z hlavičky mizí, protože v otevřeném menu stojí přes celou šířku. */
  .js-menu .hdr-cta{display:none}
  /* přepínač pak převezme jeho místo u pravého okraje (jinak by stál hned za logem) */
  .js-menu .nav-toggle{margin-left:auto}
  .wrap{padding:0 20px} .work{margin:0 12px} .svc-row{grid-template-columns:1fr}
  .work .wrap{padding:42px 20px}
  .svc-row{grid-template-rows:none} .svc-wash{grid-row:2/6}
  .work .deco{opacity:.27}
  .tail .cta-row{padding:42px 20px 38px;gap:30px}
  .cta-row h2{font-size:27px;line-height:1.08;letter-spacing:-.035em;text-wrap:balance}
  .cta-row p{margin-top:18px;max-width:31ch;font-size:14px;line-height:1.62}
  .cta-btn{margin-top:24px;gap:12px}
  .cta-btn>svg{width:72px;height:auto}
  .contacts{gap:14px}
  .social-block{margin-top:24px;padding-top:20px}
  .social-label{margin-bottom:10px}
  .foot .wrap{display:grid;grid-template-columns:1fr;align-items:start;gap:16px;padding:24px 20px 30px}
  .foot .brand-logo{height:22px}
  .foot .cp{line-height:1.55}
  .foot .links{margin-left:0;gap:10px 18px;line-height:1.5}
  .foot .links a{white-space:nowrap}
}

/* Open service columns, aligned with the quiet homepage portfolio. */
.services .svc-row{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto;gap:48px 48px;align-items:start}
.services .head{grid-column:1/-1;text-align:center;max-width:none;margin:0 0 4px;padding:0}
.services .head h2{font-size:clamp(30px,3.05vw,48px);line-height:1.15;max-width:none}
.services .svc-wash{display:none}
.services .svc{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;transition:none;text-align:center}
.services .svc::after{display:none}
.services .svc:hover{transform:none}
.services .svc .brandmark,.services .svc .buildui,.services .svc .cxui,.services .svc .dashui{width:100%;height:100px;background:transparent;box-shadow:none;border:0;border-radius:0;margin-bottom:24px}
.services .svc h3{font-size:clamp(22px,1.9vw,28px);line-height:1.2;min-height:2.4em}
.services .svc p{max-width:26ch;margin:16px auto 0;font-size:17px;line-height:1.65;color:#5B6081}
@media(max-width:1024px){.services .svc-row{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;gap:40px 32px}.services .head{grid-column:1/-1}}
@media(max-width:520px){.services .svc-row{grid-template-columns:1fr;gap:36px}.services .head h2{text-wrap:balance}.services .svc h3{min-height:0}.services .svc .brandmark,.services .svc .buildui,.services .svc .cxui,.services .svc .dashui{margin-bottom:16px;height:84px}.services .svc p{max-width:30ch}}

/* Compact shared contact footer. */
.tail .cta-row{padding-top:48px;padding-bottom:36px;gap:36px}
.tail .contacts{gap:12px}
.tail .social-block{margin-top:22px;padding-top:18px}
.tail .foot .wrap{padding-top:18px;padding-bottom:18px}
@media(max-width:760px){.tail .cta-row{padding-top:36px;padding-bottom:28px;gap:24px}.tail .social-block{margin-top:18px;padding-top:16px}}

/* Stable footer composition on narrow and wide screens. */
.tail .cta-row{width:100%;max-width:1280px;padding-inline:36px;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.tail .cta-row>div{min-width:0}
.tail .contacts a,.tail .contacts div{overflow-wrap:anywhere}
.tail .foot .wrap{width:100%;max-width:1280px;padding-inline:36px}
@media(max-width:960px){.tail .cta-row{grid-template-columns:minmax(0,1fr);gap:28px}.tail .foot .links{margin-left:0}}
@media(max-width:560px){.tail .cta-row,.tail .foot .wrap{padding-inline:20px}.tail .cta-btn{gap:12px}.tail .cta-btn>svg{width:58px}}

/* One shared footer edge on every template. */
main .tail.site-footer{margin-top:-30px;clip-path:polygon(0 8px,15% 15px,30% 18px,45% 16px,60% 10px,75% 3px,90% 0,100% 4px,100% 100%,0 100%)}