/* Дизайн сайтов и его друзья — страница вне Тильды. Onest, сдержанная гамма, красный только акцентом. */
@font-face{font-family:Onest;font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/onest-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Onest;font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/onest-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --dark:#0e0e10; --dark2:#16161a; --dark3:#1f1f25; --ink:#1d1d1f; --grey:#6e6e73; --muted:#a3a3ad;
  --soft:#f5f5f7; --warm:#f2f1ed; --white:#fff; --red:#e70936; --red2:#c4062d;
  --wrap:1240px; --pad:clamp(20px,4vw,40px); --r:28px;
  --ease:cubic-bezier(.2,.7,.2,1); --hdr:76px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;font-family:Onest,system-ui,-apple-system,'Segoe UI',Arial,sans-serif;font-size:18px;line-height:1.5;color:var(--ink);background:var(--dark);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p{margin:0}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:calc(var(--wrap) + var(--pad)*2);margin:0 auto;padding:0 var(--pad)}
.ico{width:.8em;height:.8em;display:inline-block;vertical-align:-.04em;flex:none}
.h2{font-size:clamp(36px,4.8vw,66px);line-height:1.02;font-weight:800;letter-spacing:-.035em}
.accent{color:var(--red)}
section{position:relative}
[data-theme=dark]{background:var(--dark);color:#fff}
[data-theme=light]{color:var(--ink)}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;height:60px;padding:0 30px;border-radius:30px;font-size:17px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;transition:background-color .25s,color .25s,transform .35s var(--ease);will-change:transform}
.btn--red{background:var(--red);color:#fff}
.btn--red:hover{background:var(--red2)}
.btn--glass{background:rgba(255,255,255,.1);color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.btn--glass:hover{background:rgba(255,255,255,.18)}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:#000}

/* ---------- шапка ---------- */
.hdr{position:fixed;inset:0 0 auto;z-index:50;height:var(--hdr);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--pad);color:#fff;transition:transform .45s var(--ease),background-color .3s,color .3s}
.hdr::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s;background:rgba(14,14,16,.72);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);z-index:-1}
.hdr.is-solid::before{opacity:1}
.hdr.is-light{color:var(--ink)}
.hdr.is-light::before{background:rgba(255,255,255,.78)}
.hdr.is-hidden{transform:translateY(-100%)}
.hdr__runet{justify-self:start;align-self:start;width:44px;transition:transform .45s var(--ease)}
.hdr__runet img{width:44px;height:auto}
.hdr.is-solid .hdr__runet{transform:translateY(-34%)}
.hdr__logo{display:grid}
.hdr__logo img{grid-area:1/1;height:58px;width:auto;transition:opacity .3s}
.hdr__logo-d,.hdr.is-light .hdr__logo-w{opacity:0}
.hdr.is-light .hdr__logo-d{opacity:1}
.hdr__cta{justify-self:end;font-size:16px;font-weight:600;padding:8px 0;background:linear-gradient(var(--red),var(--red)) 0 100%/100% 2px no-repeat;transition:background-size .3s}
.hdr__cta:hover{background-size:100% 100%;color:#fff;padding:8px 10px;margin-right:-10px;border-radius:4px}

/* ---------- первый экран ---------- */
.hero{min-height:max(720px,100svh);display:flex;align-items:center;overflow:hidden;isolation:isolate;touch-action:pan-y}
.hero::before{content:"";position:absolute;right:-10%;top:0;width:75vw;height:100%;background:radial-gradient(closest-side,rgba(255,255,255,.06),rgba(255,255,255,0));z-index:-2;pointer-events:none}
.hero__gl{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%}
.hero__stage{position:absolute;right:max(2vw,calc(50% - 680px));top:50%;width:min(50vw,700px,82svh);aspect-ratio:1;transform:translateY(-46%);pointer-events:none;z-index:-1}
.hero__poster{width:100%;height:100%;object-fit:contain;transition:opacity .8s;opacity:1}
.hero.is-3d .hero__poster{opacity:0}
.hero__in{padding-top:calc(var(--hdr) + 40px);padding-bottom:80px;pointer-events:none}
.hero__in > *{pointer-events:auto;max-width:620px}
.hero__in > .hero__title{max-width:680px}
.hero__title{font-size:clamp(42px,5vw,78px);line-height:.98;font-weight:800;letter-spacing:-.045em;margin-bottom:28px}
.hero__title > span{display:block}
.hero__lead{font-size:clamp(17px,1.4vw,20px);color:#c9c9d1;max-width:540px;margin-bottom:36px}
.hero__btns{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px}
.hero__price{font-size:17px;font-weight:700;margin-bottom:14px}
.hero__link{display:inline-flex;align-items:center;gap:6px;font-size:15px;color:var(--muted);transition:color .2s}
.hero__link:hover{color:#fff}
.hero__hint{position:absolute;right:var(--pad);bottom:28px;max-width:300px;font-size:13px;line-height:1.4;color:#7c7c86;text-align:right;transition:opacity .6s}

/* ---------- Тильда — основной инструмент ---------- */
.intro{background:var(--white);padding:150px 0 130px}
.intro__top{display:grid;grid-template-columns:5fr 7fr;gap:40px 60px;align-items:start;margin-bottom:110px}
.intro__lead{font-size:clamp(22px,2.2vw,32px);line-height:1.32;font-weight:600;letter-spacing:-.02em}
.intro__lead .w{opacity:.18;transition:opacity .25s linear}
.intro__lead .w.on{opacity:1}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.stat__n{display:block;font-size:clamp(64px,7.4vw,108px);line-height:.9;font-weight:800;letter-spacing:-.05em;margin-bottom:18px;font-variant-numeric:tabular-nums}
.stat:first-child .stat__n{color:var(--red)}
.stat__t{display:block;font-size:16px;color:var(--grey);max-width:230px}

/* ---------- умения: плитки ---------- */
.skills{background:var(--soft);padding:120px 0}
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.tile{background:var(--white);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;min-height:560px}
.tile--design{grid-column:span 8}
.tile--anim{grid-column:span 4}
.tile--adapt{grid-column:span 12;min-height:640px}
.partners{margin-bottom:130px}
.partners__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:32px 24px;align-items:center}
.partners__list li{display:flex;justify-content:center}
.partners__list img{display:block;width:100%;max-width:180px;height:auto}
.tile--forms,.tile--seo{grid-column:span 6}
.tile__txt{padding:40px 44px 0;max-width:620px}
.tile h3{font-size:28px;line-height:1.15;font-weight:700;letter-spacing:-.025em;margin-bottom:10px}
.tile p{font-size:17px;color:var(--grey)}
.tile__vis{position:relative;flex:1;display:flex;align-items:center;justify-content:center;padding:36px 44px 44px}

/* дисплей */
.display{width:min(100%,640px);perspective:1400px}
.display__scr{position:relative;aspect-ratio:1.514;border-radius:16px;background:#111;border:10px solid #1d1d1f;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.35);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease)}
.display__scr video{width:100%;height:100%;object-fit:cover}
.display__glare{position:absolute;inset:0;background:radial-gradient(circle at var(--gx,30%) var(--gy,0%),rgba(255,255,255,.22),rgba(255,255,255,0) 55%);pointer-events:none;mix-blend-mode:screen}
.display__stand{width:22%;height:46px;margin:0 auto;background:linear-gradient(#d7d7dc,#c4c4ca);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%)}

/* телефон */
.phone3d{perspective:900px;position:relative}
.phone{width:210px;aspect-ratio:.462;border-radius:38px;border:9px solid #1d1d1f;background:#111;overflow:hidden;transform:rotateY(var(--ry,-14deg)) rotateX(var(--rx,6deg)) translateZ(0);transition:transform .7s var(--ease);box-shadow:30px 40px 60px -30px rgba(0,0,0,.4)}
.phone video{width:100%;height:100%;object-fit:cover}
.phone3d__shadow{position:absolute;left:10%;right:10%;bottom:-26px;height:22px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.22),rgba(0,0,0,0));transform:translateX(calc(var(--ry,-14deg) * -1.2 / 1deg * 1px))}

/* адаптив: окно с ручкой */
.resizer{width:100%;display:flex;flex-direction:column;align-items:center;gap:22px;user-select:none}
.resizer__win{--w:100%;--h:420px;position:relative;width:var(--w);max-width:100%;height:var(--h);border-radius:16px;background:#fff;box-shadow:0 30px 70px -30px rgba(0,0,0,.3),0 0 0 8px #1d1d1f;display:flex;flex-direction:column;transition:width .6s var(--ease)}
.resizer.is-drag .resizer__win{transition:none}
.resizer__win{transition:width .6s var(--ease),height .6s var(--ease)}
.resizer__bar{height:34px;flex:none;display:flex;align-items:center;gap:6px;padding:0 14px;background:#1d1d1f;color:#a3a3ad;font-size:12px;border-radius:12px 12px 0 0}
.resizer__bar i{width:9px;height:9px;border-radius:50%;background:#3a3a42}
.resizer__bar i:first-child{background:var(--red)}
.resizer__bar span{margin-left:auto;font-variant-numeric:tabular-nums}
.resizer__view{position:relative;flex:1;overflow:hidden;border-radius:0 0 10px 10px;background:#f5f5f7}
.resizer__view video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:opacity .35s}
.resizer__view .is-mob{opacity:0}
.resizer.is-narrow .is-mob{opacity:1}
.resizer.is-narrow .is-desk{opacity:0}
.resizer__grip{position:absolute;right:-30px;top:50%;width:28px;height:72px;margin-top:-36px;display:flex;align-items:center;justify-content:center;cursor:ew-resize;touch-action:none}
.resizer__grip i{width:8px;height:56px;border-radius:4px;background:#1d1d1f;transition:height .2s,background-color .2s}
.resizer__grip:hover i,.resizer.is-drag .resizer__grip i{height:70px;background:var(--red)}
.resizer__marks{display:flex;gap:6px}
.resizer__marks button{font-size:14px;font-weight:600;color:var(--grey);padding:8px 14px;border-radius:12px;background:var(--soft);font-variant-numeric:tabular-nums;transition:background-color .2s,color .2s}
.resizer__marks button:hover{color:var(--ink)}
.resizer__marks button.on{background:var(--ink);color:#fff}

/* формы: уведомления */
.notes{width:min(100%,420px);display:flex;flex-direction:column;gap:18px}
.notes__form{display:flex;gap:8px}
.notes__form input{flex:1;min-width:0;height:50px;border:0;border-radius:14px;background:var(--soft);padding:0 16px;font:inherit;font-size:16px;color:var(--ink)}
.notes__form input::placeholder{color:#9a9aa1}
.notes__form button{height:50px;padding:0 18px;border-radius:14px;background:var(--ink);color:#fff;font-size:15px;font-weight:600}
.notes__list{position:relative;height:250px}
.note{position:absolute;z-index:var(--z,1);left:0;right:0;top:0;display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:16px 20px;border-radius:20px;background:#fff;box-shadow:0 12px 34px -12px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.04);font-size:15px;transition:transform .6s var(--ease),opacity .6s}
.note b{font-weight:700}
.note time{color:#9a9aa1;font-size:13px}
.note span{grid-column:1/-1;color:var(--grey)}
.note.is-new{transform:translateY(-24px) scale(.96);opacity:0}

/* SEO: поисковая выдача */
.serp{width:min(100%,460px);display:flex;flex-direction:column;gap:16px}
.serp__q{height:54px;border-radius:27px;background:var(--soft);display:flex;align-items:center;padding:0 22px;font-size:16px;font-weight:500}
.serp__caret{width:2px;height:20px;background:var(--red);margin-left:2px;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.serp__res{display:flex;flex-direction:column;gap:10px}
.serp__item{padding:16px 20px;border-radius:18px;background:#fff;box-shadow:0 10px 30px -14px rgba(0,0,0,.16);display:flex;flex-direction:column;gap:6px;transition:transform .7s var(--ease),opacity .5s}
.serp__item i{display:block;height:9px;border-radius:5px;background:#ececf0;width:70%}
.serp__item i.s{width:45%}
.serp__item i:first-child{width:40%;height:7px}
.serp__url{font-size:13px;color:#2a7a3a}
.serp__item b{font-size:18px;color:#1a0dab;font-weight:600}
.serp__item p{font-size:14px;color:var(--grey)}
.serp__item.is-own{box-shadow:0 18px 40px -16px rgba(0,0,0,.24)}
.serp__speed{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 12px;font-size:14px;color:var(--grey)}
.serp__speed b{justify-self:end;color:var(--ink);font-variant-numeric:tabular-nums}
.serp__speed i{grid-column:1/-1;height:6px;border-radius:3px;background:var(--soft);overflow:hidden}
.serp__speed s{display:block;height:100%;width:0;background:#2fb15a;border-radius:3px;transition:width 1.4s var(--ease)}

/* ---------- как устроен сайт: слои ---------- */
.layers{padding:120px 0;overflow:hidden}
.layers__pin{display:flex;flex-direction:column;justify-content:center}
.layers__in{display:grid;grid-template-columns:5fr 7fr;gap:40px;align-items:center}
.layers__lead{font-size:19px;color:var(--muted);margin:24px 0 36px;max-width:470px}
.layers__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;counter-reset:l}
.layers__list li{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:12px 0;color:#55555f;transition:color .4s;cursor:default}
.layers__list li b{font-weight:700;font-size:17px}
.layers__list li span{font-size:15px}
.layers__list li.on{color:#fff}
.layers__list li.on span{color:var(--muted)}
.layers__cap{display:none}
.layers__scene{height:min(560px,70svh);perspective:2000px;display:flex;align-items:center;justify-content:center}
.stack{--k:0;position:relative;width:min(460px,80%);aspect-ratio:1.3;transform-style:preserve-3d;transform:translateY(var(--ty,0px)) rotateX(var(--rx,0deg)) rotateZ(var(--rz,0deg));will-change:transform}
.ly{position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(calc(var(--i,0) * var(--gap,0px) + var(--lift,0px)));transition:filter .4s}
.ly > *{position:absolute}
.ly--page{border-radius:14px;background:#24242b;box-shadow:0 60px 80px -30px rgba(0,0,0,.6)}
.ly__win{left:0;right:0;top:0;height:9%;display:flex;align-items:center;gap:5px;padding:0 3%;border-radius:14px 14px 0 0;background:#2e2e36;font-size:10px;color:#77777f}
.ly__win i{width:7px;height:7px;border-radius:50%;background:#45454e}
.ly__win span{margin-left:auto;margin-right:auto}
.ly s,.ly i{display:block;text-decoration:none}
.ly--menu{--i:1}
.ly--menu s{top:12%;height:3.4%;width:9%;border-radius:4px;background:#d9d9de}
.ly--menu s:nth-child(1){left:5%;width:12%;background:var(--red)}
.ly--menu s:nth-child(2){left:40%}.ly--menu s:nth-child(3){left:52%}.ly--menu s:nth-child(4){left:64%}
.ly--menu s.btn{left:80%;width:15%;height:5%;top:11.2%;border-radius:8px;background:#fff}
.ly--cover{--i:2}
.ly--cover s.t1{left:5%;top:25%;width:46%;height:6%;border-radius:4px;background:#fff}
.ly--cover s.t2{left:5%;top:33%;width:34%;height:6%;border-radius:4px;background:#fff}
.ly--cover s.txt{left:5%;top:43%;width:40%;height:3%;border-radius:3px;background:#77777f}
.ly--cover s.btn{left:5%;top:50%;width:17%;height:6%;border-radius:10px;background:var(--red)}
.ly--cover s.pic{left:56%;top:22%;width:39%;height:36%;border-radius:12px;background:linear-gradient(135deg,#55555f,#33333b)}
.ly--zero{--i:3}
.ly--zero i{border-radius:50%}
.ly--zero .c1{left:62%;top:26%;width:20%;aspect-ratio:1;background:rgba(255,255,255,.9)}
.ly--zero .c2{left:76%;top:40%;width:12%;aspect-ratio:1;background:#c9c9d1}
.ly--zero .c3{left:60%;top:46%;width:9%;aspect-ratio:1;border-radius:3px;background:var(--red);transform:rotate(18deg)}
.ly--cards{--i:4}
.ly--cards s{top:64%;width:28%;height:16%;border-radius:10px;background:#3a3a43}
.ly--cards s:nth-child(1){left:5%}.ly--cards s:nth-child(2){left:36%}.ly--cards s:nth-child(3){left:67%}
.ly--form{--i:5}
.ly--form s{top:85%;height:7%;border-radius:8px}
.ly--form s.inp{background:#d9d9de;width:28%}
.ly--form s.inp:nth-child(1){left:5%}.ly--form s.inp:nth-child(2){left:36%}
.ly--form s.go{left:67%;width:28%;background:var(--red)}
.ly[data-ly]{filter:brightness(var(--b,1));border-radius:14px;background:rgba(255,255,255,calc(.06 * var(--k)));box-shadow:0 30px 40px -30px rgba(0,0,0,calc(.7 * var(--k)))}
.ly[data-ly].act{background:rgba(255,255,255,calc(.12 * var(--k)))}
.ly.dim{--b:.45}

/* ---------- работы ---------- */
.works{background:var(--white);padding:140px 0 120px}
.works__head{display:grid;grid-template-columns:5fr 7fr;gap:30px 60px;align-items:start;margin-bottom:70px}
.works__head p{font-size:19px;color:var(--grey);max-width:560px}
.works__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 28px;align-items:start}
.work{display:block}
.work__win{border-radius:16px;overflow:hidden;background:#ececf0;box-shadow:0 30px 60px -36px rgba(0,0,0,.35);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.work:hover .work__win{transform:translateY(-6px);box-shadow:0 44px 70px -36px rgba(0,0,0,.45)}
.work__bar{height:30px;display:flex;align-items:center;gap:5px;padding:0 12px;background:#ececf0;font-size:11px;color:#8a8a92}
.work__bar i{width:8px;height:8px;border-radius:50%;background:#d0d0d6}
.work__bar span{margin:0 auto;padding-right:40px}
.work__view{aspect-ratio:1.515;background:#ddd}
.work__view video{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.work__meta{padding:20px 2px 0}
.work__meta h3{font-size:21px;line-height:1.2;font-weight:700;letter-spacing:-.02em}
.work__meta p{font-size:15px;color:var(--grey);margin-top:4px}
.works__more{display:flex;justify-content:center;margin-top:90px}
.cursor-label{position:fixed;left:0;top:0;z-index:40;width:104px;height:104px;margin:-52px 0 0 -52px;border-radius:50%;background:var(--ink);color:#fff;font-size:13px;font-weight:600;line-height:1.2;display:flex;align-items:center;justify-content:center;gap:4px;text-align:center;padding:0 14px;pointer-events:none;opacity:0;transform:translate(var(--cx,-200px),var(--cy,-200px)) scale(.3);transition:opacity .25s,transform .1s linear}
.cursor-label.on{opacity:1;transform:translate(var(--cx),var(--cy)) scale(1);transition:opacity .25s,transform .35s var(--ease)}

/* ---------- не только сайты: мозаика ---------- */
.more{background:var(--warm);padding:130px 0 0}
.more__head{display:grid;grid-template-columns:5fr 7fr;gap:30px 60px;align-items:start;margin-bottom:60px}
.more__side{display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.more__side p{font-size:19px;color:var(--grey);max-width:560px}
.mosaic{position:relative;height:540px;overflow:hidden;cursor:crosshair;touch-action:pan-y}
.mosaic__grid{position:absolute;left:-2%;top:-2%;width:104%;height:104%;display:grid;gap:3px}
.mosaic__cell{position:relative;overflow:hidden;border-radius:6px;background:#e2e0da;cursor:zoom-in;min-width:0;min-height:0}
.mosaic__cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;pointer-events:none}

/* просмотр работы */
.lightbox{width:100vw;height:100svh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(14,14,16,.94);color:#fff}
.lightbox::backdrop{background:transparent}
.lightbox[open]{display:flex;align-items:center;justify-content:center}
.lightbox__scroll{max-width:min(980px,calc(100vw - 160px));max-height:calc(100svh - 80px);overflow:auto;border-radius:14px;overscroll-behavior:contain}
.lightbox__scroll img{width:100%;height:auto}
.lightbox__x{position:absolute;top:18px;right:20px;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.12);font-size:30px;line-height:1}
.lightbox__nav{position:absolute;top:50%;width:56px;height:56px;margin-top:-28px;border-radius:50%;background:rgba(255,255,255,.12);font-size:34px;line-height:1}
.lightbox__x:hover,.lightbox__nav:hover{background:rgba(255,255,255,.22)}
.lightbox__nav--prev{left:24px}.lightbox__nav--next{right:24px}
.lightbox__count{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---------- цена и бриф ---------- */
.price{padding:140px 0}
.price__in{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.price__big{display:flex;align-items:baseline;gap:16px;line-height:.9;margin-bottom:10px}
.price__from{font-size:clamp(28px,3vw,44px);font-weight:600;color:var(--muted)}
.price__big b{font-size:clamp(64px,8.6vw,132px);font-weight:800;letter-spacing:-.05em;font-variant-numeric:tabular-nums;white-space:nowrap}
.price__sub{font-size:clamp(22px,2vw,28px);font-weight:600;margin-bottom:26px}
.price__note{font-size:17px;color:var(--muted);max-width:470px;margin-bottom:44px}
.price__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:18px 30px}
.price__list li{display:flex;gap:12px;font-size:16px;line-height:1.35}
.price__list .ico--check{width:20px;height:20px;color:var(--red);margin-top:0}
.brief{background:var(--dark2);border-radius:var(--r);padding:40px 40px 36px;display:flex;flex-direction:column;gap:26px}
.brief__title{font-size:28px;font-weight:700;letter-spacing:-.025em}
.brief__group{border:0;margin:0;padding:0;min-width:0}
.brief__group legend{padding:0;font-size:14px;color:var(--muted);margin-bottom:12px}
.brief__opts{display:flex;flex-wrap:wrap;gap:8px}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt span{display:block;padding:11px 16px;border-radius:14px;background:rgba(255,255,255,.07);font-size:15px;font-weight:500;cursor:pointer;transition:background-color .2s,color .2s,transform .2s}
.opt span:hover{background:rgba(255,255,255,.13)}
.opt input:checked + span{background:#fff;color:var(--ink)}
.opt input:focus-visible + span{outline:3px solid var(--red);outline-offset:2px}
.brief__sum{font-size:15px;color:var(--muted);min-height:44px}
.brief__sum b{color:#fff;font-weight:600}
.brief__go{width:100%}

/* ---------- как работаем ---------- */
.steps{background:var(--white);padding:70px 0 140px}
.steps__in{display:grid;grid-template-columns:5fr 7fr;gap:60px;align-items:start}
.steps__aside{position:sticky;top:120px}
.steps__num{display:flex;align-items:baseline;gap:12px;margin:50px 0 26px;font-weight:800;letter-spacing:-.06em;line-height:.85}
.steps__num span{display:inline-block;font-size:clamp(110px,14vw,220px);font-variant-numeric:tabular-nums;transition:transform .5s var(--ease),opacity .5s}
.steps__num span.flip{transform:translateY(18%);opacity:0;transition:none}
.steps__of{font-style:normal;font-size:28px;color:#c7c7cc;letter-spacing:0}
.steps__bar{height:6px;border-radius:3px;background:var(--soft);max-width:360px;overflow:hidden}
.steps__bar i{display:block;height:100%;background:var(--red);transform-origin:0 50%;transform:scaleX(var(--p,.2));transition:transform .5s var(--ease)}
.steps__list{list-style:none;margin:0;padding:0}
.step{display:grid;grid-template-columns:56px 1fr;gap:20px;padding:56px 0;opacity:.28;transition:opacity .5s}
.step.on{opacity:1}
.step__n{font-size:17px;font-weight:700;color:var(--red);padding-top:8px;font-variant-numeric:tabular-nums}
.step h3{font-size:clamp(28px,2.8vw,40px);font-weight:800;letter-spacing:-.03em;margin-bottom:12px}
.step p{font-size:19px;color:var(--grey);max-width:520px}

/* ---------- контакты ---------- */
.contact{padding:150px 0 40px}
.contact__in{display:grid;grid-template-columns:1fr auto;gap:60px;align-items:center;margin-bottom:140px}
.contact__title{font-size:clamp(52px,8vw,124px);line-height:.95;font-weight:800;letter-spacing:-.05em;margin-bottom:34px}
.contact__title > span{display:block}
.contact__lead{font-size:19px;color:var(--muted);max-width:560px;margin-bottom:38px}
.contact__btns{display:flex;flex-wrap:wrap;gap:12px}
.ring{position:relative;width:240px;height:240px;display:block;color:#fff}
.ring svg{width:100%;height:100%;transform:rotate(var(--rot,0deg))}
.ring text{font-size:15px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;fill:currentColor}
.ring__arrow{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:44px;color:var(--red);transition:transform .4s var(--ease)}
.ring:hover .ring__arrow{transform:translate(4px,-4px)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 30px;padding-top:30px;padding-bottom:10px;font-size:14px;color:#7c7c86}
.foot a{color:#c9c9d1;transition:color .2s}
.foot a:hover{color:#fff}

/* ---------- заявка ---------- */
.order{width:min(540px,calc(100vw - 24px));max-height:calc(100svh - 24px);padding:0;border:0;border-radius:var(--r);background:var(--dark2);color:#fff;overflow:auto}
.order::backdrop{background:rgba(8,8,10,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.order[open]{animation:dlg .45s var(--ease)}
@keyframes dlg{from{opacity:0;transform:translateY(24px)}}
.order__box{position:relative;padding:44px 40px 40px}
.order h2{font-size:34px;line-height:1.1;font-weight:800;letter-spacing:-.03em;margin-bottom:10px}
.order__fields > p,.order__done p{font-size:16px;color:var(--muted);margin-bottom:26px}
.order__x{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);font-size:26px;line-height:1}
.order__x:hover{background:rgba(255,255,255,.16)}
.fld{position:relative;display:block;margin-bottom:12px}
.fld input,.fld textarea{width:100%;border:0;border-radius:14px;background:var(--dark3);color:#fff;font:inherit;font-size:16px;padding:28px 18px 10px;min-height:62px;resize:vertical;transition:background-color .2s}
.fld input:focus,.fld textarea:focus{outline:none;background:#26262e}
.fld span{position:absolute;left:18px;top:20px;font-size:16px;color:var(--muted);pointer-events:none;transition:top .2s,font-size .2s}
.fld input:focus + span,.fld input:not(:placeholder-shown) + span,.fld textarea:focus + span,.fld textarea:not(:placeholder-shown) + span{top:9px;font-size:12px}
.fld.bad input{box-shadow:inset 0 0 0 2px var(--red)}
.agree{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--muted);margin:18px 0 22px;cursor:pointer}
.agree input{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin:0;border-radius:7px;background:var(--dark3);display:grid;place-content:center;cursor:pointer}
.agree input:checked{background:var(--red)}
.agree input:checked::after{content:"";width:10px;height:6px;border:solid #fff;border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg)}
.agree.bad input{box-shadow:inset 0 0 0 2px var(--red)}
.agree a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px}
.order__err{color:#ff8fa5;font-size:14px;margin:-6px 0 14px}
.order__go{width:100%}

/* ---------- появление ---------- */
.js [data-rise]{opacity:0;transform:translateY(32px);transition:opacity .9s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0ms)}
.js [data-rise].in{opacity:1;transform:none}
.js [data-split] .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.js [data-split] .ln > span{display:block;transform:translateY(105%);transition:transform 1.1s var(--ease);transition-delay:var(--d,0ms)}
.js [data-split].in .ln > span{transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-rise],.js [data-split] .ln > span{opacity:1;transform:none;transition:none}
  .intro__lead .w{opacity:1}
}

/* ---------- адаптив ---------- */
@media (max-width:1100px){
  .works__grid{grid-template-columns:1fr 1fr}
  .tile--design,.tile--anim{grid-column:span 6}
  .layers__in{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  :root{--hdr:64px;--r:24px}
  body{font-size:17px}
  .hdr__logo img{height:50px}
  .hdr__runet,.hdr__runet img{width:36px}
  .hero{align-items:flex-start;min-height:auto}
  .hero__stage{right:auto;left:50%;top:calc(var(--hdr) + 4px);width:min(100vw,560px);transform:translateX(-50%)}
  .hero__in{padding-top:calc(var(--hdr) + min(100vw,560px) * .64);padding-bottom:70px;position:relative}
  .hero__in::before{content:"";position:absolute;left:0;right:0;top:calc(var(--hdr) + min(100vw,560px) * .4);height:min(60vw,320px);background:linear-gradient(rgba(14,14,16,0),rgba(14,14,16,.82) 60%,var(--dark));z-index:-1;pointer-events:none}
  .hero__hint{display:none}
  .intro{padding:100px 0 90px}
  .intro__top,.works__head,.more__head,.steps__in,.price__in,.layers__in{grid-template-columns:1fr}
  .intro__top{margin-bottom:70px}
  .stats{grid-template-columns:1fr 1fr;gap:44px 24px}
  .skills{padding:80px 0}
  .partners{margin-bottom:80px}
  .partners__list{grid-template-columns:repeat(3,1fr);gap:28px 20px}
  .bento{gap:14px}
  .tile{grid-column:span 12 !important;min-height:0}
  .tile__txt{padding:30px 26px 0}
  .tile__vis{padding:30px 22px 34px;min-height:320px}
  .tile h3{font-size:24px}
  .resizer__grip{right:-24px}
  .layers{padding:90px 0 70px}
  .layers__in{gap:10px}
  .layers__lead{font-size:16px;margin:14px 0 0}
  .layers__list{display:none}
  .layers__cap{display:block !important;min-height:48px;font-size:15px;color:var(--muted)}
  .layers__cap b{display:block;color:#fff;font-size:17px}
  .layers__scene{height:min(380px,60vw + 120px)}
  .works{padding:100px 0 90px}
  .works__head{margin-bottom:44px}
  .works__grid{gap:44px 20px}
  .more{padding:100px 0 0}
  .more__head{margin-bottom:40px}
  .price{padding:100px 0}
  .price__list{grid-template-columns:1fr}
  .brief{padding:30px 22px 26px}
  .steps{padding:50px 0 80px}
  .steps__aside{position:static}
  .steps__num,.steps__bar{display:none}
  .step{opacity:1;padding:34px 0;grid-template-columns:44px 1fr}
  .contact{padding:100px 0 30px}
  .contact__in{grid-template-columns:1fr;margin-bottom:80px}
  .ring{width:180px;height:180px}
  .lightbox__scroll{max-width:calc(100vw - 24px);max-height:calc(100svh - 120px)}
  .lightbox__nav{top:auto;bottom:16px;margin:0;width:48px;height:48px}
  .lightbox__nav--prev{left:16px}.lightbox__nav--next{right:16px}
  .order__box{padding:40px 22px 26px}
}
@media (max-width:520px){
  .works__grid{grid-template-columns:1fr}
  .partners__list{grid-template-columns:repeat(2,1fr);gap:24px 16px}
  .hdr__logo img{height:44px}
  .hdr__cta{font-size:14px}
  .hdr__runet,.hdr__runet img{width:30px}
  .hero__title{font-size:40px}
  .btn{height:56px;padding:0 24px;font-size:16px}
  .hero__btns .btn{flex:1 1 100%}
  .stat__n{font-size:60px}
  .resizer__marks button{padding:7px 9px;font-size:13px}
  .price__big{gap:10px}
}
.order__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.order__err a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.order__go:disabled{opacity:.7;cursor:progress}
.agree a{text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px}