.vls {
--b-primary: #005BC9; --b-fill: #0068E8; --b-fill-hover: #015FD2; --b-2: #0072FC;
--b-soft: #E6EFFA; --b-tint: #BDD4F1; --ink: #0A1B33;
--grad: linear-gradient(135deg, #005BC9 0%, #0068E8 100%);
--text: #354356; --muted: #5D6878; --paper: #FFFCF8; --surface: #F7F8F8; --zone: #F2F7FD;
--ok-bg: #E3F4E9; --ok-fg: #116640; --warn-bg: #FAECDC; --warn-fg: #72491D;
--sh-sm: 0 2px 10px rgba(10,27,51,.06); --sh-md: 0 8px 24px -4px rgba(10,27,51,.09);
--sh-lg: 0 24px 48px -12px rgba(10,27,51,.14); --sh-glow: 0 10px 30px -6px rgba(0,114,252,.26);
--r-card: 24px; --r-media: 20px;
--ease-in: cubic-bezier(.23,1,.32,1); --ease-ui: cubic-bezier(.34,1.2,.64,1); --ease-std: cubic-bezier(.2,0,0,1);
--f-head: "Poppins", system-ui, sans-serif; --f-body: "Open Sans", system-ui, sans-serif;
position: relative; font-family: var(--f-body); font-size: 17px; line-height: 1.7; color: var(--text);
box-sizing: border-box; overflow-x: clip;
}
.vls *, .vls *::before, .vls *::after { box-sizing: border-box; }
.vls :where(h1,h2,h3,p,ul,ol,dl,dd,figure) { margin: 0; padding: 0; } .vls :is(p,h1,h2,h3,ul,ol,dl,dd,figure) { margin-bottom: 0; }
.vls :where(ul,ol) { list-style: none; }
.vls a { text-decoration: none; }
.vls img { max-width: 100%; display: block; }
.vls-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.vls-sec { padding: 96px 0; }
.vls-h1, .vls-h2, .vls-h3 { font-family: var(--f-head); font-weight: 600; color: var(--ink); }
.vls .vls-h1 { font-size: 56px; line-height: 1.08; letter-spacing: -.02em; }
.vls .vls-h2 { font-size: 38px; line-height: 1.15; letter-spacing: -.015em; }
.vls .vls-h3 { font-size: 20px; line-height: 1.3; }
.vls .vls-lead { font-size: 18px; color: var(--muted); margin-top: 16px; max-width: 60ch; }
.vls-head { margin-bottom: 48px; }
.vls-head--c { text-align: center; }
.vls-head--c .vls-lead { margin-left: auto; margin-right: auto; }
.vls-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; } .vls-note { position: absolute; top: 16px; left: 16px; z-index: 5; font: 600 13px/1.4 var(--f-body); background: var(--ink); color: #fff; padding: 6px 12px; border-radius: 999px; }
.vls-note b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-right: 6px; border-radius: 999px; background: var(--b-fill); } .vls .vls-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 26px;
border-radius: 999px; border: 0; font: 600 16px/1 var(--f-head); cursor: pointer;
transition: transform 160ms var(--ease-ui), box-shadow 260ms var(--ease-std), background-color 160ms var(--ease-std), color 160ms var(--ease-std); }
.vls .vls-btn:focus-visible { outline: 2px solid var(--b-fill); outline-offset: 2px; }
.vls .vls-btn--primary { background-color: var(--b-fill); background-image: var(--grad); color: #fff; }
.vls .vls-btn--light { background: #fff; color: var(--b-primary); box-shadow: var(--sh-sm); }
.vls .vls-btn--white { background: #fff; color: var(--b-primary); }
.vls .vls-btn--full { width: 100%; }
.vls-btn .vls-arrow { transition: transform 260ms var(--ease-in); }
@media (hover: hover) and (pointer: fine) {
.vls .vls-btn--primary:hover { background-image: none; background-color: var(--b-fill-hover); color: #fff; box-shadow: var(--sh-md), var(--sh-glow); }
.vls .vls-btn--light:hover, .vls .vls-btn--white:hover { color: #024EAB; box-shadow: var(--sh-md); }
.vls .vls-btn:hover .vls-arrow { transform: translateX(4px); }
}
.vls-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 32px; } .vls-list { display: grid; gap: 10px; margin-top: 24px; }
.vls-list li { display: flex; gap: 10px; align-items: flex-start; }
.vls-check { flex: 0 0 auto; margin-top: 5px; color: var(--b-primary); }
.vls-chip-sm { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: #fff; box-shadow: var(--sh-sm); font: 600 13px/1.5 var(--f-body); color: var(--ink); }
.vls-chip-sm--down { color: var(--ok-fg); background: var(--ok-bg); box-shadow: none; }
.vls-chip-sm--brand { background: var(--b-soft); box-shadow: none; color: #024EAB; }
.vls-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.vls-dot--a { background: var(--b-fill); }
.vls-dot--b { background: #66A6F6; }
.vls-dot--pre { background: #8C959F; }
.vls-legend { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; font-size: 14px; color: var(--muted); }
.vls-legend span { display: inline-flex; align-items: center; gap: 6px; }
.vls-badge { font: 600 13px/1.5 var(--f-head); font-style: normal; padding: 2px 10px; border-radius: 999px; background: var(--b-soft); color: #024EAB; }
.vls-badge--ok { background: var(--ok-bg); color: var(--ok-fg); }
.vls-badge--warn { background: var(--warn-bg); color: var(--warn-fg); } .vls-mac { margin: 0; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 1px 0 rgba(10,27,51,.04), var(--sh-lg), 0 40px 80px -30px rgba(0,91,201,.35); }
.vls-mac__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 40px; padding: 0 14px; background: #F3F5F8; }
.vls-mac__dots { display: flex; gap: 8px; }
.vls-mac__dots i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; }
.vls-mac__dots i:nth-child(2) { background: #FEBC2E; }
.vls-mac__dots i:nth-child(3) { background: #28C840; }
.vls-mac__url { display: inline-flex; align-items: center; gap: 6px; padding: 4px 40px; border-radius: 8px; background: #E7EAEF; font: 500 13px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--f-body); color: #4A5565; }
.vls-mac img { width: 100%; height: auto; } .vls-iphone { position: relative; display: block; margin: 0; aspect-ratio: 1057 / 2236; padding: 0; background: none; box-shadow: none; filter: drop-shadow(0 28px 36px rgba(16,24,40,.20)) drop-shadow(0 6px 10px rgba(16,24,40,.12)); }
.vls-iphone::after { content: ""; position: absolute; inset: 0; z-index: 3; background: url(//vlmedia.rs/wp-content/themes/astra-child/assets/img/iphone-okvir.webp) center / 100% 100% no-repeat; pointer-events: none; }
.vls-iphone > img, .vls-iphone > .vlk-ios__ekran { position: absolute; left: 5.25%; top: 2.15%; width: 89.4%; height: 95.25%; max-width: none; max-height: none; border-radius: 14.6% / 6.5%; overflow: hidden; }
.vls-iphone > img { object-fit: cover; object-position: top; background: #0B0B0D; }
.vls-iphone__island { display: none; } .vls .vls-ik--logo { display: inline-block; flex: 0 0 auto; max-width: none; height: auto; object-fit: contain; vertical-align: middle; } .vls-hero { padding: 128px 0 0; background: linear-gradient(180deg, #CFE2FA 0%, #E3EEFC 38%, #F4F8FE 70%, #FFFFFF 100%); text-align: center; }
.vls-hero__nebo { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.vls-hero__nebo i { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,0)); filter: blur(6px); }
.vls-hero__nebo i:nth-child(1) { width: 720px; height: 260px; top: 30px; left: -160px; }
.vls-hero__nebo i:nth-child(2) { width: 620px; height: 220px; top: 120px; right: -120px; }
.vls-hero__nebo i:nth-child(3) { width: 900px; height: 300px; top: 380px; left: 20%; opacity: .8; }
.vls-hero__nebo i:nth-child(4) { width: 460px; height: 180px; top: -40px; left: 40%; opacity: .7; }
.vls-hero__tekst { position: relative; z-index: 1; }
.vls-hero .vls-h1 { max-width: 920px; margin: 0 auto; }
.vls-hero .vls-lead { margin: 20px auto 0; }
.vls-hero__scena { position: relative; z-index: 1; margin-top: 64px; padding-bottom: 72px; }
.vls-hero .vls-mac { max-width: 1060px; max-height: 600px; margin: 0 auto; }
.vls-hero__scena::after { content: ""; position: absolute; left: -24px; right: -24px; bottom: 0; height: 52%; background: linear-gradient(180deg, rgba(255,255,255,0), #fff 70%); pointer-events: none; z-index: 1; }
.vls-float { position: absolute; z-index: 2; display: flex; gap: 12px; align-items: center; text-align: left; padding: 12px 16px; border-radius: 18px; background: rgba(255,255,255,.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--sh-md); }
.vls-float b { display: block; font: 600 14px/1.3 var(--f-head); color: var(--ink); }
.vls-float small { display: block; font-size: 13px; color: var(--muted); line-height: 1.4; }
.vls-float__ik { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--b-soft); color: var(--b-primary); }
.vls-float__ik--ok { background: var(--ok-bg); color: var(--ok-fg); }
.vls-float__ik .vls-check { margin: 0; color: inherit; }
.vls-float--l { left: 0; top: 18%; animation: vls-lebdi 6s ease-in-out infinite; }
.vls-float--r { right: 0; top: 44%; animation: vls-lebdi 7s ease-in-out -2s infinite; }
@keyframes vls-lebdi { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .vls-bento__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.vls-tile { position: relative; display: flex; flex-direction: column; padding: 28px; border-radius: var(--r-card); background: linear-gradient(180deg, #F3F8FE 0%, #E8F1FC 100%); overflow: hidden; }
.vls-tile--w2 { grid-column: span 2; }
.vls-tile > p { font-size: 15px; line-height: 1.6; color: var(--muted); margin-top: 6px; }
.vls-viz { position: relative; height: 200px; margin: -4px -4px 24px; display: grid; place-items: center; } .vls-mini-mac { width: min(100%, 440px); border-radius: 12px; background: #fff; box-shadow: var(--sh-md); overflow: hidden; }
.vls-mini-mac__bar { display: flex; gap: 6px; padding: 10px 12px; background: #F3F5F8; }
.vls-mini-mac__bar i { width: 9px; height: 9px; border-radius: 50%; background: #FF5F57; }
.vls-mini-mac__bar i:nth-child(2) { background: #FEBC2E; } .vls-mini-mac__bar i:nth-child(3) { background: #28C840; }
.vls-rings { display: flex; justify-content: space-around; padding: 22px 12px 20px; }
.vls-ring { position: relative; display: grid; justify-items: center; gap: 6px; width: 96px; }
.vls-ring svg { width: 72px; height: 72px; transform: rotate(-90deg); }
.vls-ring circle { fill: none; stroke-width: 6; }
.vls-ring__bg { stroke: var(--b-soft); }
.vls-ring__fg { stroke: var(--b-fill); stroke-linecap: round; stroke-dasharray: 100 110; stroke-dashoffset: 100; transition: stroke-dashoffset 1.2s var(--ease-in) .2s; }
.is-in .vls-ring__fg { stroke-dashoffset: calc((100 - var(--v)) * 1px); }
.vls-ring b { position: absolute; top: 22px; font: 600 20px/1 var(--f-head); color: var(--ink); }
.vls-ring small { font-size: 13px; color: var(--muted); } .vls-viz--app { place-items: start center; overflow: hidden; margin-bottom: 20px; border-radius: 18px 18px 0 0; }
.vls-iphone--mini { width: 150px; margin-top: 14px; transform: rotate(-4deg); } .vls-rows { width: 100%; display: grid; gap: 8px; }
.vls-rows li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: var(--sh-sm); }
.vls-rows b { display: block; font: 600 14px/1.3 var(--f-head); color: var(--ink); }
.vls-rows small { font-size: 12px; color: var(--muted); } .vls-viz--ai { align-content: center; justify-items: stretch; gap: 8px; }
.vls-bubble { max-width: 88%; padding: 8px 12px; border-radius: 16px 16px 16px 4px; background: #fff; box-shadow: var(--sh-sm); font-size: 14px; line-height: 1.45; color: var(--ink); }
.vls-bubble--ai { justify-self: end; border-radius: 16px 16px 4px 16px; background: var(--grad); color: #fff; }
.vls-viz--ai .vls-chip-sm { justify-self: end; } .vls-post { width: 100%; max-width: 230px; padding: 10px; border-radius: 16px; background: #fff; box-shadow: var(--sh-md); display: grid; gap: 8px; }
.vls-post__top { display: flex; gap: 8px; align-items: center; }
.vls-post__top i { width: 28px; height: 28px; border-radius: 50%; background: var(--grad); }
.vls-post__top b { display: block; font: 600 13px/1.2 var(--f-head); color: var(--ink); }
.vls-post__top small { font-size: 11px; color: var(--muted); }
.vls-post__img { height: 92px; border-radius: 10px; background: radial-gradient(circle at 30% 30%, #9CC4F7, transparent 60%), linear-gradient(135deg, #CFE2FA, #66A6F6); }
.vls-post .vls-chip-sm { justify-self: start; box-shadow: none; background: var(--b-soft); color: #024EAB; font-size: 12px; } .vls-viz--ads { display: block; height: 200px; }
.vls-line { width: 100%; height: 150px; overflow: visible; }
.vls-line path { fill: none; }
.vls-line__grid { stroke: rgba(10,27,51,.07); stroke-width: 1; }
.vls-line__a, .vls-line__b { stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 1.2; stroke-dashoffset: 1.06; transition: stroke-dashoffset 1.6s var(--ease-in) .2s; }
.vls-line__a { stroke: var(--b-fill); } .vls-line__b { stroke: #66A6F6; }
.is-in .vls-line__a, .is-in .vls-line__b { stroke-dashoffset: 0; }
.vls-viz--ads .vls-legend { margin-top: 14px; }
@media (max-width: 767px) { .vls-viz--ads { height: auto; } } .vls-3d__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.vls-3d__card { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 280px; padding: 36px; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--sh-sm); transition: transform 160ms var(--ease-ui), box-shadow 260ms var(--ease-std); }
.vls-3d__txt b { display: block; font: 600 30px/1.15 var(--f-head); }
.vls-3d__txt span { display: block; font: 500 30px/1.15 var(--f-head); }
.vls-3d__more { display: inline-flex; align-items: center; gap: 10px; font: 600 14px/1 var(--f-head); position: relative; z-index: 1; }
.vls-3d__more i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; }
.vls-3d__obj { position: absolute; right: 28px; top: 50%; transform: translateY(-50%); width: 40%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center; font-size: 13px; }
.vls-3d__obj em { font-style: normal; opacity: .8; }
.vls-3d--light { background: #fff; }
.vls-3d--light .vls-3d__txt b { color: var(--ink); } .vls-3d--light .vls-3d__txt span { color: var(--muted); }
.vls-3d--light .vls-3d__more { color: var(--ink); } .vls-3d--light .vls-3d__more i { background: var(--ink); color: #fff; }
.vls-3d--light .vls-3d__obj { background: radial-gradient(circle at 35% 30%, #fff, #DCE8F8); color: var(--muted); }
.vls-3d--brand { background: var(--grad); }
.vls-3d--brand .vls-3d__txt b, .vls-3d--brand .vls-3d__more { color: #fff; } .vls-3d--brand .vls-3d__txt span { color: #DCE9FB; }
.vls-3d--brand .vls-3d__more i { background: #fff; color: var(--b-primary); }
.vls-3d--brand .vls-3d__obj { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.35), rgba(255,255,255,.06)); color: #fff; }
.vls-3d--ink { background: var(--ink); }
.vls-3d--ink .vls-3d__txt b, .vls-3d--ink .vls-3d__more { color: #fff; } .vls-3d--ink .vls-3d__txt span { color: var(--b-tint); }
.vls-3d--ink .vls-3d__more i { background: #fff; color: var(--ink); }
.vls-3d--ink .vls-3d__obj { background: radial-gradient(circle at 35% 30%, rgba(102,166,246,.45), rgba(102,166,246,.05)); color: #fff; }
@media (hover: hover) and (pointer: fine) { .vls-3d__card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); } } .vls-orbit { background: linear-gradient(180deg, #fff 0%, var(--zone) 100%); }
.vls-orbit__scena { position: relative; width: min(100%, 520px); aspect-ratio: 1; margin: 0 auto; }
.vls-orbit__ring { position: absolute; inset: 0; margin: auto; border-radius: 50%; animation: vls-kruzi 70s linear infinite; }
.vls-orbit__ring--1 { width: 56%; height: 56%; background: radial-gradient(circle, rgba(0,104,232,0) 62%, rgba(0,104,232,.07) 63%, rgba(0,104,232,0) 72%); }
.vls-orbit__ring--2 { width: 96%; height: 96%; animation-duration: 110s; animation-direction: reverse; background: radial-gradient(circle, rgba(0,104,232,0) 66%, rgba(0,104,232,.06) 67%, rgba(0,104,232,0) 74%); }
.vls-orbit__ik { position: absolute; top: 50%; left: 50%; width: 0; height: 0; transform: rotate(calc(360deg / var(--n) * var(--i))) translateY(-50cqw); }
.vls-orbit__ring { container-type: inline-size; }
.vls-orbit__ik > span { position: absolute; left: -28px; top: -28px; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: var(--sh-md);
transform: rotate(calc(-360deg / var(--n) * var(--i))); animation: vls-kruzi-kontra 70s linear infinite; }
.vls-orbit__ring--2 .vls-orbit__ik > span { animation-duration: 110s; animation-direction: reverse; }
.vls-orbit__ik .vls-ik { display: block; width: 26px; height: 26px; object-fit: contain; }
.vls-orbit__centar svg { width: 60px; height: auto; }
.vls-orbit__centar { position: absolute; inset: 0; margin: auto; width: 116px; height: 116px; border-radius: 32px; display: grid; place-items: center; background: #fff; box-shadow: var(--sh-lg), var(--sh-glow); }
@keyframes vls-kruzi { to { transform: rotate(360deg); } }
@keyframes vls-kruzi-kontra { from { rotate: 0deg; } to { rotate: -360deg; } } .vls-case__card { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 32px; align-items: center; min-height: 460px; padding: 56px; border-radius: 32px; background: var(--grad); color: #fff; overflow: hidden; }
.vls-case__card::before { content: "AUTO RAD"; position: absolute; left: -10px; top: -30px; font: 700 180px/1 var(--f-head); letter-spacing: -.04em; color: rgba(255,255,255,.07); white-space: nowrap; pointer-events: none; }
.vls-case__txt { position: relative; z-index: 1; }
.vls .vls-case__ime { font: 700 44px/1.1 var(--f-head); letter-spacing: -.02em; color: #fff; }
.vls-case__txt p { margin-top: 14px; font-size: 18px; color: #fff; max-width: 42ch; }
.vls-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 28px; }
.vls-tags li { padding: 6px 14px; border-radius: 999px; background: rgba(10,27,51,.22); font: 600 14px/1.4 var(--f-body); color: #fff; }
.vls-case__scena { position: relative; height: 100%; min-height: 360px; }
.vls-case__glow { position: absolute; inset: 10% 15%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.35), rgba(255,255,255,0)); }
.vls-iphone--case { position: absolute; width: 230px; left: 50%; bottom: -150px; transform: translateX(-50%) rotate(-8deg); }
.vls-case__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; text-align: center; }
.vls-case__stats dt { font: 600 72px/1 var(--f-head); letter-spacing: -.03em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vls-case__stats dd { margin-top: 8px; color: var(--muted); } .vls-app__card { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: center; padding: 48px 56px 0; border-radius: 32px; background: linear-gradient(135deg, #E6EFFA 0%, #F4F8FE 60%, #E3EEFC 100%); overflow: hidden; }
.vls-app__scena { align-self: end; display: flex; justify-content: center; height: 380px; overflow: hidden; }
.vls .vls-iphone--app { width: 240px; height: auto; margin-bottom: -140px; }
.vls-app__txt { padding-bottom: 48px; }
.vls-stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.vls .vls-store { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 18px; border-radius: 14px; background: #000; color: #fff; transition: transform 160ms var(--ease-ui); }
.vls-store span { display: grid; font: 600 18px/1.1 -apple-system, BlinkMacSystemFont, "SF Pro Display", var(--f-head); }
.vls-store small { font-size: 11px; font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .vls .vls-store:hover { transform: translateY(-2px); } } .vls-price { background: var(--zone); }
.vls-toggle { display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; padding: 8px 16px; border-radius: 999px; background: #fff; box-shadow: var(--sh-sm); font: 600 15px/1 var(--f-head); color: var(--ink); cursor: pointer; }
.vls-toggle em { white-space: nowrap; font-style: normal; font-size: 12px; margin-left: 6px; padding: 3px 8px; border-radius: 999px; background: var(--ok-bg); color: var(--ok-fg); }
.vls-toggle__in { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vls-toggle i { position: relative; width: 44px; height: 26px; border-radius: 999px; background: #8C959F; transition: background-color 160ms var(--ease-std); }
.vls-toggle i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--sh-sm); transition: transform 160ms var(--ease-ui); }
.vls-toggle__in:checked + i { background: var(--b-fill); }
.vls-toggle__in:checked + i::after { transform: translateX(18px); }
.vls-toggle__in:focus-visible + i { outline: 2px solid var(--b-fill); outline-offset: 3px; }
.vls-price__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.vls-plan { position: relative; display: flex; flex-direction: column; padding: 32px; border-radius: var(--r-card); background: #fff; box-shadow: var(--sh-sm); }
.vls .vls-plan__ime { font: 600 24px/1.2 var(--f-head); color: var(--ink); }
.vls-plan__za { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--muted); min-height: 3em; }
.vls-plan__cena { margin: 20px 0 4px; font: 600 48px/1 var(--f-head); letter-spacing: -.02em; color: var(--ink); }
.vls-plan__cena small { font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-left: 4px; }
.vls-plan .vls-list { flex: 1; align-content: start; margin: 20px 0 28px; font-size: 15px; line-height: 1.5; }
.vls-plan--top { background: var(--grad); box-shadow: var(--sh-md), var(--sh-glow); color: #fff; }
.vls-plan--top .vls-plan__ime, .vls-plan--top .vls-plan__cena, .vls-plan--top .vls-plan__za, .vls-plan--top .vls-plan__cena small, .vls-plan--top .vls-check { color: #fff; }
.vls-plan__badge { position: absolute; top: 28px; right: 28px; padding: 4px 12px; border-radius: 999px; background: #fff; color: var(--b-primary); font: 600 13px/1.5 var(--f-head); }
.vls-unsure { position: relative; display: grid; justify-items: center; text-align: center; gap: 10px; margin-top: 32px; padding: 40px 24px; border-radius: var(--r-card); overflow: hidden;
background: radial-gradient(60% 120% at 15% 20%, rgba(102,166,246,.45), transparent 60%), radial-gradient(50% 120% at 85% 80%, rgba(0,114,252,.28), transparent 60%), linear-gradient(90deg, #EAF2FD, #F8FBFF 50%, #EAF2FD); }
.vls-unsure__foto { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px #fff, var(--sh-md); }
.vls-unsure p { color: var(--muted); max-width: 48ch; }
.vls-unsure .vls-btn { margin-top: 8px; } .vls-kr__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 96px; align-items: start; }
.vls-kr__levo { position: sticky; top: 140px; }
.vls-kr__nav { position: relative; display: grid; margin-top: 48px; padding-left: 24px; }
.vls-kr__nav::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--b-soft); }
.vls-kr__nav li { position: relative; padding: 10px 0; font: 600 18px/1.35 var(--f-head); color: #8B96A5; transition: color 320ms var(--ease-std); }
.vls-kr__nav li::before { content: ""; position: absolute; left: -24px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--b-fill); transform: scaleY(0); transition: transform 360ms var(--ease-in); }
.vls-kr__nav li.is-gotovo { color: var(--text); }
.vls-kr__nav li.is-on { color: var(--ink); }
.vls-kr__nav li.is-on::before { transform: scaleY(1); }
.vls-kr__koraci { display: grid; gap: 128px; }
.vls-kr__k { display: grid; gap: 28px; }
.vls-kr__scena { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 40px; border-radius: var(--r-card); background: var(--zone); overflow: hidden; }
.vls-kr__txt .vls-h3 { font-size: 26px; }
.vls .vls-kr__txt p { margin-top: 10px; font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 52ch; }
@media (min-width: 1024px) {
.vls-js .vls-kr__k { opacity: .32; transition: opacity 480ms var(--ease-std); }
.vls-js .vls-kr__k.is-on { opacity: 1; }
} .vls-kr__chat { display: grid; gap: 14px; width: min(100%, 400px); }
.vls .vls-kr__msg { justify-self: start; max-width: 88%; padding: 14px 18px; border-radius: 22px 22px 22px 6px; background: #fff; box-shadow: var(--sh-md); font-size: 16px; line-height: 1.45; color: var(--ink); }
.vls-kr__msg b { display: block; margin-bottom: 4px; font: 600 14px/1.3 var(--f-head); color: var(--b-primary); }
.vls-kr__msg small { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.vls .vls-kr__msg--mi { justify-self: end; border-radius: 22px 22px 6px 22px; background-color: var(--b-fill); background-image: var(--grad); color: #fff; box-shadow: var(--sh-glow); }
.vls-kr__msg--mi small { color: rgba(255,255,255,.82); text-align: right; } .vls-kr__kal { display: grid; grid-template-columns: 88px 1fr; width: min(100%, 460px); border-radius: 22px; background: #fff; box-shadow: var(--sh-lg); overflow: hidden; }
.vls-kr__datum { display: grid; align-content: center; justify-items: center; gap: 4px; background: var(--b-soft); }
.vls-kr__datum span { font: 600 15px/1 var(--f-head); color: var(--b-primary); }
.vls-kr__datum b { font: 600 38px/1 var(--f-head); color: var(--ink); }
.vls-kr__dogadjaj { display: grid; gap: 4px; padding: 24px; }
.vls-kr__dogadjaj b { font: 600 18px/1.3 var(--f-head); color: var(--ink); }
.vls-kr__dogadjaj > span { font-size: 15px; line-height: 1.45; color: var(--muted); }
.vls-kr__odg { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.vls-kr__odg span { padding: 8px 14px; border-radius: 999px; background: var(--zone); font: 600 14px/1 var(--f-head); color: var(--text); }
.vls .vls-kr__odg .vls-kr__da { background: var(--b-fill); color: #fff; } .vls-kr__plan { display: grid; justify-items: center; gap: 36px; width: min(100%, 460px); }
.vls-kr__cvor { position: relative; display: inline-flex; justify-content: center; padding: 10px 16px; border-radius: 12px; background: #fff; box-shadow: var(--sh-sm); font: 600 15px/1.2 var(--f-head); color: var(--ink); white-space: nowrap; }
.vls-kr__cvor--glavni { background: var(--b-fill); color: #fff; box-shadow: var(--sh-glow); }
.vls-kr__cvor--glavni::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 18px; margin-left: -1px; background: var(--b-tint); }
.vls-kr__grane { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; justify-items: center; }
.vls-kr__grane::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: -18px; height: 2px; background: var(--b-tint); }
.vls-kr__grane .vls-kr__cvor::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 18px; margin-left: -1px; background: var(--b-tint); }
.vls-kr__rok { display: grid; grid-template-columns: 2fr 4fr 1.6fr; gap: 6px; width: 100%; }
.vls-kr__rok span { padding: 10px 12px; border-radius: 10px; font: 600 13px/1.2 var(--f-head); color: var(--ink); background: var(--b-soft); transform-origin: 0 50%; }
.vls .vls-kr__rok span:nth-child(2) { background: var(--b-fill); color: #fff; }
.vls .vls-kr__rok span:nth-child(3) { background: var(--b-tint); }
.vls-kr__rok b { grid-column: 1 / -1; justify-self: end; margin-top: 6px; font: 600 15px/1.3 var(--f-head); color: var(--ink); } .vls-kr__scena--sajt { padding: 40px 32px; }
.vls-kr__mac { width: 100%; }
.vls .vls-kr__kom { position: absolute; right: 24px; bottom: 24px; display: grid; gap: 2px; max-width: 230px; padding: 12px 14px; border-radius: 18px 18px 18px 6px; background: #fff; box-shadow: var(--sh-lg); font-size: 14px; line-height: 1.4; color: var(--text); }
.vls-kr__kom b { font: 600 13px/1.3 var(--f-head); color: var(--ink); }
.vls-kr__kom span { justify-self: start; margin-top: 6px; padding: 2px 10px; border-radius: 999px; background: var(--ok-bg); color: var(--ok-fg); font: 600 12px/1.6 var(--f-head); } .vls .vls-kr__scena--plava { background-color: var(--b-fill); background-image: var(--grad); }
.vls-kr__live { display: grid; gap: 14px; width: min(100%, 400px); padding: 28px; border-radius: 22px; background: #fff; box-shadow: 0 30px 60px -20px rgba(0,30,80,.45); }
.vls-kr__url { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--zone); font: 500 14px/1.3 -apple-system, BlinkMacSystemFont, var(--f-body); color: var(--text); }
.vls-kr__url::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #1E9E5A; box-shadow: 0 0 0 3px rgba(30,158,90,.18); }
.vls-kr__live > b { font: 600 24px/1.25 var(--f-head); color: var(--ink); }
.vls-kr__live ul { display: grid; gap: 10px; }
.vls-kr__live li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--text); }
.vls-kr__live .vls-check { flex: 0 0 auto; margin-top: 2px; color: var(--b-fill); } .vls-js .vls-kr__msg--mi, .vls-js .vls-kr__da, .vls-js .vls-kr__kom span, .vls-js .vls-kr__rok span, .vls-js .vls-kr__live li { transition: opacity 420ms var(--ease-in), transform 420ms var(--ease-in); }
.vls-js .vls-kr__k:not(.is-on) .vls-kr__msg--mi { opacity: 0; transform: translateY(12px); }
.vls-js .vls-kr__k.is-on .vls-kr__msg--mi { transition-delay: 450ms; }
.vls-js .vls-kr__k:not(.is-on) .vls-kr__da { opacity: .4; transform: scale(.9); }
.vls-js .vls-kr__k.is-on .vls-kr__da { transition-delay: 350ms; }
.vls-js .vls-kr__k:not(.is-on) .vls-kr__rok span { transform: scaleX(0); }
.vls-js .vls-kr__k.is-on .vls-kr__rok span:nth-child(2) { transition-delay: 150ms; }
.vls-js .vls-kr__k.is-on .vls-kr__rok span:nth-child(3) { transition-delay: 300ms; }
.vls-js .vls-kr__k:not(.is-on) .vls-kr__kom span { opacity: 0; transform: translateY(6px); }
.vls-js .vls-kr__k.is-on .vls-kr__kom span { transition-delay: 500ms; }
.vls-js .vls-kr__k:not(.is-on) .vls-kr__live li { opacity: 0; transform: translateY(8px); }
.vls-js .vls-kr__k.is-on .vls-kr__live li:nth-child(2) { transition-delay: 120ms; }
.vls-js .vls-kr__k.is-on .vls-kr__live li:nth-child(3) { transition-delay: 240ms; }
@media (max-width: 1023px) {
.vls-kr__grid { grid-template-columns: 1fr; gap: var(--sp-nasl, 48px); }
.vls-kr__levo { position: static; }
.vls-kr__nav { display: none; }
.vls-kr__koraci { gap: 72px; }
}
@media (max-width: 767px) {
.vls-kr__koraci { gap: 56px; }
.vls-kr__k { gap: 20px; }
.vls-kr__scena { aspect-ratio: auto; min-height: 300px; padding: 28px 16px; border-radius: 20px; }
.vls-kr__scena--sajt { padding: 28px 12px 88px; }
.vls-kr__txt .vls-h3 { font-size: 22px; }
.vls .vls-kr__txt p { font-size: 16px; }
.vls .vls-kr__msg { font-size: 15px; }
.vls-kr__kal { grid-template-columns: 68px 1fr; }
.vls-kr__datum b { font-size: 30px; }
.vls-kr__dogadjaj { padding: 18px 16px; }
.vls-kr__dogadjaj b { font-size: 16px; }
.vls-kr__odg span { padding: 7px 11px; font-size: 13px; }
.vls-kr__cvor { padding: 8px 10px; font-size: 13px; }
.vls-kr__grane { gap: 6px; }
.vls-kr__rok span { padding: 8px; font-size: 12px; }
.vls .vls-kr__kom { right: 12px; bottom: 12px; max-width: 200px; font-size: 13px; }
.vls-kr__live { padding: 22px 20px; }
.vls-kr__live > b { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
.vls-js .vls-kr__k, .vls-kr__nav li, .vls-kr__nav li::before, .vls-js .vls-kr__msg--mi, .vls-js .vls-kr__da, .vls-js .vls-kr__kom span, .vls-js .vls-kr__rok span, .vls-js .vls-kr__live li { transition: none; }
} .vls-chart { margin: 0; padding: 28px; border-radius: var(--r-card); background: linear-gradient(180deg, #F3F8FE, #E8F1FC); }
.vls-chart svg { width: 100%; height: auto; overflow: visible; }
.vls-chart path { fill: none; }
.vls-chart__grid { stroke: rgba(10,27,51,.07); }
.vls-chart__mark { stroke: rgba(0,91,201,.35); stroke-dasharray: 4 6; }
.vls-chart__pre { stroke: #8C959F; stroke-width: 3; stroke-linecap: round; }
.vls-chart__a, .vls-chart__b { stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 1.2; stroke-dashoffset: 1.06; transition: stroke-dashoffset 1.8s var(--ease-in) .3s; }
.vls-chart__a { stroke: var(--b-fill); } .vls-chart__b { stroke: #66A6F6; }
.is-in .vls-chart__a, .is-in .vls-chart__b { stroke-dashoffset: 0; }
.vls-chart__dot { stroke: #fff; stroke-width: 3; }
.vls-chart__dot--a { fill: var(--b-fill); } .vls-chart__dot--b { fill: #66A6F6; }
.vls-chart .vls-legend { margin-top: 16px; }
.vls-grow__pts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 48px; }
.vls-grow__pts p, .vls-cols3 p { font-size: 15px; line-height: 1.6; color: var(--muted); }
.vls-grow__pts b, .vls-cols3 b { color: var(--ink); font-weight: 600; } .vls-snake { background: var(--zone); }
.vls-snake__board { position: relative; height: 300px; max-width: 1000px; margin: 0 auto; }
.vls-snake__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vls-snake__path { fill: none; stroke: var(--b-fill); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1 1.2; stroke-dashoffset: 1.06; transition: stroke-dashoffset 2.4s var(--ease-in) .2s; }
.is-in .vls-snake__path { stroke-dashoffset: 0; }
.vls-snake__steps li { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); padding: 10px 18px; border-radius: 999px; background: #fff; box-shadow: var(--sh-md); font: 600 15px/1.3 var(--f-head); color: var(--ink); white-space: nowrap; }
.vls-snake__start { position: absolute; left: 4%; top: 40px; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--b-fill); box-shadow: 0 0 0 6px rgba(0,104,232,.18); } .vls .vls-snake__steps li.vls-snake__kraj { transform: translate(0, -50%); padding-left: 42px; background-color: var(--b-fill); background-image: var(--grad); color: #fff; box-shadow: var(--sh-md), var(--sh-glow); }
.vls-snake__kraj::before { content: ""; position: absolute; left: 16px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,.28); }
.vls-js .vls .vls-snake__steps li.vls-snake__kraj { opacity: 0; transform: translate(-14px, -50%); transition: opacity 500ms var(--ease-in) 2.2s, transform 500ms var(--ease-in) 2.2s; }
.vls-js .vls .is-in .vls-snake__steps li.vls-snake__kraj { opacity: 1; transform: translate(0, -50%); }
@media (max-width: 767px) {
.vls .vls-snake__steps li.vls-snake__kraj, .vls-js .vls .is-in .vls-snake__steps li.vls-snake__kraj { transform: none; }
.vls-js .vls .vls-snake__steps li.vls-snake__kraj { transition-delay: .3s; }
}
@media (prefers-reduced-motion: reduce) { .vls-js .vls .vls-snake__steps li.vls-snake__kraj { opacity: 1; transition: none; } }
.vls-cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; } .vls-health__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.vls-health .vls-tile { min-height: 340px; }
.vls-gauge { position: relative; width: 260px; margin: 24px auto 0; text-align: center; }
.vls-gauge svg { width: 100%; height: auto; overflow: visible; }
.vls-gauge path { fill: none; stroke-width: 18; stroke-linecap: round; }
.vls-gauge__bg { stroke: #fff; }
.vls-gauge__fg { stroke: var(--b-fill); stroke-dasharray: 100 110; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s var(--ease-in) .2s; }
.is-in .vls-gauge__fg { stroke-dashoffset: calc((100 - var(--v)) * 1px); }
.vls-gauge b { position: absolute; left: 0; right: 0; top: 62px; font: 600 52px/1 var(--f-head); color: var(--ink); letter-spacing: -.02em; }
.vls-gauge b small { font-size: 22px; }
.vls-gauge span { display: block; margin-top: -8px; font-weight: 600; color: var(--ok-fg); }
.vls-bars { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 28px; margin-top: 24px; height: 200px; }
.vls-bars__col { display: grid; justify-items: center; align-content: end; gap: 6px; height: 100%; }
.vls-bars__col b { font: 600 22px/1 var(--f-head); color: var(--ink); }
.vls-bars__bar { width: 56px; height: calc(var(--h) * 1.3px + 6px); border-radius: 12px; background: linear-gradient(180deg, #66A6F6, #005BC9); transform-origin: 50% 100%; transform: scaleY(0); transition: transform 1s var(--ease-in) .2s; }
.vls-bars__col:last-child .vls-bars__bar { background: linear-gradient(180deg, #8FD3A8, #16A34A); }
.is-in .vls-bars__bar { transform: scaleY(1); }
.vls-bars__col small { font-size: 13px; color: var(--muted); } .vls-chips .vls-head { margin-bottom: 32px; }
.vls-marq { display: grid; gap: 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.vls-marq__row { display: flex; gap: 12px; width: max-content; animation: vls-traka 60s linear infinite; }
.vls-marq__row--rev { animation-direction: reverse; animation-duration: 70s; }
.vls-marq:hover .vls-marq__row { animation-play-state: paused; }
.vls-marq__row li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: #F2F7FD; font: 600 15px/1.3 var(--f-head); color: var(--ink); white-space: nowrap; }
.vls-marq__row li svg { color: var(--b-primary); }
@keyframes vls-traka { to { transform: translateX(-50%); } } .vls-fcta { padding: 96px 0 0; overflow: hidden; }
.vls-fcta__card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; padding: 56px; border-radius: 32px; background: var(--grad); color: #fff; box-shadow: var(--sh-lg), var(--sh-glow); }
.vls-fcta__card .vls-h2 { color: #fff; }
.vls-fcta__card p { margin-top: 10px; color: #fff; max-width: 46ch; }
.vls-fcta__akcije { display: grid; justify-items: center; gap: 12px; }
.vls .vls-fcta__mail { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.5); }
.vls-fcta__word { margin: 24px 0 -0.18em !important; text-align: center; font: 700 clamp(88px, 19vw, 280px)/1 var(--f-head); letter-spacing: -.05em; white-space: nowrap;
background: linear-gradient(180deg, rgba(0,91,201,.16), rgba(0,91,201,0) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; } .vls-login { background: var(--zone); }
.vls-login__card { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 12px; border-radius: 32px; background: #fff; box-shadow: var(--sh-md); max-width: 1000px; margin: 0 auto; }
.vls-login__brand { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 520px; padding: 40px; border-radius: 24px; color: #fff;
background: radial-gradient(70% 60% at 20% 15%, rgba(102,166,246,.55), transparent 60%), var(--grad); }
.vls-login__brand .vls-h2, .vls-login__brand p { color: #fff; }
.vls-login__brand p { margin-top: 10px; }
.vls-login__logo { font: 700 20px/1 var(--f-head); }
.vls-login__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vls-login__steps li { padding: 14px; border-radius: 16px; background: rgba(10,27,51,.22); font: 600 14px/1.35 var(--f-head); }
.vls-login__steps li:first-child { background: #fff; color: var(--ink); }
.vls-login__steps b { display: grid; place-items: center; width: 24px; height: 24px; margin-bottom: 10px; border-radius: 50%; background: var(--b-fill); color: #fff; font-size: 13px; }
.vls-login__steps li:not(:first-child) b { background: rgba(255,255,255,.25); }
.vls-login__form { display: grid; align-content: center; gap: 16px; padding: 40px 48px; }
.vls-field { display: grid; gap: 6px; }
.vls-field span { font: 600 14px/1.4 var(--f-head); color: var(--ink); }
.vls .vls-field input { width: 100%; min-height: 48px; padding: 12px 16px; border-radius: 16px; border: 1px solid #75808F; background: #fff; font: 400 16px/1.4 var(--f-body); color: var(--text); }
.vls .vls-field input::placeholder { color: #7C8592; }
.vls .vls-field input:focus-visible { outline: none; border-color: var(--b-fill); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--b-fill); }
.vls-login__ili { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; }
.vls-login__ili::before, .vls-login__ili::after { content: ""; flex: 1; height: 1px; background: rgba(10,27,51,.12); } .vls-js [data-vls-in] { opacity: 0; transform: translateY(14px); transition: opacity 450ms var(--ease-in), transform 450ms var(--ease-in); }
.vls-js [data-vls-in].is-in { opacity: 1; transform: none; }
.vls-js [data-vls-stagger] > * { opacity: 0; transform: translateY(14px); transition: opacity 450ms var(--ease-in), transform 450ms var(--ease-in); transition-delay: calc(var(--i, 0) * 60ms); }
.vls-js [data-vls-stagger].is-in > * { opacity: 1; transform: none; } @media (max-width: 1024px) {
.vls .vls-h1 { font-size: 44px; }
.vls-bento__grid { grid-template-columns: repeat(2, 1fr); }
.vls-split { grid-template-columns: 1fr; gap: 48px; }
.vls-case__card { grid-template-columns: 1fr; padding: 40px; }
.vls-case__scena { min-height: 320px; }
.vls-grow__pts { grid-template-columns: repeat(2, 1fr); }
.vls-float--l { left: 8px; } .vls-float--r { right: 8px; }
.vls-login__card { grid-template-columns: 1fr; }
.vls-login__brand { min-height: 0; }
}
@media (max-width: 767px) {
.vls .vls-fcta__mail { display: inline-flex; align-items: center; min-height: 44px; }
.vls { font-size: 16px; }
.vls-wrap { padding: 0 16px; }
.vls-sec { padding: 64px 0; }
.vls-hero { padding-top: 96px; }
.vls .vls-h1 { font-size: 34px; }
.vls .vls-h2 { font-size: 28px; }
.vls .vls-lead { font-size: 16px; }
.vls-head { margin-bottom: 32px; }
.vls-hero__scena { margin-top: 40px; }
.vls-mac { border-radius: 10px; }
.vls-mac__bar { height: 28px; padding: 0 10px; }
.vls-mac__dots i { width: 8px; height: 8px; }
.vls-mac__dots { gap: 5px; }
.vls-mac__url { padding: 2px 14px; font-size: 11px; }
.vls-float { display: none; }
.vls-bento__grid, .vls-3d__grid, .vls-price__grid, .vls-health__grid, .vls-cols3, .vls-grow__pts { grid-template-columns: 1fr; }
.vls-tile--w2 { grid-column: auto; }
.vls-rings { padding: 18px 4px; }
.vls-ring { width: 84px; }
.vls-ring svg { width: 60px; height: 60px; }
.vls-ring b { top: 18px; font-size: 17px; }
.vls-3d__card { min-height: 220px; padding: 28px; }
.vls-3d__txt b, .vls-3d__txt span { font-size: 24px; }
.vls-3d__obj { width: 40%; }
.vls-case__card { padding: 32px 24px; border-radius: 24px; }
.vls-case__card::before { font-size: 110px; }
.vls .vls-case__ime { font-size: 34px; }
.vls-iphone--case { width: 190px; }
.vls-case__stats { grid-template-columns: 1fr; gap: 28px; }
.vls-case__stats dt { font-size: 56px; }
.vls-app__card { grid-template-columns: 1fr; padding: 32px 24px 0; gap: 24px; border-radius: 24px; }
.vls-app__txt { order: -1; padding-bottom: 0; }
.vls-app__scena { height: 300px; }
.vls-plan { padding: 28px 24px; }
.vls-plan__za { min-height: 0; } .vls-snake__board { height: auto; }
.vls-snake__svg, .vls-snake__start { display: none; }
.vls-snake__steps { display: grid; gap: 12px; position: relative; padding-left: 28px; }
.vls-snake__steps::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--b-fill); }
.vls-snake__steps li { position: relative; left: auto; top: auto; transform: none; white-space: normal; }
.vls-gauge { width: 220px; }
.vls-toggle { flex-wrap: wrap; justify-content: center; gap: 8px 10px; font-size: 14px; }
.vls-orbit__scena { width: calc(100% - 32px); }
.vls-orbit__ik > span { left: -22px; top: -22px; width: 44px; height: 44px; }
.vls-orbit__ik .vls-ik { width: 20px; height: 20px; }
.vls-orbit__centar { width: 88px; height: 88px; border-radius: 24px; }
.vls-orbit__centar svg { width: 46px; }
.vls .vls-iphone--app { width: 200px; }
.vls-gauge b { top: 50px; font-size: 44px; }
.vls-bars { gap: 18px; }
.vls-fcta { padding-top: 64px; }
.vls-fcta__card { padding: 32px 24px; border-radius: 24px; }
.vls-fcta__akcije { justify-items: start; }
.vls-login__brand { padding: 28px; }
.vls-login__steps { grid-template-columns: 1fr; }
.vls-login__form { padding: 28px 16px; }
} @media (prefers-reduced-motion: reduce) {
.vls-js [data-vls-in], .vls-js [data-vls-stagger] > * { transform: none; transition: opacity 200ms linear; }
.vls-float, .vls-orbit__ring, .vls-orbit__ik > span, .vls-marq__row { animation: none; }
.vls-marq { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
.vls-ring__fg, .vls-line__a, .vls-line__b, .vls-chart__a, .vls-chart__b, .vls-snake__path, .vls-gauge__fg, .vls-bars__bar { transition: none; }
.vls .vls-btn, .vls-3d__card, .vls .vls-store { transition: none; }
}.vls { --sp-sek: 128px; --sp-nasl: 64px; --sp-kart: 40px; --sp-mreza: 32px; --sp-stek: 20px; --sp-dugme: 40px; }
@media (max-width: 1024px) { .vls { --sp-sek: 104px; --sp-nasl: 48px; --sp-kart: 32px; --sp-mreza: 24px; --sp-dugme: 32px; } }
@media (max-width: 767px)  { .vls { --sp-sek: 80px; --sp-nasl: 40px; --sp-kart: 28px; --sp-mreza: 24px; --sp-stek: 16px; --sp-dugme: 32px; } } .vls-sec { padding: var(--sp-sek) 0; }
.vls-head { margin-bottom: var(--sp-nasl); }
.vls-btns--l { justify-content: flex-start; } .vlk-ik { flex: 0 0 auto; }
.vlk-tile-ik { display: inline-grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; border-radius: 14px; background: var(--b-soft); color: var(--b-primary); }
.vlk-tile-ik .vls-ik { display: block; }
.vlk-tile-ik--bela { background: #fff; color: var(--ink); box-shadow: 0 6px 16px -6px rgba(0,30,80,.35); }
.vlk-tile-ik--ok { background: var(--ok-bg); color: var(--ok-fg); }
.vlk-tile-ik--wa { background: #E6F7EE; }
.vls .vlk-link { display: inline-flex; align-items: center; gap: 6px; font: 600 15px/1.4 var(--f-head); color: var(--b-primary); }
.vlk-link .vls-arrow { transition: transform 260ms var(--ease-in); }
@media (hover: hover) and (pointer: fine) { a:hover .vlk-link .vls-arrow, .vlk-link:hover .vls-arrow { transform: translateX(4px); } }
.vlk-head-red { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.vlk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vlk-tagovi { display: flex; flex-wrap: wrap; gap: 8px; }
.vlk-tagovi li { padding: 4px 12px; border-radius: 999px; background: var(--b-soft); font: 600 13px/1.5 var(--f-body); color: #024EAB; } .vlk-gar { padding: calc(var(--sp-sek) * .5) 0; }
.vlk-gar__red { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-mreza); padding: var(--sp-kart); border-radius: var(--r-card); background: var(--zone); }
.vlk-gar__st { display: grid; gap: 12px; align-content: start; }
.vlk-gar__st .vls-h3 { font-size: 20px; line-height: 1.3; letter-spacing: -.01em; }
@media (min-width: 1025px) { .vlk-gar__st + .vlk-gar__st { padding-left: var(--sp-mreza); box-shadow: inset 1px 0 0 rgba(0,91,201,.12); } }
.vlk-gar__st p { font-size: 15px; line-height: 1.6; color: var(--muted); } .vlk-kan { background: var(--zone); }
.vlk-kan__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-mreza); }
.vls .vlk-kan__k { display: flex; flex-direction: column; gap: 12px; padding: var(--sp-kart); border-radius: var(--r-card); background: #fff; box-shadow: var(--sh-sm); color: var(--text);
transition: transform 260ms var(--ease-in), box-shadow 260ms var(--ease-std); }
.vls .vlk-kan__k .vls-h3 { font-size: 16px; color: var(--muted); }
.vls .vlk-kan__k .vlk-kan__v { display: flex; align-items: center; gap: 10px; min-height: 40px; font: 600 20px/1.25 var(--f-head); letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
.vls .vlk-kan__k--plava .vls-h3 { color: rgba(255,255,255,.86); }
.vls .vlk-kan__k--plava .vlk-kan__v { color: #fff; }
.vlk-kan__k p { font-size: 15px; line-height: 1.5; color: var(--muted); }
.vlk-kan__k .vlk-link { margin-top: auto; padding-top: 8px; }
.vls .vlk-kan__k--plava { background-color: var(--b-fill); background-image: var(--grad); color: #fff; box-shadow: var(--sh-glow); }
.vlk-kan__k--plava .vls-h3, .vlk-kan__k--plava p, .vls .vlk-kan__k--plava .vlk-link { color: #fff; }
@media (hover: hover) and (pointer: fine) { .vls .vlk-kan__k:hover { transform: translateY(-3px); box-shadow: var(--sh-md); } .vls .vlk-kan__k--plava:hover { box-shadow: var(--sh-md), var(--sh-glow); } } .vlk-forma__omot { display: grid; grid-template-columns: .9fr 1.1fr; border-radius: 28px; overflow: hidden; background: #fff; box-shadow: var(--sh-lg); }
.vlk-forma__info { position: relative; display: flex; flex-direction: column; gap: var(--sp-stek); padding: 56px 48px; background-color: var(--b-fill); background-image: var(--grad); color: #fff; overflow: hidden; }
.vlk-forma__info::after { content: ""; position: absolute; right: -120px; bottom: -120px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.22), rgba(255,255,255,0)); pointer-events: none; }
.vls .vlk-forma__info .vls-h2 { color: #fff; }
.vlk-forma__lead { font-size: 17px; color: rgba(255,255,255,.88); }
.vlk-koraci { display: grid; gap: 20px; margin-top: 16px; }
.vlk-koraci li { display: flex; gap: 16px; align-items: flex-start; }
.vlk-koraci b { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.18); font: 600 15px/1 var(--f-head); }
.vlk-koraci span { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.85); }
.vlk-koraci strong { display: block; font: 600 16px/1.4 var(--f-head); color: #fff; margin-bottom: 2px; }
.vlk-forma__direkt { display: grid; gap: 10px; margin-top: auto; padding-top: 24px; }
.vls .vlk-forma__direkt a { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 600; }
.vlk-forma__f { position: relative; display: grid; gap: 24px; padding: 56px 48px; }
.vlk-polje { display: grid; gap: 8px; align-content: start; min-width: 0; border: 0; margin: 0; padding: 0; }
.vls .vlk-lab { display: flex; gap: 8px; align-items: baseline; padding: 0; margin: 0 0 4px; font: 600 15px/1.4 var(--f-head); color: var(--ink); }
.vlk-lab small { font: 400 13px/1.4 var(--f-body); color: var(--muted); }
.vlk-lab i { font-style: normal; color: #C2410C; }
.vlk-red2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.vls .vlk-in { width: 100%; min-height: 50px; padding: 12px 16px; border-radius: 14px; border: 1.5px solid #9AA6B6; background: #fff;
font: 400 16px/1.5 var(--f-body); color: var(--ink); transition: border-color 160ms var(--ease-std), box-shadow 160ms var(--ease-std); }
.vls .vlk-in::placeholder { color: #6B7787; }
.vls .vlk-in:focus { outline: none; border-color: var(--b-fill); box-shadow: 0 0 0 4px rgba(0,104,232,.16); }
.vls .vlk-in--ta { min-height: 120px; resize: vertical; }
.vls .vlk-polje.is-greska .vlk-in { border-color: #C2410C; }
.vlk-pom { font-size: 13px; color: var(--muted); }
.vlk-gr { display: none; font-size: 14px; color: #B42318; }
.is-greska > .vlk-gr, .vlk-gr.is-on { display: block; }
.vlk-cipovi { display: flex; flex-wrap: wrap; gap: 8px; }
.vlk-cip { position: relative; cursor: pointer; }
.vlk-cip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.vlk-cip span { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: 999px; background: var(--zone); font: 600 14px/1.3 var(--f-body); color: var(--text);
transition: background-color 160ms var(--ease-std), color 160ms var(--ease-std), transform 160ms var(--ease-ui); }
.vlk-cip input:checked + span { background: var(--b-fill); color: #fff; }
.vlk-cip input:focus-visible + span { outline: 2px solid var(--b-fill); outline-offset: 2px; }
.vlk-cip:active span { transform: scale(.97); }
.vlk-sagl { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; cursor: pointer; }
.vlk-sagl input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--b-fill); flex: 0 0 auto; }
.vlk-gr--sagl { margin-top: -16px; }
.vlk-forma__ok { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 48px; text-align: center; background: #fff;
animation: vlk-ulaz 420ms var(--ease-in) both; }
.vlk-forma__ok[hidden] { display: none; }
.vlk-forma__ok p { max-width: 36ch; color: var(--muted); }
@keyframes vlk-ulaz { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .vlk-faq__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; align-items: start; }
.vlk-faq__levo { position: sticky; top: 120px; }
.vlk-faq__pomoc { display: grid; grid-template-columns: auto 1fr; gap: 12px 16px; align-items: center; margin-top: 40px; padding: 28px; border-radius: var(--r-card); background: var(--zone); }
.vlk-faq__pomoc img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.vlk-faq__pomoc b { display: block; font: 600 16px/1.3 var(--f-head); color: var(--ink); }
.vlk-faq__pomoc span { font-size: 14px; color: var(--muted); }
.vlk-faq__pomoc .vls-btn { grid-column: 1 / -1; justify-self: start; }
.vlk-faq__lista { display: grid; gap: 12px; }
.vlk-acc { border-radius: 20px; background: var(--zone); transition: background-color 260ms var(--ease-std), box-shadow 260ms var(--ease-std); }
.vlk-acc.is-open { background: #fff; box-shadow: var(--sh-md); }
.vls .vlk-acc__h { margin: 0; font: inherit; }
.vls .vlk-acc__btn { display: flex; width: 100%; gap: 16px; align-items: center; justify-content: space-between; padding: 22px 24px; border: 0; background: none; border-radius: 20px;
font: 600 17px/1.4 var(--f-head); color: var(--ink); text-align: left; cursor: pointer; }
.vls .vlk-acc__btn:focus-visible { outline: 2px solid var(--b-fill); outline-offset: 2px; }
.vlk-acc__btn i { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--b-primary); box-shadow: var(--sh-sm); transition: transform 300ms var(--ease-in), background-color 260ms var(--ease-std); }
.vlk-acc.is-open .vlk-acc__btn i { transform: rotate(45deg); background: var(--b-soft); box-shadow: none; }
.vlk-acc__telo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms var(--ease-in); }
.vlk-acc.is-open .vlk-acc__telo { grid-template-rows: 1fr; }
.vlk-acc__telo > div { overflow: hidden; }
.vlk-acc__telo p { padding: 0 24px 24px; color: var(--text); max-width: 62ch; } .vlk-rec { background: var(--zone); }
.vlk-rec__grid { display: grid; grid-template-columns: 300px 1fr; gap: var(--sp-mreza); align-items: stretch; }
.vlk-rec__grid > *, .vlk-rec__kartice > * { min-width: 0; }
.vlk-rec__sazetak { display: grid; align-content: start; justify-items: start; gap: 8px; padding: var(--sp-kart); border-radius: var(--r-card); background-color: var(--b-fill); background-image: var(--grad); color: #fff; }
.vls .vlk-rec__sazetak .vls-ik { box-sizing: border-box; width: 44px; height: 44px; padding: 8px; border-radius: 12px; background: #fff; object-fit: contain; }
.vls .vlk-rec__ocena { margin-top: 16px; font: 600 56px/1 var(--f-head); color: #fff; letter-spacing: -.02em; }
.vlk-rec__zvezde { display: flex; gap: 2px; color: #FFD166; }
.vlk-rec__zvezde--male { color: #F5A524; }
.vlk-rec__broj { font-size: 15px; color: rgba(255,255,255,.88); margin-bottom: 16px; }
.vlk-rec__kartice { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-mreza); }
.vlk-rec__k { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: var(--sp-kart); border-radius: var(--r-card); background: #fff; box-shadow: var(--sh-sm); }
.vls .vlk-rec__k blockquote { margin: 0; padding: 0; border: 0; font: 400 16px/1.65 var(--f-body); color: var(--muted); font-style: italic; }
.vlk-rec__k figcaption { display: flex; gap: 12px; align-items: center; margin-top: auto; font-size: 14px; color: var(--muted); }
.vlk-rec__k figcaption b { display: block; font: 600 15px/1.3 var(--f-head); color: var(--ink); }
.vlk-inicijali { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--b-soft); color: #024EAB; font: 600 15px/1 var(--f-head); } .vlk-br__panel { padding: 64px; border-radius: 32px; background-color: var(--b-fill); background-image: var(--grad); box-shadow: var(--sh-glow); }
.vls .vlk-br__panel .vls-h2 { color: #fff; margin-bottom: 48px; }
.vlk-br__red { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-mreza); }
.vlk-br__st { padding-left: 20px; box-shadow: inset 2px 0 0 rgba(255,255,255,.45); }
.vls .vlk-br__st dt { font: 600 52px/1.05 var(--f-head); color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.vls .vlk-br__st dd { margin-top: 10px; font-size: 16px; color: rgba(255,255,255,.88); } .vlk-por { background: var(--zone); }
.vlk-por__izbor { display: none; }
.vlk-por__karta { border-radius: 28px; background: #fff; box-shadow: var(--sh-md); padding: 16px 24px 24px; }
.vls .vlk-por__t { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0; border: 0; font-size: 16px; table-layout: fixed; }
.vls .vlk-por__t :is(th,td) { border: 0; padding: 16px 20px; text-align: center; vertical-align: middle; background: transparent; }
.vls .vlk-por__t th[scope="row"], .vls .vlk-por__t thead th:first-child { text-align: left; font: 400 16px/1.5 var(--f-body); color: var(--text); width: 38%; }
.vls .vlk-por__t thead th { position: sticky; top: 0; z-index: 1; background: #fff; padding-top: 24px; padding-bottom: 24px; }
.vlk-por__ime { display: block; font: 600 20px/1.2 var(--f-head); color: var(--ink); }
.vlk-por__cena { display: block; margin-top: 6px; font: 600 28px/1.1 var(--f-head); color: var(--b-primary); }
.vlk-por__cena small { font-size: 14px; font-weight: 500; color: var(--muted); }
.vls .vlk-por__t tbody tr:not(.vlk-por__grupa) :is(th,td) { border-top: 1px solid #E3E9F1; }
.vls .vlk-por__t .vlk-por__grupa th { padding-top: 32px; padding-bottom: 8px; text-align: left; font: 600 17px/1.4 var(--f-head); color: var(--ink); }
.vls .vlk-por__t td { color: var(--ink); font-weight: 600; font-size: 15px; }
.vls .vlk-por__t td .vls-check { margin: 0 auto; color: var(--b-fill); }
.vlk-nema { color: #8C99AA; font-weight: 400; }
.vls .vlk-por__t .is-top { background: #F3F8FF; }
.vls .vlk-por__t thead .is-top { border-radius: 20px 20px 0 0; background: #F3F8FF; }
.vls .vlk-por__t tfoot .is-top { border-radius: 0 0 20px 20px; }
.vls .vlk-por__t tfoot td { padding-top: 24px; padding-bottom: 24px; } .vlk-pp__okvir { max-width: 1060px; margin: 0 auto; }
.vlk-pp__scena { position: relative; overflow: hidden; aspect-ratio: 1519 / 784; touch-action: pan-y; }
.vlk-pp__scena > img, .vlk-pp__pre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.vlk-pp__pre { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--poz)) 0 0); }
.vlk-pp__linija { position: absolute; top: 0; bottom: 0; left: var(--poz); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(10,27,51,.12); pointer-events: none; }
.vlk-pp__linija i { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 48px; height: 48px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; color: var(--b-primary); box-shadow: var(--sh-md); }
.vlk-pp__oznaka { position: absolute; top: 16px; padding: 6px 14px; border-radius: 999px; font: 600 14px/1.3 var(--f-head); pointer-events: none; }
.vlk-pp__oznaka--l { left: 16px; background: rgba(10,27,51,.72); color: #fff; }
.vlk-pp__oznaka--d { right: 16px; background: var(--b-fill); color: #fff; }
.vlk-pp__klizac { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.vlk-pp__klizac:focus-visible + * { outline: none; }
.vlk-pp__scena:focus-within .vlk-pp__linija i { box-shadow: 0 0 0 4px rgba(0,104,232,.35), var(--sh-md); } .vlk-rad__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-mreza); }
.vlk-rad__k { display: flex; flex-direction: column; border-radius: var(--r-card); background: #fff; box-shadow: var(--sh-md); overflow: hidden; transition: transform 260ms var(--ease-in), box-shadow 260ms var(--ease-std); }
@media (hover: hover) and (pointer: fine) { .vlk-rad__k:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); } }
.vlk-rad__viz { position: relative; display: grid; place-items: center; height: 280px; padding: 32px 28px 0; background: linear-gradient(180deg, #E3EEFC 0%, #F4F8FE 100%); overflow: hidden; }
.vlk-rad__viz .vls-mac { width: 100%; align-self: end; justify-self: center; border-radius: 10px 10px 0 0; transform: translateY(14px); }
.vlk-rad__viz .vls-mac__bar { height: 28px; }
.vlk-rad__viz .vls-mac__dots i { width: 9px; height: 9px; }
.vlk-rad__viz .vls-mac__url { font-size: 11px; padding: 2px 24px; }
.vlk-rad__viz .vls-mac img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.vlk-rad__viz--iphone .vls-iphone { width: 168px; align-self: end; transform: translateY(26%); }
.vlk-rad__tekst { display: flex; flex-direction: column; gap: 12px; padding: var(--sp-kart); flex: 1; }
.vlk-rad__tekst .vls-h3 { font-size: 22px; margin-top: 4px; }
.vlk-rad__tekst p { font-size: 16px; color: var(--muted); }
.vlk-rad__tekst .vlk-link { margin-top: auto; padding-top: 8px; } .vls .vlk-blog__istaknut { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; padding: 20px; border-radius: 28px; background: var(--zone); color: var(--text); transition: box-shadow 260ms var(--ease-std); }
.vlk-blog__slika { display: block; overflow: hidden; border-radius: 20px; background: var(--b-soft); aspect-ratio: 16 / 9; }
.vls .vlk-blog__slika img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-in); }
.vlk-blog__tekst { display: flex; flex-direction: column; gap: 16px; padding-right: 28px; }
.vlk-blog__meta { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.vlk-blog__meta i { width: 4px; height: 4px; border-radius: 50%; background: #9AA6B6; }
.vls .vlk-blog__nasl { display: block; font-size: 30px; }
.vlk-blog__isecak { color: var(--muted); }
.vlk-blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-mreza); margin-top: var(--sp-mreza); }
.vls .vlk-blog__k { display: flex; flex-direction: column; gap: 14px; color: var(--text); }
.vlk-blog__k .vls-h3 { display: block; font-size: 19px; transition: color 160ms var(--ease-std); }
@media (hover: hover) and (pointer: fine) {
.vls .vlk-blog__istaknut:hover { box-shadow: var(--sh-md); }
.vls :is(.vlk-blog__istaknut, .vlk-blog__k):hover .vlk-blog__slika img { transform: scale(1.04); }
.vls .vlk-blog__k:hover .vls-h3 { color: var(--b-primary); }
} .vlk-cl { overflow: visible; }
.vlk-cl__traka { position: sticky; top: 0; z-index: 3; height: 4px; margin-top: calc(var(--sp-sek) * -1); margin-bottom: calc(var(--sp-sek) - 4px); background: var(--b-soft); }
.admin-bar .vlk-cl__traka { top: 32px; }
.vlk-cl__traka i { display: block; height: 100%; background: var(--grad); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.vlk-cl__grid { display: grid; grid-template-columns: 260px minmax(0, 720px); gap: 80px; justify-content: center; align-items: start; }
.vlk-cl__sadrzaj { position: sticky; top: 120px; padding: 28px; border-radius: var(--r-card); background: var(--zone); }
.vls .vlk-cl__sadrzaj-n { font: 600 16px/1.4 var(--f-head); color: var(--ink); margin-bottom: 12px; }
.vlk-cl__sadrzaj ol { display: grid; gap: 4px; }
.vls .vlk-cl__sadrzaj a { position: relative; display: block; padding: 8px 12px; border-radius: 10px; font-size: 15px; line-height: 1.45; color: var(--muted); transition: background-color 160ms var(--ease-std), color 160ms var(--ease-std); }
.vls .vlk-cl__sadrzaj a.is-on { background: #fff; color: var(--b-primary); font-weight: 600; box-shadow: var(--sh-sm); }
.vlk-cl__telo { display: grid; gap: 20px; font-size: 18px; line-height: 1.75; }
.vlk-cl__uvod { font-size: 19px; color: var(--muted); }
.vls .vlk-cl__telo h3 { margin-top: 20px; font: 600 26px/1.3 var(--f-head); color: var(--ink); scroll-margin-top: 120px; }
.vlk-cl__autor { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; margin-top: 40px; padding: 28px; border-radius: var(--r-card); background: var(--zone); }
.vlk-cl__autor img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.vlk-cl__autor b { font: 600 17px/1.3 var(--f-head); color: var(--ink); }
.vlk-cl__autor p { font-size: 15px; line-height: 1.55; color: var(--muted); margin-top: 4px; } .vlk-tabovi { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: fit-content; max-width: 100%; margin: 0 auto var(--sp-mreza); padding: 6px; border-radius: 999px; background: var(--zone); }
.vls .vlk-tabovi button { min-height: 44px; padding: 10px 20px; border: 0; border-radius: 999px; background: transparent; font: 600 15px/1.2 var(--f-head); color: var(--muted); cursor: pointer;
transition: background-color 200ms var(--ease-std), color 200ms var(--ease-std), box-shadow 200ms var(--ease-std); }
.vls .vlk-tabovi button[aria-selected="true"] { background: #fff; color: var(--b-primary); box-shadow: var(--sh-sm); }
.vls .vlk-tabovi button:focus-visible { outline: 2px solid var(--b-fill); outline-offset: 2px; }
.vlk-ind__panel { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 56px; border-radius: 28px; background: #fff; box-shadow: var(--sh-md); animation: vlk-ulaz 420ms var(--ease-in) both; }
.vlk-ind__panel[hidden] { display: none; }
.vls .vlk-ind__nasl { font-size: 32px; }
.vlk-ind__tekst .vls-list { margin: 24px 0 40px; }
.vlk-ind__viz { position: relative; display: grid; gap: 12px; padding: 40px; border-radius: var(--r-card); background: linear-gradient(160deg, #E3EEFC 0%, #F4F8FE 100%); }
.vls .vlk-ind__viz-n { font: 600 16px/1.4 var(--f-head); color: var(--ink); margin-bottom: 4px; }
.vlk-ind__chip { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 16px; background: #fff; box-shadow: var(--sh-sm); font: 600 16px/1.3 var(--f-head); color: var(--ink);
animation: vlk-ulaz 420ms var(--ease-in) both; animation-delay: calc(var(--j) * 40ms + 80ms); }
.vlk-ind__chip b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--b-soft); color: #024EAB; font-size: 14px; }
.vlk-ind__rez { display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin-top: 8px; padding: 8px 14px; border-radius: 999px; background: var(--ok-bg); color: var(--ok-fg); font: 600 14px/1.3 var(--f-body); } .vlk-ga { overflow: hidden; }
.vlk-ga__scena { position: relative; padding-bottom: 56px; }
.vlk-ga__mac { max-width: 560px; margin-left: auto; }
.vlk-serp { padding: 24px 28px 28px; background: #fff; font-family: Arial, -apple-system, sans-serif; }
.vlk-serp__vrh { display: flex; align-items: center; gap: 24px; }
.vls .vlk-serp__vrh .vls-ik { width: 92px; height: auto; }
.vlk-serp__polje { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 999px; box-shadow: 0 1px 6px rgba(32,33,36,.18); font-size: 15px; color: #202124; }
.vlk-serp__polje span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vlk-serp__polje .vlk-ik { color: #4285F4; }
.vlk-serp__oglas { margin-top: 24px; }
.vls .vlk-serp__spon { font: 700 13px/1.4 Arial, sans-serif; color: #202124; }
.vls .vlk-serp__url { display: flex; align-items: center; gap: 10px; margin-top: 8px; font: 400 13px/1.35 Arial, sans-serif; color: #4D5156; }
.vlk-serp__url b { display: block; font-weight: 400; color: #202124; font-size: 14px; }
.vlk-serp__fav { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #F1F3F4; }
.vlk-serp__fav svg { width: 16px; height: 16px; }
.vls .vlk-serp__nasl { margin-top: 8px; font: 400 20px/1.3 Arial, sans-serif; color: #1A0DAB; }
.vls .vlk-serp__opis { margin-top: 4px; font: 400 14px/1.58 Arial, sans-serif; color: #4D5156; }
.vlk-serp__linkovi { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 8px; font: 400 14px/1.4 Arial, sans-serif; color: #1A0DAB; }
.vlk-serp__org { display: grid; gap: 10px; margin-top: 28px; }
.vlk-serp__org i { display: block; height: 10px; border-radius: 6px; background: #F1F3F4; }
.vlk-serp__org i:nth-child(1) { width: 40%; }
.vlk-serp__org i:nth-child(2) { width: 80%; }
.vlk-serp__org i:nth-child(3) { width: 65%; }
.vlk-ga__kpi { position: absolute; left: 0; bottom: 0; z-index: 2; padding: 20px 24px; border-radius: 20px; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--sh-lg); }
.vls .vlk-ga__kpi-n { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.vlk-ga__kpi-red { display: flex; gap: 28px; }
.vlk-ga__kpi-red span { font-size: 13px; color: var(--muted); }
.vlk-ga__kpi-red b { display: block; font: 600 24px/1.2 var(--f-head); color: var(--ink); font-variant-numeric: tabular-nums; }  .vlk-ios { width: 300px; --ios-s: .667; }
.vlk-ios__ekran { background: #fff; color: #000; }
.vlk-ios__ui { position: absolute; left: 0; top: 0; width: 402px; height: calc(100% / var(--ios-s)); transform: scale(var(--ios-s)); transform-origin: 0 0; overflow: hidden;
font: 400 17px/1.29 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif; letter-spacing: -.02em; color: #000; -webkit-font-smoothing: antialiased; }
.vlk-ios__ui p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; } .vlk-ios__ui::after { content: ""; position: absolute; z-index: 5; left: 50%; bottom: 8px; width: 139px; height: 5px; margin-left: -69.5px; border-radius: 3px; background: #000; } .vlk-ios__status { position: relative; z-index: 4; display: grid; grid-template-columns: 1fr 132px 1fr; justify-items: center; align-items: center; height: 62px; padding: 2px 6px 0 14px; }
.vlk-ios__vreme { font: 600 17px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; letter-spacing: -.02em; }
.vlk-ios__ind { grid-column: 3; display: flex; align-items: center; gap: 6px; }
.vlk-ios__ind svg { display: block; fill: currentColor; } .vlk-ios__s { position: absolute; inset: 62px 0 0; display: flex; flex-direction: column; gap: 12px; padding: 12px 20px 42px; opacity: 0; transform: translateY(10px); transition: opacity 320ms var(--ease-in), transform 320ms var(--ease-in); pointer-events: none; }
.vlk-ios__s.is-on { opacity: 1; transform: none; }
.vlk-ios__logo { display: grid; place-items: center; width: 100px; height: 100px; margin: 150px auto 20px; border-radius: 23px; background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.08), 0 14px 36px -12px rgba(0,91,201,.45); }
.vlk-ios__logo svg { width: 62px; height: 62px; }
.vls .vlk-ios__veliki { font: 700 34px/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif; letter-spacing: .01em; text-align: center; }
.vls .vlk-ios__sitno { margin-bottom: 36px; font-size: 17px; color: #8A8A8E; text-align: center; }
.vlk-ios__dugme { display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; flex: 0 0 auto; border-radius: 14px; font: 600 17px/1 -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -.02em; }
.vlk-ios__dugme svg { display: block; }
.vlk-ios__dugme--crno { background: #000; color: #fff; }
.vlk-ios__dugme--belo { background: #fff; color: #000; box-shadow: inset 0 0 0 1px #C6C6C8; }
.vlk-ios__dugme--plavo { margin-top: auto; background: #007AFF; color: #fff; }
.vlk-ios__s[data-ekran="0"] .vlk-ios__dugme--crno { margin-top: auto; }
.vls .vlk-ios__pravno { margin-top: 4px; font-size: 13px; line-height: 1.35; color: #8A8A8E; text-align: center; }
.vlk-ios__dugme--pay { margin-top: auto; gap: 2px; font-size: 22px; letter-spacing: 0; }
.vls .vlk-ios__naslov { margin: 40px 0 8px; font: 700 34px/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif; letter-spacing: .01em; }
.vlk-ios__dani { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 8px; }
.vlk-ios__dani span { display: grid; justify-items: center; gap: 4px; padding: 14px 0; border-radius: 16px; background: #F2F2F7; font-size: 13px; color: #8A8A8E; }
.vlk-ios__dani b { font-size: 22px; font-weight: 600; color: #000; }
.vlk-ios__dani .is-on { background: #007AFF; color: rgba(255,255,255,.85); }
.vlk-ios__dani .is-on b { color: #fff; }
.vlk-ios__termini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.vlk-ios__termini span { padding: 14px 0; border-radius: 12px; background: #F2F2F7; text-align: center; font-size: 17px; font-weight: 600; }
.vlk-ios__termini .is-on { background: #E5F1FF; color: #007AFF; box-shadow: inset 0 0 0 2px #007AFF; }
.vlk-ios__notif { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 14px; border-radius: 22px; background: #F2F2F7; font-size: 15px; line-height: 1.33; color: #3C3C43; }
.vlk-ios__notif b { display: block; font-weight: 600; color: #000; }
.vlk-ios__notif small { font-size: 13px; color: #8A8A8E; }
.vlk-ios__app { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.12); }
.vlk-ios__app svg { width: 26px; height: 26px; }
.vlk-ios__stavka { display: flex; justify-content: space-between; padding: 16px 0; font-size: 17px; box-shadow: inset 0 -.5px 0 #C6C6C8; }
.vlk-ios__stavka span { color: #3C3C43; }
.vlk-ios__stavka b { font-weight: 400; font-variant-numeric: tabular-nums; }
.vlk-ios__stavka--uk { box-shadow: none; }
.vlk-ios__stavka--uk span, .vlk-ios__stavka--uk b { font-weight: 600; color: #000; }  .vlk-ig__top { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; height: 48px; padding: 0 10px; }
.vlk-ig__naziv { display: flex; align-items: center; justify-content: center; gap: 4px; }
.vls .vlk-ig__logo { display: block; width: 108px; height: auto; max-width: none; }
.vlk-ig__srce { justify-self: end; position: relative; }
.vlk-ig__srce::after { content: ""; position: absolute; right: -1px; top: 0; width: 8px; height: 8px; border-radius: 50%; background: #FF3040; box-shadow: 0 0 0 2px #fff; }
.vlk-ig svg.vlk-ik { display: block; }
.vlk-ig__glava { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 12px; font-size: 14px; line-height: 1.25; }
.vlk-ig__glava b { display: block; font-weight: 600; }
.vlk-ig__glava small { display: block; font-size: 12px; color: #000; }
.vlk-ig__glava i { margin-left: auto; font-style: normal; font-weight: 700; font-size: 18px; letter-spacing: 1px; }
.vlk-ig__av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.15); }
.vlk-ig__av svg { width: 20px; height: 20px; }
.vlk-ig__slika { position: relative; aspect-ratio: 1; display: grid; place-content: center; justify-items: center; gap: 22px; padding: 32px; background-color: var(--b-fill); background-image: var(--grad); color: #fff; text-align: center; }
.vlk-ig__znak { display: grid; place-items: center; width: 104px; height: 104px; border-radius: 26px; background: #fff; box-shadow: 0 16px 40px -10px rgba(0,0,0,.35); }
.vlk-ig__znak svg { width: 64px; height: 64px; }
.vls .vlk-ig__slika p { font: 600 27px/1.3 var(--f-head); letter-spacing: -.01em; color: #fff; }
.vlk-ig__cta { display: flex; justify-content: space-between; align-items: center; height: 44px; padding: 0 14px; background: #0068E8; color: #fff; font-size: 14px; font-weight: 600; }
.vlk-ig__akcije { display: flex; align-items: center; gap: 14px; height: 46px; padding: 0 12px; font-size: 14px; font-weight: 600; }
.vlk-ig__akcije span { display: flex; align-items: center; gap: 5px; }
.vlk-ig__akcije .vlk-ig__sacuvaj { margin-left: auto; }
.vls .vlk-ig__opis { padding: 0 12px; font-size: 14px; line-height: 1.4; }
.vlk-ig__opis span { color: #737373; }
.vls .vlk-ig__vreme { padding: 4px 12px 14px; font-size: 12px; color: #737373; }
.vlk-ig__sledeci .vlk-ig__slika { aspect-ratio: auto; height: 400px; background: linear-gradient(160deg, #F3F6FA, #DCE6F2); }
.vlk-ig__tabovi { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-around; height: 84px; padding-bottom: 34px; background: #fff; box-shadow: inset 0 .5px 0 #DBDBDB; }
.vlk-ig__kuca svg path { fill: currentColor; }
.vlk-ig__profil { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px #000; }
.vlk-ig__profil svg { width: 16px; height: 16px; }
.vlk-ma__split { grid-template-columns: 1fr 1fr; }
.vlk-ma__scena { position: relative; display: grid; justify-items: center; padding: 24px 0 24px; }
.vlk-ma__scena::before { content: ""; position: absolute; inset: 10% 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,104,232,.18), rgba(0,104,232,0)); }
.vlk-ma__scena .vls-iphone { position: relative; }
.vlk-ma__cilj { position: absolute; right: -8px; bottom: 56px; display: grid; gap: 8px; justify-items: start; padding: 20px; border-radius: 20px; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--sh-lg); }
.vls .vlk-ma__cilj-n { font: 600 14px/1.3 var(--f-head); color: var(--ink); margin-bottom: 4px; }
.vlk-ma__cilj .vls-chip-sm { box-shadow: none; background: var(--zone); } .vlk-af { background: var(--zone); }
.vlk-af__grid { display: grid; grid-template-columns: 1fr auto; gap: 80px; align-items: center; max-width: 1000px; margin: 0 auto; }
.vlk-af__lista { display: grid; gap: 12px; }
.vls .vlk-af__lista button { position: relative; display: flex; gap: 16px; align-items: flex-start; padding: 24px; border: 0; border-radius: 20px; background: transparent; text-align: left; cursor: pointer;
transition: background-color 260ms var(--ease-std), box-shadow 260ms var(--ease-std); }
.vls .vlk-af__lista button[aria-selected="true"] { background: #fff; box-shadow: var(--sh-md); }
.vls .vlk-af__lista button:focus-visible { outline: 2px solid var(--b-fill); outline-offset: 2px; }
.vlk-af__lista b { display: block; font: 600 18px/1.3 var(--f-head); color: var(--ink); }
.vlk-af__lista small { display: block; margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.vls .vlk-af__lista button[aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 3px; border-radius: 0 3px 3px 0; background: var(--b-fill); } .vlk-au__tok { display: grid; grid-template-columns: 1fr 80px 1fr 110px 1.1fr; align-items: center; }
.vlk-au__cvor { display: flex; gap: 14px; align-items: center; padding: 20px; border-radius: 20px; background: #fff; box-shadow: var(--sh-md); }
.vlk-au__cvor b { display: block; font: 600 16px/1.3 var(--f-head); color: var(--ink); }
.vlk-au__cvor small { display: block; font-size: 14px; color: var(--muted); }
.vlk-au__cvor--ai { background-color: var(--b-fill); background-image: var(--grad); box-shadow: var(--sh-glow); }
.vlk-au__cvor--ai b, .vlk-au__cvor--ai small { color: #fff; }
.vlk-au__kraj { display: grid; gap: 20px; }
.vlk-au__veza, .vlk-au__grane { width: 100%; overflow: visible; }
.vlk-au__veza { height: 20px; }
.vlk-au__grane { height: 300px; }
.vlk-au__veza path, .vlk-au__grane path { fill: none; stroke: #9DBFEA; stroke-width: 2; stroke-dasharray: 6 8; vector-effect: non-scaling-stroke; animation: vlk-tece 1.2s linear infinite; }
@keyframes vlk-tece { to { stroke-dashoffset: -28; } }
.vlk-au__alati { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: var(--sp-nasl); font-size: 15px; color: var(--muted); }
.vlk-au__alati span { margin-right: 8px; }
.vlk-au__alati i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #fff; box-shadow: var(--sh-sm); } .vlk-kal { background: var(--zone); }
.vlk-kal__nap { margin-top: 24px; font-size: 14px; color: var(--muted); }
.vlk-kal__k { display: grid; gap: 28px; padding: var(--sp-kart); border-radius: 28px; background: #fff; box-shadow: var(--sh-md); }
.vlk-kal__polje { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline; }
.vlk-kal__polje label { font: 600 15px/1.4 var(--f-head); color: var(--ink); }
.vlk-kal__polje output { font: 600 20px/1 var(--f-head); color: var(--b-primary); font-variant-numeric: tabular-nums; }
.vls .vlk-kal__polje input[type="range"] { grid-column: 1 / -1; width: 100%; height: 28px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.vlk-kal__polje input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--b-fill) var(--v, 50%), #DCE6F2 var(--v, 50%)); }
.vlk-kal__polje input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: #DCE6F2; }
.vlk-kal__polje input[type="range"]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--b-fill); }
.vlk-kal__polje input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--b-fill), var(--sh-sm); transition: transform 160ms var(--ease-ui); }
.vlk-kal__polje input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--b-fill), var(--sh-sm); }
.vlk-kal__polje input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.vlk-kal__polje input[type="range"]:focus-visible { outline: none; }
.vlk-kal__polje input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--b-fill), 0 0 0 6px rgba(0,104,232,.25); }
.vlk-kal__rez { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 20px; border-radius: 20px; background: var(--zone); }
.vlk-kal__rez div { display: grid; gap: 4px; }
.vlk-kal__rez b { font: 600 26px/1.1 var(--f-head); color: var(--ink); font-variant-numeric: tabular-nums; }
.vlk-kal__rez div:last-child b { color: var(--b-primary); }
.vlk-kal__rez span { font-size: 14px; color: var(--muted); } .vlk-ft { padding: 96px 0 0; background: #fff; overflow: hidden; }
.vlk-ft__grid { position: relative; z-index: 1; display: grid; grid-template-columns: .8fr 1.6fr; gap: 16px; }
.vlk-ft__brend { display: flex; flex-direction: column; gap: 20px; padding: 40px; border-radius: 28px; background-color: var(--b-fill); background-image: linear-gradient(155deg, #005BC9 0%, #0068E8 60%, #2A85F2 100%); color: #fff; } .vls .vlk-ft__logo { display: inline-block; align-self: flex-start; line-height: 0; }
.vls .vlk-ft__logo img { display: block; width: 156px; max-width: 100%; height: auto; }
.vlk-ft__brend p { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.9); }
.vlk-ft__mreze { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 32px; font-size: 15px; color: rgba(255,255,255,.88); }
.vlk-ft__mreze span { margin-right: 6px; }
.vls .vlk-ft__mreze a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.16); color: #fff; transition: background-color 160ms var(--ease-std), transform 160ms var(--ease-ui); }
@media (hover: hover) and (pointer: fine) { .vls .vlk-ft__mreze a:hover { background: rgba(255,255,255,.28); transform: translateY(-2px); } }
.vlk-ft__panel { position: relative; display: grid; grid-template-rows: 1fr auto; gap: 40px; padding: 40px; border-radius: 28px; background: var(--zone); }
.vlk-ft__3d { position: absolute; top: -28px; right: 32px; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 26px; transform: rotate(10deg);
background: linear-gradient(145deg, #FFFFFF 0%, #DDEBFD 100%); box-shadow: 0 1px 0 #fff inset, 0 24px 40px -14px rgba(0,91,201,.45); }
.vlk-ft__3d svg { width: 58px; height: 58px; filter: drop-shadow(0 4px 6px rgba(0,91,201,.3)); }
.vlk-ft__kolone { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-right: 96px; }
.vls .vlk-ft__n { font: 600 16px/1.3 var(--f-head); color: var(--ink); margin-bottom: 14px; }
.vlk-ft__kolone ul { display: grid; gap: 10px; }
.vlk-ft__kolone li { font-size: 15px; line-height: 1.5; color: var(--muted); }
.vls .vlk-ft__kolone a { color: var(--text); transition: color 160ms var(--ease-std); }
@media (hover: hover) and (pointer: fine) { .vls .vlk-ft__kolone a:hover { color: var(--b-primary); } }
.vlk-ft__novosti { display: grid; gap: 12px; justify-self: end; width: min(100%, 440px); }
.vlk-ft__novosti label { font-size: 15px; color: var(--muted); }
.vlk-ft__novosti label b { color: var(--ink); font-family: var(--f-head); }
.vlk-ft__nov-red { display: flex; gap: 8px; padding: 6px; border-radius: 999px; background: #fff; box-shadow: var(--sh-sm); }
.vls .vlk-ft__nov-red .vlk-in { flex: 1; min-width: 0; min-height: 44px; border: 0; border-radius: 999px; box-shadow: none; }
.vls .vlk-ft__nov-red .vlk-in:focus { box-shadow: 0 0 0 3px rgba(0,104,232,.2); }
.vls .vlk-ft__nov-red .vls-btn { min-height: 44px; padding: 10px 20px; flex: 0 0 auto; }
.vlk-ft__nov-ok { font-size: 14px; color: var(--ok-fg); font-weight: 600; }
.vlk-ft__dno { position: relative; z-index: 1; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding: 28px 4px 0; font-size: 14px; color: var(--muted); }
.vls .vlk-ft__natpis { margin: 8px 0 -0.18em; text-align: center; font: 700 clamp(88px, 19vw, 300px)/0.9 var(--f-head); letter-spacing: -.045em; white-space: nowrap;
background: linear-gradient(180deg, #DCE8F8 0%, rgba(220,232,248,0) 92%); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; } @media (max-width: 1024px) {
.vlk-gar__red { grid-template-columns: repeat(2, 1fr); }
.vlk-kan__grid { grid-template-columns: repeat(2, 1fr); }
.vlk-forma__omot { grid-template-columns: 1fr; }
.vlk-forma__info, .vlk-forma__f { padding: 40px; }
.vlk-faq__grid { grid-template-columns: 1fr; gap: 48px; }
.vlk-faq__levo { position: static; }
.vlk-rec__grid { grid-template-columns: 1fr; }
.vlk-rec__sazetak { grid-template-columns: auto auto 1fr; align-items: center; justify-items: start; }
.vlk-rec__sazetak .vls-btn { grid-column: 1 / -1; }
.vls .vlk-rec__ocena { margin-top: 0; }
.vlk-rec__kartice { grid-template-columns: 1fr 1fr; }
.vlk-rec__k:nth-child(3) { display: none; }
.vlk-br__panel { padding: 48px 40px; }
.vlk-br__red { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
.vlk-rad__grid { grid-template-columns: 1fr 1fr; }
.vls .vlk-blog__istaknut { grid-template-columns: 1fr; gap: 24px; }
.vlk-blog__tekst { padding: 0 12px 12px; }
.vlk-blog__grid { grid-template-columns: 1fr 1fr; }
.vlk-blog__k:nth-child(3) { display: none; }
.vlk-cl__grid { grid-template-columns: 220px minmax(0, 1fr); gap: 48px; }
.vlk-ind__panel { grid-template-columns: 1fr; gap: 40px; padding: 40px; }
.vlk-ga__mac { margin: 0 auto; }
.vlk-ma__split { grid-template-columns: 1fr; }
.vlk-af__grid { gap: 48px; }
.vlk-au__tok { grid-template-columns: 1fr; justify-items: stretch; max-width: 420px; margin: 0 auto; }
.vlk-au__veza { width: 20px; height: 48px; justify-self: center; transform: rotate(90deg); }
.vlk-au__grane { display: none; }
.vlk-au__kraj { padding-top: 24px; position: relative; }
.vlk-au__kraj::before { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 24px; margin-left: -1px; background: #9DBFEA; }
.vlk-ft__grid { grid-template-columns: 1fr; }
.vlk-ft__kolone { padding-right: 0; }
.vlk-ft__3d { top: -40px; width: 80px; height: 80px; }
.vlk-ft__novosti { justify-self: start; }
} @media (max-width: 767px) {
.vlk-gar__red { grid-template-columns: 1fr; padding: 28px; gap: 24px; }
.vlk-kan__grid { grid-template-columns: 1fr; }
.vlk-forma__omot { border-radius: 24px; }
.vlk-forma__info, .vlk-forma__f { padding: 28px 20px; }
.vlk-red2 { grid-template-columns: 1fr; }
.vls .vlk-acc__btn { padding: 18px 20px; font-size: 16px; }
.vlk-acc__telo p { padding: 0 20px 20px; }
.vlk-rec__kartice { grid-template-columns: 1fr; }
.vlk-rec__k:nth-child(3) { display: flex; }
.vlk-br__panel { padding: 36px 24px; border-radius: 24px; }
.vls .vlk-br__panel .vls-h2 { margin-bottom: 32px; }
.vls .vlk-br__st dt { font-size: 40px; }
.vlk-por__izbor { display: flex; gap: 6px; width: fit-content; margin: 0 auto 20px; padding: 6px; border-radius: 999px; background: #fff; box-shadow: var(--sh-sm); }
.vls .vlk-por__izbor button { min-height: 44px; padding: 8px 20px; border: 0; border-radius: 999px; background: transparent; font: 600 15px/1 var(--f-head); color: var(--muted); cursor: pointer; }
.vls .vlk-por__izbor button[aria-selected="true"] { background: var(--b-fill); color: #fff; }
.vlk-por__karta { padding: 8px 12px 16px; border-radius: 24px; }
.vls .vlk-por__t :is(th,td) { padding: 14px 10px; }
.vls .vlk-por__t th[scope="row"], .vls .vlk-por__t thead th:first-child { width: 55%; font-size: 15px; }
.vlk-por__karta[data-plan="1"] .vlk-por__t :is(th,td):is(:nth-child(3),:nth-child(4)),
.vlk-por__karta[data-plan="2"] .vlk-por__t :is(th,td):is(:nth-child(2),:nth-child(4)),
.vlk-por__karta[data-plan="3"] .vlk-por__t :is(th,td):is(:nth-child(2),:nth-child(3)) { display: none; }
.vls .vlk-por__t .vlk-por__grupa th { display: table-cell !important; }
.vls .vlk-por__t tfoot .vls-btn { padding: 10px 16px; font-size: 15px; }
.vlk-pp__oznaka { top: 10px; padding: 4px 10px; font-size: 12px; }
.vlk-pp__linija i { width: 40px; height: 40px; }
.vlk-rad__grid, .vlk-blog__grid { grid-template-columns: 1fr; }
.vlk-blog__k:nth-child(3) { display: flex; }
.vlk-rad__viz { height: 220px; }
.vls .vlk-blog__nasl { font-size: 24px; }
.vls .vlk-blog__istaknut { padding: 12px; border-radius: 24px; }
.vlk-cl__grid { grid-template-columns: 1fr; gap: 32px; }
.vlk-cl__sadrzaj { position: static; }
.vlk-cl__telo { font-size: 17px; }
.vlk-cl__autor { grid-template-columns: auto 1fr; }
.vlk-cl__autor .vls-btn { grid-column: 1 / -1; }
.vlk-tabovi { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; width: 100%; border-radius: 20px; scrollbar-width: none; }
.vlk-tabovi::-webkit-scrollbar { display: none; }
.vls .vlk-tabovi button { flex: 0 0 auto; }
.vlk-ind__panel { padding: 24px; border-radius: 24px; }
.vls .vlk-ind__nasl { font-size: 26px; }
.vlk-ind__viz { padding: 24px; }
.vlk-ga__scena { padding-bottom: 96px; }
.vlk-serp { padding: 16px; }
.vlk-serp__vrh { gap: 12px; }
.vls .vlk-serp__vrh .vls-ik { width: 64px; }
.vlk-serp__polje { padding: 8px 12px; font-size: 14px; }
.vls .vlk-serp__nasl { font-size: 17px; }
.vlk-ga__kpi { left: 12px; right: 12px; padding: 16px; }
.vlk-ga__kpi-red { gap: 16px; justify-content: space-between; }
.vlk-ga__kpi-red b { font-size: 20px; }
.vlk-ios, .vlk-af__tel .vlk-ios { width: 264px; --ios-s: .587; }
.vlk-ma__cilj { position: relative; right: auto; bottom: auto; margin-top: -40px; }
.vlk-af__grid { grid-template-columns: 1fr; justify-items: center; }
.vlk-af__lista { width: 100%; }
.vls .vlk-af__lista button { padding: 16px; }
.vlk-kal__rez { grid-template-columns: 1fr 1fr; }
.vlk-kal__rez div:last-child { grid-column: 1 / -1; }
.vlk-ft { padding-top: 64px; }
.vlk-ft__brend, .vlk-ft__panel { padding: 28px 24px; border-radius: 24px; }
.vlk-ft__kolone { grid-template-columns: 1fr 1fr; }
.vlk-ft__kolone > div:last-child { grid-column: 1 / -1; }
.vlk-ft__3d { display: none; }
.vlk-ft__dno { flex-direction: column; }
.vlk-rec__sazetak { grid-template-columns: 1fr; }
.vls .vlk-por__t { table-layout: auto; }
.vlk-ft__nov-red { flex-wrap: wrap; border-radius: 20px; }
.vls .vlk-ft__nov-red .vlk-in { flex: 1 1 100%; }
.vls .vlk-ft__nov-red .vls-btn { flex: 1 1 100%; }
} @media (prefers-reduced-motion: reduce) {
.vlk-au__veza path, .vlk-au__grane path { animation: none; }
.vlk-forma__ok, .vlk-ind__panel, .vlk-ind__chip { animation: none; }
.vlk-ios__s, .vlk-acc__telo, .vlk-acc__btn i { transition: none; }
.vls .vlk-blog__slika img { transition: none; }
} @media (max-width: 767px) {
.vlk-cip span { min-height: 44px; }
.vlk-forma__direkt { gap: 4px; }
.vls .vlk-forma__direkt a { min-height: 44px; }
.vls .vlk-link { min-height: 44px; }
.vlk-rad__tekst .vlk-link, .vlk-kan__k .vlk-link { padding-top: 0; }
.vls .vlk-cl__sadrzaj a { padding: 12px; }
.vlk-cl__sadrzaj ol { gap: 2px; }
.vls .vlk-kal__polje input[type="range"] { height: 44px; }
.vlk-ft__kolone ul { gap: 0; }
.vls .vlk-ft__kolone a { display: inline-flex; align-items: center; min-height: 44px; }
.vlk-sagl { min-height: 44px; }
.vlk-sagl input { width: 24px; height: 24px; margin-top: 0; }
} .vlk-ft__kolone { grid-template-columns: repeat(4, auto); gap: 28px; justify-content: space-between; }
.vlk-ft__uskoro { color: var(--muted); }
.vlk-ft__uskoro em { display: inline-block; margin-left: 4px; padding: 2px 7px; border-radius: 999px; background: #E8EEFB; color: #1F4FD8; font: 600 11px/1.3 var(--f-head); font-style: normal; }
@media (max-width: 1100px) { .vlk-ft__kolone { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vlk-ft__kolone > div { align-self: start; }
.vlk-ft__kolone ul { align-content: start; }body.vl-razmaci { --vl-sek: 128px; --vl-hero: 128px; --vl-strana: 24px; --vl-naslov: 64px; --vl-mreza: 32px; --vl-panel: 40px; --vl-kartica: 40px; --vl-stek: 20px; --vl-red: 32px; --vl-dugme: 40px; --vl-lista: 16px; }
@media (max-width: 1024px) {
body.vl-razmaci { --vl-sek: 104px; --vl-hero: 104px; --vl-naslov: 48px; --vl-mreza: 24px; --vl-panel: 32px; --vl-kartica: 32px; --vl-red: 24px; --vl-dugme: 32px; }
}
@media (max-width: 767px) {
body.vl-razmaci { --vl-sek: 80px; --vl-hero: 80px; --vl-strana: 16px; --vl-naslov: 40px; --vl-mreza: 24px;
--vl-panel: 24px; --vl-kartica: 28px; --vl-stek: 16px; --vl-red: 16px; --vl-dugme: 32px; --vl-lista: 12px; }
} body.vl-razmaci :is(.vl-sekcija, .vl-panel, .vl-kartica, .vl-okvir, .vl-mreza, .vl-grupa).e-con {
--margin-top: 0px; --margin-right: 0px; --margin-bottom: 0px; --margin-left: 0px;
} body.vl-razmaci .e-con.vl-sekcija {
--padding-top: var(--vl-sek); --padding-bottom: 0px;
--padding-left: var(--vl-strana); --padding-right: var(--vl-strana);
--gap: var(--vl-naslov); --row-gap: var(--vl-naslov); --column-gap: var(--vl-naslov);
}
body.vl-razmaci .e-con.vl-sekcija--puna,
body.vl-razmaci .e-con.vl-sekcija--poslednja { --padding-bottom: var(--vl-sek); } body.vl-razmaci .e-con.vl-sekcija:not(.vl-sekcija--puna):has(+ .vl-sekcija--puna) { --padding-bottom: var(--vl-sek); } body.vl-razmaci .e-con.vl-sekcija--poslednja.vl-sekcija--puna { --margin-bottom: var(--vl-sek); }
body.vl-razmaci .e-con.vl-hero { --padding-top: calc(var(--vl-hero) + var(--vl-header-h, 0px)); } body.vl-razmaci .e-con.vl-panel {
--padding-top: var(--vl-panel); --padding-right: var(--vl-panel); --padding-bottom: var(--vl-panel); --padding-left: var(--vl-panel);
--gap: var(--vl-stek); --row-gap: var(--vl-stek); --column-gap: var(--vl-mreza);
} body.vl-razmaci .e-con.vl-kartica {
--padding-top: var(--vl-kartica); --padding-right: var(--vl-kartica); --padding-bottom: var(--vl-kartica); --padding-left: var(--vl-kartica);
--gap: var(--vl-stek); --row-gap: var(--vl-stek); --column-gap: var(--vl-red);
} body.vl-razmaci .e-con.vl-okvir { --gap: 0px; --row-gap: 0px; --column-gap: 0px; } body.vl-razmaci .e-con.vl-mreza {
--padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
--gap: var(--vl-mreza); --row-gap: var(--vl-mreza); --column-gap: var(--vl-mreza);
} body.vl-razmaci .e-con.vl-grupa {
--padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
--gap: var(--vl-stek); --row-gap: var(--vl-stek); --column-gap: var(--vl-red);
}
body.vl-razmaci .e-con.vl-grupa--red { --gap: var(--vl-red); --row-gap: var(--vl-stek); --column-gap: var(--vl-red); } body.vl-razmaci .e-con .elementor-widget { margin: 0; }
body.vl-razmaci .elementor-widget-text-editor > .elementor-widget-container > :last-child,
body.vl-razmaci .elementor-widget-text-editor p:last-child { margin-bottom: 0; } body.vl-razmaci :is(.vl-grupa, .vl-kartica, .vl-panel, .vl-grupa > .e-con-inner, .vl-kartica > .e-con-inner, .vl-panel > .e-con-inner) > .elementor-widget-button:not(:first-child) {
margin-top: calc(var(--vl-dugme) - var(--vl-stek));
} body.vl-razmaci :is(.vl-grupa, .vl-grupa > .e-con-inner) > .vl-pred-sadrzaj { margin-bottom: calc(var(--vl-naslov) - var(--vl-stek)); }
body.vl-razmaci :is(.vl-kartica, .vl-panel, .vl-kartica > .e-con-inner, .vl-panel > .e-con-inner) > .vl-pred-sadrzaj { margin-bottom: calc(var(--vl-dugme) - var(--vl-stek)); } body.vl-razmaci .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child) { padding-bottom: calc(var(--vl-lista) / 2); }
body.vl-razmaci .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child) { margin-top: calc(var(--vl-lista) / 2); } body.vl-razmaci :is(.vl-kartica, .vl-kartica > .e-con-inner) > .elementor-widget-icon-list + :is(.elementor-widget-icon-box, .elementor-widget-heading) {
margin-top: calc(var(--vl-dugme) - var(--vl-stek));
} body.vl-razmaci .vl-mreza + .vl-mreza { margin-top: calc(var(--vl-mreza) - var(--vl-stek)); }
body.vl-razmaci .e-con.vl-mreza > .vl-mreza, body.vl-razmaci .e-con.vl-mreza > .e-con-inner > .vl-mreza { margin-top: 0; } body.vl-razmaci .elementor-section.vl-sekcija { padding: var(--vl-sek) var(--vl-strana) 0; margin: 0; }
body.vl-razmaci .elementor-section.vl-sekcija--puna,
body.vl-razmaci .elementor-section.vl-sekcija--poslednja,
body.vl-razmaci .elementor-section.vl-sekcija:not(.vl-sekcija--puna):has(+ .vl-sekcija--puna) { padding-bottom: var(--vl-sek); }
body.vl-razmaci .elementor-section.vl-sekcija--poslednja.vl-sekcija--puna { margin-bottom: var(--vl-sek); }
body.vl-razmaci .elementor-section.vl-hero { padding-top: calc(var(--vl-hero) + var(--vl-header-h, 0px)); }
body.vl-razmaci .e-con.vl-sekcija:not(.vl-sekcija--puna):has(+ .elementor-section.vl-sekcija--puna) { --padding-bottom: var(--vl-sek); }
body.vl-razmaci .elementor-section.vl-sekcija > .elementor-container { gap: var(--vl-naslov); }
body.vl-razmaci .elementor-section.elementor-inner-section:is(.vl-mreza, .vl-grupa) { padding: 0; margin: 0; }
body.vl-razmaci .elementor-section.vl-mreza > .elementor-container { gap: var(--vl-mreza); }
body.vl-razmaci .elementor-section.elementor-inner-section.vl-grupa > .elementor-container { gap: var(--vl-naslov); }
body.vl-razmaci .elementor-column:is(.vl-grupa, .vl-kartica, .vl-panel) { margin: 0; }
body.vl-razmaci .elementor-column.vl-grupa > .elementor-widget-wrap { padding: 0; }
body.vl-razmaci .elementor-column.vl-kartica > .elementor-widget-wrap { padding: var(--vl-kartica); }
body.vl-razmaci .elementor-column.vl-panel > .elementor-widget-wrap { padding: var(--vl-panel); }
body.vl-razmaci .elementor-column:is(.vl-grupa, .vl-kartica, .vl-panel) > .elementor-widget-wrap > .elementor-element { margin-top: 0; margin-bottom: 0; }
body.vl-razmaci .elementor-column:is(.vl-grupa, .vl-kartica, .vl-panel) > .elementor-widget-wrap > .elementor-element:not(:last-child) { margin-bottom: var(--vl-stek); }
body.vl-razmaci .elementor-column:is(.vl-grupa, .vl-kartica, .vl-panel) > .elementor-widget-wrap > .elementor-widget-button:not(:first-child) { margin-top: calc(var(--vl-dugme) - var(--vl-stek)); }
body.vl-razmaci .elementor-column.vl-grupa > .elementor-widget-wrap > .elementor-element.vl-pred-sadrzaj:not(:last-child) { margin-bottom: var(--vl-naslov); }
body.vl-razmaci .elementor-column:is(.vl-kartica, .vl-panel) > .elementor-widget-wrap > .elementor-element.vl-pred-sadrzaj:not(:last-child) { margin-bottom: var(--vl-dugme); }
body.vl-razmaci .elementor-column:is(.vl-grupa, .vl-kartica, .vl-panel) > .elementor-widget-wrap > .elementor-element.vl-mreza + .elementor-element.vl-mreza { margin-top: calc(var(--vl-mreza) - var(--vl-stek)); } body.vl-razmaci :is(.vl-kartica, .vl-panel) .elementor-widget-button .elementor-button { padding-left: 24px; padding-right: 24px; } body.vl-razmaci :is(.vl-grupa, .vl-kartica, .vl-panel, .vl-grupa > .e-con-inner, .vl-kartica > .e-con-inner, .vl-panel > .e-con-inner) > :is(.elementor-widget-text-editor, .elementor-widget-icon-list) + .elementor-widget-heading,
body.vl-razmaci .elementor-column:is(.vl-grupa, .vl-kartica, .vl-panel) > .elementor-widget-wrap > :is(.elementor-widget-text-editor, .elementor-widget-icon-list) + .elementor-widget-heading {
margin-top: calc(var(--vl-dugme) - var(--vl-stek));
} body.vl-razmaci .elementor-widget-text-editor :is(h2, h3, h4):not(:first-child) { margin-top: var(--vl-dugme); }
body.vl-razmaci .elementor-widget-text-editor :is(h2, h3, h4) { margin-bottom: var(--vl-stek); } body.vl-razmaci .e-con.vl-crta, body.vl-razmaci .e-con.vl-grupa.vl-crta { --padding-left: var(--vl-stek); }