/**
 * TOBO — stilovi teme.
 *
 * Port dizajna sa tobo-capital-green (statični Vite/Tailwind build). Vrednosti su
 * preuzete iz originalnog CSS-a, samo su Tailwind utility klase zamenjene
 * imenovanim komponentama. Media query range sintaksa (width<=900px) prevedena
 * je u (max-width:900px) radi šire podrške.
 */

/* ---------------------------------------------------------------
   1. Fontovi — Geist (latin registruje theme.json, ovde latin-ext)
   --------------------------------------------------------------- */

@font-face {
	font-family: 'Geist';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/geist-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------
   2. Tokeni
   --------------------------------------------------------------- */

:root {
	--green: #769855;
	--green-dark: #63804A;
	--navy: #282C35;
	--navy-deep: #1A1D23;
	--navy-bar: #20232A;
	--ink: #282C35;
	--muted: #68707A;
	--line: #DFE2E0;
	--page: #F7F8F7;
	--ice: #F4F5F4;
	--nav-link: #3A3F47;

	--shell-max: 1500px;
	--radius-card: 18px;
	--radius-stage: 26px;
	--radius-btn: 12px;

	--header-h: 88px;

	/* Logo u header-u: veliki na vrhu stranice, na skrolu se vraća na raniju
	   veličinu. Header je sticky od nulte pozicije, pa „kad se zalepi" nema
	   smisla kao okidač — okidač je skrol (klasa .tobo-scrolled iz tobo.js). */
	--logo-w: 321px;         /* 247 × 1.3 */
	--logo-w-stuck: 247px;
}

/* Original nasledjuje border-box iz Tailwind preflight-a; bez ovoga svaki
   element sa padding-om i zadatom sirinom ispadne siri nego u originalu. */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	background: var(--page);
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 3px;
	border-radius: 4px;
}

:where([id]) { scroll-margin-top: calc(var(--header-h) + 24px); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.tobo-skip {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--navy); color: #fff; padding: 12px 18px;
}
.tobo-skip:focus { left: 0; }

/* ---------------------------------------------------------------
   3. Kontejner i ritam sekcija
   --------------------------------------------------------------- */

.shell {
	width: calc(100% - 64px);
	max-width: var(--shell-max);
	margin-inline: auto;
}

/* WP lepi `--wp--style--block-gap` kao margin-block-start na svako dete
   .wp-site-blocks — odatle bela traka od 20px ispod header-a i iznad futera.
   Original nema nijedan razmak izmedju traka. */
.wp-site-blocks > * { margin-block-start: 0; }

/* Sticky header. WP umotava template part u <div class="wp-block-template-part">,
   pa je sticky kontekst visok tacno koliko traka — header odlepi vec posle 35px
   skrola. Sticky mora da ide na sam wrapper, cija je kontejnerska kutija
   .wp-site-blocks (cela stranica). Wrapper nosi i topline i header, sto je isto
   ponasanje kao u originalu (obe trake ostaju prikacene, ukupno 123px). */
.wp-site-blocks > .wp-block-template-part:first-child {
	position: sticky;
	top: 0;
	z-index: 900;
	/* Sopstveni kompoziting sloj: uz backdrop-filter u headeru Chrome je pri
	   skrolu ostavljao tanke „ghost" pruge prethodnog frame-a po sadržaju
	   (viđeno oko formi na više stranica). */
	will-change: transform;
}

/* Sekcije su sirov HTML u post-content-u. WP dodaje blockGap margine i, ako je
   layout constrained, max-width na sam .wp-block-post-content — zbog toga su tamne
   trake bile uze od header-a na ekranima preko 1500px. Layout je sada `default`,
   a ovde se ponistava i sve sto bi jos moglo da suzi sekcije. */
.tobo-main,
.tobo-main .entry-content,
.tobo-main .wp-block-post-content {
	max-width: none;
	width: auto;
	margin-inline: 0;
}
.tobo-main .entry-content > *,
.tobo-main .wp-block-post-content > * {
	max-width: none;
	margin-block: 0;
}
.tobo-main .entry-content > .shell,
.tobo-main .wp-block-post-content > .shell {
	max-width: var(--shell-max);
	margin-inline: auto;
}
.tobo-main .wp-block-post-content > .stats { margin-top: 28px; }
@media (max-width: 620px) { .tobo-main .wp-block-post-content > .stats { margin-top: 12px; } }

.section { padding-block: 140px; }

/* ODSTUPANJE OD ORIGINALA (traženo): razmak izmedju stat trake i prve sekcije
   ispod nje bio je pun gornji padding sekcije, pa je delovao prazno. Prepolovljen.
   `.stats` postoji samo na naslovnoj i uvek ga prati `.section.financing-section`,
   pa ovo ne dira ritam ostalih stranica.

   Vrednost mora da se ponovi u svakom prelomu: `.stats + .section` je
   specifičniji od `.section`, pa bi jedno bazno pravilo pobedilo i mobilne
   vrednosti i ostavilo 70px na telefonu. */
.stats + .section { padding-top: 70px; }

@media (max-width: 1220px) {
	.shell { width: calc(100% - 40px); }
	.section { padding-block: 115px; }
	.stats + .section { padding-top: 58px; }
}
@media (max-width: 900px) {
	.section { padding-block: 95px; }
	.stats + .section { padding-top: 48px; }
}
@media (max-width: 620px) {
	.shell { width: calc(100% - 24px); }
	.section { padding-block: 78px; }
	.stats + .section { padding-top: 40px; }
}

/* Naslovi */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }

.section h2,
.private-party h2,
.why-section h2,
.contact h2 {
	margin: 0;
	font-size: clamp(48px, 5vw, 72px);
	font-weight: 660;
	line-height: 1.02;
	letter-spacing: -.06em;
}
/* ODSTUPANJE OD ORIGINALA (traženo): drugi red naslova je zelen na SVIM
   sekcijama. Original ga ima siv (#8B9199) na svetlim sekcijama, a zelen samo na
   dve tamne trake. Pravilo `.section` pokriva i servisne stranice — one nose
   `section service-overview` odnosno `section faq-section service-faq`.

   Uzgred popravlja i kontrast: ovo su krupni naslovi (clamp 48–72px), gde je
   prag 3:1. Siva je davala 2.99:1 na pozadini stranice — taman ispod praga;
   zelena daje 3.09:1 i prolazi. */
.section h2 span,
.why-section h2 span,
.private-party h2 span,
.contact h2 span { color: var(--green); font-weight: 520; display: block; }

.kicker {
	color: var(--green);
	letter-spacing: .18em;
	font-size: 10px;
	font-weight: 850;
	margin: 0 0 21px;
	display: block;
	/* Bez text-transform — tekst je već velikim slovima, kao u originalu. */
}

.lead {
	color: var(--muted);
	font-size: 17px;
	line-height: 1.7;
	margin: 0;
}

.section-heading {
	display: grid;
	grid-template-columns: 1fr .75fr;
	gap: 80px;
	align-items: end;
}
.section-heading > p { color: var(--muted); max-width: 560px; margin: 0 0 8px; font-size: 17px; line-height: 1.72; }
@media (max-width: 900px) {
	.section-heading { grid-template-columns: 1fr; gap: 28px; }
	.solutions-grid { margin-top: 52px; }
}
@media (max-width: 620px) { .solutions-grid { margin-top: 42px; } }

/* ---------------------------------------------------------------
   4. Topline
   --------------------------------------------------------------- */

.topline {
	background: var(--navy-bar);
	color: #fff;
	font-size: 11px;
	font-weight: 750;
	letter-spacing: .16em;
	text-transform: uppercase;
}
.topline-inner {
	display: flex;
	align-items: center;
	height: 34px;
}
/* Poruka NIJE centrirana — original je vezuje 18px iza brend natpisa, a telefon
   gura desno preko `margin-left: auto` na linku. Ranije centriranje auto
   marginama pomeralo je poruku ~480px udesno. */
.topline-message {
	margin-left: 18px;
	color: #B8BCC2;
	letter-spacing: .04em;
	text-transform: none;
	font-weight: 600;
}
.topline a { margin-left: auto; color: #fff; text-decoration: none; white-space: nowrap; }
.topline a:hover { color: var(--green); text-decoration: none; }

@media (max-width: 900px) {
	.topline-message { display: none; }
}
@media (max-width: 620px) {
	.topline { font-size: 9px; }
	.topline-inner { height: 31px; }
}

/* ---------------------------------------------------------------
   5. Header
   --------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 900;
	background: rgba(255, 255, 255, .96);
	-webkit-backdrop-filter: saturate(160%) blur(10px);
	backdrop-filter: saturate(160%) blur(10px);
	border-bottom: 1px solid rgba(40, 44, 53, .12);
}

.header-inner {
	display: flex;
	align-items: center;
	min-height: var(--header-h);
}
.header-inner > .wp-block-site-logo { margin-right: auto; }
.header-actions { margin-left: auto; }

.brand { display: inline-flex; align-items: center; min-width: max-content; }
/* Original definise logo SIRINOM, ne visinom. */
/* Selektor je vezan za .site-header. Ranije je bio globalan (`.custom-logo-link img`)
   pa se tukao sa futerskim logotipom i tražio veću specifičnost tamo. */
.site-header .brand img,
.site-header .brand-logo,
.site-header .custom-logo-link img {
	display: block;
	width: var(--logo-w);
	height: auto;
	max-width: none;
	transition: width .22s ease;
}
.tobo-scrolled .site-header .brand img,
.tobo-scrolled .site-header .brand-logo,
.tobo-scrolled .site-header .custom-logo-link img { width: var(--logo-w-stuck); }

.nav { display: flex; align-items: center; gap: 40px; padding-inline: 40px; margin-top: 0; }
/* CTA unutar menija postoji samo za mobilni panel — na desktopu je u .header-actions. */
.nav-mobile-cta { display: none; }
/* Bez padding-a: original ga ima samo na linkovima UNUTAR padajuceg panela
   (.nav-menu a). Na linkovima prvog nivoa je sirio .nav za 78px i pomerao
   stavke 26-39px u odnosu na original. Hover most preko razmaka do panela
   drzi .nav-menu::before, ne padding. */
.nav a, .nav-dropdown-toggle {
	display: block;
	color: var(--nav-link);
	font-size: 14px;
	font-weight: 650;
	text-decoration: none;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	letter-spacing: normal;
	white-space: nowrap;
}
.nav a:hover, .nav-dropdown-toggle:hover { color: var(--green); text-decoration: none; }

.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-dropdown-toggle { display: inline-flex; align-items: center; padding: 0; line-height: 1.5; white-space: normal; transition: color .18s; }
.nav-dropdown-toggle:hover,
.nav-dropdown:focus-within .nav-dropdown-toggle,
.nav-dropdown[data-current="true"] .nav-dropdown-toggle { color: var(--green); }

/* Strelica je bila znak „⌄" iz fonta — visina i debljina zavise od fonta i
   sedi krivo na osnovnoj liniji. Sada je SVG, pa se okrece kad se meni otvori. */
.nav-chevron {
	flex: none;
	margin-left: 5px;
	color: #9AA0A8;
	transition: transform .18s, color .18s;
}
.nav-dropdown-toggle:hover .nav-chevron,
.nav-dropdown:focus-within .nav-chevron,
.nav-dropdown[data-current="true"] .nav-chevron { color: var(--green); }
.nav-dropdown:hover .nav-chevron,
.nav-dropdown:focus-within .nav-chevron,
.nav-dropdown[data-open="true"] .nav-chevron { transform: rotate(180deg); }

.nav-menu {
	position: absolute;
	top: calc(100% + 21px);
	left: -18px;
	z-index: 60;
	min-width: 225px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 8px;
	box-shadow: 0 20px 45px rgba(40, 44, 53, .14);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-6px);
	transition: opacity .16s, transform .16s, visibility .16s;
}
/* Nevidljiv most iznad menija — bez njega hover pukne dok mis prelazi razmak. */
.nav-menu::before { content: ''; position: absolute; top: -22px; left: 0; right: 0; height: 24px; }
.nav-dropdown:hover .nav-menu,
.nav-dropdown:focus-within .nav-menu,
.nav-dropdown[data-open="true"] .nav-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}
.nav-menu a {
	display: block;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 650;
	letter-spacing: normal;
	padding: 12px 13px;
	border-radius: 8px;
	border-left: 3px solid transparent;
	transition: background .16s, color .16s, border-color .16s;
}
.nav-menu a:hover,
.nav-menu a:focus-visible {
	border-left-color: var(--green);
	background: var(--ice);
	color: var(--green);
}

/* Tekuca stranica: zelena linija levo + blaga podloga. `aria-current` postavlja
   `tobo_mark_current_nav()` — navigacija je staticki HTML, pa nema WP-ove
   `current-menu-item` klase. Linija se rezervise providnim `border-left` na svim
   stavkama, da se tekst ne pomeri za 3px kad se stavka aktivira. */
.nav-menu a[aria-current="page"] {
	border-left-color: var(--green);
	background: var(--ice);
	color: var(--green);
}

/* Prvi nivo je vodoravan — tamo linija sa strane nema smisla, ide samo boja. */
.nav > a[aria-current="page"] { color: var(--green); }

.header-actions { display: flex; align-items: center; gap: 25px; margin-top: 0; flex: 0 0 auto; }

.phone-link {
	display: flex;
	align-items: center;
	gap: 9px;
	color: var(--ink);
	font-size: 14px;
	font-weight: 750;
	text-decoration: none;
	white-space: nowrap;
}
.phone-link svg { color: var(--green); flex: 0 0 auto; }
.phone-link:hover { color: var(--green); text-decoration: none; }

.mobile-menu-button {
	display: none;
	align-items: center;
	background: none;
	border: 0;
	color: var(--ink);
	cursor: pointer;
	margin-left: auto;
	padding: 8px;
	line-height: 0;
}

@media (max-width: 1220px) {
	.nav { gap: 25px; }
	.phone-link span { display: none; }
}

/* Header prelazi na mobilni meni već ispod 1080px — desktop varijanta
   (logo 281 + 6 stavki + telefon + CTA) staje tek od ~1080 naviše, a u opsegu
   901–1079 je gurala sadržaj na ~1020px i pravila horizontalni skrol na CELOM
   sajtu. Ostale sekcije zadržavaju svoje prelome na 900. */
@media (max-width: 1080px) {
	:root { --header-h: 76px; }
	.mobile-menu-button { display: block; order: 3; }
	.header-actions { display: none; }
	.nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		border-bottom: 1px solid var(--line);
		box-shadow: 0 18px 28px rgba(40, 44, 53, .12);
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 12px 20px 22px;
		display: none;
	}
	.nav.is-open { display: flex; }
	.nav > a, .nav-dropdown-toggle { padding: 14px 0; font-size: 16px; }
	.nav-dropdown-toggle { width: 100%; justify-content: space-between; }
	.nav-menu {
		position: static;
		box-shadow: none;
		border: 0;
		padding: 0 0 8px 12px;
		min-width: 0;
	}
	.nav-menu a { font-size: 15px; padding: 10px 0; }
	.nav-menu a:hover { background: none; }
	.nav-mobile-cta { display: flex; gap: 12px; margin-top: 14px; }

	/* U mobilnom panelu je i prvi nivo vertikalan, pa i on dobija liniju. */
	.nav > a, .nav-menu a { border-left: 3px solid transparent; padding-left: 10px; }
	.nav > a[aria-current="page"],
	.nav-menu a[aria-current="page"] { border-left-color: var(--green); background: var(--ice); color: var(--green); }
}

/* ---------------------------------------------------------------
   6. Dugmad
   --------------------------------------------------------------- */

/* Original: fiksna visina 56px, samo horizontalni padding, centrirano. */
.button, .wp-block-button__link, .wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	background: var(--green);
	color: #fff;
	border: 0;
	border-radius: var(--radius-btn);
	padding: 0 22px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 750;
	letter-spacing: -.01em;
	line-height: 21px;
	text-decoration: none;
	cursor: pointer;
	transition: background .18s, transform .18s, box-shadow .18s;
}
.button:hover, .wp-block-button__link:hover, .wp-element-button:hover {
	background: var(--green);
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 12px 28px rgba(118, 152, 85, .26);
}

.button-small { min-height: 48px; }

.button-light {
	background: #fff;
	color: var(--navy);
	min-height: 56px;
	padding-inline: 25px;
}
.button-light:hover {
	background: #F3F4F5;
	color: var(--navy);
	box-shadow: 0 14px 35px rgba(0, 0, 0, .16);
}

.button-outline {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .38);
}
.button-outline:hover { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: none; }

.text-link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--green);
	font-size: 14px;
	font-weight: 750;
	text-decoration: none;
}
.text-link:hover { text-decoration: none; gap: 12px; }
/* Strelica je zelena i u svetloj varijanti linka — `.text-link span` u
   originalu gazi belu boju koju postavlja `.text-link-light`. */
.text-link span { color: var(--green); transition: transform .18s; }
.text-link-light { color: #fff; }

/* ---------------------------------------------------------------
   7. Hero + slajder
   --------------------------------------------------------------- */

.hero { padding-top: 28px; }

.hero-stage {
	background: var(--navy);
	border-radius: var(--radius-stage);
	height: min(680px, 100vh - 180px);
	min-height: 590px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 28px 70px rgba(40, 44, 53, .18);
}

/* Bez zoom (Ken Burns) efekta — pomeranje pozadine je otežavalo čitanje
   teksta (nalog klijenta 02.08.2026). Slajdovi se samo pretapaju. */
.hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: cover;
	transition: opacity .8s, visibility 0s linear .8s;
}
.hero-slide.active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
	transition-delay: 0s;
}

.hero-gradient {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(31,34,41,.97) 0%, rgba(36,40,48,.88) 38%, rgba(38,42,50,.42) 62%, rgba(38,42,50,.08) 100%),
		linear-gradient(rgba(0,0,0,0) 60%, rgba(37,41,49,.8) 100%);
}

.hero-copy {
	position: absolute;
	top: 50%;
	left: clamp(52px, 7vw, 106px);
	transform: translateY(-55%);
	max-width: 690px;
	color: #fff;
	z-index: 2;
}

.hero h1, .hero .hero-title {
	margin: 0;
	font-size: clamp(48px, 5vw, 76px);
	font-weight: 680;
	line-height: .99;
	letter-spacing: -.058em;
	color: #fff;
}
.hero h1 span, .hero .hero-title span { color: var(--green); font-weight: 550; }

.hero-description {
	color: #D9DDE2;
	max-width: 610px;
	margin: 28px 0 0;
	font-size: 17px;
	line-height: 1.65;
}

.eyebrow {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0 0 23px;
	color: #E5E7EB;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .18em;
	/* Bez text-transform — tekst je već velikim slovima u markupu, kao u originalu. */
}
.eyebrow > span {
	background: var(--green);
	width: 32px;
	height: 2px;
	display: inline-block;
	flex: 0 0 auto;
}

.hero-actions { display: flex; align-items: center; gap: 16px; margin-top: 34px; flex-wrap: wrap; }

/* Prozirno dugme sa belim okvirom — par belom primarnom dugmetu na slajderu. */
.button-outline-light {
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, .65);
	color: #fff;
}
.button-outline-light:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
/* U slajderu su uveravanja IZNAD dugmeta (nalog klijenta 01.08.2026),
   pa dugme ide bliže — servisni hero zadržava globalnih 34px. */
.hero-stage .hero-actions { margin-top: 24px; }

.hero-assurances {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 22px;
	margin-top: 27px;
	color: #C9CED4;
	font-size: 11px;
	font-weight: 650;
}
.hero-assurances span { display: flex; align-items: center; gap: 7px; }
.hero-assurances svg { color: var(--green); flex: 0 0 auto; }

/* Bez kruga — samo krupnija bela strelica sa senkom (nalog klijenta
   02.08.2026). Klik-površina ostaje 45px radi prsta na dodirnim ekranima. */
.slider-arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	padding: 0;
	color: #fff;
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: opacity .18s;
}
.slider-arrow svg {
	width: 36px;
	height: 36px;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .55));
}
.slider-arrow:hover { opacity: .75; }
.slider-arrow-left { left: 17px; transform: translateY(-50%) rotate(180deg); }
.slider-arrow-right { right: 17px; transform: translateY(-50%); }

.slide-tabs {
	position: absolute;
	bottom: 0;
	/* SKROZ u desni donji ugao slajda (nalog klijenta 01.08.2026; ranije levi
	   pa uvučeni desni). */
	right: 0;
	left: auto;
	z-index: 3;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	width: min(630px, 100% - 420px);
}

.slide-tab {
	position: relative;
	line-height: 1.5;
	min-height: 72px;
	padding: 0 17px;
	text-align: left;
	color: #B9BEC5;
	background: rgba(37, 41, 49, .72);
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, .18);
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	transition: background .18s, color .18s;
}
.slide-tab::before {
	content: '';
	position: absolute;
	top: -1px; left: 0; right: 0;
	height: 3px;
	background: transparent;
}
.slide-tab + .slide-tab { border-left: 1px solid rgba(255, 255, 255, .12); }
.slide-tab span {
	display: block;
	margin-bottom: 5px;
	color: #8B9199;
	font-size: 9px;
	line-height: 1.5;
	letter-spacing: .14em;
}
.slide-tab.active { color: #fff; background: rgba(32, 35, 42, .94); }
.slide-tab.active::before { background: var(--green); }

.hero-card {
	position: absolute;
	bottom: 30px;
	right: 34px;
	z-index: 3;
	width: 285px;
	padding: 20px 21px 18px;
	background: rgba(255, 255, 255, .92);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, .74);
	border-radius: var(--radius-card);
	box-shadow: 0 18px 48px rgba(33, 36, 43, .24);
}
.hero-card p {
	margin: 0 0 8px;
	color: #737982;
	font-size: 9px;
	font-weight: 850;
	letter-spacing: .16em;
}
.hero-card strong {
	display: block;
	margin-bottom: 15px;
	color: var(--navy);
	font-size: 17px;
	letter-spacing: -.025em;
}
.hero-card a {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-top: 17px;
	color: var(--green);
	font-size: 12px;
	font-weight: 800;
	text-decoration: none;
}

.asset-options { display: flex; gap: 6px; flex-wrap: wrap; }
.asset-options label { position: relative; cursor: pointer; }
.asset-options input {
	position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.asset-options span {
	display: block;
	padding: 7px 9px;
	color: #68707A;
	background: #F1F2F3;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	transition: color .15s, background .15s;
}
.asset-options input:checked + span { color: var(--green); background: #F1F2F1; }
.asset-options input:focus-visible + span { box-shadow: 0 0 0 2px var(--green); }

@media (max-width: 1220px) {
	.hero-copy { left: 72px; }
}
@media (max-width: 900px) {
	.hero h1 { font-size: clamp(46px, 8vw, 65px); }
	.hero-copy { max-width: 620px; left: 45px; right: 45px; }
	.hero-stage { height: 650px; }
	.slide-tabs { width: calc(100% - 90px); right: 0; }
	.hero-card { display: none; }
}
@media (max-width: 620px) {
	.hero { padding-top: 12px; }
	.hero h1 { font-size: 43px; line-height: 1.03; }
	.hero-description { margin-top: 22px; font-size: 15px; line-height: 1.55; }
	.hero-stage { border-radius: 18px; height: 665px; min-height: 0; }
	.hero-slide { background-position: 64%; }
	/* Svetliji overlay na telefonu (nalog klijenta 01.08.2026) — fotografija
	   se vidi, a beli tekst ostaje čitljiv preko donjeg tamnijeg pojasa. */
	.hero-gradient {
		background:
			linear-gradient(90deg, rgba(31,34,41,.72), rgba(31,34,41,.28)),
			linear-gradient(rgba(31,34,41,.18) 0%, rgba(31,34,41,.55) 34%, rgba(31,34,41,.9) 100%);
	}
	.hero-copy { top: 44%; left: 28px; right: 28px; transform: translateY(-50%); }
	.eyebrow { letter-spacing: .13em; font-size: 9px; }
	.hero-actions { flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 20px; }
	.hero-assurances { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 22px; }
	.slider-arrow { display: none; }
	.slide-tabs { width: 100%; left: 0; }
	.slide-tab { min-height: 54px; padding-inline: 14px; font-size: 0; }
	.slide-tab span { text-align: center; margin: 0; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.hero-slide { transition: opacity .01ms; transform: none; }
	.hero-slide.active { transform: none; }
}

/* ---------------------------------------------------------------
   8. Stats
   --------------------------------------------------------------- */

.stats {
	display: grid;
	min-height: 128px;
	grid-template-columns: repeat(4, 1fr);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	margin-top: 28px;
	overflow: hidden;
}
.stat {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 26px 25px;
}
.stat > div { min-width: 0; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat strong .stat-accent { display: inline; color: var(--green); font-size: inherit; font-weight: inherit; }
/* ODSTUPANJE OD ORIGINALA (traženo): svi zeleni nastavci treba da izgledaju
   jednako veliko kao „+" u „40+".
   „+" i „M+" su vec bili na istih 43px, ali „+" je mali znak a „M" veliko slovo,
   pa na istoj velicini fonta crtez nije iste visine. Poravnato je po visini
   IZNAD OSNOVNE LINIJE, izmereno canvas metrikama u Geist-u 780:
     +  na 43px -> 23px crteza
     h, d, M na 31px -> 22px crteza
   31/43 = .72em, pa se vrednost drzi i ako se .stat strong promeni na prelomu. */
.stat strong .stat-accent--sm { font-size: .72em; }
.stat strong {
	font-size: 43px;
	font-weight: 780;
	line-height: 1;
	letter-spacing: -.06em;
	color: var(--ink);
	flex: 0 0 auto;
}
/* Mora > div > span — inače pravilo hvata i .stat-accent unutar <strong>. */
.stat > div > span { display: block; font-size: 13px; font-weight: 750; color: var(--ink); }
.stat small { display: block; margin-top: 3px; font-size: 11px; font-weight: 400; line-height: 1.4; color: var(--muted); }

@media (max-width: 1220px) {
	.stats { grid-template-columns: repeat(2, 1fr); }
	.stat:nth-child(3) { border-left: 0; }
	.stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}


/* Deal kartica (private party), why kolona, kontakt forma, service hero */
.deal-visual { position: relative; }
.deal-card { transform: rotate(-1.5deg); }
.why-copy { min-width: 0; }
.contact-form { min-width: 0; }
.service-hero-copy { max-width: 900px; }
.service-hero-copy h1 {
	margin: 0;
	font-size: clamp(52px, 5.6vw, 82px);
	font-weight: 660;
	line-height: .99;
	letter-spacing: -.06em;
	color: #fff;
}
.service-hero-copy h1 span { color: var(--green); font-weight: 540; }
/* `:not(.eyebrow)` — eyebrow je takodje direktno dete <p>, pa bi mu ovo pravilo
   (specificnost 0,1,1) pregazilo boju i velicinu iz `.eyebrow` (0,1,0). */
.service-hero-copy > p:not(.eyebrow) { color: #D9DDE2; font-size: 17px; line-height: 1.75; margin: 28px 0 0; max-width: 660px; }
.footer-brand-col { min-width: 0; }

@media (max-width: 620px) {
	.service-hero-copy h1 { font-size: 43px; line-height: 1.02; }
	.deal-card { transform: none; }
}

/* ---------------------------------------------------------------
   9. Kartice usluga
   --------------------------------------------------------------- */

/* 3 kolone od 01.08.2026 — Lines of Credit stranica je ugašena, pa su na
   naslovnoj ostale tri usluge. Na ≤1220 prelazi u 2+1 raspored. */
.solutions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 72px; }

.solution-card {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 430px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	padding: 30px;
	transition: border-color .22s, box-shadow .22s, transform .22s;
}
.solution-card::after {
	content: "";
	position: absolute;
	bottom: 0; left: 0; right: 100%;
	height: 3px;
	background: var(--green);
	transition: right .25s;
}
.solution-card:hover::after { right: 0; }
.solution-top { display: flex; align-items: center; justify-content: space-between; }
.solution-card:hover,
.solution-card:focus-within {
	transform: translateY(-5px);
	box-shadow: 0 24px 55px rgba(40, 44, 53, .1);
	border-color: #CFD3D0;
}
.solution-number {
	color: #A9AFB6;
	font-size: 10px;
	font-weight: 850;
	letter-spacing: .16em;
}
.solution-icon {
	width: 51px; height: 51px;
	display: flex; align-items: center; justify-content: center;
	border-radius: var(--radius-btn);
	background: var(--ice);
	color: var(--green);
}
.solution-card h3 {
	margin: 34px 0 22px;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -.035em;
	color: var(--ink);
}
.solution-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0; }
.solution-value strong { font-size: 25px; color: var(--green); letter-spacing: -.04em; }
.solution-value span { font-size: 11px; font-weight: 750; color: #888E96; }
/* Bez `flex: 1 1 auto` — original pusta paragraf na prirodnu visinu, a link
   dole gura `margin-top: auto`. Sa flex-grow paragraf pojede visak prostora
   i link ostane odmah ispod teksta umesto na dnu kartice. */
.solution-card > p { display: block; margin: 22px 0 26px; font-size: 14px; line-height: 1.65; color: var(--muted); }
.solution-card > a {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 13px; font-weight: 800; color: var(--green); text-decoration: none;
	margin-top: auto;
}
/* Strelica je SVG u markupu (kao u originalu) — bez CSS ::after, inace su dve. */
.solution-card > a svg { transition: transform .18s; }
.solution-card:hover > a svg { transform: translateX(3px); }
.solution-card > a::before { content: ''; position: absolute; inset: 0; border-radius: var(--radius-card); }

@media (max-width: 1220px) { .solutions-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .solutions-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   10. Tamne sekcije (private party, contact)
   --------------------------------------------------------------- */

.private-party-wrap {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at 78% 34%, rgba(118, 152, 85, .19), transparent 27%),
		linear-gradient(135deg, #22262D 0%, #2B3038 100%);
}
/* Original: zeleni odsjaj je gore LEVO, upisan u samu pozadinu trake
   (radial-gradient circle at 8% 10%). Ranije je bio ::after krug dole desno. */
.contact-wrap {
	position: relative;
	/* Bez overflow:hidden — traka sa brojkama na Contact stranici viri 58px
	   iznad sekcije, preko dna heroja, i clip bi je odsekao. */
	/* Bazna boja je ista kao futer (--navy-deep) i kao dno .service-cta — sekcija
	   je svuda poslednja pre futera, pa se dve pozadine moraju nadovezati bez
	   šava. Ranije #20232A: razlika od +6/+6/+7 RGB pravila je vidljivu ivicu. */
	background:
		radial-gradient(circle at 8% 10%, rgba(118, 152, 85, .22), rgba(0, 0, 0, 0) 26%),
		var(--navy-deep);
}
.private-party-wrap :where(h2, h3, strong), .contact-wrap :where(h2, h3) { color: #fff; }

/* Dekorativna mreža preko tamne sekcije — bez nje je ravan pravougaonik. */
.private-party-wrap::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 48%, #000);
	mask-image: linear-gradient(90deg, transparent, #000 48%, #000);
	pointer-events: none;
}


.private-party, .contact { position: relative; z-index: 1; }
.private-party {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: 100px;
	align-items: center;
	min-height: 760px;
	padding-block: 100px;
	position: relative;
}
.contact {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: 100px;
	align-items: center;
	min-height: 740px;
	padding-block: 100px;
	position: relative;
	z-index: 1;
}
.private-party-wrap h2, .contact-wrap h2 { color: #fff; }

/* Svetla varijanta kontakt sekcije (Contact stranica, nalog 02.08.2026):
   bela pozadina, tamna tipografija, forma sa tamnim okvirom i senkom +
   zelenim donjim rubom — isti jezik kao kartice usluga na naslovnoj. */
/* Pozadina STRANICE, ne #fff — bela traka i bela forma inače potonu u
   istu belu i prelaz ne izgleda kao na why-tobo (nalog 02.08.2026). */
.contact-wrap.contact-wrap--light { background: var(--page); }
.contact-wrap.contact-wrap--light h2 { color: var(--navy); }
.contact-wrap.contact-wrap--light .contact-copy > p:not(.kicker) { color: var(--muted); }
.contact-wrap.contact-wrap--light .contact-assurances { color: var(--muted); }
.contact-wrap.contact-wrap--light .funding-form {
	/* Isti okvir kao .solution-card na naslovnoj (nalog 02.08.2026);
	   zeleni donji rub uklonjen po istom nalogu. */
	border: 1px solid var(--line);
	box-shadow: 0 24px 60px rgba(40, 44, 53, .14);
}
/* :not(.kicker) je obavezan — inače ovo pravilo gazi .kicker (veća specifičnost). */
.private-party-copy > p:not(.kicker) { color: #C4C9CF; max-width: 560px; margin: 30px 0 36px; font-size: 17px; line-height: 1.7; }
.contact-copy > p:not(.kicker) { color: #C3C8CE; max-width: 550px; margin: 28px 0; font-size: 17px; line-height: 1.7; }

/* Deal vizual — bela kartica koja lebdi preko tamne sekcije, blago zarotirana. */
/* min-height 510 → 585: kartica je od 01.08.2026 viša za „Illustrative
   example" red, pa je prekrivala apsolutno pozicionirani potpis na dnu. */
.deal-visual { position: relative; min-height: 585px; }

.deal-status {
	position: absolute;
	top: 0; left: 5%; right: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.deal-status > span {
	color: #8F959D;
	font-size: 9px;
	font-weight: 850;
	letter-spacing: .18em;
}
.deal-status strong { display: flex; align-items: center; gap: 8px; color: #E0E3E7; font-size: 12px; font-weight: 750; }
.deal-status i {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--green);
	box-shadow: 0 0 0 5px rgba(118, 152, 85, .12);
}

.deal-card {
	position: absolute;
	top: 48px; left: 5%; right: 10%;
	background: rgba(255, 255, 255, .98);
	border: 0;
	border-radius: 22px;
	padding: 35px;
	transform: rotate(-1.5deg);
	box-shadow: 0 32px 75px rgba(0, 0, 0, .3);
	color: var(--ink);
}
.deal-card > p {
	margin: 28px 0 9px;
	color: #878E97;
	font-size: 9px;
	font-weight: 850;
	letter-spacing: .16em;
}
.deal-card h3 { margin: 0; font-size: 30px; font-weight: 400; line-height: 1.5; letter-spacing: -.045em; color: var(--ink); }

.deal-route { display: flex; align-items: center; }
.route-point, .route-check {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 45px; height: 45px;
	border-radius: 50%;
}
.route-point { background: var(--navy); color: #fff; }
.route-check { background: #F1F2F1; color: var(--green); }
.route-line { position: relative; width: 130px; height: 2px; background: linear-gradient(90deg, var(--green), var(--green)); }
.route-line::after {
	content: '';
	position: absolute;
	top: 50%; left: 47%;
	transform: translate(-50%, -50%);
	width: 7px; height: 7px;
	border: 3px solid var(--green);
	border-radius: 50%;
	background: #fff;
}

.deal-meta {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 25px;
	margin-top: 28px;
	padding-block: 22px;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.deal-meta span { color: #888E96; font-size: 10px; }
.deal-meta strong { display: block; margin-top: 6px; color: var(--navy); font-size: 15px; font-weight: 700; }

.verification-row { display: flex; align-items: center; gap: 12px; padding-top: 22px; color: var(--green); }
.verification-row strong { display: block; margin-bottom: 3px; color: var(--navy); font-size: 12px; }
.verification-row span { color: #888E96; font-size: 10px; }

/* Oznaka „Illustrative example" u dnu kartice. Stil je ranije greškom
   stajao samo u mobilnom media bloku, pa je na desktopu ovo bio goli <p>
   sa podrazumevanim marginama — naduvao je karticu preko potpisa ispod. */
.deal-note {
	margin: 18px 0 0;
	font-size: 9px;
	font-weight: 850;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #878E97;
}

.deal-caption {
	position: absolute;
	bottom: 14px; left: 14%;
	color: #fff;
	font-size: 13px;
	font-weight: 750;
}
.deal-caption > span { color: #818893; margin-right: 11px; font-size: 9px; letter-spacing: .16em; }
.deal-caption small { display: block; margin: 7px 0 0 32px; color: #979DA5; font-size: 10px; font-weight: 500; }

.kicker-light { color: var(--green); }

/* Original: `.private-party,.contact{gap:65px}` pa `.private-party{grid-template-columns:.82fr 1.18fr}`.
   Uze kolone dobija SAMO private-party; .contact ostaje na .9fr 1.1fr do 900px. */
@media (max-width: 1220px) {
	.private-party, .contact { gap: 65px; }
	.private-party { grid-template-columns: .82fr 1.18fr; }
}
@media (max-width: 900px) {
	.private-party, .contact { grid-template-columns: 1fr; gap: 70px; padding-block: 95px; min-height: auto; }
}
@media (max-width: 620px) {
	.private-party, .contact { gap: 55px; padding-block: 78px; }
	.deal-card { padding: 26px 22px; }
}

/* ---------------------------------------------------------------
   11. Proces
   --------------------------------------------------------------- */

.process-section { display: grid; grid-template-columns: .75fr 1.25fr; align-items: start; gap: 110px; }
.process-intro > p:last-child { color: var(--muted); max-width: 400px; margin: 28px 0 0; font-size: 16px; line-height: 1.7; }

/* Original: lista redova sa gornjom linijom, ne mreža kartica. */
.process-list { display: block; border-top: 1px solid var(--line); }
.process-step {
	display: grid;
	grid-template-columns: 42px 1fr 28px;
	gap: 28px;
	align-items: start;
	padding: 34px 10px 34px 0;
	border-bottom: 1px solid var(--line);
	background: transparent;
	border-radius: 0;
}
.process-step > span {
	color: var(--green);
	font-size: 10px;
	font-weight: 850;
	letter-spacing: .14em;
	padding-top: 7px;
}
.process-step h3 { margin: 0 0 9px; font-size: 23px; font-weight: 400; line-height: 1.5; letter-spacing: -.035em; color: var(--ink); }
.process-step p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--muted); max-width: 570px; }
.process-step > svg { color: #A5ABB2; margin-top: 3px; }
.process-step { transition: padding-left .22s; }
.process-step:hover { padding-left: 12px; }



/* ---------------------------------------------------------------
   12. Why TOBO
   --------------------------------------------------------------- */

/* padding-bottom 145 → 60: iza sekcije uvek ide .section sa sopstvenih
   140px gornjeg paddinga, pa je zbir pravio ~285px praznog hoda (uočljivo
   na /why-tobo/ između liste razloga i „STRAIGHT TALK" trake). */
/* padding-top 110: sekcija stoji odmah iza trake sa brojkama (nije u
   .section wrapperu), pa su se slika i traka dodirivale bez ovoga. */
.why-section { display: grid; grid-template-columns: 1fr 1fr; gap: 130px; align-items: center; padding-top: 110px; padding-bottom: 60px; }
.why-image {
	position: relative;
	overflow: hidden;
	border-radius: 24px;
	min-height: 700px;
	background-size: cover;
	/* 78% umesto centra: kadar klizne udesno pa se pored vozača vidi i
	   kabina kamiona (nalog klijenta 02.08.2026). */
	background-position: 78% 50%;
}
/* Tanki unutrasnji okvir uvucen 13px — deo dizajna, lako se izgubi. */
.why-image::before {
	content: '';
	position: absolute;
	inset: 13px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 17px;
}
.why-badge {
	position: absolute;
	bottom: 28px; left: 28px;
	display: flex;
	align-items: center;
	gap: 17px;
	max-width: 330px;
	padding: 19px 22px;
	background: rgba(255, 255, 255, .93);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-radius: 16px;
}
.why-badge strong { font-size: 36px; color: var(--green); letter-spacing: -.06em; }
.why-badge span { color: var(--navy); font-size: 12px; font-weight: 750; line-height: 1.4; }

.why-lead { color: var(--muted); font-size: 16px; line-height: 1.7; margin: 28px 0 34px; max-width: 610px; }
/* Original: linija iznad liste, svaki red je grid 34px (broj) + 1fr (tekst),
   razmak 19px, padding-block 23px i linija ispod reda. */
/* Bez margin-top: original ga nema, razmak dolazi od `.why-lead` (margin-bottom
   34px). Sa 36px se pri sklapanju margina dobijalo 2px vise nego u originalu. */
.reason-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.reason-list article {
	display: grid;
	grid-template-columns: 34px 1fr;
	align-items: start;
	gap: 19px;
	padding-block: 23px;
	border-bottom: 1px solid var(--line);
}
.reason-list article > span {
	padding-top: 5px;
	font-size: 9px;
	font-weight: 850;
	letter-spacing: .14em;
	color: var(--green);
}
.reason-list h3 { margin: 0 0 6px; font-size: 17px; font-weight: 400; line-height: 1.5; letter-spacing: -.025em; color: var(--ink); }
.reason-list p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); }




/* ---------------------------------------------------------------
   13. Proof
   --------------------------------------------------------------- */

.proof-section { background: var(--green); color: #fff; }
.proof {
	display: grid;
	grid-template-columns: .4fr 1.5fr .4fr;
	align-items: center;
	gap: 60px;
	min-height: 330px;
	padding-block: 65px;
}
.proof-label span, .proof-label strong { display: block; }
.proof-label span { color: #CBD0D5; font-size: 9px; font-weight: 850; letter-spacing: .16em; }
.proof-label strong { margin-top: 8px; font-size: 15px; }

.proof blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: clamp(25px, 2.5vw, 38px);
	font-weight: 520;
	line-height: 1.35;
	letter-spacing: -.04em;
	color: #fff;
}

.proof-result { border-left: 1px solid rgba(255, 255, 255, .28); padding-left: 35px; }
.proof-result strong { display: block; font-size: 37px; letter-spacing: -.055em; }
.proof-result span { display: block; margin-top: 6px; color: #D2D6DB; font-size: 11px; line-height: 1.5; }

@media (max-width: 1220px) { .proof { gap: 35px; } }
@media (max-width: 900px) {
	.proof { grid-template-columns: 1fr; gap: 30px; padding-block: 70px; }
	.proof blockquote { max-width: 760px; }
	.proof-result {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, .28);
		max-width: 260px;
		padding-top: 20px;
		padding-left: 0;
	}
}
@media (max-width: 620px) { .proof blockquote { font-size: 26px; } }

/* ---------------------------------------------------------------
   14. FAQ
   --------------------------------------------------------------- */

.faq-section { display: grid; grid-template-columns: .6fr 1fr; gap: 110px; }
.faq-heading .text-link { color: var(--green); margin-top: 36px; }
.faq-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 28px 4px;
	font-size: 17px;
	font-weight: 750;
	letter-spacing: normal;
	color: var(--ink);
}
.faq-list summary::-webkit-details-marker { display: none; }
/* Original: popunjen krug 34px u boji --ice sa zelenim "+", bez okvira, i na
   otvaranju SAMO rotacija za 45 stepeni (bez promene boje). */
.faq-list summary span {
	flex: 0 0 auto;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: var(--ice);
	display: flex; align-items: center; justify-content: center;
	font-size: 20px;
	font-weight: 400;
	color: var(--green);
	transition: transform .2s;
}
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { margin: -8px 58px 27px 4px; font-size: 14px; line-height: 1.7; color: var(--muted); max-width: none; }

@media (max-width: 1220px) { .process-section, .faq-section { gap: 70px; } }
@media (max-width: 900px) { .process-section, .faq-section { grid-template-columns: 1fr; gap: 55px; } }
@media (max-width: 620px) { .process-section, .faq-section { gap: 42px; } }

/* ---------------------------------------------------------------
   15. Kontakt forma
   --------------------------------------------------------------- */

.contact-assurances {
	display: flex; flex-wrap: wrap; gap: 20px;
	color: #DCE0E4; font-size: 11px; font-weight: 700;
}
.contact-assurances span { display: flex; align-items: center; gap: 8px; }
.contact-assurances svg { color: var(--green); }

.funding-form {
	background: #fff;
	border-radius: 22px;
	min-height: 475px;
	padding: 38px 42px;
	box-shadow: 0 35px 80px rgba(0, 0, 0, .24);
	color: var(--ink);
}
.form-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--line);
}
.form-header div > span, .form-header strong { display: block; }
.form-header div > span { margin-bottom: 6px; color: var(--green); font-size: 9px; font-weight: 850; letter-spacing: .14em; }
.form-header strong { color: var(--navy); font-size: 11px; letter-spacing: .09em; }
.form-progress {
	width: 100px;
	height: 4px;
	background: #E9EBEC;
	border-radius: 999px;
	overflow: hidden;
}
.form-progress i { display: block; height: 100%; background: var(--green); transition: width .2s; }

.form-field { margin: 0 0 14px; }
.form-field:last-child { margin-bottom: 0; }
.form-step[hidden] { display: none; }
.form-option { position: relative; margin: 0; display: inline-block; }
.form-option input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.form-option input:focus-visible + span { box-shadow: 0 0 0 3px rgba(118, 152, 85, .22); }

.button-ghost {
	background: transparent;
	color: var(--muted);
	border: 1px solid var(--line);
}
.button-ghost:hover { background: var(--ice); color: var(--ink); box-shadow: none; }

.tobo-applywrap { min-width: 0; }

.funding-form fieldset { border: 0; margin: 0; padding: 28px 0 0; }
.funding-form legend { padding: 0; color: var(--navy); font-size: 23px; font-weight: 750; letter-spacing: -.035em; }
.funding-form fieldset > p { margin: 8px 0 19px; color: var(--muted); font-size: 12px; }

.funding-form label { display: block; font-size: 12px; font-weight: 750; color: var(--ink); margin-bottom: 7px; letter-spacing: .01em; }
.funding-form input[type="text"],
.funding-form input[type="email"],
.funding-form input[type="tel"],
.funding-form select,
.funding-form textarea {
	width: 100%;
	font: inherit;
	font-size: 14px;
	color: var(--ink);
	background: #FAFBFA;
	border: 1px solid var(--line);
	border-radius: var(--radius-btn);
	padding: 13px 14px;
	transition: border-color .15s, box-shadow .15s, background .15s;
}
.funding-form textarea { min-height: 104px; resize: vertical; }
.funding-form input:focus, .funding-form select:focus, .funding-form textarea:focus {
	outline: none;
	background: #fff;
	border-color: var(--green);
	box-shadow: 0 0 0 3px rgba(118, 152, 85, .16);
}
.form-row { display: grid; gap: 14px; grid-template-columns: 1fr; margin-bottom: 14px; }
@media (min-width: 640px) { .form-row--2 { grid-template-columns: 1fr 1fr; } }

.form-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.form-options label { position: relative; margin: 0; }
/* Input je vizuelno sakriven ali ostaje fokusabilan (nije display:none). */
.form-options input {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	white-space: nowrap;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
}
.form-options label > span {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 48px;
	padding-inline: 15px;
	border: 1px solid #E4E6E8;
	border-radius: 10px;
	background: #F5F6F7;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: normal;
	color: #59616B;
	cursor: pointer;
	transition: background .16s, border .16s, color .16s;
}
.form-options label i { position: relative; flex: 0 0 auto; width: 13px; height: 13px; border: 1px solid #ADB3BA; border-radius: 50%; }
.form-options input:checked + span { background: #F3F4F5; border-color: var(--green); color: var(--green); }
.form-options input:checked + span i { border-color: var(--green); }
.form-options input:checked + span i::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--green); }
.form-options input:focus-visible + span { box-shadow: 0 0 0 3px rgba(118, 152, 85, .22); }

@media (max-width: 620px) { .form-options { grid-template-columns: 1fr; } }

.form-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; line-height: 1.55; color: var(--muted); font-weight: 400; }
.form-consent input { margin-top: 2px; width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--green); }

.form-submit { width: 100%; margin-top: 24px; border: 0; cursor: pointer; }
.form-nav { display: flex; gap: 12px; align-items: center; margin-top: 24px; }
.form-nav .form-submit { margin-top: 0; }
.form-call { margin: 16px 0 0; color: #7F858E; font-size: 11px; text-align: center; }
.form-call a { color: var(--green); font-weight: 750; }
.form-error {
	background: #FDECEA; border: 1px solid #F3C0BA; color: #A93226;
	border-radius: var(--radius-btn); padding: 12px 14px; font-size: 13px; font-weight: 600; margin-bottom: 16px;
}

.tobo-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

.form-success { text-align: center; padding: 20px 0; }
.form-success > span {
	width: 54px; height: 54px; border-radius: 50%;
	background: rgba(118, 152, 85, .14); color: var(--green);
	display: grid; place-items: center; margin: 0 auto 18px; font-size: 24px;
}
.form-success h3 { margin: 0 0 10px; font-size: 28px; font-weight: 660; letter-spacing: -.04em; }


/* ---------------------------------------------------------------
   16. Footer
   --------------------------------------------------------------- */

footer.site-footer { background: #1A1D23; color: #C3C7CD; }
/* Visina futera je smanjena na zahtev: gornji deo 75/65 -> 52/42, donja traka
   22 -> 18, i uklonjen je zaseban red za potpis (spojen u donju traku). */
.footer-top {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, .7fr);
	gap: 60px;
	padding-block: 52px 42px;
}
/* Bela verzija sa providnom pozadinom — beli okvir vise nije potreban.
   Selektor mora da bude bar jednako specifican kao .custom-logo-link img,
   inace header pravilo (247px) gazi footer. */
.brand-footer .custom-logo-link img,
.brand-footer img { width: 205px; height: auto; max-width: 100%; }
.footer-top > div:first-child > p { margin: 23px 0 0; max-width: 350px; color: #8C929A; font-size: 13px; line-height: 1.6; }
.footer-column > strong {
	display: block;
	margin-bottom: 6px;
	color: #888E96;
	font-size: 9px;
	line-height: 1.5;
	font-weight: 700;
	letter-spacing: .16em;
}
.footer-column { display: flex; flex-direction: column; gap: 13px; margin-top: 0; }
.footer-column a, .footer-column span { color: #BEC3C9; font-size: 12px; line-height: 1.5; text-decoration: none; }
.footer-column a { display: block; transition: color .17s; }
.footer-column a:hover { color: #fff; text-decoration: none; }
/* Telefon je uvećan da mu širina teksta bude ista kao kod mejla ispod.
   Izmereno: na 15px telefon je 116.8px, mejl 173.2px — 22px izjednačava. */
.footer-contact a:first-of-type { color: #fff; font-size: 22px; font-weight: 750; }
.footer-contact address { font-style: normal; font-size: 12px; line-height: 1.6; color: #8C929A; margin: 0; }
.footer-contact .footer-hours { display: block; font-size: 12px; color: #8C929A; }

/* Donja traka nosi tri stavke: copyright levo, pravna napomena po SREDINI,
   potpis izradjivaca desno. Sredina se centrira sopstvenom kolonom, a ne
   `space-between`-om, da ostane na sredini i kad se bocne stavke razlikuju po
   sirini. Zaseban red za potpis vise ne postoji — spojen je ovde. */
.footer-bottom {
	margin-top: 0;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: baseline;
	gap: 24px;
	padding-block: 18px;
	border-top: 1px solid rgba(255, 255, 255, .08);
	color: #C3C7CD;
	font-size: 10px;
}
.footer-bottom a { color: #C3C7CD; text-decoration: none; }
.footer-bottom a:hover { color: var(--green); text-decoration: underline; }
.footer-legal-note { text-align: center; }
/* Ceo potpis je jedan link — i „Web design" vodi na alkom.rs, pa nosi istu
   sivu kao i ime. Ranije je „Web design" bio obican tekst u #6B717B, a samo je
   ime bilo link u #8C929A, pa su bili u dve nijanse. */
.footer-author { justify-self: end; text-align: right; line-height: 1.7; }
.footer-author a { color: #8C929A; text-decoration: none; transition: color .17s; }
.footer-author a:hover { color: var(--green); text-decoration: underline; }

/* Plutajuce dugme (60px + 24px odmak) pokriva donji desni ugao ekrana. Preko
   1668px sirine je van .shell-a, ispod toga se preklapa sa potpisom.
   Odmak ide na SAMU stavku, ne na traku — da srednja stavka ostane na sredini. */
@media (max-width: 1668px) { .footer-author { padding-right: 76px; } }

/* Tri kolone u jednom redu ne staju na uskom ekranu. Odmak sa strane tu ne
   pomaze jer je tekst centriran i ide preko cele sirine — plutajuce dugme
   (60px + 24px) bi sedelo na poslednjem redu. Zato se prostor rezervise ISPOD. */
@media (max-width: 900px) {
	.footer-bottom { grid-template-columns: 1fr; gap: 8px; text-align: center; padding-bottom: 92px; }
	.footer-author { justify-self: center; text-align: center; padding-right: 0; }
}

/* ---------------------------------------------------------------
   16b. Plutajuce dugme (Alkom call-button modul)

   Stek se nadole posvetljava: Call #769855 -> Email #92B072 -> Apply #B3CA9B.
   Natpis je BEO na sve tri (traženo). Kontrast na dve svetlije podloge je nizak
   — 2.83:1 i 1.90:1 — i zaveden je u PROJECT-MAP §7b kao prihvaćen rizik.
   Boju natpisa modul drži zakucanu na #fff, pa je ovde ne treba gaziti; ikone
   se boje kroz opcije modula (tools/configure-plugins.php).
   --------------------------------------------------------------- */

@media (max-width: 1220px) { .footer-top { grid-template-columns: 1.3fr repeat(3, .65fr); } }
@media (max-width: 900px) { .footer-top { grid-template-columns: repeat(2, 1fr); } }

/* Na telefonu je ceo futer centriran, a kolona FINANCING se sklanja (traženo).
   Iste te stranice ostaju dostupne iz mobilnog menija, iz padajuceg „Financing"
   — futer ih je samo ponavljao i produzavao stranicu. */
@media (max-width: 620px) {
	.footer-top {
		grid-template-columns: 1fr;
		gap: 34px;
		padding-block: 46px 34px;
		text-align: center;
		justify-items: center;
	}
	.footer-top > div:first-child > p { margin-inline: auto; }
	.brand-footer { display: flex; justify-content: center; }

	.footer-column { align-items: center; }
	.footer-column:nth-child(2) { display: none; }

	.footer-contact address { text-align: center; }
}

/* ---------------------------------------------------------------
   17. Servisne stranice
   --------------------------------------------------------------- */

/* 17a. Stari hero servisne stranice — navy traka bez fotografije.
   Ostaje na How It Works, Why TOBO, Apply, Contact i Thank You.
   Sva pravila su namerno vezana za `.service-hero-wrap`: stranice proizvoda
   koriste `section.service-hero` BEZ omotača (17b), pa bi ih nevezana
   `.service-hero` pravila (max-width 900px, padding) srušila. */
.service-hero-wrap { background: var(--navy); color: #fff; }
.service-hero-wrap .service-hero { padding-block: 110px 100px; max-width: 900px; }
.service-hero-wrap .service-hero h1 {
	margin: 0;
	font-size: clamp(52px, 5.6vw, 82px);
	font-weight: 660;
	line-height: .99;
	letter-spacing: -.06em;
	color: #fff;
}
.service-hero-wrap .service-hero h1 span { color: var(--green); font-weight: 540; }
.service-hero-wrap .service-hero p:not(.eyebrow) { color: #C3C7CD; font-size: 17px; line-height: 1.75; margin: 28px 0 0; max-width: 660px; }
.service-hero-wrap .service-hero .hero-actions { margin-top: 36px; }

.service-metrics {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	box-shadow: 0 24px 60px rgba(40, 44, 53, .12);
	margin-top: -46px;
	position: relative;
	z-index: 2;
	overflow: hidden;
}
.service-metrics > div { padding: 28px 30px; }
.service-metrics > div + div { border-left: 1px solid var(--line); }
.service-metrics strong { display: block; font-size: 40px; font-weight: 780; line-height: 1; letter-spacing: -.06em; }
.service-metrics span { display: block; margin-top: 8px; font-size: 13px; color: var(--muted); }

.service-fit {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	padding: 33px 35px;
	box-shadow: 0 22px 50px rgba(40, 44, 53, .08);
}
.service-fit > span {
	display: block; color: var(--green);
	font-size: 9px; font-weight: 850; letter-spacing: .17em; text-transform: uppercase;
}
.service-fit ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 0; }
.service-fit li {
	display: flex; align-items: center; gap: 12px;
	padding-block: 17px;
	border-top: 1px solid var(--line);
	font-size: 13px; font-weight: 680; color: var(--navy);
}
.service-fit li svg { flex: 0 0 auto; color: var(--green); }
/* PRELAZNO: dok produkcijska baza nosi stari, zapečaćeni markup (docs/workflow.md
   §6), stavke liste tamo nemaju SVG kvačicu nego su se oslanjale na `::before`.
   Ovaj fallback drži staru verziju čitljivom dok se `post_content` ne prenese.
   Briše se zajedno sa poslednjom stranicom na starom markupu. */
.service-fit li:not(:has(svg))::before { content: '✓'; color: var(--green); font-weight: 800; }

.service-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.service-benefits article {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); padding: 28px 26px;
}
.service-benefits h3 { margin: 0 0 8px; font-size: 23px; font-weight: 650; letter-spacing: -.035em; }
.service-benefits p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--muted); }

@media (max-width: 900px) {
	.service-hero-wrap .service-hero { padding-block: 80px 80px; }
	.service-metrics { grid-template-columns: 1fr; margin-top: -30px; }
	.service-metrics > div + div { border-left: 0; border-top: 1px solid var(--line); }
	.service-benefits { grid-template-columns: 1fr; }
}
@media (max-width: 620px) { .service-benefits { gap: 12px; } }

/* ---------------------------------------------------------------
   17b. Stranice finansijskih proizvoda

   Port sa tobo-capital-green /equipment-finance, /invoice-factoring i
   /working-capital. Markup pravi `tobo_sp_*()` iz `inc/content.php`.

   Razgraničenje od 17a: nove sekcije nose `shell` NA sebi
   (`section.service-metrics.shell`, `section.service-benefits.shell`),
   dok stare imaju `shell` na roditelju. Zato su selektori pisani
   sa `.shell` — inače bi ista pravila pogodila i stare stranice.
   --------------------------------------------------------------- */

section.service-hero {
	position: relative;
	overflow: hidden;
	min-height: 660px;
	background: var(--navy);
	color: #fff;
	max-width: none;
	padding: 0;
}
.service-hero-media {
	position: absolute; inset: 0;
	/* Vertikalu može da pomeri stranica kroz --sp-pos-y (inline uz sliku) —
	   npr. Contact je podiže da se lice na fotografiji ne seče pri vrhu. */
	background-position: 50% var(--sp-pos-y, 50%);
	background-repeat: no-repeat;
	background-size: cover;
}
.service-hero-overlay {
	position: absolute; inset: 0;
	background:
		linear-gradient(90deg, rgba(31, 34, 41, .98) 0%, rgba(34, 38, 45, .91) 39%, rgba(36, 40, 48, .48) 67%, rgba(36, 40, 48, .10) 100%),
		linear-gradient(rgba(0, 0, 0, 0) 55%, rgba(32, 35, 42, .78));
}
.service-hero-inner { position: relative; min-height: 660px; }

/* Mrvice u desnom gornjem uglu heroja (nalog klijenta 02.08.2026; ranije
   levo iznad naslova — gurale su sadržaj naniže od centra). */
.service-breadcrumb {
	position: absolute; top: 32px; right: 0; left: auto;
	display: flex; align-items: center; gap: 9px;
	color: #B9BEC5;
	font-size: 10px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
}
.service-breadcrumb a { transition: color .16s; }
.service-breadcrumb a:hover, .service-breadcrumb strong { color: #fff; }

.service-hero-inner .service-hero-copy {
	position: absolute; top: 50%; left: 0;
	/* -46% → -50%: pravi vertikalni centar heroja (mrvice više nisu iznad). */
	transform: translateY(-50%);
	max-width: 790px;
	color: #fff;
}
.service-hero-inner .service-hero-copy > p:not(.eyebrow) {
	margin: 29px 0 0; max-width: 650px;
	color: #D9DDE2; font-size: 17px; line-height: 1.68;
}
.service-hero-actions { display: flex; align-items: center; gap: 27px; margin-top: 36px; }

.service-metrics.shell {
	position: relative; z-index: 5;
	grid-template-columns: repeat(3, 1fr);
	min-height: 145px;
	margin-top: -58px;
}

/* Contact: traka je PRVO dete sekcije, pa bi joj se margin-top -58px
   SLIO sa marginom sekcije (margin collapse) i podigao SVETLU pozadinu
   preko dna heroja — iza trake se onda vidi svetlo umesto tamnog, pa
   prelaz ne izgleda kao na why-tobo gde je traka samostalan blok.
   Transform diže traku ISTIH 58px vizuelno, a pozadinu ne pomera;
   margin-bottom vraća layout prostor koji translate ostavlja za sobom. */
.contact-wrap .service-metrics.shell {
	margin-top: 0;
	transform: translateY(-58px);
	margin-bottom: -58px;
}

/* Kad ODMAH iza trake sa brojkama ide TAMNA process sekcija, tamna se
   podiže do dna heroja pa se dve tamne pozadine sastaju iza kartice —
   inače pored donjeg dela kartice viri beo pojas visine 87px (145
   kartice − 58 koliko viri u hero). Svetla (--light) varijanta se ne
   diže: njoj je pozadina ista kao stranici, pa pojasa nema. */
@media (min-width: 901px) {
	.service-metrics.shell + .service-process-wrap:not(.service-process-wrap--light) { margin-top: -87px; }
}
.service-metrics.shell article { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 28px; }
.service-metrics.shell article + article { border-left: 1px solid var(--line); }
.service-metrics.shell strong {
	display: block; white-space: nowrap;
	color: var(--navy);
	font-size: 40px; font-weight: 780; line-height: 1; letter-spacing: -.06em;
}
.service-metrics.shell strong .metric-accent { display: inline; color: var(--green); font-size: inherit; font-weight: inherit; }
/* Brojka kao link (telefon/mejl na Contact stranici) — nasleđuje boju i rez,
   zeleni hover da se vidi da je klikabilna. */
.service-metrics.shell strong a { color: inherit; text-decoration: none; transition: color .16s; }
.service-metrics.shell strong a:hover { color: var(--green); }
/* Mejl kartica na Contact stranici: cela adresa u jednom komadu i jednom rezu —
   40px ne staje u kolonu, pa ide manji stepen (klasa pobedjuje i prelom na 34px).
   Kartica je kolona: adresa gore, opis ispod — u redu sa ostalima opis nema
   mesta pa se lomio na tri reda i gurao trake. */
.service-metrics.shell .metric-email { flex-direction: column; align-items: center; justify-content: center; gap: 7px; text-align: center; }
.service-metrics.shell .metric-email strong { font-size: 23px; letter-spacing: -.035em; }
/* Telefon i grad na Contact traci ~35% krupniji od mejla (nalog klijenta). */
.service-metrics.shell .metric-big strong { font-size: 31px; }
.service-metrics.shell span { display: block; margin-top: 0; color: var(--ink); font-size: 13px; font-weight: 760; }
.service-metrics.shell small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.45; }

/* `:not(.section)` / `:not(.faq-section)` na geometriji: stari, zapečaćeni markup
   u produkcijskoj bazi nosi `section service-overview shell` odnosno
   `section faq-section service-faq shell`. Bez ovog izuzetka bi mu nova mreža
   od dve kolone razbila slog čim CSS stigne na server — a `post_content` se
   prenosi zasebno (docs/workflow.md §6). Skinuti kad sve četiri stranice budu
   na novom markupu. */
.service-overview:not(.section) {
	display: grid; grid-template-columns: 1.15fr .85fr; align-items: start; gap: 115px;
	padding-block: 145px 80px;
}
.service-overview h2, .service-process h2, .service-faq h2, .service-cta h2 {
	margin: 0;
	color: var(--navy);
	font-size: clamp(48px, 5vw, 72px); font-weight: 660; line-height: 1.02; letter-spacing: -.06em;
}
/* ODSTUPANJE OD ORIGINALA (traženo, isto kao u tački 3): drugi red naslova je
   zelen i na svetlim trakama. Original ima #8B9199 na `.service-overview` i
   `.service-faq`. Bez `display:block` — markup ima `<br>` ispred, pa bi blok
   span dodao još jedan prazan red. */
.service-overview h2 span, .service-faq h2 span,
.service-process h2 span, .service-cta h2 span { color: var(--green); font-weight: 520; }
.service-process h2, .service-cta h2 { color: #fff; }
.service-lead { margin: 30px 0 0; max-width: 710px; color: var(--muted); font-size: 17px; line-height: 1.75; }

.service-benefits.shell { grid-template-columns: repeat(3, 1fr); gap: 16px; padding-bottom: 140px; }
.service-benefits.shell article { position: relative; min-height: 280px; padding: 31px; }
.service-benefits.shell article::after {
	content: ''; position: absolute; left: 31px; bottom: 0;
	width: 46px; height: 3px; background: var(--green);
}
.service-benefits.shell article > span { display: block; color: var(--green); font-size: 9px; font-weight: 850; letter-spacing: .16em; }
.service-benefits.shell h3 { margin: 49px 0 16px; color: var(--navy); font-size: 23px; letter-spacing: -.035em; }
.service-benefits.shell p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }

.service-process-wrap {
	background:
		radial-gradient(circle at 84% 26%, rgba(118, 152, 85, .20), rgba(0, 0, 0, 0) 25%),
		linear-gradient(135deg, #22262D, #2B3038);
}
.service-process {
	display: grid; grid-template-columns: .85fr 1.15fr; align-items: start; gap: 115px;
	padding-block: 125px;
}
.service-process-heading > p:last-child { margin: 28px 0 0; max-width: 460px; color: #C4C9CF; font-size: 16px; line-height: 1.7; }

/* Svetla varijanta procesa (how-it-works): bez tamne pozadine, tamna
   tipografija — stranica smenjuje tamno/svetlo obrnuto od servisnih. */
.service-process-wrap--light { background: none; }
.service-process-wrap--light .service-process h2 { color: var(--navy); }
.service-process-wrap--light .service-process-heading > p:last-child { color: var(--muted); }
.service-process-wrap--light .service-process-list { border-top-color: var(--line); }
.service-process-wrap--light .service-process-list article { border-bottom-color: var(--line); }
.service-process-wrap--light .service-process-list h3 { color: var(--navy); }
.service-process-wrap--light .service-process-list p { color: var(--muted); }

/* Tamna varijanta .section trake (how-it-works „What to bring"): pozadina
   preko pune širine ekrana, stroke kartice sa belim tekstom, naslov
   odvojen od kartica (nalog klijenta 02.08.2026). */
.section-dark-wrap {
	background:
		radial-gradient(circle at 84% 20%, rgba(118, 152, 85, .18), rgba(0, 0, 0, 0) 26%),
		linear-gradient(135deg, #22262D, #2B3038);
}
.section-dark-wrap h2 { color: #fff; }
.section-dark-wrap .section-heading > p { color: #C4C9CF; }
.section-dark-wrap .service-benefits { margin-top: 56px; }
.section-dark-wrap .service-benefits article {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .24);
}
.section-dark-wrap .service-benefits h3 { color: #fff; }
.section-dark-wrap .service-benefits p { color: #C4C9CF; }
.service-process-list { display: block; border-top: 1px solid rgba(255, 255, 255, .14); }
.service-process-list article {
	display: grid; grid-template-columns: 42px 1fr; gap: 25px;
	padding-block: 31px;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.service-process-list article > span { padding-top: 6px; color: var(--green); font-size: 10px; font-weight: 850; letter-spacing: .15em; }
.service-process-list h3 { margin: 0 0 8px; color: #fff; font-size: 21px; font-weight: 650; letter-spacing: -.03em; }
.service-process-list p { margin: 0; color: #C4C9CF; font-size: 13px; line-height: 1.65; }

.service-faq:not(.faq-section) { display: grid; grid-template-columns: .78fr 1.22fr; gap: 110px; padding-block: 140px; }

.service-cta {
	background:
		radial-gradient(circle at 15% 15%, rgba(118, 152, 85, .25), rgba(0, 0, 0, 0) 25%),
		var(--navy-deep);
	color: #fff;
}
.service-cta > div {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	min-height: 560px;
	text-align: center;
}
.service-cta > div > p:not(.kicker) { margin: 27px 0 31px; color: #C4C9CF; font-size: 16px; line-height: 1.7; }
.service-cta > div > div { display: flex; align-items: center; gap: 28px; }

@media (max-width: 1220px) {
	.service-hero-inner .service-hero-copy { max-width: 700px; }
	.service-metrics.shell article { gap: 15px; padding-inline: 20px; }
	.service-metrics.shell strong { font-size: 34px; }
	.service-overview:not(.section), .service-process, .service-faq:not(.faq-section) { gap: 70px; }
}
@media (max-width: 900px) {
	section.service-hero, .service-hero-inner { min-height: 620px; }
	.service-hero-inner .service-hero-copy { max-width: 680px; }
	.service-metrics.shell { grid-template-columns: 1fr; margin-top: 24px; }
	.service-metrics.shell article { justify-content: flex-start; padding-inline: 30px; }
	.service-metrics.shell article + article { border-left: 0; border-top: 1px solid var(--line); }
	.service-overview:not(.section), .service-process, .service-faq:not(.faq-section) { grid-template-columns: 1fr; gap: 55px; }
	.service-overview:not(.section) { padding-block: 105px 65px; }
	.service-fit { max-width: 680px; }
	.service-benefits.shell { grid-template-columns: 1fr; padding-bottom: 105px; }
	.service-benefits.shell article { min-height: 235px; }
	.service-process, .service-faq:not(.faq-section) { padding-block: 100px; }
}
@media (max-width: 620px) {
	section.service-hero, .service-hero-inner { min-height: 680px; }
	.service-hero-media { background-position: 62% var(--sp-pos-y, 50%); }
	.service-hero-overlay {
		background:
			linear-gradient(90deg, rgba(31, 34, 41, .90), rgba(31, 34, 41, .50)),
			linear-gradient(rgba(31, 34, 41, .42), rgba(31, 34, 41, .97));
	}
	.service-breadcrumb { top: 22px; gap: 6px; font-size: 8px; }
	.service-hero-inner .service-hero-copy { top: 48%; transform: translateY(-50%); }
	.service-hero-inner .service-hero-copy h1 { font-size: 43px; line-height: 1.02; }
	.service-hero-inner .service-hero-copy > p:not(.eyebrow) { margin-top: 23px; font-size: 15px; line-height: 1.55; }
	.service-hero-actions { flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 27px; }
	.service-metrics.shell article { padding: 25px 23px; }
	.service-metrics.shell .metric-email strong { font-size: 19px; }
	.service-overview:not(.section), .service-process, .service-faq:not(.faq-section) { gap: 44px; }
	.service-overview:not(.section) { padding-block: 80px 50px; }
	.service-lead { font-size: 15px; }
	.service-fit { padding: 27px 23px; }
	.service-benefits.shell { gap: 12px; padding-bottom: 80px; }
	.service-benefits.shell article { min-height: 250px; padding: 26px 23px; }
	.service-process, .service-faq:not(.faq-section) { padding-block: 80px; }
	.service-process-list article { grid-template-columns: 30px 1fr; gap: 14px; }
	.service-cta > div { min-height: 520px; }
	.service-cta > div > div { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* ---------------------------------------------------------------
   18. Blog i pravne stranice
   --------------------------------------------------------------- */

.page-head { background: var(--navy); color: #fff; padding-block: 90px 80px; }
.page-head .wp-block-post-title, .page-head__title { color: #fff; }
.page-head__sub { color: #C3C7CD; font-size: 17px; margin: 20px 0 0; max-width: var(--wp--style--global--content-size, 1500px); }
.page-head h1 { margin: 0; font-size: clamp(44px, 4.6vw, 66px); font-weight: 660; line-height: 1.02; letter-spacing: -.055em; color: #fff; }
.page-head p { color: #C3C7CD; font-size: 17px; margin: 20px 0 0; max-width: var(--wp--style--global--content-size, 1500px); }
/* Bez max-width na kutiji: constrained layout centrira uže kutije (margin auto
   sa !important), pa je podnaslov ispadao iz leve ivice naslova. */

.prose { max-width: 760px; }
.prose h2 { font-size: clamp(28px, 3vw, 38px) !important; margin-top: 48px; }
.prose h3 { font-size: 22px; margin-top: 32px; }
.prose p, .prose li { font-size: 15px; line-height: 1.8; color: var(--muted); }
.prose strong { color: var(--ink); }
.prose ul { padding-left: 20px; }

.tobo-review {
	display: inline-block;
	background: #FFF4CE;
	border: 1px solid #F0D98B;
	border-radius: 4px;
	padding: .05rem .4rem;
	font-size: 11px;
	font-style: normal;
	font-weight: 700;
	color: #8A6100;
	white-space: nowrap;
}

/* Krunica „← All insights" na single postu. */
.page-head__crumb { margin: 0 0 22px; }
.page-head__crumb a {
	color: #B9BEC5; font-size: 11px; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase;
	transition: color .16s;
}
.page-head__crumb a:hover { color: #fff; }

/* Niža header traka bloga (nalog klijenta 02.08.2026). */
.page-head--compact { position: relative; padding-block: 52px 46px; }

/* Mrvice u GORNJEM DESNOM uglu trake — kao .service-breadcrumb na
   herojima. Absolute, pa right prati ivicu shell sadržaja (širina 1500).
   Selektor sa .page-head je obavezan: `.page-head p` inače pregazi
   font-size (17px). */
.page-head p.page-head__crumb--corner {
	position: absolute;
	top: 32px;
	right: max(20px, calc((100% - 1500px) / 2));
	display: flex; align-items: center; gap: 9px;
	margin: 0;
	color: #B9BEC5; font-size: 10px; font-weight: 650;
	letter-spacing: .08em; text-transform: uppercase;
}
/* Izmereno prema .service-breadcrumb na herojima (02.08.2026): link je
   zelen/650, aktivna stavka bela/900 — vizuelno identično na svim
   stranicama. */
.page-head p.page-head__crumb--corner a {
	font-size: 10px; letter-spacing: .08em;
	color: var(--green); font-weight: 650;
}
.page-head p.page-head__crumb--corner a:hover { color: #fff; }
.page-head p.page-head__crumb--corner strong { color: #fff; font-size: 10px; font-weight: 900; }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; }
.post-grid > li {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card);
	overflow: hidden; padding: 0 0 22px;
	transition: transform .18s, box-shadow .18s;
}
.post-grid > li:hover { transform: translateY(-3px); box-shadow: 0 22px 50px rgba(40, 44, 53, .10); }
.post-grid > li > :not(.wp-block-post-featured-image) { padding-inline: 24px; }

/* Slika kartice: blagi zum na hover, bez rasipanja preko radijusa. */
.tobo-postcard__image { overflow: hidden; }
.tobo-postcard__image img { transition: transform .35s; }
.post-grid > li:hover .tobo-postcard__image img { transform: scale(1.04); }

/* Naslov, datum i excerpt unutar kartice. */
.post-grid .wp-block-post-title { margin: 18px 0 0; font-size: 21px; font-weight: 650; letter-spacing: -.03em; line-height: 1.25; }
.post-grid .wp-block-post-title a { color: var(--navy); transition: color .16s; }
.post-grid .wp-block-post-title a:hover { color: var(--green); }
.post-grid .wp-block-post-date { margin: 10px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.post-grid .wp-block-post-excerpt { margin: 10px 0 0; }
.post-grid .wp-block-post-excerpt p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--muted); }
.post-grid .wp-block-post-excerpt .wp-block-post-excerpt__more-text { margin-top: 12px; }
.post-grid .wp-block-post-excerpt__more-link { color: var(--green); font-size: 13px; font-weight: 750; }

/* Paginacija arhive — ranije potpuno nestilizovana. */
.wp-block-query-pagination { margin-top: 52px; align-items: center; }
.wp-block-query-pagination a,
.wp-block-query-pagination .wp-block-query-pagination-numbers .current {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; min-height: 40px; padding: 0 13px;
	border: 1px solid var(--line); border-radius: 10px;
	background: #fff; color: var(--ink);
	font-size: 13px; font-weight: 700;
	transition: border-color .16s, color .16s;
}
.wp-block-query-pagination a:hover { border-color: var(--green); color: var(--green); }
.wp-block-query-pagination .wp-block-query-pagination-numbers .current { background: var(--green); border-color: var(--green); color: #fff; }
.wp-block-query-pagination-numbers { display: inline-flex; gap: 8px; }

/* Featured slika na single postu. */
.single-article .wp-block-post-featured-image { margin-bottom: 42px; }
.single-article .wp-block-post-featured-image img { border-radius: var(--radius-card); }

/* Blog dorade 01.08.2026 (nalog klijenta):
   - arhiva: manji gornji razmak + „Read more" dugme na karticama
   - članak: niži header sa manjim naslovom, kompaktnija sekcija teksta.
   `.section.blog-archive` je specifičnije od media `.section` pravila, pa
   jedna vrednost važi na svim prelomima. */
.section.blog-archive { padding-top: 64px; }
.section.single-article { padding-top: 60px; }

/* Kartica je flex kolona da „Read more" legne na isto dno u sve tri kartice
   bez obzira na dužinu teksta. */
.post-grid > li { display: flex; flex-direction: column; align-items: flex-start; }
.post-grid > li > .wp-block-post-featured-image { align-self: stretch; }

.post-grid .wp-block-post-excerpt { margin-bottom: 18px; }

/* „Read more" kao tekst-link sa strelicom — isti izgled kao „Explore
   financing →" na karticama usluga (nalog klijenta 02.08.2026; ranije
   uokvireno dugme). */
.post-grid .wp-block-read-more {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: auto;
	color: var(--green);
	font-size: 14px;
	font-weight: 750;
	text-decoration: none;
}
.post-grid .wp-block-read-more::after {
	content: "\2192";
	transition: transform .18s;
}
.post-grid .wp-block-read-more:hover::after { transform: translateX(3px); }

.page-head--article { padding-block: 54px 46px; }
.page-head--article h1 { font-size: clamp(30px, 3vw, 44px); line-height: 1.12; letter-spacing: -.04em; }
.page-head--article .page-head__crumb { margin-bottom: 14px; }

/* Članak: header tekst, fotografija i telo dele ISTU kolonu od 760px
   (kao referentni Bamiron blog) — bez ovoga je post_content (sirovi HTML,
   van WP layout sistema) išao punom širinom shell-a, slika bila uža od
   teksta, a naslov visio necentrirano u odnosu na sadržaj. */
.page-head--article .page-head__crumb,
.page-head--article .page-head__title { max-width: 760px; margin-inline: auto; }
.single-article .wp-block-post-featured-image,
.single-article .wp-block-post-content { max-width: 760px; margin-inline: auto; }

@media (max-width: 1220px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .post-grid { grid-template-columns: 1fr; } }


@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------
   19. Responsive paritet sa originalom
   
   Doslovno preneta pravila iz originalnog CSS-a za tri preloma.
   Stoje na kraju fajla namerno — gaze ranije definisane vrednosti
   koje su bile procenjene, a ne izmerene.
   --------------------------------------------------------------- */

@media (max-width: 1220px) {
	.nav { gap: 25px; padding-inline: 22px; }
	:root { --logo-w: 281px; --logo-w-stuck: 216px; }
	.why-section { gap: 65px; }
	.solution-card { min-height: 390px; }
}

@media (max-width: 900px) {
	.funding-form { width: 100%; max-width: 680px; }
	.contact-copy { max-width: 680px; }
	.process-intro > p:last-child { max-width: 580px; }
	.mobile-menu-button { display: flex; }
	.header-actions { display: none; }

	.nav {
		position: absolute;
		top: 76px; left: 0; right: 0;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin: 0;
		padding: 14px 22px 22px;
		background: #fff;
		border-bottom: 1px solid var(--line);
		box-shadow: 0 18px 28px rgba(40, 44, 53, .12);
	}
	.nav.is-open { display: flex; }
	.nav a { padding: 17px 3px; font-size: 15px; border-bottom: 1px solid #EFF1F2; }

	.nav-dropdown { display: block; align-items: stretch; }
	.nav-dropdown-toggle {
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 17px 3px;
		font-size: 15px;
		border-bottom: 1px solid #EFF1F2;
	}
	.nav-menu {
		position: static;
		min-width: 0;
		padding: 3px 0 8px 18px;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
	}
	.nav-menu::before { display: none; }
	.nav-menu a { padding: 12px 3px; font-size: 14px; }

	.section-heading > p { max-width: 650px; }
	.solutions-grid { margin-top: 52px; }
	.why-section { grid-template-columns: 1fr; gap: 65px; padding-top: 80px; padding-bottom: 95px; }
	.why-image { min-height: 600px; }
	.deal-visual { width: 100%; max-width: 680px; min-height: 600px; margin-inline: auto; }
	.private-party-copy { max-width: 680px; }
}

@media (max-width: 620px) {
	:root { --logo-w: 254px; --logo-w-stuck: 195px; }
	.stats { grid-template-columns: 1fr; margin-top: 12px; }
	.stat { justify-content: flex-start; padding-inline: 28px; }
	.stat + .stat, .stat:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }

	.section h2, .private-party h2, .why-section h2, .contact h2,
	.service-overview h2, .service-process h2, .service-faq h2, .service-cta h2 { font-size: 43px; }

	.section-heading { gap: 22px; }
	.section-heading > p,
	.private-party-copy > p:not(.kicker),
	.contact-copy > p:not(.kicker) { font-size: 15px; }

	.solutions-grid { grid-template-columns: 1fr; margin-top: 42px; }
	.solution-card { min-height: 365px; padding: 25px; }

	.deal-visual { min-height: 560px; }
	.deal-status { left: 0; }
	.deal-card { padding: 26px 23px; left: 0; right: 0; transform: none; }
	.deal-card h3 { font-size: 25px; }
	.deal-meta { gap: 15px; }

	.process-step { grid-template-columns: 28px 1fr; gap: 15px; padding-block: 27px; }
	.process-step > svg { display: none; }

	.faq-list summary { gap: 18px; padding-block: 23px; font-size: 15px; }
	.faq-list summary span { flex: none; }
	.faq-list details p { margin-right: 20px; }

	.why-section { gap: 50px; padding-top: 60px; padding-bottom: 78px; }
	.why-image { min-height: 500px; }
	.funding-form { min-height: 0; padding: 30px 23px; }
	.why-badge { max-width: calc(100% - 40px); bottom: 20px; left: 20px; }
	.deal-caption { left: 6px; }
	.footer-bottom { flex-direction: column; gap: 8px; line-height: 1.5; }
}