/* Раздел «Агентствам» (/agency/): подключается после home.css только на страницах раздела.
   Механики главной (змейка #road, проявление data-reveal, выезд .mk-steps) берутся из slabs.css и home.css. */

/* ---- сетки и статьи ---- */
.cs-grid.ag-grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ag-main .center-link{margin-top:clamp(24px,3vw,40px)}.ag-main .center-link a{color:inherit;font-weight:600}
.ag-arts{margin-top:clamp(24px,3vw,44px)}
.ag-arts .tz{display:flex;flex-direction:column;gap:12px;background:none;border:0;border-radius:0;color:inherit;text-decoration:none;box-shadow:none;transform:none}
.ag-arts .tz[hidden]{display:none}
.ag-arts .tz-fig{display:block;border-radius:20px;overflow:hidden}
.ag-arts .tz img{display:block;width:100%;height:auto;transition:transform .8s var(--ease)}
.ag-arts .tz:hover img{transform:scale(1.03)}
.ag-arts .tz-tags{display:flex;flex-wrap:wrap;gap:6px}
.ag-arts .tz-t{font-size:clamp(1.1rem,1.6vw,1.35rem);font-weight:500;letter-spacing:-.01em;line-height:1.25;text-wrap:balance}
.ag-arts .tz-m{opacity:.7;font-size:.9rem}
.ag-aud{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(18px,2vw,28px)}
.ag-aud .cs-chip{color:inherit;border-color:rgba(255,255,255,.22);background:transparent}
.ag-aud .cs-chip[aria-pressed="true"]{background:var(--lime-400);border-color:var(--lime-400);color:var(--ink-900)}

/* ---- «С какими задачами»: змейка как «Узнаёте свою задачу?» на главной ---- */
.ag-offers #tools > h2{font-size:var(--fs-h2);line-height:1.05;letter-spacing:-.02em;margin:0 0 16px}
.ag-offers #tools > .sub{font-size:var(--fs-lead);max-width:56ch;margin-left:auto;margin-right:auto}
.ag-offers #tools .road .ag-oc{padding-bottom:clamp(22px,2.4vw,30px);min-height:270px}
.ag-offers #tools .road .ag-oc .pain-badge{margin-bottom:12px}
.ag-offers #tools .road .ag-oc h4{font-weight:600}
.ag-offers #tools .road .ag-oc p{padding-right:4px;max-width:34ch}
.ag-offers #tools .road .ag-oc .more{position:relative;z-index:1;margin-top:16px}
.ag-oc:hover .pain-3d{transform:translateY(-6px) scale(1.04)}
@media (max-width:700px){.ag-offers #tools .road .ag-oc{min-height:0;padding-bottom:110px}}

/* ---- «Кому подходит»: карточки выезжают с боков к центру ---- */
.mk-js .ag-for li{--rx:-140px}
.mk-js .ag-for li:nth-child(even){--rx:140px}
.mk-js .ag-for li:nth-child(n){transition-delay:0s}
.mk-js .ag-for li:nth-child(even){transition-delay:.12s}
@media (max-width:620px){.mk-js .ag-for li{--rx:-60px}.mk-js .ag-for li:nth-child(even){--rx:60px}}

/* ---- «Как работаем»: дорога с разметкой, шаги ступенями и по одному при прокрутке ---- */
.ag-how{overflow-x:clip}
.ag-road{position:relative;margin-top:clamp(28px,4vw,52px);padding-bottom:96px}
.ag-road-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;align-items:end}
.ag-road .lv{position:relative;overflow:visible;padding:22px 20px;box-shadow:0 24px 40px rgba(11,16,32,.28);border:1px solid #2A3452}
.ag-road .lv h3{font-size:clamp(1.05rem,1.35vw,1.3rem);line-height:1.2}
.ag-road .lv p{font-size:.95rem;line-height:1.45}
.ag-road .lv:nth-child(1){--mb:24px}.ag-road .lv:nth-child(2){--mb:56px}.ag-road .lv:nth-child(3){--mb:88px}.ag-road .lv:nth-child(4){--mb:120px}.ag-road .lv:nth-child(5){--mb:152px}
.ag-road .lv{margin-bottom:var(--mb)}
.ag-road .lv::after{content:"";position:absolute;left:50%;top:100%;width:4px;margin-left:-2px;height:calc(var(--mb) + 48px);background:repeating-linear-gradient(180deg,var(--ink-900) 0 8px,transparent 8px 14px)}
.ag-road .lv::before{content:"";position:absolute;left:50%;top:calc(100% + var(--mb) + 48px - 9px);width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--lime-400);box-shadow:0 0 0 4px #1A2238,0 0 0 6px var(--lime-400);z-index:2}
.ag-road .lv-band{top:auto;bottom:0;transform:none}
.seq-js .ag-road .lv{opacity:0;translate:0 80px;scale:.94;transition:opacity .7s ease,translate .9s cubic-bezier(.2,.7,.2,1),scale .9s cubic-bezier(.2,.7,.2,1)}
.seq-js .ag-road .lv.seq-in{opacity:1;translate:0 0;scale:1}
@media (max-width:1100px){
  .ag-road{padding-bottom:0}
  .ag-road .lv-band{left:6px;right:auto;top:0;bottom:0;width:56px;height:auto;transform:none}
  .ag-road .lv-mark{left:50%;right:auto;top:0;bottom:0;width:6px;height:auto;margin:0 0 0 -3px;background:repeating-linear-gradient(180deg,var(--lime-400) 0 46px,transparent 46px 84px);background-position-y:var(--off,0px)}
  .ag-road .lv-edge{top:0!important;bottom:0!important;width:3px;height:auto}.ag-road .lv-edge.t{left:6px}.ag-road .lv-edge.b{left:auto;right:6px}
  .ag-road-grid{grid-template-columns:minmax(0,1fr);padding-left:78px;gap:16px}
  .ag-road .lv{margin-bottom:0}
  .ag-road .lv::after{display:none}
  .ag-road .lv::before{left:-58px;top:26px;margin-left:0}
  .seq-js .ag-road .lv{translate:60px 0}
}

/* ---- «Условия»: 3D-сцены плавают, карточка наклоняется при наведении ---- */
.ag-terms .ag-term{position:relative;transition:transform .5s var(--ease),box-shadow .5s var(--ease),opacity .9s var(--ease),filter .9s var(--ease)}
.ag-3d{display:block;width:clamp(104px,9vw,132px);margin:-4px 0 16px -6px;transform-origin:50% 100%}
.ag-3d img{display:block;width:100%;height:auto;filter:drop-shadow(0 16px 18px rgba(0,0,0,.4));animation:ag-float 6s ease-in-out infinite}
.ag-term:nth-child(2) .ag-3d img{animation-delay:-1s}.ag-term:nth-child(3) .ag-3d img{animation-delay:-2s}
.ag-term:nth-child(4) .ag-3d img{animation-delay:-3s}.ag-term:nth-child(5) .ag-3d img{animation-delay:-4s}.ag-term:nth-child(6) .ag-3d img{animation-delay:-5s}
.ag-term.bi-in .ag-3d{animation:ag-pop 1s cubic-bezier(.2,.7,.2,1) both}
.ag-term:nth-child(2).bi-in .ag-3d{animation-delay:.1s}.ag-term:nth-child(3).bi-in .ag-3d{animation-delay:.2s}
.ag-term:nth-child(5).bi-in .ag-3d{animation-delay:.1s}.ag-term:nth-child(6).bi-in .ag-3d{animation-delay:.2s}
@media (hover:hover){
  .ag-term:hover{transform:perspective(900px) rotateX(5deg) rotateY(-6deg) translateY(-6px);box-shadow:0 30px 50px rgba(0,0,0,.35)}
  .ag-term:hover .ag-3d img{animation-play-state:paused;transform:translateY(-10px) scale(1.06)}
}
@keyframes ag-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(-1.5deg)}}
@keyframes ag-pop{0%{opacity:0;transform:perspective(600px) rotateX(60deg) scale(.6)}100%{opacity:1;transform:none}}

/* ---- подстраницы офферов: карточки по три выезжают слева, снизу и справа ---- */
.mk-js .ag-slide3 li:nth-child(3n+1){--rx:-140px}
.mk-js .ag-slide3 li:nth-child(3n+2){--rx:0px}
.mk-js .ag-slide3 li:nth-child(3n){--rx:140px}
.mk-js .ag-slide3 li:nth-child(n){transition-delay:0s}
.mk-js .ag-slide3 li:nth-child(3n+2){transition-delay:.1s}
.mk-js .ag-slide3 li:nth-child(3n){transition-delay:.2s}
@media (max-width:980px){.mk-js .ag-slide3 li:nth-child(odd){--rx:-110px}.mk-js .ag-slide3 li:nth-child(even){--rx:110px}}
@media (max-width:620px){.mk-js .ag-slide3 li:nth-child(odd){--rx:-60px}.mk-js .ag-slide3 li:nth-child(even){--rx:60px}}
.cs-grid.ag-slide3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.cs-grid.ag-slide3{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.cs-grid.ag-slide3{grid-template-columns:1fr}}
.ag-road-grid.ag-n3{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}

/* ---- первый экран подстраницы: 3D-сцена оффера ---- */
.ag-sub-hero .wrap{position:relative}
.ag-hero-3d{position:absolute;right:0;top:50%;width:clamp(220px,22vw,320px);translate:0 -45%;pointer-events:none;animation:ag-pop 1.1s cubic-bezier(.2,.7,.2,1) .2s both}
.ag-hero-3d img{display:block;width:100%;height:auto;filter:drop-shadow(0 24px 30px rgba(0,0,0,.45));animation:ag-float 7s ease-in-out infinite}
@media (min-width:1101px){.ag-sub-hero h1,.ag-sub-hero .cs-lead{max-width:calc(100% - clamp(240px,25vw,360px))}}
@media (max-width:1100px){.ag-hero-3d{display:none}}

@media (max-width:620px){.cs-grid.ag-grid2{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .ag-3d img,.ag-term.bi-in .ag-3d,.ag-hero-3d,.ag-hero-3d img{animation:none}
  .seq-js .ag-road .lv{opacity:1;translate:none;scale:none;transition:none}
}
.ag-how .ag-road + .sub{margin-top:clamp(24px,3vw,40px)}