/* Signum — zajednički stil naslovnice i podstranica (članci, zaštita podataka) */
/* ── Besplatni broj i prijava na korisnički portal u zaglavlju (umjesto gornje trake) ── */
.nav-cta { display: none; }
.nav-cta-tel, .nav-cta-login { text-decoration: none; }
/* prijava: okrugli crveni gumb samo s ikonom korisnika (opis je u title i aria-label) */
.nav-cta-login {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #c8181e;
	color: #fff;
	font-size: 16px;
	transition: background .3s;
}
.nav-cta-login:hover, .nav-cta-login:focus-visible { background: #9e1015; color: #fff; }
@media (min-width: 992px) {
	.nav-cta { display: flex; align-items: center; gap: 16px; margin-left: 18px; padding-left: 22px; border-left: 1px solid #e6e8ee; }
	.nav-cta-tel { display: flex; flex-direction: column; line-height: 1.15; font-family: 'Outfit', sans-serif; }
	.nav-cta-tel b { font-size: 17px; font-weight: 700; color: #303c42; white-space: nowrap; transition: color .3s; }
	.nav-cta-tel b i { margin-right: 6px; font-size: 13px; color: #c8181e; }
	.nav-cta-tel:hover b { color: #c8181e; }
}
/* 992–1199px: izbornik je tijesan, pa ostaje samo prijava */
@media (min-width: 992px) and (max-width: 1199px) {
	.nav-cta { margin-left: 8px; padding-left: 12px; }
	.nav-cta-tel { display: none; }
}
/* mobitel i tablet: okrugli gumbi za poziv i prijavu lijevo od izbornika s tri crtice */
.nav-cta-mob { display: none; }
@media (max-width: 991px) {
	/* logo fiksne visine, da ikona izbornika i oba gumba budu na istoj sredini kao logo */
	.techvio-responsive-nav .logo img { height: 56px !important; max-height: none !important; width: auto !important; }
	.techvio-responsive-nav .mean-container a.meanmenu-reveal { top: 13px; }
	.nav-cta-mob { position: absolute; top: 28px; right: 50px; z-index: 1000; display: flex; align-items: center; gap: 8px; transform: translateY(-50%); }
	.nav-cta-mob .nav-cta-tel { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #e6e8ee; border-radius: 50%; color: #c8181e; font-size: 14px; }
	.nav-cta-mob .nav-cta-login { width: 38px; height: 38px; font-size: 15px; }
}

/* ── Kotačić gore ── */
.home-shape-animation .shape-2 {
	top: 5% !important;
}

/* ── Vanjski linkovi — bez capitalize ── */
.techvio-nav .navbar-nav .nav-link[href*="cloudpbx"] {
	text-transform: none !important;
}

/* ── Sub-title plava boja ── */
.sub-title { color: #2e6da4 !important; }

/* ── Banneri — naslov tamno siv kao naslovi sekcija, opis tamno plav kao oznaka "O NAMA" ── */
#heroTitle { color: #404040 !important; }
#heroDesc { color: #2e6da4 !important; }

/* ── Naslovi bannera — najveći font s kojim svih 5 naslova stane u 3 reda (1px rezerve) ── */
#heroTitle { font-size: calc((100vw - 40px) * 0.087) !important; line-height: 1.4 !important; }
@media (min-width: 576px) { #heroTitle { font-size: 47px !important; } }
@media (min-width: 768px) { #heroTitle { font-size: 54px !important; } }
@media (min-width: 992px) { #heroTitle { font-size: 41px !important; } }
@media (min-width: 1200px) { #heroTitle { font-size: 50px !important; } }
@media (min-width: 1400px) { #heroTitle { font-size: 58px !important; } }

/* ── Brojači (15+ godina…) — umjesto ljubičastog sloja diskretni tamnocrveni, kao tamne sekcije ── */
.counter-area::before {
	opacity: 1;
	background:
		radial-gradient(900px 420px at 50% 50%, rgba(110, 10, 16, .45), transparent 75%),
		rgba(14, 10, 11, .82);
}

/* ── Cloud PBX sekcija — tekst lijevo, velika slika desno ── */
.cpbx-section { background: #fff; }
.cpbx-title { margin-bottom: 22px; }
.cpbx-section > .container p { font-size: 16.5px; }
.cpbx-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 28px; }
.cpbx-plan {
	padding: 18px 22px;
	border: 1px solid #e9eaee;
	border-left: 3px solid #c8181e;
	border-radius: 0 14px 14px 0;
	background: #fafbfc;
	display: flex;
	flex-direction: column;
}
.cpbx-plan h3 { font-size: 19px; color: #404040; margin-bottom: 6px; }
.cpbx-section .cpbx-plan p { font-size: 15px; line-height: 1.6; margin-bottom: 10px; }
.cpbx-price { margin-top: auto; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 15px; color: #c8181e; }
.cpbx-section .cpbx-btns { margin-top: 28px; }
.cpbx-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.cpbx-link { font-family: 'Outfit', sans-serif; font-weight: 600; color: #2e6da4; }
.cpbx-link i { margin-left: 6px; transition: transform .3s; }
.cpbx-link:hover i { transform: translateX(4px); }
.cpbx-image img { width: 100%; height: auto; }
@media (max-width: 991px) {
	.cpbx-plans { margin-top: 40px; }
}
@media (max-width: 575px) {
	.cpbx-plans { grid-template-columns: minmax(0, 1fr); }
}
/* slika ispod teksta na mobitelu/tabletu */
@media (max-width: 991px) { .s4b-image { margin-top: 40px; } }

/* ── Start4BIZ sekcija — isti raspored kao Cloud PBX, svijetlo siva podloga ── */
.cpbx-section.s4b-section { background: #f7f8f9; }
.s4b-image img { border-radius: 18px; box-shadow: 0 18px 40px rgba(20, 14, 15, .14); }

/* ── SIP Trunking sekcija — isti raspored kao Cloud PBX, prevedena infografika ── */
.cpbx-section.sip-section { background: #f7f8f9; }
.sip-image img { border-radius: 18px; box-shadow: 0 18px 40px rgba(20, 14, 15, .12); }
.sip-feats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sip-section .sip-feats .cpbx-plan { background: #fff; padding: 16px 18px; }
.sip-section .sip-feats .cpbx-plan h3 { font-size: 17px; }
.sip-section .sip-feats .cpbx-plan p { font-size: 14px; margin-bottom: 0; }
@media (max-width: 991px) { .sip-feats { margin-top: 40px; } }
@media (max-width: 575px) { .sip-feats { grid-template-columns: minmax(0, 1fr); } }

/* ── AI Recepcionist sekcija — kao SIP Trunking, bijela podloga, video preko cijelog stupca ── */
.cpbx-section.ai-section { background: #fff; }
.ai-image .hero-video-wrap {
	width: 100%;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 18px 40px rgba(20, 14, 15, .12);
}

/* ── Linkovi iz izbornika — sekcija počinje ispod ljepljivog headera ── */
section[id] { scroll-margin-top: var(--header-h, 120px); }
/* bez automatskog sidrenja skrolanja — inače se pri lijepljenju headera sadržaj pomakne za visinu headera */
html { overflow-anchor: none; }

/* ── Naslovi sekcija: Novosti lijevo (kao Za vašu informaciju), Česta pitanja desno ── */
.section-title.naslov-lijevo { text-align: left; }
.home-faq .section-title.naslov-desno { text-align: right; }


/* ── HERO pozadina — uklonjena ── */
.home-section.home-2 {
	background-image: none !important;
}



/* ── NAŠE USLUGE — tamna mreža kartica (po uzoru na mazze.io "Go deeper") ── */
.usluge-section {
	--line: rgba(236, 238, 244, .16);
	--ease: cubic-bezier(.22, 1, .36, 1);
	position: relative;
	padding: 90px 0 100px;
	background:
		radial-gradient(600px 420px at 50% 60%, rgba(200, 24, 30, .16), transparent 70%),
		radial-gradient(700px 500px at 15% 0%, rgba(110, 10, 16, .38), transparent 70%),
		#0e0a0b;
	overflow: hidden;
}
.usluge-heading {
	font-family: 'Outfit', sans-serif;
	font-size: clamp(38px, 5vw, 64px);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	color: #fff;
	margin-bottom: 48px;
}
.usluge-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--line);
	border: 1px solid rgba(236, 238, 244, .26);
	border-radius: 24px;
	overflow: hidden;
	position: relative;
}
/* diskretno osvjetljenje kutije (kao mazze.io Shielded Space): svjetlo gore desno, crvenkasti odsjaj dolje lijevo */
.usluge-grid::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	border-radius: inherit;
	background:
		radial-gradient(ellipse 75% 95% at 100% 0%, rgba(255, 255, 255, .15), transparent 62%),
		radial-gradient(ellipse 55% 65% at 0% 100%, rgba(200, 24, 30, .2), transparent 62%);
	mix-blend-mode: screen;
}
.usluge-item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 320px;
	padding: clamp(26px, 3vw, 44px);
	background: linear-gradient(160deg, rgba(255, 255, 255, .045), rgba(14, 10, 11, .94) 60%), #0e0a0b;
	text-decoration: none;
	overflow: hidden;
	isolation: isolate;
}
/* crveni sjaj koji se na hover podiže odozdo */
.usluge-item::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(135deg, rgba(200, 24, 30, .38), transparent 70%);
	clip-path: inset(100% 0 0 0);
	transition: clip-path .7s var(--ease);
}
.usluge-item:hover::before { clip-path: inset(0); }
/* točkasti uzorak koji prati miš */
.usluge-item::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: radial-gradient(rgba(255, 255, 255, .35) 1px, transparent 1.5px);
	background-size: 16px 16px;
	opacity: 0;
	-webkit-mask-image: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), #000, transparent 75%);
	mask-image: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), #000, transparent 75%);
	transition: opacity .5s var(--ease);
}
.usluge-item:hover::after { opacity: 1; }
.usluge-num {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	color: rgba(236, 238, 244, .45);
}
.usluge-arrow {
	position: absolute;
	top: clamp(26px, 3vw, 44px);
	right: clamp(26px, 3vw, 44px);
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(236, 238, 244, .3);
	border-radius: 50%;
	color: #fff;
	font-size: 15px;
	transition: transform .6s var(--ease), background .4s, color .4s;
}
.usluge-item:hover .usluge-arrow {
	transform: rotate(-45deg);
	background: #fff;
	color: #0e0a0b;
}
.usluge-title {
	margin-top: auto;
	font-family: 'Outfit', sans-serif;
	font-size: clamp(28px, 2.6vw, 40px);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.05;
	color: #fff;
}
/* istaknuta završna poruka u opisu kartice — novi red, zeleno */
.usluge-poziv { display: block; margin-top: 8px; color: #4ade80; font-weight: 600; }
.usluge-desc {
	font-family: 'Catamaran', sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: rgba(236, 238, 244, .62);
	max-width: 420px;
}
/* ── Klijenti — samo uski pojas s logotipima koji putuju (logotipi s cloudpbx.hr) ── */
.klijenti-section { padding: 40px 0; background: #fff; }
/* logotipi u jednom redu, beskonačna traka u zaobljenom okviru; JS udvostručuje niz */
.klijenti-okvir {
	position: relative;
	overflow: hidden;
	padding: 34px 0;
	border: 1px solid #e6e8ee;
	border-radius: 24px;
	background: #fafbfc;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.klijenti-grid {
	display: flex;
	width: max-content;
	--gap: 56px;
	gap: var(--gap);
	animation: klijentiTraka var(--trajanje, 60s) linear infinite;
}
.klijenti-okvir:hover .klijenti-grid { animation-play-state: paused; }
@keyframes klijentiTraka {
	from { transform: translateX(0); }
	to { transform: translateX(calc(-50% - var(--gap) / 2)); }
}
.klijenti-item { flex: 0 0 190px; display: flex; align-items: center; justify-content: center; height: 80px; }
.klijenti-item img { max-width: 100%; max-height: 80px; object-fit: contain; }
/* široki, niski logotipi smiju malo zaći u razmak */
.klijenti-item--siri img { max-width: 112%; }
/* logotip male rezolucije — razvući na širinu ćelije kao ostali */
.klijenti-item--mali img { width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) {
	.klijenti-grid { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}
@media (max-width: 767px) {
	.klijenti-section { padding: 28px 0; }
	.klijenti-okvir { padding: 24px 0; border-radius: 18px; }
	.klijenti-grid { --gap: 36px; }
	.klijenti-item { flex-basis: 130px; height: 56px; }
	.klijenti-item img { max-height: 56px; }
}

/* ── FOOTER — tamni tonovi kao Naše usluge; karta u pozadini ostaje ── */
.footer-subscribe-wrapper {
	background:
		radial-gradient(700px 420px at 85% 10%, rgba(200, 24, 30, .14), transparent 70%),
		radial-gradient(800px 520px at 10% 60%, rgba(110, 10, 16, .34), transparent 70%),
		#0e0a0b;
}
.footer-subscribe-wrapper:before { opacity: .22; }
.footer-heading h3 { border-bottom-color: rgba(236, 238, 244, .16); }
.single-footer-widget .footer-quick-links li a,
.single-footer-widget .footer-info-contact span,
.single-footer-widget .footer-info-contact span a { color: rgba(236, 238, 244, .7); }
.copyright-area {
	background-color: #090607;
	border-top: 1px solid rgba(236, 238, 244, .12);
}
.copyright-area p, .copyright-area ul li a { color: rgba(236, 238, 244, .6); }

/* ── VoIP-Shop.hr sekcija — naslov lijevo, gumb prema trgovini desno ── */
.shop-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 48px;
}
.shop-head .usluge-heading { margin-bottom: 0; }
.shop-btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	border-radius: 999px;
	background: #c8181e;
	color: #fff;
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	transition: background .3s, color .3s;
}
.shop-btn:hover { background: #fff; color: #0e0a0b; }
/* slika proizvoda u kartici — između oznake i naziva */
#voip-shop .usluge-item { min-height: 400px; }
.shop-img-wrap {
	position: relative;
	z-index: 0;
	margin: auto 0 0;
	max-width: 75%;
	align-self: flex-start;
	display: block;
}
/* meki sjaj iza proizvoda — da slika ne izgleda izrezano i zalijepljeno */
.shop-img-wrap::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -30% -18%;
	background: radial-gradient(closest-side, rgba(255, 236, 232, .26), rgba(200, 24, 30, .16) 55%, transparent 100%);
	filter: blur(6px);
	opacity: .8;
	transition: opacity .6s var(--ease), transform .6s var(--ease);
}
#voip-shop .usluge-item:hover .shop-img-wrap::before { transform: scale(1.12); opacity: 1; }
.shop-img {
	display: block;
	max-width: 100%;
	max-height: 140px;
	object-fit: contain;
	filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .55));
	transition: transform .6s var(--ease);
}
#voip-shop .usluge-item:hover .shop-img { transform: translateY(-6px) scale(1.04); }
#voip-shop .usluge-title { margin-top: 22px; }
@media (max-width: 767px) {
	#voip-shop .usluge-item { min-height: 0; }
	.shop-img-wrap { margin-top: 14px; }
	.shop-img { max-height: 110px; }
}
/* nazivi velikim slovima — font s kojim i "VIDEOKONFERENCIJE" stane u karticu */
#voip-shop .usluge-title { font-size: min(30px, calc((100vw - 93px) / 10.5)); }
@media (min-width: 768px) { #voip-shop .usluge-title { font-size: 26px; } }
@media (min-width: 992px) { #voip-shop .usluge-title { font-size: 23px; } }
@media (min-width: 1200px) { #voip-shop .usluge-title { font-size: 28px; } }
@media (min-width: 1400px) { #voip-shop .usluge-title { font-size: 32px; } }
/* tablet: dvije kartice u redu, treća preko cijele širine */
@media (min-width: 768px) and (max-width: 991px) {
	#voip-shop .usluge-item:last-child { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
	.shop-head { flex-direction: column; align-items: flex-start; margin-bottom: 32px; }
}

/* ── Migracija na Cloud PBX — isti stil, četiri koraka u redu ── */
.usluge-eyebrow {
	display: block;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #ff5a5f;
	margin-bottom: 18px;
}
.usluge-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.usluge-grid--4 .usluge-item { min-height: 340px; }
.usluge-grid--4 .usluge-title { font-size: clamp(24px, 2vw, 30px); }
/* koraci nisu linkovi — ikona se ne okreće kao strelica */
.usluge-grid--4 .usluge-item:hover .usluge-arrow { transform: none; }
@media (max-width: 1199px) {
	.usluge-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
	.usluge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.usluge-section { padding: 60px 0 70px; }
	.usluge-grid { grid-template-columns: minmax(0, 1fr); }
	.usluge-item, .usluge-grid--4 .usluge-item { min-height: 0; }
	.usluge-title { margin-top: 34px; }
}
/* ── HERO SLIKA ── */
.home-section.home-2 .banner-image img {
	max-width: 90% !important;
	height: auto !important;
}

/* ── RAZMAK hero sekcija ── */
.home-section.home-2 .main-banner-content {
	padding-top: 20px !important;
}
.home-section .banner-image {
	padding-top: 20px !important;
}
.home-section.home-2 {
	min-height: auto !important;
	height: auto !important;
	padding: 30px 0 70px !important; /* dolje mjesta za brojač banera */
}
/* ── Animirane ikone hero — svijetlo plava ── */
.home-shape-animation img {
	filter: invert(55%) sepia(60%) saturate(400%) hue-rotate(185deg) brightness(110%);
}
/* ── Plavi puni krug — odrezana aura oko kruga ── */
.home-shape-animation img[src$="/5.png"] {
	clip-path: circle(20.5%);
}
/* ── Call DESK — plavi krug luta uz sliku, kao na Start4BIZ banneru ── */
.home-section.hero-calldesk .home-shape-animation .shape-2 {
	left: 49%;
	animation: animationFramesOne 20s infinite linear;
}
.home-section.hero-calldesk .home-shape-animation .shape-2 img {
	animation: none;
}
/* izmjena banera: sadržaj se kratko pretopi (JS dodaje .hero-mijena dok mijenja sadržaj) */
#heroSection .main-banner-content, #heroSection .banner-image { transition: opacity .35s ease, transform .35s ease; }
#heroSection.hero-mijena .main-banner-content { opacity: 0; transform: translateY(8px); }
#heroSection.hero-mijena .banner-image { opacity: 0; }
/* diskretni brojač banera pri dnu: prazni pravokutnici, aktivni ispunjen sivom */
.hero-brojac { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 3; display: flex; justify-content: center; gap: 8px; }
.hero-brojac button { position: relative; width: 26px; height: 6px; padding: 0; border: 1px solid #c3c7ce; border-radius: 2px; background: transparent; cursor: pointer; transition: background-color .3s, border-color .3s; }
/* nevidljivo proširenje — lakši dodir prstom na mobitelu */
.hero-brojac button::after { content: ""; position: absolute; inset: -14px -4px; }
.hero-brojac button:hover { border-color: #8f959e; }
.hero-brojac button.aktivan { background: #8f959e; border-color: #8f959e; }
@media (prefers-reduced-motion: reduce) { #heroSection .main-banner-content, #heroSection .banner-image { transition: none; } }
/* sve slike u heru stoje u okviru iste visine (omjer 10:7), pa se tekst lijevo ne pomiče
   ovisno o tome koja se slika pojavi; viša slika (npr. AI Recepcionist) se u okviru smanji */
#heroSection .banner-image { aspect-ratio: 10 / 7; display: flex; align-items: center; justify-content: center; }
#heroSection #heroImg { max-width: 90%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
#heroSection .hero-video-wrap { width: 100%; }
/* tablet: slika ispod teksta ne smije biti preširoka — brojač i dalje ostaje blizu prvog ekrana */
@media (min-width: 576px) and (max-width: 991px) { #heroSection .banner-image { max-width: 440px; margin-left: auto; margin-right: auto; } }
/* slika iza kruga, da krug ne nestane iza njezine bijele pozadine */
.home-section.hero-calldesk #heroImg {
	position: relative;
	z-index: -2;
}
/* ── AI Recepcionist — plavi krug maknut iza videa, gore desno ── */
.home-section.hero-ai .home-shape-animation .shape-6 {
	left: auto;
	right: 2%;
	bottom: auto;
	top: 6%;
}
/* ── AI Recepcionist — hrvatski oblačići preko engleskih u videu ──
   sve mjere su u pikselima videa (950×540), --u je jedan piksel videa */
.hero-video-wrap {
	position: relative;
	display: inline-block;
	width: min(90%, 950px);
	container-type: inline-size;
	line-height: 0;
}
.hero-video-wrap video { display: block; width: 100%; height: auto; }
.ai-bubble {
	--u: calc(100cqw / 950);
	position: absolute;
	left: calc(var(--x) * var(--u));
	top: calc(var(--y) * var(--u));
	width: calc(var(--w) * var(--u));
	height: calc(var(--h) * var(--u));
	background: var(--bg, #fff);
	border-radius: calc(12 * var(--u));
	transform-origin: calc(var(--ox, 0) * var(--u)) calc(var(--oy, 0) * var(--u));
	visibility: hidden;
	pointer-events: none;
}
.ai-bubble span {
	position: absolute;
	left: 0; right: 0;
	top: calc(var(--ty) * var(--u));
	font: 400 calc(var(--fs) * var(--u)) / calc(var(--lh) * var(--u)) 'Poppins', sans-serif;
	color: #161d1d;
	white-space: nowrap;
	text-align: center;
}
.ai-bubble.usr span { text-align: left; left: calc(13 * var(--u)); }

/* ── NAVBAR ── */
.navbar-section {
	position: relative !important;
	top: auto !important;
}
.navbar-section.is-sticky {
	position: fixed !important;
	top: 0 !important;
}

/* ── LOGO ── */
.navbar-brand img,
.logo img {
	max-height: 120px !important;
	width: auto !important;
}

/* ── NAVBAR visina i centriranje ── */
.techvio-nav.index-navber {
	padding-top: 12px !important;
	padding-bottom: 12px !important;
}
.techvio-nav.index-navber .navbar {
	min-height: 144px;
	align-items: center;
}
.techvio-nav.index-navber .navbar-brand {
	display: flex;
	align-items: center;
	padding-top: 0;
	padding-bottom: 0;
}
.techvio-nav.index-navber .navbar-nav .nav-item {
	padding-top: 20px !important;
	padding-bottom: 20px !important;
}

/* ── Logo poravnanje lijevo ── */
.techvio-nav.index-navber .navbar {
	padding-left: 0 !important;
}
.techvio-nav.index-navber .navbar-brand {
	margin-right: auto;
	padding-left: 0 !important;
}
.techvio-nav.index-navber .navbar-collapse {
	justify-content: flex-end;
}
.techvio-nav.index-navber .navbar .navbar-nav {
	margin-left: auto !important;
	margin-right: 0 !important;
}

/* ── Gumb "Nazovite nas" ── */
.techvio-nav.index-navber .other-option {
	display: flex;
	align-items: center;
}

/* ── NAV LINKS — Outfit 500, bez razmaka među slovima ── */
.techvio-nav .navbar-nav .nav-link {
	font-family: 'Outfit', sans-serif !important;
	font-size: 15.5px !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	padding-left: 16px !important;
	padding-right: 16px !important;
}

/* ── HEADER — diskretna crta ispod za vizualno odvajanje od sadržaja ── */
/* izbornik u jednom redu — na užim ekranima manji razmaci i logo */
@media (min-width: 992px) and (max-width: 1399px) {
	.techvio-nav.index-navber .navbar-nav .nav-item > .nav-link { padding: 10px 11px !important; font-size: 15px !important; }
}
@media (min-width: 992px) and (max-width: 1199px) {
	.techvio-nav.index-navber .navbar-nav .nav-item > .nav-link { padding: 8px 7px !important; font-size: 14px !important; }
	.techvio-nav.index-navber .navbar-brand img { max-height: 80px !important; }
}
.navbar-section { border-bottom: 1px solid #e9eaee; }
@media (min-width: 992px) {
	.techvio-nav.index-navber .navbar-nav > .nav-item {
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin: 0 !important;
	}
	.techvio-nav.index-navber .navbar-nav { gap: 2px; }
	.techvio-nav.index-navber .navbar-nav .nav-item > .nav-link {
		padding: 10px 18px !important;
		margin: 0 !important;
		border-radius: 999px;
		white-space: nowrap;
		color: #2f2f2f !important;
		transition: background .3s, color .3s;
	}
	.techvio-nav.index-navber .navbar-nav .nav-item > .nav-link:hover,
	.techvio-nav.index-navber .navbar-nav .nav-item:hover > .nav-link {
		background: #f4f4f6;
		color: #c8181e !important;
	}
	.techvio-nav.index-navber .navbar-nav .dropdown-menu {
		top: 100%;
		padding: 8px;
		border: 1px solid #e8e9ee;
		border-radius: 16px;
		box-shadow: 0 16px 40px rgba(20, 14, 15, .1);
	}
	.techvio-nav.index-navber .navbar-nav .dropdown-menu .nav-link {
		padding: 9px 14px !important;
		border-radius: 10px;
	}
	.techvio-nav.index-navber .navbar-nav .dropdown-menu .nav-link:hover {
		background: #f4f4f6;
	}
}
/* mobilni izbornik: sve stavke vidljive bez skrolanja unutar okvira (predložak ga drži na 300px) */
.techvio-responsive-nav .techvio-responsive-menu.mean-container .navbar-nav {
	height: auto;
	max-height: calc(100vh - 150px);
	overflow-y: auto;
}
/* rečenica u opisu Cloud PBX koja pokreće Linkus video */
.cpbx-video-link { color: #c8181e; font-weight: 600; text-decoration: none; }
.cpbx-video-link:hover, .cpbx-video-link:focus-visible { color: #9e1015; text-decoration: underline; }
.cpbx-video-link i { margin-right: 4px; }
/* ── Start4BIZ paketi — cijena, stavke i gumb u tamnoj kartici ── */
#start4biz-detalji .usluge-title { font-size: clamp(20px, 1.6vw, 23px); letter-spacing: -0.01em; }
.s4b-cijena { font-family: 'Outfit', sans-serif; font-size: 40px; font-weight: 700; line-height: 1; color: #fff; }
.s4b-cijena small { margin-left: 6px; font-size: 14px; font-weight: 500; color: rgba(236, 238, 244, .55); }
.s4b-stavke { margin: 4px 0 0; padding: 0; list-style: none; font-family: 'Catamaran', sans-serif; font-size: 15px; line-height: 1.5; color: rgba(236, 238, 244, .62); }
.s4b-stavke li { position: relative; padding-left: 18px; margin-bottom: 6px; }
.s4b-stavke li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: #c8181e; }
.s4b-btn { align-self: flex-start; margin-top: 10px; padding: 11px 20px; border: 1px solid rgba(236, 238, 244, .3); border-radius: 999px; font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 600; color: #fff; text-decoration: none; transition: background .3s, border-color .3s, color .3s; }
.s4b-btn i { margin-left: 6px; font-size: 12px; }
.s4b-btn:hover, .s4b-btn:focus-visible { background: #c8181e; border-color: #c8181e; color: #fff; }
/* 1200–1399px: četiri uske kartice u redu — manji unutarnji razmak da nazivi i stavke stanu u jedan red */
@media (min-width: 1200px) and (max-width: 1399px) {
	.s4b-paket { padding: 30px 22px; }
	#start4biz-detalji .usluge-title { font-size: 20px; }
	.s4b-stavke { font-size: 14px; }
}
.s4b-napomena { margin: 28px 0 0; font-family: 'Catamaran', sans-serif; font-size: 14px; line-height: 1.6; color: rgba(236, 238, 244, .5); }
/* brojači — brojke i opisi nisu naslovi (SEO), izgled ostaje kao u predlošku */
.counter-contents .counter-value { color: #fff; font-family: 'Outfit', sans-serif; font-size: 45px; font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; margin-bottom: 5px; word-spacing: -5px; }
.counter-contents .counter-heading { color: #fff; font-family: 'Outfit', sans-serif; font-size: 20px; font-weight: 700; line-height: 1.4; letter-spacing: normal; margin: 0; }

/* ── Naše usluge: na širokim zaslonima svih 6 kartica u jednom redu, sekcija šira od ostatka stranice ── */
@media (min-width: 1200px) {
	.usluge-siroko { max-width: min(1560px, calc(100vw - 48px)); }
	.usluge-siroko .usluge-heading { margin-bottom: 36px; }
	/* kartice dijele redove (oznaka / naslov / opis), pa su naslovi u istoj ravnini bez obzira na duljinu opisa */
	.usluge-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: minmax(58px, 1fr) auto auto; }
	.usluge-grid--6 .usluge-item { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 8px; padding: 20px 20px 22px; }
	.usluge-grid--6 .usluge-num { align-self: start; }
	.usluge-grid--6 .usluge-title { align-self: end; margin-top: 0; }
	.usluge-grid--6 .usluge-arrow { top: 18px; right: 18px; width: 38px; height: 38px; font-size: 13px; }
	.usluge-grid--6 .usluge-num { padding-right: 46px; font-size: 11.5px; line-height: 1.4; }
	.usluge-grid--6 .usluge-title { font-size: 22px; }
	.usluge-grid--6 .usluge-desc { font-size: 14px; line-height: 1.5; }
}

/* ── Zaglavlje s besplatnim brojem i Loginom: logo se ne smije stisnuti, pa na užim zaslonima
   prostor dobivamo širim redom zaglavlja, manjim logom i manjim razmacima u izborniku ── */
.techvio-nav.index-navber .navbar-brand { flex-shrink: 0; }
@media (min-width: 1200px) and (max-width: 1399px) {
	.techvio-nav.index-navber > .container { max-width: calc(100vw - 48px); }
	.techvio-nav.index-navber .navbar-brand img { max-height: 96px !important; }
	.techvio-nav.index-navber .navbar-nav .nav-item > .nav-link { padding: 10px 13px !important; font-size: 15px !important; }
	.nav-cta { gap: 12px; margin-left: 10px; padding-left: 14px; }
}
@media (min-width: 1400px) {
	.techvio-nav.index-navber > .container { max-width: min(1440px, calc(100vw - 48px)); }
}
/* Česta pitanja: manji razmak između pitanja */
.home-faq .faq-accordion .accordion .accordion-item { margin-bottom: 14px; }
.home-faq .faq-accordion .accordion .accordion-item:last-child { margin-bottom: 0; }