@font-face{font-family:Noodle;src:url(BebasNeue-Regular.ttf);font-display:swap}
@font-face{font-family:Vibes;src:url(GreatVibes-cyr.ttf);font-display:swap}@font-face{font-family:VibesKK;src:url(Caveat-kk.ttf);font-display:swap}@font-face{font-family:Osw;src:url(Oswald-var.ttf);font-weight:200 700;font-display:swap}
html{--disp:Noodle,Impact,"Arial Narrow",sans-serif;--dw:400}html:is([lang=ru],[lang=kk]){--disp:Osw,"Arial Narrow",sans-serif;--dw:500}
:root{--ink:#121619;--ink2:#191e22;--ink3:#20262b;--paper:#eaeaea;--mute:#949ba0;--line:rgba(234,234,234,.14);--g1:#00ff15;--g2:#eeff00;--grad:linear-gradient(110deg,var(--g1),var(--g2));
--s2:8px;--s3:16px;--s4:24px;--s5:32px;--s6:48px;--s7:64px;--s8:96px;--s9:128px;--pad:20px;--r:20px;--sec:var(--s8);--tp:max(var(--pad),calc((100vw - 1360px)/2 + var(--pad)))}
*{box-sizing:border-box;margin:0;padding:0}html{background:var(--ink)}body{font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--paper);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}a{color:inherit}:focus-visible{outline:2px solid var(--g1);outline-offset:3px;border-radius:6px}
.wrap{padding:0 var(--pad);max-width:1360px;margin:0 auto}
.D{font-family:var(--disp);font-weight:var(--dw);text-transform:uppercase;line-height:.9}
.gt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;background:var(--grad);color:var(--ink);font-weight:700;text-decoration:none;border:0;font-size:16px;cursor:pointer;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(0,255,21,.45)}.btn:active{transform:scale(.97)}
.btn.o{background:transparent;color:var(--paper);border:1px solid var(--line)}.btn.o:hover{border-color:var(--g1);box-shadow:none}
/* header */
.top{position:fixed;inset:0 0 auto;z-index:30;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.top.solid{background:rgba(18,22,25,.82);backdrop-filter:blur(12px);border-color:var(--line)}
.top img{height:28px;width:auto}.top nav{display:none}.top .btn{min-height:44px;padding:0 18px;font-size:14px}
/* hero */
.hero{min-height:100svh;padding:104px 0 var(--s6);display:flex;align-items:center;overflow:hidden}
.hero .wrap{display:grid;gap:var(--s6);width:100%}
.hero h1{font-size:clamp(64px,17vw,176px);line-height:.88;letter-spacing:-.005em}
.hero h1 .ln{display:block;overflow:hidden;padding-top:.04em}.hero h1 .ln>span{display:inline-block}
.sub{font-size:clamp(17px,2.2vw,21px);color:var(--mute);max-width:34ch;margin:var(--s4) 0 var(--s5)}
.acts{display:flex;flex-wrap:wrap;gap:12px}
.stage{position:relative;justify-self:center;width:min(78vw,340px);margin-top:var(--s3)}
.phone{position:relative;aspect-ratio:9/19.5;border-radius:44px;padding:10px;background:linear-gradient(160deg,#3a4248,#14181b);box-shadow:0 40px 80px -30px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.08)}
.screen{position:relative;height:100%;border-radius:34px;overflow:hidden;background:#000}
.screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s}.screen img.on{opacity:1}
.notch{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:30%;height:22px;border-radius:20px;background:#000;z-index:2}
.tagc{position:absolute;left:-14%;bottom:12%;z-index:3;background:rgba(25,30,34,.86);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:16px;padding:12px 16px}
.tagc b{display:block;font-family:var(--disp);font-weight:400;font-size:40px;line-height:.9}.tagc span{font-size:12px;color:var(--mute)}
.ico{position:absolute;pointer-events:none;z-index:3;filter:drop-shadow(0 20px 30px rgba(0,0,0,.6));height:auto}
.ico.ig{width:42%;right:-20%;top:4%}.ico.tt{width:30%;right:-8%;bottom:-4%}
/* section heads */
section{padding:var(--sec) 0}
.hd{display:grid;gap:var(--s3);margin-bottom:var(--s6)}
.hd p.k{font-size:15px;color:var(--g1);font-weight:600;display:flex;align-items:center;gap:10px}.hd p.k::before{content:"";width:28px;height:2px;background:var(--grad)}
.hd h2{font-size:clamp(34px,6.4vw,72px);line-height:1.02;font-weight:700;letter-spacing:-.03em;max-width:18ch}
.hd h2:last-child{grid-column:1/-1}.hd .d{color:var(--mute);max-width:46ch}
/* numbers band */
.band{border-block:1px solid var(--line);padding:var(--s6) 0}
.band .wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5) var(--s4)}
.band b{display:block;font-family:var(--disp);font-weight:400;font-size:clamp(56px,13vw,120px);line-height:.85}.band span{color:var(--mute);font-size:14px}
/* work */
.work{padding-bottom:var(--s6)}
.track{display:flex;gap:var(--s3);overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--tp) var(--s4);scrollbar-width:none;scroll-padding:0 var(--tp)}
.track::-webkit-scrollbar{display:none}
.slide{flex:0 0 86%;scroll-snap-align:start;background:var(--ink2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.vis{position:relative;aspect-ratio:4/5;background:radial-gradient(120% 90% at 50% 20%,#2a3237,var(--ink2));display:grid;place-items:center;overflow:hidden}
.vis img.prod{max-height:78%;width:auto;transition:transform .8s cubic-bezier(.2,.8,.2,1)}.slide:hover .vis img.prod{transform:scale(1.04)}
.strip{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:6px}.strip a,.strip span{position:relative;border-radius:12px;overflow:hidden;display:block}.strip img{width:100%;height:100%;object-fit:cover;transition:transform .6s}.strip a:hover img{transform:scale(1.06)}
.strip.k3{grid-template-columns:1.4fr 1fr;grid-template-rows:1fr 1fr}.strip.k3 a:first-child{grid-row:1/3}
.chip{position:absolute;left:8px;bottom:8px;min-height:36px;display:inline-flex;align-items:center;padding:0 12px;border-radius:999px;background:rgba(18,22,25,.78);backdrop-filter:blur(6px);font-size:12px;font-weight:700;color:var(--g1)}
.poster{background:var(--grad);color:var(--ink);place-items:end start;padding:var(--s4)}.poster b{font-family:var(--disp);font-weight:400;font-size:clamp(96px,26vw,190px);line-height:.82}.poster span{display:block;font-weight:600;margin-top:8px}
.poster img{position:absolute;top:var(--s4);left:var(--s4);height:34px;width:auto;filter:brightness(0) saturate(100%) invert(8%)}
.meta{padding:var(--s4);display:grid;gap:var(--s3);flex:1;align-content:start}
.meta .who{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--mute)}.meta .who img{height:18px;width:auto}
.meta h3{font-size:24px;line-height:1.15;letter-spacing:-.02em}
.res{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}.res b{display:block;font-family:var(--disp);font-weight:400;font-size:clamp(30px,3vw,38px);white-space:nowrap;line-height:.9}.res span{font-size:13px;color:var(--mute)}
.lk{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}.lk a{min-height:44px;display:inline-flex;align-items:center;padding:0 16px;border-radius:999px;border:1px solid var(--line);text-decoration:none;font-size:14px;font-weight:600;transition:border-color .2s,color .2s}.lk a:hover{border-color:var(--g1);color:var(--g1)}
.prog{height:2px;background:var(--line);margin:0 var(--tp);border-radius:2px;overflow:hidden;max-width:1320px}.prog i{display:block;height:100%;width:0;background:var(--grad)}
/* services */
.svc{display:grid;gap:0 var(--s6)}
.sv{border-top:1px solid var(--line);padding:var(--s5) 0 var(--s4);display:grid;gap:var(--s3);position:relative}
.sv::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--grad);transition:width .6s cubic-bezier(.2,.8,.2,1)}.sv:hover::before{width:100%}
.sv h3{font-family:var(--disp);font-weight:400;font-size:clamp(40px,4.4vw,56px);line-height:.9;text-transform:uppercase}
.sv p{color:var(--mute);font-size:16px;max-width:40ch}.sv .ev{font-size:13px;color:var(--paper);border-top:1px solid var(--line);padding-top:var(--s3)}
/* clients */
.mq{overflow:hidden;padding:var(--s4) 0;mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.trk{display:flex;gap:64px;width:max-content;align-items:center;animation:mq 36s linear infinite}.mq.rev .trk{animation-direction:reverse}
.trk img{height:40px;width:auto;filter:grayscale(1) brightness(1.7);opacity:.8;transition:filter .3s,opacity .3s}.trk img:hover{filter:none;opacity:1}
@keyframes mq{to{transform:translateX(-50%)}}
/* cta */
.cta{padding-bottom:var(--s7)}
.cbox{border-radius:28px;background:var(--ink2);border:1px solid var(--line);padding:var(--s6) var(--s4);display:grid;gap:var(--s6);position:relative;overflow:hidden}
.cbox h2{font-size:clamp(56px,14vw,168px);line-height:.86}.cbox h2 .v{font-family:Vibes,VibesKK,cursive;text-transform:none;font-size:1.05em;vertical-align:-.08em;display:inline-block;padding:0 .08em;line-height:1}
.ct{display:grid;gap:4px}.ct a{display:flex;align-items:center;min-height:52px;font-size:clamp(19px,2.6vw,26px);font-weight:600;text-decoration:none;border-bottom:1px solid var(--line);transition:color .2s}.ct a:hover{color:var(--g1)}
.note{color:#ffb74d;font-size:13px}
form{display:grid;gap:var(--s3)}label{font-size:14px;color:var(--mute);display:grid;gap:6px}
input,textarea{width:100%;min-height:52px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--ink);color:var(--paper);font:inherit;transition:border-color .2s}input:focus,textarea:focus{border-color:var(--g1);outline:0}
footer .wrap{display:flex;justify-content:space-between;gap:var(--s3);padding-block:var(--s4) var(--s5);color:var(--mute);font-size:13px;border-top:1px solid var(--line)}
.js [data-r]{opacity:0;transform:translateY(32px)}
@media(min-width:768px){:root{--pad:40px;--sec:var(--s9)}
.top nav{display:flex;gap:32px;font-size:15px}.top nav a{text-decoration:none;color:var(--mute);transition:color .2s}.top nav a:hover{color:var(--paper)}
.band .wrap{grid-template-columns:repeat(4,1fr)}
.slide{flex-basis:56%}.svc{grid-template-columns:1fr 1fr}
.cbox{padding:var(--s7) var(--s6)}.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7)}
}
@media(min-width:1024px){.hero .wrap{grid-template-columns:1.25fr .75fr;align-items:center;gap:var(--s7)}.stage{margin:0;width:min(24vw,330px,calc((100svh - 190px) / 2.17))}
.hero h1{font-size:clamp(96px,10.5vw,168px)}
.slide{flex-basis:clamp(340px,28vw,420px)}.vis{aspect-ratio:1/1}.pin .work .track{overflow:visible;scroll-snap-type:none}
.svc{grid-template-columns:1fr 1fr}.sv{grid-template-columns:1fr 1.1fr;gap:var(--s5);padding:var(--s5) 0 var(--s6)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.js [data-r]{opacity:1;transform:none}}
.slide:nth-child(2n+5) .poster{background:radial-gradient(120% 90% at 30% 20%,#2a3237,var(--ink2));color:var(--paper)}
.slide:nth-child(2n+5) .poster b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.slide:nth-child(2n+5) .poster img{filter:grayscale(1) brightness(1.8)}.slide:nth-child(2n+5) .poster span{color:var(--mute)}
@media(min-width:1024px) and (max-height:820px){.vis{aspect-ratio:5/4}}
@media(min-width:1024px){.hd{grid-template-columns:1fr 1fr;align-items:end}.hd p.k{grid-column:1/-1}}

html:is([lang=ru],[lang=kk]) .hero h1{font-size:clamp(50px,13vw,150px);line-height:.98;letter-spacing:-.01em}
html:is([lang=ru],[lang=kk]) .sv h3,html:is([lang=ru],[lang=kk]) .cbox h2{letter-spacing:-.01em;font-weight:500}
html:is([lang=ru],[lang=kk]) .cbox h2{font-size:clamp(44px,10vw,128px);line-height:.95}
html:is([lang=ru],[lang=kk]) .sv h3{font-size:clamp(32px,3.6vw,46px);line-height:1}
/* language switch */
.tr{display:flex;align-items:center;gap:10px}
.lang{position:relative;display:grid;grid-template-columns:repeat(3,40px);padding:3px;border:1px solid var(--line);border-radius:999px;background:rgba(25,30,34,.8);--i:0}
.lang button{position:relative;z-index:1;height:36px;border:0;background:none;color:var(--mute);font:600 12px/1 system-ui,sans-serif;letter-spacing:.04em;cursor:pointer;border-radius:999px;transition:color .3s}
.lang button[aria-pressed=true]{color:var(--ink)}.lang button:hover:not([aria-pressed=true]){color:var(--paper)}
.lang .pill{position:absolute;top:3px;left:3px;width:40px;height:36px;border-radius:999px;background:var(--grad);transform:translateX(calc(var(--i)*100%));transition:transform .45s cubic-bezier(.6,0,.2,1.3);box-shadow:0 4px 14px -4px rgba(0,255,21,.5)}
@media(max-width:420px){.top .hb{padding:0 14px;font-size:13px;min-height:42px}.lang{grid-template-columns:repeat(3,36px)}.lang .pill{width:36px}.tr{gap:8px}}
@media(max-width:374px){.top .hb{display:none}}
/* case visual with overlay */
.vis .cov{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}.slide:hover .vis .cov{transform:scale(1.04)}
.vis .ov{position:absolute;inset:auto 0 0 0;padding:var(--s4);padding-top:96px;background:linear-gradient(transparent,rgba(18,22,25,.92) 62%);display:grid;gap:6px;justify-items:start}
.vis .ov b{font-family:var(--disp);font-weight:var(--dw);font-size:clamp(72px,19vw,132px);line-height:.85}.vis .ov>span{color:var(--paper);font-weight:600;font-size:15px}
.vis .ov .lg{height:26px;width:auto;filter:grayscale(1) brightness(2.2);margin-bottom:6px}

.glow{display:none}
@media(min-width:1024px){
.hero{padding:120px 0 64px}
.hero .wrap{grid-template-columns:minmax(0,1.55fr) minmax(0,.75fr);gap:var(--s6)}
.hero h1{font-size:clamp(112px,11.4vw,184px);line-height:.86}
html:is([lang=ru],[lang=kk]) .hero h1{font-size:clamp(84px,8.4vw,136px)}
.sub{font-size:21px;max-width:40ch;margin:var(--s5) 0 var(--s6)}
.stage{width:min(23vw,320px,calc((100svh - 220px) / 2.17));justify-self:end;margin-right:4%}
.glow{display:block;position:absolute;inset:10% -30% 0;background:radial-gradient(closest-side,rgba(0,255,21,.28),rgba(238,255,0,.08) 60%,transparent);filter:blur(30px);z-index:-1}
.stage{isolation:isolate}
.band{padding:0}.band .wrap{gap:0}
.band .wrap>div{padding:var(--s6) var(--s5);border-left:1px solid var(--line);display:flex;align-items:flex-end;gap:var(--s3)}
.band .wrap>div:first-child{border-left:0;padding-left:0}
.band b{font-size:clamp(88px,8vw,128px)}.band span{max-width:12ch;padding-bottom:.6em;line-height:1.3}
.work .hd{grid-template-columns:1.4fr .6fr;margin-bottom:var(--s7)}
.work .hd h2{font-size:clamp(56px,6vw,96px);max-width:14ch}
.slide{flex-basis:clamp(400px,31vw,470px)}
.vis{aspect-ratio:16/12}.pinwrap .vis{aspect-ratio:16/12}
.vis .ov b{font-size:clamp(80px,6.4vw,112px)}
.meta{padding:var(--s4) var(--s5) var(--s5)}.meta h3{font-size:22px}
.sgrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--s8);align-items:start}
.sgrid .hd{position:sticky;top:120px;grid-template-columns:1fr;margin:0}
.sgrid .hd h2{font-size:clamp(52px,5vw,80px);max-width:10ch}
.svc{grid-template-columns:1fr;gap:0}
.sv{grid-template-columns:1fr 1fr;align-items:baseline;padding:var(--s6) 0;gap:var(--s5)}
.sv:last-child{border-bottom:1px solid var(--line)}
.sv h3{font-size:clamp(44px,4vw,64px)}
#clients .hd{grid-template-columns:1fr auto}
.cbox{grid-template-columns:1fr 1fr;padding:var(--s8) var(--s7);gap:var(--s7);align-items:start;background:radial-gradient(80% 120% at 0% 100%,rgba(0,255,21,.12),transparent 60%),var(--ink2)}
.cbox h2{font-size:clamp(96px,9vw,150px);position:sticky;top:120px}
html:is([lang=ru],[lang=kk]) .cbox h2{font-size:clamp(72px,6.6vw,112px)}
.cbox .split{grid-template-columns:1fr;gap:var(--s6)}
}
.res b span,.vis .ov b span{font:inherit;color:inherit;letter-spacing:inherit}
#clients{padding-bottom:var(--s7)}
@media(min-width:1024px){.work .hd h2{font-size:clamp(56px,5.6vw,88px);max-width:17ch}
.cbox h2{position:static}.cbox{padding:var(--s7);align-items:center}
.sgrid .hd h2{max-width:9ch}}
html[lang=kk] .cbox h2 .v{font-family:VibesKK,cursive;font-weight:600;font-size:.82em;line-height:1.05;padding:0}
html[lang=kk] .hero h1{font-size:clamp(46px,12.4vw,150px)}
@media(min-width:1024px){html[lang=kk] .hero h1{font-size:clamp(76px,7.4vw,118px);line-height:.98}}
/* label typography fix */
.res>div>span,.res>div>span span{display:block;line-height:1;margin:0;padding:0}
.res>div>b{margin:0 0 7px}
.res>div>span{padding-bottom:.08em}
.band span{display:block;line-height:1.12;margin:0;padding:0 0 .08em}.band b{margin-bottom:7px}
.tagc span{display:block;line-height:1.12;margin-top:6px}
.vis .ov>span{display:block;line-height:1.12;margin-top:6px}
.poster span{line-height:1.12}
@media(min-width:1024px){.band span{line-height:1.12;padding-bottom:.6em}}
/* big number clipping fix */
.res>div>b,.band b,.tagc b,.vis .ov b,.poster b{line-height:1.08;padding-block:.06em;overflow:visible}
.vis .ov b,.poster b,.band b{margin-block:-.06em}
.res>div>b{margin:-.06em 0 7px}
.res,.vis .ov,.band [data-r],.tagc{overflow:visible}
/* script/mask clipping fix */
.cbox h2 .v,html[lang=kk] .cbox h2 .v{padding:.28em .2em .32em;margin:-.28em -.12em -.32em -.2em;line-height:1.1}
.hero h1 .ln{padding:.14em .08em .16em;margin:-.14em -.08em -.16em}
.hero h1 .gt,.hero h1 .ln>span.gt,.hero h1 .ln .gt{padding:.2em .14em .24em;margin:-.2em -.14em -.24em}
.gt{-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* overflow fix */
.slide,.meta,.meta>*,.res>div{min-width:0}
.meta h3{overflow-wrap:break-word;hyphens:auto;text-wrap:balance}
.res{grid-template-columns:repeat(3,minmax(0,1fr))}
.res>div>span{overflow-wrap:break-word;hyphens:auto}
.res>div>b:has(>span[data-i18n]){white-space:normal;font-size:clamp(18px,1.6vw,22px);line-height:1.08;text-wrap:balance;overflow-wrap:break-word}
/* round 2 */
.res>div>b,.band b,.tagc b,.vis .ov b,.poster b{padding-block:.14em}
.vis .ov b,.poster b,.band b{margin-block:-.14em}
.res>div>b{margin:-.14em 0 7px}
.band .wrap>div{min-width:0}
@media(min-width:1024px) and (max-width:1279px){.band .wrap>div{flex-direction:column;align-items:flex-start;gap:6px;padding-inline:var(--s4)}.band b{font-size:clamp(72px,7vw,96px)}.band span{max-width:none;padding-bottom:0}}
/* round 3 */
.strip{grid-template-rows:minmax(0,1fr)}.strip>*{min-height:0}
@media(max-width:1023px){html:is([lang=ru],[lang=kk]) .res>div>b:not(:has(>span[data-i18n])){font-size:clamp(22px,6.6vw,30px)}.res>div>b:not(:has(>span[data-i18n])){font-size:clamp(24px,7.2vw,34px)}}
@media(min-width:768px) and (max-width:1023px){.band b{font-size:clamp(56px,9vw,84px)}}
.strip.k3{grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
.strip .chip{position:absolute;left:8px;bottom:8px;display:inline-flex;overflow:visible;border-radius:999px}
.res>div>b:has(>span[data-i18n]){hyphens:manual;overflow-wrap:normal;word-break:normal}
@media(max-width:1023px){.res>div>b:has(>span[data-i18n]){font-size:clamp(15px,4.2vw,20px)}}
.res>div>span{overflow-wrap:normal;hyphens:manual}
@media(max-width:1023px){.res{gap:var(--s3) 12px}.res>div>span{font-size:12.5px}}
@media(max-width:1023px){.res{column-gap:14px}.res>div>span{font-size:12px}}
@media(max-width:380px){.res>div>span{font-size:11.5px}}
@media(max-width:599px){.res{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:18px}.res>div>span{font-size:12.5px}}
.meta h3{overflow-wrap:normal;hyphens:manual}
@media(max-width:599px){html:is([lang=ru],[lang=kk]) .meta h3{font-size:clamp(18px,5.4vw,22px)}}
html:is([lang=ru],[lang=kk]) .hd h2{max-width:min(100%,13em)}