/* ══════════════════════════════════════════════════════════════════
   BASTA — главная (v3)
   ══════════════════════════════════════════════════════════════════ */

/* ── Общая голова секции ────────────────────────────────────────── */
.sec{padding:clamp(104px,14vw,230px) var(--pad) clamp(48px,6.5vw,104px);max-width:var(--max);margin:0 auto}
.sec .mono{display:block;margin-bottom:26px}
.sec .lead{margin-top:26px;font-size:clamp(16px,1.25vw,19px)}
.sec--row{display:flex;justify-content:space-between;align-items:flex-end;gap:48px}
.sec--row .lead{margin:0;max-width:32ch;padding-bottom:.5em}
@media(max-width:960px){
  .sec--row{flex-direction:column;align-items:flex-start;gap:22px}
  .sec--row .lead{padding-bottom:0}
}

/* ══ ГЕРОЙ ═════════════════════════════════════════════════════ */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;
  padding:clamp(94px,11.5vh,132px) var(--pad) clamp(22px,3.4vh,40px);
}
.hero__top{display:flex;justify-content:space-between;gap:20px}
@media(max-width:760px){.hero__top span:last-child{display:none}}

.hero__mid{flex:1;display:flex;flex-direction:column;justify-content:center;
  max-width:var(--max);width:100%;margin:0 auto}

/* Заголовок — фраза, а не список. Лёгкое начертание на крупном кегле
   читается дороже жирного, цвет по умолчанию нейтральный. */
/* Заголовок — утверждение, а не перечисление услуг. Крупно и лёгким
   начертанием: так кегль работает на тишину, а не на крик. */
.hero__t{margin:0 0 clamp(30px,4.2vh,62px);font-weight:300;
  letter-spacing:-.042em;line-height:1.02;
  font-size:clamp(32px, min(6.5vw, 11.4vh), 132px);
  max-width:15ch;will-change:transform}

.hero__foot{display:flex;justify-content:space-between;align-items:flex-end;
  gap:clamp(26px,4vw,80px);flex-wrap:wrap;will-change:transform}
/* Между огромным заголовком и мелким абзацем нужен средний кегль,
   иначе прыжок слишком резкий. */
.hero__say{max-width:58ch}
.hero__desc{font-size:clamp(18px,1.62vw,25px);line-height:1.36;letter-spacing:-.02em;
  color:var(--fg);max-width:34ch;font-weight:400;text-wrap:balance}
.hero__desc b{font-weight:500}
.hero__lead{margin-top:clamp(12px,1.5vh,20px);max-width:46ch;
  font-size:clamp(14.5px,1.02vw,16.5px);line-height:1.66;color:var(--dim)}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;transition-delay:.16s}

/* Четыре направления мелкой строкой: цвет остаётся акцентом,
   а наведение подсвечивает свою точку на фоне. */
.hero__dirs{display:flex;flex-wrap:wrap;gap:clamp(14px,1.6vw,28px);
  margin-top:clamp(20px,2.6vh,32px);transition-delay:.1s}
.hero__dirs a{display:inline-flex;align-items:center;gap:9px;font-size:14px;
  color:var(--dim);transition:color .4s var(--e-soft)}
.hero__dirs a::before{content:'';width:8px;height:8px;border-radius:50%;flex:none;
  background:var(--hc);opacity:.55;
  transition:opacity .4s var(--e-soft),transform .5s var(--e)}
.hero__dirs a:hover{color:var(--fg)}
.hero__dirs a:hover::before{opacity:1;transform:scale(1.35)}
@media(max-width:900px){.hero__dirs{gap:12px 18px}}

.hero__hint{display:flex;align-items:center;gap:14px;margin-top:clamp(22px,3.2vh,42px);
  color:var(--dim);opacity:.6}
.hero__hint i{width:44px;height:1px;background:var(--grad)}
@media(max-width:960px){.hero__hint{display:none}}

@media(max-width:900px){
  .hero{min-height:auto;padding-top:clamp(112px,16vh,150px)}
  .hero__t{margin-bottom:34px}
  .hero__cta{width:100%}
  .hero__cta .btn{flex:1 1 auto;justify-content:center}
}

/* ══ РАЗДЕЛЕНИЕ ════════════════════════════════════════════════ */
/* Логотипа здесь нет: разъезжаются сами капли фона, шейдер получает
   позиции колонок и разводит цвета по местам. */
.split{position:relative}
.split__pin{position:absolute;top:0;left:0;width:100%;height:100svh;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(104px,14vh,150px) var(--pad) clamp(34px,5vh,64px);will-change:transform}
.split__head{max-width:var(--max);width:100%;margin:0 auto}
.split__head .mono{display:block;margin-bottom:20px}
.split__row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gut);
  max-width:var(--max);width:100%;margin:0 auto}

.sp{position:relative;display:block;padding-top:14px;border-top:1px solid var(--line);
  transition:border-color .6s var(--e-soft)}
.sp::after{content:'';position:absolute;top:-1px;left:0;right:0;height:2px;
  background:var(--pc);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .9s var(--e)}
.sp.on::after{transform:scaleX(1)}
.sp__zone{display:block;height:clamp(70px,11vh,120px)}
.sp__n{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  color:var(--faint);margin-bottom:10px;
  opacity:0;transform:translateY(14px);transition:opacity .7s var(--e-soft),transform .8s var(--e)}
.sp__name{display:block;font-family:var(--disp);font-weight:400;
  font-size:clamp(16px,1.7vw,27px);letter-spacing:-.045em;line-height:1;
  opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--e-soft) .06s,transform .8s var(--e) .06s,color .4s}
.sp__line{display:block;margin-top:9px;font-size:14px;color:var(--dim);
  opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--e-soft) .12s,transform .8s var(--e) .12s}
.sp.on .sp__n,.sp.on .sp__name,.sp.on .sp__line{opacity:1;transform:none}
.sp:hover{border-color:var(--pc)}
.sp:hover .sp__name{color:var(--pc)}

@media(max-width:900px){
  .split__pin{position:relative;height:auto;transform:none!important;
    padding:clamp(80px,13vw,110px) var(--pad) clamp(30px,6vw,50px);gap:clamp(40px,9vw,70px)}
  .split__row{grid-template-columns:1fr 1fr;gap:28px var(--gut)}
  .sp__zone{height:10px}
  .sp .sp__n,.sp .sp__name,.sp .sp__line{opacity:1;transform:none}
  .sp::after{transform:scaleX(1)}
}

/* ══ НАПРАВЛЕНИЯ ═══════════════════════════════════════════════ */
.dirs{position:relative}
.dirs__pin{position:absolute;top:0;left:0;width:100%;height:100svh;overflow:hidden;
  will-change:transform}
.dirs__head{position:absolute;top:0;left:0;right:0;z-index:5;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:clamp(94px,12vh,128px) var(--pad) 0}
.dirs__nav{display:flex;gap:13px}
.dirs__nav button{width:9px;height:9px;border-radius:50%;background:var(--faint);
  transition:background .5s var(--e-soft),transform .5s var(--e)}
.dirs__nav button.on{background:var(--nc,var(--fg));transform:scale(1.6)}

.dirs__rail{display:flex;height:100%;will-change:transform}
.dirs__bar{position:absolute;left:var(--pad);right:var(--pad);bottom:32px;height:2px;
  background:var(--line);z-index:5;border-radius:2px;overflow:hidden}
.dirs__bar i{display:block;height:100%;background:var(--grad);transform-origin:0 50%;
  transform:scaleX(0)}

.pnl{
  width:100%;flex:0 0 100%;height:100%;position:relative;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,40vw);grid-template-rows:1fr;
  gap:clamp(24px,4vw,64px);
  padding:clamp(140px,18vh,192px) 0 clamp(64px,9vh,102px) var(--pad);
}
.pnl__l{position:relative;z-index:2;max-width:640px;align-self:center}
.pnl__n{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--pc);
  display:block;margin-bottom:18px}
.pnl__name{font-family:var(--disp);font-weight:400;
  font-size:clamp(34px, min(6.4vw, 11svh), 104px);line-height:.94;letter-spacing:-.05em}
.pnl__verb{display:block;font-family:var(--disp);font-weight:300;
  font-size:clamp(16px,1.8vw,26px);letter-spacing:-.03em;color:var(--pc);margin-top:14px}
.pnl__lead{margin-top:20px;color:var(--dim);font-size:clamp(15px,1.2vw,17.5px);
  line-height:1.56;max-width:46ch}
.pnl__marks{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.pnl__marks span{font-size:12.5px;color:var(--dim);padding:7px 14px;border-radius:999px;
  border:1px solid var(--line);background:var(--card)}
.pnl__go{display:inline-flex;align-items:center;gap:13px;margin-top:clamp(24px,3.2vw,40px);
  font-size:15px;position:relative;padding-bottom:10px}
.pnl__go::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1.5px;
  background:var(--pc);transform:scaleX(.22);transform-origin:0 50%;
  transition:transform .7s var(--e)}
.pnl__go:hover::after{transform:scaleX(1)}
.pnl__go i{width:16px;height:16px;background:var(--pc);
  -webkit-mask:var(--ar) center/contain no-repeat;mask:var(--ar) center/contain no-repeat;
  transition:transform .5s var(--e);
  --ar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.pnl__go:hover i{transform:translateX(6px)}

.pnl__r{position:relative;height:100%;min-height:0}
.pnl__media{position:relative;height:100%;overflow:hidden;background:#101018;
  border-radius:3px 0 0 3px}
.pnl__media img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.2) brightness(.44);
  transform:scale(1.07);transition:transform 1.7s var(--e),filter 1.1s var(--e-soft)}
.pnl__media::after{content:'';position:absolute;inset:0;opacity:.36;
  background:linear-gradient(215deg, var(--pc), transparent 66%);mix-blend-mode:color}
.pnl__media::before{content:'';position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg, rgba(10,10,17,.55) 0%, rgba(10,10,17,.05) 26%,
             rgba(10,10,17,.2) 50%, rgba(10,10,17,.92) 100%)}
.pnl.act .pnl__media img{transform:scale(1);filter:grayscale(.72) contrast(1.14) brightness(.5)}

.pnl__srv{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:clamp(18px,2vw,30px)}
.pnl__srv li{display:flex;justify-content:space-between;gap:14px;padding:11px 0;
  border-top:1px solid rgba(245,243,239,.17);font-size:13.5px;color:var(--dim)}
.pnl__srv li b{font-weight:400;color:var(--fg)}

/* цветная аура направления */
.pnl__l::before{
  content:'';position:absolute;left:-20%;top:46%;width:min(60vh,540px);height:min(60vh,540px);
  transform:translateY(-50%) scale(.8);border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb, var(--pc) 45%, transparent) 0%, transparent 66%);
  filter:blur(50px);opacity:0;
  transition:opacity 1.2s var(--e-soft), transform 1.5s var(--e);
}
.pnl.act .pnl__l::before{opacity:.9;transform:translateY(-50%) scale(1)}

@media(max-width:900px){
  .dirs.stack{height:auto!important}
  .dirs.stack .dirs__pin{position:relative;height:auto;transform:none!important}
  .dirs.stack .dirs__head{position:relative;padding:clamp(46px,8vw,80px) var(--pad) 20px}
  .dirs.stack .dirs__rail{flex-direction:column;height:auto;transform:none!important}
  .dirs.stack .dirs__bar,.dirs.stack .dirs__nav{display:none}
  .pnl{grid-template-columns:1fr;grid-template-rows:auto 1fr;height:auto;min-height:88svh;
    padding:clamp(30px,6vw,56px) var(--pad);gap:22px}
  .pnl__r{min-height:32vh}
  .pnl__media{border-radius:3px}
  .pnl__srv{display:none}
}
@media(max-width:640px){.pnl__marks{display:none}.pnl__r{min-height:26vh}}

/* ══ РАБОТЫ (светлая) ══════════════════════════════════════════ */
.work__side{display:flex;flex-direction:column;gap:20px;max-width:38ch}
.work__side .lead{margin:0}
.work__tags{display:flex;flex-wrap:wrap;gap:8px}
.work__tags li{font-size:13px;color:var(--dim);padding:7px 14px;border-radius:999px;
  border:1px solid var(--line);background:var(--card)}
.work__foot{display:flex;justify-content:space-between;align-items:center;gap:30px;
  flex-wrap:wrap;max-width:var(--max);margin:clamp(56px,8vw,130px) auto 0;
  padding:clamp(36px,4.4vw,64px) var(--pad) clamp(80px,11vw,170px);
  border-top:1px solid var(--line)}
.work__foot p{color:var(--dim);font-size:15.5px;max-width:52ch}

.work__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(26px,3.4vw,64px);
  padding:0 var(--pad);align-items:start;
  max-width:var(--max);margin:0 auto}
/* карточка без собственного transform: любой 3D-контекст ломал
   обрезку шторки и рвал отрисовку соседних картинок */
.wk{position:relative;display:block}
.wk__m{position:relative;overflow:hidden;background:#e5e2da;border-radius:4px}
.wk__m img{width:100%;height:100%;object-fit:cover;aspect-ratio:var(--ar,4/3);
  scale:1.12;
  filter:saturate(.72) contrast(1.04);
  transition:opacity 1.05s var(--e-soft),transform 1.7s var(--e),filter .9s var(--e-soft)}
.wk:hover .wk__m img{filter:saturate(1.06) contrast(1.02)}
.wk__glow{position:absolute;inset:0;pointer-events:none;opacity:0;border-radius:4px;
  background:radial-gradient(38% 46% at var(--mx,50%) var(--my,50%),
             color-mix(in srgb, var(--wc) 42%, transparent), transparent 70%);
  mix-blend-mode:overlay;transition:opacity .6s var(--e-soft)}
.wk:hover .wk__glow{opacity:1}
.wk__b{display:flex;align-items:baseline;gap:12px;padding:16px 2px 0}
.wk__dot{width:10px;height:10px;border-radius:50%;flex:none;transform:translateY(-1px) scale(.7);
  background:var(--wc);transition:transform .5s var(--e)}
.wk:hover .wk__dot{transform:translateY(-1px) scale(1)}
.wk__t{font-family:var(--disp);font-weight:400;font-size:clamp(17px,1.5vw,24px);
  letter-spacing:-.04em;line-height:1;position:relative}
.wk__t::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:1.5px;
  background:var(--wc);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .6s var(--e)}
.wk:hover .wk__t::after{transform:scaleX(1)}
.wk__k{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);text-align:right}
@media(max-width:860px){
  .work__grid{grid-template-columns:1fr;gap:44px}
  .wk{grid-column:1/-1!important;margin-top:0!important}
}

/* ══ ПОДХОД ════════════════════════════════════════════════════ */
.steps{padding:0 var(--pad) clamp(80px,11vw,180px);max-width:var(--max);margin:0 auto;
  border-top:1px solid var(--line)}
.st{position:relative;display:grid;grid-template-columns:78px minmax(0,.85fr) minmax(0,1.25fr);
  gap:var(--gut);padding:clamp(30px,3.8vw,54px) 0;border-bottom:1px solid var(--line);
  transition:padding-left .7s var(--e)}
.st::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--acc);
  transform:scaleY(0);transform-origin:50% 100%;transition:transform .7s var(--e)}
.st:hover{padding-left:26px}
.st:hover::before{transform:scaleY(1);transform-origin:50% 0}
.st__n{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--faint);padding-top:.6em;
  transition:color .5s var(--e-soft)}
.st__t{font-family:var(--disp);font-weight:400;font-size:clamp(18px,2vw,30px);
  letter-spacing:-.042em;line-height:1.06;transition:color .5s var(--e-soft)}
.st:hover .st__t{color:var(--acc)}
.st:hover .st__n{color:var(--acc)}
.st__d{color:var(--dim);font-size:15.5px;max-width:56ch}
@media(max-width:900px){
  .st{grid-template-columns:40px 1fr;gap:10px 14px}
  .st__d{grid-column:2}
}

/* ══ КОМАНДА ═══════════════════════════════════════════════════ */
.team__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,40px);
  padding:0 var(--pad);max-width:var(--max);margin:0 auto}
@media(max-width:1000px){.team__grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.team__grid{grid-template-columns:repeat(2,1fr)}}
.mb__ph{position:relative;overflow:hidden;aspect-ratio:4/5;background:#e5e2da;border-radius:4px}
.mb__ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04);
  transition:opacity 1.05s var(--e-soft),transform 1.7s var(--e),filter .8s var(--e-soft)}
.mb:hover .mb__ph img{filter:grayscale(0) contrast(1)}
.mb__n{margin-top:13px;font-family:var(--disp);font-weight:400;font-size:16.5px;
  letter-spacing:-.035em}
.mb__r{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin-top:6px}

.marq{overflow:hidden;margin-top:clamp(80px,11vw,170px);padding:30px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marq__t{display:flex;gap:clamp(30px,4.4vw,70px);width:max-content;will-change:transform}
.marq__t span{font-family:var(--disp);font-weight:400;font-size:clamp(17px,2vw,30px);
  letter-spacing:-.045em;color:var(--faint);display:flex;align-items:center;gap:12px;
  white-space:nowrap;transition:color .5s}
.marq__t span::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.marq__t span:hover{color:var(--fg)}

/* ══ КОНТАКТ ═══════════════════════════════════════════════════ */
.contact{position:relative;padding:clamp(100px,15vw,220px) var(--pad) clamp(60px,9vw,130px)}
.contact__in{max-width:var(--max);margin:0 auto}
.contact .mono{display:block;margin-bottom:24px}
.contact__t{margin-bottom:22px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,30px);
  max-width:900px;margin-top:clamp(40px,6vw,80px)}
.f{position:relative}
.f--w{grid-column:1/-1}
.f input{width:100%;padding:22px 2px 13px;border-bottom:1px solid var(--line);font-size:17px}
.f label{position:absolute;left:2px;top:22px;color:var(--faint);pointer-events:none;
  transition:transform .5s var(--e),font-size .5s var(--e),color .4s,letter-spacing .5s}
.f input:focus + label,.f input:not(:placeholder-shown) + label{
  transform:translateY(-22px);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  font-family:var(--mono);color:var(--dim)}
.f i{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--grad);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .65s var(--e)}
.f input:focus ~ i{transform:scaleX(1)}
.f.bad input{border-bottom-color:#ff4d4d}
.chips{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:9px;margin-top:6px}
.chip{padding:10px 17px;border-radius:999px;border:1px solid var(--line);font-size:13.5px;
  color:var(--dim);transition:color .4s,border-color .4s,background .4s}
.chip:hover{color:var(--fg);border-color:var(--dim)}
.chip.on{background:var(--grad);border-color:transparent;color:#fff}
.form .btn{grid-column:1/-1;justify-self:start;margin-top:10px}
.form__n{grid-column:1/-1;font-size:12.5px;color:var(--faint);max-width:46ch}
.form.sent{opacity:.4;pointer-events:none;transition:opacity .6s}
@media(max-width:700px){.form{grid-template-columns:1fr}}