@charset "UTF-8";
/* ==========================================================================
   ЕЛЕКТРО ТР - Дизајн систем
   Единствен stylesheet. Без build процес, без фрејмворци.
   Тема: светла (заклучена). Темните површини се само hero-акцент, CTA лента и футер.
   Акцент: една сина скала изведена од #0482CE. Црвената е дозволен исклучок
   само за итни интервенции (24/7 лента).
   ========================================================================== */

/* ==========================================================================
   1. ФОНТОВИ (self-hosted, целосна македонска кирилица)
   ========================================================================== */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/montserrat-400-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/montserrat-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/montserrat-600-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/montserrat-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/montserrat-700-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/montserrat-700-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Метрички усогласен fallback: спречува скок на текстот при вчитување (CLS = 0) */
@font-face {
	font-family: 'Montserrat Fallback';
	src: local('Arial');
	size-adjust: 112.5%;
	ascent-override: 85.79%;
	descent-override: 22.25%;
	line-gap-override: 0%;
}

/* ==========================================================================
   2. ТОКЕНИ
   ========================================================================== */
:root {
	color-scheme: light;

	/* --- Сина скала (изведена од историското #0482CE) --- */
	--blue-050: #EAF5FC;
	--blue-100: #D2EAF8;
	--blue-200: #B0D9F1;
	--blue-300: #63B5E4;
	--blue-500: #0482CE;   /* брендот. Бела 700 ознака ≥18px = AA-large */
	--blue-600: #036CAB;   /* линкови на бело (5.6:1), hover на копче */
	--blue-700: #065687;   /* притисната состојба */
	--blue-800: #0C3A57;   /* CTA лента */
	--blue-900: #0A2537;   /* футер */

	/* --- Итно црвено (дозволен исклучок од заклучениот акцент) --- */
	--red-050: #FBEDEA;
	--red-200: #F3C9C2;
	--red-600: #C0362C;
	--red-700: #A02A22;

	/* --- Неутрални (една ладна оска) --- */
	--ink-900: #142430;
	--ink-700: #3A4A57;
	--ink-500: #5A6E7F;
	--line: #DCE5EC;
	--line-strong: #C3D1DC;
	--surface: #FFFFFF;
	--surface-2: #F4F8FB;

	/* --- Семантички алијаси --- */
	--bg: var(--surface);
	--text: var(--ink-700);
	--heading: var(--ink-900);
	--link: var(--blue-600);
	--cta-bg: var(--blue-500);
	--cta-bg-hover: var(--blue-600);
	--cta-text: #FFFFFF;
	--band-bg: var(--blue-800);
	--band-text: #E9F3FA;
	--footer-bg: var(--blue-900);
	--footer-text: #DCEAF5;
	--footer-muted: #A9C4D6;

	/* --- Форми: pill за интерактивно, 14px за површини, 10px за полиња --- */
	--r-field: 10px;
	--r-card: 14px;
	--r-pill: 999px;

	/* --- Сенки, тонирани во мастилно сино --- */
	--shadow-1: 0 1px 2px rgba(12, 42, 60, .05), 0 4px 12px rgba(12, 42, 60, .06);
	--shadow-2: 0 2px 6px rgba(12, 42, 60, .08), 0 10px 28px rgba(12, 42, 60, .10);
	--shadow-cta: 0 6px 18px rgba(4, 130, 206, .28);

	/* --- Простор --- */
	--sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
	--sp-5: 1.5rem; --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem;  --sp-9: 6rem;
	--section-pad: clamp(3.5rem, 2.25rem + 4vw, 6.5rem);
	--section-pad-sm: clamp(2.25rem, 1.75rem + 2vw, 3.5rem);
	--gutter: clamp(1rem, .55rem + 1.9vw, 2rem);

	/* --- Контејнери во rem: растат кога расте root font-size на TV --- */
	--container: 72rem;
	--container-wide: 84rem;
	--container-text: 46rem;

	/* --- Хром --- */
	--header-h: 4.25rem;
	--callbar-h: 3.5rem;
	--focus-ring: 3px solid var(--blue-600);

	/* --- Z скала (документирана; ништо друго не добива z-index) --- */
	--z-header: 100;
	--z-callbar: 110;
	--z-dialog: 200;

	/* --- Движење --- */
	--ease: cubic-bezier(.16, 1, .3, 1);
	--t-fast: 180ms;
	--t-med: 320ms;
}

/* Скалирање за големи екрани: сè е во rem, па целиот систем се зголемува заедно */
html { font-size: 100%; }
@media (min-width: 2200px) {
	html { font-size: 112.5%; }                 /* ~18px root на 2560 */
	:root { --container: 76rem; --container-wide: 90rem; --container-text: 48rem; }
}
@media (min-width: 3200px) {
	html { font-size: 137.5%; }                 /* ~22px root на 3840 */
	:root { --container: 80rem; --container-wide: 96rem; --container-text: 50rem; }
}

/* --- Флуидна типографска скала --- */
:root {
	--fs-900: clamp(2.125rem, 1.4rem + 3.2vw, 3.625rem);
	--fs-800: clamp(1.625rem, 1.2rem + 1.9vw, 2.5rem);
	--fs-700: clamp(1.1875rem, 1.05rem + .6vw, 1.5rem);
	--fs-600: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
	--fs-500: clamp(1rem, .95rem + .25vw, 1.125rem);
	--fs-400: clamp(.875rem, .85rem + .15vw, .9375rem);
	/* подот е 19px: бела 700 ознака на --blue-500 ја исполнува AA-large границата
	   (18.66px) на секоја ширина, вклучувајќи 360px */
	--fs-cta: clamp(1.1875rem, 1.05rem + .5vw, 1.375rem);
	--fs-phone: clamp(2rem, 1.35rem + 2.9vw, 3.5rem);
	--fs-numeral: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
}

/* ==========================================================================
   3. RESET И ОСНОВА
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: 'Montserrat', 'Montserrat Fallback', Arial, sans-serif;
	font-size: var(--fs-500);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

h1, h2, h3, h4 {
	margin: 0 0 var(--sp-4);
	color: var(--heading);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.015em;
	overflow-wrap: break-word;   /* долгите македонски зборови на 320px */
}
h1 { font-size: var(--fs-900); line-height: 1.1; letter-spacing: -.02em; }
h2 { font-size: var(--fs-800); }
h3 { font-size: var(--fs-700); line-height: 1.3; }
h4 { font-size: var(--fs-600); }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--blue-700); }

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

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.35em; }
li { margin-bottom: .4em; }

strong, b { font-weight: 700; color: var(--ink-900); }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0; }

:focus-visible {
	outline: var(--focus-ring);
	outline-offset: 2px;
	border-radius: 4px;
}
/* Сината рамка на темните површини дава само 2.8:1; прстенот за фокус
   бара најмалку 3:1, па таму станува бел. */
.site-footer :focus-visible,
.cta-band :focus-visible,
.callbar :focus-visible {
	outline-color: #fff;
}

::selection { background: var(--blue-100); color: var(--ink-900); }

/* Телефонски броеви: рамномерни цифри */
.tnum, .btn, .callbar-link, .cta-phone { font-variant-numeric: lining-nums tabular-nums; }

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */
.container { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; }
.container-wide { width: min(100% - var(--gutter) * 2, var(--container-wide)); margin-inline: auto; }
.container-text { width: min(100% - var(--gutter) * 2, var(--container-text)); margin-inline: auto; }

.section { padding-block: var(--section-pad); }
.section-sm { padding-block: var(--section-pad-sm); }
.section-tint { background: var(--surface-2); }

.section-head { margin-bottom: var(--sp-7); }
.section-head p { color: var(--ink-500); font-size: var(--fs-600); max-width: 60ch; }
.section-head--center { text-align: center; margin-inline: auto; max-width: 46rem; }
.section-head--center p { margin-inline: auto; }

/* Сина црта под насловот: се користи наместо декоративен markup */
.rule-title::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 4px;
	margin-top: var(--sp-4);
	background: var(--blue-500);
	border-radius: var(--r-pill);
}
.rule-title.is-center::after { margin-inline: auto; }

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--blue-600);
	color: #fff;
	padding: .75rem 1.25rem;
	font-weight: 600;
	text-decoration: none;
}
.skip-link:focus-visible { left: .5rem; top: .5rem; color: #fff; }

.visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ==========================================================================
   5. ИКОНИ
   ========================================================================== */
.ico {
	width: 1.25em;
	height: 1.25em;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ico-fill { fill: currentColor; stroke: none; }
.ico-lg { width: 2rem; height: 2rem; }

/* ==========================================================================
   6. КОПЧИЊА
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* flex-wrap: децата на flex не се обвиткуваат по дифолт, па ознака составена
	   од икона + текст + број би го растегнала копчето преку екранот на 320px */
	flex-wrap: wrap;
	gap: .6em;
	padding: .8em clamp(1rem, .55rem + 1.4vw, 1.5em);
	min-height: 3rem;
	border: 1px solid transparent;
	border-radius: var(--r-pill);
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--t-fast) ease-out,
				border-color var(--t-fast) ease-out,
				color var(--t-fast) ease-out,
				box-shadow var(--t-fast) ease-out;
}
.btn:active { transform: scale(.98); }

.btn-primary {
	background: var(--cta-bg);
	color: var(--cta-text);
	font-size: var(--fs-cta);   /* подот од 18px ја заклучува AA-large контрастот */
	box-shadow: var(--shadow-cta);
}
.btn-primary:hover { background: var(--cta-bg-hover); color: #fff; }

.btn-ghost {
	background: transparent;
	border-color: var(--line-strong);
	color: var(--blue-600);
	font-size: var(--fs-500);
}
.btn-ghost:hover { border-color: var(--blue-500); background: var(--blue-050); color: var(--blue-700); }

.btn-white {
	background: #fff;
	color: var(--blue-700);
	font-size: var(--fs-cta);
}
.btn-white:hover { background: var(--blue-050); color: var(--blue-800); }

.btn-outline-light {
	background: transparent;
	border-color: rgba(255, 255, 255, .4);
	color: #fff;
	font-size: var(--fs-500);
}
.btn-outline-light:hover { border-color: #fff; background: rgba(255, 255, 255, .1); color: #fff; }

.btn-alarm {
	background: var(--red-600);
	color: #fff;
	font-size: var(--fs-cta);
}
.btn-alarm:hover { background: var(--red-700); color: #fff; }

.btn-block { width: 100%; }
/* Телефонскиот број никогаш не се крши на два реда */
.nowrap { white-space: nowrap; }
.btn { text-wrap: balance; }

/* Стрелка-линк во картички */
.arrow-link {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	font-weight: 600;
	color: var(--blue-600);
	text-decoration: none;
}
.arrow-link .ico { transition: transform var(--t-fast) ease-out; }
.arrow-link:hover .ico { transform: translateX(3px); }

/* ==========================================================================
   7. ЗАГЛАВЈЕ И НАВИГАЦИЈА
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: rgba(255, 255, 255, .92);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--line);
	transition: box-shadow var(--t-fast) ease-out;
}
.site-header.is-scrolled { box-shadow: var(--shadow-1); }

.nav {
	width: min(100% - var(--gutter) * 2, var(--container-wide));
	margin-inline: auto;
	min-height: var(--header-h);
	display: flex;
	align-items: center;
	gap: var(--sp-4);
}

.nav-logo { display: flex; align-items: center; flex: none; }
.nav-logo img { height: 2.5rem; width: auto; }

.nav-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: clamp(.75rem, .2rem + 1.1vw, 1.75rem);
	margin-left: auto;
}
.nav-menu li { margin: 0; }
.nav-menu a {
	color: var(--ink-700);
	font-size: var(--fs-400);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	padding-block: .35rem;
	transition: color var(--t-fast) ease-out;
}
.nav-menu a:hover { color: var(--blue-600); }
.nav-menu a[aria-current="page"] {
	color: var(--blue-600);
	box-shadow: inset 0 -2px 0 var(--blue-500);
}

.nav-cta {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .6em 1.15em;
	min-height: 2.75rem;
	/* --blue-600, не --blue-500: ознаката е 15px и бела боја на --blue-500 дава
	   само 4.13:1, под прагот AA од 4.5:1 за текст помал од 18.66px */
	background: var(--blue-600);
	color: #fff !important;
	border-radius: var(--r-pill);
	font-size: var(--fs-400) !important;
	font-weight: 700 !important;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: none !important;
	transition: background-color var(--t-fast) ease-out;
}
.nav-cta:hover { background: var(--blue-700); color: #fff !important; }

/* Смена на јазик */
.nav-lang {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	flex: none;
	padding: 0 .8em;
	height: 2.75rem;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	color: var(--ink-700);
	font-size: var(--fs-400);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color var(--t-fast) ease-out, background-color var(--t-fast) ease-out, color var(--t-fast) ease-out;
}
.nav-lang:hover { border-color: var(--blue-500); background: var(--blue-050); color: var(--blue-700); }
.nav-lang .ico { width: 1.15rem; height: 1.15rem; color: var(--blue-600); }
.nav-lang:hover .ico { color: var(--blue-700); }

/* Facebook: постојано во заглавјето, на секоја страница */
.nav-fb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	flex: none;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	color: #1877F2;
	text-decoration: none;
	transition: background-color var(--t-fast) ease-out, border-color var(--t-fast) ease-out, color var(--t-fast) ease-out;
}
.nav-fb:hover { background: #1877F2; border-color: #1877F2; color: #fff; }
.nav-fb .ico { width: 1.35rem; height: 1.35rem; }
/* на десктоп менито е лево од контролите, потоа јазик и Facebook */
.nav-menu { order: 1; }
.nav-lang { order: 2; }
.nav-fb { order: 3; }

.nav-toggle,
.nav-phone {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: transparent;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	color: var(--ink-900);
	cursor: pointer;
}
/* Бројот е испишан со букви, не само икона: постарите корисници читаат текст,
   а во мобилното заглавје има доволно место за целиот број. */
.nav-phone {
	width: auto;
	gap: .5em;
	padding-inline: 1rem;
	background: var(--blue-600);
	border-color: var(--blue-600);
	color: #fff;
	font-size: var(--fs-400);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.nav-phone span { font-variant-numeric: lining-nums tabular-nums; }
/* само на најтесните екрани (под 360px) останува само иконата */
@media (max-width: 22.4rem) {
	.nav-phone span { display: none; }
	.nav-phone { width: 2.75rem; padding-inline: 0; }
}
.nav-toggle .ico, .nav-phone .ico { width: 1.4rem; height: 1.4rem; }
.nav-toggle .ico-close { display: none; }

@media (max-width: 62.5rem) {
	.nav-toggle, .nav-phone { display: inline-flex; }
	.nav-lang { order: 2; margin-left: auto; padding: 0 .65em; }
	.nav-fb { order: 3; }
	.nav-phone { order: 4; }
	.nav-toggle { order: 5; }
	.nav { gap: var(--sp-2); }
	/* под 26rem нема место за сите четири контроли: Facebook паѓа во менито */
	@media (max-width: 26rem) {
		.nav-fb { display: none; }
		.nav-lang .ico { display: none; }
	}
	.nav-menu {
		order: 4;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin: 0;
		padding: var(--sp-2) var(--gutter) var(--sp-5);
		background: var(--surface);
		border-bottom: 1px solid var(--line);
		box-shadow: var(--shadow-2);
		/* во пејзажна ориентација менито е повисоко од екранот; без ова
		   долните ставки (вклучувајќи го копчето за повик) се недостижни */
		max-height: calc(100dvh - var(--header-h) - var(--callbar-h));
		overflow-y: auto;
		overscroll-behavior: contain;
		visibility: hidden;
		opacity: 0;
		transform: translateY(-.5rem);
		transition: opacity var(--t-fast) ease-out, transform var(--t-fast) ease-out, visibility var(--t-fast);
	}
	.nav-menu a {
		display: block;
		padding: .85rem .25rem;
		font-size: var(--fs-500);
		border-bottom: 1px solid var(--line);
	}
	.nav-menu a[aria-current="page"] { box-shadow: none; }
	.nav-menu .nav-cta {
		justify-content: center;
		margin-top: var(--sp-4);
		border-bottom: 0;
		font-size: var(--fs-500) !important;
	}
	.nav-open .nav-menu { visibility: visible; opacity: 1; transform: translateY(0); }
	.nav-open .nav-toggle .ico-menu { display: none; }
	.nav-open .nav-toggle .ico-close { display: block; }
}

/* ==========================================================================
   8. МОБИЛНА ЛЕНТА ЗА ПОВИК (секогаш видлива под 1000px)
   ========================================================================== */
.callbar { display: none; }

@media (max-width: 62.5rem) {
	.callbar {
		display: block;
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: var(--z-callbar);
		background: var(--blue-500);
		padding-bottom: env(safe-area-inset-bottom);
		box-shadow: 0 -2px 16px rgba(12, 42, 60, .18);
	}
	.callbar-link {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: .6em;
		min-height: var(--callbar-h);
		color: #fff;
		font-size: var(--fs-cta);
		font-weight: 700;
		text-decoration: none;
	}
	.callbar-link:active { background: var(--blue-600); color: #fff; }
	body { padding-bottom: calc(var(--callbar-h) + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   9. HERO (почетна)
   ========================================================================== */
.hero {
	padding-block: clamp(2rem, 1rem + 3vw, 4.5rem) var(--section-pad);
	border-bottom: 1px solid var(--line);
}
.hero-grid {
	display: grid;
	gap: clamp(1.5rem, .5rem + 3vw, 3.5rem);
	align-items: center;
}
.hero-title { text-wrap: balance; }
.hero-title span.hero-sub {
	display: block;
	max-width: 22ch;
	margin-top: .5rem;
	font-size: .46em;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: -.01em;
	color: var(--ink-500);
	text-wrap: pretty;
}
.hero-lead {
	font-size: var(--fs-600);
	color: var(--ink-700);
	max-width: 34ch;
}
.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-top: var(--sp-5);
}
.hero-media img {
	width: 100%;
	border-radius: var(--r-card);
	box-shadow: var(--shadow-2);
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

@media (min-width: 56.25rem) {
	.hero-grid { grid-template-columns: 1.05fr .95fr; }
	/* 3/2 се совпаѓа со изворот (736x495): исечок 4/3 фрлаше 11% од пикселите
	   и ја зголемуваше потребната резолуција на голем екран */
	.hero-media img { aspect-ratio: 3 / 2; }
}

/* ==========================================================================
   10. ЛЕНТА СО ДОКАЗИ
   ========================================================================== */
.proof {
	background: var(--surface-2);
	border-bottom: 1px solid var(--line);
	padding-block: var(--sp-5);
}
.proof-list {
	list-style: none;
	/* margin-inline мора да остане auto: .proof-list ја носи и класата
	   .container-wide, а `margin: 0` овде го поништуваше центрирањето */
	margin-block: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-4);
}
.proof-list li {
	display: flex;
	align-items: center;
	gap: .7em;
	margin: 0;
	font-weight: 600;
	color: var(--ink-900);
	font-size: var(--fs-400);
}
.proof-list .ico { color: var(--blue-600); width: 1.5rem; height: 1.5rem; }

@media (min-width: 45rem) {
	.proof-list { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
}

/* ==========================================================================
   11. ФАКТИ (дефиниционен панел)
   ========================================================================== */
.facts-grid {
	display: grid;
	gap: var(--sp-4);
	margin: 0;
	grid-template-columns: 1fr;
}
.fact {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	gap: .15rem var(--sp-4);
	padding: clamp(1.1rem, .9rem + .9vw, 1.5rem);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	box-shadow: var(--shadow-1);
}
.fact-icon {
	grid-row: span 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	background: var(--blue-050);
	border-radius: var(--r-field);
	color: var(--blue-600);
	align-self: start;
}
.fact-icon .ico { width: 1.4rem; height: 1.4rem; }
.fact dt {
	align-self: end;
	font-size: var(--fs-400);
	font-weight: 700;
	color: var(--blue-600);
}
.fact dd { margin: 0; color: var(--ink-700); font-size: var(--fs-400); }
.fact.is-accent { background: var(--blue-050); border-color: var(--blue-200); }
.fact.is-accent .fact-icon { background: #fff; }
.fact.is-accent dd a { font-weight: 700; text-decoration: none; }
.fact.is-accent dd a:hover { text-decoration: underline; }

@media (min-width: 40rem) { .facts-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62.5rem) { .facts-grid { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   12. МРЕЖА НА УСЛУГИ (мешана: фото картички + икона картички)
   ========================================================================== */
.svc-grid {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: 1fr;
}
.svc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: border-color var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out;
}
.svc-card:hover { border-color: var(--blue-300); box-shadow: var(--shadow-2); color: inherit; }
.svc-card:hover .arrow-link .ico { transform: translateX(3px); }

/* flex:1 (не height:100%) - процентна висина овде ја стиска сликата над неа */
.svc-card-body { padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); display: flex; flex-direction: column; flex: 1 0 auto; }
.svc-card h3 { margin-bottom: .5rem; }
.svc-card p { color: var(--ink-500); font-size: var(--fs-400); margin: 0; }
.svc-card .svc-card-text { margin-bottom: var(--sp-4); }
.svc-card .arrow-link { margin-top: auto; }
/* Картичките со икона се пократки од фото-картичките во истиот ред; содржината
   се центрира вертикално за празнината да не се собере на едно место. */
.svc-card.is-icon .svc-card-body { justify-content: center; }
.svc-card.is-icon .arrow-link { margin-top: var(--sp-4); }

.svc-card-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--blue-050); flex: none; }
.svc-card-media img { width: 100%; height: 100%; object-fit: cover; }
/* elektrotr3: каналите и разводната кутија се во долната третина на кадарот,
   па центрираниот исечок покажува само празен ѕид */
.svc-card-media img[src$="elektrotr3.webp"],
.card-media img[src$="elektrotr3.webp"],
.gallery img[src$="elektrotr3.webp"] { object-position: 50% 75%; }
/* Широките картички добиваат порамен исечок за да не бидат многу повисоки
   од картичките со икона во истиот ред */
@media (min-width: 68.75rem) {
	.svc-span-7 .svc-card-media { aspect-ratio: 21 / 9; }
}

.svc-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: var(--sp-4);
	background: var(--blue-050);
	border-radius: var(--r-field);
	color: var(--blue-600);
}
.svc-icon .ico { width: 1.6rem; height: 1.6rem; }

.svc-card.is-tinted { background: var(--blue-050); border-color: var(--blue-200); }
.svc-card.is-tinted .svc-icon { background: #fff; }

/* Итна варијанта: единствениот дозволен исклучок од синиот акцент.
   Оди како лента низ целата ширина, не како картичка: така не се растегнува
   до висината на соседна фото-картичка и остава празнина. */
.svc-card.is-alarm { background: var(--red-050); border-color: var(--red-200); }
.svc-card.is-alarm:hover { border-color: var(--red-600); }
.svc-card.is-alarm .svc-icon { background: #fff; color: var(--red-600); margin-bottom: 0; }
.svc-card.is-alarm h3 { color: var(--red-700); }
.svc-card.is-alarm .arrow-link { color: var(--red-600); margin-top: var(--sp-3); }
.svc-card.is-alarm .svc-card-body { gap: var(--sp-4); }

@media (min-width: 45rem) {
	.svc-card.is-alarm .svc-card-body {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		gap: var(--sp-5);
	}
	.svc-card.is-alarm .svc-card-text { margin: 0; }
	.svc-card.is-alarm h3 { margin: 0 0 .35rem; }
	.svc-card.is-alarm .arrow-link { margin: 0; white-space: nowrap; }
	.svc-card.is-alarm .svc-icon { width: 3.5rem; height: 3.5rem; }
	.svc-card.is-alarm .svc-icon .ico { width: 2rem; height: 2rem; }
}

@media (min-width: 45rem) {
	.svc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 45rem) { .svc-span-12 { grid-column: 1 / -1; } }
@media (min-width: 68.75rem) {
	.svc-grid { grid-template-columns: repeat(12, 1fr); }
	.svc-span-12 { grid-column: span 12; }
	.svc-span-7 { grid-column: span 7; }
	.svc-span-5 { grid-column: span 5; }
	.svc-span-4 { grid-column: span 4; }
	.svc-span-6 { grid-column: span 6; }
}

/* ==========================================================================
   13. НУМЕРИРАН ИНДЕКС НА УСЛУГИ (страна Услуги)
   ========================================================================== */
.index-list { border-top: 1px solid var(--line); }
.index-row {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--sp-3) var(--sp-5);
	align-items: start;
	padding-block: var(--sp-5);
	border-bottom: 1px solid var(--line);
	text-decoration: none;
	color: inherit;
	transition: background-color var(--t-fast) ease-out;
}
.index-row:hover { background: var(--blue-050); color: inherit; }
.index-row:hover .index-num { color: var(--blue-500); }
.index-num {
	font-size: var(--fs-numeral);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--blue-100);
	transition: color var(--t-fast) ease-out;
	font-variant-numeric: tabular-nums;
}
.index-row h3 { margin-bottom: .35rem; }
.index-row p { color: var(--ink-500); font-size: var(--fs-400); margin: 0; }

@media (min-width: 56.25rem) {
	.index-row { grid-template-columns: 5rem 1fr auto; align-items: center; padding-inline: var(--sp-4); }
	.index-row .arrow-link { justify-self: end; }
}

/* ==========================================================================
   13b. БЛОК НА УСЛУГА (детална страна) - нумерирани, разделени со линија
   ========================================================================== */
.svc-blocks > .svc-block + .svc-block { margin-top: var(--sp-8); padding-top: var(--sp-8); border-top: 1px solid var(--line); }
.svc-block { scroll-margin-top: calc(var(--header-h) + 4rem); }
.svc-block-head { display: flex; align-items: baseline; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.svc-block-num {
	font-size: var(--fs-700);
	font-weight: 700;
	line-height: 1;
	color: var(--blue-300);
	font-variant-numeric: tabular-nums;
	flex: none;
}
.svc-block-head h2 { margin: 0; }
.svc-block-body::after { content: ""; display: table; clear: both; }
/* Блокот ПОСЛЕ итниот панел не добива линија: картичката веќе се затвора сама. */
.svc-blocks > .svc-block.alarm-panel + .svc-block { border-top: 0; }
/* 0,3,0 за да ја победи .svc-blocks > .svc-block + .svc-block погоре:
   панелот мора да е затворена кутија со симетричен внатрешен простор. */
.svc-blocks > .svc-block.alarm-panel {
	border-top: 1px solid var(--red-200);
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.alarm-panel .svc-block-num { color: var(--red-600); }
.prose .alarm-panel li::marker { color: var(--red-600); }

/* Истакната забелешка во статија (беше .info-box во старата тема) */
.note {
	background: var(--blue-050);
	border: 1px solid var(--blue-200);
	border-left: 4px solid var(--blue-500);
	border-radius: var(--r-card);
	padding: clamp(1.25rem, 1rem + 1.5vw, 1.75rem);
	margin-block: var(--sp-6);
}
.note > :first-child { margin-top: 0; }
.note > :last-child { margin-bottom: 0; }
.note h2, .note h3 { font-size: var(--fs-700); margin-bottom: var(--sp-3); margin-top: 0; }

/* Мета ред на статија (автор, датум, ознака, време за читање) */
.article-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-5);
	margin-top: var(--sp-4);
	font-size: var(--fs-400);
	color: var(--ink-500);
}
.article-meta span { display: inline-flex; align-items: center; }

/* ==========================================================================
   13c. БРОЈКИ (страна За Нас)
   ========================================================================== */
.stats-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-5);
	grid-template-columns: repeat(2, 1fr);
	text-align: center;
}
.stats-grid li { margin: 0; }
.stat-number {
	display: block;
	font-size: var(--fs-numeral);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--blue-600);
	font-variant-numeric: tabular-nums;
}
.stat-label { display: block; margin-top: .35rem; font-size: var(--fs-400); color: var(--ink-500); }
@media (min-width: 56.25rem) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   14. SPLIT (слика + текст)
   ========================================================================== */
.split {
	display: grid;
	gap: clamp(1.5rem, .75rem + 3vw, 3.5rem);
	align-items: center;
}
.split-media img {
	width: 100%;
	border-radius: var(--r-card);
	box-shadow: var(--shadow-1);
}
/* Портретните фотографии добиваат фиксен однос за да не ја растегнат секцијата */
.split-media.is-portrait img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center;
}
.split-media figcaption {
	margin-top: var(--sp-3);
	font-size: var(--fs-400);
	color: var(--ink-500);
}
@media (min-width: 56.25rem) {
	.split { grid-template-columns: 5fr 7fr; }
	.split.is-reversed { grid-template-columns: 7fr 5fr; }
	.split.is-reversed .split-media { order: 2; }
}

.checklist {
	list-style: none;
	padding: 0;
	margin: var(--sp-4) 0 var(--sp-5);
	display: grid;
	gap: var(--sp-2);
}
.checklist li {
	display: flex;
	align-items: flex-start;
	gap: .6em;
	margin: 0;
	font-size: var(--fs-400);
}
.checklist .ico { color: var(--blue-600); margin-top: .2em; width: 1.15rem; height: 1.15rem; }
@media (min-width: 45rem) { .checklist { grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-5); } }

/* ==========================================================================
   15. УРЕДУВАЧКИ БЛОК (цени, текстуални секции)
   ========================================================================== */
.prose { font-size: var(--fs-500); }
.prose h2 { margin-top: var(--sp-7); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--sp-6); }
.prose ul, .prose ol { margin-bottom: var(--sp-5); }
.prose li::marker { color: var(--blue-500); }
.prose figure { margin: var(--sp-6) 0; }
.prose figure img { width: 100%; border-radius: var(--r-card); }
.prose figcaption { margin-top: var(--sp-2); font-size: var(--fs-400); color: var(--ink-500); }
.prose blockquote {
	margin: var(--sp-6) 0;
	padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
	border-left: 3px solid var(--blue-500);
	color: var(--ink-900);
	font-size: var(--fs-600);
}

/* figure.float-figure, не .float-figure: `.prose figure` има поголема
   специфичност и го поништуваше левиот отстап, па текстот удираше во сликата */
figure.float-figure { margin: 0 0 var(--sp-5); max-width: 22rem; }
figure.float-figure img { width: 100%; border-radius: var(--r-card); box-shadow: var(--shadow-1); }
figure.float-figure.is-portrait img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center; }
@media (min-width: 64rem) {
	figure.float-figure { float: right; width: 20rem; margin: .35rem 0 var(--sp-5) var(--sp-6); }
}

/* ==========================================================================
   16. CTA ЛЕНТА (темна закотвувачка површина)
   ========================================================================== */
.cta-band {
	background: var(--band-bg);
	color: var(--band-text);
	padding-block: var(--section-pad);
	text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--band-text); }
.cta-phone {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	margin: var(--sp-3) 0 var(--sp-4);
	color: #fff;
	font-size: var(--fs-phone);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.02em;
	text-decoration: none;
	min-height: 4rem;
}
.cta-phone:hover { color: #fff; text-decoration: underline; text-underline-offset: .12em; }
.cta-phone .ico { width: .8em; height: .8em; color: var(--blue-300); stroke-width: 1.5; }
.cta-band-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2) var(--sp-5);
	margin-top: var(--sp-2);
	font-size: var(--fs-400);
}
.cta-band-links a { color: var(--band-text); }
.cta-band-links a:hover { color: #fff; }

/* Мала inline CTA (во статии и градски страни) */
.cta-inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
	background: var(--blue-050);
	border: 1px solid var(--blue-200);
	border-radius: var(--r-card);
	margin-block: var(--sp-7);
}
.cta-inline p { margin: 0; font-weight: 600; color: var(--ink-900); font-size: var(--fs-600); }

/* Итна (црвена) варијанта: документиран исклучок од синиот акцент */
.alarm-panel {
	background: var(--red-050);
	border: 1px solid var(--red-200);
	border-left: 4px solid var(--red-600);
	border-radius: var(--r-card);
	padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
}
/* насловот со inline икона: без flex вториот ред виси под иконата */
.alarm-panel h2, .alarm-panel h3 { color: var(--red-700); display: flex; align-items: flex-start; gap: .5em; }
.alarm-panel h2 > .ico, .alarm-panel h3 > .ico { flex: none; margin-top: .12em; }
.alarm-panel .svc-icon { background: #fff; color: var(--red-600); }
/* Итното копче е главната акција во панелот: оди преку целата ширина за да не
   се крши ознаката (англискиот текст е подолг од македонскиот) */
.alarm-panel .btn-alarm { width: 100%; margin-top: var(--sp-2); }

/* ==========================================================================
   17. ОЦЕНКИ
   ========================================================================== */
.reviews { text-align: center; }
.reviews p { color: var(--ink-500); }
.review-grid { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); text-align: left; }
.review-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	padding: var(--sp-5);
}
.review-card blockquote { margin: 0 0 var(--sp-4); border: 0; padding: 0; font-size: var(--fs-500); color: var(--ink-900); }
.review-card cite { font-style: normal; font-size: var(--fs-400); color: var(--ink-500); }
@media (min-width: 45rem) { .review-grid { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   18. ГАЛЕРИЈА И LIGHTBOX
   ========================================================================== */
.gallery {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-3);
	grid-template-columns: 1fr;
}
.gallery li { margin: 0; }
.gallery a {
	display: block;
	border-radius: var(--r-card);
	overflow: hidden;
	background: var(--blue-050);
	transition: box-shadow var(--t-fast) ease-out;
}
.gallery a:hover { box-shadow: var(--shadow-2); }
.gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }

/* 6 фотографии = 6 ќелии. Без празни места и без екстремно кастрење. */
@media (min-width: 35rem) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56.25rem) { .gallery { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } }

.lightbox {
	width: min(92vw, 62rem);
	max-width: none;
	max-height: 92vh;
	padding: 0;
	border: 0;
	border-radius: var(--r-card);
	background: transparent;
	overflow: visible;
}
.lightbox::backdrop { background: rgba(10, 37, 55, .88); }
.lightbox-figure { margin: 0; }
.lightbox-figure img {
	width: 100%;
	max-height: 80vh;
	object-fit: contain;
	border-radius: var(--r-card);
	background: var(--ink-900);
}
.lightbox-figure figcaption {
	margin-top: var(--sp-3);
	color: #fff;
	font-size: var(--fs-400);
	text-align: center;
}
.lightbox-close, .lightbox-prev, .lightbox-next {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .92);
	color: var(--ink-900);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--t-fast) ease-out;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: #fff; }
.lightbox-close { top: -1.25rem; right: -.5rem; }
.lightbox-prev { left: -.5rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: -.5rem; top: 50%; transform: translateY(-50%); }
/* Копчињата излегуваат надвор од рамката дури кога има место за нив:
   (100vw - 62rem) / 2 >= 3.5rem, односно од 1120px нагоре. */
@media (min-width: 70rem) {
	.lightbox-prev { left: -3.5rem; }
	.lightbox-next { right: -3.5rem; }
	.lightbox-close { top: -3.25rem; right: 0; }
}

/* ==========================================================================
   19. ЗАГЛАВЈЕ НА ПОДСТРАНА + ТРОШКИ
   ========================================================================== */
.page-header {
	padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) var(--section-pad-sm);
	border-bottom: 1px solid var(--line);
	background: var(--surface);
}
.page-header p.lead {
	font-size: var(--fs-600);
	color: var(--ink-500);
	max-width: 60ch;
	margin-top: var(--sp-4);
}
.page-header .btn { margin-top: var(--sp-5); }

.breadcrumb { margin-bottom: var(--sp-4); }
.breadcrumb ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
	margin: 0;
	padding: 0;
	font-size: var(--fs-400);
	color: var(--ink-500);
}
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: .4rem; }
.breadcrumb li:not(:last-child)::after { content: "›"; color: var(--line-strong); }
.breadcrumb a { color: var(--ink-500); text-decoration: none; }
.breadcrumb a:hover { color: var(--blue-600); text-decoration: underline; }

/* ==========================================================================
   20. ЧИПОВИ (локации, котви, соседства)
   ========================================================================== */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; }
.chips li { margin: 0; }
.chip {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	padding: .5em 1em;
	min-height: 2.5rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	color: var(--ink-700);
	font-size: var(--fs-400);
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--t-fast) ease-out, background-color var(--t-fast) ease-out, color var(--t-fast) ease-out;
}
.chip:hover { border-color: var(--blue-500); background: var(--blue-050); color: var(--blue-700); }
.chip .ico { width: 1rem; height: 1rem; color: var(--blue-500); }
.chip.is-static { background: var(--blue-050); border-color: var(--blue-200); color: var(--ink-900); }

/* Лента со котви (страна Услуги) */
.anchor-rail {
	position: sticky;
	top: var(--header-h);
	z-index: 10;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
	padding-block: var(--sp-3);
}
/* Преливот десно покажува дека лентата се лизга настрана */
.anchor-rail > div { position: relative; }
.anchor-rail > div::after {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 2.5rem;
	pointer-events: none;
	background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
}
@media (min-width: 68.75rem) { .anchor-rail > div::after { display: none; } }
.anchor-rail .chip-alarm { border-color: var(--red-200); background: var(--red-050); color: var(--red-700); }
.anchor-rail .chip-alarm .ico { color: var(--red-600); }
.anchor-rail .chip-alarm:hover { border-color: var(--red-600); background: var(--red-050); color: var(--red-700); }
.anchor-rail .chips {
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: thin;
	scroll-snap-type: x proximity;
	padding-bottom: 2px;
}
.anchor-rail .chips li { scroll-snap-align: start; }
.anchor-rail .chip { white-space: nowrap; }
/* Од 1100px лентата се обвиткува во два реда наместо да се кастри десно.
   Истата граница како преливот погоре, за да нема лента што покажува
   „содржината продолжува" а всушност не се лизга. */
@media (min-width: 68.75rem) {
	.anchor-rail .chips { flex-wrap: wrap; overflow-x: visible; scroll-snap-type: none; }
}

/* ==========================================================================
   21. FAQ
   ========================================================================== */
.faq-group { margin-bottom: var(--sp-8); }
.faq-item {
	border-bottom: 1px solid var(--line);
	padding-block: var(--sp-4);
}
.faq-item h3 { margin-bottom: var(--sp-3); }
.faq-item p { color: var(--ink-700); }
.faq-item p:last-child { margin-bottom: 0; }

details.faq-item { padding-block: 0; }
details.faq-item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding-block: var(--sp-4);
	min-height: 3rem;
	cursor: pointer;
	font-size: var(--fs-700);
	font-weight: 700;
	color: var(--heading);
	line-height: 1.3;
	list-style: none;
}
details.faq-item > summary::-webkit-details-marker { display: none; }
details.faq-item > summary::after {
	content: "";
	flex: none;
	width: 1rem;
	height: 1rem;
	border-right: 2px solid var(--blue-500);
	border-bottom: 2px solid var(--blue-500);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--t-fast) ease-out;
}
details.faq-item[open] > summary::after { transform: rotate(-135deg) translate(-4px, -4px); }
details.faq-item > summary:hover { color: var(--blue-600); }
/* Прашањето е h3 за да е достижно преку навигација по наслови,
   но визуелно останува дел од summary. */
details.faq-item > summary h3 { font: inherit; color: inherit; margin: 0; letter-spacing: inherit; }
details.faq-item .faq-answer { padding-bottom: var(--sp-4); }

/* Странична содржина (FAQ, долги страни) */
.with-aside { display: grid; gap: var(--sp-7); }
/* На мобилен содржината оди ПРЕД прашањата што ги индексира, инаку корисникот
   мора да го прескокне целиот FAQ за да го најде индексот. */
.with-aside .aside { order: -1; }
@media (min-width: 64rem) {
	.with-aside { grid-template-columns: 1fr 16rem; align-items: start; }
	.with-aside .aside { order: 0; position: sticky; top: calc(var(--header-h) + 1.5rem); }
}
@media (max-width: 63.99rem) {
	.with-aside .aside {
		background: var(--surface-2);
		border: 1px solid var(--line);
		border-radius: var(--r-card);
		padding: var(--sp-5);
	}
	.with-aside .aside-nav { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
	.with-aside .aside-nav li { margin: 0; }
	.with-aside .aside-nav a {
		padding: .5rem .9rem;
		min-height: 2.5rem;
		display: flex;
		align-items: center;
		background: var(--surface);
		border: 1px solid var(--line);
		border-radius: var(--r-pill);
		color: var(--ink-700);
		font-weight: 600;
	}
}
.aside-nav { list-style: none; margin: 0; padding: 0; }
.aside-nav li { margin-bottom: .25rem; }
.aside-nav a {
	display: block;
	padding: .4rem 0;
	font-size: var(--fs-400);
	color: var(--ink-500);
	text-decoration: none;
}
.aside-nav a:hover { color: var(--blue-600); }
h2.aside-title, .aside-title {
	font-size: var(--fs-400);
	font-weight: 700;
	color: var(--ink-900);
	margin: 0 0 var(--sp-3);
	letter-spacing: 0;
}

/* ==========================================================================
   22. КАРТИЧКИ (блог, локации, проблеми)
   ========================================================================== */
.card-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 45rem) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68.75rem) { .card-grid.is-3 { grid-template-columns: repeat(3, 1fr); } }

.card {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: border-color var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out;
}
.card:hover { border-color: var(--blue-300); box-shadow: var(--shadow-2); color: inherit; }
.card-media { aspect-ratio: 16 / 9; background: var(--blue-050); overflow: hidden; flex: none; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1 0 auto; }
.card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem var(--sp-4);
	font-size: var(--fs-400);
	color: var(--ink-500);
	margin-bottom: var(--sp-3);
}
.card h3 { margin-bottom: var(--sp-3); }
.card p { font-size: var(--fs-400); color: var(--ink-500); margin-bottom: var(--sp-4); }
.card .arrow-link { margin-top: auto; }
/* Текстуална варијанта за објави без чесна фотографија */
.card.is-text { border-top: 3px solid var(--blue-500); }

/* ==========================================================================
   23. ФОРМИ
   ========================================================================== */
.form-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	box-shadow: var(--shadow-1);
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.field { margin-bottom: var(--sp-4); }
.field label {
	display: block;
	margin-bottom: .4rem;
	font-size: var(--fs-400);
	font-weight: 700;
	color: var(--ink-900);
}
.field .req { color: var(--red-600); }
.field input, .field select, .field textarea {
	width: 100%;
	padding: .75rem .9rem;
	min-height: 3rem;
	background: var(--surface);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-field);
	font: inherit;
	font-size: var(--fs-500);
	color: var(--ink-900);
	transition: border-color var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-500); opacity: 1; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
	outline: none;
	border-color: var(--blue-600);
	box-shadow: 0 0 0 3px rgba(4, 130, 206, .22);
}
.field .hint { margin: .35rem 0 0; font-size: var(--fs-400); color: var(--ink-500); }
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--red-600); }
.field input:user-invalid ~ .error, .field textarea:user-invalid ~ .error { display: block; }
.field .error { display: none; margin: .35rem 0 0; font-size: var(--fs-400); color: var(--red-600); font-weight: 600; }

/* ==========================================================================
   24. КОНТАКТ БЛОКОВИ
   ========================================================================== */
/* min-width:0 - inaku grid колоната се шири според најдолгиот неделив збор
   (е-маил адресата) и целата страница добива хоризонтално лизгање на 320px */
.contact-grid { display: grid; gap: var(--sp-6); }
.contact-grid > * { min-width: 0; }
/* Две колони дури од 1100px: на 900-1100px левата колона е претесна и
   итното копче (подолго на англиски) се крши на два реда */
@media (min-width: 68.75rem) { .contact-grid { grid-template-columns: 1fr 1fr; align-items: start; } }

.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li {
	display: flex;
	gap: var(--sp-4);
	padding-block: var(--sp-4);
	border-bottom: 1px solid var(--line);
	margin: 0;
}
.contact-list li:last-child { border-bottom: 0; }
.contact-list .ico { color: var(--blue-600); width: 1.4rem; height: 1.4rem; margin-top: .2rem; }
.contact-list strong { display: block; font-size: var(--fs-400); color: var(--ink-500); font-weight: 600; }
.contact-list li > div { min-width: 0; }
.contact-list a { font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.contact-list a:hover { text-decoration: underline; }

.map-frame {
	width: 100%;
	height: clamp(18rem, 40vh, 26rem);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
}

/* ==========================================================================
   25. ФУТЕР
   ========================================================================== */
.site-footer {
	background: var(--footer-bg);
	color: var(--footer-text);
	padding-top: var(--section-pad);
}
.site-footer h2 {
	color: #fff;
	font-size: var(--fs-600);
	margin-bottom: var(--sp-4);
}
.footer-grid { display: grid; gap: var(--sp-6); }
@media (min-width: 45rem) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
/* minmax(27.5rem) на колоната со локации: обични fr односи ги надјачува
   автоматскиот min-content минимум, па на 1100px не би имало место за две колони */
@media (min-width: 68.75rem) {
	.footer-grid {
		grid-template-columns: minmax(0, 1fr) minmax(27.5rem, 2fr) minmax(0, .9fr) minmax(0, 1fr);
		gap: var(--sp-6) var(--sp-7);
	}
}

.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 0; break-inside: avoid; }
/* Доволна површина за допир: 17-те локациски линкови стојат еден до друг */
.footer-links a {
	display: block;
	padding-block: .55rem;
	min-height: 2.75rem;
	color: var(--footer-text);
	font-size: var(--fs-400);
	line-height: 1.4;
	text-decoration: none;
}
.footer-links a:hover { color: #fff; text-decoration: underline; }
/* columns со ШИРИНА, не со број: 13rem е нешто над најдолгата ознака
   („Електричар Кисела Вода"), па списокот сам паѓа на една колона наместо
   да ги стиска линковите во два реда. Скалира со rem на TV резолуции. */
.footer-links.is-2col { columns: 13rem; column-gap: var(--sp-5); }

.footer-contact { list-style: none; margin: 0; padding: 0; font-size: var(--fs-400); }
.footer-contact li { display: flex; gap: .7rem; margin-bottom: var(--sp-4); }
.footer-contact .ico { color: var(--blue-300); width: 1.25rem; height: 1.25rem; margin-top: .15rem; }
.footer-contact strong { display: block; color: #fff; font-weight: 600; }
.footer-contact a { color: var(--footer-text); text-decoration: none; }
.footer-contact a:hover { color: #fff; text-decoration: underline; }

/* Логото е сино и на темно сино се губи. Темна плочка е уште полоша (речиси
   исчезнува), па оди бела верзија без плочка: највисок контраст и се совпаѓа
   со белите наслови во футерот. Ако сакаш во боја, тргни го filter-от. */
.footer-brand img {
	height: 3rem;
	width: auto;
	margin-bottom: var(--sp-4);
	filter: brightness(0) invert(1);
}
.footer-brand p { font-size: var(--fs-400); color: var(--footer-muted); }
.footer-brand strong { color: #fff; }

.footer-social { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }
.footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: var(--r-pill);
	color: var(--footer-text);
	transition: background-color var(--t-fast) ease-out, border-color var(--t-fast) ease-out, color var(--t-fast) ease-out;
}
.footer-social a:hover { background: var(--blue-500); border-color: var(--blue-500); color: #fff; }

.footer-bottom {
	margin-top: var(--section-pad-sm);
	border-top: 1px solid rgba(255, 255, 255, .14);
	padding-block: var(--sp-4);
	font-size: var(--fs-400);
	color: var(--footer-muted);
}
.footer-bottom a { color: var(--footer-text); }
.footer-bottom .container-wide { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); justify-content: space-between; }

/* ==========================================================================
   26. 404
   ========================================================================== */
.page-404 { text-align: center; padding-block: clamp(3rem, 2rem + 6vw, 7rem); }
.page-404 .code {
	font-size: clamp(4rem, 2rem + 14vw, 10rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.04em;
	color: var(--blue-100);
	margin-bottom: var(--sp-4);
}
.page-404 .actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-6); }

/* ==========================================================================
   27. ДВИЖЕЊЕ
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }

	[data-reveal] {
		opacity: 0;
		transform: translateY(14px);
		transition: opacity 520ms var(--ease), transform 520ms var(--ease);
	}
	[data-reveal].is-visible { opacity: 1; transform: none; }
	[data-reveal][style*="--i"] { transition-delay: calc(var(--i) * 70ms); }

	.lightbox[open] { animation: lb-in 220ms var(--ease); }
	@keyframes lb-in {
		from { opacity: 0; transform: scale(.97); }
		to { opacity: 1; transform: none; }
	}
}

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

/* Без JavaScript содржината е секогаш видлива */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ==========================================================================
   28. ПЕЧАТЕЊЕ
   ========================================================================== */
@media print {
	.site-header, .callbar, .cta-band, .anchor-rail, .footer-social { display: none !important; }
	body { padding-bottom: 0; color: #000; }
	a[href^="tel:"]::after { content: " (" attr(href) ")"; }
}