/* purplemon · web 28. 10. 2026 (obsah-webu-seo.md). Navazuje na base.css + hifi.css. Jen černobíle. */
@font-face{font-family:"PM Outfit";src:url(fonts/Outfit-Variable.ttf) format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:"PM Icons";src:url(fonts/MaterialSymbolsRounded-site.woff2) format("woff2");font-weight:300;font-display:block}
:root{--f-head:"Objektiv Mk1","PM Outfit","PM Head Fallback",system-ui,sans-serif;--w-head:700}
.ico{font-family:"PM Icons","Material Symbols Rounded";font-variation-settings:normal}
html,body{overflow-x:clip}
.hifi main a{-webkit-tap-highlight-color:rgba(255,255,255,.12)}
/* drobečky */
.crumbs{font-size:var(--t-small);color:var(--fg3);margin-bottom:var(--s6)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"›";margin-right:6px;color:var(--fg3)}
.crumbs a{color:var(--fg2);text-decoration:none}.crumbs a:hover{color:var(--fg);text-decoration:underline}
.crumbs [aria-current]{color:var(--fg2)}
.sec-sub{padding-top:var(--s9);padding-bottom:var(--s9)}
.hero-ico .ico{font-size:32px;color:var(--fg);margin-bottom:var(--s5)}
.page-h{max-width:18ch}
.h2s{font-size:var(--t-h2);line-height:var(--lh-h2);margin-bottom:var(--s6);max-width:22ch}
.lead-m{max-width:62ch;color:var(--fg2)}
.sec-links{margin-top:var(--s7);display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6)}
/* Naši zákazníci: nízký pruh, nekonečný marquee (1 skutečná sada + 3 aria-hidden kopie, posun o 1/4 dráhy = 1 sada) */
.sec-logos{padding-top:var(--s7);padding-bottom:var(--s7)}
.logos-label{margin:0 0 var(--s5);font-family:var(--f-body);font-weight:500;font-size:var(--t-label);line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:var(--fg3)}
.marquee{--mq-gap:88px;--mq-dur:32s;position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.marquee-track{display:flex;width:max-content;animation:mq-scroll var(--mq-dur) linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-set{display:flex;align-items:center;flex:none;gap:var(--mq-gap);padding-right:var(--mq-gap);margin:0;list-style:none}
.marquee-set li{flex:none;display:flex;align-items:center;height:52px}
.marquee-set img{display:block;width:auto;max-width:none;opacity:.7;transition:opacity .25s ease}
.marquee-set li:hover img{opacity:1}
.mq-bvv img{height:48px}.mq-urbis img{height:30px}.mq-mpo img{height:44px}.mq-big-shock img{height:40px}.mq-yourbox img{height:24px}
@keyframes mq-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-25%,0,0)}}
@media (max-width:767px){.marquee{--mq-gap:56px;--mq-dur:24s;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%)}
  .mq-bvv img{height:42px}.mq-urbis img{height:26px}.mq-mpo img{height:38px}.mq-big-shock img{height:34px}.mq-yourbox img{height:20px}}
@media (prefers-reduced-motion:reduce){.marquee{-webkit-mask-image:none;mask-image:none;overflow:visible}
  .marquee-track{animation:none;width:auto;transform:none}
  .marquee-dup{display:none}
  .marquee-set{flex:1 1 auto;flex-wrap:wrap;justify-content:center;gap:var(--s6) var(--s7);padding-right:0}}
/* pilíře 3 */
.pil3 li{grid-column:span 4;border-top:1px solid var(--line2);padding-top:var(--s5)}
.pil3 .h3{margin:var(--s4) 0 var(--s3)}
@media (max-width:1199px){.pil3{row-gap:var(--s7)}.pil3 li{grid-column:span 8}}
@media (max-width:767px){.pil3 li{grid-column:span 4}}
/* kroky 2–4 */
.steps3{margin-top:var(--s7);row-gap:var(--s6)}
.steps3 li{grid-column:span 4;border-top:1px solid var(--line2);padding-top:var(--s5)}
.steps3 strong{display:block;font-family:var(--f-head);font-weight:var(--w-head);font-size:var(--t-h3);line-height:1.25;margin:var(--s3) 0 var(--s2)}
@media (max-width:1199px){.steps3 li{grid-column:span 8}}
@media (max-width:767px){.steps3 li{grid-column:span 4}}
.step1-h{font-family:var(--f-body);font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--fg3);margin-bottom:var(--s4);font-weight:500}
.path .link{margin-top:var(--s2);align-self:flex-start}
.path > p.path-txt{margin-bottom:var(--s3)}
.path .btn{margin-top:var(--s6);align-self:flex-start}
@media (max-width:767px){.path .btn{align-self:stretch}.path .h2{font-size:26px}}
.price-line{font-size:var(--t-lead);line-height:var(--lh-lead);color:var(--fg);max-width:60ch}
.price-line + p{margin-top:var(--s4)}
/* tabulka co řešíte */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ct{width:100%;border-collapse:collapse;border-top:1px solid var(--line2)}
.ct th{text-align:left;font-weight:500;font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--fg3);padding:var(--s4) var(--s4) var(--s4) 0;border-bottom:1px solid var(--line)}
.ct td{padding:var(--s5) var(--s4) var(--s5) 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--fg2)}
.ct td:first-child{width:40%}
.ct td strong{color:var(--fg)}
.ct a{color:var(--fg);text-underline-offset:4px;text-decoration-color:var(--line2)}
@media (max-width:767px){
 .ct thead{display:none}.ct,.ct tbody,.ct tr,.ct td{display:block;width:100%!important}
 .ct tr{padding:var(--s4) 0;border-bottom:1px solid var(--line)}
 .ct td{border:0;padding:3px 0}
 .ct td[data-k]::before{content:attr(data-k) ": ";color:var(--fg3);font-size:var(--t-small)}
}
/* balíčky / tier list */
.tiers{row-gap:var(--s5);margin-top:var(--s2);align-items:stretch}
.tier{grid-column:span 4;border:1px solid var(--line);padding:var(--s6);display:flex;flex-direction:column;border-radius:4px}
.tier-rec{border-color:var(--fg);background:var(--surface)}
.tier-top{display:flex;justify-content:space-between;align-items:center;min-height:28px}
.tier-top .ico{font-size:28px;color:var(--fg)}
.tier h3{font-size:30px;line-height:1.1;margin:var(--s5) 0 var(--s3)}
.tier-who{color:var(--fg2);font-size:var(--t-small);margin-bottom:var(--s5)}
.chk li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:var(--t-small);color:var(--fg2);border-top:1px solid var(--line)}
.chk li .ico{font-size:18px;color:var(--fg);margin-top:1px;flex:none}
.chk{margin-bottom:var(--s5)}
.tier-price{font-family:var(--f-head);font-weight:var(--w-head);color:var(--fg);font-size:34px;line-height:1.1;margin-top:auto;padding-top:var(--s4)}
.tier-price small{font-family:var(--f-body);font-weight:400;font-size:var(--t-small);color:var(--fg3);display:block;margin-bottom:2px}
.tier .facts{margin:var(--s4) 0 var(--s6)}
.tier .btn{width:100%}
.under{margin-top:var(--s6);color:var(--fg2);max-width:72ch}
.free{margin-top:var(--s7);border:1px dashed var(--line2);border-radius:4px;padding:var(--s6);display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);align-items:center;justify-content:space-between}
.free p{color:var(--fg);font-size:18px;max-width:46ch}
@media (max-width:1199px){.tier{grid-column:span 8}}
@media (max-width:767px){.tier{grid-column:span 4;padding:var(--s5)}.tier-rec{order:-1}.free{padding:var(--s5)}.free .btn{width:100%}}
/* co je v ceně */
.incl li{grid-column:span 3;border-top:1px solid var(--line2);padding-top:var(--s5)}
.incl .ico{font-size:26px;color:var(--fg)}
.incl strong{display:block;margin:var(--s3) 0 var(--s2)}
.incl p{font-size:var(--t-small)}
@media (max-width:1199px){.incl{row-gap:var(--s6)}.incl li{grid-column:span 4}}
@media (max-width:767px){.incl li{grid-column:span 4}}
/* srovnávací tabulka */
.cmpt{width:100%;border-collapse:collapse;font-size:15px}
.cmpt th,.cmpt td{padding:14px 12px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
.cmpt thead th{color:var(--fg);font-family:var(--f-head);font-weight:var(--w-head);font-size:18px;line-height:1.2;border-bottom:1px solid var(--line2)}
.cmpt tbody th{text-align:left;font-weight:400;color:var(--fg2);padding-left:0}
.cmpt td{color:var(--fg)}
.cmpt .rec{background:var(--surface)}
.cmpt .ico{font-size:20px}
.cmpt .no{color:var(--fg3)}
.cmpt tr.tot th,.cmpt tr.tot td{font-weight:600;color:var(--fg);border-bottom:0}
.cmpt .rec-tag{display:block;font-family:var(--f-body);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg3);font-weight:500;margin-bottom:4px}
@media (max-width:767px){.cmpt{font-size:12.5px}.cmpt th,.cmpt td{padding:10px 4px}.cmpt thead th{font-size:13px}.cmpt tbody th{width:38%}.cmpt .ico{font-size:18px}}
/* menší karty služeb */
.minis{row-gap:var(--s5)}
.mini{grid-column:span 4;border:1px solid var(--line);border-radius:4px;padding:var(--s5);display:flex;flex-direction:column}
.mini .ico{font-size:24px;color:var(--fg)}
.mini h3{font-size:22px;margin:var(--s4) 0 var(--s3)}
.mini .bl li{font-size:var(--t-small)}
.mini-price{margin-top:auto;padding-top:var(--s5);color:var(--fg);font-weight:500}
.mini .link{margin-top:var(--s3)}
@media (max-width:1199px){.mini{grid-column:span 4}}
@media (max-width:767px){.mini{grid-column:span 4}}
/* služby */
.svc-g{row-gap:var(--s8)}
.svc-i{grid-column:span 6;border-top:1px solid var(--line2);padding-top:var(--s5);scroll-margin-top:calc(var(--hdr) + 16px)}
.svc-i .ico{font-size:26px;color:var(--fg)}
.svc-i h3{margin:var(--s4) 0 var(--s3)}
.svc-claim{color:var(--fg);font-size:18px;margin-bottom:var(--s5)}
.svc-i .facts{margin-top:var(--s4)}
.svc-i .facts div{align-items:baseline}
.svc-i .btns{margin-top:var(--s5)}
.pillar-sec + .pillar-sec{margin-top:var(--s9)}
.pillar-sec > .h2{margin-bottom:var(--s6)}
@media (max-width:1199px){.svc-i{grid-column:span 8}}
@media (max-width:767px){.svc-i{grid-column:span 4}}
/* kroky jak pracujeme */
.proc{border-top:1px solid var(--line2)}
.proc-s{padding:var(--s7) 0;border-bottom:1px solid var(--line);row-gap:var(--s4)}
.proc-s .pr-h{grid-column:span 5;display:flex;gap:var(--s4);align-items:flex-start}
.proc-s .pr-h .ico{font-size:28px;color:var(--fg);margin-top:4px}
.proc-s .pr-b{grid-column:7 / span 6;color:var(--fg2)}
.proc-s .pr-b p+p,.proc-s .pr-b ul+p{margin-top:var(--s4)}
.proc-s .pr-b li{padding:var(--s4) 0;border-top:1px solid var(--line)}
.proc-s .pr-b li strong{display:block;margin-bottom:4px}
.proc-s .pr-b .link{margin-top:var(--s3)}
@media (max-width:1199px){.proc-s .pr-h,.proc-s .pr-b{grid-column:span 8}}
@media (max-width:767px){.proc-s .pr-h,.proc-s .pr-b{grid-column:span 4}}
/* FAQ (otevřené H3, odpovědi v HTML) */
.qa{grid-column:6 / span 7}
.qa-side{grid-column:span 4}
.qa details{border-bottom:1px solid var(--line)}
.qa details:first-child{border-top:1px solid var(--line2)}
.qa summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s5);padding:var(--s5) 0;cursor:pointer;min-height:48px}
.qa summary::-webkit-details-marker{display:none}
.qa summary h3{font-family:var(--f-body);font-weight:500;font-size:18px;line-height:1.4;letter-spacing:0;color:var(--fg)}
.qa summary .ico{transition:transform .2s;color:var(--fg2);flex:none}
.qa details[open] summary .ico{transform:rotate(45deg)}
.qa .a{padding:0 var(--s8) var(--s5) 0;color:var(--fg2)}
.qa .a a{color:var(--fg)}
.qa-grp + .qa-grp{margin-top:var(--s9)}
@media (max-width:1199px){.qa,.qa-side{grid-column:span 8}}
@media (max-width:767px){.qa,.qa-side{grid-column:span 4}.qa summary h3{font-size:16px}.qa .a{padding-right:0}}
/* web: 3 cesty */
.paths3 td:last-child{white-space:nowrap;color:var(--fg)}
/* kontakt */
.legal{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--line)}
.legal h2{font-family:var(--f-body);font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--fg3);font-weight:500;margin-bottom:var(--s3)}
.legal p{font-size:var(--t-small);color:var(--fg2);line-height:1.6}
.k-where{margin-top:var(--s5);font-size:var(--t-small);color:var(--fg2)}
.hint{display:none}
.hint.on{display:flex;gap:10px;align-items:flex-start}
.hint .dot-line{margin-top:7px}
.radios5{grid-template-columns:1fr}
.f-opt[hidden]{display:none}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.banner p a{color:var(--fg)}
/* patička */
.ftr-col a{display:inline-block;padding:3px 0}
.ftr-legal{margin-top:var(--s6);color:var(--fg3);font-size:13px;line-height:1.6}
.ftr .ftr-c4{grid-column:span 3}
@media (min-width:1200px){.ftr-top .ftr-brand{grid-column:span 3}.ftr-top .ftr-col{grid-column:span 3}.ftr-top .ftr-col:nth-child(2){grid-column:span 3}.ftr-top .ftr-col:last-child{grid-column:span 3}}
@media (max-width:1199px) and (min-width:768px){.ftr-top .ftr-col,.ftr-top .ftr-col:nth-child(2),.ftr-top .ftr-col:last-child{grid-column:span 4}}
/* 404, zásady */
.prose{max-width:68ch}
.prose p+p,.prose h2+p,.prose p+h2{margin-top:var(--s4)}
.prose h2{font-size:24px;margin-top:var(--s7)}
/* tap targets na mobilu */
@media (max-width:767px){.link{min-height:44px}.crumbs a{display:inline-block;padding:6px 0}.ftr-col a{padding:8px 0}}
.hint.on > span{display:inline-block;flex:none}.hint em{font-style:normal}
@media (max-width:767px){.ftr-bot a{display:inline-block;padding:10px 0}}