/* Případová studie Fyzio360: staví na reference.css, vlastní třídy mají předponu fz-. Barvy a písma jsou skutečné z webu klienta */
@font-face{font-family:"FZ Tenor";src:url(/assets/fonts/Fyzio/tenor.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"FZ Tenor";src:url(/assets/fonts/Fyzio/tenor-ext.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-02FF}
@font-face{font-family:"FZ Public";src:url(/assets/fonts/Fyzio/public.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"FZ Public";src:url(/assets/fonts/Fyzio/public-ext.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02FF}
.fz{--bg:#f8f6f1;--card:#fffdf9;--fz-s:#708e86;--fz-s2:#b0c4bb;--fz-sd:#5a766e;--fz-p:#b7aca0;--fz-t:#232c27;--fz-l:#e5e3d9;--wc-ink:var(--fz-t);--mint:#708e86;--mint-ink:#4f6b63;--marker:rgba(176,196,187,.5);--glow:rgba(176,196,187,.32);--glow-2:rgba(183,172,160,.22);--a-on-accent:#fff;--f-fz:"FZ Tenor",Georgia,serif}

/* ── Úvod ── */
.fz-hero{padding-bottom:clamp(116px,17vw,290px)}
.fz-hero::after{background:linear-gradient(180deg,rgba(20,24,21,.56) 0,rgba(20,24,21,.14) 26%,rgba(20,24,21,.46) 58%,rgba(20,24,21,.84) 100%)}
.fz-hero .cs-hero-i{object-position:38% 50%}
.fz-hero .cs-fa{grid-template-columns:repeat(4,minmax(0,auto))}
.fz-ob{position:absolute;left:0;right:0;bottom:-1px;z-index:1;display:block;width:100%;height:clamp(104px,15.4vw,300px)}
.fz-ob .f{fill:var(--bg)}
.fz-ob .s{fill:none;stroke:rgba(255,255,255,.82);stroke-width:1.6;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:csDraw 1.3s var(--ease-io) .15s forwards}
.fz-ob text{font:400 31px/1 var(--f-fz);letter-spacing:.05em;fill:#4e4e53}

/* ── Výzva ── */
.fz .cs-big em{display:block;width:fit-content;background:linear-gradient(90deg,#4f6b63,#708e86 58%,#9c8f80);-webkit-background-clip:text;background-clip:text}
.fz .cs-st b .n{display:inline;margin:0;font-size:inherit;line-height:inherit;color:inherit}

/* ── Logo ── */
.lo-c path.s{stroke-opacity:.45}
.lo-c path.c{stroke-opacity:.22}
.fz .lo-c svg{width:min(100%,250px)}
.fz-st{padding-top:clamp(26px,4vw,56px)}
.fz-lg{width:min(100%,780px)}
.fz-gr path,.fz-gr circle{fill:none;stroke:var(--fz-s);stroke-width:.22;stroke-opacity:.5}
.fz-gr{opacity:0}
.fz-st.is-in .fz-gr{animation:fzGr 4.4s ease forwards}
@keyframes fzGr{0%{opacity:0}8%,70%{opacity:1}100%{opacity:.0}}
.fz-kd,.fz-kr{fill:none;stroke:#3d3b3a;stroke-width:1.15}
/* první tah kreslí celý kruh, pak ho vystřídá druhý a čárkování z něj nechá dvě čtvrtiny */
.fz-kd{transform:rotate(-90deg);transform-origin:209.7px 70.03px;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.fz-st.is-in .fz-kd{opacity:1;animation:fzKd 1.3s var(--ease-io) .1s forwards,fzVen .01s linear 1.42s forwards}
@keyframes fzKd{to{stroke-dashoffset:0}}
@keyframes fzVen{to{opacity:0}}
.fz-kr{stroke-dasharray:90.9 89.1 90.9 89.1;stroke-dashoffset:-33}
.sv-js .fz-st:not(.is-in) .fz-kr{stroke-dasharray:180 0 180 0;opacity:0}
.sv-js .fz-st.is-in .fz-kr{animation:fzKr .8s var(--ease-io) 3s backwards,fzVen2 .01s linear 1.4s backwards}
@keyframes fzKr{from{stroke-dasharray:180 0 180 0}}
@keyframes fzVen2{from{opacity:0}}
/* zbytek kruhu se ukáže po dostavění a při najetí myší, ve výsledném logu není */
.fz-dk{fill:none;stroke:var(--fz-s);stroke-width:.7;stroke-dasharray:.5 2.5;opacity:0;transition:opacity .3s}
.fz-st:hover .fz-dk{opacity:.9}
.fz-st.is-in .fz-dk{animation:fzDk 1.6s ease 3.9s}
@keyframes fzDk{30%,60%{opacity:.9}}
.fz-os{fill:none;stroke:var(--fz-s);stroke-width:.35;stroke-dasharray:2 2;opacity:0}
.fz-st.is-in .fz-os{animation:fzOs 1.6s ease 2.7s forwards}
@keyframes fzOs{20%,60%{opacity:.9}100%{opacity:0}}
.fz .lo-pr.a{fill:#111}
.fz .lo-pr.b{fill:#545454}
.fz .lo-pr{stroke:#3d3b3a}
.fz .lo-st.is-in .lo-pr{animation:loKr .9s var(--ease-io) forwards,loBa .6s ease forwards;animation-delay:calc(1.3s + var(--k,0)*.09s),2.5s}
.fz-st-n{position:absolute;right:clamp(14px,2.4vw,30px);top:clamp(12px,2vw,24px);margin:0;font:400 clamp(26px,1.2rem + 1.4vw,44px)/1 var(--f-fz);color:var(--fz-sd);font-variant-numeric:tabular-nums}
.fz-st-n b{font-weight:400}
.fz .lo-kr li:nth-child(2){animation-delay:1.4s}
.fz .lo-kr li:nth-child(3){animation-delay:3s}
.fz .lo-f svg{display:block;width:auto;max-width:86%;height:clamp(50px,6.4vw,92px);margin:auto 0;overflow:visible}
.fz .lo-f .s svg{height:clamp(76px,9.4vw,136px)}
.lo-f li.s{background:var(--fz-sd);box-shadow:none;--l1:#fff;--l2:#fff;--l3:#fff}
.lo-f li.t{background:var(--fz-t);box-shadow:none;--l1:#fff;--l2:var(--fz-s2);--l3:var(--fz-s2)}
.lo-f li.s span,.lo-f li.t span{color:rgba(255,255,255,.84)}

.fz:not(.sv-js) .lo-pr{fill-opacity:1;stroke-dashoffset:0;stroke-opacity:0}

/* ── Barvy a písmo ── */
.fz .plt{height:clamp(240px,26vw,340px)}
.fz .plt-c.y{color:#262b28}
.fz .plt-c b{font-family:var(--f-fz);font-weight:400;letter-spacing:0}
.fz-ty{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,18px);margin-top:clamp(10px,1.4vw,18px)}
.fz-ty .c{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;column-gap:clamp(14px,2vw,26px);min-height:clamp(130px,14vw,190px);padding:clamp(16px,2vw,26px);border-radius:18px;background:var(--card);box-shadow:0 0 0 1px var(--line)}
.fz-ty b{grid-row:1/3;font-weight:400;font-size:clamp(4rem,2rem + 4.6vw,6.8rem);line-height:.86}
.fz-ty .t b,.fz-ty .t span{font-family:var(--f-fz)}
.fz-ty .p b,.fz-ty .p span{font-family:"FZ Public",sans-serif;font-weight:300}
.fz-ty span{align-self:end;font-size:clamp(17px,1rem + .4vw,21px);line-height:1.2}
.fz-ty small{font:400 14px/1.3 var(--f-body);color:var(--ink-2)}
.fz-ty svg{grid-row:1/3;display:block;width:clamp(76px,8vw,112px);height:auto;fill:none;stroke:var(--fz-sd);stroke-width:22}
.fz-ty .o span{font-family:var(--f-fz)}

/* ── Kruh: bez JavaScriptu a s omezeným pohybem jsou zastávky pod sebou ── */
.fz-k{--vh:100vh;position:relative;margin:clamp(36px,5vw,72px) clamp(8px,1vw,16px) 0;border-radius:clamp(22px,3vw,36px);background:radial-gradient(70% 70% at 74% 50%,#34423a,var(--fz-t) 72%);color:#fff}
@supports (height:100svh){.fz-k{--vh:100svh}}
.fz-k-st{padding-block:clamp(44px,6vw,96px)}
.fz-k .sv-h2{color:#fff;font-size:clamp(1.85rem,1.05rem + 2vw,2.85rem)}
.fz-k-l,.fz-k-z,.fz-k-lg,.fz-k-o,.fz-k-n{display:none}
.fz-k-p{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px 28px;margin-top:22px}
.fz-k-p p{margin:0;font:400 15.5px/1.5 var(--f-body);color:rgba(255,255,255,.78)}
.fz-k-p b{display:block;margin-bottom:4px;font:400 24px/1.15 var(--f-fz);color:#fff}
.fz-k-f{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:26px}
.fz-k-f img{display:block;width:100%;height:auto;border-radius:50%}
@media (prefers-reduced-motion:no-preference){.sv-page.sv-js .fz-k{height:calc(var(--vh)*5.4)}
.sv-js .fz-k-st{position:sticky;top:0;display:flex;align-items:center;height:var(--vh);padding-block:0;overflow:hidden}
.sv-js .fz-k-g{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:clamp(20px,4vw,72px);width:100%}
.sv-js .fz-k-l{display:grid;gap:0;margin:clamp(18px,2.4vw,30px) 0 0;padding:0;list-style:none}
.sv-js .fz-k-l li{display:grid;grid-template-columns:58px minmax(0,1fr);align-items:baseline;padding:clamp(5px,.8vh,9px) 0;border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.42);transition:color .3s}
.sv-js .fz-k-l li:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.sv-js .fz-k-l i{font:500 12.5px/1 var(--f-mono);font-style:normal}
.sv-js .fz-k-l span{font:400 clamp(20px,1rem + .6vw,26px)/1.15 var(--f-fz)}
.sv-js .fz-k-l li.on{color:#fff}
.sv-js .fz-k-l li.on i{color:var(--fz-s2)}
.sv-js .fz-k-p{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-top:clamp(14px,1.8vw,22px)}
.sv-js .fz-k-p p{grid-area:1/1;opacity:0;transform:translateY(8px);transition:opacity .28s ease,transform .4s var(--ease)}
.sv-js .fz-k-p p.on{opacity:1;transform:none}
.sv-js .fz-k-p b{display:none}
.sv-js .fz-k-v{position:relative;width:min(100%,calc(var(--vh) - 92px));aspect-ratio:1;justify-self:center}
.sv-js .fz-k-z,.sv-js .fz-k-lg,.sv-js .fz-k-o{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}
.sv-js .fz-k-z{transition:opacity .4s}
.fz-k-z .t{fill:none;stroke:rgba(255,255,255,.3);stroke-width:7;stroke-dasharray:.3 4.7}
.fz-k-z .d{fill:var(--fz-t);stroke:rgba(255,255,255,.5);stroke-width:2.6;transition:fill .25s,stroke .25s}
.fz-k-z .d.on{fill:var(--fz-s2);stroke:var(--fz-s2)}
.fz-k-o{will-change:transform}
.fz-k-o path{fill:none;stroke:#fff;stroke-width:7.4}
.fz-k-o circle{fill:var(--fz-s2);transition:opacity .3s}
.sv-js .fz-k-f{position:absolute;inset:9.6%;display:block;margin:0;overflow:hidden;border-radius:50%;background:#2c3831;transition:opacity .4s,transform .6s var(--ease)}
.sv-js .fz-k-f img{position:absolute;inset:0;height:100%;border-radius:0;object-fit:cover;opacity:0;transform:scale(1.07);transition:opacity .45s ease,transform .9s var(--ease)}
.sv-js .fz-k-f img.on{opacity:1;transform:none}
.fz-k-lg{fill:#fff;opacity:0;transition:opacity .4s ease}
.sv-js .fz-k-n{position:absolute;right:0;bottom:0;display:block;margin:0;font:400 clamp(30px,1.4rem + 2vw,60px)/1 var(--f-fz);color:var(--fz-s2);font-variant-numeric:tabular-nums;transition:opacity .3s}
.fz-k-n b{font-weight:400}
.fz-k.is-logo .fz-k-f{opacity:0;transform:scale(.94)}
.fz-k.is-logo .fz-k-lg{opacity:1}
.fz-k.is-konec .fz-k-z{opacity:.4}
.fz-k.is-konec .fz-k-o circle{opacity:0}}

/* ── Web v akci ── */
.sv-page.sv-js.fz .cs-sc{height:calc(var(--vh)*3)}
.fz .sc-nb .sc-hl{aspect-ratio:1800/98}
.fz .sc-tl .sc-hl{aspect-ratio:804/176}

/* ── Fotky: tvary z webu a roll-upů, obdélník, kruh a oblouk ── */
.fz-ft{align-items:flex-start}
.fz-ft img.k{width:clamp(190px,23vw,350px);border-radius:50%}
.fz-ft img.o{width:clamp(170px,20vw,300px);height:clamp(220px,26vw,392px);border-radius:999px 999px 18px 18px}

.fz .ft-c{margin-top:clamp(20px,2.6vw,36px)}

/* ── Citát ── */
.fz-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%)}
.fz-ci{position:relative;margin:clamp(40px,6vw,88px) clamp(8px,1vw,16px) 0;padding:clamp(52px,8vw,120px) 0;overflow:hidden;border-radius:clamp(22px,3vw,36px);background:var(--fz-sd);color:#fff}
.fz-ci figure{position:relative;max-width:980px;margin:0 auto;text-align:center}
.fz-ci .o{position:absolute;left:50%;top:50%;z-index:0;width:clamp(420px,62vw,860px);height:auto;fill:none;stroke:rgba(255,255,255,.26);stroke-width:3;transform:translate(-50%,-50%)}
.fz-ci blockquote{position:relative;margin:0;font:400 clamp(1.55rem,1rem + 2.4vw,3.05rem)/1.22 var(--f-fz);text-wrap:balance}
.fz-ci figcaption{position:relative;margin-top:20px;font:500 14.5px/1.3 var(--f-body);color:rgba(255,255,255,.92)}

/* ── Telefony a tablety ── */
@media (max-width:991.98px){.fz-hero .cs-fa{grid-template-columns:repeat(2,minmax(0,auto))}
.fz-k-f{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:991.98px) and (prefers-reduced-motion:no-preference){.sv-js .fz-k-g{grid-template-columns:minmax(0,1fr);gap:14px;justify-items:center}
.sv-js .fz-k-t{display:contents}
.sv-js .fz-k .sv-h2{justify-self:start;font-size:clamp(1.5rem,1rem + 2vw,2rem)}
.sv-js .fz-k-l{display:none}
.sv-js .fz-k-v{order:1;width:min(100%,calc(var(--vh) - 310px),560px)}
.sv-js .fz-k-p{order:2;width:100%;margin-top:6px;text-align:center}
.sv-js .fz-k-p b{display:block}}
@media (max-width:767.98px){.fz-hero{padding-top:90px}
.fz-ty{grid-template-columns:repeat(2,minmax(0,1fr))}
.fz-ty .c.t,.fz-ty .c.p{grid-template-columns:minmax(0,1fr);row-gap:2px}
.fz-ty .c.t b,.fz-ty .c.p b{grid-row:auto;margin-bottom:12px}
.fz-ty .c.o{grid-column:1/-1;min-height:0}
.fz .plt-c{height:72px;padding-left:22px}
.fz .plt{height:auto}
.fz .lo-c figcaption em{margin-top:4px}
.fz-ci figure{text-align:left}}
@media (max-height:600px) and (min-width:992px) and (prefers-reduced-motion:no-preference){.sv-js .fz-k-p{display:none}
.sv-js .fz-k-v{width:min(100%,calc(var(--vh) - 40px))}}
@media (prefers-reduced-motion:reduce){.fz-ob .s{animation:none;stroke-dashoffset:0}
.fz-gr,.fz-os,.fz-kd,.fz-dk{display:none}
.sv-js .fz-st .fz-kr,.sv-js .fz-st:not(.is-in) .fz-kr{animation:none;opacity:1;stroke-dasharray:90.9 89.1 90.9 89.1}
.fz .lo-pr{fill-opacity:1;stroke-dashoffset:0;stroke-opacity:0}
.sv-page.sv-js.fz .cs-sc{height:auto}}