/* ============================================================
   Portalix Media - dizajn sistem javnog sajta
   Tamna "spatial" tema sa dubinom: 3D transformacije, slojevi,
   scroll-driven animacije. Svetla varijanta ide preko istih tokena.

   1. Tokeni i osnove
   2. Tipografija
   3. Dubina, staklo, površine
   4. Zaglavlje i navigacija
   5. Dugmad i linkovi
   6. Uvodna sekcija (3D portal)
   7. Traka poverenja
   8. Bento mreža usluga
   9. Uredjivacki blok o kompaniji
  10. Slozeni stek (sticky depth stack)
  11. Horizontalna traka projekata
  12. Koraci i kinetička traka
  13. Zavrsni panel
  14. Unutrasnje stranice, forme, FAQ
  15. Podnozje
  16. Kretanje i responzivnost
   ============================================================ */

/* ---------------- 1. Tokeni ---------------- */

:root {
	color-scheme: dark;

	/* površine: od najdublje ka izdignutoj */
	--dno: #070a11;
	--sloj-1: #0b0f18;
	--sloj-2: #10151f;
	--sloj-3: #161d2b;
	--linija: #222c3f;
	--linija-jaka: #2e3a52;

	/* tekst; sve tri nijanse prolaze WCAG AA na tamnoj podlozi */
	--tekst: #e9eef8;
	--tekst-2: #97a3b8;
	--tekst-3: #8592a8;

	/* Jedan akcenat, dva tona iste boje:
	   --akcenat za tekst i linije na tamnoj podlozi (kontrast 6.4:1),
	   --akcenat-dugme kao pozadina dugmeta sa belim tekstom (kontrast 5.7:1). */
	--akcenat: #6b93ff;
	--akcenat-dugme: #2f5ae0;
	--akcenat-tiho: rgba(107, 147, 255, .14);
	--akcenat-linija: rgba(107, 147, 255, .34);

	/* staklo */
	--staklo: rgba(255, 255, 255, .045);
	--staklo-ivica: rgba(255, 255, 255, .09);
	--staklo-sjaj: rgba(255, 255, 255, .14);

	/* zaobljenja: dugmad su pilule, paneli 18px, polja 12px */
	--r-panel: 18px;
	--r-malo: 12px;
	--r-pilula: 999px;

	/* senke su tonirane u boju podloge, nikad crne */
	--senka-1: 0 1px 2px rgba(4, 7, 13, .5);
	--senka-2: 0 24px 60px -32px rgba(4, 7, 13, .9);
	--senka-3: 0 48px 120px -48px rgba(4, 7, 13, 1);
	--unutrasnji-sjaj: inset 0 1px 0 var(--staklo-sjaj);

	--okvir: 1200px;
	--razmak: clamp(3.25rem, 5.5vw, 5rem);
	--razmak-tesan: clamp(2rem, 3vw, 2.75rem);
	--lako: cubic-bezier(.22, 1, .36, 1);
	--prelaz: .32s var(--lako);

	--pismo: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--mono: 'Geist Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: light) {
	:root {
		color-scheme: light;

		--dno: #f4f6fb;
		--sloj-1: #ffffff;
		--sloj-2: #f7f9fd;
		--sloj-3: #eef2f9;
		--linija: #dde4ef;
		--linija-jaka: #c8d3e4;

		--tekst: #101724;
		--tekst-2: #4d5a70;
		--tekst-3: #5f6b7f;

		--akcenat: #2657e8;
		--akcenat-dugme: #2657e8;
		--akcenat-tiho: rgba(38, 87, 232, .09);
		--akcenat-linija: rgba(38, 87, 232, .28);

		--staklo: rgba(255, 255, 255, .72);
		--staklo-ivica: rgba(16, 23, 36, .08);
		--staklo-sjaj: rgba(255, 255, 255, .9);

		--senka-1: 0 1px 2px rgba(16, 23, 36, .05);
		--senka-2: 0 24px 60px -34px rgba(16, 23, 36, .28);
		--senka-3: 0 48px 120px -52px rgba(16, 23, 36, .34);
		--unutrasnji-sjaj: inset 0 1px 0 rgba(255, 255, 255, .8);
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--dno);
	color: var(--tekst);
	font-family: var(--pismo);
	font-size: 1.0625rem;
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

img,
svg,
canvas,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

a {
	color: var(--akcenat);
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	cursor: pointer;
}

:focus-visible {
	outline: 2px solid var(--akcenat);
	outline-offset: 3px;
	border-radius: 6px;
}

::selection {
	background: var(--akcenat);
	color: #fff;
}

.preskoci {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: .8rem 1.35rem;
	background: var(--akcenat);
	color: #fff;
	border-radius: 0 0 var(--r-malo) 0;
}

.preskoci:focus {
	left: 0;
}

.okvir {
	width: min(100% - 2.5rem, var(--okvir));
	margin-inline: auto;
}

.sekcija {
	position: relative;
	padding-block: var(--razmak);
}

/* sekcije koje pripadaju istoj celini stoje bliže jedna drugoj */

.sekcija.nastavak {
	padding-top: var(--razmak-tesan);
}

.sekcija.bez-dna {
	padding-bottom: 0;
}

/* zrno preko cele stranice, fiksno da ne izaziva prekrivanje pri skrolu */

.zrno {
	position: fixed;
	inset: 0;
	z-index: 60;
	pointer-events: none;
	opacity: .55;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23z)' opacity='.35'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: light) {
	.zrno {
		opacity: .3;
		mix-blend-mode: multiply;
	}
}

/* ---------------- 2. Tipografija ---------------- */

h1,
h2,
h3,
h4 {
	margin: 0;
	color: var(--tekst);
	font-weight: 600;
	line-height: 1.06;
	letter-spacing: -.035em;
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);
	letter-spacing: -.042em;
}

h2 {
	font-size: clamp(1.7rem, 1.25rem + 1.6vw, 2.5rem);
	letter-spacing: -.035em;
	line-height: 1.1;
}

h3 {
	font-size: 1.2rem;
	line-height: 1.3;
	letter-spacing: -.02em;
}

p {
	margin: 0 0 1.1em;
}

p:last-child {
	margin-bottom: 0;
}

.uvodni {
	font-size: clamp(1.06rem, 1rem + .38vw, 1.28rem);
	line-height: 1.6;
	color: var(--tekst-2);
	max-width: 58ch;
	text-wrap: pretty;
}

/* mala oznaka iznad naslova, koristi se najviše tri puta na stranici */

.oznaka {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	margin-bottom: 1.3rem;
	font-family: var(--mono);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--akcenat);
}

.oznaka::before {
	content: '';
	width: 26px;
	height: 1px;
	background: currentColor;
	opacity: .55;
}

/* brojevi i tehnički podaci idu u mono */

.mono {
	font-family: var(--mono);
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
}

.sekcija-glava {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.25rem 3rem;
	margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}

.sekcija-glava > div {
	max-width: 44rem;
}

.sekcija-glava p {
	margin-top: 1rem;
}

.tekst-veza {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding-bottom: .3rem;
	border-bottom: 1px solid var(--linija-jaka);
	font-size: .95rem;
	font-weight: 500;
	color: var(--tekst);
	white-space: nowrap;
	transition: border-color var(--prelaz), color var(--prelaz);
}

.tekst-veza i {
	font-style: normal;
	color: var(--akcenat);
	transition: transform var(--prelaz);
}

.tekst-veza:hover {
	color: var(--akcenat);
	border-bottom-color: var(--akcenat);
}

.tekst-veza:hover i {
	transform: translateX(4px);
}

/* tekst iz uređivača */

.proza {
	max-width: 66ch;
	color: var(--tekst-2);
}

.proza h2 {
	font-size: 1.55rem;
	margin: 2.4rem 0 .9rem;
	color: var(--tekst);
}

.proza h3 {
	font-size: 1.15rem;
	margin: 1.9rem 0 .7rem;
	color: var(--tekst);
}

.proza strong {
	color: var(--tekst);
	font-weight: 600;
}

.proza ul,
.proza ol {
	margin: 0 0 1.2em;
	padding-left: 1.3rem;
	list-style: disc;
}

.proza ol {
	list-style: decimal;
}

.proza li {
	margin-bottom: .45em;
}

.proza a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.proza blockquote {
	margin: 1.8rem 0;
	padding: 1.1rem 1.5rem;
	border-left: 2px solid var(--akcenat);
	background: var(--sloj-2);
	border-radius: 0 var(--r-malo) var(--r-malo) 0;
}

.proza table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.4rem;
	font-size: .95rem;
}

.proza th,
.proza td {
	padding: .7rem .85rem;
	border-bottom: 1px solid var(--linija);
	text-align: left;
}

/* ---------------- 3. Dubina i staklo ---------------- */

.panel {
	position: relative;
	background: var(--sloj-1);
	border: 1px solid var(--linija);
	border-radius: var(--r-panel);
	box-shadow: var(--senka-1), var(--unutrasnji-sjaj);
}

/* Pločica koja lebdi PREKO fotografije. Staklo tu ne radi: propušta boje
   snimka i tekst postane nečitljiv, pa je površina neprozirna. */

.plocica {
	background: color-mix(in srgb, var(--sloj-1) 94%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--linija-jaka);
	border-radius: var(--r-panel);
	box-shadow: var(--senka-2), var(--unutrasnji-sjaj);
}

@media (prefers-reduced-transparency: reduce) {
	.plocica {
		background: var(--sloj-1);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

/* scena sa perspektivom: deca mogu da se pomeraju po Z osi */

.scena {
	perspective: 1400px;
	perspective-origin: 50% 40%;
}

.dubina {
	transform-style: preserve-3d;
}

/* kartica koja se naginje prema kursoru (JS postavlja --rx, --ry, --mx, --my) */

.nagib {
	--rx: 0deg;
	--ry: 0deg;
	--mx: 50%;
	--my: 50%;
	transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0);
	transition: transform .5s var(--lako), border-color var(--prelaz), box-shadow var(--prelaz);
	will-change: transform;
}

.nagib.aktivan {
	transition: transform .08s linear, border-color var(--prelaz), box-shadow var(--prelaz);
}

/* sjaj koji prati kursor po površini kartice */

.nagib::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--prelaz);
	background: radial-gradient(22rem 18rem at var(--mx) var(--my), var(--akcenat-tiho), transparent 70%);
}

.nagib:hover::after {
	opacity: 1;
}

/* ---------------- 4. Zaglavlje ---------------- */

.strazar {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.zaglavlje {
	position: sticky;
	top: 0;
	z-index: 50;
	background: transparent;
	transition: background var(--prelaz), border-color var(--prelaz);
	border-bottom: 1px solid transparent;
}

.zaglavlje.pomeren {
	background: color-mix(in srgb, var(--dno) 82%, transparent);
	backdrop-filter: blur(20px) saturate(170%);
	-webkit-backdrop-filter: blur(20px) saturate(170%);
	border-bottom-color: var(--linija);
}

.zaglavlje-red {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	height: 72px;
}

.marka {
	display: flex;
	align-items: center;
}

.marka img {
	width: auto;
	height: 26px;
}

.logo-za-tamno {
	display: block;
}

.logo-za-svetlo {
	display: none;
}

@media (prefers-color-scheme: light) {
	.logo-za-tamno {
		display: none;
	}

	.logo-za-svetlo {
		display: block;
	}
}

.glavni-meni {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	margin-left: auto;
}

.glavni-meni > a {
	position: relative;
	font-size: .93rem;
	font-weight: 450;
	color: var(--tekst-2);
	padding-block: .3rem;
	transition: color var(--prelaz);
}

.glavni-meni > a:hover {
	color: var(--tekst);
}

.glavni-meni > a[aria-current="page"] {
	color: var(--tekst);
}

.glavni-meni > a[aria-current="page"]::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1px;
	background: var(--akcenat);
}

/* dugme u meniju zadrzava svoje boje: pravila menija su specificnija od .dugme */

.glavni-meni > a.dugme {
	color: #fff;
}

.glavni-meni > a.dugme:hover {
	color: #fff;
}

.glavni-meni > a.dugme::after {
	display: none;
}

.jezici {
	display: inline-flex;
	padding: 3px;
	border: 1px solid var(--linija);
	border-radius: var(--r-pilula);
	background: var(--sloj-2);
}

.jezici a {
	padding: .18rem .55rem;
	border-radius: var(--r-pilula);
	font-family: var(--mono);
	font-size: .68rem;
	letter-spacing: .08em;
	color: var(--tekst-3);
	line-height: 1.6;
	transition: color var(--prelaz), background var(--prelaz);
}

.jezici a:hover {
	color: var(--tekst);
}

.jezici a.aktivan {
	background: var(--akcenat);
	color: #fff;
}

.meni-dugme {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	margin-left: auto;
	padding: 0 10px;
	background: var(--sloj-2);
	border: 1px solid var(--linija);
	border-radius: var(--r-malo);
}

.meni-dugme span {
	display: block;
	height: 1.5px;
	border-radius: 2px;
	background: var(--tekst);
	transition: transform var(--prelaz), opacity var(--prelaz);
}

.meni-dugme[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}

.meni-dugme[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.meni-dugme[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}

/* ---------------------------------------------------------
 | Meni preko celog ekrana
 |
 | Prikazuje se samo do 860px. Ima svoje zaglavlje sa logotipom i
 | dugmetom za zatvaranje, pa radi bez obzira na to gde je stranica
 | skrolovana kad se otvori.
 --------------------------------------------------------- */

.meni-preko {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: none;
	flex-direction: column;
	background: color-mix(in srgb, var(--dno) 89%, transparent);
	backdrop-filter: blur(30px) saturate(130%);
	-webkit-backdrop-filter: blur(30px) saturate(130%);
	opacity: 0;
	visibility: hidden;
	clip-path: inset(0 0 100% 0);
	transition:
		opacity .3s var(--lako),
		visibility .3s var(--lako),
		clip-path .5s var(--lako);
}

@media (max-width: 860px) {
	.meni-preko {
		display: flex;
	}
}

.meni-preko.otvoren {
	opacity: 1;
	visibility: visible;
	clip-path: inset(0 0 0 0);
}

/* zaglavlje menija stoji na istom mestu kao zaglavlje stranice */

.meni-vrh {
	flex-shrink: 0;
	border-bottom: 1px solid var(--linija);
}

.meni-vrh-red {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 72px;
}

.meni-zatvori {
	display: flex;
	margin-left: 0;
}

/* telo menija se skroluje ako stavki ima previše za ekran */

.meni-telo {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2rem;
	flex-grow: 1;
	padding-block: clamp(1.5rem, 5vh, 3rem);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.meni-lista li {
	border-bottom: 1px solid var(--linija);
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .45s var(--lako), transform .45s var(--lako);
}

.meni-preko.otvoren .meni-lista li {
	opacity: 1;
	transform: none;
	transition-delay: calc(140ms + var(--i, 0) * 55ms);
}

.meni-lista a {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: .9rem 0;
	color: var(--tekst);
	transition: color var(--prelaz);
}

.meni-broj {
	font-size: .72rem;
	color: var(--akcenat);
	opacity: .8;
	width: 1.9rem;
	flex-shrink: 0;
}

.meni-naziv {
	flex-grow: 1;
	font-size: clamp(1.65rem, 1.1rem + 3vw, 2.4rem);
	font-weight: 600;
	letter-spacing: -.035em;
	line-height: 1.15;
}

.meni-lista i {
	font-style: normal;
	font-size: 1.1rem;
	color: var(--tekst-3);
	transition: transform var(--prelaz), color var(--prelaz);
}

.meni-lista a:hover,
.meni-lista a[aria-current="page"] {
	color: var(--akcenat);
}

.meni-lista a:hover i {
	transform: translate(3px, -3px);
	color: var(--akcenat);
}

/* dno menija ulazi poslednje */

.meni-dno {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.15rem;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .45s var(--lako), transform .45s var(--lako);
}

.meni-preko.otvoren .meni-dno {
	opacity: 1;
	transform: none;
	transition-delay: .42s;
}

.meni-dno .dugme {
	width: 100%;
}

/* Na tabletu dugme preko cele sirine izgleda razvuceno. */

@media (min-width: 600px) {
	.meni-dno .dugme {
		width: auto;
		padding-inline: 2.4rem;
	}
}

.meni-mejl {
	font-size: .95rem;
	color: var(--tekst-2);
	border-bottom: 1px solid var(--linija);
	padding-bottom: .25rem;
}

.meni-mejl:hover {
	color: var(--akcenat);
	border-bottom-color: var(--akcenat);
}

/* dok je meni otvoren stranica se ne pomera; pomeraj se pamti u JS-u */

body.meni-otvoren {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	overflow: hidden;
}

/* zaglavlje bi inače odletelo van ekrana kad body postane fiksiran */

body.meni-otvoren .zaglavlje {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

@media (prefers-reduced-transparency: reduce) {
	.meni-preko {
		background: var(--dno);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.meni-preko {
		clip-path: none;
	}

	.meni-preko.otvoren .meni-lista li,
	.meni-preko.otvoren .meni-dno {
		transition-delay: 0s;
	}
}

/* ---------------- 5. Dugmad ---------------- */

.dugme {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	padding: .85rem 1.6rem;
	border: 1px solid transparent;
	border-radius: var(--r-pilula);
	background: var(--akcenat-dugme);
	color: #fff;
	font-size: .96rem;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: var(--unutrasnji-sjaj), 0 12px 28px -18px color-mix(in srgb, var(--akcenat-dugme) 70%, transparent);
	transition: transform .18s var(--lako), background var(--prelaz), border-color var(--prelaz), color var(--prelaz);
}

.dugme:hover {
	background: color-mix(in srgb, var(--akcenat-dugme) 90%, white);
	transform: translateY(-1px);
}

.dugme:active {
	transform: translateY(0) scale(.985);
}

.dugme i {
	font-style: normal;
	transition: transform var(--prelaz);
}

.dugme:hover i {
	transform: translate(2px, -2px);
}

.dugme-obris {
	background: transparent;
	border-color: var(--linija-jaka);
	color: var(--tekst);
	box-shadow: none;
}

.dugme-obris:hover {
	background: var(--sloj-2);
	border-color: var(--akcenat-linija);
	color: var(--tekst);
}

.dugme-tiho {
	background: var(--sloj-2);
	border-color: var(--linija);
	color: var(--tekst);
	box-shadow: none;
}

.dugme-tiho:hover {
	background: var(--sloj-3);
	border-color: var(--linija-jaka);
}

.dugme-malo {
	padding: .55rem 1.05rem;
	font-size: .875rem;
}

/* ---------------- 6. Uvodna sekcija ---------------- */

.uvod {
	position: relative;
	padding-block: clamp(2.5rem, 4vw, 4rem) clamp(3rem, 5vw, 4.5rem);
	overflow: hidden;
}

.uvod-pozadina {
	position: absolute;
	inset: -20% -10% auto;
	height: 130%;
	pointer-events: none;
	background:
		radial-gradient(54rem 34rem at 76% 12%, color-mix(in srgb, var(--akcenat) 22%, transparent), transparent 62%),
		radial-gradient(40rem 30rem at 6% 78%, color-mix(in srgb, var(--akcenat) 12%, transparent), transparent 60%);
	filter: blur(10px);
}

.uvod-resetka {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(var(--linija) 1px, transparent 1px),
		linear-gradient(90deg, var(--linija) 1px, transparent 1px);
	background-size: 88px 88px;
	mask-image: radial-gradient(68% 60% at 50% 32%, #000 10%, transparent 76%);
	-webkit-mask-image: radial-gradient(68% 60% at 50% 32%, #000 10%, transparent 76%);
	opacity: .5;
}

.uvod-mreza {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.28fr) minmax(0, .88fr);
	align-items: center;
	gap: clamp(2rem, 4vw, 3.5rem);
	min-height: min(76dvh, 44rem);
}

/* naslov uvoda staje u dva reda na desktopu, zato ima svoju skalu */

.uvod-tekst h1 {
	margin-bottom: 1.3rem;
	font-size: clamp(2.15rem, 1.2rem + 2.45vw, 3.15rem);
	line-height: 1.04;
}

.uvod-tekst > p {
	max-width: 33rem;
}

.uvod-akcije {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	margin-top: 2.4rem;
}

/* 3D portal: canvas plus staklena pločica statusa */

.portal {
	position: relative;
	aspect-ratio: 1 / 1;
	max-width: 34rem;
	margin-inline: auto;
	width: 100%;
}

.portal canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.portal-slika {
	position: absolute;
	inset: 22%;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: var(--senka-3);
	transform: translateZ(0);
}

.portal-slika img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(1.05) contrast(1.02);
}

.portal-slika::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px var(--staklo-ivica), inset 0 -40px 80px -30px var(--dno);
}

.portal-plocica {
	position: absolute;
	left: 0;
	bottom: 8%;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .8rem 1.1rem;
	border-radius: var(--r-panel);
}

.status-tacka {
	position: relative;
	width: 8px;
	height: 8px;
	flex-shrink: 0;
	border-radius: 50%;
	background: #34d399;
}

.status-tacka::after {
	content: '';
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 1px solid rgba(52, 211, 153, .4);
	animation: puls 2.6s var(--lako) infinite;
}

@keyframes puls {
	0% { transform: scale(.5); opacity: 1; }
	100% { transform: scale(1.4); opacity: 0; }
}

.portal-plocica small {
	display: block;
	font-family: var(--mono);
	font-size: .64rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--tekst-3);
}

.portal-plocica strong {
	font-size: .92rem;
	font-weight: 500;
	color: var(--tekst);
}

/* ---------------- 7. Traka poverenja ---------------- */

.poverenje {
	border-block: 1px solid var(--linija);
	background: var(--sloj-1);
}

.poverenje-red {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: var(--linija);
	border-inline: 1px solid var(--linija);
}

.poverenje-red li {
	padding: clamp(1.9rem, 3vw, 2.6rem) 1.5rem;
	background: var(--sloj-1);
}

.poverenje-red b {
	display: block;
	font-family: var(--mono);
	font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.9rem);
	font-weight: 500;
	letter-spacing: -.05em;
	line-height: 1;
	color: var(--tekst);
	font-variant-numeric: tabular-nums;
}

.poverenje-red span {
	display: block;
	margin-top: .55rem;
	font-size: .855rem;
	color: var(--tekst-3);
}

.poverenje-dokazi {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 2.25rem;
	padding-block: 1.35rem;
	border-top: 1px solid var(--linija);
}

.poverenje-dokazi li {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-size: .9rem;
	color: var(--tekst-2);
}

.poverenje-dokazi svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	color: var(--akcenat);
}

/* ---------------- 8. Bento mreža usluga ---------------- */

.bento {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 1rem;
}

.bento-celija {
	position: relative;
	display: flex;
	flex-direction: column;
	grid-column: span 2;
	min-height: 13rem;
	padding: 1.6rem;
	overflow: hidden;
	background: var(--sloj-1);
	border: 1px solid var(--linija);
	border-radius: var(--r-panel);
	color: var(--tekst);
}

.bento-celija:hover {
	border-color: var(--akcenat-linija);
	box-shadow: var(--senka-2);
}

/* prva ćelija je široka i nosi fotografiju */

.bento-celija.velika {
	grid-column: span 4;
	min-height: 18.5rem;
	justify-content: flex-end;
	padding: 1.9rem;
}

.bento-celija.visoka {
	grid-column: span 2;
	min-height: 18.5rem;
	justify-content: flex-end;
}

.bento-slika {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.bento-slika img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s var(--lako);
}

.bento-celija:hover .bento-slika img {
	transform: scale(1.04);
}

.bento-slika::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(7, 10, 17, .18) 0%, rgba(7, 10, 17, .72) 58%, rgba(7, 10, 17, .94) 100%);
}

/* ćelija sa gradijentom umesto fotografije */

.bento-celija.prelaz {
	background:
		radial-gradient(26rem 20rem at 80% 10%, color-mix(in srgb, var(--akcenat) 40%, transparent), transparent 66%),
		linear-gradient(160deg, var(--sloj-3), var(--sloj-1));
}

.bento-sadrzaj {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.bento-celija.velika .bento-sadrzaj,
.bento-celija.visoka .bento-sadrzaj {
	justify-content: flex-end;
}

.bento-celija.velika h3,
.bento-celija.visoka h3 {
	color: #fff;
	font-size: 1.45rem;
}

.bento-celija.velika p,
.bento-celija.visoka p {
	color: rgba(233, 238, 248, .78);
}

.bento-ikona {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-bottom: 1.2rem;
	border-radius: var(--r-malo);
	background: var(--akcenat-tiho);
	border: 1px solid var(--akcenat-linija);
	color: var(--akcenat);
}

.bento-ikona svg {
	width: 19px;
	height: 19px;
}

.bento-celija h3 {
	margin-bottom: .5rem;
}

.bento-celija p {
	margin: 0;
	font-size: .93rem;
	color: var(--tekst-2);
}

.bento-broj {
	position: absolute;
	top: 1.5rem;
	right: 1.6rem;
	z-index: 1;
	font-family: var(--mono);
	font-size: .72rem;
	color: var(--tekst-3);
}

/* naslov nosi link, a njegov ::after cini celu celiju klikabilnom */

.bento-celija h3 a {
	color: inherit;
}

.bento-celija h3 a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
}

.bento-strelica {
	margin-top: auto;
	padding-top: 1.35rem;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .88rem;
	font-weight: 500;
	color: var(--akcenat);
}

.bento-strelica i {
	font-style: normal;
	transition: transform var(--prelaz);
}

.bento-celija:hover .bento-strelica i {
	transform: translate(3px, -3px);
}

/* ---------------- 9. Uredjivacki blok ---------------- */

.uredjivacki {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
	gap: clamp(2rem, 4.5vw, 3.75rem);
	align-items: center;
}

/* kad leva kolona nosi samo naslov, uža je da ne ostane prazan prostor */

.uredjivacki.uska-leva {
	grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr);
	align-items: start;
}

/* naslov u uskoj koloni ne sme da se izlomi u previše redova */

.uredjivacki.uska-leva h2 {
	font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2rem);
}

/* kolona koja prati skrol dok sadržaj pored nje prolazi */

.lepljiva {
	position: sticky;
	top: 7rem;
	align-self: start;
}

/* okvir daje tacku oslonca lebdecoj plocici, jer .slika-3d secе sadrzaj */

.slika-okvir {
	position: relative;
}

.slika-3d {
	position: relative;
	border-radius: var(--r-panel);
	overflow: hidden;
	box-shadow: var(--senka-3);
	aspect-ratio: 4 / 3;
}

.slika-3d img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.slika-3d::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px var(--staklo-ivica);
}

/* pločica koja lebdi ispred slike */

.lebdeca-plocica {
	position: absolute;
	right: -1.25rem;
	bottom: 1.75rem;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: .85rem;
	padding: .9rem 1.15rem;
	max-width: 15rem;
	border-radius: var(--r-panel);
}

.lebdeca-plocica b {
	font-family: var(--mono);
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--akcenat);
}

.lebdeca-plocica span {
	font-size: .82rem;
	line-height: 1.4;
	color: var(--tekst);
}

/* pomerene stavke sa mono brojevima */

.stavke {
	display: grid;
	gap: 1.15rem;
	margin-top: 2rem;
	counter-reset: stavka;
}

.stavke article {
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	gap: 0 1rem;
	padding-top: 1.15rem;
	border-top: 1px solid var(--linija);
}

.stavke article::before {
	counter-increment: stavka;
	content: counter(stavka, decimal-leading-zero);
	font-family: var(--mono);
	font-size: .75rem;
	color: var(--akcenat);
	padding-top: .2rem;
}

.stavke h3 {
	margin-bottom: .3rem;
}

.stavke p {
	margin: 0;
	font-size: .92rem;
	color: var(--tekst-2);
}

/* ---------------- 10. Slozeni stek ---------------- */

.stek {
	position: relative;
	display: grid;
	gap: .85rem;
}

.stek-kartica {
	position: sticky;
	top: calc(var(--vrh, 7rem) + var(--i, 0) * 1.1rem);
	transform: scale(calc(1 - (var(--n, 4) - 1 - var(--i, 0)) * .028));
	transform-origin: top center;
	transition: transform .4s var(--lako);
}

.stek-telo {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	align-items: start;
	gap: .25rem 1.1rem;
	padding: clamp(1.35rem, 2vw, 1.75rem) clamp(1.5rem, 2.2vw, 2rem);
	background: var(--sloj-2);
	border: 1px solid var(--linija);
	border-radius: var(--r-panel);
	box-shadow: var(--senka-2), var(--unutrasnji-sjaj);
}

.stek-broj {
	font-family: var(--mono);
	font-size: .74rem;
	color: var(--akcenat);
	padding-top: .3rem;
}

.stek-telo h3 {
	font-size: 1.1rem;
	margin-bottom: .35rem;
}

.stek-telo p {
	margin: 0;
	color: var(--tekst-2);
	font-size: .93rem;
	line-height: 1.55;
}

/* ---------------- 11. Kartica projekta ---------------- */

.traka-stavka {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--sloj-1);
	border: 1px solid var(--linija);
	border-radius: var(--r-panel);
	color: var(--tekst);
	transition: border-color var(--prelaz), box-shadow var(--prelaz);
}

.traka-stavka:hover {
	border-color: var(--akcenat-linija);
	box-shadow: var(--senka-2);
}

.traka-vizual {
	position: relative;
	aspect-ratio: 4 / 3;
	display: grid;
	place-items: center;
	padding: 1.75rem;
	overflow: hidden;
	background:
		radial-gradient(22rem 16rem at 72% 18%, color-mix(in srgb, var(--akcenat) 34%, transparent), transparent 68%),
		linear-gradient(155deg, var(--sloj-3), var(--dno));
}

.traka-vizual img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s var(--lako);
}

.traka-stavka:hover .traka-vizual img {
	transform: scale(1.05);
}

.traka-vizual span {
	position: relative;
	font-size: 1.15rem;
	font-weight: 500;
	letter-spacing: -.02em;
	color: #fff;
	text-align: center;
	text-wrap: balance;
}

.traka-telo {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 1.5rem 1.6rem 1.7rem;
}

.traka-tip {
	margin-bottom: .7rem;
	font-family: var(--mono);
	font-size: .68rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--akcenat);
}

.traka-telo h3 {
	margin-bottom: .5rem;
}

.traka-telo p {
	flex-grow: 1;
	margin-bottom: 1.1rem;
	font-size: .92rem;
	color: var(--tekst-2);
}

.traka-tehnologije {
	padding-top: 1rem;
	border-top: 1px solid var(--linija);
	font-family: var(--mono);
	font-size: .76rem;
	color: var(--tekst-3);
}

/* mreza kartica: na 1200px daje tri kolone, ispod se sama prelama */

.mreza {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	gap: 1.25rem;
}

/* kartice usluga na stranici sa spiskom usluga */

.kartica-usluge {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.9rem 1.75rem 1.7rem;
	background: var(--sloj-1);
	border: 1px solid var(--linija);
	border-radius: var(--r-panel);
	overflow: hidden;
	transition: border-color var(--prelaz), box-shadow var(--prelaz);
}

.kartica-usluge:hover {
	border-color: var(--akcenat-linija);
	box-shadow: var(--senka-2);
}

.kartica-usluge .bento-broj {
	top: 1.6rem;
	right: 1.75rem;
}

.kartica-usluge h3 {
	margin-bottom: .55rem;
	font-size: 1.14rem;
}

.kartica-usluge h3 a {
	color: inherit;
}

.kartica-usluge h3 a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
}

.kartica-usluge p {
	flex-grow: 1;
	margin: 0 0 1.4rem;
	font-size: .93rem;
	color: var(--tekst-2);
}

.kartica-usluge:hover .bento-strelica i {
	transform: translate(3px, -3px);
}

/* ---------------- 12. Koraci i kineticka traka ---------------- */

.koraci {
	position: relative;
	display: grid;
	gap: 0;
	counter-reset: korak;
}

.koraci article {
	position: relative;
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr);
	gap: 1.5rem;
	padding: 1.45rem 0;
	border-top: 1px solid var(--linija);
}

.koraci article:last-child {
	border-bottom: 1px solid var(--linija);
}

.koraci article::before {
	counter-increment: korak;
	content: counter(korak, decimal-leading-zero);
	font-family: var(--mono);
	font-size: .8rem;
	color: var(--tekst-3);
	transition: color var(--prelaz);
}

.koraci article:hover::before {
	color: var(--akcenat);
}

.koraci h3 {
	font-size: clamp(1.1rem, .95rem + .7vw, 1.5rem);
	font-weight: 500;
	color: var(--tekst-2);
	transition: color var(--prelaz), transform var(--prelaz);
}

.koraci article:hover h3 {
	color: var(--tekst);
	transform: translateX(6px);
}

/* kinetička traka sa nazivima usluga */

.kineticka {
	padding-block: clamp(2.5rem, 5vw, 4rem);
	border-block: 1px solid var(--linija);
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.kineticka-red {
	display: flex;
	width: max-content;
	animation: klizanje 46s linear infinite;
}

.kineticka:hover .kineticka-red {
	animation-play-state: paused;
}

.kineticka-red span {
	display: inline-flex;
	align-items: center;
	gap: 2.5rem;
	padding-right: 2.5rem;
	font-size: clamp(1.5rem, 1rem + 2vw, 2.6rem);
	font-weight: 500;
	letter-spacing: -.035em;
	color: var(--tekst-3);
	white-space: nowrap;
}

.kineticka-red span::after {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--akcenat);
	opacity: .6;
}

@keyframes klizanje {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}

/* ---------------- 13. Zavrsni panel ---------------- */

.zavrsni {
	position: relative;
	padding-block: clamp(3rem, 5vw, 4.5rem);
}

.zavrsni-panel {
	position: relative;
	overflow: hidden;
	padding: clamp(2.5rem, 5vw, 4.25rem) clamp(1.75rem, 4vw, 3.75rem);
	border-radius: calc(var(--r-panel) * 1.6);
	border: 1px solid var(--linija);
	background:
		radial-gradient(40rem 26rem at 82% 8%, color-mix(in srgb, var(--akcenat) 30%, transparent), transparent 64%),
		linear-gradient(150deg, var(--sloj-3) 0%, var(--sloj-1) 55%, var(--dno) 100%);
	box-shadow: var(--senka-3), var(--unutrasnji-sjaj);
}

.zavrsni-panel::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(var(--staklo-ivica) 1px, transparent 1px),
		linear-gradient(90deg, var(--staklo-ivica) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(70% 70% at 50% 0%, #000, transparent 72%);
	-webkit-mask-image: radial-gradient(70% 70% at 50% 0%, #000, transparent 72%);
	opacity: .6;
}

.zavrsni-sadrzaj {
	position: relative;
	max-width: 46rem;
}

.zavrsni-sadrzaj h2 {
	max-width: 22ch;
}

.zavrsni-sadrzaj p {
	margin-top: 1.25rem;
}

.zavrsni-sadrzaj .dugme {
	margin-top: 2.4rem;
}

/* ---------------- 14. Unutrasnje stranice ---------------- */

.strana-vrh {
	position: relative;
	padding-block: clamp(2.25rem, 4vw, 3.5rem) clamp(2rem, 3.2vw, 2.75rem);
	overflow: hidden;
	border-bottom: 1px solid var(--linija);
}

.strana-vrh::before {
	content: '';
	position: absolute;
	inset: -60% 0 auto;
	height: 160%;
	pointer-events: none;
	background: radial-gradient(46rem 24rem at 78% 0%, color-mix(in srgb, var(--akcenat) 16%, transparent), transparent 62%);
}

.strana-vrh > * {
	position: relative;
}

.strana-vrh h1 {
	max-width: 18ch;
	font-size: clamp(1.95rem, 1.4rem + 1.9vw, 2.85rem);
}

.strana-vrh .uvodni {
	margin-top: 1.25rem;
}

.mrvice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .45rem;
	margin-bottom: 1.6rem;
	font-family: var(--mono);
	font-size: .76rem;
	color: var(--tekst-3);
}

.mrvice a {
	color: var(--tekst-3);
	transition: color var(--prelaz);
}

.mrvice a:hover {
	color: var(--akcenat);
}

.mrvice [aria-current] {
	color: var(--tekst-2);
}

/* detalj usluge */

.detalj {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
	gap: clamp(2rem, 4vw, 3.25rem);
}

.mala-oznaka {
	display: block;
	margin-bottom: .9rem;
	font-family: var(--mono);
	font-size: .7rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--akcenat);
}

.detalj h2 {
	font-size: clamp(1.4rem, 1.15rem + .9vw, 1.85rem);
	margin-bottom: 1.1rem;
}

.lista-kvacica li {
	position: relative;
	padding-left: 1.85rem;
	margin-bottom: 1rem;
	color: var(--tekst-2);
}

.lista-kvacica li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .55rem;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--akcenat);
	transform: rotate(45deg);
}

.ukljuceno {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: 1rem;
	counter-reset: ukljuceno;
}

.ukljuceno article {
	padding: 1.45rem 1.4rem;
	background: var(--sloj-1);
	border: 1px solid var(--linija);
	border-radius: var(--r-panel);
	transition: border-color var(--prelaz), box-shadow var(--prelaz);
}

.ukljuceno article:hover {
	border-color: var(--akcenat-linija);
	box-shadow: var(--senka-2);
}

.ukljuceno article::before {
	counter-increment: ukljuceno;
	content: counter(ukljuceno, decimal-leading-zero);
	display: block;
	margin-bottom: .8rem;
	font-family: var(--mono);
	font-size: .72rem;
	color: var(--akcenat);
}

.ukljuceno h3 {
	margin-bottom: .4rem;
	font-size: 1.05rem;
}

.ukljuceno p {
	margin: 0;
	font-size: .9rem;
	color: var(--tekst-2);
}

/* FAQ */

.faq-lista {
	max-width: 52rem;
	border-top: 1px solid var(--linija);
}

.faq-stavka {
	border-bottom: 1px solid var(--linija);
}

.faq-stavka > button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	width: 100%;
	padding: 1.35rem 0;
	background: none;
	border: 0;
	text-align: left;
	font-size: 1.02rem;
	font-weight: 500;
	color: var(--tekst);
	transition: color var(--prelaz);
}

.faq-stavka > button:hover {
	color: var(--akcenat);
}

.faq-stavka > button i {
	position: relative;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

.faq-stavka > button i::before,
.faq-stavka > button i::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 11px;
	height: 1.5px;
	border-radius: 2px;
	background: var(--akcenat);
	transform: translate(-50%, -50%);
	transition: transform var(--prelaz), opacity var(--prelaz);
}

.faq-stavka > button i::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.faq-stavka > button[aria-expanded="true"] i::after {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(0deg);
}

.faq-odgovor {
	overflow: hidden;
	max-height: 0;
	transition: max-height .4s var(--lako);
}

.faq-odgovor p {
	padding-bottom: 1.4rem;
	max-width: 62ch;
	color: var(--tekst-2);
}

/* činjenice projekta */

.cinjenice {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 1px;
	margin-top: 2.5rem;
	background: var(--linija);
	border: 1px solid var(--linija);
	border-radius: var(--r-panel);
	overflow: hidden;
}

.cinjenice div {
	padding: 1.2rem 1.3rem;
	background: var(--sloj-1);
}

.cinjenice dt {
	margin-bottom: .35rem;
	font-family: var(--mono);
	font-size: .68rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tekst-3);
}

.cinjenice dd {
	margin: 0;
	font-weight: 500;
	color: var(--tekst);
}

.galerija {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: 1rem;
}

.galerija img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--r-panel);
	border: 1px solid var(--linija);
}

/* kartice na običnoj stranici */

.kartice {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem;
	margin-top: 2.25rem;
}

.kartice article {
	padding: 1.6rem 1.5rem;
	background: var(--sloj-1);
	border: 1px solid var(--linija);
	border-radius: var(--r-panel);
}

.kartice h3 {
	margin-bottom: .45rem;
	font-size: 1.05rem;
}

.kartice p {
	margin: 0;
	font-size: .92rem;
	color: var(--tekst-2);
}

/* ---------------- kontakt ---------------- */

.kontakt-mreza {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

.forma-panel {
	padding: clamp(1.75rem, 3.5vw, 2.75rem);
	background: var(--sloj-1);
	border: 1px solid var(--linija);
	border-radius: var(--r-panel);
	box-shadow: var(--senka-2);
}

.polja {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.15rem;
}

.polje {
	display: flex;
	flex-direction: column;
	gap: .45rem;
}

.polje.puno {
	grid-column: 1 / -1;
}

.polje label {
	font-size: .855rem;
	font-weight: 500;
	color: var(--tekst);
}

.polje input,
.polje select,
.polje textarea {
	width: 100%;
	padding: .8rem 1rem;
	background: var(--sloj-2);
	border: 1px solid var(--linija);
	border-radius: var(--r-malo);
	font: inherit;
	font-size: .96rem;
	color: var(--tekst);
	transition: border-color var(--prelaz), background var(--prelaz);
}

.polje select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--tekst-2) 50%), linear-gradient(135deg, var(--tekst-2) 50%, transparent 50%);
	background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 2.75rem;
}

.polje input::placeholder,
.polje textarea::placeholder {
	color: var(--tekst-3);
}

.polje textarea {
	min-height: 9.5rem;
	resize: vertical;
}

.polje input:focus,
.polje select:focus,
.polje textarea:focus {
	outline: none;
	border-color: var(--akcenat);
	background: var(--sloj-3);
}

.polje .greska {
	font-size: .82rem;
	color: #f87171;
}

@media (prefers-color-scheme: light) {
	.polje .greska {
		color: #b91c1c;
	}
}

.polje input[aria-invalid="true"],
.polje textarea[aria-invalid="true"] {
	border-color: #f87171;
}

.saglasnost {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	grid-column: 1 / -1;
	font-size: .875rem;
	color: var(--tekst-2);
}

.saglasnost input {
	width: 17px;
	height: 17px;
	margin-top: .22rem;
	flex-shrink: 0;
	accent-color: var(--akcenat);
}

.forma-dno {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 1.9rem;
}

.forma-dno small {
	font-size: .82rem;
	color: var(--tekst-2);
}

.mamac {
	position: absolute;
	left: -9999px;
	opacity: 0;
	pointer-events: none;
}

.kontakt-podaci {
	padding: clamp(1.75rem, 3.5vw, 2.5rem);
	border-radius: var(--r-panel);
	border: 1px solid var(--linija);
	background:
		radial-gradient(26rem 18rem at 88% 6%, color-mix(in srgb, var(--akcenat) 26%, transparent), transparent 66%),
		linear-gradient(155deg, var(--sloj-3), var(--sloj-1));
}

.kontakt-podaci h2 {
	font-size: 1.3rem;
	margin-bottom: 1.4rem;
}

.kontakt-podaci dl {
	margin: 0;
}

.kontakt-podaci dt {
	margin-bottom: .3rem;
	font-family: var(--mono);
	font-size: .68rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tekst-3);
}

.kontakt-podaci dd {
	margin: 0 0 1.4rem;
	color: var(--tekst);
	font-size: 1rem;
}

.kontakt-podaci dd:last-child {
	margin-bottom: 0;
}

.kontakt-podaci a {
	color: var(--tekst);
	border-bottom: 1px solid var(--akcenat-linija);
	transition: color var(--prelaz);
}

.kontakt-podaci a:hover {
	color: var(--akcenat);
}

.kontakt-prednosti {
	display: grid;
	gap: .7rem;
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--staklo-ivica);
}

.kontakt-prednosti li {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	font-size: .9rem;
	color: var(--tekst-2);
}

.kontakt-prednosti svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	margin-top: .2rem;
	color: var(--akcenat);
}

/* poruke posetiocu */

.poruke-okvir {
	width: min(100% - 2.5rem, var(--okvir));
	margin: 1.5rem auto 0;
}

.poruka-traka {
	padding: .95rem 1.2rem;
	margin-bottom: 1rem;
	border-radius: var(--r-malo);
	border: 1px solid;
	font-size: .95rem;
}

.poruka-uspeh {
	background: rgba(52, 211, 153, .1);
	border-color: rgba(52, 211, 153, .35);
	color: #6ee7b7;
}

.poruka-greska {
	background: rgba(248, 113, 113, .1);
	border-color: rgba(248, 113, 113, .35);
	color: #fca5a5;
}

@media (prefers-color-scheme: light) {
	.poruka-uspeh {
		background: #ecfdf5;
		border-color: #a7f3d0;
		color: #065f46;
	}

	.poruka-greska {
		background: #fef2f2;
		border-color: #fecaca;
		color: #991b1b;
	}
}

/* stranica greške */

.greska-strana {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 82dvh;
	padding-block: 4rem;
	text-align: center;
}

.greska-strana > * {
	width: 100%;
	max-width: 44rem;
}

.greska-logo {
	width: auto;
	height: 26px;
	margin-bottom: 3rem;
}

.greska-kod {
	font-family: var(--mono);
	font-size: clamp(4rem, 3rem + 8vw, 8rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -.06em;
	color: var(--akcenat);
}

/* ---------------- 15. Podnozje ---------------- */

.podnozje {
	position: relative;
	padding-top: clamp(3.5rem, 6vw, 5rem);
	border-top: 1px solid var(--linija);
	background: var(--sloj-1);
}

.podnozje-mreza {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
	gap: 2.5rem;
	padding-bottom: 3rem;
}

.podnozje-marka img {
	height: 28px;
	width: auto;
	margin-bottom: 1.25rem;
}

.podnozje-marka p {
	max-width: 30ch;
	font-size: .93rem;
	color: var(--tekst-2);
}

.podnozje-cta {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-top: 1.5rem;
	padding-bottom: .35rem;
	border-bottom: 1px solid var(--linija-jaka);
	font-size: .93rem;
	font-weight: 500;
	color: var(--tekst);
	transition: color var(--prelaz), border-color var(--prelaz);
}

.podnozje-cta:hover {
	color: var(--akcenat);
	border-bottom-color: var(--akcenat);
}

.podnozje h2 {
	margin-bottom: 1.2rem;
	font-family: var(--mono);
	font-size: .7rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--tekst-3);
}

.podnozje li {
	margin-bottom: .7rem;
}

.podnozje li a,
.podnozje-kontakt li {
	font-size: .93rem;
	color: var(--tekst-2);
	transition: color var(--prelaz);
}

.podnozje li a:hover {
	color: var(--tekst);
}

.podnozje-radno {
	margin-top: 1.1rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--linija);
	font-size: .875rem !important;
	color: var(--tekst-3) !important;
}

.podnozje-mreze {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-top: 1.4rem;
}

.podnozje-mreze a {
	padding: .3rem .8rem;
	border: 1px solid var(--linija);
	border-radius: var(--r-pilula);
	font-size: .78rem;
	color: var(--tekst-2);
	transition: border-color var(--prelaz), color var(--prelaz);
}

.podnozje-mreze a:hover {
	color: var(--tekst);
	border-color: var(--linija-jaka);
}

.podnozje-dno {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.5rem;
	border-top: 1px solid var(--linija);
	font-size: .83rem;
	color: var(--tekst-3);
}

.podnozje-dno nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1.35rem;
}

.podnozje-dno a {
	color: var(--tekst-3);
	transition: color var(--prelaz);
}

.podnozje-dno a:hover {
	color: var(--tekst);
}

/* ---------------- 16. Kretanje ---------------- */

/* Ulazak sekcija. Kretanje vodi Motion iz pokret-sajt.js i pise
   inline stilove; ovo je pocetno stanje i rezerva ako biblioteka
   ne stigne (tada se samo doda .vidljivo i prelaz odradi posao). */

.otkrij {
	opacity: 0;
	transform: translate3d(0, 26px, 0);
}

.otkrij.vidljivo {
	opacity: 1;
	transform: none;
	transition: opacity .7s var(--lako), transform .7s var(--lako);
}

/* bez skriptovanja nema ni animacija: sve mora biti odmah vidljivo */

@media (scripting: none) {

	.otkrij,
	.uvod-tekst,
	.portal {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* naslov uvoda podeljen na reci: svaka se penje iz svog okvira */

.rec-omot {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: .08em;
}

.rec {
	display: inline-block;
}

/* traka napretka citanja */

.napredak-skrol {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 120;
	width: 100%;
	height: 2px;
	transform: scaleX(0);
	transform-origin: 0 50%;
	background: linear-gradient(90deg, var(--akcenat-dugme), var(--akcenat));
	pointer-events: none;
}

/* meko skrolovanje (Lenis) */

html.lenis,
html.lenis body {
	height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
	overflow: clip;
}

.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
	pointer-events: none;
}

/* paralaksa slojeva uvoda, vezana za skrol bez JS-a */

@supports (animation-timeline: scroll()) {
	.uvod-resetka {
		animation: paralaksa-spora linear both;
		animation-timeline: scroll(root block);
		animation-range: 0 90vh;
	}

	.uvod-pozadina {
		animation: paralaksa-brza linear both;
		animation-timeline: scroll(root block);
		animation-range: 0 90vh;
	}

	.portal-plocica {
		animation: plocica-dubina linear both;
		animation-timeline: scroll(root block);
		animation-range: 0 80vh;
	}
}

@keyframes paralaksa-spora {
	to { transform: translate3d(0, 9vh, 0); }
}

@keyframes paralaksa-brza {
	to { transform: translate3d(0, 16vh, 0); opacity: .35; }
}

@keyframes plocica-dubina {
	to { transform: translate3d(0, -3vh, 0) scale(.94); opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}

	.otkrij {
		opacity: 1;
		transform: none;
	}

	.stek-kartica {
		position: static;
		transform: none;
	}

	.kineticka-red {
		animation: none;
		transform: none;
	}

	.nagib {
		transform: none !important;
	}
}

/* ---------------- Responzivnost ---------------- */

@media (max-width: 1080px) {
	.uvod-mreza,
	.uredjivacki,
	.uredjivacki.uska-leva,
	.kontakt-mreza {
		grid-template-columns: minmax(0, 1fr);
	}

	/* lepljive kolone nemaju smisla kad je raspored jednokolonski */
	.lepljiva {
		position: static;
	}

	.uredjivacki.uska-leva h2 {
		font-size: clamp(2rem, 1.3rem + 2.7vw, 3.4rem);
	}

	.uvod-mreza {
		min-height: 0;
	}

	.portal {
		max-width: 26rem;
	}

	.uredjivacki .slika-3d {
		max-width: 30rem;
	}

	.bento-celija,
	.bento-celija.velika,
	.bento-celija.visoka {
		grid-column: span 3;
	}

	.poverenje-red {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.stek-telo {
		grid-template-columns: 3rem minmax(0, 1fr);
	}

	.stek-mera {
		grid-column: 2;
		text-align: left;
	}

	.podnozje-mreza {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2rem;
	}

	.podnozje-marka {
		grid-column: 1 / -1;
	}
}

@media (max-width: 860px) {
	.meni-dugme {
		display: flex;
	}

	/* navigacija zaglavlja se sklanja, njenu ulogu preuzima meni preko ekrana */
	.glavni-meni {
		display: none;
	}

	.stavke article {
		grid-template-columns: 2.25rem minmax(0, 1fr);
	}

	.koraci article {
		grid-template-columns: 3.25rem minmax(0, 1fr);
		gap: 1rem;
	}

	.polja {
		grid-template-columns: minmax(0, 1fr);
	}

	.lebdeca-plocica {
		right: .75rem;
		bottom: .75rem;
	}
}

@media (max-width: 560px) {
	body {
		font-size: 1rem;
	}

	.bento-celija,
	.bento-celija.velika,
	.bento-celija.visoka {
		grid-column: 1 / -1;
		min-height: 13rem;
	}

	.bento-celija.velika,
	.bento-celija.visoka {
		min-height: 17rem;
	}

	.poverenje-red {
		grid-template-columns: minmax(0, 1fr);
	}

	.podnozje-mreza {
		grid-template-columns: minmax(0, 1fr);
	}

	.uvod-akcije .dugme {
		flex: 1 1 100%;
	}

	.stek-kartica {
		position: static;
		transform: none;
	}
}