/* 주요 고객사 — 상단 흐름 선 · TRUST + HOW WE WORK 통합 패널 */
.vx{--b:#3F66F0;--ink:#14234B;--mut:#5F6E8C;word-break:keep-all}
.cl-hero.vx{position:relative;overflow:visible!important}
.cl-hero .cl-container{position:relative;z-index:2}

.cl-hero.vx-c{padding:66px 0 150px!important}
.vx-c-wave{position:absolute;left:0;bottom:0;width:100%;height:220px}
.vx-c-wave path{fill:none;stroke-linecap:round}
.vx-c-wave .w1{stroke:url(#none);stroke:#B9CBF5;stroke-width:2.4}
.vx-c-wave .w2{stroke:#D9CFF7;stroke-width:1.6;stroke-dasharray:3 8}
.vx-c-dots{position:absolute;left:0;right:0;bottom:0;height:220px}
.vx-c-dots i{position:absolute;width:14px;height:14px;margin:-7px;border-radius:50%;background:#fff;border:4px solid var(--c);box-shadow:0 0 0 8px color-mix(in srgb,var(--c) 14%,transparent)}
.cl-intro.vx{padding-top:20px!important;padding-bottom:80px!important}
.vx-c-panel{display:grid;grid-template-columns:1fr 1.15fr;gap:50px;align-items:center;padding:44px 48px;border-radius:30px;background:rgba(255,255,255,.7);border:2px solid #fff;box-shadow:0 24px 60px rgba(80,105,200,.12);backdrop-filter:blur(8px)}
.vx-c-q{margin:0;font-size:21px;font-weight:700;line-height:1.6;letter-spacing:-.03em;color:var(--ink)}
.vx-c-p{margin:14px 0 0;font-size:15.5px;line-height:1.85;color:#5a6c88}
.vx-c-how{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px;margin:40px 4px 16px}
.vx-c-how .cl-eyebrow{width:100%;margin:0 0 4px}
.vx-c-how b{font-size:22px;letter-spacing:-.04em;color:var(--ink)}
.vx-c-how b em{font-style:normal;color:#2A5FE0}
.vx-c-how span{font-size:15px;color:var(--mut)}
.vx-c-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.vx-c-s{position:relative;padding:22px 22px 20px 82px;border-radius:20px;background:rgba(255,255,255,.85);border:1px solid #E4EAF5}
.vx-c-s>span{position:absolute;left:22px;top:22px;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:#E4ECFF;color:var(--b)}
.vx-c-s:nth-child(2)>span{background:#DFF6F1;color:#12A594}.vx-c-s:nth-child(3)>span{background:#EEE8FF;color:#7B5CF5}
.vx-c-s svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vx-c-s i{font-style:normal;font-size:12px;font-weight:800;color:#7FA0F0}
.vx-c-s b{display:block;font-size:17px;color:var(--ink);margin-top:2px}
.vx-c-s p{margin:4px 0 0;font-size:14px;color:var(--mut)}

/* ---------- 움직임 (사이트 공통 이징: 천천히 출발 → 부드럽게 멈춤) ---------- */
.vx{--ez:cubic-bezier(.33,0,.15,1)}
/* 흐름 선: 왼쪽 → 오른쪽으로 그려짐 / 점선은 다 그려진 뒤 천천히 흐름 */
.cv-on .vx-c-wave .w1{stroke-dasharray:1;stroke-dashoffset:1}
.cv-on .vx-c-wave .w2{opacity:0}
.cv-on .vx-c-dots i{opacity:0;transform:scale(.3)}
.cv-on .vx-c-dots i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--c);opacity:0}
.cv-go .vx-c-wave .w1{animation:cvDraw 1.6s linear var(--w-delay,1s) forwards}
.cv-go .vx-c-wave .w2{animation:cvFade .8s ease var(--w2-delay,2.4s) forwards,cvFlow 24s linear var(--w2-delay,2.4s) infinite}
.cv-go .vx-c-dots i{animation:cvPop .55s cubic-bezier(.3,1.6,.5,1) var(--pd,1.4s) forwards}
.cv-go .vx-c-dots i::after{animation:cvRing 1.1s ease-out var(--pd,1.4s) 1}
@keyframes cvDraw{to{stroke-dashoffset:0}}
@keyframes cvFade{to{opacity:1}}
@keyframes cvFlow{to{stroke-dashoffset:-220}}
@keyframes cvPop{to{opacity:1;transform:none}}
@keyframes cvRing{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}

/* 패널 · 카드: 화면에 들어오면 차례로 */
.cv-on .cv-rv{opacity:0;transform:translateY(26px)}
.cv-on .cv-rv.in{opacity:1;transform:none;transition:opacity 1.06s var(--ez),transform 1.18s var(--ez);transition-delay:var(--cd,0s)}
.cv-on .vx-c-q{overflow:hidden}
.cv-on .vx-c-q>span{display:block;transform:translateY(105%);transition:transform 1s var(--ez) .35s}
.cv-on .vx-c-panel.in .vx-c-q>span{transform:none}
.cv-on .vx-c-s>span{transform:scale(.6);opacity:0}
.cv-on .vx-c-s.in>span{transform:none;opacity:1;transition:transform .6s cubic-bezier(.3,1.6,.5,1) calc(var(--cd,0s) + .3s),opacity .3s ease calc(var(--cd,0s) + .3s)}
/* 다 나타난 뒤 마우스 반응 */
.vx-c-s.done{transition:transform .35s var(--ez),box-shadow .35s var(--ez)!important}
.vx-c-s.done:hover{transform:translateY(-5px)!important;box-shadow:0 18px 36px rgba(80,105,200,.14)}
.vx-c-s>span{transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.vx-c-s.in:hover>span{transform:translateY(-2px) rotate(-6deg) scale(1.08)}

/* ---------- 휴대폰 ---------- */
@media(max-width:900px){
 .cl-hero.vx-c{padding:44px 0 110px!important}
 .vx-c-wave,.vx-c-dots{height:150px}
 .vx-c-panel{grid-template-columns:1fr;gap:20px;padding:30px 24px}
 .vx-c-q{font-size:18px}
 .vx-c-how{margin-top:32px}
 .vx-c-how b{font-size:19px}
 .vx-c-steps{grid-template-columns:1fr;gap:12px}
}
@media(prefers-reduced-motion:reduce){
 .cv-on .vx-c-wave .w1{stroke-dashoffset:0}.cv-on .vx-c-wave .w2,.cv-on .vx-c-dots i,.cv-on .cv-rv,.cv-on .vx-c-s>span{opacity:1;transform:none}
 .cv-on .vx-c-q>span{transform:none}
}

/* 카드 3개: 하나씩 옆에서 밀려 들어오듯 (0.32초 간격) */
.cv-on .vx-c-s.cv-rv{transform:translate(-24px,18px) scale(.97)}
.cv-on .vx-c-s.cv-rv.in{transform:none;transition:opacity .9s var(--ez),transform 1.05s var(--ez);transition-delay:var(--cd,0s)}
.vx-c-how{margin-bottom:18px!important}