/* HPACE v3: шапка, главная, категории кейсов и направления. */

/* Шапка: одна строка, главная кнопка, прячется при прокрутке вниз */
.hp-site header.hp-top{transition:transform .4s var(--hp-ease),box-shadow .3s;background:var(--hp-bg)}
.hp-top__info{display:none!important}
.hp-top__bar{min-height:72px}
.hp-top.is-away{transform:translateY(-100%)}
.hp-top.is-stuck{box-shadow:0 1px 0 var(--hp-line)}
.hp-top__logo .hp-logo{height:21px}
.hp-menu__link{font-size:15px;font-weight:500}
.hp-menu__link:hover{color:var(--hp-accent)}
.hp-site .hp-menu__sub{min-width:280px;padding:10px;border:1px solid var(--hp-line);border-radius:16px;background:var(--hp-bg-elevated);box-shadow:0 24px 70px rgba(10,20,40,.14)}
.hp-site .hp-menu__sub a{display:block;padding:9px 12px;border-radius:10px;font-size:14.5px;line-height:1.3}
.hp-site .hp-menu__sub a:hover{background:color-mix(in srgb,var(--hp-accent) 10%,transparent);color:var(--hp-accent)}
.hp-menu__item:first-child .hp-menu__sub,.hp-menu__item:nth-child(3) .hp-menu__sub{column-count:2;column-gap:6px;min-width:440px}
.hp-menu__sub li{break-inside:avoid}
.hp-v3-tel{font-size:15px;font-weight:600;white-space:nowrap;color:var(--hp-ink)}
.hp-v3-tel:hover{color:var(--hp-accent)}
.hp-top__actions .hp-top__icon-btn svg{width:18px;height:18px}
@media (max-width:1280px){.hp-v3-tel{display:none}}
@media (max-width:1100px){.hp-top__actions>a.hp-top__icon-btn,.hp-site .hp-top__tour-btn{display:none}}
@media (min-width:992px){.hp-dock{display:none!important}}

/* Ритм секций и заголовки */
.hp-site .hp-section{padding-block:clamp(64px,8vw,128px)}
.hp-section__inner{max-width:1400px}
.hp-section__head{max-width:none;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-bottom:clamp(32px,4vw,64px)}
.hp-section__title{font-size:clamp(28px,3.6vw,60px);line-height:1.1;letter-spacing:-.015em;max-width:19em}
.hp-section__label{color:var(--hp-accent);font-size:14px;letter-spacing:0;text-transform:none;font-weight:600}
.hp-v3-line-in{padding-block:.1em .16em;margin-block:-.1em -.16em}

/* Логотипы и цифры */
.hp-v3-logos{overflow:hidden;padding-block:clamp(22px,3vw,40px);border-block:1px solid var(--hp-line);background:var(--hp-bg)}
.hp-v3-logos__track{display:flex;align-items:center;gap:clamp(44px,5vw,88px);width:max-content;will-change:transform}
.hp-v3-logos img{height:34px;width:auto;max-width:150px;object-fit:contain;filter:grayscale(1);opacity:.62;transition:opacity .25s,filter .25s}
.hp-v3-logos img:hover{opacity:1;filter:none}
html[data-theme="dark"] .hp-v3-logos img{filter:grayscale(1) invert(1) brightness(1.6)}
.hp-v3-proof{padding-block:clamp(56px,7vw,112px)}
.hp-v3-proof__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,88px);align-items:end}
.hp-v3-proof__lead{margin:0;font-size:clamp(22px,2.3vw,36px);line-height:1.22;letter-spacing:-.015em;color:var(--hp-ink)}
.hp-v3-proof__nums{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.hp-v3-proof__nums div{display:flex;flex-direction:column-reverse;gap:6px;border-top:1px solid var(--hp-line);padding-top:14px}
.hp-v3-proof__nums dd{margin:0;font-family:var(--hp-display);font-size:clamp(34px,4.2vw,68px);line-height:1;color:var(--hp-accent)}
.hp-v3-proof__nums dt{font-weight:400;font-size:15px;color:var(--hp-muted)}
@media (max-width:900px){.hp-v3-proof__grid{grid-template-columns:1fr}.hp-v3-proof__nums{grid-template-columns:1fr 1fr;gap:24px 16px}}

/* Кейсы: главная и категории */
.hp-v3-works{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(36px,4.5vw,72px) clamp(16px,2vw,32px)}
.hp-work{grid-column:span 6}
.hp-work:nth-child(4n+1),.hp-work:nth-child(4n){grid-column:span 7}
.hp-work:nth-child(4n+2),.hp-work:nth-child(4n+3){grid-column:span 5}
.hp-work__m{display:block;overflow:hidden;border-radius:20px;background:var(--hp-card);aspect-ratio:16/11}
.hp-work__m img,.hp-work__m picture{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.hp-work__b{margin-top:16px}
.hp-work__t{margin:0;font-family:var(--hp-font);font-size:clamp(19px,1.6vw,25px);font-weight:600;line-height:1.25}
.hp-work__t a:hover{color:var(--hp-accent)}
.hp-work__tags,.hp-case__tags{margin:8px 0 0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:14.5px;color:var(--hp-muted)}
.hp-work__tags span+span::before,.hp-case__tags span+span::before{content:"·";margin-right:14px}
@media (max-width:760px){.hp-work:nth-child(n){grid-column:1/-1}}
.hp-masonry--cards{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,4vw,64px) clamp(16px,2.4vw,36px);columns:auto!important}
.hp-masonry--cards .hp-masonry__item.hp-case,.hp-masonry--cards .hp-masonry__item.hp-case:hover,.hp-masonry--cards .hp-masonry__item.hp-case:active{margin:0;padding:0;border:0;border-radius:0;overflow:visible;background:none;box-shadow:none;transform:none;break-inside:auto;position:relative;width:auto}
.hp-masonry--cards .hp-case::before{display:none}
.hp-case:hover .hp-case__title a{color:var(--hp-accent)}
.hp-masonry--cards .hp-case__media{display:block;margin:0;aspect-ratio:16/11;border-radius:20px;background:var(--hp-card)}
.hp-masonry--cards .hp-case__media img,.hp-masonry--cards .hp-case__media picture{display:block;width:100%;height:100%!important;object-fit:cover;object-position:top}
.hp-masonry--cards .hp-case__body{padding:16px 0 0}
.hp-case__title{font-family:var(--hp-font);font-weight:600;font-size:clamp(19px,1.6vw,25px);line-height:1.25;margin:0}
.hp-case__title a:hover{color:var(--hp-accent)}
.hp-case__text{margin-top:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--hp-muted)}
.hp-case__meta,.hp-case__more{display:none}
.hp-fav-btn{top:14px;right:14px}
@media (max-width:760px){.hp-masonry--cards{grid-template-columns:1fr}}
.hp-site .hp-pagehead{padding:clamp(36px,5vw,76px) var(--hp-pad) clamp(14px,2vw,28px);background:none;border:0}
.hp-pagehead__glow{display:none}
.hp-v3-proof,.hp-v3-dirhero{padding-inline:var(--hp-pad)}
.hp-v3-hero__in{max-width:calc(1400px + 2 * var(--hp-pad))}
.hp-pagehead__inner{max-width:1400px;width:100%;margin-inline:auto;padding:0;display:flex;flex-direction:column-reverse;gap:clamp(18px,2.4vw,34px)}
.hp-pagehead__title{font-size:clamp(34px,5.2vw,88px);line-height:1.06;letter-spacing:-.02em;max-width:17em;margin:0}
.hp-v3-cat-lead{max-width:44em;margin:0 0 clamp(24px,3vw,40px);color:var(--hp-muted);font-size:clamp(16px,1.25vw,19px);line-height:1.5}
.hp-site .hp-v3-catsec{padding-top:clamp(12px,2vw,24px)}
.hp-filters{position:sticky;top:0;z-index:20;margin:0 0 clamp(28px,3.5vw,52px);padding:10px 0;background:var(--hp-bg)}
.hp-filters__inner{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
.hp-filters__inner::-webkit-scrollbar{display:none}
.hp-filters__item{flex:none;padding:9px 16px;border-radius:999px;font-size:14.5px}
.hp-filters__item.is-active{background:var(--hp-accent);border-color:var(--hp-accent);color:#fff}

/* Направления */
.hp-site .hp-directions{display:block}
.hp-v3-dir{display:grid;grid-template-columns:64px minmax(0,5fr) minmax(0,6fr) 40px;gap:clamp(12px,2vw,32px);align-items:baseline;padding-block:clamp(22px,2.6vw,38px);border-top:1px solid var(--hp-line);color:var(--hp-ink);transition:color .2s,padding .35s var(--hp-ease)}
.hp-v3-dir:last-of-type{border-bottom:1px solid var(--hp-line)}
.hp-v3-dir__n{color:var(--hp-muted);font-size:14px}
.hp-v3-dir__t{margin:0;font-family:var(--hp-display);font-weight:400;font-size:clamp(21px,2.3vw,36px);line-height:1.15}
.hp-v3-dir__d{margin:0;color:var(--hp-muted);line-height:1.45}
.hp-v3-dir__a{justify-self:end;font-size:22px;transition:transform .35s var(--hp-ease)}
.hp-v3-dir:hover{color:var(--hp-accent);padding-left:14px}
.hp-v3-dir:hover .hp-v3-dir__a{transform:translateX(6px)}
@media (max-width:760px){.hp-v3-dir{grid-template-columns:1fr 30px}.hp-v3-dir__n,.hp-v3-dir__d{grid-column:1/-1}.hp-v3-dir__t{grid-row:2}.hp-v3-dir__a{grid-row:2;grid-column:2}}
.hp-v3-preview{position:fixed;left:0;top:0;width:300px;aspect-ratio:4/3;overflow:hidden;border-radius:16px;z-index:200;pointer-events:none;opacity:0;visibility:hidden;box-shadow:0 30px 70px rgba(10,20,40,.25)}
.hp-v3-preview img{width:100%;height:100%;object-fit:cover}
.hp-v3-dirhero{padding-bottom:clamp(8px,2vw,24px)}
.hp-v3-dirhero__lead{max-width:40em;margin:0;font-size:clamp(18px,1.6vw,24px);line-height:1.4;color:var(--hp-ink)}
.hp-v3-dirhero__cta{margin-top:clamp(20px,2.4vw,32px);display:flex;flex-wrap:wrap;gap:12px}
.hp-site .hp-service-bento{display:block;counter-reset:hpsvc}
.hp-site .hp-service-card{counter-increment:hpsvc;display:grid;grid-template-columns:64px minmax(0,5fr) minmax(0,6fr) 40px;gap:clamp(12px,2vw,32px);align-items:baseline;min-height:0;padding:clamp(20px,2.3vw,32px) 0;border:0;border-top:1px solid var(--hp-line);border-radius:0;background:none;box-shadow:none;transform:none}
.hp-site .hp-service-card .hp-service-card__idx{font:400 14px var(--hp-font);color:var(--hp-muted);min-height:0}
.hp-site .hp-service-card:not(.hp-service-card--cta) .hp-service-card__idx::before{content:none}
.hp-site .hp-service-card__title{font-family:var(--hp-display);font-weight:400;font-size:clamp(19px,1.8vw,28px);line-height:1.18}
.hp-site .hp-service-card__text{margin:0;color:var(--hp-muted);font-size:16px;line-height:1.45}
.hp-site .hp-service-card__arrow{position:static;justify-self:end;font-size:20px}
.hp-site .hp-service-card:hover{color:var(--hp-accent);background:none}
.hp-site .hp-service-card--cta{counter-increment:none;grid-template-columns:minmax(0,5fr) minmax(0,6fr) 40px;margin-top:clamp(24px,3vw,40px);padding:clamp(24px,3vw,40px);border:0;border-radius:20px;background:var(--hp-accent);color:#fff}
.hp-site .hp-service-card--cta .hp-service-card__text,.hp-site .hp-service-card--cta:hover{color:#fff}
.hp-site .hp-service-card--cta:hover{background:color-mix(in srgb,var(--hp-accent) 88%,#000)}
@media (max-width:760px){.hp-site .hp-service-card{grid-template-columns:1fr 30px}.hp-site .hp-service-card__idx,.hp-site .hp-service-card__text{grid-column:1/-1}.hp-site .hp-service-card__title{grid-row:2}.hp-site .hp-service-card__arrow{grid-row:2;grid-column:2}.hp-site .hp-service-card--cta{grid-template-columns:1fr}}

/* На главной команда и отзывы идут лентой, полные списки на своих страницах */
.hp-home .hp-team,.hp-home .hp-masonry--reviews{display:flex!important;gap:16px;overflow-x:auto;columns:auto!important;scroll-snap-type:x proximity;padding-bottom:14px;scrollbar-width:thin}
.hp-home .hp-team>*{flex:0 0 clamp(210px,19vw,270px);scroll-snap-align:start;margin:0}
.hp-home .hp-masonry--reviews>*{flex:0 0 clamp(170px,15vw,220px);scroll-snap-align:start;margin:0}

/* Отрасли и условия */
.hp-v3-niches{display:flex;flex-wrap:wrap;gap:8px}
.hp-v3-niches a{padding:13px 20px;border:1px solid var(--hp-line);border-radius:999px;font-size:clamp(15px,1.25vw,19px);color:var(--hp-ink);transition:background .2s,color .2s,border-color .2s}
.hp-v3-niches a:hover,.hp-v3-niches a.is-all{background:var(--hp-accent);border-color:var(--hp-accent);color:#fff}
.hp-v3-terms{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.5vw,56px) clamp(16px,2.4vw,36px)}
.hp-v3-terms li{border-top:1px solid var(--hp-line);padding-top:16px}
.hp-v3-terms__n{color:var(--hp-accent);font-size:14px}
.hp-v3-terms h3{margin:12px 0 8px;font-family:var(--hp-font);font-weight:600;font-size:clamp(19px,1.6vw,24px);line-height:1.25}
.hp-v3-terms p{margin:0;color:var(--hp-muted);line-height:1.5}
@media (max-width:900px){.hp-v3-terms{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.hp-v3-terms{grid-template-columns:1fr}}

/* Анонс мини-игры */
.hp-v3-game{position:relative;overflow:hidden;border-radius:28px;padding:clamp(32px,6vw,84px);background:radial-gradient(90% 130% at 88% 50%,#0b3b78 0%,#061229 62%);color:#fff}
.hp-v3-game::after{content:"";position:absolute;right:-9%;top:50%;width:min(52vw,620px);aspect-ratio:1;transform:translateY(-50%);border-radius:50%;border:1px solid rgba(120,190,255,.3);box-shadow:0 0 0 70px rgba(0,148,255,.05),0 0 0 150px rgba(0,148,255,.04),inset 0 0 90px rgba(0,148,255,.32);pointer-events:none}
.hp-v3-game>*{position:relative;z-index:1;max-width:560px}
.hp-v3-game .hp-section__label{color:#6cc4ff}
.hp-v3-game h2{margin:8px 0 14px;color:#fff;font-family:var(--hp-display);font-weight:400;font-size:clamp(27px,3.5vw,54px);line-height:1.12}
.hp-v3-game p{color:#cddbee;font-size:clamp(16px,1.3vw,19px);line-height:1.5}
.hp-v3-game .hp-btn{margin-top:14px;background:#0094ff;border-color:#0094ff;color:#fff}

/* Размытие фона дорого при прокрутке: оставляем только у нижней панели на телефоне */
.hp-site *:not(.hp-dock__shell){-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* Кнопка игры: в ряду с иконками шапки, выделена фирменным цветом */
.hp-site .hp-top__tour-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 14px 0 11px;border-radius:12px;border:1px solid color-mix(in srgb,var(--hp-accent) 28%,var(--hp-line));background:color-mix(in srgb,var(--hp-accent) 9%,var(--hp-bg-elevated));color:var(--hp-accent);font:600 14px/1 var(--hp-font);white-space:nowrap;transition:background .2s,border-color .2s,color .2s}
.hp-site .hp-top__tour-btn-icon{display:inline-flex;transition:transform .35s var(--hp-ease)}
.hp-site .hp-top__tour-btn-icon svg{width:19px;height:19px}
.hp-site .hp-top__tour-btn:hover,.hp-site .hp-top__tour-btn:focus-visible{background:var(--hp-accent);border-color:var(--hp-accent);color:#fff}
.hp-site .hp-top__tour-btn:hover .hp-top__tour-btn-icon{transform:rotate(-10deg) scale(1.12)}
@media (max-width:1180px){.hp-site .hp-top__tour-btn{width:40px;padding:0}.hp-top__tour-btn-label{display:none}}
.hp-site .hp-drawer__tour{display:flex;align-items:center;gap:10px;width:100%;padding:14px 0;border:0;border-bottom:1px solid var(--hp-line);background:none;color:inherit;font:600 17px var(--hp-font);text-align:left}
.hp-site .hp-drawer__tour-icon{display:inline-flex;color:var(--hp-accent)}

/* Скролл без пересчётов: появление через классы, вне экрана анимации стоят */
html{scroll-behavior:smooth}
.hp-v3-rise{opacity:0;translate:0 34px;transition:opacity .8s var(--hp-ease),translate .8s var(--hp-ease)}
.hp-v3-rise.is-in{opacity:1;translate:0 0}
.hp-v3-off *{animation-play-state:paused!important}
.hp-home .hp-section{content-visibility:auto;contain-intrinsic-size:auto 760px}
.hp-case__media img,.hp-work__m img{transition:transform .9s var(--hp-ease)}
.hp-work:hover .hp-work__m img{transform:scale(1.03)}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .hp-v3-progress{display:block;position:fixed;left:0;top:0;right:0;height:2px;background:var(--hp-accent);transform-origin:0 50%;z-index:100000;pointer-events:none;animation:hpBar linear both;animation-timeline:scroll(root)}
    .hp-site .hp-v3-hero{animation:hpHeroOut linear both;animation-timeline:scroll(root);animation-range:0 90vh}
    .hp-v3-hero__in{animation:hpHeroIn linear both;animation-timeline:scroll(root);animation-range:0 90vh}
  }
}
@keyframes hpBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes hpHeroOut{to{transform:scale(.94);border-radius:32px}}
@keyframes hpHeroIn{to{transform:translateY(-70px);opacity:.2}}

/* Слайдеры: свайп, перетаскивание, стрелки */
.hp-v3-slider{cursor:grab;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hp-v3-slider::-webkit-scrollbar{display:none}
.hp-v3-slider.is-drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}
.hp-v3-slider.is-drag *{pointer-events:none}
.hp-v3-slider img{-webkit-user-drag:none}
.hp-v3-arrows{display:flex;justify-content:flex-end;gap:8px;margin-bottom:14px}
.hp-v3-arrows[hidden]{display:none}
.hp-site button.hp-v3-arrow{width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--hp-line)!important;border-radius:50%;background:var(--hp-bg-elevated)!important;color:var(--hp-ink)!important;font-size:18px;line-height:1;cursor:pointer;transition:background .2s,color .2s,border-color .2s,opacity .2s}
.hp-site button.hp-v3-arrow:hover:not(:disabled){background:var(--hp-accent)!important;border-color:var(--hp-accent)!important;color:#fff!important}
.hp-site button.hp-v3-arrow:disabled{opacity:.35;cursor:default}
.hp-v3-arrows--over{position:absolute;right:var(--hp-pad);top:-58px;margin:0;z-index:3}
.hp-v3-draggable{cursor:grab;touch-action:pan-y;user-select:none}
.hp-v3-draggable.is-drag{cursor:grabbing}
.hp-v3-draggable img{-webkit-user-drag:none;pointer-events:none}
.hp-v3-reel{overflow:visible clip}
.hp-site .hp-roadmap.is-marquee .hp-roadmap__track{animation:none!important;transform:none!important}
.hp-roadmap__track>:not([data-roadmap-set]){display:none!important}
.hp-site .hp-roadmap__viewport{overflow-x:auto!important;overflow-y:visible}
.hp-roadmap__fade{display:none}
@media (max-width:760px){.hp-v3-arrows--over{display:none}}