:root{--rad:12px;color-scheme:dark;--fg:255,255,255;--bgc:0,0,0;--b:#000;--w:#fff;--w60:rgba(var(--fg),.6);--w35:rgba(var(--fg),.35);--w12:rgba(var(--fg),.12);--w06:rgba(var(--fg),.06);
--sans:'Inter Tight','Helvetica Neue',Arial,sans-serif;--mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
--pad:clamp(16px,2.2vw,32px);--in:clamp(14px,1.7vw,28px);--ease:cubic-bezier(.2,.8,.2,1);
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:inherit;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:env(safe-area-inset-top,0px);background:var(--b)}
body{background:var(--b);color:var(--w);font-family:var(--sans);font-weight:400;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.m{font-family:var(--sans);font-size:14px;letter-spacing:0;font-weight:400;color:rgba(var(--fg),.6);line-height:1.7}
::selection{background:var(--w);color:var(--b)}
.g4{display:grid;grid-template-columns:repeat(4,1fr)}
.g4>*{padding-inline:var(--in)}

.grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.04;background-image:url("img/noise.png");transform:translateZ(0)}
.grid{position:fixed;inset:0;z-index:3;pointer-events:none;display:grid;grid-template-columns:repeat(4,1fr);padding:0 var(--pad)}
.grid i{border-left:1px solid var(--w06)}.grid i:last-child{border-right:1px solid var(--w06)}

header{position:absolute;top:0;left:0;right:0;z-index:80;padding:calc(22px + env(safe-area-inset-top,0px)) var(--pad) 22px;align-items:center}
header>*{display:flex;align-items:center;min-height:30px;line-height:1}
.hb-btn{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:9px;background:rgba(var(--fg),.1);font-size:14px;font-weight:500;color:var(--w);transition:background .35s}
.hb-btn:hover{background:rgba(var(--fg),.18)}
header .logo{display:inline-flex;align-items:center;justify-self:start}
header>.logo{padding-inline:var(--in)}
.lg-a{display:flex;align-items:center;height:32px;padding:0 11px;border-radius:8px;background:#fff;color:#000;font-size:16px;font-weight:600;letter-spacing:-.04em;line-height:1}
.lg-a sup{font-size:.85em;margin-left:1px;line-height:0;display:inline-block;transform-origin:50% 40%;transition:transform .6s var(--ease)}


header a.m{color:rgba(var(--fg),.9);transition:color .3s,opacity .3s}header a.m:hover{opacity:.6}header a.m:hover{color:var(--w)}
header .r{text-align:right}

section{position:relative;z-index:2;padding:0 var(--pad)}
.reveal-l{overflow:hidden;display:block;padding-bottom:.14em;margin-bottom:-.14em}
.reveal-l>span{display:block;transform:translateY(110%);transition:transform 1.2s var(--ease)}
.reveal-l.in>span{transform:none}
.fade{opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.fade.in{opacity:1;filter:none;transform:none}

/* hero */
#hero{height:100svh;min-height:560px;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:calc(var(--pad) + 8px);overflow:hidden}
.stage{--R:78vw;position:absolute;inset:0;perspective:1500px;z-index:0;overflow:hidden;will-change:opacity;contain:layout paint;animation:introO 2.4s var(--ease) backwards}
.tilt{position:absolute;inset:0;translate:-0.5vw 3.5vh;scale:1.07;animation:intro2 2.4s var(--ease) backwards;transform-style:preserve-3d;transform-origin:50% 50% calc(var(--R)*-1);transform:rotateX(-16.5deg) rotateZ(-11.5deg)}
@keyframes intro{from{opacity:0;scale:.7}to{opacity:1;scale:1}}@keyframes intro2{from{scale:.75}}@keyframes introO{from{opacity:0}}
.pivot{position:absolute;left:52%;top:24%;width:0;height:0;transform-style:preserve-3d;transform:translateZ(calc(var(--R)*-1))}
.ring{will-change:transform;--w:calc(var(--R)*6.2832/var(--S) + 1px);--h:calc(var(--R)*6.2832/var(--n)*.625);position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;animation:rot 140s linear infinite}
@keyframes rot{to{transform:rotateY(360deg)}}
.sl{position:absolute;left:calc(var(--w)/-2);top:calc(var(--h)/-2);width:var(--w);height:var(--h);background-repeat:no-repeat;transform-style:flat;transform:rotateY(calc(var(--k)*(360deg/var(--S)))) translateZ(var(--R))}
.sl::after{display:none;content:"";position:absolute;top:0;bottom:0;left:.5px;right:.5px;background:rgba(var(--bgc),.6);transform:rotateY(180deg) translateZ(1px);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 55% 42%,transparent 25%,rgba(var(--bgc),.65) 80%),linear-gradient(transparent 38%,var(--b) 98%)}
.hb{position:relative;z-index:4;align-items:end}
.hl{grid-column:1/3}
h1{font-weight:400;font-size:clamp(26px,2.85vw,46px);line-height:1.04;letter-spacing:-.035em;margin-bottom:18px}
.sub{max-width:44ch;font-size:14px;line-height:1.6;color:rgba(var(--fg),.78);margin-bottom:26px}
.lnk{display:inline-flex;align-items:center;padding:13px 26px;border-radius:var(--rad);background:var(--w);color:var(--b);font-family:var(--sans);font-size:16px;font-weight:500;letter-spacing:-.005em;line-height:1;transition:background .6s var(--ease),color .6s var(--ease)}
.lnk:hover{background:rgba(var(--fg),.16);color:var(--w);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.hr{grid-column:4;text-align:right}
.scroll{display:inline-flex;align-items:center;gap:10px}.scroll b{width:1px;height:28px;background:var(--w35);position:relative;overflow:hidden}
.scroll b::after{content:"";position:absolute;left:0;top:-100%;width:1px;height:100%;background:var(--w);animation:ln 2s var(--ease) infinite}
@keyframes ln{to{top:100%}}

/* section head */
.sec-h{position:relative;margin-bottom:clamp(48px,7vw,104px);align-items:start}
.sec-h h2{grid-column:2/4;font-weight:400;font-size:clamp(22px,2.25vw,34px);line-height:1.15;letter-spacing:-.03em}

/* work */
#work{padding-top:20vh;padding-bottom:14vh}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);row-gap:clamp(40px,5vw,84px)}
.tile{display:block;padding-inline:var(--in);grid-column:1/3}
.tile:nth-child(even){grid-column:3/5;margin-top:clamp(50px,9vw,150px)}
.pic{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:var(--rad);border:1px solid var(--w12);background:var(--w06);transition:border-color .4s}
.pic .im{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(18px) brightness(.5);transform:scale(1.15);transition:filter 1.5s var(--ease),transform 1.5s var(--ease)}
.tile.in .im{filter:none;transform:none}
.tile:hover .pic{border-color:var(--w35)}
.pic .tg{position:absolute;left:10px;top:10px;z-index:2}
.cur{position:fixed;left:0;top:0;width:0;height:0;z-index:70;pointer-events:none;will-change:translate}
.cb{position:absolute;left:-52px;top:-52px;width:104px;height:104px;border-radius:50%;background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);scale:.2;opacity:0;transition:scale .7s var(--ease),opacity .4s}
.ct{position:absolute;left:-52px;top:-52px;width:104px;height:104px;display:grid;place-items:center;font-size:13px;font-weight:500;color:#fff;opacity:0;transform:translateY(6px);transition:opacity .4s .05s,transform .6s var(--ease)}
.cur.on .cb{scale:1;opacity:1}.cur.on .ct{opacity:1;transform:none}
.cur-t{z-index:71}.cur-t .ct{color:#000;font-weight:500;transition:opacity .4s .05s,transform .6s var(--ease),color .45s}
.cb{transition:scale .7s var(--ease),opacity .4s,background-color .45s,box-shadow .45s}
.cur.dk .cb{background:rgba(10,10,10,.62);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}.cur-t.dk .ct{color:#fff}
@media(hover:hover) and (pointer:fine){.pic{cursor:none}}
.cap{margin-top:14px;display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.cap .nm{font-size:14px;font-weight:500;letter-spacing:-.01em}
.cap2{margin-top:2px}
.p0{background:radial-gradient(circle at 30% 28%,#fff,transparent 34%),radial-gradient(circle at 78% 82%,#777,transparent 45%),#050505}
.p1{background:repeating-linear-gradient(90deg,#fff 0 1px,#000 1px 14px),#000}
.p2{background:conic-gradient(from 90deg at 50% 60%,#000,#fff,#000 40%,#555 70%,#000)}
.p3{background:radial-gradient(ellipse at 50% 120%,#fff,transparent 60%),repeating-linear-gradient(0deg,#222 0 1px,#000 1px 18px)}
.p4{background:radial-gradient(circle at 50% 50%,#000 0 18%,#fff 19% 21%,#000 22% 38%,#aaa 39% 40%,#000 41%)}
.p5{background:linear-gradient(160deg,#000 20%,#9a9a9a 55%,#000 80%)}
.pic .im.ph2{display:block;opacity:.85}

/* about */
#about{padding-top:12vh;padding-bottom:16vh}
.about{position:relative;row-gap:clamp(28px,4vw,56px);align-items:start}
.about .lbl{grid-column:1}
.av{grid-column:1;grid-row:2/5;position:relative}
.avf{position:relative;aspect-ratio:4/5;border-radius:var(--rad);border:0;background:#161616;overflow:hidden;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease)}
.avf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08)}
.avph{position:absolute;inset:0;display:grid;place-items:center;text-align:center}

.cr{position:absolute;width:10px;height:10px;border:1px solid var(--w60)}
.cr.a{left:8px;top:8px;border-right:0;border-bottom:0}.cr.b{right:8px;top:8px;border-left:0;border-bottom:0}.cr.c{left:8px;bottom:8px;border-right:0;border-top:0}.cr.d{right:8px;bottom:8px;border-left:0;border-top:0}
.av .m.cp{margin-top:12px}
.about .txt{grid-column:2/-1;grid-row:2;font-size:clamp(21px,2.25vw,34px);line-height:1.18;letter-spacing:-.03em;max-width:30em}
.txt .w{opacity:.14;transition:opacity .35s}.txt .w.on{opacity:1}
.desc{grid-column:2/4;grid-row:3;display:grid;grid-template-columns:1fr 1fr;gap:var(--in);padding:0!important}
.desc p{padding-inline:var(--in);font-size:14px;line-height:1.75;color:var(--w60)}
.desc h4{grid-column:1/-1;padding-inline:var(--in);font-weight:500;font-size:15px;letter-spacing:-.01em;margin-bottom:-6px}
.fct{grid-row:4;border-top:1px solid var(--w12);padding-top:16px;margin-top:clamp(10px,3vw,40px)}
.fct .big{font-size:clamp(32px,3.65vw,58px);letter-spacing:-.045em;line-height:1;margin:14px 0 12px}
.fct ul{list-style:none;margin-top:12px}.fct li{padding:6px 0;border-bottom:1px solid var(--w06)}

/* contacts */
#contact{min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;padding-top:16vh;padding-bottom:calc(var(--pad) + 74px);overflow:hidden}
.blob{position:absolute;left:50%;bottom:-34%;width:70vw;height:46vw;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(var(--fg),.13),transparent 65%);animation:fl 9s ease-in-out infinite alternate;z-index:0}
@keyframes fl{to{transform:translateX(-40%) scale(1.15)}}
.c-top{position:relative;z-index:2}
.c-top p{grid-column:2/4;font-size:clamp(21px,2.25vw,34px);letter-spacing:-.03em;line-height:1.18}
.clist{position:relative;z-index:4;border-top:1px solid var(--w12);margin:9vh 0}
.crow{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;padding-block:clamp(20px,2.6vw,38px);border-bottom:1px solid var(--w12);transition:color .5s var(--ease)}
.crow>*{padding-inline:var(--in)}
.crow::before{content:"";position:absolute;inset:0;border-radius:var(--rad);background:var(--w);transform:scaleY(0);transform-origin:bottom;transition:transform .6s var(--ease);z-index:-1}
.crow:hover::before{transform:scaleY(1)}.crow:hover{color:var(--b)}.crow:hover .m{color:rgba(var(--bgc),.6)}
.crow .cv{grid-column:2/4;font-size:clamp(22px,3.05vw,46px);letter-spacing:-.04em;line-height:1.05;transition:transform .6s var(--ease)}
.crow:hover .cv{transform:translateX(14px)}.crow .ar{text-align:right}
.c-bot{position:relative;z-index:2;align-items:center}
.c-bot a{transition:color .3s}.c-bot a:hover{color:var(--w)}
header .r{display:flex;justify-content:flex-end;gap:24px}
header .clk{display:flex;align-items:center;gap:8px;color:rgba(var(--fg),.7)}.pin{width:11px;height:13px;flex:none}
header .r{display:flex;justify-content:flex-end}
.dock{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:80;display:flex;align-items:center;padding:4px;border-radius:15px;background:rgba(16,16,16,.55);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border:1px solid rgba(var(--fg),.06);box-shadow:0 14px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(var(--fg),.045);opacity:0;transform:translate(-50%,14px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.dock.in{opacity:1;transform:translate(-50%,0)}
.dock a.k{padding:10px 15px;border-radius:11px;font-size:13px;line-height:1;letter-spacing:-.005em;color:rgba(var(--fg),.5);transition:color .35s,background .35s}
.dock a.k:hover{color:var(--w)}.dock a.k.on{color:var(--w);background:rgba(var(--fg),.09)}
.dock i.sp{width:1px;height:16px;background:rgba(var(--fg),.14);margin:0 15px 0 0;transition:opacity .35s}.dock a.k.on+i.sp{opacity:0}
.dock a.t{display:grid;place-items:center;width:34px;height:34px;margin-left:0;border-radius:11px;background:var(--w);color:var(--b);transition:background .35s,color .35s}
.dock a.t:hover{background:rgba(var(--fg),.18);color:var(--w)}.dock a.t svg{width:15px;height:15px;transform:translate(-.75px,-.25px)}
html.lite .dock{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(14,14,14,.92)}
.arw{display:inline-block;width:.78em;height:.78em;margin-left:.5em;vertical-align:-.03em}
.dot{display:block;flex:none;width:6px;height:6px;border-radius:50%;background:var(--w);position:relative;top:.5px;animation:pl 2s infinite}
.c-bot span:nth-child(2){display:flex;align-items:center;gap:9px}
@keyframes pl{50%{opacity:.2}}

@media(max-width:760px){
 .dock a.k{padding:10px 9px;font-size:12.5px;white-space:nowrap}.dock i.sp{margin:0 9px 0 0}header>span:empty{display:none}header .r{grid-column:2}#hero{padding-bottom:calc(var(--pad) + 80px)}
 .cur{display:none}
 .g4,.crow{grid-template-columns:1fr 1fr}.tiles{grid-template-columns:1fr}
 .grid{grid-template-columns:repeat(2,1fr)}.grid i:nth-child(n+3){display:none}
 header .clk{display:none}
 .hl{grid-column:1/-1}.stage{--R:127vw}.pivot{top:30%}
 .sec-h h2,.about .txt,.desc,.c-top p,.crow .cv{grid-column:1/-1}.crow .m:first-child{grid-column:1/-1}.crow .ar{display:none}
 .about .lbl{grid-column:1/-1}.av{grid-column:1/-1;grid-row:auto;max-width:260px}.about .txt,.desc{grid-row:auto}.desc{grid-template-columns:1fr}
 .fct{grid-row:auto;grid-column:1/-1}
 .tile,.tile:nth-child(even){grid-column:1/-1;margin-top:0}

}
html.lite .grain{display:none}
html.lite .cb{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.82)}
html.lite .sl::after{display:none}
html.lite .blob{animation:none}
html.lite .lnk:hover{backdrop-filter:none;-webkit-backdrop-filter:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.fade,.reveal-l>span{opacity:1;filter:none;transform:none}}

.avph[hidden]{display:none}
.glyph{width:12px;height:12px;flex:none}
.view{display:none}.view.on{display:block;animation:vin .6s var(--ease)}
@keyframes vin{from{opacity:0;transform:translateY(12px)}}
.view.out{opacity:0;transition:opacity .22s}
.foot[hidden]{display:none}
footer.foot{position:relative;z-index:2;padding:40px var(--pad) calc(var(--pad) + 74px);align-items:center}
.ab{position:relative;z-index:5;margin:clamp(64px,9vw,130px) var(--in) 0;min-height:clamp(340px,30vw,420px);border-radius:16px;background:#0e0e0e;border:0;overflow:hidden;isolation:isolate;display:flex;align-items:center}
.ab-c{position:relative;z-index:3;padding:clamp(28px,4vw,64px);max-width:640px}
.ab-tag{display:flex;align-items:center;gap:10px}.ab-tag i{width:7px;height:7px;border-radius:50%;background:var(--w);animation:pl 2s infinite}.ab .ab-tag{color:var(--w)}
.ab-h{margin:clamp(16px,2vw,24px) 0 clamp(26px,3vw,40px);font-weight:400;font-size:clamp(28px,3.1vw,48px);line-height:1.04;letter-spacing:-.04em}
.ab-h span{display:block;color:var(--w);font-weight:300}
.ab-bt{display:flex;flex-wrap:wrap;gap:10px}
.ab-o{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:var(--rad);border:1px solid rgba(var(--fg),.2);font-size:16px;font-weight:500;line-height:1;transition:background .4s,border-color .4s}
.ab-o:hover{background:rgba(var(--fg),.16);border-color:transparent}.ab-o svg{width:16px;height:16px}
.ab-w{position:absolute;right:-6%;top:-20%;bottom:-20%;width:86%;z-index:1;perspective:1100px;-webkit-mask-image:linear-gradient(90deg,transparent 10%,rgba(0,0,0,.04) 20%,rgba(0,0,0,.18) 30%,rgba(0,0,0,.45) 40%,rgba(0,0,0,.75) 50%,#000 62%);mask-image:linear-gradient(90deg,transparent 10%,rgba(0,0,0,.04) 20%,rgba(0,0,0,.18) 30%,rgba(0,0,0,.45) 40%,rgba(0,0,0,.75) 50%,#000 62%)}
.ab-p{position:absolute;inset:0 0 0 20%;display:flex;align-items:flex-start;gap:14px;transform:rotateX(24deg) rotateY(-14deg) rotateZ(-14deg);transform-style:preserve-3d;transition:transform 1.2s var(--ease)}
.ab:hover .ab-p{transform:rotateX(20deg) rotateY(-10deg) rotateZ(-12deg) scale(1.04)}
.ab-col{flex:1;display:flex;flex-direction:column;gap:0;animation:abv 60s linear infinite;will-change:transform}
.ab-col:nth-child(2){animation-direction:reverse;animation-duration:72s}.ab-col:nth-child(3){animation-duration:66s}
.ab-col i{flex:none;margin-bottom:14px;aspect-ratio:16/10;border-radius:10px;background-size:cover;background-position:top;border:1px solid var(--w12);filter:brightness(.55) saturate(.7);transition:filter .8s var(--ease)}
.ab:hover .ab-col i{filter:brightness(.85) saturate(1)}
@keyframes abv{to{transform:translateY(-50%)}}
.ab.paused .ab-col{animation-play-state:paused}

.ab-st{position:absolute;right:clamp(20px,3vw,44px);top:clamp(20px,3vw,40px);z-index:3;display:flex;align-items:center;gap:14px;padding:12px 16px 12px 18px;border-radius:var(--rad);background:#fff;color:#000;border:0}
.ab-st b{font-weight:400;font-size:30px;letter-spacing:-.04em;line-height:1}.ab-st span{font-size:14px;font-weight:500;line-height:1.3;color:rgba(0,0,0,.62)}
html.lite .ab-st{background:#fff}
@media(max-width:760px){.ab{align-items:flex-end;min-height:520px}.ab-w{width:130%;right:-30%;top:-10%;bottom:30%;-webkit-mask-image:linear-gradient(transparent,#000 30%,#000 60%,transparent);mask-image:linear-gradient(transparent,#000 30%,#000 60%,transparent)}.ab-st{top:20px;bottom:auto;right:20px}}
.top-row{margin-bottom:clamp(36px,5vw,72px);align-items:center}
.crumbs{grid-column:1/4;display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.crumbs a{transition:color .3s}.crumbs a:hover{color:var(--w)}
.crumbs i{width:4px;height:4px;border-radius:50%;background:rgba(var(--fg),.3)}
.crumbs b{font-weight:400;color:var(--w)}
.top-row .nav2{grid-column:4;display:flex;justify-content:flex-end;gap:6px}
.nav2 a{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;border:1px solid var(--w12);transition:background .35s,border-color .35s}
.nav2 a:hover{background:rgba(var(--fg),.12);border-color:transparent}.nav2 svg{width:12px;height:12px}
.wk-bar{margin-top:clamp(24px,3vw,40px);align-items:center}
.wk-bar .chips{grid-column:1/4}
.vt{grid-column:4;justify-self:end;display:flex;padding:3px;margin-right:var(--in);border-radius:12px;border:1px solid var(--w12)}
.vt button{display:flex;align-items:center;gap:7px;font:inherit;font-size:13px;padding:7px 12px;border:0;border-radius:9px;background:none;color:rgba(var(--fg),.55);cursor:pointer;transition:color .3s,background .3s}
.vt button svg{width:13px;height:13px;fill:currentColor}.vt button:hover{color:var(--w)}.vt button.on{background:rgba(var(--fg),.1);color:var(--w)}
.bc.f{grid-column:1/-1}.bc.f .pic{aspect-ratio:21/9}.bc.f .pic .im{object-position:top}
.bc.f .cap .nm{font-size:clamp(22px,2.4vw,36px);letter-spacing:-.035em;font-weight:400}
.bc.f .cap{margin-top:18px}
.ftag{position:absolute;left:14px;top:14px;z-index:2;padding:7px 11px;border-radius:9px;background:rgba(0,0,0,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:12.5px;color:#fff}
.wlist{margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--w12)}
.wr{position:relative;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;padding-block:clamp(18px,2.2vw,30px);border-bottom:1px solid var(--w12)}
.wr>*{padding-inline:var(--in)}
.wr .n{grid-column:2/4;display:flex;align-items:baseline;gap:16px;font-size:clamp(24px,3.2vw,50px);letter-spacing:-.045em;line-height:1;transition:transform .6s var(--ease)}
.wr .n em{font-style:normal;font-size:13px;letter-spacing:0;color:rgba(var(--fg),.45)}
.wr .ar{text-align:right;display:flex;justify-content:flex-end;align-items:center;gap:18px}
.wr .ar .arw{opacity:0;transform:translate(-6px,6px);transition:opacity .4s,transform .5s var(--ease);margin:0}
@media(hover:hover){.wr:hover .n{transform:translateX(14px)}.wr:hover .ar .arw{opacity:1;transform:none}}
.wr .th{display:none}
.lp{position:fixed;left:0;top:0;z-index:60;width:clamp(260px,24vw,380px);aspect-ratio:16/10;margin:-120px 0 0 30px;pointer-events:none;border-radius:var(--rad);overflow:hidden;opacity:0;scale:.8;transition:opacity .35s,scale .6s var(--ease);box-shadow:0 30px 60px rgba(0,0,0,.6);will-change:translate,transform}
.lp.on{opacity:1;scale:1}
.lp i{position:absolute;inset:0;background-size:cover;background-position:top}
.subct{position:relative;z-index:2;padding:clamp(60px,9vw,130px) var(--pad) 0}
.subct .clist{margin:clamp(36px,5vw,64px) 0 0}
.subct[hidden]{display:none}

@media(max-width:760px){.crumbs{grid-column:1/-1}.top-row .nav2{display:none}.wk-bar .chips{grid-column:1/-1}.vt{grid-column:1/-1;justify-self:start;margin:12px 0 0 var(--in)}
 .bc.f .pic{aspect-ratio:16/10}.wr{grid-template-columns:calc(72px + var(--in)) 1fr}.wr .th{display:block;grid-column:1;grid-row:1/3;width:72px;aspect-ratio:16/10;border-radius:8px;background-size:cover;background-position:top;padding:0;margin-left:var(--in)}
 .wr .n{grid-column:2;font-size:22px}.wr .ar{display:none}.wr>.m:first-child{display:none}.wr .cat{grid-column:2}.lp{display:none}}
.pj-h .pj-t{grid-column:1/4}
.pj-btn .hb-btn .arw{width:10px;height:10px;margin-left:8px}
.shots{margin:clamp(32px,4vw,56px) var(--in) 0;border-radius:var(--rad);overflow:hidden;background:var(--w06)}
.shots img{display:block;width:100%;height:auto}
.pj-txt{display:grid;grid-template-columns:1fr 2fr 1.15fr;gap:clamp(20px,3vw,48px);align-items:start;margin:clamp(20px,2.5vw,32px) var(--in) 0;padding:clamp(28px,3.6vw,56px) clamp(36px,5vw,84px) clamp(28px,3.6vw,56px) clamp(28px,3.6vw,56px);border-radius:16px;background:#111}
.pj-d{padding-right:clamp(16px,4vw,80px)}
.pj-d h3{font-weight:400;font-size:clamp(18px,1.7vw,26px);line-height:1.3;letter-spacing:-.025em}
.pj-d p{margin-top:18px;font-size:14px;line-height:1.75;color:rgba(var(--fg),.6);max-width:56ch}
.pj-txt p.x{grid-column:auto;font-size:clamp(18px,1.7vw,26px);line-height:1.3;letter-spacing:-.025em}
.pj-txt ul{grid-column:auto;list-style:none;margin-top:-9px}
.pj-txt li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--w06);color:var(--w)}
.pj-txt li span{color:rgba(var(--fg),.5)}
@media(max-width:760px){.pj-h .pj-t{grid-column:1/-1}.pj-txt{grid-template-columns:1fr;row-gap:18px}.pn-row{grid-template-columns:1fr!important;row-gap:40px}.pn-tile{height:auto!important}}
.pn-row .pn{grid-column:auto!important;margin-top:0!important}.pn-mid{display:block;padding-inline:var(--in)}
.pn-c{justify-content:center;min-height:26px}
.pn-tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:12px;border-radius:var(--rad);background:#111;overflow:hidden;transition:background .5s var(--ease)}
.pn-g{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:6px;transition:gap .6s var(--ease)}
.pn-g i{min-height:0;border-radius:6px;background-size:cover;background-position:top;filter:brightness(.7) saturate(.8);transition:filter .6s var(--ease),transform .6s var(--ease)}
.pn-g i:nth-child(1){transform-origin:100% 100%}.pn-g i:nth-child(2){transform-origin:0 100%}.pn-g i:nth-child(3){transform-origin:100% 0}.pn-g i:nth-child(4){transform-origin:0 0}
.pn-t{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:14px 4px 2px}
.pn-t b{font-weight:500;font-size:clamp(15px,1.3vw,19px);letter-spacing:-.025em;line-height:1.1}.pn-t span{font-size:13px;color:rgba(var(--fg),.45)}
.pn-mid:hover .pn-tile{background:#1a1a1a}.pn-mid:hover .pn-g{gap:9px}.pn-mid:hover .pn-g i{filter:none;transform:scale(.96) rotate(-2deg)}
.pn-mid:hover .pn-g i:nth-child(even){transform:scale(.96) rotate(2deg)}
.pn-head{margin-top:clamp(100px,12vw,180px);margin-bottom:clamp(28px,3vw,44px);align-items:center}
.pn-hr{grid-column:3/5;display:flex;justify-content:flex-end}
.pn-allb{display:inline-flex;align-items:center;gap:9px;height:36px;padding:0 14px 0 12px;border-radius:10px;background:rgba(var(--fg),.1);font-size:14px;font-weight:500;transition:background .35s}
.pn-allb svg{width:13px;height:13px;fill:currentColor;transition:transform .6s var(--ease)}.pn-allb em{font-style:normal;font-weight:400;color:rgba(var(--fg),.45)}
.pn-allb:hover{background:rgba(var(--fg),.18)}.pn-allb:hover svg{transform:rotate(90deg)}
.pn-row{display:grid;grid-template-columns:1fr 1fr}
.pn-all{display:flex;justify-content:center;margin-top:clamp(36px,4vw,56px)}
.pn-l{display:flex;align-items:center;gap:10px;margin-bottom:14px}.pn-l.r{justify-content:flex-end}
.pn-l i{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:rgba(var(--fg),.1);transition:background .35s,transform .5s var(--ease)}.pn-l i svg{width:11px;height:11px}
.pn:hover .pn-l i{background:var(--w);color:var(--b)}.pn:not(:hover) .pn-l i{color:var(--w)}
.pn:hover .pn-l:not(.r) i{transform:translateX(-4px)}.pn:hover .pn-l.r i{transform:translateX(4px)}
.pj,.wk{padding-top:clamp(100px,12vw,150px);padding-bottom:clamp(30px,5vw,70px)}
.pj-top{align-items:center;margin-bottom:clamp(36px,5vw,72px)}
.bk{display:inline-flex;align-items:center;transition:opacity .3s}.bk:hover{opacity:.6}.arw.l{margin:0 .55em 0 0}
.pj-h,.wk-h{align-items:end}
.pj-h{margin-bottom:clamp(8px,2vw,24px)}
.pj-t{grid-column:2/4}.wk-h h1{grid-column:1/4}
.pj-t h1,.wk-h h1{font-weight:400;font-size:clamp(28px,3.4vw,52px);line-height:1.02;letter-spacing:-.04em}
.pj-t p{margin-top:14px;font-size:15px;line-height:1.55;color:var(--w60);max-width:44ch}
.pj-btn{grid-column:4;justify-self:end}
.vis{padding-inline:var(--in);margin-top:clamp(28px,4vw,56px)}
.vf img{display:block;width:100%;height:auto;border-radius:var(--rad);border:1px solid var(--w12);background:var(--w06)}
.pj-meta{margin-top:clamp(36px,5vw,72px)}
.pj-meta>div{border-top:1px solid var(--w12);padding-top:14px}
.pj-meta b{display:block;font-weight:400;font-size:15px;margin-top:8px;line-height:1.4}
.pj-ab{margin-top:clamp(64px,9vw,130px);row-gap:clamp(28px,4vw,52px);align-items:start}
.pj-ab .lead{grid-column:2/-1;font-size:clamp(20px,2.3vw,34px);line-height:1.18;letter-spacing:-.03em;max-width:30em}
.pj-ab .two{grid-column:2/4;display:grid;grid-template-columns:1fr 1fr;padding:0}
.pj-ab .two>div{padding-inline:var(--in)}
.pj-ab h4{font-weight:500;font-size:15px;margin-bottom:10px}
.pj-ab .two p{font-size:14px;line-height:1.75;color:var(--w60)}
.vsplit{margin-top:clamp(20px,3vw,40px)}
.vsplit>div:nth-child(1){grid-column:1/3}.vsplit>div:nth-child(2){grid-column:3/5}
.pj-res{margin-top:clamp(64px,9vw,130px)}
.pj-res .fct{grid-row:auto;margin-top:0}.pj-res .c2{grid-column:2}.pj-res .c3{grid-column:3}.pj-res .c4{grid-column:4}
.pj-l{margin:clamp(56px,8vw,110px) 0 0}
.chips{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:8px}
.chip{font:inherit;font-size:13px;padding:9px 14px;border-radius:10px;border:1px solid var(--w12);background:none;color:rgba(var(--fg),.6);cursor:pointer;transition:color .3s,background .3s,border-color .3s}
.chip:hover{color:var(--w)}.chip.on{background:var(--w);color:var(--b);border-color:var(--w)}.chip em{font-style:normal;opacity:.5;margin-left:6px}
.bento{display:grid;grid-template-columns:repeat(4,1fr);row-gap:clamp(36px,4.5vw,72px);margin-top:clamp(40px,5vw,72px);align-items:start}
.bc.in .im{filter:none;transform:none}
.bc{display:block;padding-inline:var(--in)}.bc.s2{grid-column:span 2}.bc.s1{grid-column:span 1}.bc.o{margin-top:clamp(24px,5vw,80px)}
@media(max-width:760px){
 .pj-t,.pj-ab .lead,.pj-ab .two,.chips,.wk-h h1{grid-column:1/-1}.pj-btn{grid-column:1/-1;justify-self:start;margin-top:18px}
 .pj-ab .two{grid-template-columns:1fr;row-gap:22px}.pj-res .c2,.pj-res .c3,.pj-res .c4{grid-column:1/-1}
 .vsplit>div:nth-child(1),.vsplit>div:nth-child(2){grid-column:1/-1}.vsplit{row-gap:16px}
 .bento{grid-template-columns:1fr}.bc.s1,.bc.s2{grid-column:1/-1}.bc.o{margin-top:0}
 .pj-ab .lbl{grid-column:1/-1}
}
#work{z-index:4}

/* светлая страница проекта */
html.lt{--fg:0,0,0;--bgc:255,255,255;--b:#fff;--w:#000;color-scheme:light}
html,body{transition:background-color .5s var(--ease),color .5s var(--ease)}
html.lt .lg-a{background:#000;color:#fff}
html.lt .dock,html.lt .cur{--fg:255,255,255;--bgc:0,0,0;--b:#000;--w:#fff;color:#fff}
html.lt .dock{background:rgba(14,14,14,.92)}
html.lt .grain{opacity:.03;mix-blend-mode:multiply}
#view-project,#view-about,#view-contact{position:relative;z-index:4}
img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;pointer-events:none}
.pic,.shots,.avf,.ab-w,.stage,.lp,.pn-g{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* страницы «Обо мне» и «Контакты» */
.pg{padding-top:clamp(100px,12vw,150px);padding-bottom:clamp(30px,5vw,70px)}
.pg-h{align-items:end;margin-bottom:clamp(48px,6vw,96px)}
.pg-h h1{grid-column:1/3;font-weight:400;font-size:clamp(36px,4.6vw,72px);line-height:1;letter-spacing:-.045em}
.pg-h p{grid-column:3/5;font-size:15px;line-height:1.6;color:rgba(var(--fg),.6);max-width:44ch}
.ab2{align-items:start;row-gap:32px}
.ab2-ph{grid-column:1/3}.ab2-f{aspect-ratio:4/5;max-height:640px;width:100%}.ab2-ph .cp{margin-top:12px}
.ab2-t{grid-column:3/5}
.ab2-t .lead2{font-size:clamp(20px,2vw,30px);line-height:1.2;letter-spacing:-.03em;color:var(--w);margin-bottom:24px}
.ab2-t p{font-size:15px;line-height:1.75;color:rgba(var(--fg),.62)}
.ab2-t .lead2{max-width:22em}
.ab2-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,40px);margin-top:clamp(24px,3vw,40px)}
.ab2-cols p{margin:0}
.ab2-n{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,40px);margin-top:clamp(48px,6vw,90px)}
.ab2-n>div{padding-top:0}.ab2-n .big{font-size:clamp(30px,3.2vw,50px);letter-spacing:-.045em;line-height:1;margin-bottom:8px}
.sec2{margin:clamp(90px,11vw,170px) 0 clamp(32px,4vw,56px);align-items:start}
.sec2 h2{grid-column:2/4;font-weight:400;font-size:clamp(22px,2.4vw,36px);line-height:1.1;letter-spacing:-.035em}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:0 var(--in)}
.st{padding:clamp(18px,1.8vw,26px);border-radius:var(--rad);background:#111;min-height:220px;display:flex;flex-direction:column;transition:background .4s}
.st:hover{background:#181818}
.st b{display:block;margin:auto 0 10px;font-weight:500;font-size:18px;letter-spacing:-.02em}
.st p{font-size:13.5px;line-height:1.6;color:rgba(var(--fg),.55)}
.svc{border-top:1px solid var(--w12)}
.sv{display:grid;grid-template-columns:repeat(4,1fr);align-items:baseline;padding-block:clamp(18px,2vw,28px);border-bottom:1px solid var(--w12)}
.sv>*{padding-inline:var(--in)}
.sv b{font-weight:400;font-size:clamp(20px,2vw,30px);letter-spacing:-.035em;line-height:1.1}
.sv p{font-size:14px;line-height:1.6;color:rgba(var(--fg),.55)}.sv-t{text-align:right}
.cta2{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:clamp(90px,11vw,170px) var(--in) 0;padding:clamp(28px,3.6vw,56px);border-radius:16px;background:#111}
.cta2 h3{font-weight:400;font-size:clamp(24px,2.6vw,40px);letter-spacing:-.04em;line-height:1.05;margin-top:16px}
.ctw{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(16px,2vw,28px);margin:0 var(--in);align-items:start}
.ct-l{border-top:1px solid var(--w12)}
.ci{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:12px;padding:20px 0;border-bottom:1px solid var(--w12);transition:padding .5s var(--ease)}
.ci b{font-weight:400;font-size:clamp(18px,1.7vw,24px);letter-spacing:-.03em}
.ci .arw{margin:0;opacity:.5;transition:opacity .3s,transform .5s var(--ease)}
a.ci:hover{padding-left:10px}a.ci:hover .arw{opacity:1;transform:translate(2px,-2px)}
.ct-st{display:flex;align-items:center;gap:9px;margin-top:22px;color:var(--w)}
.fm{position:relative;padding:clamp(24px,3vw,44px);border-radius:16px;background:#111}
.fm h3{font-weight:400;font-size:clamp(22px,2vw,30px);letter-spacing:-.035em;margin-bottom:26px}
.fm-r2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fl{display:block;margin-bottom:20px}.fl>.m{display:block;margin-bottom:8px}
.fl input,.fl textarea{width:100%;font:inherit;font-size:15px;color:var(--w);background:rgba(var(--fg),.05);border:1px solid transparent;border-radius:10px;padding:13px 14px;outline:none;resize:vertical;transition:border-color .3s,background .3s}
.fl input::placeholder,.fl textarea::placeholder{color:rgba(var(--fg),.3)}
.fl input:focus,.fl textarea:focus{border-color:rgba(var(--fg),.25);background:rgba(var(--fg),.07)}
.fl input.err{border-color:rgba(255,90,90,.6)}
.ch2{display:flex;flex-wrap:wrap;gap:8px}
.ch2 button{font:inherit;font-size:13.5px;padding:9px 14px;border-radius:10px;border:1px solid var(--w12);background:none;color:rgba(var(--fg),.65);cursor:pointer;transition:all .3s}
.ch2 button:hover{color:var(--w)}.ch2 button.on{background:var(--w);color:var(--b);border-color:var(--w)}
.fm-b{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:8px}.fm-b .m{font-size:12px;max-width:30ch;line-height:1.4}
.fm-b .lnk{border:0;cursor:pointer;font-family:inherit}
.fm-ok{min-height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px}
.fm-ok[hidden]{display:none}.fm-ok p{color:rgba(var(--fg),.6);font-size:15px;margin-bottom:12px}
.ok-i{width:56px;height:56px;border-radius:50%;background:var(--w);color:var(--b);display:grid;place-items:center;margin-bottom:6px;animation:okp .6s var(--ease)}.ok-i svg{width:26px;height:26px}
@keyframes okp{from{transform:scale(.4);opacity:0}}
.fm-ok .ab-o{background:none;color:var(--w);font-family:inherit;cursor:pointer}
.ct-req{display:flex;width:max-content;margin-top:22px;font-size:14px;letter-spacing:0;line-height:1}.hb-btn .arw{width:10px;height:10px;margin-left:8px}
.about-more{margin-top:26px;padding-inline:var(--in)}
@media(max-width:1000px){.steps{grid-template-columns:1fr 1fr}.ctw{grid-template-columns:1fr}}
@media(max-width:760px){.pg-h h1,.pg-h p,.ab2-ph,.ab2-t,.sec2 h2{grid-column:1/-1}.pg-h p{margin-top:16px}.steps{grid-template-columns:1fr}.st{min-height:0}.st b{margin-top:28px}
 .sv{grid-template-columns:1fr}.sv-t{text-align:left}.sv p{margin-top:6px}.ci{grid-template-columns:1fr auto}.ci .m{grid-column:1/-1}.fm-r2{grid-template-columns:1fr}}

.prc{margin:0 var(--in);padding:clamp(26px,3vw,44px);border-radius:16px;background:#111}
.prc-tr{position:relative;height:1px;background:rgba(var(--fg),.12);margin:6px calc(10% - 3px) 34px calc(10% - 3px)}
.prc-fill{position:absolute;left:0;top:0;height:1px;width:0;background:var(--w);transition:width 1.1s var(--ease)}
.prc-tr b{position:absolute;top:-4px;width:9px;height:9px;margin-left:-4px;border-radius:50%;background:#111;border:1px solid rgba(var(--fg),.3);transition:background .6s,border-color .6s,transform .6s var(--ease)}
.prc-tr b:nth-of-type(1){left:0!important}.prc-tr b:nth-of-type(2){left:25%!important}.prc-tr b:nth-of-type(3){left:50%!important}.prc-tr b:nth-of-type(4){left:75%!important}.prc-tr b:nth-of-type(5){left:100%!important}
.prc-c{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.6vw,24px)}
.ps{text-align:center;padding:0 4px;cursor:default;opacity:.38;transition:opacity .6s var(--ease)}
.ps.on,.ps.done{opacity:1}.ps.done{opacity:.62}
.ps-n{display:block;margin-bottom:12px}
.ps b{display:block;font-weight:500;font-size:clamp(16px,1.4vw,20px);letter-spacing:-.025em;margin-bottom:8px;transition:transform .6s var(--ease)}
.ps p{font-size:13.5px;line-height:1.55;color:rgba(var(--fg),.55);max-width:26ch;margin:0 auto}
.ps-t{display:inline-block;margin-top:14px;padding:5px 10px;border-radius:8px;font-size:12.5px;background:rgba(var(--fg),.06);color:rgba(var(--fg),.6);transition:background .5s,color .5s}
.ps.on .ps-t{background:var(--w);color:var(--b)}.ps.on b{transform:translateY(-2px)}
.sv2{position:relative;isolation:isolate;cursor:default;transition:padding .5s var(--ease)}
.sv2::before{content:"";position:absolute;inset:0;border-radius:var(--rad);background:#111;opacity:0;transform:scaleY(.85);transition:opacity .45s,transform .6s var(--ease);z-index:-1}
.sv2:hover::before{opacity:1;transform:none}
.sv2 b{transition:transform .6s var(--ease)}.sv2:hover b{transform:translateX(12px)}
.sv2 .sv-t{display:flex;justify-content:flex-end;align-items:center;gap:14px}
.sv2 .sv-t em{font-style:normal;font-size:13px;padding:6px 11px;border-radius:9px;background:rgba(var(--fg),.07);color:rgba(var(--fg),.7)}
.sv2 .arw{margin:0;opacity:0;transform:translate(-6px,6px);transition:opacity .4s,transform .5s var(--ease)}.sv2:hover .arw{opacity:1;transform:none}
.xp2{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 var(--in)}
.xc{display:flex;flex-direction:column;min-height:230px;padding:clamp(20px,2vw,30px);border-radius:var(--rad);background:#111;transition:background .4s}
.xc:hover{background:#171717}
.xc-top{display:flex;justify-content:space-between;align-items:center}
.xc-y{font-size:clamp(20px,1.9vw,28px);font-weight:300;letter-spacing:-.04em}
.xc-now{display:flex;align-items:center;gap:7px;font-size:12.5px;padding:6px 10px;border-radius:9px;background:var(--w);color:var(--b)}.xc-now i{width:6px;height:6px;border-radius:50%;background:var(--b);animation:pl 2s infinite}
.xc b{margin-top:auto;font-weight:400;font-size:clamp(18px,1.6vw,24px);letter-spacing:-.03em;line-height:1.15}.xc .m{margin-top:6px}
#ab2{margin-top:clamp(90px,11vw,170px)}
@media(max-width:1000px){.prc-c{grid-template-columns:1fr 1fr;row-gap:28px}.prc-tr{display:none}.ps{opacity:1;text-align:left}.ps p{margin:0}.xp2{grid-template-columns:1fr}}
@media(max-width:760px){.prc-c{grid-template-columns:1fr}.sv2 .sv-t{justify-content:flex-start;margin-top:10px}}
.prc-tr b.on{background:var(--w);border-color:var(--w)}.prc-tr b.cur{transform:scale(1.5);box-shadow:0 0 0 5px rgba(255,255,255,.08)}

.stc{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:0 var(--in)}
.sc{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;min-height:310px;padding:clamp(18px,1.7vw,24px);border-radius:var(--rad);background:#111;transition:background .5s}
.sc{isolation:isolate;background:#0d0d0d}
.sc::before{content:"";position:absolute;z-index:-1;inset:-30%;background:radial-gradient(closest-side,rgba(255,255,255,var(--gl)),transparent);transform:translate(var(--gx),var(--gy));animation:scg 9s ease-in-out infinite alternate;transition:opacity .6s}
.sc::after{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;background:linear-gradient(180deg,transparent 45%,rgba(13,13,13,.92) 82%)}
.sc:nth-child(1){--gl:.10;--gx:30%;--gy:-25%}.sc:nth-child(2){--gl:.15;--gx:-25%;--gy:-30%}.sc:nth-child(3){--gl:.21;--gx:25%;--gy:-20%}.sc:nth-child(4){--gl:.28;--gx:-20%;--gy:-28%}.sc:nth-child(5){--gl:.38;--gx:15%;--gy:-25%}
.sc:nth-child(2)::before{animation-delay:-2s}.sc:nth-child(3)::before{animation-delay:-4s}.sc:nth-child(4)::before{animation-delay:-6s}.sc:nth-child(5)::before{animation-delay:-8s}
@keyframes scg{to{transform:translate(calc(var(--gx)*-1),calc(var(--gy)*.4)) scale(1.15)}}
.sc:hover::before{--gl:.45}
.sc-top .m{color:rgba(255,255,255,.7)}.sc-t{background:rgba(255,255,255,.12)!important;color:#fff!important}
.sc-a{position:absolute;left:20%;top:50px;width:60%;fill:none;stroke:rgba(255,255,255,.75);stroke-width:1.1;transition:stroke .6s,transform 1s var(--ease)}
.sc-a .dt{fill:#fff;stroke:none}
.sc:hover .sc-a{stroke:#fff;transform:scale(1.06) rotate(-3deg)}
.sc-a.a4{animation:scr 22s linear infinite;transform-origin:50% 50%}.sc-a.a4 circle:nth-child(3){}
@keyframes scr{to{rotate:360deg}}
.sc-a.a0 circle{animation:scb 4s ease-in-out infinite alternate}.sc-a.a0 circle:nth-child(2){animation-delay:-2s}
@keyframes scb{to{transform:translateX(6px)}}
.sc-a.a2 circle:first-of-type{transform-origin:84px 62px;animation:scp 5s ease-in-out infinite alternate}
@keyframes scp{to{transform:scale(.8)}}
.sc-a.a3 path{stroke-dasharray:240;animation:scd 6s ease-in-out infinite alternate}
@keyframes scd{from{stroke-dashoffset:240}to{stroke-dashoffset:0}}
.sc-a.a1 rect:nth-of-type(2){animation:scy 3s ease-in-out infinite alternate}
@keyframes scy{to{transform:translateY(-6px)}}
.sc-top{position:relative;display:flex;justify-content:space-between;align-items:center}
.sc-t{font-size:12.5px;padding:5px 10px;border-radius:8px;background:rgba(var(--fg),.08);color:rgba(var(--fg),.7)}
.sc-b{position:relative}
.sc-b b{display:block;font-weight:500;font-size:clamp(17px,1.4vw,21px);letter-spacing:-.025em;margin-bottom:8px}
.sc-b p{font-size:13.5px;line-height:1.55;color:rgba(var(--fg),.55)}
.svg2{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:0 var(--in)}
.sg{grid-column:span 2;border-radius:var(--rad);background:#111;overflow:hidden;display:flex;flex-direction:column}.sg.w{grid-column:span 3}
.sg-i{position:relative;aspect-ratio:16/9;margin:8px 8px 0;border-radius:8px;overflow:hidden;background:#0a0a0a}
.sg-i i{position:absolute;inset:0;background-repeat:no-repeat;opacity:0;transform:scale(1.08);transition:opacity 1s var(--ease),transform 4.5s linear}
.sg-i i.on{opacity:1;transform:scale(1)}
.sg-bars{position:absolute;left:10px;right:10px;top:10px;z-index:2;display:flex;gap:4px}
.sg-bars b{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden}
.sg-bars b::after{content:"";display:block;height:100%;width:0;background:#fff}
.sg-bars b.done::after{width:100%}.sg-bars b.on::after{width:100%;transition:width var(--d,3200ms) linear}
.sg-i::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.35),transparent 30%);pointer-events:none}
.sg.w .sg-i{aspect-ratio:16/8}
.sg{transition:background .4s}.sg:hover{background:#161616}.sg-b b{transition:transform .6s var(--ease)}.sg:hover .sg-b b{transform:translateX(6px)}
.sg-b{flex:1;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:18px 20px 22px}
.sg-b b{display:block;font-weight:400;font-size:clamp(19px,1.7vw,26px);letter-spacing:-.03em;line-height:1.1;margin-bottom:8px}
.sg-b p{font-size:13.5px;line-height:1.55;color:rgba(var(--fg),.55);max-width:34ch}
.sg-t{flex:none;font-size:12.5px;padding:5px 10px;border-radius:8px;background:rgba(var(--fg),.08);color:rgba(var(--fg),.7);white-space:nowrap}
@media(max-width:1000px){.stc{grid-template-columns:1fr 1fr}.svg2{grid-template-columns:1fr 1fr}.sg,.sg.w{grid-column:span 1}}
@media(max-width:760px){.stc,.svg2{grid-template-columns:1fr}.sc{min-height:220px}.ab2-cols{grid-template-columns:1fr}.ab2-n{grid-template-columns:repeat(3,1fr)}}
@media(min-width:761px){.ab2-t{align-self:stretch;display:flex;flex-direction:column;padding-bottom:34px}.ab2-n{margin-top:auto;padding-top:48px}}
.ab-chat{min-height:clamp(380px,32vw,440px)}
.chat{position:absolute;right:clamp(24px,5vw,80px);top:0;bottom:0;width:min(420px,42%);display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:28px 0;z-index:1;-webkit-mask-image:linear-gradient(transparent,#000 30%);mask-image:linear-gradient(transparent,#000 30%)}
.cm{max-width:78%;padding:11px 14px;border-radius:14px;font-size:14px;line-height:1.45;opacity:0;transform:translateY(10px) scale(.96);animation:cmi .5s var(--ease) forwards}
.cm.th{align-self:flex-start;background:#1c1c1c;color:#fff;border-bottom-left-radius:4px}
.cm.me{align-self:flex-end;background:#fff;color:#000;border-bottom-right-radius:4px}
.cm.out{animation:cmo .5s var(--ease) forwards}
@keyframes cmi{to{opacity:1;transform:none}}@keyframes cmo{from{opacity:1}to{opacity:0;transform:translateY(-8px)}}
.cm.ty{display:flex;gap:4px;padding:14px}.cm.ty i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.4;animation:tyd 1s infinite}.cm.ty i:nth-child(2){animation-delay:.15s}.cm.ty i:nth-child(3){animation-delay:.3s}
@keyframes tyd{50%{opacity:1;transform:translateY(-2px)}}
.cm small{display:block;margin-top:3px;font-size:11px;opacity:.45;text-align:right}
@media(max-width:760px){.ab-chat{min-height:560px;align-items:flex-end}.chat{left:20px;right:20px;width:auto;top:0;bottom:auto;height:290px}}

.acc{display:flex;gap:8px;height:clamp(340px,28vw,400px);margin:0 var(--in)}
.ac{position:relative;flex:1 1 0%;min-width:0;border-radius:var(--rad);background:#0e0e0e;border:1px solid rgba(255,255,255,.06);overflow:hidden;cursor:pointer;transition:flex-grow .9s var(--ease),flex-basis .9s var(--ease),background .5s,border-color .5s}
.ac.on{flex:0 0 calc(50% - var(--in));background:#fff;color:#000;border-color:#fff}
.ac-c{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:22px;transition:opacity .4s}
.ac.on .ac-c{opacity:0;transition:opacity .25s}
.ac-n{font-size:13px;color:rgba(255,255,255,.5)}
.ac-v{font-weight:400;font-size:clamp(18px,1.6vw,24px);letter-spacing:-.03em;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
.ac-o{position:absolute;inset:0;min-width:calc((100vw - 2*var(--pad))/2 - 2*var(--in) - 20px);display:flex;flex-direction:column;justify-content:space-between;padding:clamp(22px,2.4vw,36px);opacity:0;transform:translateY(8px);transition:opacity .2s,transform .5s var(--ease);pointer-events:none}
.ac.on .ac-o{opacity:1;transform:none;transition:opacity .5s .15s,transform .8s .15s var(--ease)}
.ac-h{display:flex;justify-content:space-between;align-items:flex-start}
.ac-big{font-size:clamp(64px,7vw,120px);font-weight:300;letter-spacing:-.07em;line-height:.8}
.ac-t{font-size:13px;padding:6px 11px;border-radius:9px;background:#000;color:#fff}
.ac-b b{display:block;font-weight:400;font-size:clamp(24px,2.4vw,36px);letter-spacing:-.04em;margin-bottom:10px}
.ac-b p{font-size:14.5px;line-height:1.6;color:rgba(0,0,0,.6);max-width:44ch}
.ac-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.ac-tags span{font-size:12.5px;padding:6px 10px;border-radius:8px;border:1px solid currentColor;opacity:.55}
.ac-pr{position:absolute;left:0;bottom:0;height:3px;width:0;background:#000}
.ac.run .ac-pr{width:100%;transition:width var(--d) linear}
.svx{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(16px,2.4vw,40px);margin:0 var(--in);align-items:stretch}
.svx-l{display:flex;flex-direction:column;border-top:1px solid var(--w12)}
.svx-l .sx{flex:1;align-items:center}
.sx{position:relative;display:flex;align-items:baseline;gap:18px;padding:clamp(16px,1.8vw,24px) 0;border:0;border-bottom:1px solid var(--w12);background:none;color:rgba(255,255,255,.28);font:inherit;text-align:left;cursor:pointer;transition:color .5s}
.sx:hover,.sx.on{color:#fff}
.sx-n{font-size:13px;width:22px;flex:none}
.sx-t{font-size:clamp(24px,2.6vw,42px);letter-spacing:-.045em;line-height:1;transition:transform .6s var(--ease)}
.sx.on .sx-t{transform:translateX(8px)}
.sx-p{position:absolute;left:0;bottom:-1px;height:1px;width:0;background:#fff;opacity:0;transition:opacity .6s ease,width 0s linear .6s}.sx.run .sx-p{opacity:1}
.sx.run .sx-p{width:100%;opacity:1;transition:width var(--d) linear,opacity .3s}
.svx-r{display:flex;flex-direction:column;gap:12px}
.svx-v{position:relative;flex:1;min-height:clamp(260px,24vw,360px);border-radius:var(--rad);background:#0e0e0e;overflow:hidden}
.svf{position:absolute;inset:0;background-repeat:no-repeat;opacity:0;transform:scale(1.04);transition:opacity .8s var(--ease),transform 1.6s var(--ease)}
.svf.in{opacity:1;transform:none}
.svf{background-color:#0e0e0e}
.svf[class*=" sB"]{background-size:cover;background-position:50% 4%}
.svs{position:absolute;inset:0}
.svs i{position:absolute;width:58%;aspect-ratio:16/10;border-radius:10px;border:1px solid rgba(255,255,255,.08);background-repeat:no-repeat;box-shadow:0 24px 50px rgba(0,0,0,.55);opacity:0;transition:opacity .7s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--q)*90ms)}
.svs i:nth-child(1){left:6%;top:12%;transform:translate(-30px,20px) rotate(-6deg)}
.svs i:nth-child(2){left:36%;top:30%;z-index:2;transform:translate(30px,30px) rotate(4deg)}
.svs i:nth-child(3){left:22%;top:52%;z-index:3;transform:translate(0,40px) rotate(-2deg)}
.svs.in i{opacity:1}.svs.in i:nth-child(1){transform:rotate(-4deg)}.svs.in i:nth-child(2){transform:rotate(3deg)}.svs.in i:nth-child(3){transform:rotate(-1deg)}
.svs.out i{opacity:0;transition-delay:0s;transform:translateY(-30px) scale(.96)}
.svx-v:hover .svs.in i:nth-child(1){transform:translate(-14px,-6px) rotate(-7deg)}.svx-v:hover .svs.in i:nth-child(2){transform:translate(14px,-4px) rotate(6deg)}
.svx-i{padding:clamp(18px,2vw,26px);border-radius:var(--rad);background:#0e0e0e;opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease}
.svx-i.in{opacity:1;transform:none;transition:opacity .6s,transform .7s var(--ease)}
.svi-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.svi-top b{font-weight:400;font-size:clamp(19px,1.7vw,24px);letter-spacing:-.03em}
.svx-i p{margin-top:10px;font-size:14px;line-height:1.6;color:rgba(255,255,255,.55)}
.svx-i .ac-tags span{opacity:.45}
.ab-chat{min-height:0;align-items:stretch}
.ab-chat .ab-c{padding-block:clamp(36px,4.4vw,64px)}
.ab-pts{display:grid;grid-template-columns:repeat(3,auto);gap:clamp(18px,2.6vw,40px);margin-top:clamp(32px,4vw,52px);padding-top:clamp(20px,2.4vw,28px);border-top:1px solid rgba(255,255,255,.08);width:max-content;max-width:100%}
.ab-pts b{display:block;font-weight:400;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.035em;margin-bottom:4px}
.cw{position:absolute;right:clamp(20px,3vw,44px);top:clamp(20px,3vw,40px);bottom:clamp(20px,3vw,40px);width:min(440px,40%);z-index:2;display:flex;flex-direction:column;border-radius:14px;background:#111;border:1px solid rgba(255,255,255,.06);overflow:hidden}
.cw-h{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.cw-h b{display:block;font-weight:500;font-size:14px}.cw-h span#cws{font-size:12px;color:rgba(255,255,255,.45)}
.cw-av{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;color:#000;font-weight:700;font-size:15px;letter-spacing:-.04em}
.cw-dots{margin-left:auto;display:flex;gap:3px}.cw-dots b{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.35)}
.ab-chat .chat{position:relative;right:auto;top:auto;bottom:auto;width:auto;flex:1;padding:16px;-webkit-mask-image:linear-gradient(transparent,#000 22%);mask-image:linear-gradient(transparent,#000 22%)}
.cw-in{display:flex;align-items:center;justify-content:space-between;margin:0 12px 12px;padding:10px 10px 10px 14px;border-radius:11px;background:rgba(255,255,255,.05);font-size:13.5px;color:rgba(255,255,255,.3)}
.cw-in i{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#fff;color:#000}.cw-in svg{width:13px;height:13px}
@media(max-width:1000px){.svx{grid-template-columns:1fr}.cw{width:46%}}
@media(max-width:760px){.acc{flex-direction:column;height:auto}.ac{flex:none;height:64px}.ac.on{flex:none;height:360px}.ac-v{writing-mode:horizontal-tb;transform:none}.ac-c{flex-direction:row;align-items:center;justify-content:flex-start;gap:16px}
 .ab-chat{flex-direction:column}.cw{position:relative;inset:auto;width:auto;height:340px;margin:0 16px 16px}.ab-pts{grid-template-columns:1fr 1fr 1fr;width:auto}}
.ab-cta{min-height:0;align-items:center;gap:clamp(24px,4vw,64px);padding-right:clamp(28px,3.6vw,56px)}
.ab-cta .ab-c{flex:1;padding-block:clamp(40px,4.6vw,68px)}
.cl2{flex:1;max-width:560px;border-top:1px solid rgba(255,255,255,.1)}
.cl2-r{display:grid;grid-template-columns:110px 1fr auto;align-items:center;gap:12px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.1);transition:padding .5s var(--ease)}
.cl2-r b{font-weight:400;font-size:clamp(17px,1.5vw,22px);letter-spacing:-.03em}
.cl2-r .arw{margin:0;opacity:.45;transition:opacity .3s,transform .5s var(--ease)}
.cl2-r:hover{padding-left:10px}.cl2-r:hover .arw{opacity:1;transform:translate(2px,-2px)}
@media(max-width:900px){.ab-cta{flex-direction:column;align-items:stretch;padding:0 20px 24px}.ab-cta .ab-c{padding:32px 0 8px}.cl2{max-width:none}.cl2-r{grid-template-columns:1fr auto}.cl2-r .m{grid-column:1/-1}}


.svx-v{background:#141414!important}
.svq{position:absolute;inset:0;opacity:0;transform:scale(1.03);transition:opacity .9s ease,transform 1.2s var(--ease);pointer-events:none}.svq.in{transition:opacity .9s ease .15s,transform 1.2s var(--ease) .15s}
.svq.in{opacity:1;transform:none}
.svq svg{width:100%;height:100%;display:block}
.svq *:not([transform]){transform-box:fill-box;transform-origin:center}
.svq:not(.in) *{animation-play-state:paused!important}
/* landing */
.lp-cur{animation:lpc 4s var(--ease) infinite}
@keyframes lpc{0%{transform:translate(690px,380px)}35%,55%{transform:translate(400px,262px)}45%{transform:translate(400px,262px) scale(.85)}100%{transform:translate(690px,380px)}}
.lp-btn{animation:lpb 4s infinite}@keyframes lpb{0%,40%,52%,100%{transform:none}46%{transform:scale(.95)}}
.lp-ring{opacity:0;animation:lpr 4s infinite}@keyframes lpr{0%,45%{opacity:0;transform:none}50%{opacity:.8}75%,100%{opacity:0;transform:scale(1.25,1.6)}}
.lp-toast{opacity:0;animation:lpt 4s var(--ease) infinite}@keyframes lpt{0%,50%{opacity:0;transform:translateY(16px)}60%,90%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px)}}
/* corporate */
.cs-l{animation:csl 1.6s linear infinite}@keyframes csl{to{stroke-dashoffset:-26}}
.cs-n rect:first-child{transition:stroke .4s}
.cs-n{animation:csn 6s infinite}.cs-n1{animation-delay:1.5s}.cs-n2{animation-delay:3s}.cs-n3{animation-delay:4.5s}
@keyframes csn{0%,25%,100%{transform:none;filter:none}8%,18%{transform:translateY(-6px);filter:brightness(1.8)}}
.cs-pulse circle{animation:csp 2s infinite}@keyframes csp{0%{transform:scale(.6);opacity:1}100%{transform:scale(2.6);opacity:0}}
/* ecommerce */
.ec-fly{opacity:0;animation:ecf 3.6s var(--ease) infinite}
@keyframes ecf{0%,20%{opacity:0;transform:translate(493px,300px) scale(1)}28%{opacity:1;transform:translate(493px,300px) scale(1)}62%{opacity:1;transform:translate(620px,74px) scale(.5)}70%,100%{opacity:0;transform:translate(620px,74px) scale(.2)}}
.ec-b{animation:ecb 3.6s infinite}@keyframes ecb{0%,66%,80%,100%{transform:none}72%{transform:scale(1.6)}}
.ec-c4{animation:ecc 3.6s infinite}@keyframes ecc{0%,14%,30%,100%{transform:none}22%{transform:translateY(-6px)}}
/* identity */
.id-arc{stroke-dasharray:260;animation:ida 5s var(--ease) infinite}@keyframes ida{0%{stroke-dashoffset:260}40%,100%{stroke-dashoffset:0}}
.id-dot{animation:idd 5s infinite}@keyframes idd{0%,35%{transform:scale(0)}45%,100%{transform:scale(1)}}
.id-s{animation:ids 5s var(--ease) infinite}.id-s1{animation-delay:.15s}.id-s2{animation-delay:.3s}.id-s3{animation-delay:.45s}
@keyframes ids{0%,10%{transform:translateY(14px);opacity:0}25%,100%{transform:none;opacity:1}}
.id-bar{transform-origin:left center;animation:idb 5s var(--ease) infinite}@keyframes idb{0%,20%{transform:scaleX(0)}60%,100%{transform:scaleX(1)}}
.id-sq{animation:idq 5s infinite}@keyframes idq{0%,100%{stroke:#3a3a3a}40%{stroke:#777}}
/* support */
.sp-g{animation:spg 4s var(--ease) infinite}@keyframes spg{0%{stroke-dashoffset:100}45%,100%{stroke-dashoffset:2}}
.sp-line{stroke-dasharray:100;animation:spl 4s var(--ease) infinite}@keyframes spl{0%{stroke-dashoffset:100}55%,100%{stroke-dashoffset:0}}
.sp-tag{animation:spt 1.6s infinite}@keyframes spt{50%{opacity:.35}}
.sp-ty{transform-origin:left center;transform:scaleX(0);animation:spy 6s steps(12) infinite}
.sp-ty1{animation-delay:.6s}.sp-ty2{animation-delay:1.2s}.sp-ty3{animation-delay:1.8s}.sp-ty4{animation-delay:2.4s}
@keyframes spy{0%{transform:scaleX(0)}12%,85%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}
.svq .sp-ty,.svq .id-bar{transform-origin:left center}
.sp-caret{animation:spc 1s steps(1) infinite}@keyframes spc{50%{opacity:0}}

.ld-scroll{animation:lds 12s linear infinite}@keyframes lds{to{transform:translateY(-800px)}}
.ld-cur{animation:ldc 6s var(--ease) infinite}@keyframes ldc{0%{transform:translate(380px,330px)}30%,45%{transform:translate(170px,262px)}37%{transform:translate(170px,262px) scale(.85)}70%{transform:translate(470px,180px)}100%{transform:translate(380px,330px)}}
.ld-tag{opacity:0;animation:ldt 6s var(--ease) infinite}@keyframes ldt{0%,38%{opacity:0;transform:translateY(16px)}46%,80%{opacity:1;transform:none}90%,100%{opacity:0;transform:translateY(-6px)}}
.cs-prog{transform-origin:left center!important;animation:csg 6s var(--ease) infinite}@keyframes csg{0%{transform:scaleX(.1)}80%,100%{transform:scaleX(1)}}
.ec-fly{opacity:0;animation:ecf2 3.6s var(--ease) infinite}
@keyframes ecf2{0%,18%{opacity:0;transform:translate(267px,198px)}26%{opacity:1;transform:translate(267px,198px)}64%{opacity:1;transform:translate(700px,30px) scale(.5)}72%,100%{opacity:0;transform:translate(700px,30px) scale(.3)}}
.ec-hl{animation:ech 3.6s infinite}@keyframes ech{0%,12%,30%,100%{transform:none}20%{transform:translateY(-6px)}}
.tg-scroll{animation:tgs 16s linear infinite}@keyframes tgs{to{transform:translateY(var(--h))}}
.tg-typing circle{animation:tgd 1.2s infinite}.tg-typing circle:nth-child(3){animation-delay:.15s}.tg-typing circle:nth-child(4){animation-delay:.3s}@keyframes tgd{50%{fill:#fff;transform:translateY(-3px)}}
.ap-ring{animation:apr 4s var(--ease) infinite}@keyframes apr{0%{stroke-dashoffset:100}50%,100%{stroke-dashoffset:30}}
.ap-tk{animation:apk 3s var(--ease) infinite}@keyframes apk{0%,40%{transform:none}50%,90%{transform:translateX(18px)}100%{transform:none}}
.ap-tr{animation:apt 3s infinite}@keyframes apt{0%,40%{fill:#333}50%,90%{fill:#777}100%{fill:#333}}
.svq .ap-b{transform-origin:bottom center;animation:apb 2.4s ease-in-out infinite alternate}.ap-b1{animation-delay:-.4s!important}.ap-b2{animation-delay:-.8s!important}.ap-b3{animation-delay:-1.2s!important}.ap-b4{animation-delay:-1.6s!important}.ap-b5{animation-delay:-2s!important}
@keyframes apb{from{transform:scaleY(.4)}to{transform:scaleY(1)}}
.ap-push{opacity:0;animation:app 5s var(--ease) infinite}@keyframes app{0%,15%{opacity:0;transform:translateY(-30px)}25%,75%{opacity:1;transform:none}85%,100%{opacity:0;transform:translateY(-20px)}}
.ap-i{animation:api 4s infinite}@keyframes api{0%,100%{opacity:1}50%{opacity:.25}}

/* v52 scenes */
.ld-cur{animation:ldc2 4.4s var(--ease) infinite}
@keyframes ldc2{0%{transform:translate(470px,330px)}36%,52%{transform:translate(312px,236px)}43%{transform:translate(312px,236px) scale(.82)}80%,100%{transform:translate(470px,330px)}}
.ld-btn{animation:ldb2 4.4s infinite}@keyframes ldb2{0%,40%,48%,100%{transform:none}44%{transform:scale(.94)}}
.ld-rip{opacity:0;animation:ldr2 4.4s infinite}@keyframes ldr2{0%,43%{opacity:0;transform:scale(.6)}46%{opacity:.9}70%,100%{opacity:0;transform:scale(2.2)}}
.ld-ok{opacity:0;animation:ldo2 4.4s var(--ease) infinite}@keyframes ldo2{0%,46%{opacity:0;transform:translateY(8px) scale(.6)}54%,82%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-6px)}}
.ld-th{animation:ldt2 4.4s ease-in-out infinite}@keyframes ldt2{0%,100%{transform:none}50%{transform:translateY(130px)}}
.cs-l2{animation:csl2 1.2s linear infinite}@keyframes csl2{to{stroke-dashoffset:-24}}
.cs-pr{opacity:0;animation:csp2 2.6s infinite}@keyframes csp2{0%{opacity:.5;transform:scale(.7)}100%{opacity:0;transform:scale(1.25)}}
.cs-k{animation:csk 2.6s infinite}.cs-k1{animation-delay:.65s}.cs-k2{animation-delay:1.3s}.cs-k3{animation-delay:1.95s}
@keyframes csk{0%,30%,100%{filter:none}48%,60%{filter:brightness(1.7)}}
.ec-cur{animation:ecc2 4.4s var(--ease) infinite}
@keyframes ecc2{0%{transform:translate(560px,360px)}30%,44%{transform:translate(404px,312px)}37%{transform:translate(404px,312px) scale(.82)}75%,100%{transform:translate(560px,360px)}}
.ec-btn{animation:ecb2 4.4s infinite}@keyframes ecb2{0%,34%,42%,100%{transform:none}38%{transform:scale(.95)}}
.ec-rip{opacity:0;animation:ecr2 4.4s infinite}@keyframes ecr2{0%,37%{opacity:0;transform:scale(1)}40%{opacity:.8}62%,100%{opacity:0;transform:scale(1.18,1.6)}}
.ec-fly2{opacity:0;animation:ecf3 4.4s cubic-bezier(.5,0,.3,1) infinite}
@keyframes ecf3{0%,40%{opacity:0;transform:none}43%{opacity:1;transform:none}64%{opacity:1;transform:translate(134px,-62px) scale(.35)}68%,100%{opacity:0;transform:translate(134px,-62px) scale(.2)}}
.ec-cnt{animation:ecn 4.4s infinite}@keyframes ecn{0%,66%,80%,100%{transform:none}72%{transform:scale(1.45)}}
.ec-n2{opacity:0;animation:ec2 4.4s steps(1) infinite}.ec-n1{animation:ec1 4.4s steps(1) infinite}
@keyframes ec2{0%,68%{opacity:0}69%,100%{opacity:1}}@keyframes ec1{0%,68%{opacity:1}69%,100%{opacity:0}}
.tg-feed{animation:tgf 18s linear infinite}@keyframes tgf{to{transform:translateY(var(--tg))}}
.tg-ty circle{animation:tgd2 1.1s infinite}.tg-ty circle:nth-of-type(2){animation-delay:.15s}.tg-ty circle:nth-of-type(3){animation-delay:.3s}
@keyframes tgd2{0%,60%,100%{fill:#555;transform:none}30%{fill:#ddd;transform:translateY(-2px)}}
.ap-icon{animation:api2 5s var(--ease) infinite}
@keyframes api2{0%,12%{transform:none;opacity:1}16%{transform:scale(.88)}24%{transform:scale(2.4);opacity:0}86%{transform:scale(2.4);opacity:0}96%,100%{transform:none;opacity:1}}
.ap-tap{opacity:0;animation:apt2 5s infinite}@keyframes apt2{0%,10%{opacity:0;transform:scale(.4)}14%{opacity:1;transform:scale(1)}22%,100%{opacity:0;transform:scale(2.6)}}
.ap-card{opacity:0;animation:apc 5s var(--ease) infinite}
@keyframes apc{0%,16%{opacity:0;transform:scale(.25)}30%,82%{opacity:1;transform:none}92%,100%{opacity:0;transform:scale(.25)}}
.ap-ring2{animation:apr2 5s var(--ease) infinite}@keyframes apr2{0%,28%{stroke-dashoffset:100}55%,100%{stroke-dashoffset:28}}
.svq .ap-bar{transform-origin:bottom center;animation:apb2 5s var(--ease) infinite}
.ap-bar1{animation-delay:.05s!important}.ap-bar2{animation-delay:.1s!important}.ap-bar3{animation-delay:.15s!important}.ap-bar4{animation-delay:.2s!important}.ap-bar5{animation-delay:.25s!important}.ap-bar6{animation-delay:.3s!important}.ap-bar7{animation-delay:.35s!important}
@keyframes apb2{0%,30%{transform:scaleY(0)}50%,100%{transform:scaleY(1)}}
.ap-tg{animation:apg 5s var(--ease) infinite}@keyframes apg{0%,55%{transform:none}62%,100%{transform:translateX(28px)}}

/* v53 */
.svq svg text{font-feature-settings:"tnum"}
.ld-a1,.ld-a2,.ld-a3,.ld-a4,.ld-a5,.ld-a6{animation:lda 7s var(--ease) infinite}
.ld-a2{animation-delay:.25s}.ld-a3{animation-delay:.45s}.ld-a4{animation-delay:.65s}.ld-a5{animation-delay:.85s}.ld-a6{animation-delay:1.05s}
@keyframes lda{0%{opacity:0;transform:translateY(8px)}8%,90%{opacity:1;transform:none}98%,100%{opacity:0}}
.ld-sel{opacity:0;animation:lds2 7s infinite}@keyframes lds2{0%,14%{opacity:0}18%,40%{opacity:1}44%,100%{opacity:0}}
.ld-gd{opacity:0;animation:lds2 7s infinite}
.ld-orb{animation:ldo 3.5s linear infinite}@keyframes ldo{to{stroke-dashoffset:-100}}
.ld-pk{animation:ldp 7s ease-in-out infinite}@keyframes ldp{0%,100%{transform:none}50%{transform:translate(48px,14px)}}
.ld-cur{animation:ldc3 7s var(--ease) infinite}
@keyframes ldc3{0%,30%{transform:translate(470px,320px);opacity:0}36%{opacity:1}52%,60%{transform:translate(310px,206px)}56%{transform:translate(310px,206px) scale(.82)}80%{transform:translate(470px,320px);opacity:1}86%,100%{opacity:0;transform:translate(470px,320px)}}
.ld-cta{animation:ldq 7s infinite}@keyframes ldq{0%,54%{transform:none;opacity:1}57%{transform:scale(.93)}60%,82%{opacity:0}88%,100%{opacity:1;transform:none}}
.ld-sp{opacity:0;animation:ldsp 7s infinite}@keyframes ldsp{0%,58%{opacity:0;transform:rotate(0)}60%{opacity:1}68%{opacity:1;transform:rotate(540deg)}70%,100%{opacity:0;transform:rotate(600deg)}}
.ld-rp{opacity:0;animation:ldr3 7s infinite}@keyframes ldr3{0%,56%{opacity:0;transform:scale(.6)}58%{opacity:.8}78%,100%{opacity:0;transform:scale(2.4)}}
.ld-ok{opacity:0;animation:ldk 7s var(--ease) infinite}@keyframes ldk{0%,68%{opacity:0;transform:scale(.4)}72%,84%{opacity:1;transform:none}88%,100%{opacity:0}}
.cs-ind{animation:csi 6s var(--ease) infinite}@keyframes csi{0%,28%{transform:none}33%,61%{transform:translateX(24px)}66%,94%{transform:translateX(48px)}100%{transform:none}}
.cs-v{opacity:0;animation:csv 6s infinite}.cs-v1{animation-delay:2s}.cs-v2{animation-delay:4s}
@keyframes csv{0%{opacity:0;transform:translateY(6px)}5%,30%{opacity:1;transform:none}35%,100%{opacity:0}}
.cs-k{animation:csk2 2.4s infinite}.cs-k1{animation-delay:.4s}.cs-k2{animation-delay:.8s}.cs-k3{animation-delay:1.2s}.cs-k4{animation-delay:1.6s}.cs-k5{animation-delay:2s}
@keyframes csk2{0%,40%,100%{transform:none;filter:none}55%,70%{transform:translateY(-4px);filter:brightness(1.6)}}
.ec-orbit{animation:eco 4s linear infinite}@keyframes eco{to{stroke-dashoffset:-226}}
.ec-pr{animation:ecp 4s ease-in-out infinite}@keyframes ecp{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.ec-prb{opacity:0;animation:ecv 8s infinite}@keyframes ecv{0%,20%{opacity:0}26%,46%{opacity:1}52%,100%{opacity:0}}
.ec-ring{animation:ecr 8s var(--ease) infinite}@keyframes ecr{0%,20%{transform:none}26%,46%{transform:translateX(20px)}52%,100%{transform:none}}
.ec-sz{animation:ecs 8s var(--ease) infinite}@keyframes ecs{0%,8%{transform:none}14%,100%{transform:translateX(52px)}}
.ec-cur2{animation:eck 8s var(--ease) infinite}
@keyframes eck{0%{transform:translate(520px,370px)}10%,14%{transform:translate(392px,278px)}22%,26%{transform:translate(286px,278px)}48%{transform:translate(286px,278px)}60%,66%{transform:translate(352px,320px)}63%{transform:translate(352px,320px) scale(.82)}86%,100%{transform:translate(520px,370px)}}
.ec-add{animation:eca 8s infinite}@keyframes eca{0%,61%,66%,100%{transform:none}63%{transform:scale(.96)}}
.ec-rip2{opacity:0;animation:ecr3 8s infinite}@keyframes ecr3{0%,62%{opacity:0;transform:none}64%{opacity:.8}80%,100%{opacity:0;transform:scale(1.12,1.6)}}
.ec-fly3{opacity:0;animation:ecf4 8s cubic-bezier(.5,0,.3,1) infinite}
@keyframes ecf4{0%,63%{opacity:0;transform:none}65%{opacity:1}76%{opacity:1;transform:translate(150px,83px) scale(.65)}79%,100%{opacity:0;transform:translate(150px,83px) scale(.6)}}
.ec-new{opacity:0;animation:ecn2 8s var(--ease) infinite}@keyframes ecn2{0%,76%{opacity:0;transform:translateX(16px)}82%,96%{opacity:1;transform:none}100%{opacity:0}}
.ec-c3,.ec-t2{opacity:0;animation:ech1 8s steps(1) infinite}.ec-c2,.ec-t1{animation:ech0 8s steps(1) infinite}
@keyframes ech1{0%,77%{opacity:0}78%,99%{opacity:1}100%{opacity:0}}@keyframes ech0{0%,77%{opacity:1}78%,99%{opacity:0}100%{opacity:1}}
.ec-cnt2{animation:ecq 8s infinite}@keyframes ecq{0%,77%,86%,100%{transform:none}81%{transform:scale(1.5)}}
.ma-chips{animation:mac 9s var(--ease) infinite}@keyframes mac{0%,12%{transform:none}22%,60%{transform:translateX(-90px)}72%,100%{transform:none}}
.ma-t{animation:mat 9s var(--ease) infinite}.ma-t1{animation-delay:.08s}.ma-t2{animation-delay:.16s}.ma-t3{animation-delay:.24s}.ma-t4{animation-delay:.32s}.ma-t5{animation-delay:.4s}
@keyframes mat{0%{opacity:0;transform:translateY(10px)}6%,94%{opacity:1;transform:none}100%{opacity:0}}
.ma-t0{animation:mat0 9s var(--ease) infinite}@keyframes mat0{0%{opacity:0}6%,26%{opacity:1;transform:none}29%{transform:scale(.92)}32%,94%{transform:none;opacity:1}100%{opacity:0}}
.ma-cur{animation:mcu 9s var(--ease) infinite}
@keyframes mcu{0%,14%{transform:translate(480px,380px);opacity:0}18%{opacity:1}26%,31%{transform:translate(322px,182px)}29%{transform:translate(322px,182px) scale(.82)}46%,52%{transform:translate(400px,292px)}49%{transform:translate(400px,292px) scale(.82)}62%,66%{transform:translate(398px,336px)}64%{transform:translate(398px,336px) scale(.82)}80%{opacity:1;transform:translate(480px,380px)}86%,100%{opacity:0;transform:translate(480px,380px)}}
.ma-rp{opacity:0;animation:mrp 9s infinite}@keyframes mrp{0%,28%{opacity:0;transform:scale(.6)}30%{opacity:.8}42%,100%{opacity:0;transform:scale(2.2)}}
.ma-sheet{opacity:0;animation:mas 9s var(--ease) infinite}@keyframes mas{0%,31%{opacity:0;transform:translateY(70px)}38%,84%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(70px)}}
.ma-n2{opacity:0;animation:mn2 9s steps(1) infinite}.ma-n1{animation:mn1 9s steps(1) infinite}
@keyframes mn2{0%,49%{opacity:0}50%,100%{opacity:1}}@keyframes mn1{0%,49%{opacity:1}50%,100%{opacity:0}}
.svq .ma-prog{transform-origin:left center;transform:scaleX(0);animation:mpg 9s linear infinite}@keyframes mpg{0%,64%{transform:scaleX(0)}76%,100%{transform:scaleX(1)}}
.ma-lbl{animation:mlb 9s infinite}@keyframes mlb{0%,64%{opacity:1}66%,94%{opacity:0}100%{opacity:1}}
.ma-ok{opacity:0;animation:mok 9s var(--ease) infinite}@keyframes mok{0%,76%{opacity:0;transform:scale(.4)}80%,92%{opacity:1;transform:none}96%,100%{opacity:0}}
.ap-car{animation:apcar 9s var(--ease) infinite}@keyframes apcar{0%,24%{transform:none}30%,54%{transform:translateX(-184px)}60%,84%{transform:translateX(-368px)}90%,100%{transform:translateX(-552px)}}
.ap-d{animation:apd 9s var(--ease) infinite}@keyframes apd{0%,24%{transform:none}30%,54%{transform:translateX(10px)}60%,84%{transform:translateX(20px)}90%,100%{transform:none}}
.ap-ti{animation:apti 9s var(--ease) infinite}@keyframes apti{0%,30%{transform:none}36%,64%{transform:translateX(88px)}70%,100%{transform:none}}
.ap-k1{animation:apk1 9s var(--ease) infinite}@keyframes apk1{0%,40%{transform:none}46%,90%{transform:translateX(14px)}96%,100%{transform:none}}
.ap-k0{transform:translateX(14px)}
.ap-sw0{fill:#666}.ap-sw1{animation:apsw 9s infinite}@keyframes apsw{0%,40%{fill:#2c2c2c}46%,90%{fill:#666}96%,100%{fill:#2c2c2c}}
.ap-tp{opacity:0;animation:aptp 9s infinite}@keyframes aptp{0%,39%{opacity:0;transform:scale(.4)}42%{opacity:1;transform:none}52%,100%{opacity:0;transform:scale(2.6)}}
.ap-push2{opacity:0;animation:apu 9s var(--ease) infinite}@keyframes apu{0%,6%{opacity:0;transform:translateY(-30px)}12%,22%{opacity:1;transform:none}28%,100%{opacity:0;transform:translateY(-24px)}}
.ap-w1{animation:apf 6s ease-in-out infinite alternate}.ap-w2{animation:apf 7s ease-in-out infinite alternate-reverse}.ap-w3{animation:apf 8s ease-in-out infinite alternate-reverse}.ap-w4{animation:apf 6.5s ease-in-out infinite alternate}
@keyframes apf{to{transform:translateY(-8px)}}
.ap-ring3{animation:apr3 6s var(--ease) infinite}@keyframes apr3{0%{stroke-dashoffset:100}50%,100%{stroke-dashoffset:35}}
.svq .ap-bar3{transform-origin:bottom center;animation:apb3 2.6s ease-in-out infinite alternate}.ap-q1{animation-delay:-.3s!important}.ap-q2{animation-delay:-.6s!important}.ap-q3{animation-delay:-.9s!important}.ap-q4{animation-delay:-1.2s!important}.ap-q5{animation-delay:-1.5s!important}.ap-q6{animation-delay:-1.8s!important}.ap-q7{animation-delay:-2.1s!important}
@keyframes apb3{from{transform:scaleY(.45)}to{transform:scaleY(1)}}
.svq .ap-pg{transform-origin:left center;animation:appg 6s linear infinite}@keyframes appg{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.svx-v{contain:paint}
.svx-v::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 60px 30px #121212}
#svx.off .svq *{animation-play-state:paused!important}
.svq svg{overflow:visible}
.cx{margin:0 var(--in);border-top:1px solid var(--w12)}
.cxr{position:relative;display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;padding:clamp(22px,3vw,40px) 0;border-bottom:1px solid var(--w12)}
.cxl{transition:color .4s}
.cxv{font-size:clamp(28px,4.4vw,68px);letter-spacing:-.05em;line-height:1;white-space:nowrap;color:rgba(255,255,255,.35);transition:color .5s var(--ease),transform .6s var(--ease)}
.cxr:hover .cxv{color:#fff;transform:translateX(10px)}.cxr:hover .cxl{color:#fff}
.cxa{display:flex;justify-content:flex-end;gap:8px}
.cxb{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:0;background:rgba(255,255,255,.06);color:#fff;cursor:pointer;transition:background .35s,color .35s}
.cxb:hover{background:#fff;color:#000}.cxb svg{width:15px;height:15px}.cxb .arw{margin:0;width:12px;height:12px}
.cxm{margin-top:clamp(40px,5vw,72px)}
.cxc{display:flex;flex-direction:column;gap:10px;padding:22px var(--in) 0;margin-inline:var(--in);border-radius:0}
.cxm>.cxc{padding:22px;margin:0 var(--in);border-radius:var(--rad);background:#111;min-height:150px;justify-content:space-between}
.cxm{grid-template-columns:repeat(3,1fr)!important;gap:0}
.cxm>.cxc{margin:0 calc(var(--in)/2)}.cxm>.cxc:first-child{margin-left:var(--in)}.cxm>.cxc:last-child{margin-right:var(--in)}
.cxc b{font-weight:400;font-size:clamp(18px,1.6vw,24px);letter-spacing:-.03em;display:flex;align-items:center;gap:10px}
.cxs{display:flex;flex-wrap:wrap;gap:8px}.cxs a{padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.06);font-size:14px;transition:background .3s,color .3s}.cxs a:hover{background:#fff;color:#000}
.cxtoast{position:fixed;left:50%;bottom:92px;z-index:90;padding:10px 16px;border-radius:12px;background:#fff;color:#000;font-size:14px;opacity:0;transform:translate(-50%,10px);transition:opacity .3s,transform .4s var(--ease);pointer-events:none}
.cxtoast.on{opacity:1;transform:translate(-50%,0)}
@media(max-width:760px){.cxr{grid-template-columns:1fr auto;row-gap:10px}.cxl{grid-column:1/-1}.cxv{font-size:26px}.cxm{grid-template-columns:1fr!important;row-gap:10px}.cxm>.cxc{margin:0 var(--in)!important}}
.cxig{display:grid!important;place-items:center;width:44px;height:44px;padding:0!important;border-radius:12px!important}
.cxr:has(.cxv:hover) a.cxb,.cxr:has(a.cxb:hover) a.cxb{background:#fff;color:#000}
html.pg-contact .up{display:none!important}
.c-bot a.up{display:flex;justify-content:flex-end;align-items:center}
.fct>.m:last-child,.fct2>.m:last-child{line-height:1.35}
.fct2{border-top:0;padding-top:0}
.fct2 .big{font-size:clamp(32px,3.65vw,58px)!important;letter-spacing:-.045em;line-height:1;margin:14px 0 12px!important}
@media(min-width:761px){#about .av{align-self:stretch;display:flex;flex-direction:column;position:relative}#about .avf{flex:1;aspect-ratio:auto;min-height:320px}#about .av .cp{position:absolute;top:100%;left:var(--in);right:var(--in)}}
#avf{background:#000}.avf img.avv{filter:none}.avv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;pointer-events:none}
.hb-btn{white-space:nowrap;-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);background:rgba(var(--fg),.12)}.hb-btn:hover{background:rgba(var(--fg),.2)}
.ab2-f{position:relative;overflow:hidden;background:#000}.ab2-f .avv{object-position:50% 35%}
.cv-btn{margin-top:28px;gap:9px;align-self:flex-start;justify-self:start;width:max-content}
.cvl{display:grid;overflow:hidden;height:1.3em;line-height:1.3em}.cvl>span{grid-area:1/1;transition:transform .5s cubic-bezier(.65,0,.2,1)}.cvl>span+span{transform:translateY(110%)}
.dlw{position:relative;width:12px;height:12px;display:inline-block;overflow:hidden}
.dlw:after{content:"";position:absolute;left:1px;right:1px;bottom:0;height:1.2px;background:currentColor;transition:transform .5s cubic-bezier(.65,0,.2,1)}
.dla{position:absolute;left:0;top:0;width:12px;height:10px;overflow:hidden}
.dla svg{position:absolute;left:0;top:0;width:12px;height:10px;transition:transform .55s cubic-bezier(.65,0,.2,1)}
.dla svg+svg{transform:translateY(-110%)}
.cv-btn:hover .dla svg{transform:translateY(110%)}.cv-btn:hover .dla svg+svg{transform:translateY(0)}
.dlw .ok{position:absolute;left:0;top:1px;width:12px;height:10px;transform:scale(.4);opacity:0;transition:transform .45s cubic-bezier(.3,1.4,.5,1),opacity .25s}
.cv-btn.done .cvl>span{transform:translateY(-110%)}.cv-btn.done .cvl>span+span{transform:translateY(0)}
.cv-btn.done .dla{opacity:0;transition:opacity .2s}.cv-btn.done .dlw:after{transform:scaleX(0)}.cv-btn.done .ok{transform:scale(1);opacity:1}
.arwr{position:relative;width:10px;height:10px;overflow:hidden;display:inline-block}
.arwr svg{position:absolute;inset:0;width:10px!important;height:10px!important;margin:0!important;transition:transform .5s cubic-bezier(.65,0,.2,1)}
.arwr svg+svg{transform:translate(-115%,115%)}
.hb-btn .arwr{margin-left:8px;flex:none}.cv-btn .arwr{margin-left:0}
.hb-btn:hover .arwr svg{transform:translate(115%,-115%)}.hb-btn:hover .arwr svg+svg{transform:translate(0,0)}


@media(max-width:760px){
 #work{padding-top:72px!important;padding-bottom:48px!important}
 #about{padding-top:48px!important;padding-bottom:56px!important}
 #contact{min-height:0!important;justify-content:flex-start!important;padding-top:56px!important;padding-bottom:calc(var(--pad) + 104px)!important}
 .sec-h{margin-bottom:32px!important;row-gap:14px!important}
 .c-top{row-gap:14px!important}
 .clist{margin-top:28px}
 .tiles{row-gap:36px!important}
 .ab{margin-top:44px!important}
 /* архив: анимация на всю ширину */
 .ab{min-height:600px!important;align-items:flex-end!important}
 .ab-w{left:0!important;right:0!important;width:auto!important;top:0!important;bottom:0!important;-webkit-mask-image:linear-gradient(#000 0%,#000 30%,rgba(0,0,0,.35) 55%,transparent 72%)!important;mask-image:linear-gradient(#000 0%,#000 30%,rgba(0,0,0,.35) 55%,transparent 72%)!important}
 .ab-p{inset:-18% -45% 0 -25%!important;gap:10px!important;transform:rotateX(22deg) rotateZ(-14deg) scale(1.05)!important}
 .ab-col i{margin-bottom:10px!important;filter:brightness(.7) saturate(.85)!important}
 /* обо мне */
 .about{grid-template-columns:1fr 1fr!important;row-gap:22px!important}
 .about>*{grid-column:1/-1!important;grid-row:auto!important}
 .about .lbl{margin-bottom:-6px}
 #about .av{width:62%;padding-inline:var(--in)}
 #about .avf{width:100%;aspect-ratio:4/5;min-height:0}
 #about .av .cp{position:static!important;margin-top:12px;padding:0!important}
 .about .txt{font-size:24px!important;max-width:none!important;padding-inline:var(--in)}
 .desc{padding-inline:0!important}
 .about-more{margin-top:18px}
 .about .fct{grid-column:auto!important;margin-top:8px!important}
 .about .fct:last-of-type{grid-column:1/-1!important;margin-top:0!important}
 .about .fct .big{font-size:40px!important}
 /* подвал контактов */
 #contact .c-bot{display:flex!important;justify-content:space-between;align-items:center;margin-top:44px;padding-inline:var(--in)}
 #contact .c-bot>span:nth-child(2),#contact .c-bot>span:nth-child(3){display:none!important}
 #contact .c-bot a.up{gap:8px}
 .sec-h>.m,.c-top>.m{grid-column:1/-1!important}
 /* нижняя навигация крупнее */
 .dock{left:12px!important;right:12px!important;transform:translateY(14px)!important;justify-content:space-between;padding:6px!important;border-radius:18px!important}
 .dock.in{transform:none!important}
 .dock a.k{padding:14px 8px!important;font-size:14px!important;flex:1;text-align:center;border-radius:13px!important}
 .dock i.sp{margin:0 6px!important}
 .dock a.t{width:46px!important;height:46px!important;border-radius:13px!important;flex:none}
 .dock a.t svg{width:18px!important;height:18px!important}
}


.dock{margin-left:calc(var(--sbw,0px) / -2)}
.mnav{display:none}
@media(max-width:760px){
 .dock{display:none!important}
 .grid i:nth-child(2){border-right:1px solid var(--w06)}
 .crow .m:first-child{margin-bottom:8px}
 .crow:hover .cv,.crow:active .cv{transform:none!important}
 .cl2-r:hover{padding-left:0!important}
 .mnav{display:block;pointer-events:none;position:fixed;left:12px;right:12px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:90;font-family:inherit;-webkit-tap-highlight-color:transparent}
 .mbox{position:relative;padding:10px 10px 62px;border-radius:24px;background:#141414;clip-path:inset(calc(100% - 52px) calc(50% - 34px) 0 calc(50% - 94px) round 26px);transition:clip-path .62s cubic-bezier(.77,0,.18,1);will-change:clip-path}
 .mnav.open .mbox{clip-path:inset(0 0 0 0 round 24px)}
 .mlinks a{display:flex;align-items:center;justify-content:space-between;padding:17px 16px;border-radius:14px;font-size:22px;letter-spacing:-.03em;color:rgba(255,255,255,.55);text-decoration:none;opacity:0;transform:translateY(18px);transition:opacity .25s,transform .45s cubic-bezier(.2,.8,.2,1)}
 .mnav.open .mlinks a{opacity:1;transform:none}
 .mnav.open .mlinks a:nth-child(1){transition-delay:.16s}.mnav.open .mlinks a:nth-child(2){transition-delay:.21s}.mnav.open .mlinks a:nth-child(3){transition-delay:.26s}.mnav.open .mlinks a:nth-child(4){transition-delay:.31s}.mnav.open .mlinks a:nth-child(5){transition-delay:.36s}
 .mlinks a.on{color:#fff;background:rgba(255,255,255,.07)}
 .mlinks a span{font-size:12px;letter-spacing:0;color:rgba(255,255,255,.35)}
 .mlinks .tg{margin-top:8px;justify-content:center;gap:10px;background:#fff;color:#000!important;font-size:16px;font-weight:500;letter-spacing:-.01em}
 .mlinks .tg svg{width:18px;height:18px}
 .mnav-b{position:absolute;bottom:0;left:calc(50% - 94px);width:128px;height:52px;border:0;background:none;color:#fff;font:500 15px/1 inherit;letter-spacing:-.01em;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;padding:0;transition:left .62s cubic-bezier(.77,0,.18,1)}
 .mnav.open .mnav-b{left:calc(50% - 64px)}
 .mnav-t{position:absolute;bottom:0;left:calc(50% + 42px);width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#000;transition:opacity .3s,transform .5s cubic-bezier(.2,.8,.2,1)}
 .mnav-t svg{width:20px;height:20px;transform:translate(-1px,0)}
 .mnav.open .mnav-t{opacity:0;transform:scale(.6);pointer-events:none}
 .mnav-sh{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .4s}
 .mnav.open .mnav-sh{opacity:1;pointer-events:auto}
 /* about: видео поверх линий сетки */
 #about .av{position:relative;z-index:6}
 /* работы: без переключателя вида */
 .vt{display:none!important}
 /* принципы: плавное раскрытие */
 .ac{transition:height .6s cubic-bezier(.2,.8,.2,1),background .45s,border-color .45s!important}
 .ac-c{transition:opacity .3s!important}
 /* надзаголовки */
 .sec2,.sec-h,.c-top,.pg-h,.wk-h{row-gap:14px!important}
 .sec2{margin-top:72px!important}
 /* подвал на всех страницах */
 .c-bot{display:flex!important;justify-content:space-between;align-items:center;padding-inline:var(--in)}
 .c-bot>span:nth-child(2),.c-bot>span:nth-child(3){display:none!important}
 footer.foot[hidden]{display:none!important}
 footer.foot{padding:28px var(--pad) calc(var(--pad) + 84px)!important}
}

 .mnav-b .lw{position:relative;display:grid;overflow:hidden;height:18px;transition:width .5s cubic-bezier(.65,0,.2,1)}
 .mnav-b .lw span{grid-area:1/1;white-space:nowrap;line-height:18px;transition:opacity .3s,transform .45s cubic-bezier(.2,.8,.2,1)}
 .mnav-b .l2{opacity:0;transform:translateY(10px)}
 .mnav.open .mnav-b .l1{opacity:0;transform:translateY(-10px)}.mnav.open .mnav-b .l2{opacity:1;transform:none}
 .cxv{color:#fff!important}.cxl{color:rgba(255,255,255,.5)}
 @media(hover:hover) and (min-width:761px){.cxr:hover .cxv{transform:translateX(18px)!important}}

 .mbox,.mnav-b,.mnav-t{pointer-events:auto}
 .mnav:not(.open) .mbox{pointer-events:none}
 .mnav:not(.open) .mnav-b{pointer-events:auto}
 .mnav-b em{position:relative;width:14px;height:14px;flex:none;display:block}
 .mnav-b u{position:absolute;left:0;top:0;width:5px;height:5px;border-radius:50%;background:#fff;transition:transform .5s cubic-bezier(.65,0,.2,1),width .5s cubic-bezier(.65,0,.2,1),height .5s cubic-bezier(.65,0,.2,1),border-radius .5s}
 .mnav-b u:nth-child(1){transform:translate(0.00px,0.00px)}
 .mnav.open .mnav-b u:nth-child(1){width:10px;height:2px;border-radius:1px;transform:translate(-0.25px,3.75px) rotate(45deg)}
 .mnav-b u:nth-child(2){transform:translate(9.00px,0.00px)}
 .mnav.open .mnav-b u:nth-child(2){width:10px;height:2px;border-radius:1px;transform:translate(4.25px,3.75px) rotate(-45deg)}
 .mnav-b u:nth-child(3){transform:translate(0.00px,9.00px)}
 .mnav.open .mnav-b u:nth-child(3){width:10px;height:2px;border-radius:1px;transform:translate(-0.25px,8.25px) rotate(-45deg)}
 .mnav-b u:nth-child(4){transform:translate(9.00px,9.00px)}
 .mnav.open .mnav-b u:nth-child(4){width:10px;height:2px;border-radius:1px;transform:translate(4.25px,8.25px) rotate(45deg)}

#about{z-index:4!important}#view-works,#view-project,#view-contact,main.view{position:relative;z-index:4}@media(max-width:760px){.ab-st{left:16px!important;right:auto!important;top:16px!important;bottom:auto!important;gap:10px!important;padding:9px 14px!important}.ab-st b{font-size:24px!important}.ab-st span{font-size:12px!important}}
video.avv{opacity:0;transition:opacity .6s ease}video.avv.pl{opacity:1}#avf,.ab2-f{background-size:cover;background-position:50% 30%}#avf{background-image:url(img/inline-01.4b9b49e8.webp)}.ab2-f{background-image:url(img/inline-02.6a43c19c.webp);background-position:50% 35%}
.cvx{position:fixed;inset:0;z-index:2147482000;background:rgba(0,0,0,.82);-webkit-backdrop-filter:none;display:flex;justify-content:center;overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s;padding:72px 16px 40px}.cvx.on{opacity:1;visibility:visible;transition:opacity .35s}.cvx-p{width:min(860px,100%);height:max-content;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.5);transform:translateY(16px);transition:transform .5s cubic-bezier(.2,.8,.2,1)}.cvx.on .cvx-p{transform:none}
.cvx-p{margin:auto 0}.cvx-p img{display:block;width:100%;height:auto;pointer-events:auto;-webkit-user-select:auto;user-select:auto}.cvx-b{position:fixed;top:calc(18px + env(safe-area-inset-top,0px));right:18px;z-index:2;display:flex;gap:8px}.cvx-d{background:#262626!important;color:#fff!important}.cvx-d:hover{background:#333!important}.cvx-d[disabled]{opacity:.6;cursor:default}.cvx-x{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border:0;border-radius:11px;background:#fff;color:#000;font:500 14px/1 inherit;font-family:inherit;cursor:pointer}html.cvx-lock{overflow:hidden}
@media(max-width:760px){.veil{background:radial-gradient(ellipse at 55% 42%,transparent 25%,rgba(var(--bgc),.65) 80%),linear-gradient(transparent 30%,rgba(0,0,0,.45) 50%,rgba(0,0,0,.82) 68%,var(--b) 92%)!important}}
.svx-v{background:radial-gradient(ellipse 33% 43% at 50% 50%,rgba(255,255,255,.07),rgba(255,255,255,0) 100%),radial-gradient(circle at 1px 1px,#202020 .8px,rgba(0,0,0,0) 1.3px) 0 0/18px 18px,#121212!important}
.snap,.snap *{transition:none!important}@media(min-width:761px){.tile{will-change:translate}}
.mnav:not(.open) .mlinks a{transform:translateY(10px);transition:opacity .22s ease,transform .38s cubic-bezier(.4,0,.2,1)}.mnav:not(.open) .mlinks a:nth-last-child(1){transition-delay:0s}.mnav:not(.open) .mlinks a:nth-last-child(2){transition-delay:.025s}.mnav:not(.open) .mlinks a:nth-last-child(3){transition-delay:.05s}.mnav:not(.open) .mlinks a:nth-last-child(4){transition-delay:.075s}.mnav:not(.open) .mlinks a:nth-last-child(5){transition-delay:.1s}.mnav:not(.open) .mlinks a:nth-last-child(6){transition-delay:.125s}.mnav.open .mlinks a{transition:opacity .25s,transform .45s cubic-bezier(.2,.8,.2,1)}.mnav:not(.open) .mbox{transition:clip-path .52s cubic-bezier(.55,0,.15,1) .06s}.mnav:not(.open) .mnav-b{transition:left .52s cubic-bezier(.55,0,.15,1) .06s}
.view.noanim{animation:none!important}.view.noanim .fade,.view.noanim .reveal-l>span,.view.noanim .im{transition:none!important}
@supports (content-visibility:hidden){.view{display:block;content-visibility:hidden}.view.on{content-visibility:visible}}
html.sf .dock{background:rgba(12,12,12,.95)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.ab-col:nth-child(1){animation-delay:-24s}.ab-col:nth-child(2){animation-delay:-30s}.ab-col:nth-child(3){animation-delay:-26s}
html{scrollbar-gutter:stable}

@media(max-width:760px),(hover:none){
 .crow:hover::before{transform:scaleY(0)!important}.crow:hover{color:inherit!important}.crow:hover .m{color:inherit!important}.crow:hover .cv{transform:none!important}
 .crow:active::before{transform:scaleY(0)!important}
 .cxr:hover .cxv,.cxr:active .cxv{transform:none!important}.cxr:hover .cxl{color:inherit}
 .cxr .cxv{color:#fff!important}
 .cxb:hover{background:rgba(255,255,255,.06)!important;color:#fff!important}
 .cxr:has(.cxv:hover) a.cxb,.cxr:has(a.cxb:hover) a.cxb{background:rgba(255,255,255,.06)!important;color:#fff!important}
}
@media(max-width:760px){.ab{min-height:470px!important}}
.ab-h span{font-weight:400!important}
.cxb[data-c]{position:relative}
.cxb[data-c] svg{transition:opacity .3s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.cxb[data-c] .ok{position:absolute;inset:0;margin:auto;opacity:0;transform:scale(.5)}
.cxb[data-c] .ok path{stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .45s ease .1s}
.cxb[data-c].done svg:not(.ok){opacity:0;transform:scale(.5)}
.cxb[data-c].done .ok{opacity:1;transform:none}
.cxb[data-c].done .ok path{stroke-dashoffset:0}

@media(max-width:760px){.ab{min-height:500px!important}.ab .ab-c{padding:28px!important}.ab .ab-st{top:28px!important;left:28px!important;right:auto!important}}.ab-h{font-size:clamp(26px,2.85vw,46px)!important;line-height:1.04!important;letter-spacing:-.035em!important}
.ab-col i{border:0!important}.pn-head>.m{line-height:1.2}
@media (hover:none){.lnk:hover{background:var(--w);color:var(--b);backdrop-filter:none!important;-webkit-backdrop-filter:none!important}.ab-o:hover{background:none;border-color:rgba(var(--fg),.2)}.lnk,.ab-o{-webkit-tap-highlight-color:transparent;transition:transform .2s,opacity .2s}.lnk:active,.ab-o:active{transform:scale(.97);opacity:.85}}
@media (max-width:760px){.c-bot>span,.c-bot a.up{padding:0!important}#foot.c-bot{padding-left:30px!important;padding-right:30px!important}#contact .c-bot a.up,.c-bot a.up{gap:6px!important}.c-bot a.up .arw{margin:0!important}}
@media (max-width:760px){.bc.f .cap .nm{font-size:14px!important;letter-spacing:-.01em!important;font-weight:500!important}.bc.f .cap{margin-top:14px!important}}
/* на своём домене каждая страница показывает один раздел: скрытые разделы не рендерим и не грузим их картинки */
html.mp .view:not(.on),html.mp-sub #view-home{display:none!important}
/* элементы с задержкой анимации не мелькают до её старта */
.ld-a1,.ld-a2,.ld-a3,.ld-a4,.ld-a5,.ld-a6,.ma-t,.ma-t0{animation-fill-mode:backwards}
/* Safari: первый большой баннер «Работ» без мигания при повторном открытии */
.bc.f .pic .im{will-change:filter,transform;backface-visibility:hidden}