:root{
  --c-red:#E10514; --c-black:#000; --c-white:#fff;
  --c-ground:#FFFFFF; --c-panel:#F7F5F5; --c-heading:#000; --c-text:#3E393B; --c-muted:#625C5E;
  --c-line:#E4E0E1; --c-line-strong:#C9C3C5;
  --c-inv-bg:#000; --c-inv-heading:#fff; --c-inv-text:#EDEBEB; --c-inv-muted:#9A9496; --c-inv-line:rgba(255,255,255,.16);
  --c-hero:#08090a;
  --font-sans:"Outfit",system-ui,sans-serif; --font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --t-label:.75rem; --t-small:.875rem; --t-body:1.0625rem; --t-body-lg:1.1875rem; --t-h4:1.375rem;
  --t-h3:clamp(1.5rem,1.2rem + 1.1vw,1.875rem); --t-h2:clamp(2rem,1.4rem + 2.6vw,3.25rem);
  --t-statement:clamp(2rem,1.1rem + 4vw,4.25rem);
  --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-6:1.5rem; --sp-8:2rem; --sp-12:3rem; --sp-16:4rem; --sp-24:6rem;
  --wrap:78rem; --gutter:clamp(1rem,4vw,3rem); --slash-w:2px; --slash-angle:14deg; --header-h:4.75rem;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-width:none}
html::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--c-ground);color:var(--c-text);font:300 var(--t-body)/1.6 var(--font-sans)}
h1,h2,h3,h4{margin:0;color:var(--c-heading);font-weight:700;letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
h2{font-size:var(--t-h2)} h3{font-size:var(--t-h3)} h4{font-size:var(--t-h4)}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
ul,ol{margin:0;padding:0;list-style:none}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(4rem,9vw,7.5rem)}
.section--dark{background:var(--c-inv-bg);color:var(--c-inv-text)}
.section--dark h2,.section--dark h3,.section--dark h4{color:var(--c-inv-heading)}
.section--panel{background:var(--c-panel)}
.skip{position:absolute;left:var(--gutter);top:-4rem;z-index:100;background:var(--c-black);color:#fff;padding:.75rem 1rem;font-weight:500;transition:top .15s}
.skip:focus{top:var(--sp-4)}
.slash{display:inline-block;width:var(--slash-w);height:1em;background:currentColor;transform:rotate(var(--slash-angle));flex:none}
.eyebrow{display:flex;align-items:center;gap:.7rem;font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted);margin-bottom:var(--sp-6)}
.eyebrow::before{content:"";width:var(--slash-w);height:1.15em;background:var(--c-red);transform:rotate(var(--slash-angle))}
.section--dark .eyebrow{color:var(--c-inv-muted)}
.sec-head{max-width:46rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sec-head p{margin-top:var(--sp-4);font-size:var(--t-body-lg);color:var(--c-muted)}
.section--dark .sec-head p{color:var(--c-inv-muted)}
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.95rem 1.6rem;font-weight:500;font-size:var(--t-small);text-decoration:none;border:1px solid transparent;transition:background .18s,color .18s,border-color .18s;white-space:nowrap}
.btn--primary{background:var(--c-red);color:#fff}
.btn--primary:hover{background:var(--c-white);color:var(--c-black)}
.btn--ghost{border-color:var(--c-line-strong);color:var(--c-heading)}
.btn--ghost:hover{background:var(--c-black);color:#fff;border-color:var(--c-black)}
.section--dark .btn--ghost{border-color:rgba(255,255,255,.3);color:#fff}
.section--dark .btn--ghost:hover{background:#fff;color:#000;border-color:#fff}
.link{display:inline-flex;align-items:center;gap:.5rem;font-weight:500;font-size:var(--t-small);color:var(--c-red);text-decoration:none}
.link::after{content:"";width:var(--slash-w);height:1.05em;background:currentColor;transform:rotate(var(--slash-angle))}
.link:hover{text-decoration:underline;text-underline-offset:.3em}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- header: černý, sticky; na černé smí být červené logo (logomanuál 01.03) ---------- */
.header{position:sticky;top:0;z-index:50;background:var(--c-hero);border-bottom:1px solid var(--c-inv-line);color:#fff}
.header__inner{display:flex;align-items:center;gap:var(--sp-8);height:var(--header-h)}
.logo{display:inline-block;color:var(--c-red);text-decoration:none;line-height:0}
.logo svg{height:1.5rem;width:auto;display:block}
.logo--white{color:#fff}
.nav{display:none;gap:var(--sp-6);margin-left:auto}
.nav a{font-size:var(--t-small);font-weight:500;text-decoration:none;color:#fff;padding-block:.4rem;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--c-red);transition:right .2s ease}
.nav a:hover::after{right:0}
.header__tools{display:flex;align-items:center;gap:var(--sp-4);margin-left:auto}
.lang{display:flex;gap:.35rem;font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.06em;color:var(--c-inv-muted)}
.lang a{text-decoration:none;color:inherit} .lang a[aria-current="true"]{color:#fff}
.header .btn{display:none}
.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:2.75rem;height:2.75rem;padding:0;background:none;border:1px solid rgba(255,255,255,.3);cursor:pointer}
.burger i{display:block;height:2px;background:#fff;margin-inline:auto;width:1.15rem;transition:transform .2s,opacity .15s}
.burger[aria-expanded="true"] i:nth-of-type(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-of-type(2){opacity:0}
.burger[aria-expanded="true"] i:nth-of-type(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav{display:none;position:fixed;inset:var(--header-h) 0 0;background:var(--c-hero);padding-block:var(--sp-6) var(--sp-8);overflow:auto;z-index:49}
.mobile-nav[data-open="true"]{display:block}
.mobile-nav a{display:block;padding:.85rem 0;text-decoration:none;color:#fff;font-size:var(--t-h4);font-weight:500;border-bottom:1px solid var(--c-inv-line)}
.mobile-nav a.btn{display:inline-flex;margin-top:var(--sp-8);border:0;font-size:var(--t-small)}
@media (min-width:60rem){.nav{display:flex}.header .btn{display:inline-flex}.burger,.mobile-nav{display:none!important}.logo svg{height:1.75rem}}

/* ---------- hero T8 ---------- */
.hero{background:var(--c-hero);color:#fff;display:flex;flex-direction:column;min-height:calc(100svh - var(--header-h))} /* hero + pás = přesně první obrazovka, v každém poměru stran */
.hero__stage{position:relative;overflow:hidden;flex:1;min-height:17rem}
.hero__stage canvas,.hero__poster{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero__stage canvas{display:none}
.hero__poster{object-fit:cover;object-position:38% 50%}
.hero--live .hero__stage canvas{display:block} .hero--live .hero__poster{display:none}
.hero__text{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(1.5rem,5vh,3.5rem) var(--gutter) clamp(1.5rem,4.5vh,3rem);pointer-events:none}
.hero__sub{display:flex;align-items:flex-start;gap:.8rem;max-width:72%;font-size:clamp(.8rem,min(.55rem + .6vw,2svh),1.1rem);line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:#C9C3C5;text-shadow:0 1px 12px rgba(0,0,0,.95)}
.hero__sub .slash{height:2.6em;margin-top:.15em;background:var(--c-red)}
.hero h1{color:#fff;font-size:clamp(2.1rem,min(.6rem + 5.1vw,10svh),6.5rem);line-height:1.08;letter-spacing:-.028em;text-shadow:0 2px 24px rgba(0,0,0,.95);max-width:22ch}
.hero h1 .acc{color:#D8D0C2}
:lang(en) .hero h1{font-size:clamp(2rem,min(.5rem + 4.3vw,8.5svh),5.5rem);max-width:28ch} /* anglický titulek je o 6 znaků delší */
.hero__strip{flex:none;border-top:1px solid var(--c-inv-line);display:flex;align-items:center;gap:var(--sp-8);min-height:3.5rem;font-size:var(--t-small);color:var(--c-inv-muted);overflow:hidden}
.hero__strip .facts{flex:none;display:flex;align-items:center;gap:1.1rem;padding-left:var(--gutter);white-space:nowrap}
.facts li{display:flex;align-items:center;gap:.45rem}
.facts b{color:#fff;font-weight:500}
.facts em{font-style:normal}
.facts li+li::before,.hero__strip .facts::after{content:"";width:var(--slash-w);height:1.25em;margin-right:.65rem;background:var(--c-red);transform:rotate(var(--slash-angle))}
.hero__strip .facts::after{margin:0 0 0 .2rem} /* oddělení od běžících klientů */
.marquee{flex:1;min-width:0;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;width:max-content;animation:slide 48s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee ul{display:flex;gap:2.5rem;padding-right:2.5rem;white-space:nowrap}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}.marquee ul+ul{display:none}.marquee{mask-image:none}}
/* pás: pod 78rem (nebo na nízké obrazovce) fakta v jedné řadě, marquee pod nimi — jinak se marquee smrskne na pár písmen */
@media (max-width:78rem),(max-height:26rem){
  .hero__strip{flex-wrap:wrap;gap:.75rem 0;padding-block:var(--sp-4)}
  .hero__strip .facts{width:100%;padding-right:var(--gutter)}
  .hero__strip .facts::after{display:none}
  .hero__strip .marquee{flex-basis:100%}
}
@media (max-width:47.99rem){
  .hero__stage{min-height:16rem}
  .hero__sub{font-size:.72rem;max-width:100%}
  .hero__strip{gap:.5rem 0;padding-block:var(--sp-3)}
  .hero__strip .facts{display:grid;grid-template-columns:1fr 1fr;gap:.35rem .75rem}
  .facts li:nth-child(odd)::before{display:none}
}
/* telefon na šířku (iPhone SE 667×375): celý hero včetně pásu na jednu obrazovku */
@media (max-height:26rem){
  :root{--header-h:3.5rem}
  .hero__stage{min-height:11rem}
  .hero__text{padding-block:1rem}
  .hero__sub{font-size:.7rem}
  .hero h1{font-size:clamp(1.5rem,8svh,6.5rem)}
  .hero__strip{gap:0;padding-block:.4rem}
  .hero__strip .facts{display:flex;flex-wrap:wrap;gap:.3rem .8rem;font-size:.7rem}
  .facts li:nth-child(odd)::before{display:block}
}

/* ---------- postoj ---------- */
.stance{display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
.stance p{font-size:var(--t-body-lg);line-height:1.5;color:var(--c-heading);font-weight:400}
.stance p b{font-weight:700}
.stance p::before{content:"";display:block;width:2.6rem;height:2px;background:var(--c-red);margin-bottom:var(--sp-4)}
.stance-foot{margin-top:clamp(2.5rem,5vw,4rem);max-width:60ch;color:var(--c-muted)}

/* ---------- služby ---------- */
.services{display:grid;gap:1px;background:var(--c-line);border:1px solid var(--c-line);grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.service{display:flex;flex-direction:column;gap:var(--sp-3);background:var(--c-ground);padding:clamp(1.25rem,2.5vw,2rem);text-decoration:none;color:inherit;transition:background .2s}
.service:hover{background:var(--c-panel)}
.service__no{font-family:var(--font-mono);font-size:var(--t-label);color:var(--c-red);letter-spacing:.1em}
.service h3{font-size:var(--t-h4)}
.service p{flex:1}
.service__ex{font-size:var(--t-small);color:var(--c-muted);border-top:1px solid var(--c-line);padding-top:var(--sp-3)}
.service__ex b{color:var(--c-heading);font-weight:500}
.two{margin-top:clamp(2.5rem,5vw,4rem);display:grid;gap:var(--sp-6);grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));align-items:start}
.two table{width:100%;border-collapse:collapse;font-size:var(--t-small)}
.two th,.two td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--c-line);vertical-align:top}
.two th{font-weight:500;color:var(--c-heading)} .two thead th{font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--c-muted)}
.new{font-size:var(--t-small)} .new h4{margin-bottom:var(--sp-3)} .new li{display:flex;gap:.7rem;padding-block:.5rem;border-bottom:1px solid var(--c-line)} .new .slash{color:var(--c-red);height:1.1em;margin-top:.25em}

/* ---------- červený panel ---------- */
.statement{background:var(--c-red);color:#fff;padding-block:clamp(3.5rem,8vw,6rem)}
.statement p{font-size:var(--t-statement);font-weight:700;line-height:1.05;letter-spacing:-.025em;max-width:22ch;text-wrap:balance}
.statement footer{margin-top:var(--sp-6);font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.wont{margin-top:clamp(2rem,4vw,3rem);display:grid;gap:var(--sp-3);max-width:60ch;font-size:var(--t-body-lg);font-weight:400}
.wont li{display:flex;gap:.7rem;padding-top:var(--sp-3);border-top:1px solid rgba(255,255,255,.35);text-decoration:line-through;text-decoration-thickness:2px}
.wont li::before{content:"";flex:none;width:var(--slash-w);height:1em;margin-top:.35em;background:#fff;transform:rotate(var(--slash-angle))}

/* ---------- důkazy ---------- */
.proof{display:grid;gap:clamp(2rem,4vw,4rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
.nums{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6) var(--sp-4)}
.nums b{display:block;font-size:clamp(2rem,1.2rem + 2.6vw,3.25rem);font-weight:700;color:#fff;letter-spacing:-.03em;line-height:1}
.nums span{font-size:var(--t-small);color:var(--c-inv-muted)}
.quote{border-left:2px solid var(--c-red);padding-left:var(--sp-6);margin:0}
.quote+.quote{margin-top:var(--sp-8)}
.quote blockquote{margin:0;font-size:var(--t-h4);font-weight:300;line-height:1.35;color:#fff}
.quote figcaption{margin-top:var(--sp-3);font-size:var(--t-small);color:var(--c-inv-muted)} .quote b{color:#fff;font-weight:500}
.systems{margin-top:clamp(2.5rem,5vw,4rem);padding-top:var(--sp-6);border-top:1px solid var(--c-inv-line);display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));font-size:var(--t-small);color:var(--c-inv-muted)}
.systems b{color:#fff;font-weight:500}

/* ---------- case studies ---------- */
.cases{display:grid;gap:var(--sp-4);align-items:start;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
.case{display:flex;flex-direction:column;gap:var(--sp-4);padding:clamp(1.25rem,2.5vw,2rem);border:1px solid var(--c-line);text-decoration:none;color:inherit;background:var(--c-ground);transition:border-color .2s,transform .2s}
.case:hover{border-color:var(--c-black);transform:translateY(-2px)}
.case__meta{display:flex;flex-wrap:wrap;gap:.5rem 1rem;font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted)}
.case__meta b{color:var(--c-red);font-weight:500}
.case h3{font-size:var(--t-h4)}
.case__fact{margin-top:auto;border-top:1px solid var(--c-line);padding-top:var(--sp-3);font-size:var(--t-small);color:var(--c-heading);font-weight:500}
.case__img{aspect-ratio:3/2;border:1px solid var(--c-line)} .case__img img{height:auto}
.gallery{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fill,minmax(min(100%,11rem),1fr));margin-top:clamp(2rem,4vw,2.75rem)}
.gallery figure{margin:0}
.gallery .photo{aspect-ratio:4/3;border:1px solid var(--c-line);cursor:pointer}
.gallery .photo--tall{aspect-ratio:1/2}
.gallery .photo img{object-position:top}
.gallery figcaption{margin-top:var(--sp-2);font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.04em;color:var(--c-muted)}

/* ---------- jak pracujeme ---------- */
.how{display:grid;gap:var(--sp-6) var(--sp-8);grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.how li{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-3);padding-top:var(--sp-4);border-top:1px solid var(--c-line)}
.how .n{font-family:var(--font-mono);font-size:var(--t-label);color:var(--c-red);padding-top:.35rem}
.how h4{font-size:var(--t-body-lg);margin-bottom:.35rem}
.how p{font-size:var(--t-small);color:var(--c-muted)}
.models{margin-top:clamp(2.5rem,5vw,4rem);display:flex;flex-wrap:wrap;gap:.6rem;font-size:var(--t-small)}
.models span{border:1px solid var(--c-line-strong);padding:.45rem .8rem}
.models-note{margin-top:var(--sp-4);font-size:var(--t-small);color:var(--c-muted);max-width:60ch}

/* ---------- lidé ---------- */
.team{display:grid;gap:var(--sp-6) var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.member{min-width:0}
.member .photo{aspect-ratio:4/5}
/* všechny fotky č/b; barva a lehký zoom při hoveru nebo kliknutí (.is-on přidává site.js) */
.photo{overflow:hidden;background:var(--c-panel)}
.photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .45s ease,transform .6s ease}
.photo:hover img,.photo:focus-within img,.photo.is-on img,.case:hover .photo img{filter:none;transform:scale(1.02)}
.member h3{font-size:var(--t-body-lg);margin-top:var(--sp-4)}
.member .motto{font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.04em;color:var(--c-red);margin-top:.2rem}
.member .bio{list-style:none;margin-top:.6rem;font-size:var(--t-small);color:var(--c-heading)} .member .bio li{display:flex;gap:.6rem;padding-block:.2rem} .member .bio li::before{content:"";flex:none;width:var(--slash-w);height:1em;margin-top:.25em;background:var(--c-red);transform:rotate(var(--slash-angle))}
.team-more{margin-top:clamp(2rem,4vw,3rem)}
.team-more summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.6rem;font-weight:500;font-size:var(--t-small);color:var(--c-red)}
.team-more summary::-webkit-details-marker{display:none}
.team-more summary::after{content:"";width:var(--slash-w);height:1.05em;background:currentColor;transform:rotate(var(--slash-angle))}
.team-more[open] summary{margin-bottom:var(--sp-8)}
.team-more[open] summary .when-closed,.team-more:not([open]) summary .when-open{display:none}
.team-foot{margin-top:clamp(2.5rem,5vw,4rem);max-width:56ch;color:var(--c-muted);font-size:var(--t-small)}

/* ---------- CTA + patička ---------- */
.cta h2{max-width:20ch}
.cta p{margin-top:var(--sp-6);max-width:48ch;color:var(--c-inv-muted)}
.cta .btns{margin-top:var(--sp-8);display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.footer{background:var(--c-inv-bg);color:var(--c-inv-text);border-top:1px solid var(--c-inv-line);padding-block:clamp(3rem,6vw,5rem) var(--sp-8)}
.footer__top{display:grid;gap:var(--sp-8);grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))}
.footer__top>div:first-child{grid-column:1/-1}
@media (min-width:60rem){.footer__top{grid-template-columns:2fr 1fr 1fr 1fr 1fr}.footer__top>div:first-child{grid-column:auto}}
.footer h3{color:#fff;font-size:var(--t-small);font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin-bottom:var(--sp-4)}
.footer li{font-size:var(--t-small);color:var(--c-inv-muted);padding-block:.3rem}
.footer a{color:#fff;text-decoration:none} .footer a:hover{color:var(--c-red)}
.footer__claim{margin-top:var(--sp-6);font-size:var(--t-h4);font-weight:700;color:#fff;max-width:18ch;line-height:1.2}
.footer__legal{margin-top:clamp(2.5rem,5vw,4rem);padding-top:var(--sp-6);border-top:1px solid var(--c-inv-line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-4);font-size:var(--t-small);color:var(--c-inv-muted)}
.footer__joke{display:flex;gap:.7rem;align-items:flex-start} .footer__joke .slash{color:var(--c-red);height:1.1em;margin-top:.3em}