/* Styl Papír (nahrazuje Světlou na homepage) – bez data-theme */
@font-face{font-family:"Geist";src:url(/fonts/geist-var.b537d56a86.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/fonts/geist-mono-400.a970c5aa17.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/fonts/geist-mono-500.198dc5fdec.woff2) format("woff2");font-weight:500;font-display:swap}

.pp-track{display:none}
html:not([data-theme]){
  --bg:#fff;--ink:#101014;--dim:#6C6D78;--soft:#F4F5F8;--line:#E4E5EB;--card:#F4F5F8;--card-alt:#F4F5F8;--card-ink:#101014;--card-alt-ink:#101014;
  --acc:#3F35E8;--a1:#3F35E8;--art1:#4A3AD6;--art2:#4A3AD6;--art3:#4A3AD6;--art-alt:#4A3AD6;--art-alt2:#4A3AD6;
  --f:"Geist",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --pp-mono:"Geist Mono",ui-monospace,Menlo,monospace;--pp-grey2:#5A5B66;--pp-acc-ink:#2F27C9;
}
html:not([data-theme]) body{background:#fff;color:#101014}
html:not([data-theme]) #fx,html:not([data-theme]) .sky{display:none!important}

/* hero */
html:not([data-theme]) .hero{position:relative;z-index:2;padding-bottom:0!important;min-height:0!important}
html:not([data-theme]) .hero h1{font-family:var(--f);font-weight:600;letter-spacing:-.055em;line-height:.98;font-size:clamp(44px,7.4vw,112px);max-width:14ch;margin-left:auto;margin-right:auto;text-wrap:balance}
html:not([data-theme]) .hero h1 .rot,html:not([data-theme]) .hero h1 .rot *{color:var(--pp-grey2)!important;-webkit-text-fill-color:var(--pp-grey2)!important;background:none!important;font-weight:400}
html:not([data-theme]) .hero>p:first-of-type{color:var(--dim);font-size:clamp(16px,1.35vw,19px);max-width:52ch;margin-left:auto;margin-right:auto}
html:not([data-theme]) .hero>p:last-of-type{font-family:var(--pp-mono);font-size:13px!important;opacity:1!important;color:var(--pp-grey2);max-width:62ch!important}
html:not([data-theme]) .pp-track{display:block}

/* sticky vějíř → okno */
.pp-track{position:relative;height:340vh;margin-top:-36vh;font-family:var(--f)}
.pp-stage{position:sticky;top:var(--pp-top,72px);height:calc(100vh - var(--pp-top,72px));min-height:560px;overflow:hidden;
  --W:min(1080px,88vw,calc((100vh - 200px)*1.6));--H:calc(var(--W)/1.6)}
.pp-frame{position:absolute;left:50%;top:calc(50% - 22px);width:var(--W);height:var(--H);transform:translate(-50%,-50%)}
.pp-card{position:absolute;inset:0;border-radius:18px;overflow:hidden;background:#fff;border:1px solid #E4E5EB;
  box-shadow:0 40px 90px -40px rgba(20,20,40,.45);transform-origin:50% 50%;will-change:transform,opacity;
  transform:translate(var(--x,0px),var(--y,0px)) rotate(var(--r,0deg)) scale(var(--k,1));transition:opacity .6s cubic-bezier(.22,1,.36,1)}
.pp-card[data-i="0"]{z-index:4}.pp-card[data-i="1"]{z-index:3}.pp-card[data-i="2"]{z-index:2}.pp-card[data-i="3"]{z-index:1}
.pp-card.off{opacity:0}
.pp-bar{height:7%;display:flex;align-items:center;gap:5px;padding:0 3%;border-bottom:1px solid #E4E5EB;background:#F4F5F8}
.pp-bar u{width:7px;height:7px;border-radius:50%;background:#D5D6DD;text-decoration:none;flex:none}
.pp-bar em{margin:0 auto;font:normal 10px var(--pp-mono);color:#6C6D78;background:#fff;border:1px solid #E4E5EB;border-radius:6px;padding:1px 40px;white-space:nowrap}
.pp-pad{height:93%;position:relative;overflow:hidden}
.pp-pic{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(var(--z,1));transform-origin:50% 40%;will-change:transform}
.pp-s1 .pp-pic{background-image:url(/img/papir-zadani.ac5c1d194b.webp)}
.pp-s2 .pp-pic{background-image:url(/img/papir-navrh.f63c26590a.webp)}
.pp-s3 .pp-pic{background-image:url(/img/papir-letokmen.72a4230989.webp);background-position:left top}
.pp-note{position:absolute;left:64%;width:32%;background:#fff;border:1px solid #E4E5EB;border-radius:10px;padding:10px 12px;font-size:11px;line-height:1.4;color:#101014;box-shadow:0 12px 30px -14px rgba(20,20,40,.35)}
.pp-note b{display:block;font:500 9px var(--pp-mono);letter-spacing:.06em;text-transform:uppercase;color:#3F35E8;margin-bottom:4px}
.pp-s4 .pp-pad{display:grid;grid-template-columns:1fr 1fr;gap:5%;align-items:center;padding:5% 6%}
.pp-stat{border:1px solid #E4E5EB;border-radius:12px;padding:10px 12px;margin:8px 0}
.pp-stat b{display:block;font-size:clamp(16px,2.2vw,26px);letter-spacing:-.03em;color:#101014}
.pp-stat small{font:9px var(--pp-mono);color:#6C6D78;letter-spacing:.05em;text-transform:uppercase}
.pp-stat.ok{background:#EAF6EF;border-color:#D3EBDD}.pp-stat.ok b{color:#1C8A4E}
.pp-check{display:flex;align-items:center;gap:8px;font-size:11px;padding:6px 0;border-bottom:1px solid #E4E5EB;color:#101014}
.pp-check::before{content:"✓";display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#E3F4EA;color:#1C8A4E;font-size:9px;flex:none}
.pp-phone{position:absolute;right:-3%;bottom:-7%;z-index:6;width:min(22%,calc((100vh - 120px)*.45));aspect-ratio:9/19;border-radius:22px;background:#0E0E12;padding:5px;box-shadow:0 30px 60px -20px rgba(20,20,40,.45);opacity:0;transform:translateY(30px);transition:.6s ease}
.pp-phone.on{opacity:1;transform:none}
.pp-phone div{height:100%;border-radius:17px;overflow:hidden;position:relative;background:url(/img/papir-mobil.5591853890.webp) center top/cover}
.pp-cap{position:absolute;left:calc(50% - var(--W)/2 - 36px);bottom:calc(50% + 22px - var(--H)/2 - 30px);width:min(380px,calc(var(--W)*.4));z-index:7;pointer-events:none}
.pp-step{position:absolute;left:0;bottom:0;width:100%;background:#fff;color:#101014;text-align:left;
  border:1px solid #E4E5EB;border-radius:16px;padding:22px 24px;box-shadow:0 1px 2px rgba(20,20,40,.06),0 20px 40px -10px rgba(20,20,40,.12),0 40px 80px -40px rgba(20,20,40,.35);
  opacity:0;transform:translateY(16px);filter:blur(6px);transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1),filter .55s}
.pp-step.on{opacity:1;transform:none;filter:none;pointer-events:auto}
.pp-eye{font:500 12px var(--pp-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--pp-acc-ink)}
.pp-step h3{font-size:clamp(28px,2.8vw,40px);letter-spacing:-.045em;line-height:1;margin:8px 0 10px;font-weight:600}
.pp-step p{margin:0;color:#6C6D78;font-size:15px;line-height:1.55}
.pp-dots{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;gap:8px;align-items:center;opacity:var(--dv,0)}
.pp-dots button{all:unset;cursor:pointer;padding:12px 2px;display:block}
.pp-dots button:focus-visible{outline:3px solid #3F35E8;outline-offset:3px;border-radius:4px}
.pp-dots i{display:block;width:40px;height:4px;border-radius:2px;background:#E4E5EB;overflow:hidden;position:relative;transition:height .2s,background .2s}
.pp-dots button:hover i,.pp-dots button:focus-visible i{height:8px}
.pp-dots button:hover i{background:#D3D1FA}
.pp-dots button[aria-selected="true"] i{height:6px}
.pp-dots i::after{content:"";position:absolute;inset:0;background:#3F35E8;transform:scaleX(var(--p,0));transform-origin:left}
.pp-dots span{font:500 13px var(--pp-mono);color:#101014;margin-left:10px;min-width:12ch}
html:not([data-theme]) .styles{transition:opacity .6s ease}
html:not([data-theme]) .styles.pp-hide{opacity:0!important;pointer-events:none}

@media(max-width:900px){
  .pp-track{height:auto;margin-top:36px}
  .pp-stage{position:relative;top:0;height:auto;min-height:0;overflow:visible;padding:0 16px 8px;display:flex;flex-direction:column}
  .pp-dots{order:2;position:static;transform:none;opacity:1;margin-top:44px;justify-content:flex-start}
  .pp-cap{order:3;position:relative;left:auto;bottom:auto;width:100%;margin-top:14px;display:grid;pointer-events:auto}
  .pp-frame{position:relative;left:auto;top:auto;transform:none;width:100%;height:auto;aspect-ratio:16/10}
  .pp-card{transform:none!important;border-radius:12px;transition:opacity .5s cubic-bezier(.22,1,.36,1),filter .5s}
  .pp-card.off{filter:blur(8px)}
  .pp-step{position:relative;grid-area:1/1;background:none;border:0;box-shadow:none;padding:0;visibility:hidden;transition:opacity .45s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1),filter .45s,visibility 0s .45s}
  .pp-step.on{visibility:visible;transition-delay:0s}
  /* 2026-09-20: Zadání je na mobilu součástí kolotoče, první tečka se ukazuje */
  .pp-dots i{width:44px}
  .pp-dots i::after{transition:none}
  .pp-dots.run button[aria-selected="true"] i::after{animation:ppfill 4s linear forwards}
  .pp-frame.hint .pp-card{animation:ppnudge 1.1s cubic-bezier(.22,1,.36,1) .3s}
  .pp-phone{right:2%;bottom:-8%;width:20%;border-radius:14px;padding:3px}
  .pp-phone div{border-radius:11px}
  .pp-note{font-size:8px;padding:5px 6px;border-radius:6px}.pp-note b{font-size:7px;margin-bottom:2px}
  .pp-stat{padding:5px 7px;margin:4px 0;border-radius:8px}.pp-stat small{font-size:7px}
  .pp-check{font-size:8px;padding:3px 0;gap:4px}.pp-check::before{width:11px;height:11px;font-size:7px}
  .pp-bar em{padding:1px 16px;font-size:8px}
}
@keyframes ppfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ppnudge{0%,100%{translate:0 0}35%{translate:-14px 0}65%{translate:4px 0}}
@media (prefers-reduced-motion:reduce){.pp-card,.pp-step,.pp-phone{transition:none}.pp-dots.run button i::after,.pp-frame.hint .pp-card{animation:none!important}}

/* oprava 17. 9. 2026: pod Papirem se prvkum .up nepridava trida .in a zustavaly neviditelne */
html:not([data-theme]) .up{opacity:1;transform:none}
html:not([data-theme]) .rl{opacity:1;transform:none}

/* 17. 9. 2026: tmava karta pripadove studie prebarvena do Papiru */
html:not([data-theme]) .cs-hp-main{background:#F4F5F8;color:#101014;border:1px solid #E4E5EB}
html:not([data-theme]) .cs-hp-main .cs-eyebrow{color:#6C6D78}
html:not([data-theme]) .cs-hp-main .cs-claim,
html:not([data-theme]) .cs-hp-main .cs-claim b{color:#101014}
html:not([data-theme]) .cs-hp-main .cs-lead{color:#6C6D78}
html:not([data-theme]) .cs-hp-main .cs-link{background:#101014;color:#fff;border-color:#101014}
html:not([data-theme]) .cs-hp-main .cs-link:hover{background:#2F27C9;border-color:#2F27C9}
html:not([data-theme]) .cs-hp-main .cs-link2{color:#101014;border-bottom-color:#C9CAD3}
html:not([data-theme]) .cs-hp-main .cs-link2:hover{color:#2F27C9;border-bottom-color:#2F27C9}

/* 17. 9. 2026: reference bez screenshotu, jen okno prohlizece na proklik (jako v navrhu) */

html:not([data-theme]) #reference .work{display:block;background:#fff;border:1px solid #E4E5EB;border-radius:14px;overflow:hidden;box-shadow:none}
html:not([data-theme]) #reference .work .shot{display:block;margin:0;border:0;border-radius:0;box-shadow:none;background:transparent}
html:not([data-theme]) #reference .work .wbar{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;background:#F4F5F8;border-bottom:1px solid #E4E5EB}
html:not([data-theme]) #reference .work .wurl{margin:0 auto;font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;color:#6C6D78;background:#fff;border:1px solid #E4E5EB;border-radius:999px;padding:2px 12px}
html:not([data-theme]) #reference .work .wscreen{display:none}
html:not([data-theme]) #reference .work .wmeta{display:block;padding:20px 22px 22px}
html:not([data-theme]) #reference .work .wmeta b{display:block;font-size:24px;letter-spacing:-.02em;color:#101014;margin:0 0 8px}
html:not([data-theme]) #reference .work .wmeta em{display:block;font-style:normal;font-size:14px;line-height:1.5;color:#6C6D78;margin:0 0 14px}
html:not([data-theme]) #reference .work .wmeta .role{display:inline-block;font-size:12px;color:#2F27C9;text-transform:none;letter-spacing:0}

/* 17. 9. 2026: druhy a treti radek H1 (.rot) se pod Papirem nikdy nerozanimoval a zustaval neviditelny */
html:not([data-theme]) h1 .rot .w > i{opacity:1;filter:none;transform:none}

/* 17. 9. 2026: animace slov v nadpisech se pod Papirem casto nedobehla a text zustaval useknuty - vypnuta */
html:not([data-theme]) .w > i{transform:none !important;opacity:1 !important;filter:none !important;transition:none !important}

/* 17. 9. 2026: kontaktni blok z ruzoveho prechodu do Papiru */
html:not([data-theme]) #kontakt.cta{background:#F4F5F8;background-image:none;border:1px solid #E4E5EB}
html:not([data-theme]) #kontakt h2{color:#101014}
html:not([data-theme]) #kontakt p,
html:not([data-theme]) #kontakt small,
html:not([data-theme]) #kontakt .tarif-note{color:#6C6D78}
html:not([data-theme]) #kontakt label{color:#101014}
html:not([data-theme]) #kontakt input,
html:not([data-theme]) #kontakt textarea,
html:not([data-theme]) #kontakt select{background:#fff;border:1px solid #E4E5EB;color:#101014}
html:not([data-theme]) #kontakt input::placeholder,
html:not([data-theme]) #kontakt textarea::placeholder{color:#9A9BA6}
html:not([data-theme]) #kontakt input:focus,
html:not([data-theme]) #kontakt textarea:focus{border-color:#3F35E8;outline:none}
html:not([data-theme]) #kontakt button[type="submit"],
html:not([data-theme]) #kontakt .btn{background:#101014;color:#fff;border-color:#101014}

/* 18. 9. 2026: poradi v prepinaci — Papir prvni, pak Tmava, Blueprint, Terakota.
   Prepinac stavi app.js, v HTML neni; .pwrap ma display:contents, takze order sedi na tlacitkach.
   Zamerne bez scope na Papir — poradi ma byt stejne ve vsech stylech. */
.pwrap button:nth-child(4){order:1}
.pwrap button:nth-child(1){order:2}
.pwrap button:nth-child(2){order:3}
.pwrap button:nth-child(3){order:4}

/* 18. 9. 2026: stejne reference i v Tmave, Blueprintu a Terakote --------------
   Screenshoty pryc, karta = okno prohlizece s adresou a prokliknutelnym popiskem.
   Barvy se berou z promennych tematu, takze kazda sablona zustava sama sebou. */
#reference .work{transition:border-color .3s}
#reference .work:hover .shot{transform:none}
#reference .work:hover{border-color:color-mix(in srgb,var(--acc) 45%,var(--line))}

html[data-theme] #reference .work{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:none}
html[data-theme] #reference .work .shot{display:block;margin:0;border:0;border-radius:0;box-shadow:none;background:transparent}
html[data-theme] #reference .work .wbar{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;background:var(--soft);border-bottom:1px solid var(--line)}
html[data-theme] #reference .work .wurl{margin:0 auto;font-size:11px;color:var(--dim);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:2px 12px}
html[data-theme] #reference .work .wscreen{display:none}
html[data-theme] #reference .work .wmeta{display:block;padding:20px 22px 22px}
html[data-theme] #reference .work .wmeta b{display:block;font-size:24px;letter-spacing:-.02em;color:var(--ink);margin:0 0 8px}
html[data-theme] #reference .work .wmeta em{display:block;font-style:normal;font-size:14px;line-height:1.5;color:var(--dim);margin:0 0 14px}
html[data-theme] #reference .work .wmeta .role{display:inline-block;font-size:12px;color:var(--acc);text-transform:none;letter-spacing:0}

/* 2026-09-20: popisek „00 Zadání“ jen na mobilu — na desktopu má karta Zadání poznámky přímo v okně */
@media(min-width:901px){.pp-step.pp-s0{display:none}}