/* ---------- WORK VX ROOT: HOW WE HELP ---------- */

:root{--vx-work-help-w:1006px;--vx-work-help-gap:clamp(2rem,1.6458rem + 1.5741vw,3.1875rem);--vx-work-help-card-h:185px;--vx-work-help-card-gap:20px;--vx-work-help-bg:rgba(255,255,255,.06);--vx-work-help-border:rgba(247,247,247,.15);--vx-work-help-radius:11.3px;--vx-work-help-pad:clamp(1.25rem,1.0839rem + .7383vw,1.8044rem);--vx-work-help-icon-box:45px;--vx-work-help-icon:24px;--vx-work-help-icon-bg:rgba(255,255,255,.1);--vx-work-help-icon-shadow:4px 4px 4px rgba(0,0,0,.25);--vx-work-help-text-gap:32px;--vx-work-help-text-w:247px}

/* ---------- HOW WE HELP ---------- */
.vx .vx-work-help__title{margin:0;text-align:center;line-height:1.325;letter-spacing:-0.06em}
.vx-work-help__list{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--vx-work-help-card-gap);max-width:var(--vx-work-help-w);margin:var(--vx-work-help-gap) auto 0;padding:0;list-style:none}
.vx-work-help__card{display:flex;flex-direction:column;align-items:flex-start;box-sizing:border-box;padding:var(--vx-work-help-pad);background:var(--vx-work-help-bg);border:1px solid var(--vx-work-help-border);border-radius:var(--vx-work-help-radius)}
.vx-work-help__icon{display:flex;align-items:center;justify-content:center;width:var(--vx-work-help-icon-box);height:var(--vx-work-help-icon-box);background:var(--vx-work-help-icon-bg);border-radius:var(--vx-radius-action);box-shadow:var(--vx-work-help-icon-shadow)}
.vx-work-help__icon img{display:block;width:var(--vx-work-help-icon);height:var(--vx-work-help-icon)}
.vx .vx-work-help__text{max-width:var(--vx-work-help-text-w);margin:var(--vx-work-help-text-gap) 0 0;line-height:1.36;letter-spacing:-0.03em}

/* HOW WE HELP: 3 cards in a row (as in Figma) */
@media (min-width:768px){
.vx-work-help__list{grid-template-columns:repeat(3,minmax(0,1fr))}
.vx-work-help__card{min-height:var(--vx-work-help-card-h)}
}

/* ---------- WORK VX ROOT: MORE CASE STUDIES (slider) ---------- */
:root{--vx-work-more-w:1240px;--vx-work-more-title-fs:clamp(1.5rem,1.375rem + .5556vw,1.875rem);--vx-work-more-title-color:var(--vx-violet-500);--vx-work-more-head-gap:30px;--vx-work-more-gap:20px;--vx-work-more-arrow:44px;--vx-work-more-arrow-bg:rgba(52,0,71,.6);--vx-mcard-h:636px;--vx-mcard-bg:rgba(255,255,255,.06);--vx-mcard-border:rgba(247,247,247,.15);--vx-mcard-radius:10.3px;--vx-mcard-inset:11.3px;--vx-mcard-media-bg:#2E2E2E;--vx-mcard-media-radius:8.2px;--vx-mcard-media-ratio:373 / 339;--vx-mcard-go:53px;--vx-mcard-go-bg:rgba(52,0,71,.6);--vx-mcard-go-top:19.7px;--vx-mcard-go-right:20.3px;--vx-mcard-pad-x:18.5px;--vx-mcard-badge-border:#73009D;--vx-mcard-title-fs:clamp(1.5rem,1.315rem + .8222vw,2.055rem);--vx-mcard-title-color:#D7D7D7;--vx-mcard-sub-fs:clamp(1rem,.9052rem + .4213vw,1.2844rem);--vx-mcard-sub-color:#9D9D9D;--vx-mcard-stat-fs:1.1856rem;--vx-mcard-stat-color:#D7D7D7;--vx-mcard-muted:#CBCBCB;--vx-mcard-link-fs:.9rem;--vx-mcard-slide-w:85%;--vx-mcard-link-hover:var(--vx-accent)}

/* ---------- MORE CASE STUDIES ---------- */
.vx-work-more__inner{max-width:var(--vx-work-more-w);margin-inline:auto}
.vx-work-more__head{display:flex;align-items:center;justify-content:space-between;gap:var(--vx-space-16);margin-bottom:var(--vx-work-more-head-gap)}
.vx .vx-work-more__title{margin:0;font-size:var(--vx-work-more-title-fs);font-weight:var(--vx-fw-semibold);line-height:1.867;letter-spacing:-0.01em;color:var(--vx-work-more-title-color)}
.vx-work-more__nav{display:flex;gap:var(--vx-space-8)}
.vx .vx-work-more__arrow{display:flex;align-items:center;justify-content:center;width:var(--vx-work-more-arrow);height:var(--vx-work-more-arrow);margin:0;padding:0;background:var(--vx-work-more-arrow-bg);border:1px solid var(--vx-border-brand);border-radius:var(--vx-radius-pill);box-shadow:none;-webkit-appearance:none;appearance:none;cursor:pointer;transition:background var(--vx-dur) var(--vx-ease),opacity var(--vx-dur) var(--vx-ease)}
.vx-work-more__arrow img{display:block;width:24px;height:24px}
.vx-work-more__arrow--prev img{transform:scaleX(-1)}
.vx .vx-work-more__arrow:disabled{opacity:.35;cursor:default}
.vx-work-more__list{position:relative;display:flex;gap:var(--vx-work-more-gap);margin:0 calc(var(--vx-gutter) * -1);padding:0 var(--vx-gutter);list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--vx-gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.vx-work-more__list::-webkit-scrollbar{display:none}
.vx-work-more__list:focus-visible{outline-offset:4px}
.vx-mcard{position:relative;flex:0 0 var(--vx-mcard-slide-w);box-sizing:border-box;display:flex;flex-direction:column;padding:var(--vx-mcard-inset);background:var(--vx-mcard-bg);border:1px solid var(--vx-mcard-border);border-radius:var(--vx-mcard-radius);scroll-snap-align:start;transition:border-color var(--vx-dur) var(--vx-ease)}
.vx-mcard__media{position:relative;aspect-ratio:var(--vx-mcard-media-ratio);background:var(--vx-mcard-media-bg);border-radius:var(--vx-mcard-media-radius);overflow:hidden}
.vx-mcard__img{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
.vx-mcard__go{position:absolute;top:var(--vx-mcard-go-top);right:var(--vx-mcard-go-right);display:flex;align-items:center;justify-content:center;width:var(--vx-mcard-go);height:var(--vx-mcard-go);background:var(--vx-mcard-go-bg);border-radius:var(--vx-radius-pill)}
.vx-mcard__go img{display:block;width:24px;height:24px;transition:transform var(--vx-dur) var(--vx-ease)}
.vx-mcard__body{display:flex;flex:1;flex-direction:column;align-items:flex-start;padding:var(--vx-space-16) var(--vx-mcard-pad-x) var(--vx-space-8)}
.vx-mcard__badge{display:inline-flex;padding:5.7px 11.4px;border:1px solid var(--vx-mcard-badge-border);border-radius:var(--vx-radius-pill);font-size:var(--vx-fs-label);line-height:1.3;letter-spacing:-0.03em;color:var(--vx-white)}
.vx .vx-mcard__title{margin:var(--vx-space-12) 0 0;font-size:var(--vx-mcard-title-fs);font-weight:var(--vx-fw-bold);line-height:1.25;letter-spacing:-0.03em;color:var(--vx-mcard-title-color)}
.vx .vx-mcard__sub{margin:var(--vx-space-4) 0 0;font-size:var(--vx-mcard-sub-fs);font-weight:var(--vx-fw-semibold);line-height:1.4;letter-spacing:-0.03em;color:var(--vx-mcard-sub-color)}
.vx-mcard__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--vx-space-12);width:100%;margin:var(--vx-space-24) 0 0;padding:0;list-style:none}
.vx-mcard__stat{display:flex;flex-direction:column;min-width:0}
.vx-mcard__value{font-size:var(--vx-mcard-stat-fs);font-weight:var(--vx-fw-semibold);line-height:1.5;letter-spacing:-0.03em;color:var(--vx-mcard-stat-color)}
.vx-mcard__label{font-size:var(--vx-fs-label);line-height:1.33;letter-spacing:-0.01em;color:var(--vx-mcard-muted)}
.vx-mcard__link{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:var(--vx-space-20);font-size:var(--vx-mcard-link-fs);line-height:1.333;letter-spacing:-0.01em;color:var(--vx-mcard-muted);text-decoration:none}
.vx-mcard__link::after{content:"";position:absolute;inset:0;z-index:1}
.vx-mcard__link img{display:block;width:14px;height:14px;transition:transform var(--vx-dur) var(--vx-ease)}
.vx-mcard__link:focus-visible{outline:none}
.vx-mcard:focus-within{outline:2px solid var(--vx-focus);outline-offset:3px}

/* MORE CASE STUDIES: hover (mouse only) */
@media (hover:hover){
.vx-work-more__list{cursor:grab}
.vx .vx-work-more__arrow:not(:disabled):hover{background:var(--vx-violet-700)}
.vx-mcard:hover{border-color:var(--vx-border-brand)}
.vx-mcard:hover .vx-mcard__link img{transform:translateX(4px)}
}

/* MORE CASE STUDIES: 2 cards visible on tablet */
@media (min-width:768px){
.vx-work-more__list{margin-inline:0;padding:0;scroll-padding-inline:0}
.vx-mcard{flex-basis:calc((100% - var(--vx-work-more-gap)) / 2)}
}

/* MORE CASE STUDIES: 3 cards visible (as in Figma) */
@media (min-width:1024px){
.vx-mcard{flex-basis:calc((100% - var(--vx-work-more-gap) * 2) / 3);min-height:var(--vx-mcard-h)}
}

/* ---------- WORK VX: ARROW FLY (hover: arrow flies out top-right, comes back from bottom-left) ---------- */
:root{--vx-work-fly-dur:.8s;--vx-work-fly-dist:150%}
@keyframes vx-work-fly{0%{transform:translate(0,0)}45%{transform:translate(var(--vx-work-fly-dist),calc(var(--vx-work-fly-dist) * -1))}46%{transform:translate(calc(var(--vx-work-fly-dist) * -1),var(--vx-work-fly-dist))}100%{transform:translate(0,0)}}
.vx-cases .vx-case__cta-icon,.vx-mcard__go{overflow:hidden}
@media (hover:hover){
.vx-cases .vx-case:hover .vx-case__cta-icon img,.vx-mcard:hover .vx-mcard__go img{animation:vx-work-fly var(--vx-work-fly-dur) var(--vx-ease)}
}
/* ---------- WORK VX ROOT: GROWTH CTA (Work page + single case study) ---------- */
/* Figma 1803:1851 | card 1237×208, gradient white 6% → near-black 6% (75%), border white 15%, radius 10.3, pad 29 | kicker 18 white | title 30 SemiBold #8C00C8 | button 15.2 Medium, pad 10.6/21.2, radius 6.7, arrow 13 | image 310 right (hidden on mobile) */
:root{--vx-work-cta-w:1237px;--vx-work-cta-h:208px;--vx-work-cta-bg:linear-gradient(90deg,rgba(255,255,255,.06) 0%,rgba(3,1,9,.06) 74.78%);--vx-work-cta-border:rgba(247,247,247,.15);--vx-work-cta-radius:10.3px;--vx-work-cta-pad:clamp(1.25rem,1.0729rem + .787vw,1.8125rem);--vx-work-cta-title-fs:clamp(1.5rem,1.375rem + .5556vw,1.875rem);--vx-work-cta-title-color:var(--vx-violet-500);--vx-work-cta-media-w:310px;--vx-work-cta-btn-fs:.9493rem;--vx-work-cta-btn-px:21.2px;--vx-work-cta-btn-py:10.6px;--vx-work-cta-btn-radius:6.7px;--vx-work-cta-btn-gap:7px;--vx-work-cta-arrow:14px}

/* ---------- GROWTH CTA ---------- */
.vx-work-cta__card{display:grid;grid-template-columns:minmax(0,1fr);max-width:var(--vx-work-cta-w);margin-inline:auto;box-sizing:border-box;background:var(--vx-work-cta-bg);border:1px solid var(--vx-work-cta-border);border-radius:var(--vx-work-cta-radius);overflow:hidden}
.vx-work-cta__content{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:var(--vx-work-cta-pad)}
.vx .vx-work-cta__kicker{margin:0;line-height:1.6;letter-spacing:-0.01em}
.vx .vx-work-cta__title{margin:var(--vx-space-4) 0 0;font-size:var(--vx-work-cta-title-fs);font-weight:var(--vx-fw-semibold);line-height:1.4;letter-spacing:-0.01em;color:var(--vx-work-cta-title-color);text-wrap:wrap}
.vx .vx-work-cta__btn{gap:var(--vx-work-cta-btn-gap);min-height:0;margin-top:var(--vx-space-24);padding:var(--vx-work-cta-btn-py) var(--vx-work-cta-btn-px);font-size:var(--vx-work-cta-btn-fs);font-weight:var(--vx-fw-medium);line-height:1.3;letter-spacing:-0.02em;border-radius:var(--vx-work-cta-btn-radius)}
.vx-work-cta__btn img{display:block;width:var(--vx-work-cta-arrow);height:var(--vx-work-cta-arrow);transition:transform var(--vx-dur) var(--vx-ease)}
.vx-work-cta__media{display:none}
.vx-work-cta__media img{display:block;width:100%;height:100%;object-fit:cover;object-position:right center}

/* GROWTH CTA: hover (mouse only) */
@media (hover:hover){
.vx-work-cta__btn:hover img{transform:translateX(3px)}
}

/* GROWTH CTA: image on the right from tablet up (as in Figma) */
@media (min-width:768px){
.vx-work-cta__card{grid-template-columns:minmax(0,1fr) var(--vx-work-cta-media-w);min-height:var(--vx-work-cta-h)}
.vx-work-cta__media{display:block}
}