/* Porovnanie: rozdrobené vs. jeden celok */
.vs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(12px,1.6vw,22px);align-items:stretch}
.vs-card{position:relative;border-radius:var(--r-xl);padding:clamp(24px,3vw,44px);display:flex;flex-direction:column;gap:clamp(18px,2.4vw,30px);overflow:hidden;isolation:isolate}
.vs-card h3{font-family:var(--display);font-weight:500;font-size:clamp(1.3rem,1.9vw,1.8rem);letter-spacing:-.02em;line-height:1.15}
.vs-a{background:var(--card);border:1px solid var(--line);color:var(--ink)}
.vs-b{color:#fff;background:linear-gradient(150deg,#7A22BC,#9137CD 45%,#C56BF5)}
.vs-b::before{content:"";position:absolute;inset:0;background:var(--grain);mix-blend-mode:soft-light;opacity:.5;z-index:-1}
.vs-arrow{align-self:center;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--paper,#fff)}
.vs-arrow .i{width:20px;height:20px}

/* vľavo: rozhádzané štítky */
.vs-chips{flex:1;min-height:250px;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:14px 12px;padding:10px 0}
.vs-chip{display:inline-flex;align-items:center;gap:9px;padding:11px 16px;border-radius:var(--pill);background:var(--mist);color:var(--ink-2);font-size:.95rem;border:1px dashed rgba(145,55,205,.35);rotate:calc((var(--k) - 2) * 3.5deg);translate:calc((var(--k) - 2) * 7px) calc(sin(var(--k) * 2rad) * 12px)}
.vs-chip:nth-child(even){rotate:calc((var(--k) - 2) * -4deg)}
.vs-chip .i{width:17px;height:17px;opacity:.7}

/* vpravo: ikony na obežnej dráhe okolo stredu */
.vs-orbit{flex:1;position:relative;min-height:250px;display:grid;place-items:center;--r:clamp(104px,9vw,116px)}
.vs-orbit::before{content:"";position:absolute;width:calc(var(--r)*2);height:calc(var(--r)*2);border-radius:50%;border:1px dashed rgba(255,255,255,.4)}
.vs-orbit ul{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.vs-orbit li{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateY(calc(var(--r)*-1)) rotate(calc(var(--a)*-1))}
.vs-orbit li span{position:absolute;left:-26px;top:-26px;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 10px 26px rgba(50,8,90,.25),inset 0 1px 0 rgba(255,255,255,.35)}
.vs-orbit li span .i{width:22px;height:22px}
.vs-orbit li b{position:absolute;left:-50px;top:30px;width:100px;text-align:center;font-weight:500;font-size:.74rem;opacity:.9;line-height:1.2}
.vs-core{position:relative;width:88px;height:88px;border-radius:50%;display:grid;place-items:center;text-align:center;background:#fff;color:#5B159A;font-family:var(--display);font-weight:600;font-size:.86rem;letter-spacing:-.01em;line-height:1.1;box-shadow:0 0 0 10px rgba(255,255,255,.16),0 18px 44px rgba(50,8,90,.35)}

.vs-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:.97rem}
.vs-points li{display:flex;gap:10px;align-items:flex-start;line-height:1.4}
.vs-points .i{flex:none;width:20px;height:20px;margin-top:1px;padding:3px;border-radius:50%}
.vs-a .vs-points{color:var(--ink-2)}
.vs-a .vs-points .i{background:rgba(179,38,30,.1);color:#B3261E}
.vs-b .vs-points .i{background:rgba(255,255,255,.22);color:#fff}

@media (max-width:860px){
  .vs{grid-template-columns:minmax(0,1fr)}
  .vs-arrow{justify-self:center;rotate:90deg;margin:-4px 0}
  .vs-chips{min-height:0;padding:6px 0 10px}
  .vs-orbit{min-height:320px}
}