/* Layout: technický list. Ostré hrany, 1px linky, dva fonty (Archivo + Plex Mono).
   Záměrně jeden vzhled: modrá plocha, bílá jako druhá barva. */
:root{
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* modrá jako hlavní plocha, bílá jako druhá barva */
  --bg:#1A3CFF; --surface:#1A3CFF; --fg:#FFFFFF; --muted:#CDD5FF; --hair:#5068FF; --tint:#1533D9;
  --line:#FFFFFF; --accent:#FFFFFF; --on-accent:#1A3CFF; --on-accent-muted:#4F66E8;
  color-scheme:dark;
}

*{box-sizing:border-box;border-radius:0!important}
body{background:var(--bg);color:var(--fg);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding-inline:24px;padding-block:0}
@media (max-width:520px){.wrap{padding-inline:16px}}
a{color:var(--fg);text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:2px solid var(--line);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--sans);text-wrap:balance;margin:0}
p{margin:0}
code{font-family:var(--mono);font-size:.92em}
.label{font:500 11.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* intro */
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:18px;border-bottom:1px solid var(--line)}
.top .mark{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.top nav{display:flex;gap:18px;flex-wrap:wrap}
.top nav a{font:500 12px/1 var(--mono);text-decoration:none;text-transform:uppercase;letter-spacing:.08em}
.top nav a:hover{text-decoration:underline}
.intro{padding-block:56px 60px;display:grid;gap:20px;max-width:860px}
.intro h1{font-size:clamp(38px,6vw,72px);font-weight:800;font-stretch:125%;line-height:.98;letter-spacing:-.03em}
.intro p{font-size:clamp(17px,1.6vw,19px);color:var(--muted);max-width:60ch}

/* project */
.project{display:grid;gap:26px;padding-block:52px;border-top:1px solid var(--line)}
.p-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.p-text{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:20px 40px;align-items:start}
@media (max-width:760px){.p-text{grid-template-columns:minmax(0,1fr)}}
.p-title{display:grid;gap:8px}
.p-title h2{font-size:clamp(30px,3.6vw,44px);font-weight:800;font-stretch:125%;letter-spacing:-.025em;line-height:1}
.p-title .one{font-size:16px;color:var(--muted)}
.p-body{display:grid;gap:16px}
.p-body p{font-size:16.5px;max-width:62ch}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font:500 11.5px/1.4 var(--mono);padding:3px 8px;border:1px solid var(--line);white-space:nowrap}
.web{justify-self:start;margin-top:6px;display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--line);background:var(--accent);color:var(--on-accent);font:500 12.5px/1 var(--mono);text-decoration:none;letter-spacing:.03em}
.web:hover{background:var(--bg);color:var(--fg)}
.links{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.links .web{margin-top:0}
.demo{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--line);color:var(--fg);font:500 12.5px/1 var(--mono);text-decoration:none;letter-spacing:.03em}
.demo:hover{background:var(--accent);color:var(--on-accent)}
.mini .demo{justify-self:start}
.tag.live{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}

/* media */
.shots{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:12px}
.shots .side{display:grid;gap:12px;grid-template-rows:1fr 1fr}
@media (max-width:760px){.shots{grid-template-columns:minmax(0,1fr)}.shots .side{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none}}
.shot{position:relative;display:block;width:100%;max-width:100%;padding:0;margin:0;border:1px solid var(--line);overflow:hidden;background:var(--tint);cursor:zoom-in;font:inherit;color:inherit;text-align:left}
.shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.shot.main{aspect-ratio:16/9}
@media (max-width:760px){.shots .side .shot{aspect-ratio:16/10}}
.shot .cap{position:absolute;left:0;bottom:0;font:500 11px/1.3 var(--mono);padding:5px 9px;background:var(--accent);color:var(--on-accent);text-transform:uppercase;letter-spacing:.06em}
.shot:hover .cap{background:var(--bg);color:var(--fg);outline:1px solid var(--line)}
.video-wrap{position:relative;aspect-ratio:16/9;border:1px solid var(--line);overflow:hidden;background:var(--line)}
.video-wrap video{display:block;width:100%;height:100%;object-fit:contain}
.thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:420px}
.thumbs .shot{aspect-ratio:16/10}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pair .shot{aspect-ratio:16/9}
@media (max-width:640px){.pair{grid-template-columns:minmax(0,1fr)}}

/* diagrams — shared language */
.dia{border:1px solid var(--line);background:var(--surface)}
.dia-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--accent);color:var(--on-accent)}
.dia-head .label{color:var(--on-accent)}
.dia-head b{font:700 14px/1.3 var(--sans);letter-spacing:.01em}
.dia-body{padding:16px;display:grid;gap:12px}
.box{border:1px solid var(--line);padding:12px 14px;display:grid;gap:4px;min-width:0;background:var(--surface)}
.box.fill{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.box.fill .label,.box.fill p{color:var(--on-accent-muted)}
.box.soft{background:var(--tint)}
.box h4{font:700 14.5px/1.3 var(--sans)}
.box .k{font:500 12.5px/1.35 var(--mono)}
.box p{font-size:13px;line-height:1.45;color:var(--muted)}
.layer{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;align-items:start}
@media (max-width:640px){.layer{grid-template-columns:minmax(0,1fr)}}
.layer>.label{padding-top:12px;color:var(--fg)}
.cols-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cols-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:760px){.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.cols-3,.cols-2{grid-template-columns:minmax(0,1fr)}}
.down{display:flex;justify-content:center;align-items:center;gap:8px;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.down::before{content:"";width:1px;height:18px;background:var(--line)}
.strip{border:1px dashed var(--line);padding:10px 14px;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;font-size:13px}
.strip .label{color:var(--fg)}

/* flow diagram (zdroj → transformace → cíl) */
.flow{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1.6fr) 28px minmax(0,1fr);align-items:stretch}
.flow .arrow{display:grid;place-items:center;font:500 18px var(--mono)}
.flow .col{border:1px solid var(--line);display:grid;align-content:start}
.flow .col>.label{padding:10px 14px;border-bottom:1px solid var(--line);color:var(--fg)}
.flow .col.mid>.label{background:var(--accent);color:var(--on-accent)}
.flow ul{list-style:none;margin:0;padding:0}
.flow li{padding:9px 14px;border-bottom:1px solid var(--hair);font-size:13.5px;line-height:1.35}
.flow li:last-child{border-bottom:0}
.flow li b{font-weight:700;display:block}
.flow li span{color:var(--muted);font-size:12.5px}
.flow .foot{padding:10px 14px;border-top:1px solid var(--line);font:400 12px/1.5 var(--mono);color:var(--muted)}
.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px}
.step{border:1px solid var(--line);padding:10px 12px;display:grid;gap:3px;align-content:start}
.step .n{font:500 11px var(--mono);color:var(--muted)}
.step b{font-size:14px}
.step span{font-size:12.5px;color:var(--muted);line-height:1.4}
@media (max-width:900px){
  .flow{grid-template-columns:minmax(0,1fr)}
  .flow .arrow{height:28px}
  .flow .arrow::after{content:"↓"}
  .flow .arrow span{display:none}
}
@media (max-width:460px){.steps{grid-template-columns:minmax(0,1fr)}}

/* infra diagram */
.infra{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:10px}
@media (max-width:760px){.infra{grid-template-columns:minmax(0,1fr)}}
.zone{border:1px dashed var(--line);padding:12px;display:grid;gap:10px;align-content:start}
.zone>.label{color:var(--fg)}
.ops-list{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.ops-list li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:9px 0;border-bottom:1px solid var(--hair);font-size:13.5px}
@media (max-width:520px){.ops-list li{grid-template-columns:minmax(0,1fr);gap:2px}}
.ops-list li .label{color:var(--fg);padding-top:2px}

/* small projects */
.more-head{padding-block:52px 8px;border-top:1px solid var(--line)}
.more-head h2{font-size:clamp(26px,3vw,34px);font-weight:800;font-stretch:125%;letter-spacing:-.02em}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px;padding-block:24px 60px}
@media (max-width:900px){.grid{grid-template-columns:minmax(0,1fr);max-width:620px}}
.mini{display:grid;gap:12px;align-content:start}
.mini .shot.main{aspect-ratio:16/10}
.mini .thumbs{display:none}
.phones{display:flex;justify-content:center;gap:14px;aspect-ratio:16/10;padding:14px;border:1px solid var(--line);background:var(--tint)}
.phones .shot{width:auto;height:100%;aspect-ratio:602/1308}
.mini h3{font-size:22px;font-weight:800;font-stretch:125%;letter-spacing:-.015em}
.mini .meta{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:10px}
.mini .dur{font:500 12px var(--mono)}
.mini p{font-size:15px;color:var(--muted)}

/* closing */
.closing{background:var(--accent);color:var(--on-accent)}
.closing .wrap{padding-block:64px;display:grid;gap:14px}
.closing h2{font-size:clamp(30px,4.4vw,52px);font-weight:800;font-stretch:125%;line-height:1;letter-spacing:-.025em;max-width:18ch}
.closing p{color:var(--on-accent-muted);max-width:56ch}

/* lightbox */
.lb{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.94);display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;padding:calc(16px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px))}
.lb[hidden]{display:none}
.lb-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#FFFFFF;font:500 13px var(--mono)}
.lb-stage{display:grid;place-items:center;min-height:0}
.lb-stage img{max-width:100%;max-height:100%;object-fit:contain;background:#FFFFFF}
.lb-nav{display:flex;justify-content:center;gap:10px;align-items:center}
.lb button{font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:#FFFFFF;background:transparent;border:1px solid #FFFFFF;padding:8px 14px;cursor:pointer}
.lb button:hover{background:#FFFFFF;color:#000000}
#lb-count{color:#BDBDBD;font:500 12px var(--mono)}

/* text sections: o mně, služby, jak pracuju */
.section{display:grid;gap:26px;padding-block:52px;border-top:1px solid var(--line)}
.section .p-body p{font-size:16.5px;max-width:62ch}
.cards4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:980px){.cards4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.cards4{grid-template-columns:minmax(0,1fr)}}
.svc{border:1px solid var(--line);padding:16px;display:grid;gap:8px;align-content:start}
.svc h3{font:700 17px/1.25 var(--sans);font-stretch:110%}
.svc p{font-size:14.5px;color:var(--muted);line-height:1.5}
.svc .n{font:500 11px var(--mono);color:var(--muted)}
.how{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.how li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:8px 40px;padding:16px 0;border-bottom:1px solid var(--hair)}
@media (max-width:760px){.how li{grid-template-columns:minmax(0,1fr)}}
.how b{font:700 17px/1.3 var(--sans)}
.how span{color:var(--muted);font-size:15.5px}
.cta{display:flex;flex-wrap:wrap;gap:8px}
.contact{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.contact a{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--on-accent);color:var(--on-accent);font:500 13.5px/1 var(--mono);text-decoration:none}
.contact a:hover{background:var(--on-accent);color:var(--accent)}
.contact a .k{color:var(--on-accent-muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.contact a:hover .k{color:var(--muted)}
.closing .privacy{font-size:13px;color:var(--on-accent-muted);max-width:70ch;margin-top:18px}

/* ---- B2B: doplňky ve stejném jazyce (1px linky, ostré hrany, mono štítky) ---- */
.intro .lead{font-size:clamp(17px,1.6vw,19px);color:var(--muted);max-width:62ch}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chip{font:500 12.5px/1.35 var(--mono);padding:7px 10px;border:1px dashed var(--line)}
.web.big,.demo.big{padding:12px 16px;font-size:13.5px}
.lead-s{color:var(--muted);font-size:16.5px;max-width:62ch}

/* štítky stavu */
.badges{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tag.dashed{border-style:dashed}

/* případové studie na úvodní stránce */
.case-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px 40px;align-items:start}
@media (max-width:900px){.case-grid{grid-template-columns:minmax(0,1fr)}}
.case-grid .shot.main{aspect-ratio:16/9}
.facts{margin:0;display:grid;border-top:1px solid var(--line)}
.facts>div{display:grid;gap:4px;padding:12px 0;border-bottom:1px solid var(--hair)}
.facts dt{font:500 11.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:0;font-size:15.5px;line-height:1.5}
.facts .res dd{font-weight:600}

/* panel s čísly (vizuál i výsledky) */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.stats{grid-template-columns:minmax(0,1fr)}}
.stats.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:420px){.stats.two{grid-template-columns:minmax(0,1fr)}}
.stat{border:1px solid var(--line);padding:16px;display:grid;gap:6px;align-content:start;min-width:0}
.stat b{font:800 clamp(28px,3.4vw,40px)/1 var(--sans);font-stretch:125%;letter-spacing:-.02em;overflow-wrap:anywhere}
.stat span{font-size:13.5px;line-height:1.4;color:var(--muted)}
.stat.fill{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.stat.fill span{color:var(--on-accent-muted)}

/* kroky spolupráce */
.how .n{display:block;font:500 11px/1.4 var(--mono);color:var(--muted);letter-spacing:.06em;margin-bottom:4px}
.how .note{display:block;margin-top:6px;font:500 12px/1.4 var(--mono);color:var(--fg);letter-spacing:.03em}

/* karty 3 vedle sebe */
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:900px){.cards3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cards3{grid-template-columns:minmax(0,1fr)}}
.svc ul{margin:0;padding:0 0 0 16px;font-size:14px;color:var(--muted);line-height:1.5}
.svc.fill{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.svc.fill p,.svc.fill .n{color:var(--on-accent-muted)}
.svc .amt{font:800 24px/1.15 var(--sans);font-stretch:115%;letter-spacing:-.01em}
.svc .unit{font:500 12px/1.4 var(--mono);color:var(--muted)}
.svc.fill .unit{color:var(--on-accent-muted)}

/* rozbalovací experimenty (nativní details, bez JS) */
details.exp{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:60px}
details.exp>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 0;font:500 12.5px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em}
details.exp>summary::-webkit-details-marker{display:none}
details.exp>summary::after{content:"+";font:500 20px/1 var(--mono)}
details.exp[open]>summary::after{content:"−"}
details.exp>summary:hover{text-decoration:underline}
details.exp>summary:focus-visible{outline:2px solid var(--line);outline-offset:3px}
details.exp .grid{padding-block:8px 32px}
.more-head+.grid{padding-bottom:36px}

/* diagram se čtyřmi sloupci (DESKY) */
.flow.flow-4{grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr)}
@media (max-width:900px){.flow.flow-4{grid-template-columns:minmax(0,1fr)}}

/* stránky případových studií */
.crumb{display:inline-block;font:500 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;text-decoration:none}
.crumb:hover{text-decoration:underline}
.ticks{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.ticks li{position:relative;padding:10px 0 10px 24px;border-bottom:1px solid var(--hair);font-size:15.5px;line-height:1.5}
.ticks li::before{content:"→";position:absolute;left:0;top:10px;font-family:var(--mono);color:var(--muted)}
.closing .web{background:var(--on-accent);color:var(--accent);border-color:var(--on-accent)}
.closing .web:hover{background:var(--accent);color:var(--on-accent)}
.closing .cta{margin-top:8px}
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.gallery.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gallery .shot{aspect-ratio:16/10}
@media (max-width:760px){.gallery,.gallery.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gallery-wrap{display:grid;gap:10px}
.top .mark{text-decoration:none}
.cta .web{margin-top:0}
details.exp .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){details.exp .grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}}
@media (max-width:640px){details.exp .grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.top .mark{line-height:1.4}}