/* Supplemental styles for the products / SEO additions.
   Palette matches the existing theme: blue #0174C7, purple #6607A5, dark #31313A, light #ECEDF1.
   Product accents: F2D blue->teal, VeKanban blue->green (taken from their own logos). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.vx-menu-open{max-height:36rem}

/* ---------- Products dropdown (pure CSS) ---------- */
.vx-dd{position:relative;display:flex;align-items:center}
.vx-dd-trigger::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .3s}
.vx-dd:hover .vx-dd-trigger::after,.vx-dd:focus-within .vx-dd-trigger::after{transform:rotate(225deg) translateY(-2px)}
.vx-dd-panel{position:absolute;top:100%;left:50%;width:390px;margin-top:26px;padding:14px;z-index:60;border-radius:22px;
  background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(246,240,255,.93) 55%,rgba(234,245,255,.95));
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border:1px solid rgba(255,255,255,.85);
  box-shadow:0 34px 64px -22px rgba(102,7,165,.3),0 12px 28px -14px rgba(1,116,199,.35);
  opacity:0;visibility:hidden;transform:translate(-50%,10px) scale(.98);transform-origin:top center;
  transition:opacity .25s ease,transform .3s cubic-bezier(.2,.8,.2,1),visibility .25s}
.vx-dd-panel::before{content:"";position:absolute;left:0;right:0;top:-28px;height:28px}
.vx-dd-panel::after{content:"";position:absolute;top:-7px;left:50%;width:14px;height:14px;background:#fff;border-radius:3px 0 0 0;transform:translateX(-50%) rotate(45deg)}
.vx-dd:hover .vx-dd-panel,.vx-dd:focus-within .vx-dd-panel{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1)}
.vx-dd-label{display:block;padding:2px 10px 10px;font:600 11px/1 var(--font-poppins),Poppins,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#6c6c89}
.vx-dd-item{position:relative;display:flex;align-items:center;gap:14px;padding:12px;border-radius:16px;border:1px solid transparent;transition:background .25s,border-color .25s,box-shadow .25s,transform .25s}
.vx-dd-item+.vx-dd-item{margin-top:6px}
.vx-dd-item:hover,.vx-dd-item:focus-visible{background:rgba(255,255,255,.95);border-color:#cfe6ff;box-shadow:0 14px 30px -18px rgba(1,116,199,.6);transform:translateY(-1px)}
.vx-dd-item--vk:hover,.vx-dd-item--vk:focus-visible{border-color:#bdeec7;box-shadow:0 14px 30px -18px rgba(22,133,31,.5)}
.vx-dd-logo{flex:none;display:flex;align-items:center;justify-content:center;width:122px;height:54px;padding:9px 10px;background:#fff;border:1px solid #e4eefb;border-radius:13px}
.vx-dd-logo img{display:block;width:auto;height:auto;max-width:100%;max-height:28px}
.vx-dd-txt{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.vx-dd-kind{font:600 14px/1.2 var(--font-poppins),Poppins,sans-serif;color:#31313a}
.vx-dd-desc{font-size:13px;line-height:1.35;color:#6c6c89}
.vx-dd-go{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;color:#0174c7;background:rgba(1,116,199,.09);transition:background .25s,color .25s,transform .25s}
.vx-dd-item:hover .vx-dd-go,.vx-dd-item:focus-visible .vx-dd-go{background:linear-gradient(135deg,#6607a5,#0174c7);color:#fff;transform:translateX(3px)}
.vx-dd-all{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px;padding:12px 14px;border-radius:14px;font:600 14px/1 var(--font-poppins),Poppins,sans-serif;color:#fff;background:linear-gradient(90deg,#6607a5,#0174c7);transition:filter .25s,box-shadow .25s}
.vx-dd-all .vx-dd-go{width:24px;height:24px;color:#fff;background:rgba(255,255,255,.22)}
.vx-dd-all:hover{filter:brightness(1.1);box-shadow:0 14px 26px -14px rgba(102,7,165,.7)}
.vx-m-sub{display:flex;flex-direction:column;gap:12px;margin:12px 0 0 14px;padding-left:14px;border-left:2px solid #bae1fd}
.vx-m-link{font-size:16px;color:#5b5b72}
.vx-m-link:hover{color:#0174c7}

/* ---------- start-with + more tiles + logo links ---------- */
.vx-plogo-link{display:inline-flex;align-self:flex-start}
.vx-plogo{height:44px;width:auto;transition:transform .3s}
.vx-plogo-link:hover .vx-plogo{transform:scale(1.04)}
.vx-start{border-top:4px solid #0174c7}
.vx-start--vk{border-top-color:#34e04f}
.vx-step{display:inline-block;margin-bottom:.8rem;padding:.25rem .75rem;border-radius:9999px;font-size:.78rem;font-weight:600;background:rgba(1,116,199,.1);color:#0174c7}
.vx-start--vk .vx-step{background:rgba(52,224,79,.16);color:#16851f}
.vx-then{margin-top:1rem;padding-top:1rem;border-top:1px dashed #cfe6ff}
.vx-tile.vx-tile-more{display:flex;flex-direction:column;justify-content:center;border-color:transparent;background:linear-gradient(135deg,#6607a5,#0174c7)}
.vx-tile.vx-tile-more h3,.vx-tile.vx-tile-more p,.vx-tile.vx-tile-more .vx-more-go{color:#fff}
.vx-tile.vx-tile-more p{opacity:.9}
.vx-more-go{display:inline-flex;align-items:center;gap:8px;margin-top:.9rem;font-weight:600}
.vx-tile-more:hover .vx-more-go svg{transform:translateX(4px)}
.vx-more-go svg{transition:transform .3s}

/* ---------- shared bits ---------- */
.vx-link{color:#0174c7;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.vx-link:hover{color:#6607a5}
.vx-chips{display:flex;flex-wrap:wrap;gap:.55rem;list-style:none;margin:0;padding:0}
.vx-chip{background:#fff;border:1px solid #bae1fd;color:#31313a;border-radius:9999px;padding:.32rem .85rem;font-size:.88rem;transition:transform .25s,border-color .25s,box-shadow .25s}
.vx-chip:hover{transform:translateY(-2px);border-color:#0174c7;box-shadow:0 6px 14px -8px rgba(1,116,199,.5)}
.vx-btn-outline{border:1px solid #0174c7;color:#0174c7;background:transparent;display:inline-block;text-align:center}
.vx-btn-outline:hover{background:#0174c7;color:#fff}

/* ---------- reveal on scroll (content stays visible without JS) ---------- */
.vx-js .vx-reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.vx-js .vx-reveal.vx-in{opacity:1;transform:none}

/* ---------- product showcase ---------- */
.vx-prod{position:relative;overflow:hidden}
.vx-orb{position:absolute;border-radius:50%;pointer-events:none;will-change:transform}
.vx-orb1{width:520px;height:520px;top:-180px;left:-160px;background:radial-gradient(circle,rgba(186,225,253,.75) 0%,rgba(186,225,253,0) 68%);animation:vx-float 18s ease-in-out infinite}
.vx-orb2{width:480px;height:480px;bottom:-160px;right:-140px;background:radial-gradient(circle,rgba(234,211,255,.8) 0%,rgba(234,211,255,0) 68%);animation:vx-float 22s ease-in-out infinite reverse}
.vx-pcell{display:flex}
.vx-pcell>.vx-pcard{width:100%}
.vx-pgrid{display:grid;grid-template-columns:1fr;gap:1.75rem;width:100%;position:relative;z-index:1}
@media (min-width:1024px){.vx-pgrid{grid-template-columns:1fr 1fr;gap:2rem}}
.vx-pcard{--a1:#0174c7;--a2:#00c2c7;position:relative;display:flex;flex-direction:column;overflow:hidden;border:1.5px solid transparent;border-radius:1.75rem;
  background:linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,.9)) padding-box,linear-gradient(135deg,var(--a1),var(--a2)) border-box;
  box-shadow:0 12px 32px -16px rgba(8,42,73,.3);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .5s,opacity .8s ease}
.vx-pcard--vk{--a1:#1e90ff;--a2:#34e04f}
.vx-pcard:hover{box-shadow:0 34px 64px -24px rgba(1,116,199,.45)}
.vx-js .vx-pcard.vx-reveal{opacity:0;transform:translateY(32px)}
.vx-js .vx-pcard.vx-reveal.vx-in{opacity:1;transform:none}
.vx-glow{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(440px circle at var(--mx,50%) var(--my,0%),rgba(1,116,199,.15),transparent 62%)}
.vx-pcard--vk .vx-glow{background:radial-gradient(440px circle at var(--mx,50%) var(--my,0%),rgba(52,224,79,.17),transparent 62%)}
.vx-pcard:hover .vx-glow{opacity:1}
.vx-pvis{background:linear-gradient(135deg,rgba(1,116,199,.09),rgba(0,194,199,.14));padding:1rem 1rem .25rem}
.vx-pcard--vk .vx-pvis{background:linear-gradient(135deg,rgba(30,144,255,.09),rgba(52,224,79,.16))}
.vx-svg{display:block;width:100%;height:auto;max-height:220px}
.vx-pbody{padding:1.5rem 1.75rem 1.9rem;display:flex;flex-direction:column;gap:.9rem;position:relative}
.vx-plogo-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.vx-badge{font-size:.78rem;padding:.25rem .75rem;border-radius:9999px;background:rgba(1,116,199,.1);color:#0174c7;font-weight:600}
.vx-pcard--vk .vx-badge{background:rgba(52,224,79,.16);color:#16851f}
.vx-pname{font-size:1.7rem;font-weight:600;line-height:1.15;color:#31313a}
.vx-pname a{background:linear-gradient(90deg,var(--a1),var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent}
.vx-pname a:hover{filter:brightness(.88)}
.vx-ptag{font-weight:600;color:#31313a}
.vx-pdesc{color:#5b5b72;line-height:1.6}
.vx-pstat{display:flex;align-items:baseline;gap:.55rem}
.vx-num{font-size:2.5rem;font-weight:700;line-height:1;background:linear-gradient(90deg,var(--a1),var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent}
.vx-numl{color:#6c6c89}
.vx-pcta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:.25rem}

/* ---------- animated visuals ---------- */
@keyframes vx-float{0%,100%{transform:translate(0,0)}50%{transform:translate(34px,26px)}}
@keyframes vx-dash{to{stroke-dashoffset:-24}}
@keyframes vx-pulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.22)}}
@keyframes vx-ring{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.8);opacity:0}}
@keyframes vx-move{0%{transform:translateX(0);opacity:0}6%{opacity:1}22%{transform:translateX(0)}34%{transform:translateX(114px)}56%{transform:translateX(114px)}68%{transform:translateX(228px)}90%{transform:translateX(228px);opacity:1}100%{transform:translateX(228px);opacity:0}}
.vx-line{stroke:#0174c7;stroke-opacity:.5;stroke-width:1.6;stroke-dasharray:4 8;animation:vx-dash 1.6s linear infinite}
.vx-node{fill:#fff;stroke:#0174c7;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:vx-pulse 3.2s ease-in-out infinite}
.vx-n1{animation-delay:.4s}.vx-n2{animation-delay:.8s}.vx-n3{animation-delay:1.2s}.vx-n4{animation-delay:1.6s}.vx-n5{animation-delay:2s}.vx-n6{animation-delay:2.4s}.vx-n7{animation-delay:2.8s}
.vx-dot{fill:#00c2c7}
.vx-ring{fill:none;stroke:#0174c7;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:vx-ring 2.4s ease-out infinite}
.vx-svg-t{fill:#fff;font:700 15px Poppins,sans-serif}
.vx-lane{fill:rgba(255,255,255,.8);stroke:#bfe0ff}
.vx-lane-t{fill:#5b5b72;font:600 9px Poppins,sans-serif;letter-spacing:.08em}
.vx-kc{fill:#fff;stroke:#cfe6ff}
.vx-kc-live{stroke:#1e90ff;stroke-width:1.5}
.vx-kbar{fill:#1e90ff;opacity:.75}
.vx-kbar2{fill:#34e04f}
.vx-mv{animation:vx-move 7s ease-in-out infinite}
.vx-mv2{animation-delay:-2.33s}.vx-mv3{animation-delay:-4.66s}

/* ---------- LinkedIn cards ---------- */
.vx-li-strip{display:flex;gap:1.25rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.5rem .25rem 1.25rem;width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.vx-li-card{flex:0 0 min(330px,82vw);scroll-snap-align:start;background:#fff;border:1px solid #e1e4ec;border-radius:1.25rem;padding:1.25rem;display:flex;flex-direction:column;gap:.7rem;transition:transform .3s,box-shadow .3s}
.vx-li-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px -18px rgba(8,42,73,.35)}
.vx-li-top{display:flex;align-items:center;gap:.6rem}
.vx-li-ico{color:#0a66c2;display:inline-flex}
.vx-li-who{font-weight:600;color:#31313a;font-size:.95rem}
.vx-li-date{margin-left:auto;color:#6c6c89;font-size:.82rem}
.vx-tag{width:fit-content;font-size:.74rem;padding:.2rem .65rem;border-radius:9999px;background:#f4e3ff;color:#6607a5;font-weight:600}
.vx-li-txt{color:#5b5b72;line-height:1.55;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;flex:1}
.vx-li-link{color:#0174c7;font-weight:600}
.vx-li-link:hover{text-decoration:underline}

/* ---------- FAQ ---------- */
.vx-faq{display:flex;flex-direction:column;gap:.75rem;max-width:56rem}
.vx-faq-item{background:#fff;border:1px solid #d9dbe4;border-radius:1rem;padding:1rem 1.25rem;transition:border-color .25s,box-shadow .25s}
.vx-faq-item:hover{border-color:#bae1fd}
.vx-faq-item[open]{border-color:#0174c7;box-shadow:0 10px 24px -16px rgba(1,116,199,.5)}
.vx-faq-q{cursor:pointer;font-weight:600;color:#31313a;list-style:none}
.vx-faq-q::-webkit-details-marker{display:none}
.vx-faq-q::after{content:"+";float:right;color:#0174c7;font-weight:700}
.vx-faq-item[open] .vx-faq-q::after{content:"\2212"}
.vx-faq-a{margin-top:.75rem;line-height:1.6}

/* ---------- product pages ---------- */
.vx-hero-grid{display:grid;gap:2rem;align-items:center;width:100%}
@media (min-width:1024px){.vx-hero-grid{grid-template-columns:1.05fr .95fr}}
.vx-hero-copy{display:flex;flex-direction:column;gap:1.1rem;align-items:flex-start}
.vx-hero-vis{background:rgba(255,255,255,.75);border:1px solid #bae1fd;border-radius:1.75rem;padding:1.25rem;box-shadow:0 24px 48px -24px rgba(1,116,199,.4)}
.vx-grid{display:grid;gap:1.25rem;grid-template-columns:1fr;width:100%}
@media (min-width:768px){.vx-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1280px){.vx-grid.vx-g3{grid-template-columns:repeat(3,1fr)}}
.vx-tile{background:#fff;border:1px solid #cfe6ff;border-radius:1.25rem;padding:1.5rem;transition:transform .35s,box-shadow .35s,border-color .35s}
.vx-tile:hover{transform:translateY(-5px);box-shadow:0 22px 40px -22px rgba(1,116,199,.5);border-color:#0174c7}
.vx-tile-n{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;border-radius:.8rem;color:#fff;font-weight:700;margin-bottom:.8rem;background:linear-gradient(135deg,#0174c7,#6607a5)}
.vx-tile h3{font-family:var(--font-poppins),Poppins,sans-serif;font-weight:600;color:#31313a;font-size:1.15rem;margin-bottom:.4rem}
.vx-tile p{color:#6c6c89;line-height:1.55}
.vx-prose p{color:#6c6c89;line-height:1.7;margin-bottom:1rem}
.vx-bg-hero{background:linear-gradient(131deg,#f0f8ff 7.78%,#f6f7f8e0 43.62%,#faf3ff 86.51%)}
.vx-links{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.vx-fit li{margin-bottom:.5rem;color:#5b5b72}
.vx-fit{list-style:none;padding:0;margin:.5rem 0 0}
.vx-fit li::before{content:"\2713";color:#0174c7;font-weight:700;margin-right:.55rem}

.vx-pagevk .vx-tile-n{background:linear-gradient(135deg,#1e90ff,#34e04f)}
.vx-pagevk .vx-line{stroke:#1e90ff}
@media (prefers-reduced-motion:reduce){
 .vx-line,.vx-node,.vx-ring,.vx-mv,.vx-orb{animation:none!important}
 .vx-js .vx-reveal,.vx-js .vx-pcard.vx-reveal{opacity:1!important;transform:none!important;transition:none!important}
 .vx-pcard{transform:none!important}
}

/* keep hover stable when an element lifts away from the pointer (prevents flicker at the bottom edge) */
.vx-tile,.vx-li-card,.vx-chip{position:relative}
.vx-tile::after,.vx-li-card::after,.vx-chip::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}

/* ---------- standard hero (matches Services hero: video bg, word-by-word blur-in, animated gradient) ---------- */
.vx-hero{min-height:80vh}
@keyframes vx-word{to{opacity:1;filter:blur(0);transform:none}}
@keyframes vx-fadeup{to{opacity:1;transform:none}}
@keyframes vx-gt{0%{background-position:0% 50%}100%{background-position:100% 50%}}
.vx-hero .vx-w{display:inline-block;vertical-align:baseline;opacity:0;filter:blur(6px);transform:translateY(15px);animation:vx-word .45s ease forwards}
.vx-hero .vx-fade{opacity:0;transform:translateY(20px);animation:vx-fadeup .8s ease-out forwards}
.vx-gt{display:inline-block;color:transparent;-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(to right,#6607A5,#0174C7,#6607A5,#6607A5);background-size:300% 100%;background-repeat:repeat;animation:vx-gt 4s ease-in-out infinite alternate}
/* intro (prose + product visual) */
.vx-intro{display:grid;gap:2rem;align-items:center;width:100%}
@media (min-width:1024px){.vx-intro{grid-template-columns:1.05fr .95fr}}
.vx-intro-h{text-align:left}
.vx-intro-copy{display:flex;flex-direction:column;gap:1rem}

/* navbar entrance on the static pages (matches the React pages: fade + scale .95 -> 1, .6s, .2s delay) */
@keyframes vx-navin{to{opacity:1;transform:none}}
.vx-navin{opacity:0;transform:scale(.95);animation:vx-navin .6s ease-out .2s forwards}