@font-face{font-family:Manrope;src:url('/static/fonts/manrope.woff2') format('woff2');font-display:swap}
@font-face{font-family:Display;src:url('/static/fonts/zwid-display.woff2') format('woff2');font-display:swap}
:root{color-scheme:dark;--bg:#14120f;--panel:#1c1915;--panel-2:#24201a;--ink:#f7f3eb;--muted:#bcb09e;--dim:#857a69;--line:#3b3229;--line-2:#4d4236;--accent:#ff7654;--ok:#9fd38a;--bad:#ff8f7a}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.65 Manrope,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button,input,select{font:inherit;color:inherit}
.wrap{width:min(1180px,calc(100% - 48px));margin:0 auto}

/* znak ZWID - ten sam co w naglowku strony: litera stoi, powidoki dryfuja */
.znak{display:block}
.znak .k{fill:#0d0b09}
.znak .z{fill:var(--accent)}
.znak .c1{fill:var(--accent);opacity:.34;animation:zw1 3.6s ease-in-out infinite}
.znak .c2{fill:var(--accent);opacity:.16;animation:zw2 3.6s ease-in-out infinite}
@keyframes zw1{0%,100%{transform:translateX(-1.6px);opacity:.30}38%{transform:translateX(-4.4px);opacity:.52}70%{transform:translateX(-2.4px);opacity:.20}}
@keyframes zw2{0%,100%{transform:translateX(-3.2px);opacity:.13}38%{transform:translateX(-8.4px);opacity:.30}70%{transform:translateX(-4.8px);opacity:.08}}
.logo{display:inline-flex;align-items:center;gap:12px;font-family:Display,Manrope,Arial;font-size:26px;font-weight:650;letter-spacing:.01em;line-height:1}
.logo .znak{width:40px;height:40px}
.logo i{width:7px;height:7px;border-radius:50%;background:var(--accent);margin-left:2px;align-self:center}

.nad{display:inline-flex;align-items:center;gap:10px;font-size:11.5px;letter-spacing:.16em;font-weight:700;color:var(--accent);text-transform:uppercase;margin:0}
.nad::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.btn{display:inline-flex;align-items:center;gap:14px;padding:16px 22px;background:var(--accent);color:#1b120c;font-weight:800;font-size:15px;border:0;border-radius:4px;cursor:pointer;transition:background .15s,transform .15s}
.btn:hover{background:#ff8b6d}.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.btn span{font-size:16px;line-height:1}
.drobne{font-size:12.5px;color:var(--dim);margin:0}

/* odtwarzacz jak na pelnej stronie: pasek u gory, paski postepu, podpis */
.ekran{border:1px solid var(--line);border-radius:6px;background:var(--panel);padding:10px;width:100%}
.ekran-gora{display:flex;justify-content:space-between;font-size:10.5px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;padding:2px 4px 8px}
.paski{display:flex;gap:4px;padding:0 0 10px}
.paski b{flex:1;height:2px;background:var(--line-2);border-radius:1px;overflow:hidden;position:relative}
.paski b.zrobione::after{content:"";position:absolute;inset:0;background:var(--ink)}
.paski b.teraz::after{content:"";position:absolute;inset:0;background:var(--ink);transform-origin:left;animation:pasek var(--t,6s) linear forwards}
@keyframes pasek{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.kadr{position:relative;aspect-ratio:9/16;border-radius:3px;overflow:hidden;background:#000}
.kadr video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
.kadr video.wid{opacity:1}
.podpis{position:absolute;left:0;right:0;bottom:0;padding:28px 12px 10px;background:linear-gradient(transparent,rgba(0,0,0,.72));font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.podpis em{font-style:normal;color:var(--accent);margin-right:8px}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}