/* MGC-WEB — design systém. Světlý moderní web, glassmorphism, indigo identita (mgc.cz). Mobile-first. */

/* Montserrat self-hosted (variabilní 100–900), CSP font-src 'self' */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/montserrat-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:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/montserrat-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;}

:root{
  --brand:#514984; --brand-600:#443c73; --brand-700:#372f5d;
  --bg:#faf8ff; --bg-2:#f1f1fa; --band:#e9e6f5; --ink:#312b3d; --muted:#6b6677;
  --line:#e8e6f1; --white:#fff;
  --brand-050:#faf8ff; --brand-100:#f1f1fa;   /* aliasy pro komponenty vnitřních stránek */
  --glass:rgba(255,255,255,.55);
  --glass-strong:rgba(255,255,255,.72);
  --glass-border:rgba(255,255,255,.7);
  --radius:14px; --radius-sm:8px; /* zaoblené rohy: --radius plochy (karty, dlaždice, panely), --radius-sm drobné prvky (tlačítka, pilulky, pole) */
  --shadow:0 18px 50px rgba(81,73,132,.16);
  --shadow-sm:0 8px 24px rgba(81,73,132,.10);
  --maxw:1180px;
  --font:'Montserrat',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);color:var(--ink);line-height:1.65;
  font-size:clamp(1rem,.97rem + .2vw,1.06rem);overflow-x:hidden;
  background:var(--bg);
  /* Zápatí vždy dole i na krátké stránce: main roztáhne zbytek výšky okna */
  display:flex;flex-direction:column;min-height:100vh;min-height:100svh;
}
img,svg{max-width:100%;height:auto;display:block}
/* GLOBÁLNÍ PRAVIDLO: odkaz = naše fialová + podtržení; na hover podtržení zmizí, žádné jiné efekty */
a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
a:hover{text-decoration:none}
/* Komponentové odkazy (menu, tlačítka, karty, logo, dlaždice) podtržení nemají */
.btn,.mainnav__link,.brand,.skip-link,.card-link,.tile,.home-more,.logo-pill,.filter-btn,.contact-btn,.article-card__img,.article__body h3 a,.article-card__body h3 a{text-decoration:none}
h1,h2,h3{line-height:1.18;color:var(--ink);font-weight:800;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,1.5rem + 3vw,3.6rem)}
h2{font-size:clamp(1.6rem,1.2rem + 1.7vw,2.4rem)}
h3{font-size:1.2rem;font-weight:700}
p{margin:0 0 1rem}
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2rem)}
.section{padding-block:clamp(3.5rem,7vw,6rem);position:relative}
/* Střídavé pruhy pozadí: světlá ↔ trochu tmavší indigo */
.section--band{background:var(--band)}
.section--tint{background:var(--bg-2)}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);margin:0 0 .9rem}
/* PRAVIDLO: název sekce (.eyebrow) má za posledním znakem blikající kurzor (příkazová řádka). Hero ho nemá. */
@keyframes caret-blink{0%,100%{opacity:1}50%{opacity:0}}
.eyebrow::after{content:"";display:inline-block;width:.45em;height:2px;margin-left:.22em;vertical-align:-.04em;background:currentColor;animation:caret-blink 1.5s step-end infinite}
.hero .eyebrow::after{display:none}
.lead{font-size:1.12rem;color:var(--muted);max-width:46rem}
.muted{color:var(--muted)}
.accent{color:var(--brand)}
.mt-2{margin-top:1.5rem}
.section--slim{padding-block:clamp(2.4rem,5vw,4rem)}
/* Velký typografický claim (home) */
.statement{font-size:clamp(1.45rem,1rem + 2.4vw,2.5rem);font-weight:800;line-height:1.28;letter-spacing:-.02em;max-width:54rem;margin:0}
.section-head{max-width:48rem;margin-bottom:clamp(1.8rem,3.5vw,2.8rem)}
.section-head--center{margin-inline:auto;text-align:center}
/* PC: podnadpisy (lead) mají vpravo dost místa — nezalamují se dřív, než je opravdu nutné.
   Na mobilu/tabletu zůstává užší míra kvůli čitelnosti. */
@media (min-width:1024px){
  .lead,.section-head{max-width:66rem}
}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--brand);color:#fff;padding:.6rem 1rem;z-index:200}
.skip-link:focus{left:.5rem;top:.5rem;border-radius:8px}

/* Glass utilita */
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}

/* Tlačítka */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.5rem;border-radius:var(--radius-sm);font-weight:600;font-size:1rem;line-height:1;
  border:1.5px solid transparent;cursor:pointer;transition:box-shadow .25s ease,background .25s ease,border-color .25s ease,filter .25s ease;font-family:inherit;text-decoration:none}
/* Hover globálně: stín a ztmavené pozadí (bez posunu) */
.btn:hover{box-shadow:var(--shadow-sm);text-decoration:none}
.btn--primary{background:var(--brand);color:#fff;box-shadow:0 8px 20px rgba(81,73,132,.32)}
.btn--primary:hover{background:var(--brand-600);box-shadow:0 12px 26px rgba(81,73,132,.4);color:#fff}
.btn--ghost{background:rgba(255,255,255,.6);color:var(--brand);border-color:var(--glass-border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn--ghost:hover{border-color:var(--brand);background:rgba(81,73,132,.12)}
/* Podpora — obdélník, gradient z barev SC ikony (tyrkys → navy), bílý telefon + text */
.btn--support{background:linear-gradient(135deg,#2ebcbc 0%,#021f2d 92%);color:#fff;padding:.7rem 1.4rem;border:0;border-radius:var(--radius-sm);font-size:.95rem;white-space:nowrap;box-shadow:0 5px 14px rgba(2,31,45,.28);flex:none}
.btn--support:hover{color:#fff;filter:brightness(.92)}
.btn--support svg{width:18px;height:18px;flex:none}

/* Header / nav — hranatý bílý pruh přes celou šířku, přilepený nahoru */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100}
.site-header__bar{display:flex;width:100%;align-items:center;gap:1.3rem;
  padding:.55rem clamp(1rem,4vw,2rem);
  background:var(--white);
  border-bottom:1px solid var(--line);transition:box-shadow .3s ease}
.site-header.is-scrolled .site-header__bar{box-shadow:0 6px 18px rgba(81,73,132,.10)}

/* Home: hlavička nad hero průhledná (bílý text/logo, jemný tmavý scrim); po projetí hero přejde
   v bílý pruh RYCHLÝM PLYNULÝM přechodem (ne skokem, ale ani vázaně na míru scrollu — jen se
   překlopí stav .is-solid a barvy se prolnou za ~0.3 s). Stav přepíná main.js. Scoped na html.js:
   bez JS zůstává bílý pruh jako na ostatních stránkách. */
.js .is-home .site-header__bar{background:transparent;border-bottom-color:transparent;transition:background .3s ease,border-bottom-color .3s ease,box-shadow .3s ease}
.js .is-home .site-header::before{content:"";position:absolute;top:0;left:0;right:0;height:calc(100% + 5rem);
  background:linear-gradient(to bottom,rgba(22,17,43,.5),rgba(22,17,43,.22) 55%,transparent);z-index:-1;pointer-events:none;transition:opacity .3s ease}
.js .is-home .site-header.is-solid .site-header__bar{background:var(--white);border-bottom-color:var(--line)}
.js .is-home .site-header.is-solid::before{opacity:0}
.js .is-home .site-header.is-scrolled:not(.is-solid) .site-header__bar{box-shadow:none}
/* Logo: bílé nad hero, tmavé v bílém pruhu i při otevřeném mobilním menu */
.brand__logo{transition:filter .3s ease}
.js .is-home .site-header:not(.is-solid) .brand__logo{filter:brightness(0) invert(1)}
.js .is-home.nav-locked .site-header .brand__logo{filter:none}
/* Desktopové položky menu: bílé nad hero, tmavá (výchozí barva) v bílém pruhu */
@media (min-width:1024px){
  .js .is-home .site-header:not(.is-solid) .mainnav__link{color:#fff}
  .js .is-home .site-header:not(.is-solid) .mainnav__link:hover,
  .js .is-home .site-header:not(.is-solid) .mainnav__link:focus-visible{color:#fff}
  .js .is-home .site-header:not(.is-solid) .mainnav__link::after{background:#fff}
}
/* Mobil: tečky hamburgeru bílé nad hero (při otevřeném menu zpět tmavé nad bílým překryvem) */
@media (max-width:1023px){
  .js .is-home .site-header:not(.is-solid) .nav-toggle[aria-expanded="false"] .nav-toggle__dot{background:#fff}
}

/* Desktop: logo vlevo, menu + Podpora zarovnané doprava */
@media (min-width:1024px){
  .mainnav{margin-left:auto}
  .support--bar{font-size:1rem;margin-left:1.6rem}
  .support--menu{display:none}
}

/* Logo MGC */
.brand{display:inline-flex;align-items:center;flex:none}
.brand__logo{height:66px;width:auto;display:block}

/* Navigace */
.mainnav{display:flex;align-items:center;gap:.2rem;flex:none}
.mainnav__list{list-style:none;display:flex;gap:.7rem;margin:0;padding:0}
.mainnav__link{display:block;position:relative;padding:.55rem .55rem;color:var(--ink);font-weight:600;font-size:.95rem;white-space:nowrap;--ul-inset:.55rem;transition:color .3s ease}
/* Podtržení: linka pod textem; na hover/aktivní se rozvine zleva */
.mainnav__link::after{content:"";position:absolute;left:var(--ul-inset);right:var(--ul-inset);bottom:.02rem;height:2px;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .25s ease,background .3s ease}
.mainnav__link:hover,.mainnav__link:focus-visible{color:var(--brand)}
.mainnav__link:hover::after,.mainnav__link:focus-visible::after,.mainnav__link.is-active::after{transform:scaleX(1)}
/* Otevřená stránka = vždy fialová + trvale podtržená */
.mainnav__link.is-active{color:var(--brand);font-weight:700}

/* Hamburger = 3 tečky → křížek */
.nav-toggle{display:none;position:relative;z-index:110;width:44px;height:44px;border:0;border-radius:0;background:transparent;cursor:pointer;padding:0;flex:none;margin-left:auto;align-items:center;justify-content:center}
.nav-toggle__dots{position:relative;width:24px;height:24px}
.nav-toggle__dot{position:absolute;top:50%;width:6px;height:6px;background:var(--ink);border-radius:50%;transform:translate(-50%,-50%);
  transition:transform .26s ease,width .24s ease,height .24s ease,border-radius .24s ease,left .26s ease .24s,opacity .2s ease .3s}
.nav-toggle__dot--l{left:18%}
.nav-toggle__dot--m{left:50%}
.nav-toggle__dot--r{left:82%}
.nav-toggle[aria-expanded="true"] .nav-toggle__dot{transition:left .26s ease,transform .26s ease .24s,width .24s ease .24s,height .24s ease .24s,border-radius .24s ease .24s,opacity .2s ease}
.nav-toggle[aria-expanded="true"] .nav-toggle__dot--m{opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__dot--l{left:50%;width:26px;height:3px;border-radius:2px;transform:translate(-50%,-50%) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__dot--r{left:50%;width:26px;height:3px;border-radius:2px;transform:translate(-50%,-50%) rotate(-45deg)}

@media (max-width:1023px){
  .nav-toggle{display:inline-flex}
  .brand__logo{height:70px}
  .brand{position:relative;z-index:110}
  .site-header__bar{padding:.5rem clamp(1rem,4vw,1.25rem)}
  /* Podpora se na mobilu přesouvá DO menu (na konec) */
  .support--bar{display:none}
  .support--menu{margin-top:.7rem;padding:.65rem 1.7rem;font-size:1.05rem}
  /* Mobilní menu: přes celou stránku, plné bílé pozadí, položky vycentrované */
  .mainnav{position:fixed;inset:0;z-index:100;margin-left:0;flex-direction:column;justify-content:center;gap:1rem;
    background:var(--white);
    opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
  .mainnav.is-open{opacity:1;visibility:visible}
  .mainnav__list{flex-direction:column;text-align:center;gap:.45rem}
  /* Jemnější položky: menší a lehčí písmo (velké tučné působilo hrubě), aktivní jen o stupeň výš */
  .mainnav__link{font-size:1.2rem;font-weight:500;letter-spacing:.01em;padding:.5rem 1rem;--ul-inset:1rem}
  .mainnav__link.is-active{font-weight:600}
  .mainnav__link::after{bottom:.15rem}
}
body.nav-locked{overflow:hidden}

/* Obsah pod fixní hlavičkou (na home je hero přes celou plochu, proto bez odsazení) */
main{padding-top:0;flex:1 0 auto}
body:not(.is-home) main{padding-top:72px}
@media (max-width:1023px){ body:not(.is-home) main{padding-top:78px} }

/* Hero — celoplošné animované pozadí bez fotek, střídají se jen nadpisy. */
.hero{position:relative;isolation:isolate;height:100vh;height:100svh;min-height:560px;display:flex;align-items:center;overflow:hidden;color:#fff}
/* Pozadí hero = pozadí úvodní animace (assets/css/intro.css): indigo gradient a velký slabý hexagon,
   který velmi pomalu pluje a odráží se od hran (osa X a Y s různou délkou). */
.hero__media{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 42%,#5e558f 0%,var(--brand-700) 55%,#1c1733 100%)}
.hero__media::before{content:"";position:absolute;inset:0;
  background:url('../img/hex-white.webp') 0 0/120vmax 120vmax no-repeat;
  opacity:.05;animation:hero-drift-x 47s linear infinite alternate,hero-drift-y 31s linear infinite alternate}
@keyframes hero-drift-x{from{background-position-x:0%}to{background-position-x:100%}}
@keyframes hero-drift-y{from{background-position-y:0%}to{background-position-y:100%}}
.hero__inner{position:relative;z-index:2;max-width:46rem}
/* PC: nadpis má vpravo dost místa — nezalamuje se do zbytečně mnoha řádků */
@media (min-width:1024px){.hero__inner{max-width:62rem}}
.hero .eyebrow{color:#d8d2f2}
.hero__title{color:#fff}
/* Nadpisy slideru leží v jedné mřížkové cele (výška = ten vyšší, nic neposkakuje);
   aktivní dojede zprava s malým zpožděním za obrázkem. */
.hero__title{display:grid}
.hero__headline{grid-area:1/1;opacity:0;transform:translateX(2.5rem);
  transition:opacity .45s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.hero__headline.is-active{opacity:1;transform:none;transition:opacity .5s ease .5s,transform .75s cubic-bezier(.22,.61,.36,1) .5s}
/* Nadpisy jsou jednobarevné — obarvování jednotlivých slov se nepoužívá */
.hero__tagline{font-size:clamp(1.2rem,1rem + 1.2vw,1.7rem);font-weight:600;color:#fff;margin:0 0 1.9rem}
.hero__tagline .hl{color:#c4b9f2;font-weight:800}
.hero__tagline .hl-u{border-bottom:3px solid #c4b9f2;padding-bottom:1px}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem}
.hero .btn--ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero .btn--ghost:hover{background:rgba(24,20,45,.42);border-color:#fff;color:#fff}

/* Karty / mřížka */
.grid{display:grid;gap:1.3rem}
.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
@media (min-width:620px){.grid--2{grid-template-columns:1fr 1fr}.grid--4{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.grid--3{grid-template-columns:repeat(3,1fr)}.grid--4{grid-template-columns:repeat(4,1fr)}}

.card{padding:1.6rem;position:relative;overflow:hidden;transition:box-shadow .6s ease,border-color .6s ease}
/* Ohraničení se „rozsvěcí" pozvolna (pomalejší přechod); 1px ring v box-shadow ho opticky zesílí bez posunu layoutu */
.card:not(.card--static):hover{box-shadow:var(--shadow),0 0 0 1px rgba(81,73,132,.5);border-color:rgba(81,73,132,.55)}
.card__icon{width:46px;height:46px;border-radius:var(--radius-sm);display:grid;place-items:center;margin-bottom:1rem;
  background:linear-gradient(135deg,rgba(81,73,132,.14),rgba(81,73,132,.04));color:var(--brand);transition:background .35s ease,color .35s ease}
/* Na hover ikona v opačných barvách — tmavé pozadí, světlé linky (rámeček karty zůstává beze změny) */
.card:hover .card__icon{background:linear-gradient(135deg,var(--brand),var(--brand-700));color:#fff}
/* Statická karta (home „Co umíme", O nás, ceník): ikona trvale v tmavé variantě, karta na hover nereaguje */
.card--static .card__icon{background:linear-gradient(135deg,var(--brand),var(--brand-700));color:#fff}
.card__icon svg{width:24px;height:24px}
/* Ikony karet jako PNG maska — díky background:currentColor dědí barvu i obrácení na hover.
   Zdroje jsou normalizované na jednotný geometrický průměr, takže contain je opticky vyrovná. */
.card__icon .ico{width:26px;height:26px;background:currentColor;
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
/* Bez podpory masky by zbyl plný čtverec v currentColor → radši vykreslit PNG přímo */
@supports not ((mask-image:none) or (-webkit-mask-image:none)){
  .card__icon .ico{background:var(--ico) center/contain no-repeat}
}
.ico--kriz{--ico:url("../img/icons/kriz.png")}
.ico--kladivko{--ico:url("../img/icons/kladivko.png")}
.ico--stit{--ico:url("../img/icons/stit.png")}
.ico--sit{--ico:url("../img/icons/sit.png")}
.ico--osoba{--ico:url("../img/icons/osoba.png")}
.ico--seznam{--ico:url("../img/icons/seznam.png")}
.ico--pocitac{--ico:url("../img/icons/pocitac.png")}
.ico--cloud{--ico:url("../img/icons/cloud.png")}
.ico--dva-lide{--ico:url("../img/icons/dva-lide.png")}
.ico--tym-diskuze{--ico:url("../img/icons/tym-diskuze.png")}
.ico--krabice{--ico:url("../img/icons/krabice.png")}
.card h3{margin:0 0 .4rem}
.card p{color:var(--muted);margin:0;font-size:.96rem}
/* Stretched link — odkaz v nadpisu pokrývá celou kartu (::after přes pozicovaného rodiče .card) */
.card-link{color:inherit}
.card-link::after{content:"";position:absolute;inset:0;z-index:1}
.card-link:hover{color:var(--brand);text-decoration:none}
.card__list{margin:.7rem 0 0;padding-left:1.1rem;color:var(--muted);font-size:.94rem}
.card__list li{margin:.2rem 0}
/* KARTY SLUŽEB — popis se vystřídá konkrétními body: na PC (myš) při hoveru, na dotyku klikem. Ikona a nadpis zůstávají.
   .services-grid drží všechny karty stejně vysoké, aby se při přepnutí nehýbal layout. */
.services-grid{grid-auto-rows:1fr}
.service-card{display:flex;flex-direction:column;cursor:pointer}
/* Popis i body sedí ve stejné celičce gridu → prostor je vždy tak velký jako delší z obou */
.service-card__stack{display:grid;flex:1 1 auto;min-height:0}
/* Přepnutí má stejný pohyb jako přechod na článek (.page-out/.page-in): popis odjede doleva a vybledne (.21s),
   body přijedou zprava PŘES něj (.38s); zavření zrcadlově. Karta má overflow:hidden → nájezd začíná za její hranou. */
.service-card__desc,.service-card__points{grid-area:1/1;transition:opacity .38s cubic-bezier(.2,.7,.3,1),transform .38s cubic-bezier(.2,.7,.3,1),visibility .38s}
.service-card__desc{align-self:center;margin:0;color:var(--muted);font-size:.96rem}   /* text výškově na střed */
.service-card__points{align-self:start;opacity:0;visibility:hidden;transform:translateX(40%)}  /* body od shora, čekají vpravo za hranou */
.service-card.is-open .service-card__desc{opacity:0;visibility:hidden;transform:translateX(-10%);transition-duration:.21s;transition-timing-function:ease-in}
.service-card.is-open .service-card__points{opacity:1;visibility:visible;transform:none}
/* Tlačítko pokrývá celou kartu (klik kdekoli); „+" v rohu je vodítko pro dotyk (na PC s myší skryté), otevřená karta ho překlopí na „×" */
.service-card__toggle{position:absolute;inset:0;z-index:2;width:100%;padding:0;background:none;border:0;cursor:pointer;font:inherit;color:inherit}
.service-card__toggle:focus-visible{outline:2px solid var(--brand);outline-offset:-4px;border-radius:var(--radius)}
.service-card__plus{position:absolute;right:1.1rem;bottom:1rem;width:26px;height:26px;border-radius:var(--radius-sm);
  background:rgba(81,73,132,.1);color:var(--brand);transition:background .28s ease,color .28s ease,transform .28s ease}
.service-card__plus::before,.service-card__plus::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;border-radius:1px;transition:transform .28s ease}
.service-card__plus::before{width:11px;height:2px;transform:translate(-50%,-50%)}
.service-card__plus::after{width:2px;height:11px;transform:translate(-50%,-50%)}
.service-card:hover .service-card__plus,.service-card__toggle:focus-visible .service-card__plus{background:var(--brand);color:#fff}
.service-card.is-open .service-card__plus{background:var(--brand);color:#fff}
.service-card.is-open .service-card__plus::before{transform:translate(-50%,-50%) rotate(45deg)}
.service-card.is-open .service-card__plus::after{transform:translate(-50%,-50%) rotate(45deg)}
/* PC (myš): body se ukáží už při hoveru, odjetím zmizí – klik kartu nepřišpendlí (viz main.js). Dotyk zůstává u kliku. */
@media (hover:hover) and (pointer:fine){
  .service-card:hover .service-card__desc{opacity:0;visibility:hidden;transform:translateX(-10%);transition-duration:.21s;transition-timing-function:ease-in}
  .service-card:hover .service-card__points{opacity:1;visibility:visible;transform:none}
  .service-card:hover .service-card__plus::before,.service-card:hover .service-card__plus::after{transform:translate(-50%,-50%) rotate(45deg)}
  .service-card__plus{display:none}
}
.card[id]{scroll-margin-top:110px} /* kotvy ze home nepodlezou fixní hlavičku */

/* Co umíme – šipka A→Z */
.az{display:inline-flex;align-items:center;gap:.6rem;font-weight:800;color:var(--brand);font-size:1.1rem;margin-top:.4rem}
.az__line{height:2px;width:3rem;background:linear-gradient(90deg,var(--brand),transparent)}

/* Kroky spolupráce (sluzby.php) */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:1.3rem;grid-template-columns:1fr}
@media (min-width:620px){.steps{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.steps{grid-template-columns:repeat(4,1fr)}}
.steps li{padding:1.5rem}
.steps__num{display:block;font-size:1.9rem;font-weight:800;color:var(--brand);letter-spacing:-.02em;margin-bottom:.5rem;font-variant-numeric:tabular-nums}
.steps h3{margin:0 0 .4rem}
.steps p{color:var(--muted);margin:0;font-size:.95rem}

/* Čísla */
.stats{padding:clamp(1.8rem,4vw,2.6rem)}
.stats__grid{display:grid;gap:1.4rem;grid-template-columns:1fr 1fr;text-align:center}
@media (min-width:760px){.stats__grid{grid-template-columns:repeat(4,1fr)}}
.stat__num{font-size:clamp(1.8rem,1.3rem + 1.8vw,2.6rem);font-weight:800;color:var(--brand);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.stat__lbl{color:var(--muted);font-size:.9rem;margin-top:.4rem}

/* Čísla — tmavý pás s černobílou fotkou racku (kabely) a blikajícími LED „živého" prvku */
.stats-photo{isolation:isolate;overflow:hidden;background:#1b1724}
.stats-photo::before{content:"";position:absolute;inset:0;z-index:-1;background:url('../../img/rack1cb.webp') center/cover no-repeat;filter:grayscale(1);opacity:.38}
.stats-photo::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(27,23,36,.4),rgba(27,23,36,.68))}
.stats-photo .stat__num{color:#fff}
.stats-photo .stat__lbl{color:rgba(255,255,255,.78)}
/* Každé číslo ve skleněném rámečku (tmavá varianta glassu na fotce) */
.stats-photo .stats{padding:0}
.stats-photo .stats__grid>div{background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.28);border-radius:var(--radius);padding:1.4rem 1rem}
.led{position:absolute;width:7px;height:7px;border-radius:50%;background:#43e97b;box-shadow:0 0 12px 3px rgba(67,233,123,.7);animation:led-blink 1.5s steps(1) infinite}
.led--1{left:9%;top:32%}
@keyframes led-blink{0%,58%{opacity:1}60%,70%{opacity:.1}72%,100%{opacity:1}}

/* Články — karty na home (glass) */
.article{padding:0;overflow:hidden;position:relative;display:flex;flex-direction:column;transition:box-shadow .28s ease}
.article:hover{box-shadow:var(--shadow)}
.article__img{aspect-ratio:16/9;background:linear-gradient(135deg,var(--brand),var(--brand-700));position:relative;overflow:hidden;display:block}
.article__img img{width:100%;height:100%;object-fit:cover}
.article__img::after{content:"";position:absolute;inset:0;background:radial-gradient(10rem 10rem at 70% 20%,rgba(255,255,255,.25),transparent 60%);pointer-events:none}
.article__body{padding:1.3rem 1.4rem 1.5rem}
.article__meta{font-size:.82rem;color:var(--muted);margin:0 0 .4rem;text-transform:uppercase;letter-spacing:.05em}
.article__body h3{margin:0 0 .5rem}
.article__body h3 a{color:var(--ink)}
.article__body h3 a:hover{color:var(--brand);text-decoration:none}
.article__body p{color:var(--muted);font-size:.94rem;margin:0}

/* Ze světa IT (home) — 2 nejnovější jako dlaždice 4:3, vedle nich (mobil: pod nimi) delší šipka
   doprava s textem pod ní = odkaz na všechny články */
.home-tiles{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:760px){.home-tiles{grid-template-columns:1fr 1fr 10rem}}
.home-more{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;padding:1rem;
  color:var(--brand);font-weight:700;line-height:1.3;text-align:center}
.home-more:hover,.home-more:focus-visible{color:var(--brand-700)}
.home-more__arrow{position:relative;width:5.5rem;height:2px;background:currentColor;transition:width .25s ease,margin .25s ease}
/* Na hover se šipka mírně prodlouží jen doprava — záporný margin drží levý konec na místě */
.home-more:hover .home-more__arrow,.home-more:focus-visible .home-more__arrow{width:6.5rem;margin-right:-1rem}
.home-more__arrow::after{content:"";position:absolute;right:1px;top:50%;width:12px;height:12px;
  border-top:2px solid currentColor;border-right:2px solid currentColor;transform:translateY(-50%) rotate(45deg)}

/* Reference / loga – pilulky; na home jako plynulý marquee pás */
.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.9rem}
/* Okraje pásu: pozvolný fade — pilulky pomalu mizí a na druhé straně se pomalu vynořují */
.logos-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);contain:paint}
/* Posun jde přes translate3d a vlastní kompozitní vrstvu (will-change), aby ho skládal GPU
   a text/loga se při jízdě netrhaly. Dobu určuje --logos-dur podle počtu log (viz index.php). */
.logos-track{display:flex;width:max-content;animation:logos-scroll var(--logos-dur,45s) linear infinite;
  transform:translate3d(0,0,0);will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.logos-set{display:flex;gap:1.8rem;padding-right:1.8rem}
/* Dlaždice zákazníků mají pevnou šířku 18.5rem (v pásu jsou vidět ~3,5)
   a výšku 180px; logo se do ní vejde celé a zůstane uprostřed. Bez bílého podkladu — loga jsou průhledná. */
.logos-marquee .logo-pill--img{width:18.5rem;height:180px;justify-content:center;padding:1.1rem 1.8rem;background:none;border:0}
.logos-marquee .logo-pill--img img{height:auto;max-height:5.2rem;max-width:100%}
.logos-marquee .logo-pill--wide{width:23rem}
/* Zákazník bez loga: v pásu jen název, bez bílé pilulky (jako loga) */
.logos-marquee .logo-pill:not(.logo-pill--img){background:none;border:0}
@keyframes logos-scroll{to{transform:translate3d(-50%,0,0)}}
/* Na mobilu by procentní fade sežral většinu pásu (2× 25 % z ~460 px) a loga by byla pořád
   poloprůhledná — proto se tam okraje měří v px, ne v procentech. */
@media (max-width:640px){
  .logos-marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 2rem,#000 calc(100% - 2rem),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 2rem,#000 calc(100% - 2rem),transparent)}
  /* Plná desktopová výška (180px) by na úzkém displeji ukázala jen jedno logo naráz */
  .logos-marquee .logo-pill--img{height:125px;width:12.5rem;padding:.8rem 1.2rem}
  .logos-marquee .logo-pill--wide{width:15.5rem}
  .logos-marquee .logo-pill--img img{max-height:3.7rem}
  .logos-set{gap:1.2rem;padding-right:1.2rem}
}
/* Málo log (pod 4) na plynulou smyčku nestačí — set je kratší než pás, posun by byl pomalý
   a viditelně trhaný. Pak se loga jen vycentrují bez animace (viz $marqueeOn v index.php). */
.logos-marquee--static{-webkit-mask-image:none;mask-image:none}
.logos-marquee--static .logos-track{animation:none;width:auto;will-change:auto}
.logos-marquee--static .logos-set{flex-wrap:wrap;justify-content:center;width:100%;padding-right:0}
/* Pilulky nejsou klikací (jen loga/názvy) → žádná reakce na hover a kurzor zůstává šipka */
/* Pozadí textové pilulky je čistě bílé (loga zákazníků i technologií stojí bez pilulky, viz výše/níže),
   proto tu není glass ani backdrop-filter — pod neprůhlednou barvou by nic nedělal. */
.logo-pill{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.5rem;border-radius:var(--radius-sm);font-weight:700;color:var(--brand-700);
  background:#fff;border:1px solid var(--glass-border);
  text-decoration:none;cursor:default}
.logo-pill img{max-height:28px;width:auto;object-fit:contain}
/* Pilulka s logem (bez názvu): výška je fixní, logo ji vyplní na maximum bez deformace —
   šířka se dopočítá z poměru stran, u extrémně širokých log se zastaví na max-width. */
.logo-pill--img{height:156px;padding:1.1rem 2.2rem}
.logo-pill--img img{height:100%;max-height:none;width:auto;max-width:26rem;object-fit:contain}
/* Technologie (/o-nas): logo stojí samo, bez bílé pilulky — hrana obrázku = hrana objektu.
   Výšku každého loga dopočítá o-nas.php ze stejné plochy (inline style); 60px je jen záloha,
   když rozměry nejdou zjistit. Šířka se dopočítá z poměru stran. Větší mezery nahrazují zrušené odsazení pilulky.
   Textová varianta (technologie bez loga) si bílou pilulku nechává — bez podkladu by nebyla čitelná. */
.logos--plain{gap:1.6rem 2.4rem;margin-top:clamp(1.2rem,3vw,2.2rem)} /* větší odstup od nadpisu sekce */
.logos--plain .logo-pill--img{height:60px;padding:0;background:none;border:0;border-radius:0}
.logos--plain .logo-pill--img img{max-width:none}

/* Mapa zákazníků (/o-nas, includes/mapa-cr.php) — kolečka kreslí assets/js/mapa-cr.js;
   velikost písma nastavuje JS atributem (roste na úzkém displeji). Statický obrázek — bez hoveru a tooltipů. */
.cz-map{max-width:920px;margin-inline:auto}
/* Úvodní stránka: pás log zákazníků pod mapou */
.cz-map + .logos-marquee{margin-top:clamp(2rem,4vw,3rem)}
.cz-map__svg{display:block;width:100%;height:auto;overflow:visible;color:var(--ink)}
.cz-map__num{font-weight:500;fill:#fff;pointer-events:none}

/* CTA pruh */
.cta-band{padding:clamp(2.2rem,5vw,3.4rem);text-align:center;
  background:linear-gradient(135deg,var(--brand),var(--brand-700));color:#fff;border-radius:var(--radius);position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;inset:0;background:radial-gradient(20rem 20rem at 15% 20%,rgba(255,255,255,.18),transparent 60%);pointer-events:none}
.cta-band>*{position:relative}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.85);max-width:38rem;margin-inline:auto}
.cta-band .btn--primary{background:#fff;color:var(--brand)}
.cta-band .btn--primary:hover{background:var(--bg-2);color:var(--brand-700)}

/* Patička */
/* Zápatí ve firemní barvě, bílé a drobnější písmo (tři sloupce: značka, kariéra, kontakt) */
.site-footer{margin-top:clamp(3rem,6vw,5rem);padding-block:clamp(1.1rem,2vw,1.4rem) .9rem;
  background:var(--brand);color:#fff;font-size:.83rem;line-height:1.6}
.site-footer--flush{margin-top:0}
.site-footer__grid{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media (min-width:680px){.site-footer__grid{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.site-footer__grid{grid-template-columns:1.6fr 1fr 1.3fr}}
/* Logo je tmavé → na barevném pozadí ho přebarvíme na bílé (stejný trik jako v hlavičce na home) */
.site-footer__brand{display:flex;align-items:center;gap:.55rem;margin-bottom:.35rem}
.site-footer__brand img{height:26px;width:auto;filter:brightness(0) invert(1)}
.site-footer__title{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:0 0 .3rem;color:rgba(255,255,255,.72)}
.site-footer p{margin:0 0 .4rem}
.site-footer .muted,.site-footer address{color:rgba(255,255,255,.86)}
.site-footer address{font-style:normal;line-height:1.6}
/* Odkazy v zápatí jsou podtržené, na hover se podtržení schová (obrácený zvyk než v obsahu) */
.site-footer a{color:#fff;text-decoration:underline;text-underline-offset:.18em}
.site-footer a:hover,.site-footer a:focus-visible{text-decoration:none}
.site-footer__links{list-style:none;margin:0;padding:0;line-height:1.6}
.site-footer__bottom{margin-top:2rem;border-top:1px solid var(--line);padding-block:1.3rem;font-size:.88rem;color:var(--muted);text-align:center}

/* Reveal animace — skryto jen když běží JS (.js), jinak je obsah hned vidět */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-in{opacity:1;transform:none}
/* Stagger — karty v mřížce nastupují postupně */
.js .grid>.reveal:nth-child(2),.js .steps>.reveal:nth-child(2){transition-delay:.08s}
.js .grid>.reveal:nth-child(3),.js .steps>.reveal:nth-child(3){transition-delay:.16s}
.js .grid>.reveal:nth-child(4),.js .steps>.reveal:nth-child(4){transition-delay:.24s}
.js .grid>.reveal:nth-child(5){transition-delay:.32s}
.js .grid>.reveal:nth-child(6){transition-delay:.4s}

/* Viditelný focus pro klávesnici */
a:focus-visible,.btn:focus-visible,.filter-btn:focus-visible,.nav-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ===== Komponenty vnitřních stránek (sdílí indigo paletu přes proměnné) ===== */

/* Stránka 404: text vycentrovaný vodorovně i svisle v prostoru mezi hlavičkou a zápatím */
main:has(.notfound){display:flex;flex-direction:column}
.notfound{flex:1 0 auto;display:flex;align-items:center;text-align:center}
.notfound h1{margin-bottom:.3em}
.notfound .lead{margin:0 auto 2.75rem}
/* Tlačítko „Naše služby" jako na home (průhledné s okrajem), jen přebarvené pro světlé pozadí */
.notfound .btn--ghost{background:transparent;border-color:rgba(81,73,132,.55);-webkit-backdrop-filter:none;backdrop-filter:none}

.placeholder-note{border:1px dashed #cfc7e6;border-radius:var(--radius);padding:1.5rem;color:var(--muted);background:var(--bg-2)}

/* Formulář */
.form{display:grid;gap:1rem;max-width:40rem}
.form label{display:block;font-weight:600;margin-bottom:.3rem}
.form input,.form textarea{width:100%;padding:.7rem .9rem;border:1px solid var(--line);border-radius:var(--radius-sm);font:inherit;color:var(--ink);background:#fff}
.form input:focus,.form textarea:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
/* E-mail: lehký červený obrys, dokud hodnota neodpovídá formátu slovo@slovo.slovo (pattern na inputu) */
/* Živá validace: červený rámeček až když je v poli něco nevalidního (prázdné a nedotčené pole
   se nečervená). :user-invalid v moderních prohlížečích, fallback přes :not(:placeholder-shown). */
.form input:invalid:not(:placeholder-shown){border-color:#dc8484;box-shadow:0 0 0 3px rgba(220,132,132,.14)}
.form input:invalid:not(:placeholder-shown):focus{outline-color:#dc8484}
.form input:user-invalid{border-color:#dc8484;box-shadow:0 0 0 3px rgba(220,132,132,.14)}
.form input:user-invalid:focus{outline-color:#dc8484}
.form input::placeholder,.form textarea::placeholder{color:#9c96ad;opacity:1}
.form textarea{min-height:140px;resize:vertical}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* honeypot – lidem skryté */
/* Telefon s pevnou předvolbou +420 před polem */
.phone-row{display:flex}
.phone-row .phone-prefix{display:flex;align-items:center;padding:.7rem .8rem;border:1px solid var(--line);border-right:0;border-radius:var(--radius-sm) 0 0 var(--radius-sm);background:var(--bg-2);color:var(--muted);font-weight:600}
.phone-row input{border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.form-success{background:#e8f5ec;border:1px solid #bfe3c8;color:#1f5c31;border-radius:var(--radius-sm);padding:.9rem 1.1rem}
.form-errors{background:#fbeaea;border:1px solid #eec4c4;color:#8a2020;border-radius:var(--radius-sm);padding:.9rem 1.1rem}
.form-errors ul{margin:.3rem 0 0;padding-left:1.2rem}

/* Seznam článků (vnitřní – „Ze světa IT") */
.card.article-card{padding:0;overflow:hidden}
.article-card__img{display:block}
.article-card__img img{width:100%;height:200px;object-fit:cover}
/* Fallback vizuál karty bez obrázku: indigo gradient + vodoznak hexagonu z loga */
.thumb-fallback{background:linear-gradient(135deg,var(--brand),var(--brand-700));position:relative;display:block}
.thumb-fallback::before{content:"";position:absolute;inset:0;background:url('../img/hex-white.webp') center/34% no-repeat;opacity:.3}
.article-card__img.thumb-fallback{height:200px}
.article-card__body{padding:1.25rem 1.5rem 1.5rem}
.article-card__body h3{margin:.1rem 0 .4rem}
.article-card__body h3 a{color:var(--ink)}
.article-card__body h3 a:hover{color:var(--brand);text-decoration:none}
.article-meta{color:var(--muted);font-size:.85rem;margin:0 0 .3rem}
.article-cat{font-weight:700;color:var(--ink)}

/* Galerie „Ze světa IT" — dva sloupce, dlaždice v pevném poměru 4:3; velikost z administrace (menší / celá šířka) */
.mosaic{display:grid;grid-template-columns:1fr;gap:.5rem}
@media (min-width:620px){.mosaic{grid-template-columns:1fr 1fr}}
/* PRAVIDLO: dlaždice článků (home i „Ze světa IT") na hover NEREAGUJÍ — žádné zvětšení,
   stín ani posun nadpisu. Proto tu nejsou ani transition/will-change. */
/* Dlaždice jsou bez stínu i rámečku — jakákoli hrana na světlém pozadí ruší vytrácení
   mlhové dlaždice do bílé (na mobilu byl slabý rámeček vidět nejvíc). */
.tile{position:relative;z-index:0;display:flex;align-items:flex-end;overflow:hidden;aspect-ratio:4/3;border-radius:var(--radius);color:#fff;
  background:none;box-shadow:none}
/* Fialový podklad má jen dlaždice bez fotky — u dlaždice s fotkou by mohl při zaoblení rohů
   prosvítat jako tenká linka po obvodu (na mobilu s vyšším DPR nejvíc). */
.tile--noimg{background:linear-gradient(135deg,var(--brand),var(--brand-700))}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,25,50,0) 35%,rgba(30,25,50,.78) 100%);pointer-events:none}
.tile--noimg::before{content:"";position:absolute;inset:0;background:url('../img/hex-white.webp') center/40% no-repeat;opacity:.28}
/* Nadpis na tmavším skleněném pruhu od levé hrany. Pevná šířka 80 % pro všechny dlaždice —
   při delším textu pruh roste jen do výšky (zalomením). */
/* Pruh s nadpisem je bez rámečku — světlá 1px linka byla na mobilu vidět jako obtažení článku */
.tile__title{position:relative;z-index:1;margin:0 0 1rem;width:80%;padding:.55rem 1.2rem .55rem 1.3rem;font-size:1.02rem;line-height:1.3;font-weight:700;color:#fff;
  background:rgba(30,25,50,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:0;border-radius:0 var(--radius-sm) var(--radius-sm) 0}
/* Štítek kategorie vlevo nahoře — stejný skleněný pruh od levé hrany jako nadpis dole */
.tile__cat{position:absolute;top:1rem;left:0;z-index:1;max-width:80%;padding:.3rem .9rem .3rem 1.3rem;font-size:.72rem;line-height:1.3;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;
  background:rgba(30,25,50,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.tile--w2{grid-column:1/-1}

/* Filtr obsahu (odkazy na kategorie) */
.filter-bar{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(1.25rem,3vw,2rem)}
.filter-btn{font:inherit;font-weight:600;cursor:pointer;padding:.5rem 1rem;min-height:44px;display:inline-flex;align-items:center;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-sm);line-height:1;transition:.15s ease;text-decoration:none}
.filter-btn:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}
.filter-btn.is-active{background:var(--brand);color:#fff;border-color:var(--brand)}
.is-hidden{display:none !important}

/* Stránkování */
.pagination{display:flex;align-items:center;justify-content:center;gap:.8rem;margin-top:2.2rem;flex-wrap:wrap}
.pagination__info{color:var(--muted);font-size:.9rem}

/* Drobečková navigace */
.breadcrumbs{font-size:.85rem;color:var(--muted);margin-bottom:.6rem}
.breadcrumbs a{color:var(--muted);text-decoration:underline}
.breadcrumbs a:hover{color:var(--brand)}

/* Odkaz zpět na výpis v článku (nahoře i dole identický, textový – ne tlačítko) */
.article-back{margin:1.25rem 0}
.article-back a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.article-back a:hover{color:var(--brand);text-decoration:none}

/* Kontakt — formulář + informační panel (sloupce stejně vysoké → spodky zarovnané) */
.contact-grid{display:grid;gap:2rem}
@media (min-width:900px){.contact-grid{grid-template-columns:1fr 1fr}}
.contact-form-col{min-width:0}
.contact-info{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1.6rem 1.7rem;min-width:0}
.contact-info__list{list-style:none;margin:0 0 1.4rem;padding:0;display:flex;flex-direction:column;gap:1rem}
.contact-info__item{display:flex;flex-direction:column;gap:.15rem;word-break:break-word}
.contact-info__label{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.contact-info__item a{font-weight:600}
/* Telefon + e-mail jako tlačítka s ikonou (PC vedle sebe, mobil zalomí podle šířky) */
.contact-info__actions{flex-direction:row;flex-wrap:wrap;gap:.6rem}
.contact-btn{flex:1 1 8rem;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  white-space:nowrap;padding:.7rem 1rem;border:1.5px solid rgba(81,73,132,.45);border-radius:var(--radius-sm);
  background:rgba(81,73,132,.05);color:var(--brand);font-weight:600;text-decoration:none;
  transition:border-color .2s ease,background .2s ease}
.contact-btn:hover{border-color:var(--brand);background:rgba(81,73,132,.12);text-decoration:none}
.contact-btn::before{content:"";width:1.1em;height:1.1em;flex:0 0 auto;background:currentColor;
  -webkit-mask:center/contain no-repeat var(--ico);mask:center/contain no-repeat var(--ico)}
.contact-btn--tel{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E")}
.contact-btn--mail{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22 6 12 13 2 6'/%3E%3C/svg%3E")}
/* IČO + DIČ vedle sebe ve stejném rámečku jako dřív telefon/e-mail (jen text, bez odkazu) */
.contact-id{flex:1 1 8rem;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  white-space:nowrap;padding:.7rem 1rem;border:1.5px solid rgba(81,73,132,.45);border-radius:var(--radius-sm);
  background:rgba(81,73,132,.05);color:var(--ink);font-weight:600}
.contact-map{width:100%;height:300px;border:0;border-radius:var(--radius);display:block}
/* Desktop: pravý blok končí na spodní hraně textového pole (výšku nastaví main.js), mapa vyplní zbytek */
@media (min-width:900px){
  .contact-info--fit{align-self:start;display:flex;flex-direction:column}
  .contact-info--fit .contact-map{flex:1 1 auto;height:auto;min-height:180px}
}
.cf-turnstile{margin:.2rem 0}
/* Řádek pod zprávou: tlačítko vlevo, captcha vpravo. Když se nevejdou (úzký mobil), wrap-reverse dá captchu nad tlačítko. */
.form-submit{display:flex;flex-wrap:wrap-reverse;align-items:center;justify-content:space-between;gap:1rem}
.form-submit .btn{order:-1}
.contact-info{padding:1.8rem}
.contact-info h2{font-size:1.2rem;margin:0 0 .8rem}
.contact-info address{font-style:normal;line-height:1.8;margin-bottom:1rem}
/* Kontakt: místo bloku „Kde nás najdete" fotka */
.contact-photo{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.contact-photo img{display:block;width:100%;height:100%;object-fit:cover;min-height:300px}

/* Detail článku */
/* Detail článku drží stejnou šířku jako ostatní stránky (.container = --maxw), ne užší sloupec. */
/* Úvod detailu (fotka + nadpis) drží první obrazovku — text článku začíná až po odrolování.
   Odečtená výška pokrývá fixní záhlaví a horní padding sekce; svh kvůli liště prohlížeče na
   mobilu. Na nízkém displeji se min-height neuplatní (blok skončí přirozenou výškou), na velmi
   vysokém okně se zastropuje na 1250 px, ať pod nadpisem nezůstane nesmyslně prázdný pás. */
.article-intro{min-height:min(calc(100vh - 140px),1250px);min-height:min(calc(100svh - 140px),1250px)}
.article-detail h1{margin:.3rem 0 clamp(2rem,4vw,3rem)}
/* Výrazný odstup mezi řádkem „kategorie · datum · klient" a obsahem článku */
.article-detail .article-meta{margin-bottom:clamp(1.8rem,4vw,2.8rem)}
/* Obrázek si drží vlastní poměr stran (žádné bílé pole po stranách jako u object-fit:contain)
   a je menší než dřív; zaoblení stejné jako u náhledů ve výpisu článků (--radius). */
.article-detail__img{display:block;width:auto;max-width:min(100%,620px);height:auto;max-height:360px;
  margin:0 auto 1.5rem;border-radius:var(--radius)}
.article-body{font-size:1.075rem}
.article-body h2{margin:1.6rem 0 .6rem}
.article-body h3{margin:1.4rem 0 .5rem}
.article-body ul,.article-body ol{margin:0 0 1rem 1.25rem}
.article-body img{border-radius:var(--radius-sm);margin:1rem 0;max-width:100%;height:auto}
/* Zarovnání obrázků z editoru (třídy img-left/right/center nastavuje TinyMCE, povoluje sanitize_html) */
.article-body .img-left{float:left;margin:.35rem 1.2rem .8rem 0;max-width:min(50%,420px)}
.article-body .img-right{float:right;margin:.35rem 0 .8rem 1.2rem;max-width:min(50%,420px)}
.article-body .img-center{display:block;margin:1.2rem auto}
.article-body::after{content:"";display:block;clear:both}
.article-body a{text-decoration:underline}
.article-body a:hover{text-decoration:none}
.article-body blockquote{margin:1.2rem 0;padding:.5rem 1.2rem;border-left:4px solid var(--brand);color:var(--muted);background:var(--bg-2)}
.article-body pre{background:var(--brand-100);padding:1rem;border-radius:var(--radius-sm);overflow:auto}
.article-body table{width:100%;border-collapse:collapse;margin:1rem 0;display:block;overflow-x:auto} /* široké tabulky scrollují uvnitř, ne celá stránka */
.article-body th,.article-body td{border:1px solid var(--line);padding:.5rem .7rem;text-align:left}

/* REFERENCE — mřížka obdélníkových dlaždic s logy. Kdo má zpětnou vazbu, je klikací: dlaždice
   se rozšíří na šířku dvou a pod názvem ukáže citaci. Dlaždice = grid, aby tlačítko krylo právě
   plochu s logem (a nepřekrývalo text citace, který má zůstat vybíratelný). */
.ref-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:620px){.ref-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}}
/* Poměr stran drží dlaždici stejně vysokou v obou stavech. Na mobilu je rozvinutá stejně
   široká jako zavinutá, takže platí 16/9 pro oba; ve dvou kolonách je rozvinutá dvakrát
   širší (plus mezera), a 32/9 jí dá prakticky tutéž výšku jako zavinutým vedle sebe. */
.ref-tile{position:relative;display:grid;grid-template-areas:"face" "detail";grid-template-rows:1fr auto;overflow:hidden;aspect-ratio:16/9;
  transition:box-shadow .6s ease,border-color .6s ease}
.ref-tile__face{grid-area:face;position:relative;display:grid;place-items:center;min-height:0;padding:1.4rem 1.6rem}
.ref-tile__logo{max-width:62%;max-height:52%;width:auto;object-fit:contain}
.ref-tile__plain{font-weight:700;font-size:1.08rem;line-height:1.35;text-align:center;color:var(--brand-700)}
/* Popis „co pro klienta děláme" — jeden řádek na tmavém zamlženém pruhu přes spodek dlaždice */
.ref-tile__desc{position:absolute;left:0;right:0;bottom:0;padding:.5rem .95rem;color:#fff;font-size:.85rem;line-height:1.3;text-align:left;
  background:rgba(24,20,45,.72);-webkit-backdrop-filter:blur(8px) saturate(140%);backdrop-filter:blur(8px) saturate(140%);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ref-tile.is-open .ref-tile__desc{display:none}   /* v rozbaleném stavu mluví název a citace */
/* Hover stejný jako u karet služeb: zvednutí a rozsvícený rámeček */
.ref-tile.is-clickable{cursor:pointer}
.ref-tile.is-clickable:hover,.ref-tile.is-clickable:focus-within{
  box-shadow:var(--shadow),0 0 0 1px rgba(81,73,132,.5);border-color:rgba(81,73,132,.55)}
/* Otevřená dlaždice zabere celý řádek; logo ustoupí do pruhu nahoře a uvolní místo textu */
.ref-tile.is-open{grid-column:1/-1;grid-template-rows:auto minmax(0,1fr);aspect-ratio:auto}   /* jeden sloupec: dlaždice stojí sama, tak roste podle textu (jinak by citace scrollovala v ~260 px) */
/* 91/25 (=3,64) místo čistého 32/9: zohledňuje mezeru mezi kolonami, takže rozdíl proti
   výšce zavinuté dlaždice zůstane pod 2,5 px v celém rozsahu šířek. */
@media (min-width:620px){.ref-tile.is-open{aspect-ratio:91/25}}
.ref-tile.is-open,.ref-tile.is-open:hover{border-color:var(--brand);box-shadow:var(--shadow-sm),0 0 0 1px var(--brand)}
.ref-tile.is-open .ref-tile__face{aspect-ratio:auto;place-items:center start;padding:1.5rem 1.7rem 0}
.ref-tile.is-open .ref-tile__logo{max-width:150px;max-height:44px}
.ref-tile.is-open .ref-tile__plain{font-size:1rem;text-align:left}
.ref-tile__detail{grid-area:detail;display:none;min-height:0;overflow:auto;padding:1rem 1.7rem 1.7rem}
.ref-tile.is-open .ref-tile__detail{display:block;animation:refFade .34s ease both}
@keyframes refFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ref-tile__name{margin:0 0 .2rem;font-size:1.15rem;font-weight:800;color:var(--brand-700)}
/* Klik obsluhuje celá dlaždice (viz main.js), tlačítko je jen šipka v rohu pro klávesnici a čtečky.
   Záměrně to NENÍ overlay přes celou plochu – ten by pohltil text citace a nešel by označit. */
.ref-tile__toggle{position:absolute;right:.9rem;top:.8rem;z-index:2;width:26px;height:26px;padding:0;background:none;border:0;cursor:pointer;font:inherit;color:inherit}
.ref-tile__toggle:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--radius-sm)}
.ref-tile__arrow{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);color:var(--brand);background:rgba(81,73,132,.1);font-size:1rem;line-height:1;
  transition:transform .28s ease,background .28s ease,color .28s ease}
.ref-tile.is-clickable:hover .ref-tile__arrow,.ref-tile__toggle:focus-visible .ref-tile__arrow{background:var(--brand);color:#fff}
.ref-tile.is-open .ref-tile__arrow{background:var(--brand);color:#fff;transform:rotate(90deg)}
.ref-quote{margin:0;font-size:1.06rem;line-height:1.7;color:var(--ink);position:relative;padding-top:1.6rem}
.ref-quote::before{content:"\201C";position:absolute;top:-.35rem;left:-.2rem;font-size:3rem;line-height:1;color:var(--brand);opacity:.32;font-family:Georgia,"Times New Roman",serif}
@media (max-width:540px){
  .ref-tile__face{padding:1.1rem 1.2rem}
  .ref-tile.is-open .ref-tile__face{padding:1.2rem 1.3rem 0}
  .ref-tile__detail{padding:.9rem 1.3rem 1.3rem}
}


/* Tým (o nás) — jen vedení: statická karta bez hoveru. Fotka, pod ní fialový pruh
   se jménem a pozicí, dole body specializací. */
/* flex + wrap místo gridu: i neúplný řádek karet zůstane vycentrovaný pod nadpisem
   (flex-basis odpovídá dřívější šířce grid kolony, plný řádek tedy vypadá stejně) */
.team-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1.3rem;max-width:720px;margin-inline:auto}
.team-grid > .team-card{flex:0 1 100%}
@media (min-width:620px){.team-grid > .team-card{flex-basis:calc(50% - .65rem);max-width:349px}}
/* Desktop: tři karty vedle sebe (menší fotky) — mřížka se drží na 960 px, ať karty nenarostou */
@media (min-width:980px){.team-grid{max-width:960px}.team-grid > .team-card{flex-basis:calc(33.333% - .87rem);max-width:306px}}
.team-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
/* Karta je statická — obecný hover karet (rámeček + stín) tu neplatí */
.team-card:hover{box-shadow:var(--shadow-sm);border-color:var(--glass-border)}
.team-card__photo{position:relative;aspect-ratio:3/4;background:linear-gradient(135deg,var(--brand),var(--brand-700));overflow:hidden}
.team-card__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Fialový pruh se jménem a pozicí hned pod fotkou */
.team-card__body{padding:.95rem 1.3rem 1.05rem;background:linear-gradient(135deg,var(--brand),var(--brand-700));color:#fff}
.team-card__name{margin:0;font-size:1.15rem;font-weight:800;color:#fff}
/* Vyšší specificita než .card p (0,1,1) — jinak pozici přebarví šedý --muted */
.team-card__body .team-card__role{margin:.15rem 0 0;font-size:.95rem;color:#fff}
/* Body specializací — větší mezera od jména (fialového pruhu), ať se karta nadechne */
.team-card__specs{list-style:none;margin:1.4rem 0 0;padding:0 1.4rem 1.4rem;display:flex;flex-direction:column;gap:.5rem}
.team-card__specs li{position:relative;padding-left:1.15rem;text-align:left;font-size:.94rem;line-height:1.35;color:var(--muted)}
.team-card__specs li::before{content:"";position:absolute;left:0;top:.45em;width:.45rem;height:.45rem;border-radius:1px;background:var(--brand)}
/* Podnadpis skupiny týmu (Technici / Administrativa) — vycentrovaný nad mřížkou karet */
.team-cat{max-width:720px;margin:clamp(3.2rem,6.5vw,4.5rem) auto clamp(1.4rem,2.8vw,1.85rem);font-size:1.05rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);text-align:center}
@media (min-width:980px){.team-cat{max-width:960px}}
/* Skupiny týmu bez fotek (technici, administrativa) — statické karty: jméno a pod ním
   body specializací (skupinu říká podnadpis). Stejně jako karty vedení bez hoveru. */
.team-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:1.3rem;max-width:720px;margin-inline:auto}
@media (min-width:980px){.team-chips{max-width:960px}}
.team-chip{flex:0 1 100%;padding:1.3rem 1.4rem;text-align:center}
@media (min-width:620px){.team-chip{flex-basis:calc(50% - .65rem);max-width:349px}}
@media (min-width:980px){.team-chip{flex-basis:calc(33.333% - .87rem);max-width:306px}}
.team-chip:hover{box-shadow:var(--shadow-sm);border-color:var(--glass-border)}
.team-chip__name{margin:0;font-size:1.1rem;font-weight:800}
.team-chip__specs{list-style:none;margin:1.1rem 0 0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.team-chip__specs li{position:relative;padding-left:1.15rem;text-align:left;font-size:.94rem;line-height:1.35;color:var(--muted)}
.team-chip__specs li::before{content:"";position:absolute;left:0;top:.45em;width:.45rem;height:.45rem;border-radius:1px;background:var(--brand)}

/* Cenové příklady (sluzby) — orientační balíčky měsíční podpory */
.price-card{display:flex;flex-direction:column;border-color:var(--brand)}
.price-card .card__list{flex:1}
.price-card__price{font-size:1.7rem;font-weight:800;color:var(--brand);letter-spacing:-.02em;margin:.9rem 0 0}
.price-card__per{font-size:.9rem;color:var(--muted);font-weight:600}

/* Přechod na článek — řízený JS (main.js nastaví .page-leave*, boot.js na cílové stránce
   .page-enter* ještě před vykreslením). Animuje se jen <main>, fixní hlavička se nehne.
   Tam: doleva ven / zprava dovnitř. Zpět na výpis: doprava ven / zleva dovnitř. */
.page-leave main{animation:page-out .21s ease-in both}
.page-enter main{animation:page-in .38s cubic-bezier(.2,.7,.3,1) both}
.page-leave-back main{animation:page-out-back .21s ease-in both}
.page-enter-back main{animation:page-in-back .38s cubic-bezier(.2,.7,.3,1) both}
@keyframes page-out{to{transform:translateX(-10%);opacity:0}}
@keyframes page-in{from{transform:translateX(24vw);opacity:0}}
@keyframes page-out-back{to{transform:translateX(10%);opacity:0}}
@keyframes page-in-back{from{transform:translateX(-24vw);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .page-leave main,.page-enter main,.page-leave-back main,.page-enter-back main{animation:none}
  .btn,.card,.article,.logo-pill,.nav-toggle__dot,.mainnav__link,.mainnav__link::after,.strip,.tile,.tile img,.tile__title,.home-more__arrow,.ref-tile,.ref-tile__arrow,.service-card__desc,.service-card__points,.service-card__plus,.hero__headline{transition:none}
  /* Hero nadpisy se nepřepínají (JS je nespustí) → drž první nadpis staticky viditelný; hexagon stojí */
  .hero__media::before{animation:none}
  .hero__headline{opacity:0}
  .hero__headline.is-active{opacity:1;transform:none}
  .ref-tile.is-open .ref-tile__detail{animation:none}
  .eyebrow::after,.led{animation:none}
  .logos-track{animation:none}
  .logos-marquee{-webkit-mask-image:none;mask-image:none}
  .logos-marquee .logos-track{flex-wrap:wrap;justify-content:center}
  html{scroll-behavior:auto}
}