/* Vitrina — studio site v2. Scroll scene driven by CSS variables from site.js. Animations: transform + opacity only. */
@font-face{font-family:'Sofia Sans';font-style:normal;font-display:swap;font-weight:1 1000;src:url(fonts/sofia-sans-cyrillic-wght-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Sofia Sans';font-style:normal;font-display:swap;font-weight:1 1000;src:url(fonts/sofia-sans-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Sofia Sans';font-style:normal;font-display:swap;font-weight:1 1000;src:url(fonts/sofia-sans-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-display:swap;font-weight:700;src:url(fonts/space-grotesk-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-display:swap;font-weight:500;src:url(fonts/space-grotesk-latin-500-normal.woff2) format('woff2')}

:root{
  --dk:#12141A; --k-bg:#12141A; --k-fg:#FFFFFF; --sh-a:#12141A; --sh-b:#FFFFFF; --band-bg:#12141A; --band-fg:#FFFFFF; --end-bg:#12141A;
  --ink:#12141A; --acc:#FF5A1F; --acc-ink:#C2410C; --ground:#F4F3EF; --paper:#FFFFFF;
  --muted:#565961; --line:#DEDBD3; --viber:#7360F2;
  --font:'Sofia Sans',system-ui,sans-serif;
  --wrap:1240px; --pad:clamp(20px,5vw,56px);
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 19px/1.5 var(--font);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;background:var(--dk);color:#fff;padding:10px 14px;border-radius:8px;z-index:60}
.skip:focus{top:12px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
h1,h2{text-wrap:balance}
h1,h2,h3{font-family:var(--font);font-weight:900;letter-spacing:-.03em;line-height:.98;margin:0}
h2{font-size:clamp(40px,6.4vw,88px)}
h3{font-size:25px;letter-spacing:-.015em;line-height:1.15;font-weight:800}
p{margin:0}
.lead{font-size:clamp(20px,1.7vw,24px);line-height:1.4;color:var(--muted);max-width:30em}

/* word rise */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em .04em .16em;margin:-.14em -.04em -.16em}
.w i{display:inline-block;font-style:normal}
.js .rv .w i{transform:translateY(118%);transition:transform 1s var(--ease);transition-delay:calc(var(--i)*55ms)}
.js .rv.in .w i{transform:none}
.js .fd{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--d,0)*90ms)}
.js .in .fd,.js .fd.in{opacity:1;transform:none}

/* header */
.top{position:fixed;left:0;right:0;top:0;z-index:40;transition:transform .5s var(--ease),color .3s}
.top::before{content:"";position:absolute;inset:0;background:var(--ground);opacity:.94;transition:opacity .3s}
.top.clear::before{opacity:0}
.top.inv{color:var(--k-fg)}
.top.hide{transform:translateY(-102%)}
.top .wrap{position:relative;display:flex;align-items:center;gap:24px;height:68px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none}
.logo svg{width:32px;height:32px}
.word{font:700 23px/1 'Space Grotesk',var(--font);letter-spacing:-.03em}
.word b{font-weight:500;color:var(--acc)}
.nav{display:flex;gap:24px;margin-left:auto;font-size:17px;font-weight:500}
.nav a{text-decoration:none;opacity:.7}
.nav a:hover{opacity:1}
.langs{display:flex;gap:2px;font-size:15px;font-weight:700}
.langs a{text-decoration:none;padding:6px 8px;border-radius:8px;opacity:.6}
.langs a[aria-current]{opacity:1;box-shadow:inset 0 0 0 1.5px currentColor}
@media (max-width:960px){.nav{display:none}.langs{margin-left:auto}}

/* buttons */
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 26px;border-radius:999px;font:700 18px/1 var(--font);text-decoration:none;transition:transform .3s var(--ease)}
.btn:hover{transform:translateY(-3px) scale(1.02)}
.btn:active{transform:scale(.98)}
.btn svg{width:22px;height:22px}
.btn-v{background:var(--viber);color:#fff}
.btn-a{background:var(--acc);color:var(--dk)}
.btn-l{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.top .btn{min-height:44px;padding:0 18px;font-size:16px}
@media (max-width:560px){.top .btn{display:none}.top .wrap{gap:12px}.langs a{padding:6px 6px}}

/* ---------- scroll scene (hero + how it works) ---------- */
.scene{position:relative;--h:0;--m:0;--o:0;--k:0;--b2:0;--a:0;--b:0;--v1:0;--v2:0;--v3:0;--sh:0}
.stage{position:relative;padding:96px var(--pad) 48px}
.bgl,.sh,.badge,.scene-h{display:none}
.hero-t{max-width:760px;margin:0 auto 40px}
.hero-t h1{font-size:clamp(50px,7.6vw,112px);letter-spacing:-.04em;line-height:.9}
.hero-t .lead{margin:26px 0 30px;color:var(--ink);opacity:.72}
.hero-t small{display:block;margin-top:18px;color:var(--muted);font-size:17px}
.dev{display:flex;justify-content:center;margin:0 auto 40px}
.phone{--ph:520px;position:relative;height:var(--ph);aspect-ratio:9/18.6;background:var(--dk);border-radius:calc(var(--ph)*.075);padding:calc(var(--ph)*.014);box-shadow:0 40px 80px -30px rgba(18,20,26,.5)}
.scr{position:relative;height:100%;border-radius:calc(var(--ph)*.062);background:#fff;overflow:hidden;color:#1d1d1f}
.ms{position:absolute;inset:0;background:#fff;display:flex;flex-direction:column;gap:5.5%;padding:13% 9% 8%;font-size:calc(var(--ph)/46);line-height:1.25}
.ms.s2,.ms.s3{display:none}
.ms .t{font-weight:900;font-size:2.1em;line-height:1;letter-spacing:-.03em}
.ms .tag{align-self:flex-start;font-size:.9em;font-weight:700;padding:.3em .75em;border-radius:99px;background:#FDE7DD;color:var(--acc-ink)}
.ms .ph{flex:0 0 27%;border-radius:calc(var(--ph)*.02);background:linear-gradient(135deg,#E9D9CF,#CDB6A8)}
.ms .rows{display:flex;flex-direction:column;gap:.55em}
.ms .row{display:flex;justify-content:space-between;border-bottom:1px solid #eee;padding-bottom:.4em}
.ms .row i{font-style:normal;font-weight:800}
.ms .cta{margin-top:auto;display:flex;gap:6%}
.ms .cta span{flex:1;text-align:center;color:#fff;font-weight:700;padding:.75em 0;border-radius:99px;background:var(--viber)}
.ms .cta span+span{background:#1F8A55}
.ms.pay{align-items:center;justify-content:center;text-align:center;gap:3%}
.ms.pay .big{font-weight:900;font-size:4.6em;line-height:1;letter-spacing:-.04em}
.ms.pay .ok{width:5em;height:5em;border-radius:50%;background:#E3F5EA;display:grid;place-items:center;color:#1E8A4F}
.ms.pay .ok svg{width:55%;height:55%}
.url{display:flex;align-items:center;gap:.5em;background:#F2F2F0;border-radius:99px;padding:.55em .9em;font-weight:700}
.url::before{content:"";width:.7em;height:.7em;border-radius:50%;background:#1E8A4F}
.steps{max-width:760px;margin:0 auto;padding:0;list-style:none}
.step{padding:28px 0;border-top:1px solid var(--line)}
.step .n{font-weight:900;font-size:64px;line-height:.9;color:var(--acc);margin-bottom:10px}
.step h3{font-size:clamp(30px,3.6vw,52px);font-weight:900;letter-spacing:-.03em;line-height:1;margin-bottom:12px}
.step p{font-size:21px;line-height:1.4;max-width:22em}

/* pinned mode */
.js .scene{height:540vh}
.js .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;padding:0}
.js .bgl{display:block;position:absolute;inset:0}
.js .bg2{background:var(--paper);opacity:var(--b2)}
.js .bg3{background:var(--k-bg);opacity:var(--k)}
.js .scene-h{display:block;position:absolute;left:0;right:0;top:92px;text-align:center;font-size:19px;font-weight:700;letter-spacing:0;opacity:var(--sh);color:color-mix(in srgb,var(--k-fg) calc(var(--k)*100%),var(--ink))}
.js .hero-t{position:absolute;z-index:3;margin:0;left:max(var(--pad),calc(50% - 620px + var(--pad)));top:50%;width:min(50%,700px);opacity:calc(1 - var(--h));transform:translateY(calc(-50% - var(--h)*90px))}
.js .hero-t.off{pointer-events:none;visibility:hidden}
.js .dev{position:absolute;z-index:2;left:50%;top:50%;margin:0;width:0;height:0;display:block;
  --dx:27vw;--dy:2vh;--ey:2vh;--s0:1;--s1:1.06;
  transform:translate(calc((1 - var(--m))*var(--dx)),calc((1 - var(--m))*var(--dy) + var(--m)*var(--ey))) scale(calc(var(--s0) + (var(--s1) - var(--s0))*var(--m)))}
.js .phone{--ph:min(64vh,600px);position:absolute;left:0;top:0;transform:translate(-50%,-50%)}
.js .dev-in{animation:rise 1.3s var(--ease) .25s both}
@keyframes rise{from{opacity:0;transform:translateY(16vh)}to{opacity:1;transform:none}}
.js .ms.s2,.js .ms.s3{display:flex}
.js .ms.s2{opacity:var(--a)}
.js .ms.s3{opacity:var(--b)}
.js .sh{display:block;max-width:none;position:absolute;left:0;top:0;width:min(88vh,800px);height:min(88vh,800px);margin:calc(min(88vh,800px)/-2) 0 0 calc(min(88vh,800px)/-2);overflow:visible}
.sh-l polygon{fill:var(--sh-a)}.sh-l polygon.wht{fill:var(--sh-b)}
.sh g{transform-box:fill-box;transform-origin:50% 100%}
.js .sh-l{transform:translateX(calc(var(--o)*-75vw)) rotate(calc(var(--o)*-26deg))}
.js .sh-r{transform:translateX(calc(var(--o)*75vw)) rotate(calc(var(--o)*26deg))}
.js .sh-l polygon,.js .sh-r polygon{animation:shL 1.4s var(--ease) both;transform-box:fill-box;transform-origin:50% 100%}
.js .sh-r polygon{animation-name:shR}
.js .sh .wht{opacity:var(--k);animation:none}
@keyframes shL{from{transform:translateX(52%) rotate(-7deg)}to{transform:none}}
@keyframes shR{from{transform:translateX(-52%) rotate(7deg)}to{transform:none}}
.js .badge{display:block;position:absolute;left:0;top:0;width:calc(min(64vh,600px)*.3);height:calc(min(64vh,600px)*.3);margin:calc(min(64vh,600px)*-.56) 0 0 calc(min(64vh,600px)*.12);opacity:calc(1 - var(--h));transform:scale(calc(1 - var(--h)*.4))}
.badge svg{width:100%;height:100%;animation:spin 22s linear infinite}
.badge b{position:absolute;inset:0;display:grid;place-items:center;font-weight:900;font-size:calc(min(64vh,600px)*.062);letter-spacing:-.03em;color:var(--dk)}
@keyframes spin{to{transform:rotate(360deg)}}
.js .steps{position:absolute;z-index:3;inset:0;max-width:none;margin:0;pointer-events:none}
.js .step{position:absolute;top:50%;width:min(25vw,360px);padding:0;border:0;opacity:var(--v);transform:translateY(calc(-50% + (1 - var(--v))*56px))}
.js .step:nth-child(1){--v:var(--v1)}.js .step:nth-child(2){--v:var(--v2)}.js .step:nth-child(3){--v:var(--v3);color:var(--k-fg)}
.js .step:nth-child(odd){left:max(var(--pad),calc(50% - 620px + var(--pad)))}
.js .step:nth-child(even){right:max(var(--pad),calc(50% - 620px + var(--pad)))}
.js .step .n{font-size:clamp(90px,13vw,200px);letter-spacing:-.05em;margin-bottom:6px}
.js .step p{opacity:.75}
@media (max-width:860px){
  .js .scene{height:480vh}
  .js .hero-t{left:var(--pad);right:var(--pad);width:auto;top:92px;transform:translateY(calc(var(--h)*-70px))}
  .hero-t h1{font-size:clamp(46px,13.2vw,76px)}
  .hero-t .lead{margin:16px 0 20px;font-size:19px}
  .hero-t small{font-size:15px;margin-top:12px}
  .js .dev{--dx:0px;--dy:50svh;--ey:-11svh;--s0:1;--s1:.86}
  .js .phone{--ph:min(60svh,520px)}
  .js .sh{width:min(100svh,170vw);height:min(100svh,170vw);margin:calc(min(100svh,170vw)/-2) 0 0 calc(min(100svh,170vw)/-2)}
  .js .scene-h{top:76px;font-size:17px}
  .js .step,.js .step:nth-child(odd),.js .step:nth-child(even){left:var(--pad);right:var(--pad);width:auto;top:auto;bottom:max(20px,3svh);transform:translateY(calc((1 - var(--v))*40px));display:grid;grid-template-columns:auto 1fr;gap:0 14px;align-items:end}
  .js .step .n{font-size:68px;margin:0;grid-row:1}
  .js .step h3{font-size:34px;margin:0 0 6px}
  .js .step p{grid-column:1/-1;font-size:18px;line-height:1.3;margin-top:6px}
  .btn{min-height:52px;padding:0 20px;font-size:17px}
}
@media (max-width:860px) and (max-height:700px){.hero-t small{display:none}.js .step p{font-size:16px}}

/* offer band */
.band{background:var(--band-bg);color:var(--band-fg);overflow:hidden;padding:26px 0;position:relative;z-index:1}
.tick{display:flex;width:max-content;animation:tick 36s linear infinite}
.tick ul{display:flex;align-items:center;gap:32px;margin:0;padding:0 32px 0 0;list-style:none;font-weight:900;font-size:clamp(30px,4.4vw,64px);line-height:1;letter-spacing:-.03em;white-space:nowrap}
.tick li{display:flex;align-items:center;gap:32px}
.tick li::after{content:"";width:.5em;height:.62em;background:var(--tick,var(--acc));clip-path:polygon(34% 0,100% 0,66% 100%,0 100%)}
@keyframes tick{to{transform:translateX(-50%)}}

/* sections */
.sec{padding:clamp(88px,12vw,180px) 0;position:relative}
.sec-h{display:grid;grid-template-columns:1.2fr .8fr;gap:24px 64px;align-items:end;margin-bottom:clamp(40px,6vw,88px)}
@media (max-width:800px){.sec-h{grid-template-columns:1fr}}

.inc{display:grid;grid-template-columns:repeat(3,1fr);margin:0;padding:0;border-top:2px solid var(--ink)}
.inc li{list-style:none;padding:32px 32px 44px 0;border-bottom:1px solid var(--line)}
.inc li:not(:nth-child(3n+1)){padding-left:32px;border-left:1px solid var(--line)}
.inc svg{width:34px;height:34px;color:var(--acc);margin-bottom:28px}
.inc h3{margin-bottom:10px}
.inc p{color:var(--muted)}
@media (max-width:900px){.inc{grid-template-columns:1fr 1fr}.inc li:not(:nth-child(3n+1)){padding-left:0;border-left:0}.inc li:nth-child(2n){padding-left:24px;border-left:1px solid var(--line)}}
@media (max-width:560px){.inc{grid-template-columns:1fr}.inc li:nth-child(2n){padding-left:0;border-left:0}.inc li{padding:26px 0 30px}.inc svg{margin-bottom:16px}}

/* examples */
.exs{background:var(--paper)}
.ex{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,3vw,40px);margin:0;padding:0;list-style:none;--q:0}
.ex figure{margin:0}
.ex .v{position:relative;aspect-ratio:16/10;border-radius:20px;overflow:hidden;background:var(--line);box-shadow:0 30px 60px -34px rgba(18,20,26,.45)}
.ex video{width:100%;height:100%;object-fit:cover}
.js .ex .v{opacity:0;transform:translateY(60px) scale(.94);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
.js .ex li.in .v{opacity:1;transform:none}
.ex figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:16px 4px 0}
.ex figcaption b{font-size:24px;font-weight:800;letter-spacing:-.02em}
.ex figcaption span{color:var(--muted);font-size:17px}
.ex-note{margin-top:28px;color:var(--muted);font-size:17px}
@media (min-width:701px){
  .ex li:nth-child(odd){transform:translateY(calc(var(--q)*-36px))}
  .ex li:nth-child(even){transform:translateY(calc(110px + var(--q)*-110px))}
  .ex-note{margin-top:80px}
}
@media (max-width:700px){.ex{grid-template-columns:1fr}}

/* faq */
.faq{border-top:2px solid var(--ink);max-width:940px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 0;font-weight:800;font-size:clamp(22px,2.4vw,30px);line-height:1.15;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 18px;height:18px;background:linear-gradient(var(--ink),var(--ink)) center/100% 2.5px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2.5px 100% no-repeat;transition:transform .45s var(--ease)}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq details p{padding:0 0 28px;color:var(--muted);max-width:36em;font-size:21px;line-height:1.4}
.faq details[open] p{animation:fq .5s var(--ease)}
@keyframes fq{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* contact */
.cta-s{background:var(--end-bg);color:#fff;overflow:hidden;position:relative;--c:1;min-height:100vh;min-height:100svh;display:flex;align-items:center}
.cta-s .wrap{position:relative;z-index:1;width:100%}
.cta-s h2{font-size:clamp(48px,9vw,136px);letter-spacing:-.04em;line-height:.9;max-width:8em;margin-bottom:32px}
.cta-s .lead{color:#B9BBC2;margin-bottom:36px}
.cta-s .mail{display:inline-block;margin-top:28px;color:#B9BBC2}
.cta-s .bgmark{position:absolute;right:-3%;bottom:-20%;width:min(42vw,560px);pointer-events:none;overflow:visible}
.bgmark polygon{transform-box:fill-box;transform-origin:50% 100%}
.js .bgmark .l{transform:translateX(calc((1 - var(--c))*60%)) rotate(calc((1 - var(--c))*-10deg))}
.js .bgmark .r{transform:translateX(calc((1 - var(--c))*-60%)) rotate(calc((1 - var(--c))*10deg))}
@media (max-width:700px){.cta-s .bgmark{opacity:.22;width:90vw}}
footer{background:var(--end-bg);color:#8C8F97;font-size:16px;padding:28px 0 36px;border-top:1px solid #262932}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}

/* floating contact */
.fab{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:50}
.fab summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:58px;padding:0 24px 0 20px;border-radius:999px;background:var(--acc);color:var(--dk);font-weight:800;font-size:19px;box-shadow:0 16px 34px -12px rgba(18,20,26,.55);transition:transform .3s var(--ease)}
.fab summary::-webkit-details-marker{display:none}
.fab summary:hover{transform:translateY(-3px) scale(1.03)}
.fab summary svg{width:24px;height:24px}
.fab-m{position:absolute;right:0;bottom:70px;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.fab-m a{display:flex;align-items:center;gap:10px;min-height:50px;padding:0 20px;border-radius:999px;background:#fff;color:var(--dk);font-weight:700;font-size:17px;text-decoration:none;white-space:nowrap;box-shadow:0 12px 30px -10px rgba(18,20,26,.5);animation:fq .35s var(--ease) both}
.fab-m a:nth-child(2){animation-delay:.05s}.fab-m a:nth-child(3){animation-delay:.1s}
.fab-m svg{width:20px;height:20px}
.js .fab{opacity:0;transform:translateY(28px) scale(.9);pointer-events:none;transition:opacity .4s var(--ease),transform .5s var(--ease)}
.js .fab.show{opacity:1;transform:none;pointer-events:auto}

/* dark theme: follows the device setting. Scene runs dark -> darker -> light. */
@media (prefers-color-scheme:dark){
  :root{--ink:#F4F3EF;--ground:#12141A;--paper:#1B1E26;--muted:#A9ACB4;--line:#2D313B;
    --k-bg:#F4F3EF;--k-fg:#12141A;--sh-a:#F4F3EF;--sh-b:#12141A;--band-bg:#FF5A1F;--band-fg:#12141A;--tick:#12141A;--end-bg:#0B0C10}
  .phone{box-shadow:0 0 0 1.5px #3A3F4B,0 40px 80px -30px rgba(0,0,0,.7)}
  .ex .v{box-shadow:0 0 0 1px var(--line)}
  .inc svg{color:#FF7A47}
}

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

.badge b.cz{font-size:calc(min(64vh,600px)*.044)}
.ms.pay.cz .big{font-size:3.3em}