:root{ --bg:#0A0A0C; --bg2:#111114; --panel:#17171B; --panel2:#1E1E23; --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.16); --text:#F3F0EA; --mute:#A09C94; --faint:#918D84; --o:#FF4D1C; --o2:#FF7A4D; --navy:#0B1E3F; --blue:#3B82F6; --cream:#F3F0EA; --cream2:#E8E3D8; --ink:#0A0A0C; --ink2:#3A3833; --disp:'Unbounded',system-ui,sans-serif; --sans:'Golos Text',system-ui,sans-serif; --mono:'JetBrains Mono',monospace; --wrap:1320px; --ease:cubic-bezier(.16,1,.3,1); } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} html.lenis,html.lenis body{height:auto} body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip} body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} a{color:inherit;text-decoration:none} img{max-width:100%;height:auto;display:block} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} :focus-visible{outline:2px solid var(--o);outline-offset:3px;border-radius:6px} ::selection{background:var(--o);color:#fff} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px} .lbl{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);display:inline-flex;align-items:center;gap:10px} .lbl i{width:7px;height:7px;border-radius:50%;background:var(--o);box-shadow:0 0 0 4px rgba(255,77,28,.18)} .d{font-family:var(--disp);font-weight:500;letter-spacing:-.035em;line-height:.98} .h2{font-family:var(--disp);font-weight:500;letter-spacing:-.04em;line-height:1;font-size:clamp(34px,4.6vw,72px)} .h2 em,.h1 em{font-style:normal;color:var(--o)} .h2 .dim{color:var(--faint)} .lead{font-size:clamp(17px,1.35vw,20px);color:var(--mute);max-width:600px} .split-line{overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em} .btn{display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 26px;border-radius:999px;font-weight:600;font-size:16px;white-space:nowrap;transition:background .25s,color .25s,box-shadow .3s} .btn .ar{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.2);transition:transform .4s var(--ease)} .btn:hover .ar{transform:rotate(-45deg)} .btn-o{background:var(--o);color:#fff} .btn-o:hover{box-shadow:0 18px 40px -14px rgba(255,77,28,.8)} .btn-l{box-shadow:inset 0 0 0 1px var(--line2)} .btn-l:hover{background:var(--text);color:var(--ink)} .btn-l:hover .ar{background:rgba(10,10,12,.1)} .btn-k{background:var(--ink);color:#fff} [data-mag]{will-change:transform} /* header */ header{position:fixed;left:0;right:0;top:0;z-index:60;transition:transform .5s var(--ease)} header.hide{transform:translateY(-110%)} .hd{max-width:calc(var(--wrap) - 32px);margin:14px auto 0;height:66px;border-radius:20px;display:flex;align-items:center;gap:26px;padding:0 10px 0 22px;transition:background .3s,box-shadow .3s} header.solid .hd{background:rgba(17,17,20,.72);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:inset 0 0 0 1px var(--line)} header.light.solid .hd{background:rgba(243,240,234,.8);box-shadow:inset 0 0 0 1px rgba(10,10,12,.08)} header.light .logo img{filter:invert(1)} header.light nav a{color:var(--ink2)} header.light .lang{color:var(--ink2);box-shadow:inset 0 0 0 1px rgba(10,10,12,.14)} .logo img{height:24px;width:auto} .hd nav{display:flex;gap:4px;flex:1} .hd nav a{padding:9px 13px;border-radius:10px;font-size:15px;font-weight:500;color:#cfcbc3;transition:background .2s,color .2s} .hd nav a:hover{background:rgba(255,255,255,.07);color:#fff} header.light nav a:hover{background:rgba(10,10,12,.06);color:var(--ink)} .hr{display:flex;align-items:center;gap:8px} .lang{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line2);font-size:13px;font-weight:600;color:#cfcbc3} .lang svg{width:18px;height:12px;border-radius:2px} .hr .btn{height:46px;padding:0 18px;font-size:15px} .burger{display:none;width:46px;height:46px;border-radius:12px;position:relative} .burger span{position:absolute;left:13px;right:13px;height:1.5px;background:currentColor;transition:.35s var(--ease)} .burger span:nth-child(1){top:19px}.burger span:nth-child(2){top:26px} body.mopen .burger span:nth-child(1){top:22.5px;transform:rotate(45deg)} body.mopen .burger span:nth-child(2){top:22.5px;transform:rotate(-45deg)} .mpanel{position:fixed;inset:0;z-index:55;background:var(--bg);padding:110px 24px 40px;overflow:auto;clip-path:circle(0% at calc(100% - 44px) 44px);transition:clip-path .7s var(--ease);visibility:hidden} body.mopen .mpanel{clip-path:circle(150% at calc(100% - 44px) 44px);visibility:visible} .mpanel a{display:block;font-family:var(--disp);font-size:34px;letter-spacing:-.04em;padding:8px 0;border-bottom:1px solid var(--line)} .mpanel .btn{margin-top:30px;width:100%;justify-content:center;font-family:var(--sans);font-size:17px;border:0} /* hero */ .hero{position:relative;min-height:100svh;padding:150px 0 0;overflow:hidden;isolation:isolate} #flow{position:absolute;inset:0;width:100%;height:100%;z-index:-2} .hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 0%,transparent 40%,var(--bg) 88%),linear-gradient(180deg,rgba(10,10,12,.25),var(--bg) 96%)} .hero .lbl{color:#d8d4cc} .h1{font-family:var(--disp);font-weight:500;letter-spacing:-.05em;line-height:.94;font-size:clamp(44px,7.2vw,118px);margin:26px 0 30px;max-width:1200px} .hero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap} .hero .lead{color:#cfcbc3} .ctas{display:flex;gap:12px;flex-wrap:wrap} .proof{display:flex;gap:44px;margin-top:54px;flex-wrap:wrap} .proof b{display:block;font-family:var(--disp);font-size:32px;font-weight:500;letter-spacing:-.04em;line-height:1} .proof span{font-size:13.5px;color:var(--mute)} .reel{position:relative;margin-top:70px;height:clamp(300px,40vw,560px);perspective:1800px} .reel-in{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform} .win{position:absolute;border-radius:14px;overflow:hidden;background:#1a1a1f;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 50px 100px -30px rgba(0,0,0,.8)} .win .bar{height:28px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#1f1f25;border-bottom:1px solid rgba(255,255,255,.06)} .win .bar i{width:9px;height:9px;border-radius:50%;background:#3a3a42} .win .bar span{margin-left:10px;font-family:var(--mono);font-size:10.5px;color:#77746d} .win .vp{position:relative;overflow:hidden;aspect-ratio:16/10;background:#fff} .win .vp img{width:100%;height:auto;position:absolute;left:0;top:0;will-change:transform} .auto .vp img{animation:scrollshot var(--dur,22s) var(--ease) infinite alternate} @keyframes scrollshot{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(calc(-100% + var(--vh,250px)))}} .w1{left:0;top:10%;width:40%;transform:translateZ(-120px) rotateY(10deg)} .w2{left:30%;top:0;width:42%;transform:translateZ(40px)} .w3{right:0;top:14%;width:36%;transform:translateZ(-80px) rotateY(-10deg)} .reel-fade{position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(transparent,var(--bg));z-index:5;pointer-events:none} /* logos ribbon */ .ribbon{border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;z-index:3} .rb{display:flex;align-items:center;height:100px} .rb-lbl{flex:none;padding:0 26px 0 32px;height:100%;display:flex;align-items:center;border-right:1px solid var(--line)} .rb-view{flex:1;min-width:0;overflow:hidden;height:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .rb-track{display:flex;align-items:center;height:100%;width:max-content;animation:rb 55s linear infinite} .rb-track img{height:30px;width:auto;max-width:130px;object-fit:contain;margin:0 38px;filter:brightness(0) invert(1);opacity:.45;transition:opacity .3s} .rb-track img:hover{opacity:1} .ribbon.paused .rb-track{animation-play-state:paused} @keyframes rb{to{transform:translateX(-50%)}} .rb-btn{flex:none;margin:0 20px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line2);transition:.25s} .rb-btn:hover{background:var(--text);color:var(--ink)} .rb-btn svg{fill:currentColor}.rb-btn .pl{display:none} .ribbon.paused .rb-btn .pl{display:block}.ribbon.paused .rb-btn .pa{display:none} /* work (светла секция) */ .work{background:var(--cream);color:var(--ink);padding:130px 0 60px;border-radius:40px 40px 0 0;position:relative;z-index:4} .work .lbl{color:var(--ink2)} .work .h2 .dim{color:#857f73} .work .lead{color:var(--ink2)} .sh{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:end;margin-bottom:70px} .sh .h2{margin-top:18px} .proj{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center;padding:56px 0;border-top:1px solid rgba(10,10,12,.1)} .proj:nth-child(even){grid-template-columns:1.2fr .8fr} .proj:nth-child(even) .pinfo{order:2} .pinfo .n{font-family:var(--mono);font-size:12px;color:#66615A} .pinfo h3{font-family:var(--disp);font-weight:500;letter-spacing:-.045em;line-height:.95;font-size:clamp(40px,4.6vw,76px);margin:16px 0 18px} .pinfo p{color:var(--ink2);max-width:440px} .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:22px} .tags span{font-family:var(--mono);font-size:11px;letter-spacing:.03em;padding:6px 11px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(10,10,12,.16);color:var(--ink2)} .tags span.o{background:var(--o);color:#fff;box-shadow:none} .pinfo .go{display:inline-flex;align-items:center;gap:12px;margin-top:30px;font-weight:600} .pinfo .go i{font-style:normal;width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;transition:transform .5s var(--ease),background .3s} .proj:hover .pinfo .go i{transform:rotate(-45deg);background:var(--o)} .pvis{display:block;position:relative;cursor:none} .pvis .win{position:relative;box-shadow:0 0 0 1px rgba(10,10,12,.1),0 50px 90px -40px rgba(10,10,12,.45)} .pvis .win .bar{background:#ECE8DF;border-color:rgba(10,10,12,.06)} .pvis .win .bar i{background:#d4cfc4} .pvis .win .bar span{color:#66615A} .pvis .vp img{transition:transform var(--dur,7s) cubic-bezier(.45,.05,.35,1)} .pvis:hover .vp img,.pvis.play .vp img{transform:translateY(calc(-100% + var(--vh,400px)))} .pvis .hint{position:absolute;left:18px;bottom:18px;z-index:3;font-family:var(--mono);font-size:11px;letter-spacing:.05em;padding:6px 10px;border-radius:999px;background:rgba(10,10,12,.78);color:#fff;transition:opacity .3s} .pvis:hover .hint{opacity:0} .work-more{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:40px 0 70px;border-top:1px solid rgba(10,10,12,.1)} .work-more b{font-family:var(--disp);font-weight:500;font-size:clamp(24px,2.6vw,38px);letter-spacing:-.04em} .work-more b span{color:var(--o)} /* services — разгъващи се панели */ .svc{padding:140px 0 120px} .acc{display:flex;gap:10px;height:620px} .pan{position:relative;flex:1;min-width:0;border-radius:26px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;transition:flex .8s var(--ease),background .4s;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;padding:26px} .pan.on{flex:4.2;background:var(--panel2);cursor:default} .pan .art{position:absolute;inset:0;opacity:.45;transition:opacity .6s} .pan.on .art{opacity:1} .pan .art svg{position:absolute;right:-8%;top:-6%;width:78%;height:auto;transition:transform 1.2s var(--ease)} .pan.on .art svg{transform:rotate(-4deg) scale(1.04)} .pan .top{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:10px} .pan .num{font-family:var(--mono);font-size:12px;color:var(--mute)} .pan .vt{position:absolute;left:26px;bottom:26px;writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--disp);font-size:22px;letter-spacing:-.03em;white-space:nowrap;transition:opacity .3s} .pan.on .vt{opacity:0} .pan .body{position:relative;opacity:0;transform:translateY(16px);transition:opacity .4s,transform .6s var(--ease);pointer-events:none;max-width:520px} .pan.on .body{opacity:1;transform:none;transition-delay:.25s;pointer-events:auto} .pan h3{font-family:var(--disp);font-weight:500;letter-spacing:-.04em;font-size:clamp(28px,2.6vw,42px);line-height:1} .pan .price{display:inline-flex;gap:8px;align-items:baseline;margin:16px 0 14px;font-size:15px;color:var(--mute)} .pan .price b{font-family:var(--disp);font-weight:500;font-size:26px;color:var(--text);letter-spacing:-.03em} .pan p{color:#cfcbc3;margin-bottom:16px} .pan ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px} .pan li{font-size:13px;padding:6px 11px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line2);color:#d8d4cc} .pan .lnk{display:inline-flex;gap:10px;align-items:center;font-weight:600} .pan .lnk i{font-style:normal;width:36px;height:36px;border-radius:50%;background:var(--o);display:grid;place-items:center;transition:transform .4s var(--ease)} .pan .lnk:hover i{transform:rotate(-45deg)} /* speed before/after */ .speed{padding:40px 0 140px} .sp-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center} .cmp{position:relative;aspect-ratio:1/.82;border-radius:28px;overflow:hidden;user-select:none;touch-action:pan-y;box-shadow:inset 0 0 0 1px var(--line)} .cmp .side{position:absolute;inset:0;display:grid;place-items:center;padding:30px} .cmp .before{background:#141418} .cmp .after{background:linear-gradient(160deg,#10213f,#0b1e3f 60%,#08152c);clip-path:inset(0 0 0 var(--x,88%))} .gauge{text-align:center} .gauge svg{width:min(250px,56vw);height:auto;display:block;margin:0 auto} .gauge .t{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:18px} .gauge .m{display:flex;gap:26px;justify-content:center;margin-top:20px;font-size:14px;color:var(--mute)} .gauge .m b{display:block;font-family:var(--disp);font-weight:500;color:var(--text);font-size:22px;letter-spacing:-.03em} .after .m b{color:#4ade80} .cmp .handle{position:absolute;top:0;bottom:0;left:var(--x,88%);width:2px;background:#fff;transform:translateX(-1px);z-index:3} .cmp .handle span{position:absolute;top:50%;left:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.4);cursor:ew-resize} .cmp .tagx{position:absolute;top:18px;z-index:2;font-family:var(--mono);font-size:11px;letter-spacing:.06em;padding:6px 11px;border-radius:999px;background:rgba(0,0,0,.5)} .cmp .tb{left:18px}.cmp .ta{right:18px;background:var(--o)} .facts{margin-top:34px;border-top:1px solid var(--line)} .facts div{display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--line);color:#cfcbc3} .facts b{font-family:var(--disp);font-weight:500;color:var(--text)} /* estimator */ .est{padding:0 0 140px} .est-box{display:grid;grid-template-columns:1.1fr .9fr;border-radius:32px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)} .est-l{padding:48px;background:var(--bg2)} .est-r{padding:48px;background:var(--o);color:#fff;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden} .est-r::before{content:"";position:absolute;right:-120px;bottom:-120px;width:420px;height:420px;border-radius:50%;box-shadow:0 0 0 60px rgba(255,255,255,.06),0 0 0 120px rgba(255,255,255,.04)} .q{margin-top:30px} .q>span{display:block;font-size:14px;color:var(--mute);margin-bottom:12px} .seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .seg button{padding:16px 14px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line2);text-align:left;transition:.25s} .seg button b{display:block;font-weight:600;font-size:15.5px} .seg button small{color:var(--mute);font-size:12.5px} .seg button.on{background:var(--text);color:var(--ink);box-shadow:none} .seg button.on small{color:var(--ink2)} .rng{display:flex;align-items:center;gap:18px} .rng input{flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--o) var(--p,20%),#2d2d33 var(--p,20%));outline:none} .rng input::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:6px solid var(--o);cursor:grab} .rng input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:6px solid var(--o)} .rng output{font-family:var(--disp);font-weight:500;font-size:22px;min-width:64px;text-align:right} .chips{display:flex;flex-wrap:wrap;gap:8px} .chips label{cursor:pointer} .chips label{position:relative} .chips input{position:absolute!important;opacity:0;width:1px!important;height:1px;left:0;top:0;padding:0!important} .chips span{display:inline-block;padding:10px 15px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line2);font-size:14px;color:#d8d4cc;transition:.2s} .chips input:checked+span{background:var(--o);color:#fff;box-shadow:none} .chips input:focus-visible+span{outline:2px solid var(--o);outline-offset:2px} .est-r .lbl{color:rgba(255,255,255,.8)} .est-r .lbl i{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.25)} .price-big{font-family:var(--disp);font-weight:500;letter-spacing:-.05em;white-space:nowrap;font-size:clamp(34px,4.2vw,64px);line-height:1;margin:18px 0 10px} .est-r p{color:rgba(255,255,255,.85);max-width:360px} .est-r .wk{display:flex;gap:30px;margin:28px 0} .est-r .wk b{display:block;font-family:var(--disp);font-weight:500;font-size:28px;letter-spacing:-.03em} .est-r .wk span{font-size:13px;color:rgba(255,255,255,.8)} .est-r .btn{background:#fff;color:var(--ink);position:relative;align-self:flex-start} .est-r .btn .ar{background:rgba(10,10,12,.08)} .est-r small{display:block;margin-top:14px;font-size:12.5px;color:rgba(255,255,255,.75)} /* process */ .proc{padding:0 0 140px} .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);position:relative} .steps .bar{position:absolute;left:0;top:-1px;height:2px;background:var(--o);width:var(--pp,0%)} .step{padding:34px 28px 10px 0} .step+.step{padding-left:28px;border-left:1px solid var(--line)} .step .n{font-family:var(--disp);font-size:56px;font-weight:500;letter-spacing:-.05em;color:var(--faint);line-height:1;transition:color .5s} .step.on .n{color:var(--o)} .step h3{font-family:var(--disp);font-weight:500;font-size:22px;letter-spacing:-.03em;margin:26px 0 10px} .step p{color:var(--mute);font-size:15.5px} /* testimonials */ .rev{padding:130px 0;background:var(--cream);color:var(--ink);border-radius:40px} .rev .lbl{color:var(--ink2)} .rev .h2 .dim{color:#857f73} .rv-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px max(32px,calc((100vw - var(--wrap))/2 + 32px)) 10px;scroll-padding:0 max(32px,calc((100vw - var(--wrap))/2 + 32px));cursor:grab} .rv-track::-webkit-scrollbar{display:none} .rv-track.drag{cursor:grabbing;scroll-snap-type:none} .q-card{flex:none;width:min(460px,84vw);scroll-snap-align:start;background:#fff;border-radius:26px;padding:34px;display:flex;flex-direction:column;justify-content:space-between;gap:30px;box-shadow:0 0 0 1px rgba(10,10,12,.06)} .q-card blockquote{font-size:19px;line-height:1.5;letter-spacing:-.01em;color:var(--ink)} .q-card blockquote::before{content:"“";display:block;font-family:var(--disp);font-size:64px;line-height:.6;color:var(--o);margin-bottom:12px} .who{display:flex;align-items:center;gap:14px} .who i{font-style:normal;width:48px;height:48px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--disp);font-size:15px} .who b{display:block;font-weight:600} .who span{font-size:14px;color:#77736b} .rv-ctrl{display:flex;gap:8px} .rv-ctrl button{width:50px;height:50px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(10,10,12,.18);display:grid;place-items:center;transition:.25s} .rv-ctrl button:hover{background:var(--ink);color:#fff} /* weberSoft band */ .soft{padding:120px 0} .soft-box{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;padding:44px 48px;border-radius:30px;background:linear-gradient(120deg,#0b1e3f,#0e2a57);position:relative;overflow:hidden} .soft-box::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.14) 1.2px,transparent 1.3px);background-size:22px 22px;-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000);mask-image:linear-gradient(90deg,transparent 30%,#000)} .soft-box>*{position:relative} .soft-box h3{font-family:var(--disp);font-weight:500;letter-spacing:-.04em;font-size:clamp(26px,2.8vw,42px);line-height:1.05;margin-top:14px;max-width:700px} .soft-box h3 span{color:#8fb4ff} /* faq + contact */ .faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px} .fq{border-top:1px solid var(--line)} .fi{border-bottom:1px solid var(--line)} .fi button{width:100%;text-align:left;display:flex;justify-content:space-between;gap:20px;padding:24px 0;font-size:19px;font-weight:500;letter-spacing:-.01em} .fi .pl{flex:none;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line2);position:relative;transition:.3s} .fi .pl::before,.fi .pl::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;background:currentColor;transform:translate(-50%,-50%);transition:transform .4s var(--ease)} .fi .pl::after{transform:translate(-50%,-50%) rotate(90deg)} .fi.open .pl{background:var(--o);box-shadow:none} .fi.open .pl::after{transform:translate(-50%,-50%) rotate(0)} .fa{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)} .fi.open .fa{grid-template-rows:1fr} .fa>div{overflow:hidden} .fa p{color:var(--mute);padding-bottom:24px;max-width:640px} .contact{padding:140px 0} .ct{display:grid;grid-template-columns:1fr 1.1fr;gap:64px} .ct-info{margin-top:40px;border-top:1px solid var(--line)} .ct-info a,.ct-info div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:16px 0;border-bottom:1px solid var(--line);font-size:17px} .ct-info small{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)} .ct-info a:hover{color:var(--o)} form.cf{background:var(--panel);border-radius:28px;padding:36px;box-shadow:inset 0 0 0 1px var(--line);display:grid;grid-template-columns:1fr 1fr;gap:14px} form.cf h3{grid-column:1/-1;font-family:var(--disp);font-weight:500;font-size:26px;letter-spacing:-.03em;margin-bottom:6px} .fld{min-width:0}.fld.full{grid-column:1/-1} .fld label{display:block;font-size:13px;color:var(--mute);margin-bottom:7px} .fld input,.fld textarea{width:100%;font:inherit;font-size:16px;color:var(--text);background:var(--bg2);border:1px solid transparent;border-radius:14px;padding:15px 16px;transition:border-color .2s} .fld textarea{min-height:120px;resize:vertical} .fld input:focus,.fld textarea:focus{outline:none;border-color:rgba(255,255,255,.35)} .fld input::placeholder,.fld textarea::placeholder{color:var(--faint)} .cf .sub{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px} .cf .sub small{color:var(--faint);font-size:13px;max-width:320px} .cf .sub small a{text-decoration:underline} .fmsg{grid-column:1/-1;display:none;padding:14px 16px;border-radius:12px} .fmsg.ok{display:block;background:rgba(74,222,128,.12);color:#86efac} .fmsg.err{display:block;background:rgba(255,77,28,.14);color:#ffab8e} /* footer */ footer{border-top:1px solid var(--line);padding:90px 0 36px} .ft{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:36px} .ft p{color:var(--mute);font-size:15px;margin-top:18px;max-width:320px} .ft h6{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:400;margin-bottom:16px} .ft ul{list-style:none}.ft li{margin-bottom:9px;font-size:15px;color:#cfcbc3} .ft li a:hover{color:var(--o)} .cities{margin-top:60px;padding-top:24px;border-top:1px solid var(--line);font-size:14px;color:var(--faint);display:flex;flex-wrap:wrap;gap:6px 14px} .cities a{color:var(--mute)}.cities a:hover{color:var(--o)} .wm{font-family:var(--disp);font-weight:600;letter-spacing:-.07em;font-size:clamp(90px,21vw,330px);line-height:.8;margin:50px 0 30px;color:#1f1f25;white-space:nowrap;overflow:hidden;user-select:none} .fb{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--faint)} /* cursor */ .cur{position:fixed;left:0;top:0;z-index:90;pointer-events:none;width:100px;height:100px;margin:-50px 0 0 -50px;border-radius:50%;background:var(--o);color:#fff;display:grid;place-items:center;text-align:center;font-size:13px;font-weight:600;line-height:1.2;transform:scale(0);transition:transform .4s var(--ease)} .cur.on{transform:scale(1)} /* reveal */ html.js:not(.rm) [data-rv]{opacity:0} html.nogsap [data-rv]{opacity:1!important} html.js:not(.rm):not(.ready) [data-hsplit]{visibility:hidden} /* topbar */ .topbar{position:relative;z-index:61;display:flex;justify-content:center;align-items:center;gap:10px;padding:10px 16px;background:var(--o);color:#fff;font-size:14px;text-align:center} .topbar b{font-weight:600}.topbar .dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:blink 2s infinite} .topbar .ar{transition:transform .3s var(--ease)}.topbar:hover .ar{transform:translateX(4px)} @keyframes blink{50%{opacity:.3}} header{top:var(--tb,40px)}header.solid{top:0} /* audit */ .audit{padding:0 0 130px} .au-box{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center;padding:52px;border-radius:32px;background:radial-gradient(120% 140% at 100% 0%,rgba(255,77,28,.22),transparent 55%),var(--panel);box-shadow:inset 0 0 0 1px var(--line)} .au-list{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:26px} .au-list li{font-size:14px;padding:8px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line2);color:#d8d4cc} .au-form{grid-template-columns:1fr;background:var(--bg2)} .au-note{font-size:12.5px;color:var(--faint)}.au-note a{text-decoration:underline} /* world */ .world{padding:0 0 130px} .cn{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .cn .c{padding:26px;border-radius:22px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);transition:transform .5s var(--ease),background .3s} .cn .c:hover{transform:translateY(-6px);background:var(--panel2)} .cn svg{width:38px;height:26px;border-radius:4px;display:block;margin-bottom:40px;box-shadow:0 0 0 1px rgba(255,255,255,.12)} .cn b{display:block;font-family:var(--disp);font-weight:500;font-size:22px;letter-spacing:-.03em} .cn span{font-size:14px;color:var(--mute);display:block;margin-top:6px} .tech{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border-radius:22px;overflow:hidden;margin-top:14px;box-shadow:inset 0 0 0 1px var(--line)} .tech div{background:var(--bg);height:110px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;transition:background .3s} .tech div:hover{background:var(--panel)} .tech i{width:28px;height:28px;background:#d8d4cc;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;transition:background .3s} .tech div:hover i{background:var(--o)} .tech span{font-size:12.5px;color:var(--mute)} /* blog */ .blogs{padding:0 0 60px} .bl{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .bc{display:flex;flex-direction:column;gap:18px;min-height:260px;padding:28px;border-radius:24px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);transition:background .3s,transform .5s var(--ease)} .bc:hover{background:var(--panel2);transform:translateY(-4px)} .bc h3{font-family:var(--disp);font-weight:500;font-size:22px;letter-spacing:-.03em;line-height:1.15} .bc .go{margin-top:auto;font-weight:600;color:var(--o)} @media (max-width:960px){.au-box{grid-template-columns:1fr;padding:30px}.cn{grid-template-columns:1fr 1fr}.tech{grid-template-columns:repeat(4,1fr)}.bl{grid-template-columns:1fr}} @media (max-width:640px){.topbar{font-size:13px}.tb-more{display:none}.au-box{padding:22px}.cn{grid-template-columns:1fr}.tech{grid-template-columns:repeat(3,1fr)}.tech div{height:90px}} /* responsive */ @media (max-width:1100px){.hd nav,.hr .btn{display:none}.burger{display:block}.hd{justify-content:space-between}.acc{flex-direction:column;height:auto}.pan{min-height:92px;flex:none!important}.pan.on{min-height:540px}.pan .vt{writing-mode:horizontal-tb;transform:none;left:26px;top:26px;bottom:auto;font-size:22px;padding-left:40px}.pan .top{display:none}.pan.on .top{display:flex}} @media (max-width:960px){.sh,.sp-grid,.faq-grid,.ct,.est-box{grid-template-columns:1fr}.proj,.proj:nth-child(even){grid-template-columns:1fr;gap:28px}.proj:nth-child(even) .pinfo{order:0}.steps{grid-template-columns:1fr 1fr}.step:nth-child(3){padding-left:0;border-left:0}.ft{grid-template-columns:1fr 1fr}.ft>div:first-child{grid-column:1/-1}.w1{display:none}.w2{left:0;width:64%}.w3{width:44%}} @media (max-width:640px){body{font-size:16px}.wrap{padding:0 16px}.hd{margin:10px 10px 0;padding:0 6px 0 16px}.hero{padding-top:120px;min-height:0}.h1{font-size:clamp(34px,10.5vw,54px);margin:22px 0}.h2{font-size:clamp(30px,8.6vw,44px)}.ctas .btn{flex:1 1 100%;justify-content:space-between}.proof{gap:22px}.proof div{flex:1 1 40%}.reel{height:260px;margin-top:44px}.w2{width:78%}.w3{width:48%;top:24%}.rb{height:80px}.rb-lbl{display:none}.rb-track img{height:24px;margin:0 22px}.work{padding-top:90px;border-radius:28px 28px 0 0}.proj{padding:40px 0}.svc{padding:90px 0}.est-l,.est-r{padding:26px}.seg{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.step,.step+.step{padding:26px 0;border-left:0}.rev{padding:90px 0;border-radius:28px}.rv-track{padding:6px 16px 10px}.soft{padding:80px 0}.soft-box{padding:28px}form.cf{grid-template-columns:1fr;padding:22px}.contact{padding:90px 0}.btn{white-space:normal;height:auto;min-height:54px;padding:12px 22px;line-height:1.25}.pinfo h3{font-size:clamp(34px,10vw,52px)}.pvis{cursor:auto}} @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}} /* ====================================================================== ОБЩИ ДОБАВКИ ====================================================================== */ .skip{position:fixed;left:16px;top:-60px;z-index:300;background:var(--o);color:#fff;padding:10px 16px;border-radius:10px;transition:top .2s} .skip:focus{top:16px} header{transition:transform .5s var(--ease),top .35s var(--ease)} /* език — глобус без рамка */ .lang-dd{position:relative} .lang-dd>button{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 10px;border-radius:12px;color:#cfcbc3;font-size:13px;font-weight:600;letter-spacing:.04em;transition:background .2s,color .2s} .lang-dd>button:hover,.lang-dd.open>button{background:rgba(255,255,255,.07);color:#fff} .lang-dd>button svg{width:20px;height:20px} .lang-dd>button .chev{width:10px;height:10px;transition:transform .3s var(--ease)} .lang-dd.open>button .chev{transform:rotate(180deg)} .lang-dd ul{position:absolute;right:0;top:calc(100% + 10px);list-style:none;min-width:170px;padding:6px;border-radius:16px;background:#18181c;box-shadow:0 0 0 1px var(--line2),0 30px 60px -20px rgba(0,0,0,.7);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.25s var(--ease)} .lang-dd.open ul{opacity:1;visibility:visible;transform:none} .lang-dd li a{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 12px;border-radius:10px;font-size:14.5px;color:#d8d4cc} .lang-dd li a:hover{background:rgba(255,255,255,.06);color:#fff} .lang-dd li a[aria-current]{color:#fff} .lang-dd li a[aria-current]::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--o)} .lang-dd li a small{font-family:var(--mono);font-size:11px;color:var(--faint)} header.light .lang-dd>button{color:var(--ink2)} header.light .lang-dd>button:hover,header.light .lang-dd.open>button{background:rgba(10,10,12,.06);color:var(--ink)} /* мега меню за услуги */ .hd nav .has-dd{position:relative} .hd nav .has-dd>button{display:flex;align-items:center;gap:6px;padding:9px 13px;border-radius:10px;font-size:15px;font-weight:500;color:#cfcbc3;transition:background .2s,color .2s} .hd nav .has-dd>button:hover,.hd nav .has-dd.open>button{background:rgba(255,255,255,.07);color:#fff} header.light nav .has-dd>button{color:var(--ink2)} .hd nav .has-dd>button .chev{width:10px;height:10px;transition:transform .3s var(--ease)} .hd nav .has-dd.open>button .chev{transform:rotate(180deg)} .mega{position:absolute;left:-20px;top:calc(100% + 14px);width:720px;padding:12px;border-radius:22px;background:#141418;box-shadow:0 0 0 1px var(--line2),0 40px 80px -30px rgba(0,0,0,.8);display:grid;grid-template-columns:1fr 1fr 220px;gap:4px;opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:10% 0;transition:.3s var(--ease)} .has-dd.open .mega{opacity:1;visibility:visible;transform:none} .mega a.mi{display:flex;gap:12px;padding:12px;border-radius:14px;transition:background .15s} .mega a.mi:hover{background:rgba(255,255,255,.05)} .mega .mi i{flex:none;width:38px;height:38px;border-radius:11px;background:#212127;display:grid;place-items:center;font-style:normal;color:var(--o)} .mega .mi i svg{width:19px;height:19px;stroke:currentColor} .mega .mi b{display:block;font-weight:600;font-size:15px;color:#f3f0ea} .mega .mi span{display:block;font-size:13px;color:var(--mute);line-height:1.35;margin-top:2px} .mega .mfeat{border-radius:16px;background:var(--o);color:#fff;padding:20px;display:flex;flex-direction:column;justify-content:space-between;gap:20px;position:relative;overflow:hidden} .mega .mfeat::after{content:"";position:absolute;right:-60px;bottom:-60px;width:180px;height:180px;border-radius:50%;box-shadow:0 0 0 26px rgba(255,255,255,.08),0 0 0 52px rgba(255,255,255,.05)} .mega .mfeat b{font-family:var(--disp);font-weight:500;font-size:22px;letter-spacing:-.03em;line-height:1.05;position:relative} .mega .mfeat span{font-size:13.5px;color:rgba(255,255,255,.88);position:relative} .mega .mfeat em{font-style:normal;font-weight:600;position:relative} /* плаващ CTA — винаги достъпен */ .fcta{position:fixed;right:20px;bottom:20px;z-index:70;display:flex;align-items:center;gap:10px;height:58px;padding:0 10px 0 22px;border-radius:999px;background:var(--o);color:#fff;font-weight:600;box-shadow:0 20px 40px -14px rgba(255,77,28,.7);transform:translateY(140%);transition:transform .6s var(--ease),box-shadow .3s} .fcta.show{transform:none} .fcta:hover{box-shadow:0 24px 50px -14px rgba(255,77,28,.9)} .fcta i{font-style:normal;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;transition:transform .4s var(--ease)} .fcta:hover i{transform:rotate(-45deg)} .fcta .pulse{position:absolute;left:10px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#fff;opacity:0} body.mopen .fcta{transform:translateY(140%)} /* бисквитки */ .cookie{position:fixed;left:20px;bottom:20px;z-index:80;max-width:380px;background:#18181c;color:#d8d4cc;border-radius:20px;padding:20px;font-size:14px;box-shadow:0 0 0 1px var(--line2),0 30px 60px -20px rgba(0,0,0,.7);transform:translateY(160%);transition:transform .7s var(--ease)} .cookie.show{transform:none} .cookie a{text-decoration:underline} .cookie .b{display:flex;gap:8px;margin-top:14px} .cookie button{height:40px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:600} .cookie .ok{background:var(--o);color:#fff} .cookie .no{box-shadow:inset 0 0 0 1px var(--line2)} /* breadcrumbs */ .crumbs{display:flex;flex-wrap:wrap;gap:8px;list-style:none;font-size:13.5px;color:var(--mute)} .crumbs a:hover{color:var(--text)} .crumbs li+li::before{content:"/";margin-right:8px;color:var(--faint)} .light-sec .crumbs{color:var(--ink2)} /* секции */ .sec{padding:120px 0} .sec-t{padding-top:0} .light-sec{background:var(--cream);color:var(--ink)} .light-sec .lbl{color:var(--ink2)} .light-sec .h2 .dim{color:#857f73} .light-sec .lead{color:var(--ink2)} .rnd{border-radius:40px} .rnd-t{border-radius:40px 40px 0 0} /* ------------------------------------------------ PAGE HERO (общ) */ .ph{position:relative;padding:190px 0 90px;overflow:hidden;isolation:isolate} .ph .glow{position:absolute;z-index:-1;width:900px;height:900px;right:-240px;top:-360px;border-radius:50%;background:radial-gradient(circle,rgba(255,77,28,.28),transparent 62%);pointer-events:none;transform:translate(var(--gx,0),var(--gy,0));transition:transform 1.4s var(--ease)} .ph h1{font-family:var(--disp);font-weight:500;letter-spacing:-.05em;line-height:.96;font-size:clamp(42px,6.2vw,100px);margin:24px 0 28px;max-width:1150px} .ph h1 em{font-style:normal;color:var(--o)} .ph h1 .dim{color:var(--faint)} .ph .row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap} .ph .meta{display:flex;gap:40px;flex-wrap:wrap} .ph .meta b{display:block;font-family:var(--disp);font-weight:500;font-size:30px;letter-spacing:-.04em;line-height:1} .ph .meta span{font-size:13.5px;color:var(--mute)} /* ------------------------------------------------ SERVICE PAGE */ .sv-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center} .sv-art{position:relative;aspect-ratio:1/1;border-radius:36px;background:radial-gradient(90% 90% at 70% 20%,rgba(255,77,28,.2),transparent 60%),var(--panel);box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;overflow:hidden} .sv-art svg{width:78%;height:auto;transition:transform 1.2s var(--ease)} .sv-art .chip{position:absolute;left:24px;bottom:24px;padding:10px 16px;border-radius:14px;background:rgba(10,10,12,.72);backdrop-filter:blur(10px);font-size:14px;color:#d8d4cc} .sv-art .chip b{font-family:var(--disp);font-weight:500;font-size:22px;color:#fff;letter-spacing:-.03em;display:block} .forw{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .forw div{padding:30px;border-radius:24px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)} .forw div .n{font-family:var(--mono);font-size:12px;color:var(--o)} .forw div h3{font-family:var(--disp);font-weight:500;font-size:21px;letter-spacing:-.03em;margin:30px 0 8px;line-height:1.15} .forw div p{color:var(--mute);font-size:15.5px} .inc{display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px;border-top:1px solid var(--line)} .inc div{display:grid;grid-template-columns:34px 1fr;gap:6px;padding:22px 0;border-bottom:1px solid var(--line)} .inc div::before{content:"";width:20px;height:20px;margin-top:3px;border-radius:6px;background:var(--o) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat} .inc b{display:block;font-weight:600;font-size:17px} .inc p{color:var(--mute);font-size:15px;margin-top:2px} .pk{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .pk .p{position:relative;padding:34px;border-radius:28px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column} .pk .p.hl{background:var(--o);color:#fff;box-shadow:none} .pk .p .tg{position:absolute;right:22px;top:22px;font-family:var(--mono);font-size:11px;letter-spacing:.05em;padding:5px 10px;border-radius:999px;background:#fff;color:var(--ink)} .pk .p h3{font-family:var(--disp);font-weight:500;font-size:24px;letter-spacing:-.03em} .pk .p .sub{font-size:14px;color:var(--mute);margin-top:4px} .pk .p.hl .sub{color:rgba(255,255,255,.85)} .pk .p .pr{font-family:var(--disp);font-weight:500;font-size:42px;letter-spacing:-.05em;margin:26px 0 4px} .pk .p .per{font-size:13px;color:var(--mute)} .pk .p.hl .per{color:rgba(255,255,255,.85)} .pk .p ul{list-style:none;margin:24px 0 28px;border-top:1px solid var(--line)} .pk .p.hl ul{border-color:rgba(255,255,255,.25)} .pk .p li{padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px;display:flex;gap:10px} .pk .p.hl li{border-color:rgba(255,255,255,.2)} .pk .p li::before{content:"✓";color:var(--o);font-weight:700} .pk .p.hl li::before{color:#fff} .pk .p .btn{margin-top:auto;justify-content:space-between} .pk .p.hl .btn{background:#fff;color:var(--ink)} .pk .p.hl .btn .ar{background:rgba(10,10,12,.08)} /* related work strip */ .rw{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .rw a{display:block} .rw .win{position:relative} .rw .vp img{transition:transform var(--dur,6s) cubic-bezier(.45,.05,.35,1)} .rw a:hover .vp img,.rw a.play .vp img{transform:translateY(calc(-100% + var(--vh,300px)))} .rw .cap{display:flex;justify-content:space-between;gap:10px;margin-top:14px} .rw .cap b{font-family:var(--disp);font-weight:500;letter-spacing:-.03em;font-size:20px} .rw .cap span{font-size:13.5px;color:var(--mute)} .light-sec .rw .cap span{color:var(--ink2)} .light-sec .rw .win{box-shadow:0 0 0 1px rgba(10,10,12,.1),0 30px 60px -30px rgba(10,10,12,.35)} .light-sec .rw .win .bar{background:#ECE8DF} /* ------------------------------------------------ PORTFOLIO HUB */ .pf-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:34px} .pf-filters button{padding:10px 18px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(10,10,12,.18);font-size:15px;font-weight:500;color:var(--ink2);transition:.25s} .pf-filters button:hover{box-shadow:inset 0 0 0 1px var(--ink)} .pf-filters button.on{background:var(--ink);color:#fff;box-shadow:none} .pf-filters button span{font-family:var(--mono);font-size:11px;opacity:.6;margin-left:6px} .pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 18px} .pf-card{display:block} .pf-card.hide{display:none} .pf-card .win{box-shadow:0 0 0 1px rgba(10,10,12,.1),0 30px 60px -34px rgba(10,10,12,.4)} .pf-card .win .bar{background:#ECE8DF;border-color:rgba(10,10,12,.06)} .pf-card .win .bar i{background:#d4cfc4} .pf-card .win .bar span{color:#66615A} .pf-card .vp img{transition:transform var(--dur,6s) cubic-bezier(.45,.05,.35,1)} .pf-card:hover .vp img,.pf-card.play .vp img{transform:translateY(calc(-100% + var(--vh,300px)))} .pf-card .cap{margin-top:16px} .pf-card .cap .t{display:flex;justify-content:space-between;align-items:baseline;gap:10px} .pf-card .cap b{font-family:var(--disp);font-weight:500;letter-spacing:-.03em;font-size:22px} .pf-card .cap .ty{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:#66615A;white-space:nowrap} .pf-card .cap p{font-size:14.5px;color:var(--ink2);margin-top:4px} /* ------------------------------------------------ PROJECT PAGE */ .pj-hero{padding:190px 0 60px} .pj-hero h1{font-family:var(--disp);font-weight:500;letter-spacing:-.06em;line-height:.9;font-size:clamp(56px,10vw,170px);margin:22px 0 26px} .pj-meta{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);margin-top:50px} .pj-meta div{padding:20px 20px 20px 0;border-right:1px solid var(--line)} .pj-meta div+div{padding-left:20px} .pj-meta div:last-child{border-right:0} .pj-meta span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:6px} .pj-meta b{font-weight:600;font-size:15.5px} .pj-meta a{color:var(--o)} .pj-stage{position:relative;padding:0 0 110px} .pj-stage .win{max-width:1180px;margin:0 auto} .pj-stage .vp{aspect-ratio:16/10} .pj-stage .vp img{animation:scrollshot var(--dur,30s) var(--ease) infinite alternate} .pj-stage .ctrl{display:flex;justify-content:center;gap:10px;margin-top:22px} .pj-stage .ctrl button{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line2);font-size:14px;color:#d8d4cc} .pj-stage .ctrl button:hover{background:var(--text);color:var(--ink)} .pj-stage.paused .vp img{animation-play-state:paused} .pj-body{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px} .pj-body .h2{font-size:clamp(30px,3.4vw,52px)} .pj-body p.lead{color:var(--ink2)} .feat-l{list-style:none;border-top:1px solid rgba(10,10,12,.1)} .feat-l li{display:grid;grid-template-columns:44px 1fr;padding:20px 0;border-bottom:1px solid rgba(10,10,12,.1);font-size:17px} .feat-l li span{font-family:var(--mono);font-size:12px;color:var(--o);padding-top:4px} .pj-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px} .pj-tags span{font-size:13.5px;padding:8px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(10,10,12,.16);color:var(--ink2)} .pj-next{display:block;padding:110px 0;position:relative;overflow:hidden} .pj-next .lbl{color:var(--mute)} .pj-next b{display:flex;justify-content:space-between;align-items:center;gap:30px;font-family:var(--disp);font-weight:500;letter-spacing:-.06em;line-height:.9;font-size:clamp(50px,9vw,150px);margin-top:22px} .pj-next b i{font-style:normal;flex:none;width:clamp(64px,8vw,120px);height:clamp(64px,8vw,120px);border-radius:50%;background:var(--o);display:grid;place-items:center;font-size:.35em;transition:transform .7s var(--ease)} .pj-next:hover b i{transform:rotate(-45deg) scale(1.05)} /* ------------------------------------------------ ABOUT */ .manif p{font-family:var(--disp);font-weight:500;letter-spacing:-.04em;line-height:1.12;font-size:clamp(28px,3.8vw,56px);max-width:1150px} .manif .w{opacity:.14;transition:opacity .3s} .manif .w.on{opacity:1} html.nogsap .manif .w,html.rm .manif .w{opacity:1} .vals{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .vals div{padding:30px;border-radius:24px;background:#fff;box-shadow:0 0 0 1px rgba(10,10,12,.06)} .vals .n{font-family:var(--disp);font-size:44px;font-weight:500;letter-spacing:-.05em;color:var(--o);line-height:1} .vals h3{font-family:var(--disp);font-weight:500;font-size:20px;letter-spacing:-.03em;margin:40px 0 8px} .vals p{color:var(--ink2);font-size:15px} .nums{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .nums div{padding:44px 28px;border-right:1px solid var(--line)} .nums div:last-child{border-right:0} .nums b{display:block;font-family:var(--disp);font-weight:500;letter-spacing:-.05em;font-size:clamp(46px,5vw,76px);line-height:1} .nums b sup{font-size:.42em;color:var(--o);vertical-align:1em} .nums span{color:var(--mute);font-size:15px;display:block;margin-top:10px} /* ------------------------------------------------ CLIENTS */ .lwall{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:rgba(10,10,12,.08);border-radius:26px;overflow:hidden;box-shadow:0 0 0 1px rgba(10,10,12,.08)} .lwall div{background:var(--cream);height:120px;display:grid;place-items:center;padding:22px;transition:background .3s} .lwall div:hover{background:#fff} .lwall img{max-height:38px;max-width:120px;width:auto;filter:grayscale(1);opacity:.6;transition:.3s} .lwall div:hover img{filter:none;opacity:1} .qgrid{columns:3;column-gap:14px} .qgrid .q-card{width:auto;break-inside:avoid;margin-bottom:14px} /* ------------------------------------------------ FAQ PAGE */ .fsearch{position:relative;max-width:560px} .fsearch input{width:100%;height:60px;border-radius:999px;background:var(--panel);border:1px solid var(--line2);color:var(--text);font:inherit;font-size:17px;padding:0 24px 0 54px} .fsearch input:focus{outline:none;border-color:var(--o)} .fsearch svg{position:absolute;left:20px;top:50%;width:20px;height:20px;margin-top:-10px;stroke:var(--mute)} .fcats{display:grid;grid-template-columns:260px 1fr;gap:64px;align-items:start} .fcats nav{position:sticky;top:120px;display:flex;flex-direction:column;gap:4px} .fcats nav a{padding:10px 14px;border-radius:12px;color:var(--mute);font-weight:500;transition:.2s} .fcats nav a:hover,.fcats nav a.on{background:var(--panel);color:#fff} .fgroup{margin-bottom:56px} .fgroup h2{font-family:var(--disp);font-weight:500;font-size:28px;letter-spacing:-.03em;margin-bottom:10px;scroll-margin-top:110px} .fi.hide{display:none} .fempty{display:none;color:var(--mute);padding:30px 0} /* ------------------------------------------------ CONTACT PAGE */ .ct-page{padding:190px 0 110px} .ccards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:60px} .ccards a,.ccards div{padding:26px;border-radius:22px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;gap:30px;transition:background .3s} .ccards a:hover{background:var(--panel2)} .ccards .lbl{font-size:11px} .ccards b{font-family:var(--disp);font-weight:500;font-size:19px;letter-spacing:-.02em;line-height:1.25} .ccards small{display:block;color:var(--mute);font-size:13.5px;margin-top:6px} /* ------------------------------------------------ BLOG */ .bfeat{display:grid;grid-template-columns:1.1fr 1fr;border-radius:32px;overflow:hidden;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);transition:background .3s} .bfeat:hover{background:var(--panel2)} .bfeat .art{position:relative;min-height:400px;background:radial-gradient(80% 80% at 30% 30%,rgba(255,77,28,.35),transparent 60%),#0f0f12;overflow:hidden} .bfeat .art span{position:absolute;left:36px;bottom:20px;font-family:var(--disp);font-weight:600;font-size:clamp(90px,11vw,170px);letter-spacing:-.07em;line-height:.8;color:rgba(255,255,255,.08)} .bfeat .c{padding:48px;display:flex;flex-direction:column;justify-content:space-between;gap:24px} .bfeat h2{font-family:var(--disp);font-weight:500;letter-spacing:-.035em;font-size:clamp(28px,2.8vw,42px);line-height:1.08} .bfeat p{color:var(--mute)} .bmeta{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)} .bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px} .bgrid .bc{min-height:280px} .bgrid .bc p{color:var(--mute);font-size:15px} .progress{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--o);transform-origin:0 50%;transform:scaleX(0);z-index:90} .art-hero{padding:190px 0 40px} .art-hero h1{font-family:var(--disp);font-weight:500;letter-spacing:-.045em;line-height:1.02;font-size:clamp(34px,4.8vw,70px);margin:22px 0;max-width:1060px} .art-hero .lead{max-width:760px} .art{display:grid;grid-template-columns:240px minmax(0,740px);gap:80px;padding:40px 0 110px} .toc{position:sticky;top:120px;align-self:start;font-size:14px} .toc .lbl{display:flex;margin-bottom:14px} .toc a{display:block;padding:7px 0 7px 14px;border-left:1px solid var(--line2);color:var(--mute);transition:color .2s,border-color .2s} .toc a:hover{color:var(--text)} .toc a.on{color:var(--text);border-color:var(--o)} .prose{font-size:18px;line-height:1.75;color:#d4d0c8} .prose>*+*{margin-top:1.1em} .prose h2{font-family:var(--disp);font-weight:500;letter-spacing:-.03em;font-size:30px;line-height:1.15;color:#fff;margin-top:2em;scroll-margin-top:110px} .prose h3{font-family:var(--disp);font-weight:500;font-size:21px;color:#fff;margin-top:1.6em;letter-spacing:-.02em} .prose h4{font-weight:600;color:#fff;margin-top:1.4em} .prose ul,.prose ol{padding-left:0;list-style:none} .prose li{position:relative;padding-left:24px;margin-top:.5em} .prose ul li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:8px;border-radius:2px;background:var(--o)} .prose ol{counter-reset:o} .prose ol li{counter-increment:o} .prose ol li::before{content:counter(o);position:absolute;left:0;top:0;font-family:var(--mono);font-size:13px;color:var(--o)} .prose a{color:#fff;text-decoration:underline;text-decoration-color:var(--o);text-underline-offset:3px} .prose strong{color:#fff} .prose table{width:100%;border-collapse:collapse;font-size:15.5px;border-radius:16px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)} .prose th,.prose td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left} .prose th{background:var(--panel);color:#fff;font-weight:600} .prose blockquote{padding:22px 26px;border-radius:18px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);color:#e8e4dc} .prose .note{padding:22px 26px;border-radius:18px;background:rgba(255,77,28,.08);box-shadow:inset 0 0 0 1px rgba(255,77,28,.25)} .art-cta{margin-top:2.4em;padding:34px;border-radius:24px;background:var(--o);color:#fff} .art-cta b{display:block;font-family:var(--disp);font-weight:500;font-size:26px;letter-spacing:-.03em;line-height:1.1} .art-cta p{margin:10px 0 20px;color:rgba(255,255,255,.9)} .art-cta .btn{background:#fff;color:var(--ink)} /* ------------------------------------------------ CITIES */ .cty-hero{position:relative;padding:190px 0 90px;overflow:hidden} .cty-hero .big{position:absolute;right:-2%;bottom:-8%;font-family:var(--disp);font-weight:600;letter-spacing:-.07em;line-height:.8;font-size:clamp(110px,20vw,340px);color:#141418;z-index:-1;white-space:nowrap;user-select:none} .cty-hero h1{font-family:var(--disp);font-weight:500;letter-spacing:-.05em;line-height:.98;font-size:clamp(40px,5.6vw,90px);margin:22px 0 26px;max-width:1080px} .cty-hero h1 em{font-style:normal;color:var(--o)} .cty-stats{display:flex;gap:44px;margin-top:40px;flex-wrap:wrap} .cty-stats b{display:block;font-family:var(--disp);font-weight:500;font-size:34px;letter-spacing:-.04em;line-height:1} .cty-stats span{font-size:14px;color:var(--mute)} .sectors{display:flex;flex-wrap:wrap;gap:8px} .sectors span{padding:12px 18px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px rgba(10,10,12,.08);font-weight:500;color:var(--ink)} .cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .cgrid a{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:170px;padding:24px;border-radius:22px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;transition:background .3s,transform .5s var(--ease)} .cgrid a:hover{background:var(--panel2);transform:translateY(-4px)} .cgrid a b{font-family:var(--disp);font-weight:500;font-size:24px;letter-spacing:-.03em} .cgrid a span{font-size:13.5px;color:var(--mute)} .cgrid a i{position:absolute;right:20px;top:20px;font-style:normal;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line2);display:grid;place-items:center;transition:.4s var(--ease)} .cgrid a:hover i{background:var(--o);box-shadow:none;transform:rotate(-45deg)} .bgmap{border-radius:32px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);padding:30px} .bgmap svg{width:100%;height:auto} .bgmap a text{transition:fill .2s} .bgmap a:hover text{fill:var(--o)} .bgmap a:hover circle.p{fill:var(--o)} /* ------------------------------------------------ LEGAL / THANKS / 404 */ .legal{padding:40px 0 110px} .legal .prose{max-width:780px} .center-hero{min-height:88vh;display:grid;place-items:center;text-align:center;padding:170px 0 80px} .center-hero .big{display:block;font-family:var(--disp);font-weight:600;letter-spacing:-.08em;line-height:.8;font-size:clamp(120px,22vw,300px);color:var(--o)} .center-hero p{color:var(--mute);max-width:520px;margin:24px auto 32px} /* ------------------------------------------------ CTA BAND */ .ctab{position:relative;padding:150px 0;text-align:center;overflow:hidden;isolation:isolate} .ctab::before{content:"";position:absolute;left:50%;top:50%;width:900px;height:900px;margin:-450px 0 0 -450px;border-radius:50%;background:radial-gradient(circle,rgba(255,77,28,.3),transparent 60%);z-index:-1;transform:translate(var(--ox,0),var(--oy,0));transition:transform 1.4s var(--ease)} .ctab h2{font-family:var(--disp);font-weight:500;letter-spacing:-.05em;line-height:.98;font-size:clamp(40px,6.4vw,100px);max-width:1100px;margin:22px auto 34px} .ctab h2 em{font-style:normal;color:var(--o)} .ctab .ctas{justify-content:center} /* responsive — вътрешни */ @media (max-width:1100px){.mega{display:none}.pj-meta{grid-template-columns:repeat(3,1fr)}.pj-meta div:nth-child(3){border-right:0}.pj-meta div:nth-child(4){padding-left:0}} @media (max-width:960px){.sv-hero,.pj-body,.bfeat,.fcats,.art{grid-template-columns:1fr}.forw,.pk,.rw,.pf-grid,.bgrid{grid-template-columns:1fr 1fr}.inc{grid-template-columns:1fr}.vals{grid-template-columns:1fr 1fr}.nums{grid-template-columns:1fr 1fr}.nums div:nth-child(2){border-right:0}.nums div:nth-child(-n+2){border-bottom:1px solid var(--line)}.lwall{grid-template-columns:repeat(4,1fr)}.qgrid{columns:2}.ccards{grid-template-columns:1fr 1fr}.cgrid{grid-template-columns:repeat(3,1fr)}.toc,.fcats nav{display:none}} @media (max-width:640px){.ph,.pj-hero,.cty-hero,.art-hero,.ct-page{padding-top:140px}.ph h1{font-size:clamp(34px,10vw,54px)}.pj-hero h1{font-size:clamp(46px,14vw,80px)}.cty-hero h1{font-size:clamp(34px,10vw,52px)}.art-hero h1{font-size:clamp(30px,8.6vw,44px)}.sec{padding:84px 0}.forw,.pk,.rw,.pf-grid,.bgrid,.vals,.ccards{grid-template-columns:1fr}.pj-meta{grid-template-columns:1fr 1fr}.pj-meta div,.pj-meta div+div{padding:16px 10px 16px 0;border-right:0}.lwall{grid-template-columns:repeat(3,1fr)}.lwall div{height:90px}.qgrid{columns:1}.cgrid{grid-template-columns:1fr 1fr}.bfeat .c{padding:28px}.bfeat .art{min-height:200px}.prose{font-size:17px}.prose h2{font-size:25px}.fcta{right:12px;left:12px;bottom:12px;justify-content:space-between}.cookie{left:8px;right:8px;bottom:84px;max-width:none}.ctab{padding:100px 0}.rnd{border-radius:28px}.rnd-t{border-radius:28px 28px 0 0}} /* ====================================================================== ДОБАВКИ — пълен сайт ====================================================================== */ .hd nav{align-items:center} .hd nav a[aria-current]{color:#fff;background:rgba(255,255,255,.06)} header.light nav a[aria-current]{color:var(--ink);background:rgba(10,10,12,.06)} .mega{grid-template-columns:1fr 1fr 230px;grid-auto-flow:column;grid-template-rows:repeat(3,auto)} .mega a.mi{color:inherit} .mega .mfeat{grid-column:3;grid-row:1/span 3;min-height:100%} .mega .mi b{color:#f3f0ea} .lang-dd>button span{min-width:18px} /* мобилно меню */ .mpanel .msub{display:flex;flex-wrap:wrap;gap:6px;padding:12px 0 16px;border-bottom:1px solid var(--line)} .mpanel .msub a{font-family:var(--sans);font-size:14.5px;letter-spacing:0;padding:8px 13px;border:0;border-radius:999px;background:var(--panel);color:#d8d4cc} .mpanel .mlang{display:flex;gap:8px;margin-top:22px} .mpanel .mlang a{font-family:var(--mono);font-size:13px;letter-spacing:.06em;padding:9px 16px;border:0;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line2)} .mpanel .mlang a.on{background:var(--text);color:var(--ink)} .flbl{display:block;font-size:13px;color:var(--mute);margin-bottom:7px} .rw .win,.pf-card .win,.pj-stage .win,.pvis .win{position:relative} /* списък с услуги */ .svls{border-top:1px solid var(--line)} .svl{position:relative;display:grid;grid-template-columns:70px 1fr auto 56px;gap:24px;align-items:center;padding:34px 0;border-bottom:1px solid var(--line);isolation:isolate;transition:padding .5s var(--ease)} .svl .n{font-family:var(--mono);font-size:12px;color:var(--o)} .svl .t b{display:block;font-family:var(--disp);font-weight:500;letter-spacing:-.04em;font-size:clamp(26px,3.4vw,52px);line-height:1.02;transition:color .3s} .svl .t small{display:block;color:var(--mute);font-size:15px;margin-top:8px} .svl .p{text-align:right;font-weight:600;font-size:17px;white-space:nowrap} .svl .p small{display:block;font-weight:400;font-size:13px;color:var(--mute)} .svl .ar{width:52px;height:52px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line2);display:grid;place-items:center;transition:.5s var(--ease)} .svl:hover .ar{background:var(--o);box-shadow:none;transform:rotate(-45deg)} .svl:hover .t b{color:var(--o)} .svl .ic{position:absolute;right:170px;top:50%;width:170px;height:170px;margin-top:-85px;opacity:0;transform:scale(.7) rotate(-8deg);transition:.6s var(--ease);pointer-events:none;z-index:-1} .svl .ic svg{width:100%;height:100%} .svl:hover .ic{opacity:1;transform:none} .svl.sm{grid-template-columns:1fr auto 44px;padding:22px 0} .svl.sm .t b{font-size:clamp(20px,2vw,26px)} .svl.sm .t small{font-size:14px;margin-top:4px} .svl.sm .ar{width:42px;height:42px} .light-sec .svls,.light-sec .svl{border-color:rgba(10,10,12,.1)} /* таблица за сравнение */ .cmpt{overflow-x:auto;border-radius:24px;background:#fff;box-shadow:0 0 0 1px rgba(10,10,12,.07)} .cmpt table{width:100%;border-collapse:collapse;min-width:680px;font-size:15.5px} .cmpt th,.cmpt td{padding:20px 24px;text-align:left;border-bottom:1px solid rgba(10,10,12,.07);vertical-align:top} .cmpt thead th{font-family:var(--disp);font-weight:500;font-size:18px;letter-spacing:-.02em} .cmpt tbody th{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#66615A;font-weight:500;width:170px} .cmpt tr:last-child th,.cmpt tr:last-child td{border-bottom:0;font-weight:600} /* табове с цени */ .ptabs{display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)} .ptabs button{padding:11px 22px;border-radius:999px;font-weight:600;font-size:15px;color:var(--mute);transition:.25s} .ptabs button.on{background:var(--text);color:var(--ink)} .tpane{display:none} .tpane.on{display:block} .tpane .sec{padding-top:40px} .tpane .sh{display:none} /* проект */ .pj-stage.static .vp img{animation:none} .pj-stage .pause .b{display:none} .pj-stage.paused .pause .a{display:none} .pj-stage.paused .pause .b{display:inline} .pnote{margin-top:16px;font-size:14.5px;color:var(--ink2);font-style:italic} .pj-meta b a{word-break:break-all} /* страници за услуги */ .ph.sv h1{font-size:clamp(36px,4.4vw,70px);max-width:none} .ph.sv .sv-hero{margin-top:26px} .forw div .n{display:block} .sv-art svg{will-change:transform} .manif p{color:var(--text)} .light-sec .manif p{color:var(--ink)} /* блог карти в решетка — по-леко */ .bgrid .bc h3{font-size:20px} .bmeta span+span::before{content:"·";margin-right:14px;opacity:.6} /* центриран hero (404 / благодарим) */ .center-hero .h2{margin:10px auto 0;max-width:900px} /* брой в плаващия CTA */ @media (max-width:1100px){.svl .ic{display:none}} @media (max-width:960px){.svl{grid-template-columns:44px 1fr 48px}.svl .p{grid-column:2;text-align:left;grid-row:2}.svl .ar{grid-row:1/span 2;grid-column:3;width:44px;height:44px}.svl.sm{grid-template-columns:1fr 44px}.svl.sm .p{grid-column:1;grid-row:2}.svl.sm .ar{grid-column:2;grid-row:1/span 2}} @media (max-width:640px){.svl{padding:24px 0;gap:6px 14px}.ptabs{display:flex;overflow-x:auto;border-radius:18px}.ptabs button{flex:1;white-space:nowrap;padding:10px 14px}.cmpt{border-radius:18px}} .sh.one{grid-template-columns:1fr} .sh.one .h2{max-width:1000px} .pk .p .pr.txt{font-size:30px;letter-spacing:-.03em;line-height:1.3;margin-top:30px} @media (max-width:640px){.sv-art{max-width:340px;margin:0 auto;width:100%}} /* мобилно меню — бутонът */ .mpanel a.btn{display:flex;align-items:center;justify-content:space-between;height:60px;padding:0 10px 0 24px;border-bottom:0;font-family:var(--sans);font-size:17px;letter-spacing:0} body.mopen header .hd{background:var(--bg);box-shadow:0 1px 0 var(--line)} body.mopen .topbar{visibility:hidden} body.mopen header{top:0!important;padding-top:0;background:var(--bg)} /* лога */ .rb-track img.lg-o{filter:saturate(.2) brightness(1.3);opacity:.6} .lwall2{display:grid;grid-template-columns:repeat(6,1fr);gap:10px} .lt{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;aspect-ratio:1.25/1;padding:22px;border-radius:22px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;isolation:isolate;transition:box-shadow .4s} .lt img{max-height:54px;max-width:82%;width:auto;object-fit:contain;transition:transform .6s var(--ease),opacity .4s} .lt img.lg-w{filter:brightness(0) invert(1);opacity:.92} .lt img.lg-o{max-height:62px} .lt .nm{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);transition:opacity .3s} .lt .ty{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:13px;font-weight:600;color:#fff;opacity:0;transform:translateY(8px);transition:.4s var(--ease)} .lt .bgs{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,12,.55),rgba(10,10,12,.92)),var(--shot) center top/cover;opacity:0;transform:scale(1.08);transition:opacity .5s,transform 1.2s var(--ease)} a.lt:hover{box-shadow:inset 0 0 0 1px var(--o)} a.lt:hover .bgs{opacity:1;transform:none} a.lt:hover img{transform:translateY(-10px);opacity:1} a.lt:hover .nm{opacity:0} a.lt:hover .ty{opacity:1;transform:none} /* отзиви — без имена, с връзка към проекта */ .q-card figcaption{margin-top:auto} .rv-proj{display:flex;align-items:center;gap:14px;padding-top:20px;border-top:1px solid rgba(10,10,12,.08)} .rv-proj img{width:74px;height:48px;object-fit:cover;object-position:top;border-radius:9px;box-shadow:0 0 0 1px rgba(10,10,12,.1);flex:none;transition:transform .5s var(--ease)} .rv-proj b{display:block;font-weight:600;font-size:15.5px;color:var(--ink)} .rv-proj small{display:block;font-size:13px;color:#66615A} .rv-proj i{margin-left:auto;font-style:normal;width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(10,10,12,.15);display:grid;place-items:center;color:var(--ink);transition:.4s var(--ease);flex:none} a.rv-proj:hover i{background:var(--o);color:#fff;box-shadow:none;transform:rotate(-45deg)} a.rv-proj:hover img{transform:scale(1.06)} .rv-proj .dot{width:48px;height:48px;border-radius:14px;flex:none;background:radial-gradient(circle at 30% 30%,#FF7A4D,#FF4D1C 60%,#b8330f);opacity:.85} @media (max-width:960px){.lwall2{grid-template-columns:repeat(3,1fr)}} @media (max-width:640px){.lwall2{grid-template-columns:repeat(2,1fr)}.lt{border-radius:18px}} /* блог илюстрации */ .bc.has-art{padding:0;overflow:hidden;gap:0} .bc .bart{display:block;aspect-ratio:3/2;overflow:hidden;border-bottom:1px solid var(--line)} .bc .bart svg{width:100%;height:100%;display:block;transition:transform 1s var(--ease)} .bc:hover .bart svg{transform:scale(1.05)} .bc.has-art>.lbl{margin:24px 26px 0} .bc.has-art h3{margin:12px 26px 0} .bc.has-art p{margin:10px 26px 0} .bc.has-art .go{margin:18px 26px 26px} .bgrid .bc{min-height:0} .bfeat .art svg{position:absolute;inset:0;width:100%;height:100%} .art-ban{margin-top:44px;border-radius:28px;overflow:hidden;aspect-ratio:3/1;box-shadow:inset 0 0 0 1px var(--line)} .art-ban svg{width:100%;height:100%;display:block} @media (max-width:640px){.art-ban{aspect-ratio:3/2;border-radius:20px;margin-top:30px}} /* проект: галерия, технологии, отзив */ .gal{padding:110px 0 120px;overflow:hidden} .gal-rail{overflow:hidden} .gal-track{display:flex;align-items:center;gap:34px;padding:0 max(32px,calc((100vw - var(--wrap))/2 + 32px));will-change:transform;perspective:1400px} .gi{flex:none;margin:0;transform-style:preserve-3d} .gi.d{width:min(720px,72vw)} .gi.d .win{transition:transform .8s var(--ease)} .gi.m{width:250px} .phone{position:relative;border-radius:40px;padding:10px;background:#1b1b20;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 50px 90px -30px rgba(0,0,0,.9)} .phone img{border-radius:31px;width:100%;aspect-ratio:9/19.5;object-fit:cover;object-position:top} .phone .notch{position:absolute;left:50%;top:18px;width:74px;height:20px;margin-left:-37px;border-radius:12px;background:#0a0a0c;z-index:2} .gi figcaption{text-align:center;margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)} .gi .vp{aspect-ratio:16/10} .gi .vp img{position:static} .ptech{display:flex;flex-wrap:wrap;gap:10px} .ptech div{display:flex;align-items:center;gap:12px;padding:14px 20px 14px 14px;border-radius:18px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);transition:background .3s} .ptech div:hover{background:var(--panel2)} .ptech i{width:34px;height:34px;border-radius:10px;background:#fff;-webkit-mask:var(--ic) center/20px no-repeat;mask:var(--ic) center/20px no-repeat} .ptech div{position:relative} .ptech span{font-weight:600;font-size:15px} .prev{max-width:1000px;margin:0 auto;text-align:center;padding:10px 0 40px} .prev .lbl{justify-content:center} .prev blockquote{font-family:var(--disp);font-weight:500;letter-spacing:-.035em;line-height:1.18;font-size:clamp(24px,3vw,42px);margin:26px 0 22px} .prev blockquote::before{content:"“";color:var(--o)} .prev blockquote::after{content:"”";color:var(--o)} .prev figcaption{color:var(--mute);font-size:15px} @media (max-width:960px){.gal-rail{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.gal-rail::-webkit-scrollbar{display:none}.gi{scroll-snap-align:center}.gal-track{padding:0 16px;gap:16px}.gi.d{width:84vw}.gi.m{width:62vw}} /* hero с графика */ .ph2 .ph-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center} .ph2 h1{font-size:clamp(40px,5vw,84px)} .ph-side{position:relative;min-height:440px} .stack{position:relative;height:460px} .stack .sk{position:absolute;width:78%;transition:transform 1.2s var(--ease)} .stack .sk .win{position:relative} .stack .sk0{left:0;top:40px;transform:rotate(-7deg);z-index:1} .stack .sk1{left:14%;top:10px;transform:rotate(2deg);z-index:2} .stack .sk2{left:24%;top:150px;transform:rotate(-2deg);z-index:3} .orbit{position:relative;aspect-ratio:1;max-width:500px;margin-left:auto} .orbit .rings{position:absolute;inset:0;width:100%;height:100%} .orbit .rings circle{fill:none;stroke:rgba(255,255,255,.1);stroke-width:.25;stroke-dasharray:1 1.6} .orbit .core{position:absolute;left:50%;top:50%;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:28px;background:var(--o);display:grid;place-items:center;box-shadow:0 0 0 14px rgba(255,77,28,.12),0 0 0 30px rgba(255,77,28,.06),0 30px 60px -10px rgba(255,77,28,.6)} .orbit .core img{width:46px;filter:brightness(0) invert(1)} .orbit .ob{position:absolute;display:flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:999px;background:#18181c;box-shadow:inset 0 0 0 1px var(--line2);white-space:nowrap;font-size:14px;font-weight:600;translate:calc(-50% + var(--px,0px)) calc(-50% + var(--py,0px));transition:background .3s,box-shadow .3s} .orbit .ob i{width:34px;height:34px;border-radius:50%;background:#26262c;display:grid;place-items:center;color:var(--o)} .orbit .ob i svg{width:17px;height:17px;stroke:currentColor} .orbit .ob:hover{background:var(--o);box-shadow:none} .orbit .ob:hover i{background:rgba(255,255,255,.2);color:#fff} .mz{padding:40px 0 70px;overflow:hidden;contain:paint} .mz-in{display:flex;flex-direction:column;gap:18px;transform:rotate(-3deg);margin:0 -5vw} .mz-row{display:flex;gap:18px;will-change:transform} .mz-row .win{position:relative;flex:none;width:330px;border-radius:12px} .mz-row .vp img{position:static} @media (max-width:960px){.ph2 .ph-grid{grid-template-columns:1fr}.ph-side{min-height:0}.stack{height:300px;max-width:520px}.orbit{max-width:420px;margin:10px auto 0}.orbit .ob span{display:none}.orbit .ob{padding:6px}.mz-row .win{width:220px}} .stack .sk{translate:var(--px,0px) var(--py,0px);transition:transform 1.2s var(--ease),translate .8s var(--ease)}.orbit .ob{transition:background .3s,box-shadow .3s,translate .8s var(--ease)} /* ====================================================================== Apple-style обобщение (bento) ====================================================================== */ .bento-s{padding:110px 0 120px} .bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:118px;grid-auto-flow:dense;gap:12px} .bt{position:relative;margin:0;border-radius:26px;background:#F5F5F7;color:#1d1d1f;overflow:hidden;isolation:isolate;transition:transform .6s var(--ease),box-shadow .6s var(--ease)} .bt:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)} .bt.c1{grid-column:span 1}.bt.c2{grid-column:span 2}.bt.c3{grid-column:span 3}.bt.c4{grid-column:span 4} .bt.r1{grid-row:span 1}.bt.r2{grid-row:span 2}.bt.r3{grid-row:span 3}.bt.r4{grid-row:span 4} /* снимки на страници */ .bt.shot{background:linear-gradient(160deg,#fbfbfd,#e8e8ed);padding:26px 26px 0} .bt.shot .bw{height:100%;border-radius:14px 14px 0 0;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 20px 50px -20px rgba(0,0,0,.35);display:flex;flex-direction:column} .bt.shot .bar{flex:none;height:30px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#ececf0;border-bottom:1px solid rgba(0,0,0,.06)} .bt.shot .bar i{width:9px;height:9px;border-radius:50%;background:#cfcfd6} .bt.shot .bar span{margin-left:10px;font-family:var(--mono);font-size:11px;color:#8a8a93;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bt.shot img{width:100%;flex:1;min-height:0;object-fit:cover;object-position:top;transition:transform 1.4s var(--ease)} .bt.shot:hover img{transform:scale(1.03)} /* телефон */ .bt.phone-t{background:radial-gradient(90% 60% at 50% 30%,#ffffff,#e6e6eb);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:22px} .bt.phone-t .phone{width:min(230px,78%);padding:8px;border-radius:36px;background:#1d1d1f;box-shadow:0 30px 60px -20px rgba(0,0,0,.45)} .bt.phone-t .phone img{border-radius:28px} .bt.phone-t .phone .notch{top:14px;width:64px;height:18px;margin-left:-32px} .bt figcaption{font-size:13px;font-weight:600;color:#6e6e73;text-align:center} /* статистики */ .bt.stat{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:14px;gap:4px} .bt.stat b{font-family:var(--disp);font-weight:500;letter-spacing:-.03em;font-size:17px;line-height:1.1} .bt.stat b.big{font-size:26px;letter-spacing:-.04em;background:linear-gradient(90deg,#FF4D1C,#ff8a3d);-webkit-background-clip:text;background-clip:text;color:transparent} .bt.stat span{font-size:12.5px;color:#6e6e73} .bt .lg{width:34px;height:34px;background:#1d1d1f;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;margin-bottom:6px} /* градиентна плочка */ .bt.grad{background:linear-gradient(120deg,#FF4D1C 0%,#ff7a3d 45%,#0B1E3F 130%);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:18px 24px} .bt.grad span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.85} .bt.grad b{font-family:var(--disp);font-weight:500;letter-spacing:-.035em;font-size:clamp(18px,1.7vw,24px);line-height:1.1;margin-top:4px} /* функции */ .bt.feat{display:flex;flex-direction:column;justify-content:space-between;padding:20px} .bt.feat i{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#FF7A4D,#FF4D1C)} .bt.feat:nth-of-type(3n) i{background:linear-gradient(135deg,#3B82F6,#0B1E3F)} .bt.feat:nth-of-type(3n+1) i{background:linear-gradient(135deg,#34c759,#0f8a3c)} .bt.feat i svg{width:23px;height:23px} .bt.feat b{font-weight:600;font-size:15px;line-height:1.3;letter-spacing:-.01em} /* технологии */ .bt.tech-t{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px} .bt.tech-t .ics{display:flex;gap:14px;flex-wrap:wrap;justify-content:center} .bt.tech-t .ics i{width:28px;height:28px;background:#1d1d1f;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat} .bt.tech-t span{font-size:12.5px;color:#6e6e73} /* отзив */ .bt.quote{background:#1d1d1f;color:#f5f5f7;padding:30px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)} .bt.quote blockquote{font-family:var(--disp);font-weight:500;letter-spacing:-.03em;font-size:clamp(16px,1.5vw,21px);line-height:1.3} .bt.quote figcaption{text-align:left;color:#a1a1a6} /* връзка */ .bt.live{background:#1d1d1f;color:#fff;display:flex;flex-direction:column;justify-content:center;padding:16px 18px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)} .bt.live span{font-size:12px;color:#a1a1a6} .bt.live b{font-weight:600;font-size:14px;margin-top:4px;word-break:break-all;color:var(--o2)} .bt.live:hover{background:var(--o)} .bt.live:hover b{color:#fff} @media (max-width:1100px){.bento{grid-auto-rows:104px}} @media (max-width:960px){.bento{grid-template-columns:repeat(4,1fr)}.bt.c4,.bt.c3{grid-column:span 4}.bt.phone-t{grid-column:span 2}} @media (max-width:640px){.bento-s{padding:80px 0}.bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:96px;gap:10px}.bt.c4,.bt.c3{grid-column:span 2}.bt.c4.r3,.bt.c3.r3{grid-row:span 3}.bt.phone-t{grid-column:span 2;grid-row:span 5}.bt.quote{grid-column:span 2;grid-row:span 3}.bt{border-radius:22px}.bt.shot{padding:16px 16px 0}.bt.grad{grid-column:span 2}.bt.tech-t{grid-column:span 2}} .bt.phone-t .phone{width:auto;height:84%;aspect-ratio:9/19.5} .bt.phone-t .phone img{height:100%;width:100%;aspect-ratio:auto} .bt.feat b{font-size:16.5px} .bt.feat.c2 b,.bt.feat.c3 b,.bt.feat.c6 b{font-family:var(--disp);font-weight:500;letter-spacing:-.03em;font-size:22px;max-width:420px} .bt.c6{grid-column:span 6}.bt.c5{grid-column:span 5} .bt.cta{background:var(--o);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:22px 26px} .bt.cta span{font-size:14px;opacity:.9} .bt.cta b{font-family:var(--disp);font-weight:500;letter-spacing:-.035em;font-size:clamp(20px,2vw,30px);margin-top:6px;display:flex;align-items:center;gap:14px} .bt.cta b i{font-style:normal;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:18px;transition:transform .5s var(--ease)} .bt.cta:hover b i{transform:rotate(-45deg)} .bt.stack-t{background:none;display:grid} .bt.stack-t .grad{border-radius:26px} @media (max-width:960px){.bt.c5,.bt.c6{grid-column:span 4}} @media (max-width:640px){.bt.c5,.bt.c6,.bt.cta,.bt.live{grid-column:span 2}.bt.feat.c2,.bt.feat.c3{grid-column:span 2}} .bt.stat b{font-size:16px} .bt.feat.c6.r1{flex-direction:row;align-items:center;gap:20px;justify-content:flex-start} @media (max-width:640px){.bento .bt.feat{grid-column:span 2!important;grid-row:span 1!important;flex-direction:row;align-items:center;justify-content:flex-start;gap:16px}.bento .bt.feat b{font-family:var(--sans);font-size:15.5px;letter-spacing:0}} .fld select{width:100%;height:52px;border-radius:14px;background:var(--panel);border:1px solid var(--line2);color:var(--text);font:inherit;padding:0 14px} .fld select:focus{outline:none;border-color:var(--o)} /* калкулатор — цената винаги в кутията */ .price-big{white-space:normal;font-size:clamp(30px,3.3vw,54px);line-height:1.05} .price-big span{white-space:nowrap} @media (max-width:640px){.est-r{padding:30px 24px}.price-big{font-size:clamp(28px,9vw,40px)}} /* bento: страниците директно в плочката, без браузърна рамка */ .bt.shot{padding:0;background:#fff} .bt.shot .bw{border-radius:0;box-shadow:none;height:100%} .bt.shot .bar{display:none} .bt.shot img{height:100%} /* мобилна версия — чиста снимка със сянка, без рамка на телефон */ .bt.phone-t .phone{padding:0;background:none;border-radius:26px;height:88%;aspect-ratio:auto;width:auto;max-width:78%;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 34px 60px -24px rgba(0,0,0,.5)} .bt.phone-t .phone .notch{display:none} .bt.phone-t .phone img{border-radius:0;height:100%;width:auto;max-width:100%;object-fit:cover;object-position:top} /* Google рейтинг */ .gbadge{display:inline-flex;align-items:center;gap:12px;padding:10px 16px 10px 12px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(10,10,12,.08),0 12px 30px -18px rgba(10,10,12,.4);color:var(--ink);transition:transform .4s var(--ease)} .gbadge:hover{transform:translateY(-2px)} .gbadge b{display:block;font-weight:700;font-size:16px;line-height:1.1} .gbadge b i{font-style:normal;color:#FBBC05;letter-spacing:1px;font-size:14px} .gbadge small{display:block;font-size:12.5px;color:#66615A} .gbadge em{font-style:normal;color:#66615A;margin-left:4px} .rv-side{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .greview{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:18px;padding:24px 28px;border-radius:22px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)} .greview b{font-family:var(--disp);font-weight:500;font-size:20px;letter-spacing:-.02em} .greview p{color:var(--mute);font-size:15px;margin-top:4px} /* факти за компанията */ .facts-t{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)} .facts-t div{display:grid;grid-template-columns:170px 1fr;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)} .facts-t div:nth-child(odd){padding-right:30px} .facts-t dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding-top:3px} .facts-t dd{font-size:16px;color:var(--text)} @media (max-width:760px){.facts-t{grid-template-columns:1fr}.facts-t div{grid-template-columns:1fr;gap:4px}.facts-t div:nth-child(odd){padding-right:0}} /* мобилно меню: всичко се побира, бутонът винаги се вижда */ .mpanel{height:100dvh;padding:96px 24px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column} .mpanel>a:not(.btn){font-size:clamp(24px,7.4vw,30px);padding:9px 0} .mpanel .msub{padding:10px 0 14px} .mpanel a.btn{position:sticky;bottom:0;margin-top:auto;flex:none;box-shadow:0 -18px 30px 6px var(--bg)} /* лентата с лога — без линии, с повече въздух */ .ribbon{border-top:0;border-bottom:0;margin:18px 0} /* одит */ .au-form{display:grid;grid-template-columns:1fr}.au-form>*{grid-column:1/-1} .au-note{display:block;margin-top:2px;line-height:1.5} .au-box .h2{font-size:clamp(32px,3.5vw,52px);line-height:1.08} /* начало: стена с проекти */ .work.work-top{padding-bottom:40px} /* услуги на мобилно/таблет: без промяна на височината — няма подскачане; активната карта просто светва */ @media (max-width:1100px){ .pan,.pan.on{min-height:500px;transition:background .5s} .pan .vt{display:none} .pan .body{opacity:.28;transform:none;pointer-events:auto;transition:opacity .6s var(--ease)} .pan.on .body{opacity:1;transition-delay:0s} .pan .art{opacity:.22;transition:opacity .6s} .pan.on .art{opacity:1} } @media (max-width:640px){.pan,.pan.on{min-height:470px}} /* showreel: центриран прозорец */ .reel-dlg{position:fixed;inset:0;margin:auto;height:fit-content;overflow:visible} @media (max-width:760px){.reel-dlg .x{top:-54px;right:0}} /* ================= ПЛОЧИ: представяне на проектите (без браузърни рамки) ================= */ .plate{--mx:0;--my:0;--h:0;--p:.5;position:relative;display:block;overflow:hidden;border-radius:clamp(16px,2vw,26px);background:var(--pb);aspect-ratio:var(--ar,16/11);isolation:isolate;perspective:1800px;contain:paint} .plate .gl{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(55% 60% at calc(55% + var(--mx) * 16%) calc(38% + var(--my) * 16%),var(--pg),transparent 72%);opacity:calc(.32 + var(--h) * .14)} .plate.t-soft .gl{opacity:calc(.5 + var(--h) * .2);mix-blend-mode:multiply} .plate::after{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)} .plate.t-soft::after{box-shadow:inset 0 0 0 1px rgba(10,10,12,.06)} .plate .s{--tx:calc(var(--mx) * var(--d) * 1px);--ty:calc(var(--my) * var(--d) * 1px + (var(--p) - .5) * var(--d) * -2.4px); position:absolute;z-index:1;border-radius:clamp(5px,.8vw,11px);overflow:hidden;background:#fff;will-change:transform; box-shadow:0 0 0 1px rgba(0,0,0,.07),0 2px 5px rgba(0,0,0,.08),0 22px 44px -14px rgba(0,0,0,.42),0 70px 100px -50px rgba(0,0,0,.5)} .plate .s img,.plate .col img,.plate .it img,.wall .wt img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center} .plate .mb,.plate .mm{aspect-ratio:400/681;border-radius:clamp(10px,1.7vw,24px);z-index:3} /* 1 · ЛЕНТА — страниците минават хоризонтално със скрола */ .v-row .rw-band{position:absolute;left:0;top:50%;height:56%;display:flex;gap:clamp(10px,1.6vw,22px);z-index:1;will-change:transform; transform-origin:26% 50%;transform:translateY(-50%) translateX(calc(-4% - var(--p) * 22%)) rotate(-4deg)} .v-row .rw-i{flex:none;height:100%;aspect-ratio:16/10;border-radius:clamp(6px,.9vw,12px);overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.07),0 30px 60px -22px rgba(0,0,0,.5)} .v-row .rw-i img{display:block;width:100%;height:100%;object-fit:cover;object-position:top} /* 2 · МРЕЖА — две колони, движат се в противоположни посоки */ .v-grid .g-in{position:absolute;left:50%;top:50%;width:86%;display:flex;gap:3.2%;z-index:1;transform:translate(-50%,-50%)} .v-grid .gcol{flex:1;display:flex;flex-direction:column;gap:clamp(8px,1.3vw,18px);will-change:transform;transform:translate3d(0,calc((var(--p) - .5) * -26%),0)} .v-grid .gcol.g1{transform:translate3d(0,calc((var(--p) - .5) * 26% + 9%),0)} .v-grid .gi{aspect-ratio:16/10;border-radius:clamp(6px,.9vw,12px);overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.07),0 24px 50px -20px rgba(0,0,0,.45)} .v-grid .gi img{display:block;width:100%;height:100%;object-fit:cover;object-position:top} /* 3 · КУП — страниците се разделят */ .v-stack .s{width:57%;aspect-ratio:16/10;left:calc(21.5% + (var(--k) - 1) * 13% * (1 + var(--h) * .22));top:calc(50% + (var(--k) - 1) * 15% * (1 + var(--h) * .22));translate:0 -50%; transform:translate3d(var(--tx),var(--ty),0) rotate(-2.5deg)} .v-stack .k2{z-index:2}.v-stack .k3{z-index:3} /* 4 · ЛЕНТИ — цялата страница, нарязана на колони */ .v-strips .rot{position:absolute;inset:-40% -12%;display:flex;justify-content:center;align-items:center;gap:3%;z-index:1; transform:rotate(-11deg) translate3d(calc(var(--mx) * -12px),calc(var(--my) * -12px),0)} .v-strips .col{position:relative;width:23%;aspect-ratio:1/3.8;flex:none;overflow:hidden;border-radius:clamp(6px,.9vw,12px);background:#fff;will-change:transform; box-shadow:0 0 0 1px rgba(0,0,0,.07),0 30px 60px -20px rgba(0,0,0,.5);transform:translate3d(0,calc((var(--p) - .5) * 8%),0)} .v-strips .col.c1{transform:translate3d(0,calc((var(--p) - .5) * -8% - 3%),0)} .v-strips .col img{height:auto;margin-top:calc(var(--o) * -100%)} /* 5 · МАКРО — едър детайл от сайта + телефон */ .v-macro .mc{height:98%;aspect-ratio:16/10;left:6%;top:13%;border-radius:clamp(8px,1.2vw,16px); transform:translate3d(calc(var(--tx) + (var(--p) - .5) * -5%),var(--ty),0) scale(calc(1 + var(--h) * .015))} .v-macro .mm{height:70%;right:6%;top:17%;transform:translate3d(var(--tx),var(--ty),0) rotate(-3deg)} /* 6 · ИЗОМЕТРИЯ — страниците легнали като на маса */ .v-iso .iso-in{position:absolute;left:50%;top:50%;width:112%;display:flex;gap:3.5%;z-index:1;transform-style:preserve-3d; transform:translate(-50%,-47%) rotateX(calc(52deg - var(--my) * 5deg)) rotateZ(calc(-34deg + var(--mx) * 5deg))} .v-iso .icol{flex:1;display:flex;flex-direction:column;gap:clamp(8px,1.4vw,18px);transform:translate3d(0,calc((var(--p) - .5) * 22%),0)} .v-iso .icol:nth-child(2){transform:translate3d(0,calc((var(--p) - .5) * -22% + 12%),0)} .v-iso .it{border-radius:clamp(5px,.8vw,10px);overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06),-18px 26px 40px -16px rgba(0,0,0,.45)} .v-iso .it.d{aspect-ratio:16/10}.v-iso .it.m{aspect-ratio:400/560} /* ================= стена от сайтове (hero на портфолиото) ================= */ .wall{--mx:0;--my:0;--p:.5;position:relative;height:clamp(380px,46vw,600px);overflow:hidden;perspective:2200px; -webkit-mask-image:radial-gradient(70% 72% at 55% 50%,#000 50%,transparent 100%);mask-image:radial-gradient(70% 72% at 55% 50%,#000 50%,transparent 100%)} .wall-in{position:absolute;left:50%;top:50%;width:150%;height:0;display:flex;gap:16px;align-items:flex-start;transform-style:preserve-3d; transform:translate(-50%,0) rotateX(50deg) rotateZ(-30deg)} .wt{display:block} .wcol{flex:1;display:flex;flex-direction:column;gap:16px;will-change:transform;transform:translate3d(0,calc((var(--p) - .5) * 260px - 50%),0)} .wcol:nth-child(even){transform:translate3d(0,calc((var(--p) - .5) * -260px - 50% - 90px),0)} .wt{aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:#1a1a1f;box-shadow:0 0 0 1px rgba(255,255,255,.08),-20px 30px 50px -18px rgba(0,0,0,.7)} .ph-side .wall{margin-right:-6vw} /* ================= портфолио: редакционна мрежа ================= */ .pf-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:64px 22px} .pf-card{grid-column:span 6;display:block;color:inherit;text-decoration:none} .pf-card.w7{grid-column:span 7}.pf-card.w5{grid-column:span 5}.pf-card.w4{grid-column:span 4} .pf-card.w7 .plate{--ar:16/11}.pf-card.w5 .plate{--ar:80/77}.pf-card.w4 .plate{--ar:1/1.02} .pf-card .cap{display:grid;grid-template-columns:1fr auto;gap:6px 18px;margin-top:20px;align-items:start} .pf-card .cap b{font-family:var(--disp);font-weight:500;font-size:clamp(20px,1.9vw,27px);letter-spacing:-.03em;line-height:1.1} .pf-card .cap .ty{grid-column:1;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)} .pf-card .cap p{grid-column:1;font-size:15px;line-height:1.5;color:var(--ink2);max-width:52ch;margin-top:4px} .pf-card .cap .ar{grid-row:1 / span 2;grid-column:2;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(10,10,12,.14);font-size:18px;transition:background .4s var(--ease),color .4s,transform .5s var(--ease),border-color .4s} .pf-card:hover .cap .ar{background:var(--o);border-color:var(--o);color:#fff;transform:rotate(-45deg)} .pf-card.hide{display:none} /* начало: водещи проекти */ .pvis .plate{--ar:16/11} .proj .pvis{cursor:none} /* свързани проекти */ .rw .plate{--ar:4/3.1} .rw a{color:inherit;text-decoration:none} /* ================= проект: сцена + лаптоп ================= */ .pj-stage .plate{--ar:16/8.6;border-radius:clamp(18px,2.4vw,32px)} .pj-stage .v-stack .s{width:44%;left:calc(28% + (var(--k) - 1) * 12% * (1 + var(--h) * .22))} .pj-stage .v-iso .iso-in{width:90%} .lap-sec{position:relative;height:260vh;background:var(--pb,#0f0f12);color:#fff} .lap-sec::before{content:'';position:absolute;inset:0;background:radial-gradient(60% 45% at 50% 30%,var(--pg),transparent 70%);opacity:.28;pointer-events:none} .lap-sticky{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:minmax(220px,300px) 1fr;align-items:center;gap:4vw;padding:0 max(24px,4vw);overflow:hidden} .lap-cap .lbl{color:rgba(255,255,255,.7)} .lap-cap b{display:block;font-family:var(--disp);font-weight:500;font-size:clamp(24px,2.3vw,34px);line-height:1.12;letter-spacing:-.03em;margin-top:18px} .lap-cap p{margin-top:16px;color:rgba(255,255,255,.66);font-size:15.5px;line-height:1.55} .lap-bar{margin-top:28px;height:2px;background:rgba(255,255,255,.14);border-radius:2px;overflow:hidden} .lap-bar i{display:block;height:100%;width:100%;background:#fff;transform-origin:0 50%;transform:scaleX(var(--lp,0))} .lap{width:min(1040px,92%);justify-self:center;transform-origin:50% 100%;will-change:transform} .lap-scr{position:relative;background:#0b0b0d;border-radius:clamp(14px,1.6vw,22px) clamp(14px,1.6vw,22px) 6px 6px;padding:1.7% 1.7% 2.3%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),0 0 0 1px #26262b,0 80px 140px -50px rgba(0,0,0,.8)} .lap-scr::before{content:'';position:absolute;top:.75%;left:50%;width:5px;height:5px;border-radius:50%;background:#26262c;transform:translateX(-50%)} .lap-vp{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:3px;background:#fff} .lap-vp img{position:absolute;left:0;top:0;width:100%;height:auto;will-change:transform} .lap-base{position:relative;width:112%;margin-left:-6%;height:clamp(10px,1.3vw,18px);border-radius:2px 2px 16px 16px / 2px 2px 100% 100%; background:linear-gradient(#e9eaed 0%,#c4c6ca 45%,#8e9095 100%);box-shadow:0 30px 40px -20px rgba(0,0,0,.6)} .lap-base::before{content:'';position:absolute;left:50%;top:0;width:15%;height:42%;transform:translateX(-50%);background:linear-gradient(#b4b6ba,#cfd1d4);border-radius:0 0 10px 10px} @media (max-width:1023px),(hover:none){.lap-sec{display:none}} @media (max-width:960px){ .pf-grid{gap:48px 16px}.pf-card,.pf-card.w7,.pf-card.w5,.pf-card.w4{grid-column:span 12}.pf-card .plate,.pf-card.w7 .plate,.pf-card.w5 .plate,.pf-card.w4 .plate{--ar:4/3.3} .pj-stage .plate{--ar:4/3.4}.pj-stage .v-stack .s{width:56%;left:calc(22% + (var(--k) - 1) * 13% * (1 + var(--h) * .22))}.pj-stage .v-iso .iso-in{width:112%}.rw .plate{--ar:4/3.3}.wall{height:340px}.ph-side .wall{margin:0 -16px} } /* стена на началната страница — на цял екран, води към проектите */ .wall.big{height:clamp(520px,82vh,880px);-webkit-mask-image:none;mask-image:none;margin-top:10px} .wall.big .wall-in{width:170%} .wall.big .wcol,.wall.big .wall-in{gap:22px} .wall.big .wt{border-radius:14px} .work-wall{position:relative;background:#0A0A0C;overflow:hidden} .work-wall .ww-cta{position:absolute;left:50%;bottom:clamp(28px,5vw,56px);transform:translateX(-50%);z-index:4;display:flex;gap:10px;flex-wrap:wrap;justify-content:center} .work-wall::after{content:'';position:absolute;inset:auto 0 0 0;height:38%;background:linear-gradient(transparent,rgba(10,10,12,.85));pointer-events:none;z-index:3} .btn-reel{display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 24px 0 10px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(12px);font:500 16px var(--sans);cursor:pointer} .btn-reel i{width:38px;height:38px;border-radius:50%;background:#fff;display:grid;place-items:center} .btn-reel i::before{content:'';border-left:11px solid #0A0A0C;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px} .light-sec .btn-reel,.ph .btn-reel{} .reel-dlg{border:0;padding:0;background:transparent;width:min(1200px,94vw);max-width:none} .reel-dlg::backdrop{background:rgba(5,5,7,.88);backdrop-filter:blur(6px)} .reel-dlg video{display:block;width:100%;border-radius:18px;background:#000} .reel-dlg .x{position:absolute;right:-8px;top:-52px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font-size:22px;cursor:pointer} /* клиенти: колони с лога, движат се при скрол */ .lstream{position:relative;height:clamp(440px,64vh,640px);overflow:hidden;margin-top:40px;border-radius:clamp(18px,2.4vw,30px);background:#0A0A0C} .lstream-in{display:flex;gap:14px;padding:0 14px;height:100%} .lcol{flex:1;display:flex;flex-direction:column;gap:14px;will-change:transform;transform:translate3d(0,calc((var(--p) - .5) * -280px - 200px),0)} .lcol:nth-child(even){transform:translate3d(0,calc((var(--p) - .5) * 280px - 320px),0)} .lst{position:relative;flex:none;aspect-ratio:4/3.2;border-radius:16px;background:var(--pb,#17171b);display:grid;place-items:center;color:#fff;text-decoration:none;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)} .lst img{max-width:62%;max-height:38%;object-fit:contain} .lst img.lg-w{filter:brightness(0) invert(1)} .lst span{position:absolute;left:14px;bottom:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6)} div.lst{background:#141417} @media (max-width:760px){.lstream{height:460px}.lcol:nth-child(n+4){display:none}.lstream-in{gap:10px;padding:0 10px}.lcol{gap:10px}.wall.big{height:520px}.wall.big .wall-in{width:260%}}