/* ==========================================================================
   PRIVREMENO — "Klijenti i partneri": 4 preview verzije redizajna.
   Izgrađeno na ŽIVOM .wv dizajn-sistemu sajta (tokeni, dugmad, reveal, brojači,
   tilt/spotlight dolaze iz templates/work-variants/_common.php). Ovde su samo
   layout-specifični delovi + naizmenična tema TAMNO/SVETLO. Original
   (.belit-clients-v7) se ne dira. Sve je scope-ovano pod .wv .kv1..4.
   ========================================================================== */

/* Sakrij eventualni WP/Hello naslov strane samo unutar preview verzija. */
.wv[data-kv-root] .entry-title,
.wv[data-kv-root] .page-title,
.wv[data-kv-root] .page-header{ display:none !important; }
.wv[data-kv-root] [id]{ scroll-margin-top:96px; }

/* ---- Naizmenične podloge (isti tonovi kao /nas-rad/ V5) ---------------- */
.kv-lightAlt{ background:linear-gradient(180deg,#eef4fa 0%,#ffffff 62%); }
.kv-dark2{
	position:relative; overflow:hidden;
	background:
		radial-gradient(1100px 620px at 15% -6%, rgba(18,139,204,.16), transparent 60%),
		radial-gradient(900px 560px at 88% 106%, rgba(237,28,39,.08), transparent 60%),
		linear-gradient(180deg,#041a34,#03152b);
}
.kv-dark2 > .wv-wrap{ position:relative; z-index:1; }

/* ---- Rotirajuća aurora (identično nrx5-aurora) ------------------------- */
.kv-aurora{
	position:absolute; inset:-20%; z-index:0; pointer-events:none; opacity:.7;
	background:conic-gradient(from 200deg at 70% 30%, rgba(18,139,204,.28), transparent 25%, rgba(237,28,39,.16) 50%, transparent 70%, rgba(18,139,204,.28));
	filter:blur(70px); animation:kvspin 26s linear infinite;
}
.kv-aurora--soft{ opacity:.4; }
@keyframes kvspin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .kv-aurora{ animation:none; } }

/* ---- Spotlight koji prati kursor (koristi --mx/--my iz _common JS) ----- */
.wv [data-wv-spot]{ position:relative; }
.wv [data-wv-spot]::after{
	content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
	opacity:0; transition:opacity .35s ease; z-index:1;
	background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(18,139,204,.16), transparent 46%);
}
.wv [data-wv-spot]:hover::after{ opacity:1; }
.wv-dark [data-wv-spot]::after{ background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(127,196,236,.16), transparent 46%); }
[data-wv-tilt]{ transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease; transform-style:preserve-3d; }

/* ---- HERO (uvek tamno) ------------------------------------------------- */
.kv-hero{
	position:relative; overflow:hidden; isolation:isolate;
	min-height:clamp(560px,82vh,900px); display:flex; align-items:center;
	padding:calc(var(--blt-hero-pad-top,150px)) 0 84px; background:#03152b; color:#fff;
}
.kv-hero--compact{ min-height:auto; align-items:flex-start; padding-bottom:72px; }
.kv-hero--marquee{ display:block; min-height:auto; padding-bottom:0; }
.kv-hero-inner{ position:relative; z-index:2; max-width:900px; }
.kv-hero::after{ /* donji veo za mekan prelaz ka svetloj sekciji */
	content:""; position:absolute; left:0; right:0; bottom:0; height:120px; z-index:1; pointer-events:none;
	background:linear-gradient(180deg, transparent, rgba(3,21,43,.65));
}
.kv-hTitle{ margin:18px 0 0; font-size:clamp(38px,6vw,82px); line-height:1.02; letter-spacing:-.04em; font-weight:900; color:#fff; }
.kv-grad{ background:linear-gradient(120deg,#fff,#7fc4ec 55%,#128bcc); -webkit-background-clip:text; background-clip:text; color:transparent; }
.kv-grad--light{ background:linear-gradient(120deg,var(--blue),var(--navy)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.kv-hLead{ margin:22px 0 0; max-width:640px; font-size:clamp(16px,1.5vw,20px); line-height:1.6; color:rgba(255,255,255,.8); }
.kv-hCta{ margin:32px 0 0; display:flex; flex-wrap:wrap; gap:14px; }

/* Hero „Kontakt" dugme = IDENTIČNO kao „Kontakt" u hero-u na „Naš rad".
   Tamo (nije .wv-dark) dugme ima: beo tekst, providnu pozadinu, jedva vidljiv okvir
   rgba(5,31,62,.12) (deluje bez okvira na tamnoj podlozi), bez senke; na hover se menja
   SAMO boja teksta u plavu (#128bcc), okvir ostaje isti, bez podizanja/senke.
   Ovde je hero .wv-dark, pa poništavamo .wv-dark ghost stil i vraćamo iste vrednosti. */
.kv4 .kv-hero.wv-dark .wv-btn--ghost.kv4-btnKontakt{ background:transparent; color:#fff; border-color:rgba(5,31,62,.12); box-shadow:none; }
.kv4 .kv-hero.wv-dark .wv-btn--ghost.kv4-btnKontakt:hover{ background:transparent; color:rgb(18,139,204); border-color:rgba(18,139,204,.55); transform:none; box-shadow:none; }

/* ---- Filter čipovi (svetla + tamna varijanta) ------------------------- */
.kv-filters{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0 auto 34px; max-width:1000px; }
.kv-chip{
	display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:999px;
	border:1px solid var(--line); background:#fff; color:rgba(5,31,62,.66);
	font-family:inherit; font-size:13px; font-weight:700; cursor:pointer;
	transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.kv-chip:hover{ color:var(--navy); border-color:rgba(18,139,204,.4); transform:translateY(-1px); box-shadow:0 8px 22px rgba(5,31,62,.08); }
.kv-chip.is-active{ background:linear-gradient(135deg,var(--blue),#0a6fb0); color:#fff; border-color:transparent; box-shadow:0 10px 26px rgba(18,139,204,.32); }
.kv-chip:focus-visible{ outline:2px solid rgba(18,139,204,.55); outline-offset:2px; }
.kv-chipCount{ display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:999px;
	background:rgba(5,31,62,.08); color:rgba(5,31,62,.55); font-size:10.5px; font-weight:800; }
.kv-chip.is-active .kv-chipCount{ background:rgba(255,255,255,.24); color:#fff; }
.wv-dark .kv-chip{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:rgba(255,255,255,.78); }
.wv-dark .kv-chip:hover{ color:#fff; border-color:rgba(127,196,236,.5); }
.wv-dark .kv-chip.is-active{ background:#fff; color:var(--navy); }
.wv-dark .kv-chipCount{ background:rgba(255,255,255,.14); color:rgba(255,255,255,.7); }
.wv-dark .kv-chip.is-active .kv-chipCount{ background:rgba(5,31,62,.12); color:var(--navy); }
.kv-wallEmpty{ grid-column:1 / -1; text-align:center; padding:44px 16px; color:var(--muted); font-weight:800; }
.wv-dark .kv-wallEmpty{ color:rgba(255,255,255,.7); }

/* ======================================================================
   TESTIMONIALS (deljeno, temabilno)
   ====================================================================== */
.kv-testSlider{ max-width:840px; margin:0 auto; position:relative; z-index:1; }
.kv-testViewport{ overflow:hidden; }
.kv-testTrack{ display:flex; transition:transform .6s cubic-bezier(.2,.8,.2,1); will-change:transform; }
@media (prefers-reduced-motion: reduce){ .kv-testTrack{ transition:none; } }
.kv-testSlide{ flex:0 0 100%; min-width:0; }
.kv-quote{
	position:relative; border-radius:26px; overflow:hidden; margin:2px;
	border:1px solid var(--line);
	background:linear-gradient(165deg, rgba(255,255,255,.98), rgba(255,255,255,.9));
	box-shadow:var(--shadow); padding:36px 34px 30px;
	display:flex; flex-direction:column; min-height:270px;
}
.kv-quote::before{ content:""; position:absolute; inset:0 auto 0 0; width:4px; background:linear-gradient(180deg, rgba(18,139,204,.95), rgba(18,139,204,.35)); }
.kv-quote--red::before{ background:linear-gradient(180deg, rgba(237,28,39,.95), rgba(237,28,39,.35)); }
.kv-qMark{ font-family:Georgia, serif; font-size:60px; line-height:.5; color:rgba(18,139,204,.35); }
.kv-quote--red .kv-qMark{ color:rgba(237,28,39,.35); }
.kv-qText{ margin:16px 0 22px; padding:0; border:0; flex:1 1 auto; color:rgba(5,31,62,.86); font-size:clamp(16px,1.4vw,19px); line-height:1.7; letter-spacing:-.01em; }
.kv-qFoot{ display:flex; gap:14px; align-items:center; margin-top:auto; }
.kv-avatar{ width:52px; height:52px; border-radius:50%; overflow:hidden; flex:0 0 auto; padding:2px; background:linear-gradient(135deg, rgba(18,139,204,.75), rgba(237,28,39,.55)); }
.kv-quote--red .kv-avatar{ background:linear-gradient(135deg, rgba(237,28,39,.8), rgba(18,139,204,.45)); }
.kv-avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50%; border:2px solid #fff; }
.kv-avatar--mono span{ display:grid; place-items:center; width:100%; height:100%; border-radius:50%; background:#fff; color:var(--navy); font-weight:900; font-size:16px; }
.kv-personName{ display:block; font-style:normal; font-weight:900; color:var(--navy); font-size:15px; letter-spacing:-.01em; }
.kv-personRole{ display:block; margin-top:3px; color:rgba(5,31,62,.6); font-weight:700; font-size:11px; letter-spacing:.05em; text-transform:uppercase; line-height:1.4; }
.kv-testControls{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:24px; max-width:840px; margin-left:auto; margin-right:auto; }
.kv-testNav{ display:flex; gap:8px; }
.kv-testBtn{ width:46px; height:46px; border-radius:14px; border:1px solid var(--line); background:#fff; color:rgba(5,31,62,.76); cursor:pointer; display:grid; place-items:center; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.kv-testBtn:hover{ transform:translateY(-1px); border-color:rgba(18,139,204,.35); box-shadow:var(--shadow); }
.kv-testArrow{ width:10px; height:10px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; }
.kv-testBtn.prev .kv-testArrow{ transform:rotate(135deg); }
.kv-testBtn.next .kv-testArrow{ transform:rotate(-45deg); }
.kv-testDots{ display:flex; flex-wrap:wrap; gap:8px; }
.kv-testDot{ width:10px; height:10px; padding:0; border:0; border-radius:999px; background:rgba(5,31,62,.16); cursor:pointer; transition:width .22s ease, background .22s ease; }
.kv-testDot.is-active{ width:30px; background:linear-gradient(90deg, var(--blue), rgba(18,139,204,.55)); }
.kv-testDot:focus-visible{ outline:2px solid rgba(18,139,204,.55); outline-offset:2px; }
/* Testimonials — TAMNA varijanta */
.kv-tests.wv-dark .kv-quote{ background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.12); box-shadow:0 26px 70px rgba(3,15,30,.35); }
.kv-tests.wv-dark .kv-qText{ color:rgba(255,255,255,.9); }
.kv-tests.wv-dark .kv-personName{ color:#fff; }
.kv-tests.wv-dark .kv-personRole{ color:rgba(255,255,255,.6); }
.kv-tests.wv-dark .kv-avatar--mono span{ background:#0a2b52; color:#fff; }
.kv-tests.wv-dark .kv-testBtn{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:rgba(255,255,255,.85); }
.kv-tests.wv-dark .kv-testBtn:hover{ border-color:rgba(127,196,236,.5); }
.kv-tests.wv-dark .kv-testDot{ background:rgba(255,255,255,.2); }

/* ======================================================================
   CTA (deljeno, temabilno)
   ====================================================================== */
.kv-cta{ position:relative; overflow:hidden; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
	gap:28px; border-radius:28px; padding:clamp(32px,4.5vw,60px); border:1px solid transparent; }
.kv-cta > *{ position:relative; z-index:1; }
.kv-ctaCopy{ max-width:56ch; }
.kv-ctaH{ margin:0 0 12px; font-size:clamp(24px,3vw,40px); font-weight:900; letter-spacing:-.03em; line-height:1.15; }
.kv-ctaSub{ margin:0; font-size:clamp(14px,1.1vw,16px); line-height:1.7; }
.kv-ctaActions{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.kv-ctaRow{ display:flex; flex-wrap:wrap; gap:12px; }
.kv-ctaNote{ margin:0; font-size:12.5px; font-weight:600; }
.kv-lightAlt .kv-cta{ background:linear-gradient(150deg,rgba(18,139,204,.10),rgba(237,28,39,.05) 60%,#fff),#fff; border-color:rgba(5,31,62,.10); box-shadow:0 24px 60px rgba(5,31,62,.10); }
.kv-lightAlt .kv-ctaH{ color:var(--navy); } .kv-lightAlt .kv-ctaSub{ color:var(--muted); } .kv-lightAlt .kv-ctaNote{ color:var(--muted); }
.wv-dark .kv-cta{ background:linear-gradient(150deg,rgba(18,139,204,.18),rgba(237,28,39,.1) 60%,transparent),rgba(255,255,255,.04); border-color:rgba(255,255,255,.12); }
.wv-dark .kv-ctaH{ color:#fff; } .wv-dark .kv-ctaSub{ color:rgba(255,255,255,.74); } .wv-dark .kv-ctaNote{ color:rgba(255,255,255,.6); }
@media (max-width:720px){
	.kv-cta{ flex-direction:column; align-items:stretch; }
	.kv-ctaActions{ align-items:stretch; }
	.kv-ctaRow{ flex-direction:column; }
	.kv-ctaRow .wv-btn{ justify-content:center; }
}

/* ======================================================================
   V1 — Impact & Case Study First
   ====================================================================== */
.kv1-metrics{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:clamp(34px,4vw,48px); }
@media (max-width:820px){ .kv1-metrics{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:420px){ .kv1-metrics{ grid-template-columns:1fr; } }
.kv1-metric{ position:relative; padding:22px 20px; border-radius:20px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); backdrop-filter:blur(6px); }
.kv1-metric::before{ content:""; display:block; width:26px; height:3px; border-radius:2px; margin-bottom:14px; background:linear-gradient(90deg,var(--red),rgba(237,28,39,.35)); }
.kv1-metricNum{ font-size:clamp(32px,4.4vw,52px); font-weight:900; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; background:linear-gradient(120deg,#fff,#7fc4ec); -webkit-background-clip:text; background-clip:text; color:transparent; }
.kv1-metricLabel{ margin-top:10px; font-weight:800; font-size:14px; color:#fff; }
.kv1-metricDesc{ margin-top:4px; font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.62); }

.kv1-wall{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; position:relative; transition:opacity .25s ease; }
.kv1-wall.is-filtering{ opacity:.35; }
@media (max-width:860px){ .kv1-wall{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .kv1-wall{ grid-template-columns:repeat(2,1fr); gap:12px; } }
.kv1-logo{ position:relative; display:flex; flex-direction:column; border-radius:20px; overflow:hidden; border:1px solid var(--line); background:#fff; box-shadow:0 10px 30px rgba(5,31,62,.06); transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease; }
.kv1-logo:hover{ transform:translateY(-6px); box-shadow:0 26px 60px rgba(5,31,62,.16); border-color:rgba(18,139,204,.35); }
.kv1-logoVisual{ flex:1 1 auto; display:grid; place-items:center; min-height:120px; padding:24px 18px; }
.kv1-logoVisual img{ max-width:80%; max-height:70px; width:auto; height:auto; filter:grayscale(1); opacity:.72; transition:filter .35s ease, opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1); }
.kv1-logo:hover .kv1-logoVisual img{ filter:none; opacity:1; transform:scale(1.06); }
@media (max-width:860px){ .kv1-logoVisual img{ filter:none; opacity:1; } }
.kv1-mono{ font-size:34px; font-weight:900; letter-spacing:-.02em; background:linear-gradient(135deg,var(--blue),var(--navy)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.kv1-logoFoot{ padding:12px 14px 14px; border-top:1px solid rgba(5,31,62,.06); background:rgba(5,31,62,.015); }
.kv1-logoName{ display:block; font-size:13px; font-weight:800; color:var(--navy); line-height:1.3; }
.kv1-logoSector{ display:block; margin-top:3px; font-size:11px; font-weight:700; color:var(--muted); letter-spacing:.03em; text-transform:uppercase; }
.kv1-logoLink{ position:absolute; top:12px; right:12px; z-index:2; width:28px; height:28px; border-radius:8px; display:grid; place-items:center; border:1px solid var(--line); background:#fff; color:var(--blue); font-weight:900; opacity:0; transform:translateY(-4px); transition:opacity .25s ease, transform .25s ease; }
.kv1-logo:hover .kv1-logoLink{ opacity:1; transform:none; }
@media (max-width:860px){ .kv1-logoLink{ opacity:1; transform:none; } }
.kv1-logo.is-hidden{ display:none; }

.kv1-caseGrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
@media (max-width:820px){ .kv1-caseGrid{ grid-template-columns:1fr; } }
.kv1-case{ position:relative; border-radius:24px; padding:28px 26px; overflow:hidden; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); box-shadow:0 18px 60px rgba(3,15,30,.28); cursor:default; }
.kv1-case:hover{ border-color:rgba(127,196,236,.45); background:rgba(255,255,255,.08); }
.kv1-case:focus-visible{ outline:2px solid rgba(127,196,236,.6); outline-offset:3px; }
.kv1-case > *{ position:relative; z-index:2; }
.kv1-caseSector{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#7fc4ec; }
.kv1-caseClient{ display:block; margin-top:8px; font-size:12.5px; font-weight:700; color:rgba(255,255,255,.7); }
.kv1-caseTitle{ margin:6px 0 0; color:#fff; font-size:22px; font-weight:900; letter-spacing:-.02em; line-height:1.2; }
.kv1-caseReveal{ max-height:0; opacity:0; overflow:hidden; transition:max-height .45s ease, opacity .45s ease, margin .45s ease; }
.kv1-case:hover .kv1-caseReveal, .kv1-case:focus-within .kv1-caseReveal{ max-height:280px; opacity:1; margin-top:14px; }
@media (max-width:900px){ .kv1-caseReveal{ max-height:none; opacity:1; margin-top:14px; } }
.kv1-caseDesc{ margin:0 0 12px; color:rgba(255,255,255,.8); font-size:14px; line-height:1.7; }
.kv1-caseTech{ display:flex; flex-wrap:wrap; gap:6px; }
.kv1-tag{ display:inline-flex; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:800; color:rgba(255,255,255,.9); background:rgba(18,139,204,.18); border:1px solid rgba(18,139,204,.35); }
.kv1-caseResult{ display:flex; align-items:center; gap:10px; margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.14); color:#fff; font-weight:800; font-size:13.5px; }
.kv1-caseResultDot{ width:10px; height:10px; border-radius:3px; flex:0 0 auto; background:linear-gradient(135deg,var(--red),var(--blue)); }

/* ======================================================================
   V2 — Bento Grid & Tech Partner
   ====================================================================== */
.kv2-bento{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:minmax(150px,auto); gap:16px; }
@media (max-width:900px){ .kv2-bento{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .kv2-bento{ grid-template-columns:1fr; } }
.kv2-cell{ position:relative; border-radius:24px; padding:26px; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow); overflow:hidden; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.kv2-cell:hover{ transform:translateY(-4px); box-shadow:var(--shadow2); border-color:rgba(18,139,204,.28); }
.kv2-cell > *{ position:relative; z-index:2; }
.kv2-cell--feature{ grid-column:span 2; grid-row:span 2; display:flex; flex-direction:column; color:#fff; border-color:rgba(255,255,255,.14);
	background:radial-gradient(700px 360px at 20% 0%, rgba(18,139,204,.3), transparent 62%), radial-gradient(600px 320px at 100% 100%, rgba(237,28,39,.2), transparent 60%), linear-gradient(160deg,#041a34,#03152b); }
@media (max-width:560px){ .kv2-cell--feature{ grid-column:span 1; grid-row:auto; } }
.kv2-badge{ display:inline-flex; align-self:flex-start; padding:6px 12px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); color:#fff; }
.kv2-featMark{ margin-top:auto; font-size:clamp(30px,4vw,52px); font-weight:900; color:#fff; letter-spacing:-.03em; line-height:1; padding-top:24px; }
.kv2-featTitle{ margin:10px 0 14px; color:#fff; font-size:18px; font-weight:800; }
.kv2-featQuote{ margin:0 0 16px; color:rgba(255,255,255,.85); font-size:15px; line-height:1.7; font-style:italic; }
.kv2-featBy{ display:flex; flex-direction:column; }
.kv2-featBy strong{ color:#fff; font-size:14px; }
.kv2-featBy span{ color:rgba(255,255,255,.65); font-size:11.5px; margin-top:2px; }
.kv2-cell--stat{ display:flex; flex-direction:column; justify-content:center; background:linear-gradient(160deg, rgba(18,139,204,.1), #fff); }
.kv2-cell--stat-red{ background:linear-gradient(160deg, rgba(237,28,39,.08), #fff); }
.kv2-statNum{ font-size:clamp(34px,4vw,52px); font-weight:900; color:var(--navy); line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.kv2-statLabel{ margin-top:8px; font-size:13.5px; font-weight:700; color:var(--muted); line-height:1.4; }
.kv2-cell--logos{ grid-column:span 2; display:flex; flex-direction:column; gap:14px; }
@media (max-width:560px){ .kv2-cell--logos{ grid-column:span 1; } }
.kv2-cellK{ font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.kv2-logoGrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; flex:1 1 auto; }
@media (max-width:560px){ .kv2-logoGrid{ grid-template-columns:repeat(2,1fr); } }
.kv2-logo{ display:grid; place-items:center; min-height:64px; padding:10px; border-radius:14px; border:1px solid rgba(5,31,62,.08); background:rgba(5,31,62,.02); text-align:center; }
.kv2-logo img{ max-width:100%; max-height:44px; width:auto; filter:grayscale(1); opacity:.7; transition:filter .3s ease, opacity .3s ease; }
.kv2-logo:hover img{ filter:none; opacity:1; }
.kv2-logoText{ font-size:12px; font-weight:800; color:var(--navy); line-height:1.25; }
.kv2-cell--quote{ grid-column:span 2; display:flex; flex-direction:column; justify-content:center; background:linear-gradient(160deg, rgba(18,139,204,.06), #fff); }
@media (max-width:560px){ .kv2-cell--quote{ grid-column:span 1; } }
.kv2-qMark{ font-family:Georgia, serif; font-size:52px; line-height:.5; color:rgba(18,139,204,.4); }
.kv2-quoteText{ margin:12px 0 14px; color:var(--navy); font-size:clamp(15px,1.5vw,18px); line-height:1.65; font-weight:600; }
.kv2-quoteBy{ display:flex; flex-direction:column; }
.kv2-quoteBy strong{ color:var(--navy); font-size:13.5px; }
.kv2-quoteBy span{ color:var(--muted); font-size:11.5px; margin-top:2px; }

.kv2-techGrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
@media (max-width:820px){ .kv2-techGrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .kv2-techGrid{ grid-template-columns:1fr; } }
.kv2-techCard{ position:relative; padding:24px; border-radius:20px; overflow:hidden; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); box-shadow:0 18px 60px rgba(3,15,30,.28); }
.kv2-techCard:hover{ border-color:rgba(127,196,236,.45); }
.kv2-techCard > *{ position:relative; z-index:2; }
.kv2-techTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.kv2-techMono{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-weight:900; font-size:15px; color:#fff; background:linear-gradient(135deg, rgba(18,139,204,.9), rgba(5,31,62,.9)); border:1px solid rgba(255,255,255,.18); }
.kv2-techTier{ font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#7fc4ec; padding:5px 10px; border-radius:999px; background:rgba(18,139,204,.15); border:1px solid rgba(18,139,204,.3); }
.kv2-techName{ margin:0 0 6px; color:#fff; font-size:18px; font-weight:800; }
.kv2-techArea{ margin:0; color:rgba(255,255,255,.75); font-size:13.5px; line-height:1.6; }

.kv2-showGrid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,4vw,48px); align-items:center; }
@media (max-width:860px){ .kv2-showGrid{ grid-template-columns:1fr; } }
.kv2-showMedia{ position:relative; aspect-ratio:16/10; border-radius:24px; overflow:hidden; display:grid; place-items:center; border:1px solid var(--line); isolation:isolate;
	background:radial-gradient(600px 300px at 30% 20%, rgba(18,139,204,.3), transparent 60%), radial-gradient(500px 280px at 90% 100%, rgba(237,28,39,.18), transparent 60%), linear-gradient(160deg,#041a34,#03152b); }
.kv2-showMedia .kv-aurora{ opacity:.5; }
.kv2-playBtn{ position:relative; z-index:2; width:78px; height:78px; border-radius:50%; border:0; cursor:pointer; display:grid; place-items:center; background:#fff; box-shadow:0 18px 50px rgba(0,0,0,.3); transition:transform .2s ease; }
.kv2-playBtn:hover{ transform:scale(1.07); }
.kv2-playBtn::before{ content:""; position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(255,255,255,.4); animation:kvpulse 2.4s ease-out infinite; }
@keyframes kvpulse{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.5); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .kv2-playBtn::before{ animation:none; } }
.kv2-playTri{ width:0; height:0; margin-left:5px; border-left:20px solid var(--navy); border-top:12px solid transparent; border-bottom:12px solid transparent; }
.kv2-showTag{ position:absolute; z-index:2; left:16px; bottom:14px; font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.85); padding:6px 12px; border-radius:999px; background:rgba(5,31,62,.5); border:1px solid rgba(255,255,255,.2); }
.kv2-showCopy .wv-eyebrow{ margin-bottom:16px; }
.kv2-showCta{ margin-top:22px; }

/* ======================================================================
   V3 — Narrative & Co-Creation
   ====================================================================== */
.kv3-heroNav{ display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(28px,4vw,40px); }
.kv3-heroNav a{ display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:999px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#fff; font-size:13.5px; font-weight:700; transition:border-color .2s ease, background .2s ease, transform .2s ease; }
.kv3-heroNav a:hover{ border-color:rgba(127,196,236,.5); background:rgba(18,139,204,.16); transform:translateY(-1px); }

.kv3-timeline{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative; }
/* Povezujuća linija uklonjena — koraci su sada zasebne kartice (u duhu „Sertifikata"). */
.kv3-timeline::before{ display:none; }
/* RESPONSIVE (ne dira desktop 4-u-red): dok staju — 2 kartice po redu (2×2),
   a tek kad ne mogu ni dve — pređi na jednu po redu. */
@media (max-width:860px){ .kv3-timeline{ grid-template-columns:repeat(2,1fr); gap:18px; } }
@media (max-width:560px){ .kv3-timeline{ grid-template-columns:1fr; } }
.kv3-tlItem{ position:relative; padding:26px 20px 24px; border-radius:18px; text-align:center; overflow:hidden;
	background:#fff; border:1px solid var(--line); box-shadow:0 10px 30px rgba(5,31,62,.06);
	transition:transform .4s cubic-bezier(.2,.9,.2,1), box-shadow .4s ease, border-color .4s ease; }
.kv3-tlNode{ position:relative; width:58px; height:58px; border-radius:16px; display:grid; place-items:center; margin:0 auto 18px; background:linear-gradient(160deg,#eef6fd,#dcecf9); border:1px solid rgba(18,139,204,.2); box-shadow:0 8px 20px rgba(5,31,62,.06); z-index:1; transition:transform .35s cubic-bezier(.2,.9,.2,1), box-shadow .35s ease, border-color .35s ease; }
.kv3-tlStep{ font-size:20px; font-weight:900; line-height:1; display:block; text-align:center; background:linear-gradient(135deg,var(--blue),var(--navy)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.kv3-tlBody{ text-align:center; }
.kv3-tlTitle{ margin:0 0 8px; color:var(--navy); font-size:17px; font-weight:800; }
.kv3-tlText{ margin:0; color:var(--muted); font-size:13.5px; line-height:1.65; }

/* ── "Kako izgleda saradnja sa Belitom" — animacije i brend-akcenti usklađeni sa ostatkom sajta ── */
/* Konektor se iscrtava kada se sekcija otkrije (isti osećaj kao linije/reveal drugde na sajtu). */
.kv3-process .kv3-timeline::before{ transform:scaleX(0); transform-origin:left center;
	transition:transform 1.15s cubic-bezier(.22,.61,.36,1) .2s; }
.kv3-process.wv-in .kv3-timeline::before{ transform:scaleX(1); }
/* Brend-progresija broja po koraku: plava (početak) → crvena (kraj), prati konektor i logo boje. */
.kv3-process .kv3-tlItem:nth-child(1) .kv3-tlStep{ background:linear-gradient(135deg,#128bcc,#0a6fb0); -webkit-background-clip:text; background-clip:text; }
.kv3-process .kv3-tlItem:nth-child(2) .kv3-tlStep{ background:linear-gradient(135deg,#2f7fc4,#6a5fae); -webkit-background-clip:text; background-clip:text; }
.kv3-process .kv3-tlItem:nth-child(3) .kv3-tlStep{ background:linear-gradient(135deg,#a1476f,#e13b45); -webkit-background-clip:text; background-clip:text; }
.kv3-process .kv3-tlItem:nth-child(4) .kv3-tlStep{ background:linear-gradient(135deg,#ed1c27,#b3131c); -webkit-background-clip:text; background-clip:text; }
/* Node (kvadratić sa brojem) se na hover UVEĆA — kao badge kod „Sertifikata". */
.kv3-process .kv3-tlItem:hover .kv3-tlNode{ transform:scale(1.05); border-color:rgba(18,139,204,.4); box-shadow:0 12px 26px rgba(18,139,204,.20); } /* STARO: scale(1.14) */
/* Cela kartica koraka dobija putujući obojeni OKVIR na hover (kao „Sertifikati"),
   BEZ sjaja/stakla i BEZ reflektor-pravougaonika koji prati miš. */
@property --kv3-ang{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
.kv3-process .kv3-tlItem::after{ content:""; position:absolute; inset:0; border-radius:18px; padding:1.7px; pointer-events:none; z-index:2;
	background:conic-gradient(from var(--kv3-ang,0deg), var(--blue), #3d89c9, var(--red), #3d89c9, var(--blue));
	-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
	mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
	opacity:0; transition:opacity .35s; }
.kv3-process .kv3-tlItem:hover{ transform:translateY(-2px); border-color:transparent; box-shadow:0 18px 42px rgba(5,31,62,.10); } /* STARO: translateY(-6px) */
.kv3-process .kv3-tlItem:hover::after{ opacity:1; animation:kv3Border 2.4s linear infinite; }
@keyframes kv3Border{ to{ --kv3-ang:360deg; } }
@media (prefers-reduced-motion: reduce){
	.kv3-process .kv3-tlItem:hover::after{ animation:none; }
}

.kv3-tabs{ max-width:1000px; margin:0 auto; }
.kv3-tabList{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:24px; }
.kv3-tab{ padding:10px 18px; border-radius:999px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:rgba(255,255,255,.78); font-family:inherit; font-size:13.5px; font-weight:700; cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.kv3-tab:hover{ background:rgba(255,255,255,.12); color:#fff; transform:translateY(-1px); }
.kv3-tab.is-active{ background:#fff; color:var(--navy); border-color:#fff; }
.kv3-tab:focus-visible{ outline:2px solid rgba(127,196,236,.8); outline-offset:2px; }
.kv3-panel{ display:grid; grid-template-columns:1.4fr .6fr; gap:clamp(20px,3vw,40px); padding:clamp(24px,3vw,36px); border-radius:24px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); box-shadow:0 18px 60px rgba(3,15,30,.3); animation:kvfade .5s ease; }
.kv3-panel[hidden]{ display:none; }
@keyframes kvfade{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media (max-width:760px){ .kv3-panel{ grid-template-columns:1fr; } }
.kv3-panelStat{ font-size:clamp(20px,2.4vw,28px); font-weight:900; color:#fff; line-height:1.2; letter-spacing:-.02em; }
.kv3-panelDesc{ margin:14px 0; color:rgba(255,255,255,.82); font-size:15px; line-height:1.75; }
.kv3-panelQuote{ margin:0; padding-left:16px; border-left:3px solid rgba(18,139,204,.7); color:#fff; font-size:15px; line-height:1.7; font-style:italic; }
.kv3-panelSide{ border-left:1px solid rgba(255,255,255,.14); padding-left:clamp(16px,2vw,28px); }
@media (max-width:760px){ .kv3-panelSide{ border-left:0; padding-left:0; border-top:1px solid rgba(255,255,255,.14); padding-top:20px; } }
.kv3-panelSideK{ display:block; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:12px; }
.kv3-panelList{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.kv3-panelList li{ display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.9); font-size:14px; font-weight:600; }
.kv3-liDot{ width:8px; height:8px; border-radius:2px; flex:0 0 auto; background:linear-gradient(135deg,var(--red),var(--blue)); }

.kv3-footGrid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(24px,4vw,48px); align-items:center; }
@media (max-width:860px){ .kv3-footGrid{ grid-template-columns:1fr; } }
.kv3-footCopy .wv-eyebrow{ margin-bottom:16px; }
.kv3-footMap{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (max-width:480px){ .kv3-footMap{ grid-template-columns:1fr; } }
.kv3-footPin{ position:relative; display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:18px; overflow:hidden; border:1px solid var(--line); background:#fff; box-shadow:0 10px 30px rgba(5,31,62,.05); transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.kv3-footPin:hover{ transform:translateY(-3px); border-color:rgba(18,139,204,.3); box-shadow:0 18px 40px rgba(5,31,62,.1); }
.kv3-footPin > *{ position:relative; z-index:2; }
.kv3-footCode{ width:46px; height:46px; border-radius:13px; flex:0 0 auto; display:grid; place-items:center; font-weight:900; font-size:13px; color:#fff; letter-spacing:.02em; background:linear-gradient(135deg, var(--blue), var(--navy)); }
.kv3-footText strong{ display:block; color:var(--navy); font-size:15px; }
.kv3-footText span{ display:block; margin-top:2px; color:var(--muted); font-size:12.5px; }

/* ======================================================================
   V4 — Minimalist Ticker & Showcase
   ====================================================================== */
.kv4-hero-inner{ max-width:760px; }
.kv4-marquee{ position:relative; z-index:2; display:flex; flex-direction:column; gap:12px; margin-top:clamp(36px,5vw,60px); padding-bottom:40px; }
.kv4-mqRow{ position:relative; overflow:hidden; padding:6px 0;
	-webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.kv4-mqTrack{ display:flex; width:max-content; will-change:transform; animation:kv4mq 40s linear infinite; }
.kv4-mqRow--rev .kv4-mqTrack{ animation-name:kv4mqrev; animation-duration:48s; }
.kv4-marquee:hover .kv4-mqTrack{ animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){ .kv4-mqTrack{ animation:none !important; } }
.kv4-mqSet{ display:flex; align-items:center; }
.kv4-mqItem{ flex:0 0 auto; width:252px; height:120px; display:grid; place-items:center; padding:0 16px; }
.kv4-mqItem img{ max-width:190px; max-height:74px; width:auto; filter:grayscale(1) brightness(0) invert(1); opacity:.5; transition:filter .3s ease, opacity .3s ease, transform .3s ease; }
.kv4-mqItem:hover img{ filter:brightness(0) invert(1); opacity:1; transform:scale(1.05); }
.kv4-mqText{ font-size:21px; font-weight:800; color:rgba(255,255,255,.55); text-align:center; letter-spacing:-.01em; }
/* "Crtica" (konektor) između logotipa — isti dizajn kao na početnoj strani
   (sekcija „Poverenje kroz saradnju", .bc7-mqSep): crvena linija + dve tačkice. */
.kv4-mqSep{
  flex:0 0 34px; width:34px; height:12px; position:relative; align-self:center;
  opacity:.9;
  background:linear-gradient(90deg, var(--red,#ec1c27), rgba(237,28,39,.55));
  background-size:calc(100% - 18px) 2px; background-position:center; background-repeat:no-repeat;
}
.kv4-mqSep::before,
.kv4-mqSep::after{
  content:""; position:absolute; top:50%;
  width:9px; height:9px; border-radius:50%;
  background:var(--red,#ec1c27);
  transform:translateY(-50%);
  box-shadow:0 0 12px rgba(237,28,39,.35);
}
.kv4-mqSep::before{ left:0; }
.kv4-mqSep::after{ right:0; }
@media (max-width:640px){
  .kv4-mqItem{ width:190px; height:96px; } .kv4-mqItem img{ max-width:150px; max-height:60px; } .kv4-mqText{ font-size:16px; }
  .kv4-mqSep{ flex-basis:26px; width:26px; background-size:calc(100% - 14px) 2px; }
  .kv4-mqSep::before, .kv4-mqSep::after{ width:7px; height:7px; }
}
@keyframes kv4mq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes kv4mqrev{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }

.kv4-splitGrid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,4vw,60px); align-items:start; }
@media (max-width:900px){ .kv4-splitGrid{ grid-template-columns:1fr; } }
.kv4-sticky{ position:sticky; top:104px; }
@media (max-width:900px){ .kv4-sticky{ position:static; } }
.kv4-sticky .wv-h2{ margin-top:14px; }
.kv4-sticky .wv-sub{ margin-left:0; }
.kv4-miniStats{ display:flex; flex-wrap:wrap; gap:24px; margin:26px 0 28px; }
.kv4-miniStat{ display:flex; flex-direction:column; }
.kv4-miniNum{ font-size:clamp(26px,3vw,36px); font-weight:900; color:var(--navy); line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.kv4-miniLabel{ margin-top:6px; font-size:12.5px; font-weight:700; color:var(--muted); max-width:16ch; }
.kv4-stickyCta{ display:flex; flex-wrap:wrap; gap:12px; }

.kv4-list{ display:flex; flex-direction:column; gap:12px; }
.kv4-item{ position:relative; display:flex; align-items:center; gap:18px; padding:18px 20px; border-radius:18px; overflow:hidden; border:1px solid var(--line); background:#fff; box-shadow:0 8px 24px rgba(5,31,62,.05); transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease; }
.kv4-item:hover{ transform:translateX(6px); box-shadow:var(--shadow2); border-color:rgba(18,139,204,.3); }
.kv4-item > *{ position:relative; z-index:2; }
.kv4-item--dark{ color:#fff; border-color:rgba(255,255,255,.1); background:linear-gradient(150deg,#041a34,#03152b); box-shadow:0 12px 40px rgba(5,31,62,.18); }
.kv4-itemLogo{ width:88px; height:56px; flex:0 0 auto; display:grid; place-items:center; }
.kv4-itemLogo img{ max-width:100%; max-height:48px; width:auto; filter:grayscale(1); opacity:.75; transition:filter .3s ease, opacity .3s ease; }
.kv4-item--dark .kv4-itemLogo img{ filter:grayscale(1) brightness(0) invert(1); opacity:.85; }
.kv4-item:hover .kv4-itemLogo img{ filter:none; opacity:1; }
.kv4-item--dark:hover .kv4-itemLogo img{ filter:brightness(0) invert(1); opacity:1; }
.kv4-itemMono{ font-size:26px; font-weight:900; letter-spacing:-.02em; background:linear-gradient(135deg,var(--blue),var(--navy)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.kv4-item--dark .kv4-itemMono{ background:linear-gradient(135deg,#7fc4ec,#fff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.kv4-itemBody{ flex:1 1 auto; min-width:0; }
.kv4-itemName{ margin:0; font-size:clamp(16px,1.6vw,20px); font-weight:800; letter-spacing:-.01em; color:var(--navy); line-height:1.25; }
.kv4-item--dark .kv4-itemName{ color:#fff; }
.kv4-itemSector{ display:inline-block; margin-top:4px; font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.kv4-item--dark .kv4-itemSector{ color:rgba(255,255,255,.65); }
.kv4-itemLink{ flex:0 0 auto; width:36px; height:36px; border-radius:10px; display:grid; place-items:center; border:1px solid var(--line); color:var(--blue); font-weight:900; transition:background .2s ease, transform .2s ease; }
.kv4-item--dark .kv4-itemLink{ border-color:rgba(255,255,255,.24); color:#7fc4ec; }
.kv4-itemLink:hover{ transform:translateY(-2px); background:rgba(18,139,204,.1); }
.kv4-itemIndex{ flex:0 0 auto; font-size:20px; font-weight:900; color:rgba(5,31,62,.22); }
.kv4-item--dark .kv4-itemIndex{ color:rgba(255,255,255,.28); }

/* ======================================================================
   V4 — dorade po zahtevu (samo V4): lepljiva leva strana, bez eyebrow
   pill-ova, centrirani testimonijali (crvene tačkice), redizajniran CTA.
   ====================================================================== */

/* overflow:hidden na .wv (iz _common) pravi scroll-kontejner i lomi
   position:sticky. clip klipuje bez pravljenja scroll-konteksta -> sticky radi. */
.wv.kv4{ overflow-x:clip; }

/* Lepljiva leva strana — prati skrol i uvek stoji u gornjem uglu. */
.kv4 .kv4-sticky{ position:sticky; top:104px; align-self:start; }
@media (max-width:900px){ .kv4 .kv4-sticky{ position:static; } }

/* Skloni SVE eyebrow "tabove" (tekst + prozorčić + lampicu) u celoj V4. */
.wv.kv4 .wv-eyebrow{ display:none !important; }

/* Testimonijali: kartica centrirana i nije isečena, bez virenja susednih.
   Strogi horizontalni clip (susedi ostaju skriveni), kartica uža od slajda
   pa se bočna senka vidi u razmaku; vertikalni padding + negativna margina
   daju prostor gornjoj/donjoj senci bez pomeranja layouta. */
.kv4 .kv-testViewport{ overflow:hidden; padding:20px 0; margin:-20px 0; }
.kv4 .kv-testSlide{ display:flex; justify-content:center; }
.kv4 .kv-quote{ margin:0 auto; width:100%; max-width:680px; }
/* Tri indikatora (2 tačkice + linija) u crvenoj boji brenda. */
.kv4 .kv-testDot{ background:rgba(237,28,39,.42); }
.kv4 .kv-testDot.is-active{ background:linear-gradient(90deg,var(--red),rgba(237,28,39,.6)); }

/* CTA "Postanite naš partner": centrirano (naslov+tekst gore, dugmad ispod),
   sa crvenom (brend) varijantom primarnog dugmeta. */
/* Uži i niži prozor: malo teksta + jedno dugme, pa je centriran, suženo (~720px) i sa
   manjim vertikalnim paddingom/razmakom da bude urednije i niže. */
.kv4 .kv-cta{ flex-direction:column; align-items:center; text-align:center; gap:24px; max-width:760px; margin:0 auto;
	padding-top:clamp(30px,3.6vw,48px); padding-bottom:clamp(44px,5vw,68px); } /* naslov/podnaslov malo naviše: manji gornji padding, donji ostaje veći. STARO: padding-top clamp(44,5vw,68) */
.kv4 .kv-ctaH{ margin-bottom:16px; } /* malo više vazduha između naslova i teksta */
.kv4 .kv-ctaCopy{ max-width:48ch; transform:translateY(-14px); } /* naslov+podnaslov malo naviše; transform ne pomera dugme (raspored ostaje isti) */
.kv4 .kv-ctaActions{ align-items:center; }
.kv4 .kv-ctaRow{ justify-content:center; }
/* Primarno plavo dugme (hero „Pogledaj partnere" + CTA „Kontaktirajte nas") =
   KOPIJA hero dugmeta sa „O nama" (.bhd__btn--primary): plavi gradijent + jača
   senka + lift na hover. */
.kv4 .wv-btn--primary{ background:linear-gradient(135deg,var(--blue),#0a6fa8); box-shadow:0 16px 34px rgba(18,139,204,.3);
	transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, background .3s ease; }
.kv4 .wv-btn--primary:hover{ transform:translateY(-3px); background:linear-gradient(135deg,var(--blue),#0a6fa8); box-shadow:0 22px 44px rgba(18,139,204,.4); }
/* Nijedno dugme nema podvučen tekst na hover. Plava (primary) dugmad zadržavaju BELI tekst;
   ghost „Kontakt" NAMERNO koristi podrazumevani wv hover (#7fc4ec) da bude IDENTIČNO
   kao kontakt dugme u hero-u na „Naš rad". */
.wv.kv4 .wv-btn:hover, .wv.kv4 .wv-btn:focus-visible{ text-decoration:none; }
.wv.kv4 .wv-btn--primary:hover, .wv.kv4 .wv-btn--primary:focus-visible{ color:#fff; }

/* Naslov u heroju: IDENTIČAN gradijent kao hero na "O nama" (.bhd__accent / .bhvb__accent):
   linear-gradient(90deg,#ff6b73,#59b9ec). SAMO u hero sekciji — ne i u listi klijenata
   (split h2 zadržava kv-grad--light). */
.kv4 .kv-hero .kv-grad{ background:linear-gradient(90deg,#ff6b73,#59b9ec); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Hero dugmad su sada IDENTIČNA hero dugmadima na „Naš rad" (.wv-btn--primary /
   .wv-btn--ghost) — bez posebnih override-a boja, koriste podrazumevani wv hover. */

/* Hero: popunjava TAČNO vidljivi ekran (visina viewport-a minus sticky header 69px);
   sadržaj je poravnat na VRH (bez velike rupe iznad naslova), a marquee je prizemljen
   na dno da hero uvek ispuni ceo prvi ekran. */
.kv4 .kv4-heroNew{ min-height:calc(100vh - var(--blt-header-h,66px)); min-height:calc(100svh - var(--blt-header-h,66px));
	display:flex; flex-direction:column; justify-content:flex-start;
	padding-top:clamp(30px,5vh,60px); padding-bottom:0; }
.kv4 .kv4-heroNew .kv-hero-inner{ flex:0 0 auto; display:block; }
.kv4 .kv4-heroNew .kv4-marquee{ margin-top:auto; }
/* Telefon: hero NE preko celog ekrana — visina koliko sadržaju treba (kao „Naš rad").
   Tekst i dugmad pri vrhu, pa malo vazduha, pa marquee logotipa — sve staje lepo, ništa nabijeno. */
@media (max-width:760px){
	.kv4 .kv4-heroNew{ min-height:auto; padding-top:20px; padding-bottom:12px; }
	.kv4 .kv4-heroNew .kv4-marquee{ margin-top:clamp(22px,5vh,40px); }
}

/* Lista klijenata: kartice u PLAVOJ iz logoa (var(--blue)=#128bcc); najvažniji klijenti
   u CRVENOJ iz logoa (var(--red)=#ed1c27). Pozadina sekcije ostaje ista (svetla).
   Tekst i logotipi beli radi kontrasta. */
.kv4 .kv4-item{ background:linear-gradient(135deg,var(--blue),#0a6fb0); border-color:transparent; box-shadow:0 10px 30px rgba(18,139,204,.22); color:#fff; }
.kv4 .kv4-item:hover{ transform:translateX(6px); box-shadow:0 20px 46px rgba(18,139,204,.32); }
.kv4 .kv4-item--red{ background:var(--red); box-shadow:0 10px 30px rgba(237,28,39,.24); }
.kv4 .kv4-item--red:hover{ box-shadow:0 20px 46px rgba(237,28,39,.34); }
.kv4 .kv4-itemName{ color:#fff; }
.kv4 .kv4-itemSector{ color:rgba(255,255,255,.78); }
.kv4 .kv4-itemLink{ border-color:rgba(255,255,255,.4); color:#fff; }
.kv4 .kv4-itemLink:hover{ background:rgba(255,255,255,.16); }
.kv4 .kv4-itemIndex{ color:rgba(255,255,255,.45); }
.kv4 .kv4-itemMono{ background:linear-gradient(135deg,#fff,#eaf3fb); -webkit-background-clip:text; background-clip:text; color:transparent; }
.kv4 .kv4-itemLogo img{ filter:grayscale(1) brightness(0) invert(1); opacity:.92; }
.kv4 .kv4-item:hover .kv4-itemLogo img{ filter:brightness(0) invert(1); opacity:1; }
/* svetli sjaj (umesto plavog) na obojenim karticama */
.kv4 .kv4-item[data-wv-spot]::after{ background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.16), transparent 46%); }

/* Legenda u lepljivoj koloni (zamena za "Sektori...") — objašnjava crvene istaknute kartice. */
.kv4-legend{ display:flex; align-items:center; gap:10px; margin:22px 0 26px; font-size:13.5px; font-weight:600; color:var(--muted); max-width:34ch; }
.kv4-legendDot{ width:12px; height:12px; border-radius:4px; flex:0 0 auto; }
.kv4-legendDot--red{ background:var(--red); box-shadow:0 0 0 4px rgba(237,28,39,.14); }

/* ===================== KLIJENTI — kvadrataste kartice (u duhu „Sertifikata") ===================== */
@property --kvcl-ang{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
.kv4 .kvcl{ position:relative; overflow:hidden; }
.kv4 .kvcl-atmo{ position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.kv4 .kvcl-orb{ position:absolute; border-radius:50%; filter:blur(72px); opacity:.5; }
.kv4 .kvcl-orb--b{ width:420px; height:420px; top:-140px; right:4%; background:rgba(18,139,204,.16); }
.kv4 .kvcl-orb--r{ width:300px; height:300px; bottom:-120px; left:3%; background:rgba(237,28,39,.08); }
.kv4 .kvcl > .wv-wrap{ position:relative; z-index:1; }
.kv4 .kvcl-legend{ display:inline-flex; align-items:center; gap:10px; margin:18px auto 0; font-size:13.5px; font-weight:600; color:var(--muted); }
.kv4 .kvcl-legendDot{ width:12px; height:12px; border-radius:4px; flex:0 0 auto; background:var(--red); box-shadow:0 0 0 4px rgba(237,28,39,.14); }

.kv4 .kvcl-grid{ margin-top:clamp(34px,4vw,52px); display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
	/* Kad se „Vidi još" otvori i mreža naglo poraste, browser NE sme da „usidri" skrol na
	   kartice i odskoči (naročito na telefonu, jedna kolona) — isključujemo scroll-anchoring. */
	overflow-anchor:none; }
.kv4 .kvcl-grid *{ overflow-anchor:none; }
/* 4 -> 3 -> 2 -> 1: kolone se smanjuju tek kad zaista ne staju (npr. ~970px = 3, ne 2). */
@media (max-width:1040px){ .kv4 .kvcl-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:720px){ .kv4 .kvcl-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .kv4 .kvcl-grid{ grid-template-columns:1fr; } }

.kv4 .kvcl-card{ position:relative; display:flex; flex-direction:column; gap:18px; min-height:196px; text-decoration:none; color:inherit;
	background:#fff; border:1px solid var(--line); border-radius:20px; padding:22px; overflow:hidden;
	box-shadow:0 10px 30px rgba(5,31,62,.06); transition:transform .45s cubic-bezier(.2,.9,.2,1), box-shadow .45s, border-color .45s; }
/* putujući obojeni okvir na hover (kao „Sertifikati"), BEZ sjaja/stakla */
.kv4 .kvcl-card::after{ content:""; position:absolute; inset:0; border-radius:20px; padding:1.7px; pointer-events:none; z-index:3;
	background:conic-gradient(from var(--kvcl-ang,0deg), var(--blue), #3d89c9, var(--blue), #7fc4ec, var(--blue));
	-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
	mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
	opacity:0; transition:opacity .35s; }
.kv4 .kvcl-card--red::after{ background:conic-gradient(from var(--kvcl-ang,0deg), var(--red), #ff6b73, var(--red), #ffb0b4, var(--red)); }
.kv4 .kvcl-card:hover{ transform:translateY(-8px); box-shadow:0 30px 72px rgba(5,31,62,.15); border-color:transparent; }
.kv4 .kvcl-card:hover::after{ opacity:1; animation:kvclBorder 2.4s linear infinite; }
@keyframes kvclBorder{ to{ --kvcl-ang:360deg; } }

.kv4 .kvcl-cardTop{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.kv4 .kvcl-badge{ width:66px; height:66px; flex:0 0 auto; border-radius:16px; display:grid; place-items:center; overflow:hidden;
	background:linear-gradient(160deg,#eef6fd,#dcecf9); border:1px solid rgba(18,139,204,.2); transition:transform .4s cubic-bezier(.2,.9,.2,1); }
.kv4 .kvcl-card--red .kvcl-badge{ background:linear-gradient(160deg,#fdecec,#f9dcdc); border-color:rgba(237,28,39,.2); }
.kv4 .kvcl-card:hover .kvcl-badge{ transform:scale(1.06); }
.kv4 .kvcl-badge img{ max-width:78%; max-height:78%; width:auto; height:auto; object-fit:contain; filter:grayscale(1); opacity:.72; transition:filter .35s ease, opacity .35s ease; }
.kv4 .kvcl-card:hover .kvcl-badge img{ filter:none; opacity:1; }
.kv4 .kvcl-mono{ font-size:22px; font-weight:900; letter-spacing:-.02em; background:linear-gradient(135deg,var(--blue),var(--navy)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.kv4 .kvcl-card--red .kvcl-mono{ background:linear-gradient(135deg,var(--red),#8f1015); -webkit-background-clip:text; background-clip:text; color:transparent; }
.kv4 .kvcl-idx{ font-size:12px; font-weight:900; color:rgba(5,31,62,.28); letter-spacing:.06em; }
.kv4 .kvcl-visit{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-weight:900; color:var(--blue);
	border:1px solid rgba(18,139,204,.28); background:rgba(18,139,204,.06); transition:transform .25s ease; }
.kv4 .kvcl-card--red .kvcl-visit{ color:var(--red); border-color:rgba(237,28,39,.28); background:rgba(237,28,39,.06); }
.kv4 .kvcl-card:hover .kvcl-visit{ transform:translateY(-2px); }
.kv4 .kvcl-body{ margin-top:auto; }
.kv4 .kvcl-name{ margin:0; font-size:17px; font-weight:800; letter-spacing:-.01em; color:var(--navy); line-height:1.3; transition:color .3s; }
.kv4 .kvcl-card:hover .kvcl-name{ color:var(--blue); }
.kv4 .kvcl-card--red:hover .kvcl-name{ color:var(--red); }
.kv4 .kvcl-sector{ display:inline-block; margin-top:6px; font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.kv4 .kvcl-cta{ margin-top:clamp(30px,4vw,46px); display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
/* „Vidi još" — RESPONSIVE: prikaži prvih 5 klijenata + dugme koje otvara ostale.
   Na desktopu (šire od 900px) prikazuju se svi, dugme je skriveno. */
.kv4 .kvcl-moreWrap{ display:none; margin-top:26px; justify-content:center; }
@media (max-width:900px){
	.kv4 .kvcl-grid:not(.is-expanded) .kvcl-card:nth-child(n+6){ display:none; }
	.kv4 .kvcl-moreWrap{ display:flex; }
	.kv4 .kvcl-grid.is-expanded + .kvcl-moreWrap{ display:none; }
}
/* „Vidi još" dugme (samo na responsive) — moderniji izgled: mekana plava pilula sa
   strelicom nadole, blagi podizaj i senka na hover. */
.kv4 .kvcl-more.wv-btn{
	padding:13px 28px; border-radius:14px;
	font-size:14.5px; font-weight:800; letter-spacing:-.01em;
	color:var(--blue);
	background:linear-gradient(180deg, rgba(18,139,204,.10), rgba(18,139,204,.035));
	border:1px solid rgba(18,139,204,.28);
	box-shadow:0 8px 22px rgba(5,31,62,.07);
	transition:transform .2s ease, box-shadow .25s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.kv4 .kvcl-more.wv-btn:hover{ transform:translateY(-2px); color:#0a6fb0;
	background:linear-gradient(180deg, rgba(18,139,204,.17), rgba(18,139,204,.07));
	border-color:rgba(18,139,204,.5); box-shadow:0 16px 34px rgba(18,139,204,.2); }
/* strelica nadole (umesto ">") + spušta se na hover */
.kv4 .kvcl-more .blt-chev{ transform:rotate(45deg); margin-left:.35em; }
.kv4 .kvcl-more:hover .blt-chev{ transform:rotate(45deg) translate(2px,2px); }
@media (max-width:460px){
	.kv4 .kvcl-more.wv-btn{ width:min(100%,360px); justify-content:center; }
}

@media (prefers-reduced-motion: reduce){ .kv4 .kvcl-card:hover::after{ animation:none; } }

/* ===== Scroll-reveal za „Pouzdanost…" i „Kako izgleda saradnja" = IDENTIČNO
   „Sertifikatima" na početnoj (.hc-grid > .hc-rev): blur + scale + slide, PER-KARTICA,
   DVOSMERNO (koristi postojeći .wv-rev/.is-rev observer + kolonski --wv-delay iz JS). ===== */
.kv4 .kvcl-card.wv-rev, .kv4 .kv3-tlItem.wv-rev{
	translate:0 42px; scale:.93; filter:blur(8px);
	transition:opacity .7s cubic-bezier(.18,.9,.2,1) var(--wv-delay,0s),
		translate .7s cubic-bezier(.18,.9,.2,1) var(--wv-delay,0s),
		scale .7s cubic-bezier(.18,.9,.2,1) var(--wv-delay,0s),
		filter .7s cubic-bezier(.18,.9,.2,1) var(--wv-delay,0s); }
.kv4 .kvcl-card.wv-rev.is-rev, .kv4 .kv3-tlItem.wv-rev.is-rev{ translate:0 0; scale:1; filter:blur(0); }
/* Naslov ovih sekcija ulazi kao naslov „Sertifikata" (.hc-head.hc-rev): blaži blur+scale. */
.kv4 .kvcl .wv-centerhead.wv-rev, .kv4 .kv3-process .wv-centerhead.wv-rev{
	translate:0 22px; scale:.985; filter:blur(14px);
	transition:opacity .95s cubic-bezier(.18,.9,.2,1), translate .95s cubic-bezier(.18,.9,.2,1),
		scale .95s cubic-bezier(.18,.9,.2,1), filter .95s cubic-bezier(.18,.9,.2,1); }
.kv4 .kvcl .wv-centerhead.wv-rev.is-rev, .kv4 .kv3-process .wv-centerhead.wv-rev.is-rev{ translate:0 0; scale:1; filter:blur(0); }
@media (prefers-reduced-motion: reduce){
	.kv4 .kvcl-card.wv-rev, .kv4 .kv3-tlItem.wv-rev,
	.kv4 .kvcl .wv-centerhead.wv-rev, .kv4 .kv3-process .wv-centerhead.wv-rev{
		translate:none !important; scale:none !important; filter:none !important; opacity:1 !important; }
}