/* verslosvetaines.lt – pagrindinio puslapio dizaino sistema (v5 – paleidimas į orbitą, 2026-10-14; pagrindas – v4).
   Visos taisyklės apribotos .vsx klase, kad nepaveiktų Kadence temos ir WooCommerce laukų.
   Judesys: tik transform ir opacity; automatinis judesys stabdomas, kai nematomas; prefers-reduced-motion – statiška versija. */

.vsx {
  --vsx-bg: #F7F8FA;
  --vsx-surface: #FFFFFF;
  --vsx-text: #111827;
  --vsx-muted: #475569;
  --vsx-accent: #245BFF;
  --vsx-accent-hover: #1A47D6;
  --vsx-accent-soft: #EAF0FF;
  --vsx-dark: #0B1220;
  --vsx-dark-2: #131D33;
  --vsx-dark-muted: #B8C2D3;
  --vsx-dark-accent: #8FB0FF;
  --vsx-line: #E2E8F0;
  --vsx-focus: #245BFF;
  --vsx-r-sm: 8px;
  --vsx-r-md: 14px;
  --vsx-r-lg: 20px;
  --vsx-shadow: 0 1px 2px rgba(16, 24, 39, .06), 0 8px 24px rgba(16, 24, 39, .06);
  --vsx-shadow-lg: 0 2px 4px rgba(16, 24, 39, .06), 0 28px 60px rgba(16, 24, 39, .16);
  --vsx-max: 1240px;
  --vsx-max-wide: 1440px;
  --vsx-gutter: clamp(20px, 4vw, 40px);
  --vsx-font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  /* Judesio žymės – vienodos visiems komponentams */
  --vsx-ease: cubic-bezier(.22, 1, .36, 1);
  --vsx-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --vsx-t-fast: .18s;
  --vsx-t: .32s;
  --vsx-t-slow: .7s;
  --vsx-slide-ms: 7s;

  background: var(--vsx-bg);
  color: var(--vsx-text);
  font-family: var(--vsx-font);
  font-size: clamp(16px, 0.25vw + 15px, 18px);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.vsx *, .vsx *::before, .vsx *::after { box-sizing: border-box; }
.vsx img { max-width: 100%; height: auto; display: block; }
.vsx :where(a) { color: var(--vsx-accent); text-underline-offset: 3px; }  /* :where – kad komponentų spalvos (mygtukai) nebūtų perrašytos */
.vsx [id] { scroll-margin-top: 96px; }
.vsx :focus-visible { outline: 3px solid var(--vsx-focus); outline-offset: 3px; border-radius: 6px; }
.vsx-dark :focus-visible { outline-color: #fff; }

.vsx-wrap { width: 100%; max-width: var(--vsx-max); margin: 0 auto; padding: 0 var(--vsx-gutter); }
.vsx-wrap--wide { max-width: var(--vsx-max-wide); }
.vsx-section { padding: clamp(64px, 9vw, 128px) 0; position: relative; }
.vsx-eyebrow { font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--vsx-accent); margin: 0 0 14px; }
.vsx h1, .vsx h2, .vsx h3 { color: var(--vsx-text); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; margin: 0; }
.vsx h1 { font-size: clamp(40px, 4.9vw, 74px); letter-spacing: -0.035em; line-height: 1.02; }
.vsx h2 { font-size: clamp(30px, 3.6vw, 48px); }
.vsx h3 { font-size: clamp(20px, 1.4vw, 23px); letter-spacing: -0.01em; line-height: 1.25; }
.vsx p { margin: 0; }
.vsx-lead { font-size: clamp(18px, 1.1vw + 12px, 21px); color: var(--vsx-muted); max-width: 32em; }
.vsx-head { display: grid; gap: 16px; max-width: 46rem; margin-bottom: clamp(32px, 4vw, 56px); }
.vsx-head p { color: var(--vsx-muted); max-width: 38em; }
.vsx-head--split { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); align-items: end; gap: 16px 64px; }
@media (max-width: 900px) { .vsx-head--split { grid-template-columns: 1fr; }}

/* ---------- Mygtukai ---------- */
.vsx-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px;
  border-radius: var(--vsx-r-sm); border: 1.5px solid transparent; font: 600 16px/1.2 var(--vsx-font); text-decoration: none; cursor: pointer;
  transition: transform var(--vsx-t) var(--vsx-ease); }
.vsx-btn svg { width: 18px; height: 18px; flex: none; transition: transform var(--vsx-t) var(--vsx-ease); }
.vsx-btn:hover { transform: translateY(-2px); }
.vsx-btn:hover svg { transform: translateY(2px); }
.vsx-btn:active { transform: translateY(0) scale(.98); transition-duration: var(--vsx-t-fast); }
.vsx-btn--primary { background: var(--vsx-accent); color: #fff; }
.vsx-btn--primary:hover { background: var(--vsx-accent-hover); box-shadow: 0 10px 24px rgba(36, 91, 255, .28); }
.vsx-btn--ghost { background: rgba(255,255,255,.6); color: var(--vsx-text); border-color: #64748B; }
.vsx-btn--ghost:hover { border-color: var(--vsx-text); background: #fff; }
.vsx-btn--light { background: #fff; color: var(--vsx-dark); }
.vsx-btn--light:hover { background: #E8EEFF; }
.vsx-btn--outline-light { color: #fff; border-color: rgba(255,255,255,.4); background: transparent; }
.vsx-btn--outline-light:hover { border-color: #fff; }
.vsx-btn--sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.vsx-textlink { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; position: relative; }
.vsx-textlink::after { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--vsx-t) var(--vsx-ease); }
.vsx-textlink:hover::after { transform: scaleX(1); }

/* ---------- A. Antraštė ---------- */
.vsx-header { position: sticky; top: 0; z-index: 50; background: rgba(247, 248, 250, .94); border-bottom: 1px solid var(--vsx-line); }
@supports (backdrop-filter: blur(8px)) { .vsx-header { background: rgba(247, 248, 250, .82); backdrop-filter: blur(10px); }}
.vsx-header__in { display: flex; align-items: center; gap: 28px; min-height: 76px; }
.vsx-logo { display: inline-flex; flex: none; }
.vsx-logo img { width: 120px; height: 48px; object-fit: contain; }
.vsx-nav { margin-left: auto; }
.vsx-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.vsx-nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--vsx-r-sm); color: var(--vsx-text); text-decoration: none; font-weight: 500; font-size: 16px; transition: none; }
.vsx-nav a:hover { background: #EBEFF6; }
.vsx-header__actions { display: flex; align-items: center; gap: 10px; }
.vsx-cart { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--vsx-r-sm); color: var(--vsx-text); transition: none; }
.vsx-cart:hover { background: #EBEFF6; }
.vsx-cart svg { width: 22px; height: 22px; }
.vsx-menu-btn { display: none; }
.vsx-nav__cta { display: none; }
.vsx-nav__cta .vsx-btn { width: 100%; }

@media (max-width: 960px) {
  .vsx-header__in { gap: 12px; min-height: 64px; flex-wrap: wrap; }
  .vsx-logo img { width: 100px; height: 40px; }
  .vsx-header__cta { display: none; }
  /* Be JavaScript meniu lieka matomas po antrašte. */
  .vsx-nav { order: 3; flex-basis: 100%; margin: 0 0 10px; }
  .vsx-header__actions { margin-left: auto; }
  .vsx-nav ul { flex-wrap: wrap; }
  /* Su JavaScript – išskleidžiamas meniu. */
  .vsx.js .vsx-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--vsx-r-sm); border: 1.5px solid #64748B; background: #fff; color: var(--vsx-text); cursor: pointer; transition: none; }
  .vsx.js .vsx-menu-btn svg { width: 22px; height: 22px; }
  .vsx.js .vsx-menu-btn path { transition: transform var(--vsx-t) var(--vsx-ease), opacity var(--vsx-t-fast); transform-origin: 12px 12px; }
  .vsx.js .vsx-menu-btn[aria-expanded="true"] .l1 { transform: translateY(5px) rotate(45deg); }
  .vsx.js .vsx-menu-btn[aria-expanded="true"] .l2 { opacity: 0; }
  .vsx.js .vsx-menu-btn[aria-expanded="true"] .l3 { transform: translateY(-5px) rotate(-45deg); }
  .vsx.js .vsx-nav { position: absolute; left: 0; right: 0; top: 100%; margin: 0; background: var(--vsx-surface); border-bottom: 1px solid var(--vsx-line); box-shadow: var(--vsx-shadow-lg); padding: 8px var(--vsx-gutter) 20px;
    visibility: hidden; opacity: 0; transform: translateY(-10px); transition: opacity var(--vsx-t) var(--vsx-ease), transform var(--vsx-t) var(--vsx-ease), visibility 0s linear var(--vsx-t); }
  .vsx.js .vsx-nav.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity var(--vsx-t) var(--vsx-ease), transform var(--vsx-t) var(--vsx-ease); }
  .vsx.js .vsx-nav ul { flex-direction: column; gap: 2px; }
  .vsx.js .vsx-nav a { min-height: 52px; font-size: 18px; padding: 0 12px; }
  .vsx.js .vsx-nav li, .vsx.js .vsx-nav .vsx-nav__cta { opacity: 0; transform: translateY(8px); transition: opacity var(--vsx-t) var(--vsx-ease), transform var(--vsx-t) var(--vsx-ease); }
  .vsx.js .vsx-nav.is-open li, .vsx.js .vsx-nav.is-open .vsx-nav__cta { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 45ms + 60ms); }
  .vsx.js .vsx-nav .vsx-nav__cta { display: flex; margin-top: 12px; --i: 4; }}

/* ---------- B. Pirmoji sekcija ---------- */
.vsx-hero { position: relative; isolation: isolate; padding: clamp(28px, 3vw, 44px) 0 clamp(64px, 7vw, 104px); overflow: hidden; }
.vsx-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.vsx-hero__copy { display: grid; gap: 24px; }
.vsx-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.vsx-hero__facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 6px 0 0; padding: 18px 0 0; border-top: 1px solid var(--vsx-line); list-style: none; color: var(--vsx-muted); font-size: 15px; }
.vsx-hero__facts li { display: inline-flex; align-items: center; gap: 8px; }
.vsx-hero__facts strong { color: var(--vsx-text); font-weight: 600; }
.vsx-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--vsx-accent); flex: none; }

/* Geometrinis fonas – tik transform; sustabdomas, kai sekcija nematoma. */
.vsx-geo { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.vsx-geo > span { position: absolute; display: block; }
.vsx-geo__grid { inset: -1px; background-image: linear-gradient(rgba(17,24,39,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(17,24,39,.055) 1px, transparent 1px); background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 75% at 70% 40%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse 70% 75% at 70% 40%, #000 25%, transparent 75%); }
.vsx-geo__glow { width: 900px; height: 900px; right: -220px; top: -260px; border-radius: 50%; background: radial-gradient(circle, rgba(36,91,255,.16) 0%, rgba(36,91,255,.06) 38%, transparent 66%); }
.vsx-geo__ring { width: 560px; height: 560px; right: 6%; top: 8%; border-radius: 50%; border: 1.5px dashed rgba(36,91,255,.28); }
.vsx-geo__square { width: 180px; height: 180px; left: -70px; top: 62%; border: 1.5px solid rgba(17,24,39,.12); border-radius: 22px; }
.vsx-geo__bar { width: 260px; height: 10px; left: 3%; top: 5%; border-radius: 10px; background: linear-gradient(90deg, var(--vsx-accent), rgba(36,91,255,0)); opacity: .5; }
@keyframes vsx-spin { to { transform: rotate(360deg); } }
@keyframes vsx-drift-a { 0% { transform: translate3d(0,0,0); } 50% { transform: translate3d(-60px, 40px, 0); } 100% { transform: translate3d(0,0,0); } }
@keyframes vsx-drift-b { 0% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(30px,-36px,0) rotate(45deg); } 100% { transform: translate3d(0,0,0) rotate(90deg); } }
@keyframes vsx-drift-c { 0%,100% { transform: translate3d(0,0,0) scaleX(1); } 50% { transform: translate3d(40px,0,0) scaleX(.6); } }

/* Demo pristatymas */
.vsx-show { position: relative; min-width: 0; }
.vsx-show__stage { position: relative; padding: 0 0 5% 0; }
.vsx-browser { position: relative; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid #D9E0EA; box-shadow: var(--vsx-shadow-lg); }
.vsx-browser__bar { display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--vsx-line); background: #FBFCFD; }
.vsx-browser__dots { display: flex; gap: 6px; flex: none; }
.vsx-browser__dots i { width: 10px; height: 10px; border-radius: 50%; background: #D5DBE5; display: block; }
.vsx-browser__url { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; color: var(--vsx-muted); background: #F1F4F8; border-radius: 7px; padding: 4px 12px; white-space: nowrap; overflow: hidden; }
.vsx-browser__url svg { width: 12px; height: 12px; flex: none; }
.vsx-show__url { display: inline-block; transition: opacity var(--vsx-t) var(--vsx-ease), transform var(--vsx-t) var(--vsx-ease); }
.vsx-show__url.is-swap { opacity: 0; transform: translateY(-4px); }
.vsx-browser__view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #EEF1F6; container-type: size; }
.vsx-handset { position: absolute; right: -3%; bottom: 0; width: 23%; border-radius: 26px; padding: 7px; background: #0E1626; box-shadow: var(--vsx-shadow-lg), inset 0 0 0 1px rgba(255,255,255,.08); }
.vsx-handset::before { content: ""; position: absolute; z-index: 2; top: 12px; left: 50%; width: 30%; height: 6px; border-radius: 6px; background: #0E1626; transform: translateX(-50%); }
.vsx-handset__view { position: relative; aspect-ratio: 9 / 19.5; overflow: hidden; border-radius: 19px; background: #EEF1F6; container-type: size; }

.vsx-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.vsx-slide.is-active { opacity: 1; visibility: visible; }
.vsx-pan { width: 100%; height: auto; max-width: none; }

/* Pavadinimas + nuoroda: visos etiketės vienoje gardelės ląstelėje – keičiantis aukštis nešokinėja. */
.vsx-show__labels { display: grid; margin-top: 10px; }
.vsx-show__label { grid-area: 1 / 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; opacity: 0; visibility: hidden; }
.vsx-show__label.is-active { opacity: 1; visibility: visible; }
.vsx-show__kicker { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--vsx-muted); }
.vsx-show__label strong { font-size: 18px; font-weight: 700; color: var(--vsx-text); }
.vsx-show__label a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 600; text-decoration: none; }
.vsx-show__label a svg { width: 16px; height: 16px; transition: transform var(--vsx-t) var(--vsx-ease); }
.vsx-show__label a:hover svg { transform: translate(2px, -2px); }
.vsx-show__label a:hover { text-decoration: underline; }

.vsx-show__bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.vsx-show__tabs { display: flex; gap: 6px; flex: 1; min-width: 0; padding: 4px; background: #EBEFF5; border-radius: 12px; }
.vsx-show__tab { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 10px; border-radius: 9px; overflow: hidden;
  color: var(--vsx-muted); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; transition: none; }
.vsx-show__tab span { overflow: hidden; text-overflow: ellipsis; }
.vsx-show__tab:hover { color: var(--vsx-text); }
.vsx-show__tab.is-active { background: #fff; color: var(--vsx-text); box-shadow: 0 1px 2px rgba(16,24,39,.08), 0 4px 12px rgba(16,24,39,.06); }
.vsx-show__prog { position: absolute; left: 10px; right: 10px; bottom: 5px; height: 3px; border-radius: 3px; background: var(--vsx-accent); transform: scaleX(0); transform-origin: left; opacity: 0; }
.vsx-show__pause { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 16px; border-radius: 12px; border: 1.5px solid #64748B; background: #fff; color: var(--vsx-text); font: 600 15px/1 var(--vsx-font); cursor: pointer; transition: transform var(--vsx-t) var(--vsx-ease); }
.vsx-show__pause[hidden] { display: none; }  /* be JS ir su sumažintu judesiu mygtukas nereikalingas */
.vsx-show__pause:hover { border-color: var(--vsx-text); }
.vsx-show__pause:active { transform: scale(.97); }
.vsx-show__pause svg { width: 16px; height: 16px; }
.vsx-show__pause .vsx-ico-play { display: none; }
.vsx-show:not(.is-auto) .vsx-show__pause .vsx-ico-play { display: block; }
.vsx-show:not(.is-auto) .vsx-show__pause .vsx-ico-pause { display: none; }

/* Animacijos (tik su JS ir tik kai judesys leidžiamas) */
@media (prefers-reduced-motion: no-preference) {
  .vsx.js .vsx-geo__glow { animation: vsx-drift-a 26s var(--vsx-ease-in-out) infinite; }
  .vsx.js .vsx-geo__ring { animation: vsx-spin 90s linear infinite; }
  .vsx.js .vsx-geo__square { animation: vsx-drift-b 34s var(--vsx-ease-in-out) infinite alternate; }
  .vsx.js .vsx-geo__bar { animation: vsx-drift-c 18s var(--vsx-ease-in-out) infinite; }

  .vsx.js .vsx-slide { transition: opacity var(--vsx-t-slow) var(--vsx-ease), transform var(--vsx-t-slow) var(--vsx-ease), visibility 0s linear var(--vsx-t-slow); transform: scale(1.025); }
  .vsx.js .vsx-slide.is-active { transform: none; transition: opacity var(--vsx-t-slow) var(--vsx-ease), transform 1.1s var(--vsx-ease), visibility 0s; }
  /* Lėta slinktis demo lange: perstumiamas tik paveikslėlis, ne puslapis (100cqh = lango aukštis). */
  .vsx.js .vsx-slide.is-active .vsx-pan,
  .vsx.js .vsx-slide.is-leaving .vsx-pan { animation: vsx-pan var(--vsx-slide-ms) var(--vsx-ease-in-out) forwards; will-change: transform; }
  .vsx.js .vsx-show__label { transition: opacity var(--vsx-t) var(--vsx-ease), transform var(--vsx-t) var(--vsx-ease), visibility 0s linear var(--vsx-t); transform: translateY(6px); }
  .vsx.js .vsx-show__label.is-active { transform: none; transition: opacity var(--vsx-t) var(--vsx-ease) .12s, transform var(--vsx-t) var(--vsx-ease) .12s, visibility 0s; }
  .vsx.js .vsx-show.is-auto .vsx-show__tab.is-active .vsx-show__prog { opacity: 1; animation: vsx-prog var(--vsx-slide-ms) linear forwards; }

  /* Pirmojo ekrano įėjimas (vieną kartą) */
  .vsx.js .vsx-in { animation: vsx-rise .8s var(--vsx-ease) both; animation-delay: calc(var(--d, 0) * 80ms + 60ms); }
  .vsx.js .vsx-show__stage .vsx-browser { animation: vsx-rise 1s var(--vsx-ease) both .15s; }
  .vsx.js .vsx-show__stage .vsx-handset { animation: vsx-rise-phone 1.1s var(--vsx-ease) both .45s; }
}
@keyframes vsx-pan { 0%, 12% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(0, calc(-100% + 100cqh), 0); } }
@keyframes vsx-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes vsx-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes vsx-rise-phone { from { opacity: 0; transform: translate(18px, 36px); } to { opacity: 1; transform: none; } }

/* Pauzė: naudotojo mygtukas ar nematoma sekcija / neaktyvus skirtukas – sustoja viskas;
   užvedus pelę ar esant fokusui (is-held) – sustoja tik automatinis demo keitimasis. */
.vsx-show.is-stopped .vsx-pan, .vsx-show.is-offscreen .vsx-pan,
.vsx-show.is-stopped .vsx-show__prog, .vsx-show.is-held .vsx-show__prog, .vsx-show.is-offscreen .vsx-show__prog { animation-play-state: paused !important; }
.vsx-hero.is-offscreen .vsx-geo > span, .vsx.is-tab-hidden .vsx-geo > span { animation-play-state: paused !important; }

@media (max-width: 1100px) {
  .vsx-hero__grid { grid-template-columns: 1fr; }
  .vsx-hero__copy { max-width: 46rem; }
  .vsx-show { max-width: 860px; }}
@media (max-width: 640px) {
  .vsx-hero__actions .vsx-btn { width: 100%; }
  .vsx-browser { border-radius: 12px; }
  .vsx-browser__bar { height: 30px; gap: 8px; padding: 0 10px; }
  .vsx-browser__dots i { width: 7px; height: 7px; }
  .vsx-browser__url { font-size: 11px; padding: 2px 8px; }
  .vsx-show__stage { padding-bottom: 16%; }
  .vsx-handset { width: 30%; right: -2%; border-radius: 18px; padding: 4px; }
  .vsx-handset::before { top: 8px; height: 4px; }
  .vsx-handset__view { border-radius: 14px; }
  .vsx-show__tab { font-size: 14px; padding: 0 6px; }
  .vsx-show__pause { padding: 0 14px; }
  .vsx-show__pause-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* Telefone mažiau efektų: be judančio fono ir be telefono slinkties. */
  .vsx.js .vsx-geo > span { animation: none !important; }
  .vsx-geo__ring { width: 320px; height: 320px; right: -120px; top: 4%; }
  .vsx-geo > .vsx-geo__square, .vsx-geo > .vsx-geo__bar { display: none; }
  .vsx.js .vsx-handset .vsx-pan { animation: none !important; }}

/* ---------- C. Pavyzdžiai ---------- */
.vsx-catalog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.vsx-card { display: flex; flex-direction: column; background: var(--vsx-surface); border: 1px solid var(--vsx-line); border-radius: var(--vsx-r-md); overflow: hidden;
  transition: transform var(--vsx-t) var(--vsx-ease); }
.vsx-card__media { position: relative; display: block; aspect-ratio: 8 / 5; overflow: hidden; background: #EEF1F6; border-bottom: 1px solid var(--vsx-line); container-type: size; }
.vsx-card__still { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.vsx-card__tall { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; opacity: 0; }
.vsx-tag { position: absolute; z-index: 2; left: 14px; top: 14px; background: rgba(255,255,255,.95); color: var(--vsx-text); font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--vsx-line); }
.vsx-card__open { position: absolute; z-index: 2; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; border-radius: 999px; background: var(--vsx-dark); color: #fff; font-size: 13px; font-weight: 600; }
.vsx-card__open svg { width: 14px; height: 14px; }
.vsx-card__body { display: grid; gap: 10px; padding: 22px 22px 8px; flex: 1; align-content: start; }
.vsx-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.vsx-price { font-weight: 700; font-size: 20px; white-space: nowrap; color: var(--vsx-text); text-align: right; }
.vsx-price del { display: block; font-size: 15px; font-weight: 400; color: var(--vsx-muted); }
.vsx-price ins { text-decoration: none; }
.vsx-card__body p { color: var(--vsx-muted); font-size: 16px; }
.vsx-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 14px 22px 20px; }
.vsx-card__actions .vsx-btn { flex: 1 1 auto; }
.vsx-catalog__foot { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; color: var(--vsx-muted); font-size: 15px; }
@media (max-width: 1024px) { .vsx-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }}
@media (max-width: 640px) { .vsx-catalog { grid-template-columns: 1fr; }}

/* Kompiuteryje (pelė): užvedus – švelni demo slinktis kortelėje. Telefone – aiški „Atidaryti demo“ žyma. */
@media (hover: hover) and (pointer: fine) {
  .vsx-card__open { opacity: 0; transform: translateY(6px); transition: opacity var(--vsx-t) var(--vsx-ease), transform var(--vsx-t) var(--vsx-ease); }
  .vsx-card:hover { transform: translateY(-4px); box-shadow: var(--vsx-shadow-lg); border-color: #CDD6E4; }
  .vsx-card:hover .vsx-card__open { opacity: 1; transform: none; }
  .vsx-card:focus-within { box-shadow: var(--vsx-shadow-lg); border-color: #CDD6E4; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .vsx-card__tall { transition: opacity .35s var(--vsx-ease), transform 1.2s var(--vsx-ease); }
  .vsx-card.is-ready:hover .vsx-card__tall { opacity: 1; transform: translate3d(0, calc(-100% + 100cqh), 0); transition: opacity .35s var(--vsx-ease), transform 6s var(--vsx-ease-in-out) .15s; }}

/* ---------- D. Kas pritaikoma (stipri tamsi sekcija) ---------- */
.vsx-dark { background: var(--vsx-dark); color: #fff; overflow: hidden; isolation: isolate; }
.vsx-dark h2, .vsx-dark h3 { color: #fff; }
.vsx-dark .vsx-eyebrow { color: var(--vsx-dark-accent); }
.vsx-dark .vsx-head p { color: var(--vsx-dark-muted); }
.vsx-dark__lines { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 85% 20%, rgba(36,91,255,.28), transparent 70%),
              linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 64px 64px,
              linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 64px 64px; }
.vsx .vsx-h2-xl { font-size: clamp(38px, 5vw, 72px); letter-spacing: -0.035em; line-height: 1.02; }
.vsx-h2-xl em { font-style: normal; color: var(--vsx-dark-accent); }
.vsx-fit { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.vsx-fit__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.12); }
.vsx-fit__list li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.vsx-fit__num { font-size: 15px; font-weight: 600; color: var(--vsx-dark-accent); padding-top: 3px; }
.vsx-fit__list p { color: var(--vsx-dark-muted); margin-top: 6px; font-size: 16px; }
.vsx-fit__side { display: grid; gap: 32px; }
.vsx-phones { position: relative; margin: 0; height: clamp(380px, 38vw, 520px); }
/* Vienas statiškas švytėjimas vietoj šešėlių ant judančių kadrų (šešėliai sukeldavo ~170 ms strigtį). */
.vsx-phones::before { content: ""; position: absolute; left: 4%; right: 4%; bottom: -6%; height: 40%; background: radial-gradient(ellipse at center, rgba(36,91,255,.35), transparent 70%); }
.vsx-phones__p { position: absolute; width: 46%; border-radius: 22px; border: 6px solid #22304D; background: #1B2740; }
.vsx-phones__p--1 { left: 0; top: 10%; transform: rotate(-7deg); }
.vsx-phones__p--2 { left: 27%; top: 0; z-index: 2; }
.vsx-phones__p--3 { right: 0; top: 12%; transform: rotate(7deg); }
.vsx-aside { background: var(--vsx-dark-2); border: 1px solid rgba(255,255,255,.1); border-radius: var(--vsx-r-md); padding: clamp(22px, 3vw, 32px); }
.vsx-aside h3 { font-size: 20px; }
.vsx-aside p { color: var(--vsx-dark-muted); margin-top: 10px; font-size: 16px; }
.vsx-aside ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.vsx-aside li { display: flex; gap: 10px; color: #E6EBF3; font-size: 16px; }
.vsx-aside li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--vsx-dark-accent); margin-top: 10px; flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .vsx.js .vsx-phones .vsx-phones__p { transition: transform 1s var(--vsx-ease), opacity .8s var(--vsx-ease); }
  .vsx.js .vsx-phones.vsx-reveal { opacity: 1; transform: none; }
  .vsx.js .vsx-phones:not(.is-in) .vsx-phones__p--1 { transform: translate(40px, 60px) rotate(0deg); opacity: 0; }
  .vsx.js .vsx-phones:not(.is-in) .vsx-phones__p--2 { transform: translateY(80px); opacity: 0; }
  .vsx.js .vsx-phones:not(.is-in) .vsx-phones__p--3 { transform: translate(-40px, 60px) rotate(0deg); opacity: 0; }
  .vsx.js .vsx-phones.is-in .vsx-phones__p--2 { transition-delay: .1s; }
  .vsx.js .vsx-phones.is-in .vsx-phones__p--3 { transition-delay: .2s; }}
@media (max-width: 900px) {
  .vsx-fit { grid-template-columns: 1fr; }
  .vsx-phones { height: clamp(300px, 80vw, 440px); max-width: 520px; width: 100%; }}

/* ---------- E. Kaip vyksta (išryškinama slenkant) ---------- */
.vsx-steps-wrap { position: relative; --p: 1; }
.vsx-steps__track { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--vsx-line); border-radius: 2px; overflow: hidden; }
.vsx-steps__fill { position: absolute; inset: 0; background: var(--vsx-accent); transform: scaleX(var(--p)); transform-origin: left; }
.vsx-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vsx-steps li { padding: 28px 24px 8px 0; display: grid; gap: 14px; align-content: start; }
.vsx-steps li + li { padding-left: 24px; border-left: 1px solid var(--vsx-line); }
.vsx-steps li > div { display: grid; gap: 8px; }
.vsx-steps__n { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; font-size: 24px; font-weight: 700; color: #fff; background: var(--vsx-accent); }
.vsx-steps p { color: var(--vsx-muted); font-size: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .vsx.js .vsx-steps li > div { transition: opacity .5s var(--vsx-ease), transform .5s var(--vsx-ease); }
  .vsx.js .vsx-steps__n { transition: transform .5s var(--vsx-ease); }
  .vsx.js .vsx-steps-wrap.is-live li:not(.is-on) > div { opacity: .4; transform: translateY(8px); }
  .vsx.js .vsx-steps-wrap.is-live li:not(.is-on) .vsx-steps__n { background: #E2E8F0; color: #475569; transform: scale(.82); }
  .vsx.js .vsx-steps__fill { transition: transform .45s var(--vsx-ease); }}
@media (max-width: 900px) {
  .vsx-steps-wrap { padding-left: 28px; }
  .vsx-steps__track { left: 0; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; }
  .vsx-steps__fill { transform: scaleY(var(--p)); transform-origin: top; }
  .vsx-steps { grid-template-columns: 1fr; }
  .vsx-steps li, .vsx-steps li + li { padding: 0 0 32px; border-left: 0; grid-template-columns: 56px 1fr; gap: 16px; }}

/* ---------- F. Pasitikėjimas ---------- */
.vsx-trust { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; background: var(--vsx-surface); border: 1px solid var(--vsx-line); border-radius: var(--vsx-r-lg); padding: clamp(24px, 4vw, 48px); }
.vsx-trust__links { display: grid; gap: 12px; }
.vsx-trust__link { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 0 20px; border: 1px solid var(--vsx-line); border-radius: var(--vsx-r-md); text-decoration: none; color: var(--vsx-text); font-weight: 600; transition: transform var(--vsx-t) var(--vsx-ease); }
.vsx-trust__link span { color: var(--vsx-muted); font-weight: 400; font-size: 15px; }
.vsx-trust__link:hover { border-color: var(--vsx-accent); background: var(--vsx-accent-soft); transform: translateX(4px); }
.vsx-trust p + p { margin-top: 12px; }
.vsx-trust .vsx-note { color: var(--vsx-muted); font-size: 15px; }
@media (max-width: 900px) { .vsx-trust { grid-template-columns: 1fr; }}

/* ---------- G. DUK ---------- */
.vsx-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.vsx-faq__list { border-top: 1px solid var(--vsx-line); }
.vsx-faq details { border-bottom: 1px solid var(--vsx-line); }
.vsx-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px 0; font-weight: 600; font-size: 18px; transition: none; }
.vsx-faq summary::-webkit-details-marker { display: none; }
.vsx-faq summary:hover { color: var(--vsx-accent); }
.vsx-faq__icon { width: 30px; height: 30px; flex: none; border-radius: 50%; border: 1.5px solid #94A3B8; position: relative; color: var(--vsx-text); transition: transform var(--vsx-t) var(--vsx-ease); }
.vsx-faq__icon::before, .vsx-faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.vsx-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform var(--vsx-t) var(--vsx-ease); }
.vsx-faq summary:hover .vsx-faq__icon { border-color: var(--vsx-accent); }
.vsx-faq details[open] .vsx-faq__icon { border-color: var(--vsx-accent); background: var(--vsx-accent); color: #fff; transform: rotate(180deg); }
.vsx-faq details[open] .vsx-faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.vsx-faq__a { padding: 0 44px 22px 0; color: var(--vsx-muted); }
.vsx-faq__a p + p { margin-top: 10px; }
@media (max-width: 900px) { .vsx-faq { grid-template-columns: 1fr; } .vsx-faq__a { padding-right: 0; }}

/* ---------- H. Galutinis kontaktas ---------- */
.vsx-cta { position: relative; overflow: hidden; isolation: isolate; background: var(--vsx-dark); border-radius: var(--vsx-r-lg); color: #fff; padding: clamp(32px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.vsx-cta::before { content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; right: -160px; top: -200px; border-radius: 50%; border: 1.5px dashed rgba(143,176,255,.3); }
.vsx-cta h2 { color: #fff; }
.vsx-cta p { color: var(--vsx-dark-muted); margin-top: 14px; max-width: 32em; }
.vsx-cta__actions { display: grid; gap: 12px; }
.vsx-cta__actions .vsx-btn { width: 100%; }
.vsx-cta__mail { color: #fff; text-align: center; font-size: 15px; }
.vsx-cta__mail a { color: #fff; }
@media (max-width: 900px) { .vsx-cta { grid-template-columns: 1fr; }}

/* ---------- I. Poraštė ---------- */
.vsx-footer { border-top: 1px solid var(--vsx-line); padding: 56px 0 28px; font-size: 15px; color: var(--vsx-muted); }
.vsx-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.vsx-footer h3 { font-size: 15px; margin-bottom: 12px; letter-spacing: 0; }
.vsx-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.vsx-footer a { color: var(--vsx-text); text-decoration: none; display: inline-flex; min-height: 36px; align-items: center; transition: none; }
.vsx-footer a:hover { color: var(--vsx-accent); text-decoration: underline; }
.vsx-footer__bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--vsx-line); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
@media (max-width: 900px) { .vsx-footer__grid { grid-template-columns: 1fr 1fr; } .vsx-footer a { min-height: 44px; }}
@media (max-width: 520px) { .vsx-footer__grid { grid-template-columns: 1fr; }}

/* ---------- Pasirodymas slenkant ---------- */
/* Be JS viskas matoma. Su JS elementai paslepiami tik iki pasirodymo ekrane. */
@media (prefers-reduced-motion: no-preference) {
  .vsx.js .vsx-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--vsx-ease), transform .7s var(--vsx-ease); transition-delay: calc(var(--i, 0) * 80ms); }
  .vsx.js .vsx-reveal.is-in { opacity: 1; transform: none; }
}
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .vsx.js .vsx-reveal { transform: translateY(12px); transition-duration: .5s; transition-delay: 0ms; }}

/* =================================================================
   V3 – judesio sustiprinimai. Tik transform ir opacity; jokių bibliotekų.
   ================================================================= */

/* 1. Pirmojo ekrano mėlyni šviesos gradientai: labai lėtai, tik transform. */
.vsx-aura { border-radius: 50%; }
.vsx-aura--1 { width: 980px; height: 980px; right: -260px; top: -340px; background: radial-gradient(circle, rgba(36,91,255,.20) 0%, rgba(36,91,255,.07) 40%, transparent 68%); }
.vsx-aura--2 { width: 760px; height: 760px; left: -280px; top: 34%; background: radial-gradient(circle, rgba(96,165,250,.20) 0%, rgba(96,165,250,.06) 42%, transparent 68%); }
.vsx-aura--3 { width: 640px; height: 640px; left: 36%; bottom: -400px; background: radial-gradient(circle, rgba(29,78,216,.14) 0%, transparent 66%); }
@keyframes vsx-aura-1 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-90px, 60px, 0) scale(1.08); } }
@keyframes vsx-aura-2 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(80px, -50px, 0) scale(1.12); } }
@keyframes vsx-aura-3 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-70px, -60px, 0) scale(.94); } }

/* 2. Įėjimas: žyma → H1 → tekstas → mygtukai → faktai → demonstracija. */
@keyframes vsx-rise-v3 { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } }

/* 3. Darbų kortelės: pakilimas, minkštas šešėlis (pseudo-elemento opacity), pelės valdomas demo vaizdas. */
.vsx-card { position: relative; overflow: visible; isolation: isolate; transition: transform .45s var(--vsx-ease), translate .45s var(--vsx-ease); }
/* Pakilimas – atskira `translate` savybė, kad nekonfliktuotų su pasirodymo `transform`. */
@media (prefers-reduced-motion: no-preference) {
  .vsx.js .vsx-card.vsx-reveal { transition: opacity .7s var(--vsx-ease), transform .7s var(--vsx-ease), translate .45s var(--vsx-ease);
    transition-delay: calc(var(--i, 0) * 80ms), calc(var(--i, 0) * 80ms), 0s, 0s; }
}
.vsx-card::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: 0 22px 44px -14px rgba(16, 24, 39, .24), 0 4px 12px rgba(16, 24, 39, .06); opacity: 0; transition: opacity .45s var(--vsx-ease); }
.vsx-card__media { border-radius: 13px 13px 0 0; }
.vsx-card__tall { pointer-events: none; }

/* 5. Kainos dalis: subtilus šviesos perėjimas užvedus (vieną kartą, ne nuolat). */
.vsx-card__body { position: relative; overflow: hidden; }
.vsx-card__body::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 55%; pointer-events: none;
  background: linear-gradient(105deg, transparent 0%, rgba(36,91,255,.075) 48%, transparent 100%);
  opacity: 0; transform: translate3d(-110%, 0, 0); transition: opacity .2s var(--vsx-ease), transform 0s linear .2s; }
.vsx-card__body > * { position: relative; }
/* Paruošta, bet nepritaikyta: rekomenduojamo pasiūlymo ramus išryškinimas (laukia sprendimo, kuris variantas). */
.vsx-card--rek { border-color: #9DB7FF; }
.vsx-card--rek .vsx-card__body { background: linear-gradient(180deg, #F4F7FF 0%, #fff 75%); }

/* 4. Procesas: linija tarp keturių žingsnių pildosi slenkant, žingsniai išryškėja paeiliui. */
.vsx-steps__track { display: none; }
.vsx-steps li, .vsx-steps li + li { position: relative; padding: 28px 24px 8px 0; border-left: 0; }
.vsx-steps__n { position: relative; z-index: 1; }
.vsx-steps li:not(:last-child)::before,
.vsx-steps li:not(:last-child)::after { content: ""; position: absolute; top: 55px; left: 64px; right: 8px; height: 2px; border-radius: 2px; background: var(--vsx-line); }
.vsx-steps li:not(:last-child)::after { background: var(--vsx-accent); transform-origin: left center; transform: scaleX(var(--f, 1)); }
@media (max-width: 900px) {
  .vsx-steps-wrap { padding-left: 0; }
  .vsx-steps li, .vsx-steps li + li { padding: 0 0 32px; }
  .vsx-steps li:not(:last-child)::before,
  .vsx-steps li:not(:last-child)::after { top: 64px; bottom: 8px; left: 27px; right: auto; width: 2px; height: auto; }
  .vsx-steps li:not(:last-child)::after { transform-origin: center top; transform: scaleY(var(--f, 1)); }}

/* 6. Baigiamasis CTA: lėtas, beveik nepastebimas gradientų judėjimas. */
.vsx-cta::after { content: ""; position: absolute; z-index: -2; inset: -40%; pointer-events: none;
  background: radial-gradient(38% 46% at 32% 42%, rgba(36,91,255,.30), transparent 70%), radial-gradient(34% 42% at 72% 66%, rgba(96,165,250,.14), transparent 70%); }
@keyframes vsx-cta-drift { from { transform: translate3d(-4%, -3%, 0) rotate(0deg); } to { transform: translate3d(4%, 3%, 0) rotate(8deg); } }
.vsx-cta.is-offscreen::after, .vsx.is-tab-hidden .vsx-cta::after { animation-play-state: paused !important; }

/* Mygtukas: šešėlis per pseudo-elemento opacity (ne box-shadow animacija). */
.vsx-btn--primary:hover { box-shadow: none; }
.vsx-btn--primary::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 10px 24px rgba(36, 91, 255, .28); opacity: 0; transition: opacity var(--vsx-t) var(--vsx-ease); }
.vsx-btn--primary:hover::after { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .vsx.js .vsx-aura--1 { animation: vsx-aura-1 48s var(--vsx-ease-in-out) infinite; }
  .vsx.js .vsx-aura--2 { animation: vsx-aura-2 62s var(--vsx-ease-in-out) infinite; }
  .vsx.js .vsx-aura--3 { animation: vsx-aura-3 54s var(--vsx-ease-in-out) infinite; }

  .vsx.js .vsx-in { animation: vsx-rise-v3 .75s var(--vsx-ease) both; animation-delay: calc(var(--d, 0) * 110ms + 80ms); }
  .vsx.js .vsx-show__stage .vsx-browser { animation: none; }
  .vsx.js .vsx-show__stage .vsx-handset { animation: vsx-rise-phone 1s var(--vsx-ease) both .9s; }

  .vsx.js .vsx-steps li:not(:last-child)::after { transition: transform .18s linear; }

  .vsx.js .vsx-cta::after { animation: vsx-cta-drift 38s var(--vsx-ease-in-out) infinite alternate; }

  /* DUK: atsakymas pasirodo opacity + transform (aukštis neanimuojamas). */
  .vsx.js .vsx-faq details[open] .vsx-faq__a { animation: vsx-faq-in .32s var(--vsx-ease) both; }}
@keyframes vsx-faq-in { from { opacity: 0; transform: translate3d(0, -6px, 0); } to { opacity: 1; transform: none; } }

/* Kortelės tik su pele (kompiuteryje). */
@media (hover: hover) and (pointer: fine) {
  .vsx-card:hover { box-shadow: none; transform: none; translate: 0 -6px; }
  .vsx-card:hover::after, .vsx-card:focus-within::after { opacity: 1; }
  .vsx-card:focus-within { box-shadow: none; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .vsx-card__tall { transition: opacity .35s var(--vsx-ease), transform .7s var(--vsx-ease); }
  .vsx-card.is-ready:hover .vsx-card__tall { opacity: 1; transform: translate3d(0, calc((-100% + 100cqh) * var(--vsx-py, 0)), 0); transition: opacity .35s var(--vsx-ease), transform .7s var(--vsx-ease); }
  .vsx-card:hover .vsx-card__body::before { opacity: 1; transform: translate3d(240%, 0, 0); transition: opacity .25s var(--vsx-ease), transform 1.1s var(--vsx-ease); }}

/* 7. Telefone ir jutikliniuose ekranuose: be dekoratyvaus fono judesio, pelės sekimo ir sudėtingų hover efektų;
      lieka trumpi pasirodymai ir proceso animacija. */
@media (max-width: 640px), (hover: none), (pointer: coarse) {
  .vsx.js .vsx-geo > span, .vsx.js .vsx-cta::after { animation: none !important; }
}
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .vsx.js .vsx-in { animation-duration: .5s; animation-delay: calc(var(--d, 0) * 70ms + 40ms); }}

/* =================================================================
   V4 – tamsus pirmasis ekranas, demo juosta, mini žaidimas „Sutvarkykite silpną svetainę“.
   Animuojama tik transform / translate / rotate ir opacity. Be bibliotekų ir WebGL.
   ================================================================= */
.vsx { --vsx-font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; --vsx-ink: #060B17; --vsx-ink-2: #0B1426; }
.vsx h1, .vsx h2 { letter-spacing: -0.035em; }

/* ---------- Tamsi antraštė ---------- */
.vsx-header { background: rgba(6, 11, 23, .92); border-bottom-color: rgba(255, 255, 255, .08); }
@supports (backdrop-filter: blur(8px)) { .vsx-header { background: rgba(6, 11, 23, .78); }}
.vsx-header :focus-visible { outline-color: #fff; }
.vsx-nav a { color: #E6EBF3; }
.vsx-nav a:hover { background: rgba(255, 255, 255, .08); }
.vsx-cart { color: #fff; }
.vsx-cart:hover { background: rgba(255, 255, 255, .08); }
@media (max-width: 960px) {
  .vsx.js .vsx-menu-btn { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); }
  .vsx.js .vsx-nav { background: var(--vsx-ink-2); border-bottom-color: rgba(255, 255, 255, .08); }}

/* ---------- Tamsus pirmasis ekranas ---------- */
.vsx-hero { background: var(--vsx-ink); color: #fff; }
.vsx-hero h1 { color: #fff; }
.vsx-grad { background: linear-gradient(95deg, #9DC1FF 0%, #4C7DFF 55%, #7FB2FF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vsx-hero .vsx-eyebrow { color: #8FB0FF; }
.vsx-hero .vsx-lead { color: #B8C2D3; }
.vsx-hero__facts { border-top-color: rgba(255, 255, 255, .12); color: #B8C2D3; }
.vsx-hero__facts strong { color: #fff; }
.vsx-hero .vsx-dot { background: #4C7DFF; }
.vsx-hero :focus-visible { outline-color: #fff; }
.vsx-geo__grid { background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); }
.vsx-geo__ring { border-color: rgba(143, 176, 255, .22); }
.vsx-geo > .vsx-geo__square, .vsx-geo > .vsx-geo__bar { display: none; }
.vsx-aura--1 { background: radial-gradient(circle, rgba(36,91,255,.42) 0%, rgba(36,91,255,.12) 40%, transparent 68%); }
.vsx-aura--2 { background: radial-gradient(circle, rgba(76,125,255,.26) 0%, rgba(76,125,255,.07) 42%, transparent 68%); }
.vsx-aura--3 { background: radial-gradient(circle, rgba(125,170,255,.22) 0%, transparent 66%); }
.vsx-show__tabs { background: rgba(255, 255, 255, .07); }
.vsx-show__tab { color: #B8C2D3; }
.vsx-show__tab:hover { color: #fff; }
.vsx-show__tab.is-active { background: #fff; color: #0B1220; }
.vsx-show__pause { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); }
.vsx-show__pause:hover { border-color: #fff; }
.vsx-browser { border-color: rgba(255, 255, 255, .14); box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255,255,255,.04); }
.vsx-handset { box-shadow: 0 24px 60px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255,255,255,.12); }
.vsx-show__kicker { color: #8FB0FF; }
.vsx-show__label strong { color: #fff; }
.vsx-show__label a { color: #9DC1FF; }

/* ---------- Demo juosta ---------- */

/* ---------- Mini žaidimas ---------- */
.vsx-game { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.vsx-game__stage { margin: 0; }
.vsx-game__browser { border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid #D9E0EA; box-shadow: var(--vsx-shadow-lg); }
.vsx-game__bar { display: flex; align-items: center; gap: 14px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--vsx-line); background: #FBFCFD; }
.vsx-game__url { font-size: 13px; color: var(--vsx-muted); background: #F1F4F8; border-radius: 7px; padding: 3px 12px; }
.vsx-game__view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; container-type: size; background: #fff; }

.vsx-mock { --u: 1cqw; position: absolute; inset: 0; padding: calc(var(--u) * 2.4) calc(var(--u) * 3.6); display: grid; grid-template-rows: auto 1fr; gap: calc(var(--u) * 3); color: #334155; font-family: var(--vsx-font); }
.vsx-mock p, .vsx-mock ul { margin: 0; }
.vsx-mock__stack { display: grid; }
.vsx-mock__stack > * { grid-area: 1 / 1; }
.vsx-mock__nav-weak, .vsx-mock__nav-strong { display: flex; align-items: center; flex-wrap: wrap; gap: calc(var(--u) * .5) calc(var(--u) * 1.1); font-size: calc(var(--u) * 1.05); color: #94A3B8; }
.vsx-mock__nav-weak b { font-weight: 400; font-size: calc(var(--u) * 1.5); color: #64748B; margin-right: calc(var(--u) * 1.2); }
.vsx-mock__nav-strong { font-size: calc(var(--u) * 1.25); color: #334155; font-weight: 500; gap: calc(var(--u) * 2.2); padding-bottom: calc(var(--u) * 1); border-bottom: 1px solid #E2E8F0; }
.vsx-mock__nav-strong b { display: inline-flex; align-items: center; gap: calc(var(--u) * .6); font-size: calc(var(--u) * 1.5); font-weight: 800; color: #0B1220; margin-right: auto; }
.vsx-mock__nav-strong b i { width: calc(var(--u) * 1.6); height: calc(var(--u) * 1.6); border-radius: calc(var(--u) * .4); background: #245BFF; }
.vsx-mock__nav-strong em { font-style: normal; font-weight: 700; color: #fff; background: #245BFF; padding: calc(var(--u) * .5) calc(var(--u) * 1.2); border-radius: calc(var(--u) * .5); }
.vsx-mock__body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: calc(var(--u) * 3.5); align-items: center; min-height: 0; }
.vsx-mock__copy { display: grid; gap: calc(var(--u) * 1.8); align-content: center; }
.vsx-mock__h-weak { font-size: calc(var(--u) * 2.1); color: #94A3B8; font-weight: 400; text-align: center; }
.vsx-mock__h-strong { font-size: calc(var(--u) * 3.9); line-height: 1.04; font-weight: 800; color: #0B1220; letter-spacing: -0.03em; }
.vsx-mock__h-strong small { display: block; font-size: calc(var(--u) * 1.05); letter-spacing: .08em; text-transform: uppercase; color: #245BFF; font-weight: 700; margin-bottom: calc(var(--u) * .8); }
.vsx-mock__t-weak { font-size: calc(var(--u) * 1.18); line-height: 1.5; color: #94A3B8; text-align: justify; }
.vsx-mock__t-strong p { font-size: calc(var(--u) * 1.5); line-height: 1.45; color: #475569; }
.vsx-mock__t-strong ul { list-style: none; padding: 0; margin-top: calc(var(--u) * 1) !important; display: grid; gap: calc(var(--u) * .5); font-size: calc(var(--u) * 1.3); color: #0B1220; font-weight: 600; }
.vsx-mock__t-strong li::before { content: "✓"; color: #245BFF; font-weight: 800; margin-right: calc(var(--u) * .7); }
.vsx-mock__c-weak { justify-self: start; font-size: calc(var(--u) * 1.1); color: #B8C2D3; border: 1px solid #E2E8F0; padding: calc(var(--u) * .35) calc(var(--u) * 1); border-radius: calc(var(--u) * .4); }
.vsx-mock__c-strong { display: flex; align-items: center; gap: calc(var(--u) * 1.6); }
.vsx-mock__c-strong em { font-style: normal; font-weight: 700; font-size: calc(var(--u) * 1.45); color: #fff; background: #245BFF; padding: calc(var(--u) * 1) calc(var(--u) * 2); border-radius: calc(var(--u) * .7); box-shadow: 0 calc(var(--u) * .8) calc(var(--u) * 2) rgba(36, 91, 255, .35); }
.vsx-mock__c-strong u { text-decoration: none; font-size: calc(var(--u) * 1.3); font-weight: 600; color: #0B1220; border-bottom: 2px solid #CBD5E1; }
.vsx-mock__media { position: relative; height: 100%; min-height: 0; }
.vsx-mock__tile { position: absolute; border-radius: calc(var(--u) * 1); overflow: hidden; }
.vsx-mock__tile::before { content: ""; position: absolute; left: 12%; right: 12%; bottom: 14%; height: 34%; background: linear-gradient(135deg, rgba(255,255,255,.55) 0 50%, rgba(255,255,255,.25) 50%); clip-path: polygon(0 100%, 35% 30%, 55% 65%, 75% 20%, 100% 100%); }
.vsx-mock__tile::after { content: ""; position: absolute; inset: 0; background: #E2E8F0; opacity: 0; }
.vsx-mock__tile--1 { left: 0; top: 6%; width: 100%; height: 54%; background: linear-gradient(135deg, #1E3A8A, #245BFF 60%, #7FB2FF); }
.vsx-mock__tile--2 { left: 0; top: 64%; width: 48%; height: 32%; background: linear-gradient(135deg, #0F766E, #38BDF8); }
.vsx-mock__tile--3 { left: 52%; top: 64%; width: 48%; height: 32%; background: linear-gradient(135deg, #334155, #94A3B8); }

/* Paleidimo banga ir trajektorija */
.vsx-launch { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.vsx-launch > span { position: absolute; display: block; opacity: 0; }
.vsx-launch__flash { inset: 0; background: radial-gradient(60% 70% at 50% 50%, rgba(255,255,255,.85), rgba(143,176,255,.35) 55%, transparent 80%); }
.vsx-launch__wave { top: -25%; bottom: -25%; left: 0; width: 38%; background: linear-gradient(100deg, transparent 0%, rgba(76,125,255,.0) 18%, rgba(76,125,255,.38) 50%, rgba(143,176,255,.0) 82%, transparent 100%); transform: translate3d(-130%, 0, 0) skewX(-14deg); }
.vsx-launch__dots { inset: 0; opacity: 1 !important; }
.vsx-launch__dots i { position: absolute; width: 0.9cqw; height: 0.9cqw; margin: -0.45cqw 0 0 -0.45cqw; border-radius: 50%; background: #245BFF; box-shadow: 0 0 0 0.35cqw rgba(36,91,255,.18); opacity: 0; }
.vsx-launch__rocket { left: 0; top: 0; width: 3.6cqw; height: 3.6cqw; margin: -1.8cqw 0 0 -1.8cqw; color: #245BFF; }
.vsx-launch__rocket svg { width: 100%; height: 100%; display: block; }
@keyframes vsx-flash { 0% { opacity: 0; } 25% { opacity: .55; } 100% { opacity: 0; } }
@keyframes vsx-wave { 0% { opacity: 0; transform: translate3d(-130%, 0, 0) skewX(-14deg); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translate3d(300%, 0, 0) skewX(-14deg); } }
@keyframes vsx-dot { 0% { opacity: 0; transform: scale(.3); } 18% { opacity: 1; transform: scale(1); } 70% { opacity: .85; transform: scale(1); } 100% { opacity: 0; transform: scale(.6); } }

/* Pasirinkimai */
.vsx-game__panel { display: grid; gap: 16px; }
.vsx-game__intro { font-weight: 600; color: var(--vsx-text); }
.vsx-game__choices { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vsx-choice { width: 100%; display: grid; grid-template-columns: 36px 1fr 28px; align-items: center; gap: 14px; min-height: 72px; padding: 12px 16px; text-align: left; border-radius: 14px; border: 1.5px solid #D9E0EA; background: #fff; color: var(--vsx-text); font: inherit; cursor: pointer;
  transition: translate .3s var(--vsx-ease), transform .3s var(--vsx-ease); }
.vsx-choice:hover { border-color: var(--vsx-accent); }
.vsx-choice:active { transform: scale(.985); }
.vsx-choice__n { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #EEF1F6; color: #475569; font-weight: 700; }
.vsx-choice__txt { display: grid; gap: 2px; }
.vsx-choice__txt strong { font-size: 17px; font-weight: 700; }
.vsx-choice__txt small { font-size: 14px; color: var(--vsx-muted); }
.vsx-choice__ok { position: relative; width: 28px; height: 28px; border-radius: 50%; background: var(--vsx-accent); opacity: 0; transform: scale(.4); transition: opacity .3s var(--vsx-ease), transform .4s var(--vsx-ease); }
.vsx-choice__ok::after { content: ""; position: absolute; left: 10px; top: 6px; width: 6px; height: 12px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.vsx-choice[aria-pressed="true"] { border-color: var(--vsx-accent); background: #F2F6FF; cursor: default; }
.vsx-choice[aria-pressed="true"] .vsx-choice__n { background: var(--vsx-accent); color: #fff; }
.vsx-choice[aria-pressed="true"] .vsx-choice__ok { opacity: 1; transform: none; }
.vsx-game__result { display: grid; gap: 14px; padding: 18px 20px; border-radius: 14px; background: var(--vsx-dark); color: #fff; }
.vsx-game__msg { font-size: clamp(18px, 1.4vw, 21px); font-weight: 700; line-height: 1.35; }
.vsx-game__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.vsx-game__reset { min-height: 44px; background: none; border: 0; color: #B8C2D3; font: 600 15px/1 var(--vsx-font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.vsx-game__reset[hidden] { display: none; }
.vsx-game__reset:hover { color: #fff; }
.vsx-game__result :focus-visible { outline-color: #fff; }

/* Būsenos: su JS – pradžioje silpna versija; be JS – rodoma sutvarkyta versija ir rezultatas. */
.vsx-mock__weak { opacity: 0; visibility: hidden; }
.vsx:not(.js) .vsx-choice { pointer-events: none; }
.vsx:not(.js) .vsx-choice .vsx-choice__ok { opacity: 1; transform: none; }
.vsx.js .vsx-mock__weak { opacity: 1; visibility: visible; transform: none; }
.vsx.js .vsx-mock__strong { opacity: 0; visibility: hidden; transform: translate3d(0, 1.4cqw, 0) scale(.97); }
.vsx.js .vsx-game.fix-head .vsx-mock__head .vsx-mock__weak,
.vsx.js .vsx-game.fix-cta .vsx-mock__cta .vsx-mock__weak,
.vsx.js .vsx-game.fix-struct .vsx-mock__text .vsx-mock__weak,
.vsx.js .vsx-game.fix-struct .vsx-mock__nav .vsx-mock__weak { opacity: 0; visibility: hidden; transform: translate3d(0, -1cqw, 0) scale(.97); }
.vsx.js .vsx-game.fix-head .vsx-mock__head .vsx-mock__strong,
.vsx.js .vsx-game.fix-cta .vsx-mock__cta .vsx-mock__strong,
.vsx.js .vsx-game.fix-struct .vsx-mock__text .vsx-mock__strong,
.vsx.js .vsx-game.fix-struct .vsx-mock__nav .vsx-mock__strong { opacity: 1; visibility: visible; transform: none; }
/* Netvarkingi vaizdai (tik su JS, kol nesutvarkyta) */
.vsx.js .vsx-game:not(.fix-struct) .vsx-mock__tile--1 { transform: translate3d(-8%, 10%, 0) rotate(-7deg) scale(.78); }
.vsx.js .vsx-game:not(.fix-struct) .vsx-mock__tile--2 { transform: translate3d(40%, -95%, 0) rotate(11deg) scale(1.12); }
.vsx.js .vsx-game:not(.fix-struct) .vsx-mock__tile--3 { transform: translate3d(-70%, -40%, 0) rotate(-14deg) scale(.72); }
.vsx.js .vsx-game:not(.fix-struct) .vsx-mock__tile::after { opacity: .62; }
.vsx.js .vsx-game__result { opacity: 0; visibility: hidden; transform: translate3d(0, 10px, 0); }
.vsx.js .vsx-game.is-done .vsx-game__result { opacity: 1; visibility: visible; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .vsx.js .vsx-mock__stack > * { transition: opacity .45s var(--vsx-ease), transform .6s var(--vsx-ease), visibility 0s linear .45s; }
  .vsx.js .vsx-game.fix-head .vsx-mock__head .vsx-mock__strong,
  .vsx.js .vsx-game.fix-cta .vsx-mock__cta .vsx-mock__strong,
  .vsx.js .vsx-game.fix-struct .vsx-mock__text .vsx-mock__strong,
  .vsx.js .vsx-game.fix-struct .vsx-mock__nav .vsx-mock__strong { transition: opacity .5s var(--vsx-ease) .12s, transform .7s var(--vsx-ease) .12s, visibility 0s; }
  .vsx.js .vsx-mock__tile { transition: transform .9s cubic-bezier(.34, 1.3, .5, 1); }
  .vsx.js .vsx-mock__tile:nth-child(2) { transition-delay: .06s; }
  .vsx.js .vsx-mock__tile:nth-child(3) { transition-delay: .12s; }
  .vsx.js .vsx-mock__tile::after { transition: opacity .6s var(--vsx-ease); }
  .vsx.js .vsx-game__result { transition: opacity .5s var(--vsx-ease), transform .6s var(--vsx-ease), visibility 0s linear .5s; }
  .vsx.js .vsx-game.is-done .vsx-game__result { transition: opacity .6s var(--vsx-ease) 1.1s, transform .7s var(--vsx-ease) 1.1s, visibility 0s linear 1.1s; }
  /* Paleidimas (vieną kartą, kai sutvarkyta viskas) */
  .vsx.js .vsx-game.is-launch .vsx-launch__flash { animation: vsx-flash .9s var(--vsx-ease) .1s both; }
  .vsx.js .vsx-game.is-launch .vsx-launch__wave { animation: vsx-wave 1.3s cubic-bezier(.45, 0, .3, 1) .15s both; }
  .vsx.js .vsx-game.is-launch .vsx-launch__dots i { animation: vsx-dot 2.2s var(--vsx-ease) both; animation-delay: calc(var(--k) * 55ms + .35s); }
  .vsx.js .vsx-game.is-launch .vsx-launch__rocket { animation: vsx-rocket 1.25s cubic-bezier(.55, 0, .35, 1) .35s both; }
  /* Pirmą kartą pasirodžius – makete elementai išnyra paeiliui */
  .vsx.js .vsx-game .vsx-mock > *, .vsx.js .vsx-game .vsx-mock__copy > *, .vsx.js .vsx-game .vsx-mock__media { transition: opacity .6s var(--vsx-ease), transform .7s var(--vsx-ease); }
  .vsx.js .vsx-game:not(.is-seen) .vsx-mock__nav,
  .vsx.js .vsx-game:not(.is-seen) .vsx-mock__head,
  .vsx.js .vsx-game:not(.is-seen) .vsx-mock__text,
  .vsx.js .vsx-game:not(.is-seen) .vsx-mock__cta,
  .vsx.js .vsx-game:not(.is-seen) .vsx-mock__media { opacity: 0; transform: translate3d(0, 1.6cqw, 0); }
  .vsx.js .vsx-game.is-seen .vsx-mock__head { transition-delay: .1s; }
  .vsx.js .vsx-game.is-seen .vsx-mock__text { transition-delay: .2s; }
  .vsx.js .vsx-game.is-seen .vsx-mock__cta { transition-delay: .3s; }
  .vsx.js .vsx-game.is-seen .vsx-mock__media { transition-delay: .4s; }}
@media (prefers-reduced-motion: reduce) { .vsx-launch { display: none; }}
/* Našumas: kai žaidimas matomas, abi versijos iš anksto paruošiamos kaip atskiri sluoksniai –
   paspaudus nereikia piešti iš naujo (mažiau strigčių silpname kompiuteryje). */
@media (prefers-reduced-motion: no-preference) {
  .vsx.js .vsx-game.is-seen .vsx-mock__strong { visibility: visible; }
  .vsx.js .vsx-game.is-seen .vsx-mock__stack > *, .vsx.js .vsx-game.is-seen .vsx-mock__tile { will-change: opacity, transform; }
  .vsx.js .vsx-game.is-done .vsx-mock__stack > *, .vsx.js .vsx-game.is-done .vsx-mock__tile { will-change: auto; }
}

/* Telefonas: vienas stulpelis, aukštesnis maketas, supaprastinta versija */
@media (max-width: 900px) {
  .vsx-game { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .vsx-game__view { aspect-ratio: 4 / 5; }
  .vsx.js .vsx-game.is-launch .vsx-launch__rocket { animation-name: vsx-rocket-tel; }
  .vsx-choice { min-height: 64px; grid-template-columns: 32px 1fr 26px; gap: 12px; padding: 10px 14px; }
  .vsx-choice__n { width: 32px; height: 32px; }}
@container (max-width: 560px) {
  .vsx-mock { --u: 1.9cqw; grid-template-rows: auto auto 1fr; gap: calc(var(--u) * 2); padding: calc(var(--u) * 2.4); }
  .vsx-mock__body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: calc(var(--u) * 2.4); align-items: start; }
  .vsx-mock__nav-weak span:nth-child(n+6) { display: none; }
  .vsx-mock__nav-strong span { display: none; }
  .vsx-mock__media { height: auto; min-height: 30cqh; }}

/* ---------- Darbų kortelės: labai lengvas 3D pasvirimas (tik kompiuteryje, valdo JS) ---------- */
.vsx-catalog { perspective: 1600px; }
.vsx-card { rotate: var(--tx, 0) var(--ty, 1) 0 var(--ta, 0deg); }
.vsx-card__body::before { display: none; }   /* V3 šviesos perėjimas pašalintas – mažiau atsitiktinių efektų */
@media (prefers-reduced-motion: no-preference) {
  .vsx.js .vsx-card.vsx-reveal { transition: opacity .7s var(--vsx-ease), transform .7s var(--vsx-ease), translate .45s var(--vsx-ease), rotate .35s var(--vsx-ease);
    transition-delay: calc(var(--i, 0) * 80ms), calc(var(--i, 0) * 80ms), 0s, 0s; }
}

/* ---------- Magnetiniai CTA mygtukai (tik kompiuteryje, valdo JS) ---------- */
.vsx-magnet { translate: var(--mx, 0px) var(--my, 0px); transition: transform var(--vsx-t) var(--vsx-ease), translate .35s var(--vsx-ease); }

/* ---------- Sekcijų antraštės ---------- */
.vsx-dark h2, .vsx-cta h2 { color: #fff; }
@keyframes vsx-rocket {
  0% { transform: translate3d(10.00cqw, 86.00cqh, 0) rotate(88.5deg); opacity: 0; }
  10% { transform: translate3d(19.44cqw, 84.90cqh, 0) rotate(83.1deg); opacity: 1; }
  25% { transform: translate3d(33.00cqw, 80.62cqh, 0) rotate(74.5deg); opacity: 1; }
  40% { transform: translate3d(45.84cqw, 73.20cqh, 0) rotate(65.7deg); opacity: 1; }
  55% { transform: translate3d(57.96cqw, 62.62cqh, 0) rotate(57.1deg); opacity: 1; }
  70% { transform: translate3d(69.36cqw, 48.90cqh, 0) rotate(49.1deg); opacity: 1; }
  85% { transform: translate3d(80.04cqw, 32.03cqh, 0) rotate(41.8deg); opacity: 1; }
  100% { transform: translate3d(90.00cqw, 12.00cqh, 0) rotate(35.4deg); opacity: 0; }
}
@keyframes vsx-rocket-tel {
  0% { transform: translate3d(10.00cqw, 86.00cqh, 0) rotate(87.0deg); opacity: 0; }
  10% { transform: translate3d(19.44cqw, 84.90cqh, 0) rotate(76.4deg); opacity: 1; }
  25% { transform: translate3d(33.00cqw, 80.62cqh, 0) rotate(61.0deg); opacity: 1; }
  40% { transform: translate3d(45.84cqw, 73.20cqh, 0) rotate(48.0deg); opacity: 1; }
  55% { transform: translate3d(57.96cqw, 62.62cqh, 0) rotate(37.8deg); opacity: 1; }
  70% { transform: translate3d(69.36cqw, 48.90cqh, 0) rotate(30.0deg); opacity: 1; }
  85% { transform: translate3d(80.04cqw, 32.03cqh, 0) rotate(24.1deg); opacity: 1; }
  100% { transform: translate3d(90.00cqw, 12.00cqh, 0) rotate(19.6deg); opacity: 0; }
}

/* =================================================================
   V5 – „Paleidimas į orbitą“. Visas puslapis tamsus, kosminė erdvė.
   Animuojama tik transform / translate / rotate ir opacity. Be WebGL, be dalelių.
   ================================================================= */
.vsx-v5 {
  --vsx-bg: #04070F; --vsx-text: #F1F5FB; --vsx-muted: #A3B2C8; --vsx-line: rgba(255,255,255,.09);
  --vsx-link: #8FB0FF; --sp-glass: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); --sp-border: rgba(255,255,255,.1);
  --vsx-display: "Space Grotesk", var(--vsx-font);
  background: #04070F; color: var(--vsx-text);
}
.vsx-v5 :where(a:not(.vsx-btn)) { color: var(--vsx-link); }  /* mygtukai išlaiko savo spalvas */
.vsx-v5 :focus-visible { outline-color: #fff; }
.vsx-v5 h1, .vsx-v5 h2, .vsx-v5 h3 { color: #fff; }
.vsx-v5 h1, .vsx-v5 h2 { font-family: var(--vsx-display); font-weight: 700; letter-spacing: -0.045em; }
.vsx-v5 h2 { font-size: clamp(34px, 4.4vw, 64px); line-height: 1.02; }
.vsx-v5 .vsx-eyebrow { color: #8FB0FF; }
.vsx-v5 .vsx-head p, .vsx-v5 .vsx-lead { color: var(--vsx-muted); }
.vsx-v5 .vsx-textlink { color: var(--vsx-link); }

.vsx-v5 .vsx-skip { background: #fff; color: #04070F; }
.vsx-v5 .vsx-btn--ghost:hover { border-color: #fff; }
/* Žvaigždės: statiški gradientai; antras sluoksnis labai lėtai dreifuoja (tik transform). */
.vsx-stars { position: absolute; inset: 0; pointer-events: none; }
@keyframes vsx-star-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-40px, 24px, 0); } }

/* ---------- Antraštė: slenkant tampa kompaktiška (tik transform / opacity) ---------- */
.vsx-v5 .vsx-header { background: rgba(4, 7, 15, .6); border-bottom-color: transparent; }
.vsx-v5 .vsx-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(143,176,255,.45), transparent); opacity: 0; transition: opacity .4s var(--vsx-ease); }
.vsx-v5 .vsx-header.is-compact::after { opacity: 1; }
.vsx-v5 .vsx-logo img { transform-origin: left center; transition: transform .4s var(--vsx-ease); }
.vsx-v5 .vsx-header.is-compact .vsx-logo img { transform: scale(.88); }
@supports (backdrop-filter: blur(8px)) { .vsx-v5 .vsx-header { background: rgba(4, 7, 15, .55); backdrop-filter: blur(14px) saturate(140%); }}

/* ---------- Pirmasis ekranas ---------- */
.vsx-v5 .vsx-hero { background: radial-gradient(120% 80% at 70% 0%, #0B1A3D 0%, #060B17 45%, #04070F 100%); padding-top: clamp(40px, 4vw, 64px); padding-bottom: clamp(40px, 5vw, 72px); }
.vsx-v5 .vsx-hero h1 { font-size: clamp(44px, 5.5vw, 88px); line-height: .98; letter-spacing: -0.05em; }
.vsx-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.vsx-w > span { display: inline-block; }
@keyframes vsx-word { from { transform: translate3d(0, 108%, 0); opacity: 0; } to { transform: none; opacity: 1; } }
.vsx-v5 .vsx-geo__grid { opacity: .55; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 70% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 60% 70% at 70% 40%, #000 20%, transparent 75%); }
.vsx-v5 .vsx-geo__ring { display: none; }
.vsx-v5 .vsx-show { perspective: 1700px; isolation: isolate; }

.vsx-v5 .vsx-show__stage::after { content: ""; position: absolute; z-index: -1; left: 6%; right: 6%; bottom: -6%; height: 40%; background: radial-gradient(ellipse at center, rgba(36,91,255,.55), transparent 70%); pointer-events: none; }
.vsx-v5 .vsx-browser { box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 0 1px rgba(143,176,255,.18), 0 0 80px rgba(36,91,255,.18); }
/* Orbitos: atskiri sluoksniai, sukasi labai lėtai */
.vsx-orbits { position: absolute; z-index: -1; left: 50%; top: 48%; width: 0; height: 0; pointer-events: none; }
.vsx-orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(143, 176, 255, .16); }
.vsx-orbit--1 { width: 980px; height: 980px; margin: -490px 0 0 -490px; border-style: dashed; border-color: rgba(143,176,255,.12); }
.vsx-orbit--2 { width: 760px; height: 760px; margin: -380px 0 0 -380px; }
.vsx-orbit--3 { width: 560px; height: 560px; margin: -280px 0 0 -280px; border-color: rgba(143,176,255,.1); }
.vsx-orbit i { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #8FB0FF; box-shadow: 0 0 0 4px rgba(143,176,255,.15); left: 50%; top: 0; }
.vsx-orbit--2 i:nth-child(2) { left: 0; top: 50%; width: 6px; height: 6px; background: #4C7DFF; }
.vsx-orbit--3 i { left: 100%; top: 50%; background: #fff; }
@keyframes vsx-orbit-spin { to { transform: rotate(360deg); } }
@keyframes vsx-orbit-spin-r { to { transform: rotate(-360deg); } }

/* ---------- Demo juosta ir žodžių juosta ---------- */

/* ---------- Bento darbų tinklelis ---------- */
.vsx-v5 .vsx-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vsx-bento > .vsx-card:nth-child(1) { grid-column: span 2; }
.vsx-bento > .vsx-card:nth-child(1) .vsx-card__media { aspect-ratio: 16 / 7.4; }
.vsx-bento > .vsx-card:nth-child(6) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: 1fr auto; }
.vsx-bento > .vsx-card:nth-child(6) .vsx-card__media { grid-row: 1 / 3; aspect-ratio: 16 / 8; border-bottom: 0; border-right: 1px solid var(--sp-border); border-radius: 13px 0 0 13px; }
.vsx-bento > .vsx-card:nth-child(6) .vsx-card__body { align-content: end; padding-top: 32px; }
.vsx-bento > .vsx-card:nth-child(6) h3 { font-size: clamp(22px, 2vw, 30px); }
@media (max-width: 1024px) {
  .vsx-v5 .vsx-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vsx-bento > .vsx-card:nth-child(1) { grid-column: span 2; }}
@media (max-width: 640px) {
  .vsx-v5 .vsx-bento { grid-template-columns: 1fr; }
  .vsx-bento > .vsx-card:nth-child(1) { grid-column: auto; }
  .vsx-bento > .vsx-card:nth-child(1) .vsx-card__media { aspect-ratio: 8 / 5; }
  .vsx-bento > .vsx-card:nth-child(6) { display: flex; }
  .vsx-bento > .vsx-card:nth-child(6) .vsx-card__media { aspect-ratio: 8 / 5; border-right: 0; border-bottom: 1px solid var(--sp-border); border-radius: 13px 13px 0 0; }}
.vsx-v5 .vsx-card { background: var(--sp-glass), #070C19; border-color: var(--sp-border); color: var(--vsx-text); }
.vsx-v5 .vsx-card::after { box-shadow: 0 30px 70px -24px rgba(36, 91, 255, .55), 0 0 0 1px rgba(143,176,255,.25); }
.vsx-v5 .vsx-card__media { background: #0B1222; border-bottom-color: var(--sp-border); }
.vsx-v5 .vsx-tag { background: rgba(4, 7, 15, .72); color: #fff; border-color: rgba(255,255,255,.18); }
.vsx-v5 .vsx-card__open { background: #fff; color: #0B1220; }
.vsx-v5 .vsx-card__body p { color: var(--vsx-muted); }
.vsx-v5 .vsx-price { color: #fff; }
.vsx-v5 .vsx-card__actions { position: relative; }
.vsx-v5 .vsx-catalog__foot { color: var(--vsx-muted); }
/* Šviesos dėmė, sekanti pelę (tik kompiuteryje) */
.vsx-card__spot { position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.vsx-card__spot::before { content: ""; position: absolute; left: 0; top: 0; width: 460px; height: 460px; margin: -230px 0 0 -230px; border-radius: 50%;
  background: radial-gradient(circle, rgba(76, 125, 255, .26), rgba(76,125,255,.06) 40%, transparent 66%); opacity: 0;
  transform: translate3d(var(--sx, -999px), var(--sy, -999px), 0); transition: opacity .35s var(--vsx-ease); }
.vsx-v5 .vsx-card:hover .vsx-card__spot::before { opacity: 1; }

/* ---------- Mini žaidimas – „misijos valdymas“ ---------- */
.vsx-v5 .vsx-game-sec { background: radial-gradient(70% 60% at 30% 40%, rgba(36,91,255,.16), transparent 70%); }
.vsx-v5 .vsx-game__browser { border-color: rgba(143,176,255,.25); box-shadow: 0 40px 100px rgba(0,0,0,.55), 0 0 90px rgba(36,91,255,.22); }
.vsx-v5 .vsx-game__intro { color: #fff; }
.vsx-v5 .vsx-choice { background: var(--sp-glass), #070C19; border-color: rgba(255,255,255,.14); color: #fff; }
.vsx-v5 .vsx-choice:hover { border-color: #4C7DFF; }
.vsx-v5 .vsx-choice__txt small { color: var(--vsx-muted); }
.vsx-v5 .vsx-choice__n { background: rgba(255,255,255,.08); color: #C9D4E5; }
.vsx-v5 .vsx-choice[aria-pressed="true"] { background: rgba(36, 91, 255, .16); border-color: #4C7DFF; }
.vsx-v5 .vsx-game__result { background: linear-gradient(135deg, #10204A, #0A1124); border: 1px solid rgba(143,176,255,.3); }
.vsx-v5 .vsx-launch__rocket { width: 5cqw; height: 5cqw; margin: -2.5cqw 0 0 -2.5cqw; }
.vsx-v5 .vsx-launch__dots i { width: 1.1cqw; height: 1.1cqw; margin: -.55cqw 0 0 -.55cqw; }

/* ---------- Tamsi „kas pritaikoma“ sekcija ---------- */
.vsx-v5 .vsx-dark { background: linear-gradient(180deg, #04070F 0%, #071026 50%, #04070F 100%); border-top: 1px solid var(--sp-border); border-bottom: 1px solid var(--sp-border); }
.vsx-v5 .vsx-aside { background: var(--sp-glass), #0A1226; }

/* ---------- Procesas – paleidimo pasakojimas ---------- */
.vsx-pad { display: none; }
.vsx-v5 .vsx-steps-wrap { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.vsx-v5 .vsx-pad { display: block; position: sticky; top: 104px; height: min(68vh, 560px); }
.vsx-pad__sky { position: relative; height: 100%; border-radius: 24px; overflow: hidden; container-type: size;
  background: radial-gradient(ellipse 80% 50% at 50% 110%, rgba(36,91,255,.45), transparent 70%), linear-gradient(180deg, #02040A, #071330); border: 1px solid var(--sp-border); }
.vsx-pad__track { position: absolute; left: 50%; top: 10%; bottom: 18%; width: 2px; margin-left: -1px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
.vsx-pad__trail { position: absolute; inset: 0; background: linear-gradient(to top, #245BFF, #8FB0FF 70%, #fff); transform-origin: 50% 100%; transform: scaleY(var(--p, 1)); }
.vsx-pad__rocket { position: absolute; left: 50%; bottom: 18%; width: 84px; height: 84px; margin: 0 0 -42px -42px; filter: drop-shadow(0 0 18px rgba(76,125,255,.55)); color: #245BFF; transform: translate3d(0, calc(var(--p, 1) * -72cqh), 0); }
.vsx-pad__rocket svg { width: 100%; height: 100%; display: block; position: relative; z-index: 1; }
.vsx-pad__flame { position: absolute; left: 50%; top: 78%; width: 18px; height: 34px; margin-left: -9px; border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%; background: radial-gradient(ellipse at 50% 20%, #fff, #8FB0FF 35%, rgba(36,91,255,.0) 75%); opacity: calc(.25 + var(--p, 1) * .75); }
.vsx-pad__num { position: absolute; left: 8%; top: 6%; display: grid; font: 700 clamp(90px, 13cqh, 170px)/1 var(--vsx-display); letter-spacing: -0.06em; color: rgba(143,176,255,.08); -webkit-text-stroke: 2px rgba(143,176,255,.75); }
.vsx-pad__num b { grid-area: 1 / 1; opacity: 0; transform: translate3d(0, 24px, 0); }
.vsx-pad__num b[data-n="4"] { opacity: 1; transform: none; }
.vsx-steps-wrap.is-live .vsx-pad__num b[data-n="4"] { opacity: 0; transform: translate3d(0, 24px, 0); }
.vsx-steps-wrap.is-live[data-step="1"] .vsx-pad__num b[data-n="1"],
.vsx-steps-wrap.is-live[data-step="2"] .vsx-pad__num b[data-n="2"],
.vsx-steps-wrap.is-live[data-step="3"] .vsx-pad__num b[data-n="3"],
.vsx-steps-wrap.is-live[data-step="4"] .vsx-pad__num b[data-n="4"] { opacity: 1; transform: none; }
.vsx-pad__ground { position: absolute; left: 0; right: 0; bottom: 0; height: 18%; background: linear-gradient(180deg, rgba(36,91,255,.18), transparent); border-top: 1px solid rgba(143,176,255,.3); }
/* Žingsniai – vertikalus sąrašas su linija visuose ekranuose */
.vsx-v5 .vsx-steps { grid-template-columns: 1fr; }
.vsx-v5 .vsx-steps li, .vsx-v5 .vsx-steps li + li { padding: clamp(28px, 7vh, 72px) 0; grid-template-columns: 56px 1fr; gap: 20px; }
.vsx-v5 .vsx-steps li:first-child { padding-top: 8px; }
.vsx-v5 .vsx-steps li:not(:last-child)::before,
.vsx-v5 .vsx-steps li:not(:last-child)::after { top: calc(clamp(28px, 7vh, 72px) + 64px); bottom: calc(-1 * clamp(28px, 7vh, 72px) + 8px); left: 27px; right: auto; width: 2px; height: auto; }
.vsx-v5 .vsx-steps li:first-child:not(:last-child)::before,
.vsx-v5 .vsx-steps li:first-child:not(:last-child)::after { top: 72px; }
.vsx-v5 .vsx-steps li:not(:last-child)::before { background: rgba(255,255,255,.1); }
.vsx-v5 .vsx-steps li:not(:last-child)::after { transform-origin: center top; transform: scaleY(var(--f, 1)); }
.vsx-v5 .vsx-steps h3 { font-size: clamp(24px, 2.2vw, 34px); font-family: var(--vsx-display); letter-spacing: -0.03em; }
.vsx-v5 .vsx-steps p { color: var(--vsx-muted); font-size: 17px; max-width: 30em; }
.vsx-v5 .vsx-steps-wrap.is-live li:not(.is-on) .vsx-steps__n { background: rgba(255,255,255,.08); color: #A3B2C8; }
@media (max-width: 900px) {
  .vsx-v5 .vsx-steps-wrap { grid-template-columns: 1fr; }
  .vsx-v5 .vsx-pad { display: none; }
  .vsx-v5 .vsx-steps li, .vsx-v5 .vsx-steps li + li { padding: 0 0 32px; }
  .vsx-v5 .vsx-steps li:not(:last-child)::before, .vsx-v5 .vsx-steps li:not(:last-child)::after,
  .vsx-v5 .vsx-steps li:first-child:not(:last-child)::before, .vsx-v5 .vsx-steps li:first-child:not(:last-child)::after { top: 64px; bottom: 8px; }}

/* ---------- Pasitikėjimas, DUK, CTA, poraštė – tamsūs ---------- */
.vsx-v5 .vsx-trust { background: var(--sp-glass), #070C19; border-color: var(--sp-border); }
.vsx-v5 .vsx-trust .vsx-note { color: var(--vsx-muted); }
.vsx-v5 .vsx-trust__link { border-color: var(--sp-border); color: #fff; }
.vsx-v5 .vsx-trust__link span { color: var(--vsx-muted); }
.vsx-v5 .vsx-trust__link:hover { background: rgba(36,91,255,.12); border-color: #4C7DFF; }
.vsx-v5 .vsx-faq__list, .vsx-v5 .vsx-faq details { border-color: var(--sp-border); }
.vsx-v5 .vsx-faq summary { color: #fff; }
.vsx-v5 .vsx-faq summary:hover { color: #8FB0FF; }
.vsx-v5 .vsx-faq__icon { color: #fff; border-color: rgba(255,255,255,.3); }
.vsx-v5 .vsx-faq__a { color: var(--vsx-muted); }
.vsx-v5 .vsx-cta { background: radial-gradient(90% 120% at 50% 120%, #1A3A9A 0%, #0A1430 45%, #050913 100%); border: 1px solid rgba(143,176,255,.25); padding: clamp(40px, 6vw, 88px); }
.vsx-v5 .vsx-cta h2 { font-size: clamp(34px, 4vw, 60px); }
.vsx-cta__stars { z-index: -1; opacity: .7; }
.vsx-v5 .vsx-footer { border-top-color: var(--sp-border); color: var(--vsx-muted); }
.vsx-v5 .vsx-footer h3 { color: #fff; }
.vsx-v5 .vsx-footer a { color: #C9D4E5; }
.vsx-v5 .vsx-footer a:hover { color: #fff; }
.vsx-v5 .vsx-footer__bottom { border-top-color: var(--sp-border); }

/* ---------- Judesys (tik kai leidžiama) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .vsx-v5.js .vsx-w > span { animation: vsx-word .9s var(--vsx-ease) both; animation-delay: calc(var(--w, 0) * 85ms + 120ms); }
  .vsx-v5.js .vsx-stars--2 { animation: vsx-star-drift 70s var(--vsx-ease-in-out) infinite alternate; }
  .vsx-v5.js .vsx-orbit--1 { animation: vsx-orbit-spin 140s linear infinite; }
  .vsx-v5.js .vsx-orbit--2 { animation: vsx-orbit-spin-r 100s linear infinite; }
  .vsx-v5.js .vsx-orbit--3 { animation: vsx-orbit-spin 70s linear infinite; }
  .vsx-v5.js .vsx-show__stage { transition: rotate .2s linear; }
  .vsx-v5.js .vsx-pad__trail { transition: transform .2s linear; }
  .vsx-v5.js .vsx-pad__rocket { transition: transform .25s var(--vsx-ease); }
  .vsx-v5.js .vsx-pad__num b { transition: opacity .45s var(--vsx-ease), transform .55s var(--vsx-ease); }
}
.vsx-hero.is-offscreen .vsx-orbit, .vsx.is-tab-hidden .vsx-orbit { animation-play-state: paused !important; }
/* Telefone: be orbitų sukimosi ir be 3D pakrypimo; trumpi pasirodymai lieka. */
@media (max-width: 640px), (hover: none), (pointer: coarse) {
  .vsx-v5.js .vsx-orbit, .vsx-v5.js .vsx-stars--2 { animation: none !important; }
}
@media (max-width: 640px) {
  .vsx-orbit--1 { display: none; }
  .vsx-orbit--2 { width: 520px; height: 520px; margin: -260px 0 0 -260px; }
  .vsx-orbit--3 { width: 380px; height: 380px; margin: -190px 0 0 -190px; }
  .vsx-v5 .vsx-hero h1 { font-size: clamp(40px, 11.5vw, 56px); }}
.vsx-stars--1 { background-image: radial-gradient(1.5px 1px at 39.5% 4.8%, rgba(255,255,255,0.80), transparent), radial-gradient(1px 1.5px at 58.3% 91.0%, rgba(255,255,255,0.47), transparent), radial-gradient(1px 2px at 41.8% 24.1%, rgba(255,255,255,0.65), transparent), radial-gradient(1px 1px at 94.7% 63.1%, rgba(255,255,255,0.67), transparent), radial-gradient(1px 2px at 5.0% 22.1%, rgba(255,255,255,0.66), transparent), radial-gradient(1px 1.5px at 41.9% 54.1%, rgba(255,255,255,0.66), transparent), radial-gradient(1px 1px at 58.2% 63.9%, rgba(255,255,255,0.55), transparent), radial-gradient(1px 1px at 61.9% 49.6%, rgba(255,255,255,0.64), transparent), radial-gradient(1.5px 2px at 58.6% 45.3%, rgba(255,255,255,0.51), transparent), radial-gradient(1px 1px at 8.2% 30.0%, rgba(255,255,255,0.62), transparent), radial-gradient(1.5px 2px at 28.8% 98.0%, rgba(255,255,255,0.41), transparent), radial-gradient(2px 1px at 75.7% 15.2%, rgba(255,255,255,0.62), transparent), radial-gradient(1px 1px at 76.5% 57.3%, rgba(255,255,255,0.83), transparent), radial-gradient(1.5px 1.5px at 69.5% 59.4%, rgba(255,255,255,0.67), transparent), radial-gradient(2px 1px at 84.0% 94.5%, rgba(255,255,255,0.61), transparent), radial-gradient(1px 1px at 73.1% 31.0%, rgba(255,255,255,0.67), transparent), radial-gradient(2px 1.5px at 71.7% 88.7%, rgba(255,255,255,0.54), transparent), radial-gradient(2px 1.5px at 16.8% 11.7%, rgba(255,255,255,0.38), transparent), radial-gradient(1.5px 1px at 73.8% 39.8%, rgba(255,255,255,0.85), transparent), radial-gradient(2px 1px at 16.6% 40.2%, rgba(255,255,255,0.50), transparent), radial-gradient(1px 2px at 86.4% 27.8%, rgba(255,255,255,0.58), transparent), radial-gradient(1.5px 2px at 95.8% 15.1%, rgba(255,255,255,0.45), transparent), radial-gradient(1px 1px at 1.2% 83.1%, rgba(255,255,255,0.45), transparent), radial-gradient(1.5px 1px at 14.6% 53.5%, rgba(255,255,255,0.69), transparent), radial-gradient(1.5px 1px at 69.0% 51.5%, rgba(255,255,255,0.69), transparent), radial-gradient(1px 2px at 90.0% 78.0%, rgba(255,255,255,0.83), transparent), radial-gradient(2px 2px at 39.9% 10.4%, rgba(255,255,255,0.70), transparent), radial-gradient(1px 1px at 6.7% 20.9%, rgba(255,255,255,0.44), transparent), radial-gradient(1.5px 1px at 10.2% 56.7%, rgba(255,255,255,0.65), transparent), radial-gradient(1.5px 1px at 7.0% 20.8%, rgba(255,255,255,0.56), transparent), radial-gradient(1.5px 1.5px at 60.2% 47.4%, rgba(255,255,255,0.41), transparent), radial-gradient(2px 2px at 48.0% 31.2%, rgba(255,255,255,0.43), transparent), radial-gradient(1.5px 1.5px at 47.9% 69.2%, rgba(255,255,255,0.63), transparent), radial-gradient(1px 1.5px at 14.7% 54.3%, rgba(255,255,255,0.36), transparent), radial-gradient(1.5px 1px at 69.6% 26.1%, rgba(255,255,255,0.55), transparent), radial-gradient(1px 1.5px at 77.2% 53.3%, rgba(255,255,255,0.78), transparent), radial-gradient(1.5px 1px at 61.3% 78.8%, rgba(255,255,255,0.77), transparent), radial-gradient(1px 1px at 81.8% 74.0%, rgba(255,255,255,0.47), transparent), radial-gradient(2px 1.5px at 73.1% 99.0%, rgba(255,255,255,0.78), transparent), radial-gradient(2px 1.5px at 19.4% 60.5%, rgba(255,255,255,0.54), transparent), radial-gradient(1.5px 1.5px at 8.1% 10.2%, rgba(255,255,255,0.61), transparent), radial-gradient(1.5px 1px at 48.3% 98.5%, rgba(255,255,255,0.69), transparent), radial-gradient(1px 2px at 90.9% 34.4%, rgba(255,255,255,0.70), transparent), radial-gradient(1px 2px at 78.2% 75.0%, rgba(255,255,255,0.61), transparent), radial-gradient(1px 2px at 78.9% 33.3%, rgba(255,255,255,0.79), transparent), radial-gradient(2px 2px at 40.1% 94.7%, rgba(255,255,255,0.75), transparent), radial-gradient(1px 1px at 2.8% 59.1%, rgba(255,255,255,0.61), transparent), radial-gradient(1px 2px at 65.7% 35.0%, rgba(255,255,255,0.65), transparent), radial-gradient(1px 1px at 1.4% 97.1%, rgba(255,255,255,0.71), transparent), radial-gradient(1px 2px at 98.7% 19.5%, rgba(255,255,255,0.83), transparent), radial-gradient(1px 1.5px at 21.3% 50.1%, rgba(255,255,255,0.77), transparent), radial-gradient(1.5px 1.5px at 54.4% 83.4%, rgba(255,255,255,0.38), transparent), radial-gradient(1.5px 2px at 66.2% 81.5%, rgba(255,255,255,0.63), transparent), radial-gradient(1px 1px at 52.4% 1.9%, rgba(255,255,255,0.59), transparent), radial-gradient(1px 1px at 77.6% 15.0%, rgba(255,255,255,0.43), transparent), radial-gradient(1px 1px at 32.6% 51.8%, rgba(255,255,255,0.66), transparent), radial-gradient(1px 1px at 24.8% 27.7%, rgba(255,255,255,0.77), transparent), radial-gradient(2px 1px at 76.0% 91.2%, rgba(255,255,255,0.59), transparent), radial-gradient(1px 1.5px at 45.2% 53.3%, rgba(255,255,255,0.61), transparent), radial-gradient(1px 1.5px at 92.3% 89.3%, rgba(255,255,255,0.46), transparent), radial-gradient(2px 1px at 41.7% 39.2%, rgba(255,255,255,0.52), transparent), radial-gradient(1px 2px at 7.3% 66.9%, rgba(255,255,255,0.78), transparent), radial-gradient(1px 1.5px at 14.3% 88.3%, rgba(255,255,255,0.88), transparent), radial-gradient(1px 1px at 39.8% 48.7%, rgba(255,255,255,0.89), transparent), radial-gradient(1px 1px at 70.6% 99.4%, rgba(255,255,255,0.57), transparent), radial-gradient(2px 1px at 35.7% 9.2%, rgba(255,255,255,0.55), transparent), radial-gradient(1.5px 2px at 44.0% 1.8%, rgba(255,255,255,0.53), transparent), radial-gradient(1.5px 1px at 11.3% 91.9%, rgba(255,255,255,0.48), transparent), radial-gradient(1px 1px at 26.6% 4.0%, rgba(255,255,255,0.78), transparent), radial-gradient(1.5px 1px at 82.0% 85.0%, rgba(255,255,255,0.72), transparent); }
.vsx-stars--2 { background-image: radial-gradient(1.5px 2px at 14.9% 91.9%, rgba(255,255,255,0.66), transparent), radial-gradient(1.5px 1px at 27.9% 80.0%, rgba(255,255,255,0.45), transparent), radial-gradient(1px 1.5px at 93.8% 63.4%, rgba(255,255,255,0.79), transparent), radial-gradient(1px 1px at 6.7% 86.3%, rgba(255,255,255,0.60), transparent), radial-gradient(1.5px 2px at 92.7% 26.8%, rgba(255,255,255,0.42), transparent), radial-gradient(1px 1px at 96.9% 26.2%, rgba(255,255,255,0.45), transparent), radial-gradient(1.5px 1.5px at 53.1% 20.6%, rgba(255,255,255,0.60), transparent), radial-gradient(1px 1.5px at 34.7% 1.8%, rgba(255,255,255,0.49), transparent), radial-gradient(1px 1px at 73.3% 55.1%, rgba(255,255,255,0.45), transparent), radial-gradient(2px 1px at 93.5% 10.6%, rgba(255,255,255,0.80), transparent), radial-gradient(2px 2px at 54.6% 88.9%, rgba(255,255,255,0.88), transparent), radial-gradient(1.5px 1px at 98.2% 34.3%, rgba(255,255,255,0.81), transparent), radial-gradient(1px 2px at 98.9% 98.2%, rgba(255,255,255,0.81), transparent), radial-gradient(1px 1px at 62.5% 88.0%, rgba(255,255,255,0.59), transparent), radial-gradient(1px 1px at 66.5% 38.1%, rgba(255,255,255,0.63), transparent), radial-gradient(1.5px 1px at 69.3% 4.5%, rgba(255,255,255,0.45), transparent), radial-gradient(1.5px 2px at 0.4% 36.4%, rgba(255,255,255,0.53), transparent), radial-gradient(1.5px 1px at 3.4% 88.2%, rgba(255,255,255,0.47), transparent), radial-gradient(1px 1px at 33.5% 8.4%, rgba(255,255,255,0.50), transparent), radial-gradient(1px 1px at 50.5% 0.5%, rgba(255,255,255,0.50), transparent), radial-gradient(1px 1px at 40.0% 4.2%, rgba(255,255,255,0.36), transparent), radial-gradient(1.5px 1px at 8.4% 95.8%, rgba(255,255,255,0.82), transparent), radial-gradient(1px 2px at 76.4% 72.1%, rgba(255,255,255,0.62), transparent), radial-gradient(1.5px 1px at 4.4% 83.5%, rgba(255,255,255,0.84), transparent), radial-gradient(2px 1px at 91.0% 75.3%, rgba(255,255,255,0.66), transparent), radial-gradient(1px 1px at 8.5% 4.2%, rgba(255,255,255,0.70), transparent), radial-gradient(1px 2px at 83.6% 55.9%, rgba(255,255,255,0.70), transparent), radial-gradient(1px 2px at 26.4% 45.7%, rgba(255,255,255,0.39), transparent), radial-gradient(1px 1px at 74.6% 47.4%, rgba(255,255,255,0.80), transparent), radial-gradient(1.5px 1px at 72.9% 20.5%, rgba(255,255,255,0.76), transparent), radial-gradient(2px 2px at 84.6% 7.7%, rgba(255,255,255,0.85), transparent), radial-gradient(1.5px 1px at 61.7% 64.3%, rgba(255,255,255,0.39), transparent), radial-gradient(1px 1.5px at 25.4% 74.3%, rgba(255,255,255,0.52), transparent), radial-gradient(1px 1px at 48.2% 48.6%, rgba(255,255,255,0.88), transparent), radial-gradient(1px 1px at 67.6% 29.1%, rgba(255,255,255,0.63), transparent), radial-gradient(2px 2px at 46.6% 11.9%, rgba(255,255,255,0.84), transparent), radial-gradient(1px 1.5px at 97.8% 93.6%, rgba(255,255,255,0.36), transparent), radial-gradient(2px 1px at 82.0% 96.8%, rgba(255,255,255,0.60), transparent), radial-gradient(1.5px 2px at 21.0% 94.6%, rgba(255,255,255,0.47), transparent), radial-gradient(1px 1px at 74.7% 26.2%, rgba(255,255,255,0.55), transparent), radial-gradient(1.5px 1px at 70.3% 23.1%, rgba(255,255,255,0.84), transparent), radial-gradient(2px 2px at 2.5% 0.4%, rgba(255,255,255,0.62), transparent), radial-gradient(2px 2px at 30.2% 14.1%, rgba(255,255,255,0.54), transparent), radial-gradient(1.5px 1px at 84.0% 0.2%, rgba(255,255,255,0.76), transparent), radial-gradient(2px 1px at 94.0% 19.6%, rgba(255,255,255,0.36), transparent); }

/* =================== V5.1: kompaktiškesnis procesas, trumpesnis žaidimas telefone, suspaustas hero, demonstracijų indikatorius =================== */

/* ---------- Demonstracijų indikatorius (vietoj judančios 6 pavyzdžių juostos) ---------- */

/* ---------- Hero telefone: mažiau vertikalių tarpų, CTA anksčiau ---------- */
@media (max-width: 640px) {
  .vsx-v5 .vsx-hero { padding-top: 20px; }
  .vsx-v5 .vsx-hero__copy { gap: 14px; }
  .vsx-v5 .vsx-hero .vsx-eyebrow { font-size: 12.5px; margin: 0; }
  .vsx-v5 .vsx-hero h1 { font-size: clamp(34px, 9.8vw, 44px); line-height: 1; }
  .vsx-v5 .vsx-hero .vsx-lead { font-size: 16.5px; line-height: 1.5; }
  .vsx-v5 .vsx-hero__actions { margin-top: 2px; gap: 10px; }
  .vsx-v5 .vsx-hero__facts { padding-top: 14px; margin-top: 2px; }
}

/* 360 px: demonstracijų skirtukų pavadinimai telpa be daugtaškio */
@media (max-width: 380px) {
  .vsx-show__tab { font-size: 13px; padding: 0 3px; letter-spacing: -0.01em; }
}

/* ---------- Procesas kompiuteryje: raketos blokas ~36 % pločio ir 460 px aukščio, žingsniai šalia ---------- */
.vsx-v5 .vsx-steps-wrap { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); gap: clamp(32px, 4.5vw, 64px); align-items: start; }
.vsx-v5 .vsx-pad { top: 96px; height: 460px; max-height: calc(100vh - 120px); min-height: 360px; }
.vsx-pad__num { font-size: clamp(76px, 22cqh, 120px); }
.vsx-pad__rocket { width: 64px; height: 64px; margin: 0 0 -32px -32px; }
.vsx-v5 .vsx-steps li, .vsx-v5 .vsx-steps li + li { padding: 22px 0; }
.vsx-v5 .vsx-steps li:first-child { padding-top: 6px; }
.vsx-v5 .vsx-steps li:not(:last-child)::before,
.vsx-v5 .vsx-steps li:not(:last-child)::after { top: calc(22px + 64px); bottom: -14px; }
.vsx-v5 .vsx-steps li:first-child:not(:last-child)::before,
.vsx-v5 .vsx-steps li:first-child:not(:last-child)::after { top: 70px; }
.vsx-v5 .vsx-steps h3 { font-size: clamp(22px, 1.8vw, 28px); }

/* ---------- Procesas telefone ir planšetėje: kompaktiška raketos/progreso juosta prie žingsnių ---------- */
@media (max-width: 900px) {
  .vsx-v5 .vsx-steps-wrap { grid-template-columns: 1fr; gap: 20px; }
  .vsx-v5 .vsx-pad { display: block; position: sticky; top: 72px; z-index: 3; height: 60px; min-height: 0; max-height: none; }
  .vsx-v5 .vsx-pad__sky { border-radius: 14px; background: linear-gradient(90deg, #02040A, #071330 70%, #0B1D4A); box-shadow: 0 10px 30px rgba(0,0,0,.45); }
  .vsx-v5 .vsx-pad__ground { display: none; }
  .vsx-v5 .vsx-pad__num { left: 16px; top: 50%; margin-top: -.5em; font-size: 32px; -webkit-text-stroke: 1.5px rgba(143,176,255,.85); }
  .vsx-v5 .vsx-pad__track { left: 60px; right: 26px; top: 50%; bottom: auto; width: auto; height: 2px; margin: -1px 0 0; }
  .vsx-v5 .vsx-pad__trail { background: linear-gradient(to right, #245BFF, #8FB0FF 70%, #fff); transform-origin: 0 50%; transform: scaleX(var(--p, 1)); }
  .vsx-v5 .vsx-pad__rocket { left: 60px; top: 50%; bottom: auto; width: 30px; height: 30px; margin: -15px 0 0 -15px; filter: drop-shadow(0 0 10px rgba(76,125,255,.6));
    transform: translate3d(calc(var(--p, 1) * (100cqw - 86px)), 0, 0); }
  .vsx-v5 .vsx-pad__rocket svg { rotate: 90deg; }
  .vsx-v5 .vsx-pad__flame { left: auto; right: 82%; top: 50%; width: 22px; height: 10px; margin: -5px 0 0; border-radius: 30% 70% 70% 30% / 50%; background: radial-gradient(ellipse at 90% 50%, #fff, #8FB0FF 35%, rgba(36,91,255,0) 75%); }
  .vsx-v5 .vsx-steps li, .vsx-v5 .vsx-steps li + li { padding: 0 0 26px; }
  .vsx-v5 .vsx-steps li:not(:last-child)::before, .vsx-v5 .vsx-steps li:not(:last-child)::after,
  .vsx-v5 .vsx-steps li:first-child:not(:last-child)::before, .vsx-v5 .vsx-steps li:first-child:not(:last-child)::after { top: 64px; bottom: 8px; }
}

/* ---------- Mini žaidimas: žyma „Prieš“ / „Po“, pradinis maketas nebeatrodo neužsikrovęs ---------- */
.vsx-game__view { background: #F3F5F9; }
.vsx.js .vsx-game:not(.fix-struct) .vsx-game__view { background: #EEF0F4; }
.vsx-mock__nav-weak { color: #64748B; }
.vsx-mock__nav-weak b { color: #475569; }
.vsx-mock__h-weak { color: #475569; }
.vsx-mock__t-weak { color: #64748B; }
.vsx-mock__c-weak { color: #64748B; border-color: #CBD5E1; background: #fff; }
.vsx-game__tag { margin-left: auto; display: grid; pointer-events: none; font: 700 12px/1 var(--vsx-font); letter-spacing: .08em; text-transform: uppercase; }
.vsx-game__tag b { grid-area: 1 / 1; justify-self: end; padding: 5px 10px; border-radius: 999px; }
/* Be JS maketas rodomas sutvarkytas, todėl tada matoma tik „Po“ */
.vsx-game__tag-pre { background: #FFF1D6; color: #7A4B00; border: 1px solid #F2C46D; opacity: 0; transform: scale(.85); }
.vsx-game__tag-post { background: #DCFCE7; color: #14532D; border: 1px solid #86EFAC; }
.vsx.js .vsx-game:not(.is-done) .vsx-game__tag-pre { opacity: 1; transform: none; }
.vsx.js .vsx-game:not(.is-done) .vsx-game__tag-post { opacity: 0; transform: scale(.85); }
@media (prefers-reduced-motion: no-preference) {
  .vsx.js .vsx-game__tag b { transition: opacity .35s var(--vsx-ease), transform .45s var(--vsx-ease); }
  .vsx.js .vsx-game.is-done .vsx-game__tag-post { transition-delay: .9s; }}

/* Telefone: demonstracinis langas ~36 % žemesnis (4:5 → 5:4), maketas išdėstytas dviem stulpeliais */
@media (max-width: 640px) {
  .vsx-game__view { aspect-ratio: 5 / 4; }
  .vsx-game__bar { height: 32px; }
  .vsx-game__tag { font-size: 11px; }
  .vsx-game__tag b { padding: 4px 8px; }
}
@container (max-width: 560px) and (max-aspect-ratio: 3 / 2) and (min-aspect-ratio: 1 / 1) {
  .vsx-mock { --u: 1.55cqw; grid-template-rows: auto 1fr; gap: calc(var(--u) * 2.6); padding: calc(var(--u) * 3) calc(var(--u) * 3.4); }
  .vsx-mock__body { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); grid-template-rows: none; gap: calc(var(--u) * 3); align-items: center; }
  .vsx-mock__nav-weak, .vsx-mock__nav-strong { font-size: calc(var(--u) * 1.9); }
  .vsx-mock__nav-weak b, .vsx-mock__nav-strong b { font-size: calc(var(--u) * 2.5); }
  .vsx-mock__nav-weak span:nth-child(n+5) { display: none; }
  .vsx-mock__nav-strong span { display: none; }
  .vsx-mock__nav-strong em { font-size: calc(var(--u) * 1.9); }
  .vsx-mock__h-weak { font-size: calc(var(--u) * 3.2); text-align: left; }
  .vsx-mock__h-strong { font-size: calc(var(--u) * 5.4); }
  .vsx-mock__h-strong small { font-size: calc(var(--u) * 1.7); }
  .vsx-mock__t-weak { font-size: calc(var(--u) * 2); line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; text-align: left; }
  .vsx-mock__t-strong p { font-size: calc(var(--u) * 2.2); }
  .vsx-mock__t-strong ul { font-size: calc(var(--u) * 2); }
  .vsx-mock__t-strong li:nth-child(3) { display: none; }
  .vsx-mock__c-weak { font-size: calc(var(--u) * 2); }
  .vsx-mock__c-strong { gap: calc(var(--u) * 2); }
  .vsx-mock__c-strong em { font-size: calc(var(--u) * 2.2); padding: calc(var(--u) * 1.3) calc(var(--u) * 2.2); }
  .vsx-mock__c-strong u { display: none; }
  .vsx-mock__media { height: 100%; min-height: 0; }}

/* =================== V5.1.1: vieninga kampų sistema (16 / 20 / 24 px), 44 px paspaudimo zonos, niekas neišlenda =================== */
.vsx { --vsx-r-sm: 16px; --vsx-r-md: 20px; --vsx-r-lg: 24px; }
.vsx-browser, .vsx-game__browser { border-radius: var(--vsx-r-md); }
.vsx-card__media { border-radius: calc(var(--vsx-r-md) - 1px) calc(var(--vsx-r-md) - 1px) 0 0; }
.vsx-bento > .vsx-card:nth-child(6) .vsx-card__media { border-radius: calc(var(--vsx-r-md) - 1px) 0 0 calc(var(--vsx-r-md) - 1px); }
.vsx-choice, .vsx-game__result, .vsx-trust__link { border-radius: var(--vsx-r-sm); }
.vsx-pad__sky, .vsx-v5 .vsx-cta { border-radius: var(--vsx-r-lg); }

@media (max-width: 900px) {
  .vsx-bento > .vsx-card:nth-child(6) .vsx-card__media { border-radius: calc(var(--vsx-r-md) - 1px) calc(var(--vsx-r-md) - 1px) 0 0; }}
.vsx-v5 .vsx-game-sec { padding-bottom: clamp(32px, 4vw, 64px); }
@media (max-width: 640px) {
  .vsx-browser { border-radius: var(--vsx-r-sm); }
  .vsx-v5 .vsx-pad__sky { border-radius: var(--vsx-r-sm); }
  
  .vsx-phones__p { width: 42%; }
  .vsx-phones__p--1 { left: 4%; }
  .vsx-phones__p--2 { left: 29%; }
  .vsx-phones__p--3 { right: 4%; }}

/* ---------- Sumažintas judesys: kokybiška statiška versija ---------- */
@media (prefers-reduced-motion: reduce) {
  .vsx *, .vsx *::before, .vsx *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .vsx-btn:hover, .vsx-trust__link:hover { transform: none; }
}

/* Ekrano skaitytuvams. */
.vsx-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.vsx-skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--vsx-text); color: #fff; padding: 10px 16px; border-radius: var(--vsx-r-sm); }
.vsx-skip:focus { top: 12px; }

/* Bendros taisyklės iš WordPress block-library, kurios pagrindiniame puslapyje reikalingos (pats failas čia nebekraunamas). */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
:root{--wp--preset--font-size--normal:16px;--wp--preset--font-size--huge:42px}
:where(figure){margin:0 0 1em}
html :where([style*=border-width]){border-style:solid}
ol,ul{box-sizing:border-box}

/* 2026-10-15: be nuolatinių dekoratyvių judesių. Elementai lieka statiški; judesys – tik hero demonstracijų keitimas,
   proceso žingsniai, kortelių pakilimas ir mygtukų mikroefektai. */
.vsx.js .vsx-geo__glow, .vsx.js .vsx-geo__ring, .vsx.js .vsx-geo__square, .vsx.js .vsx-geo__bar,
.vsx.js .vsx-aura, .vsx.js .vsx-cta::after, .vsx-v5.js .vsx-stars--2, .vsx-v5.js .vsx-orbit { animation: none !important; }
