/* =============================================================================
   Dental Centar — glavni stil
   -----------------------------------------------------------------------------
   SKALA: PSD artboard je 1980 px. `html{font-size}` je podešen tako da
   1rem = 10 dizajn-piksela na viewportu od 1980 px. Znači:

        PSD mera / 10 = rem

   Na 1980 px poklapanje je 1:1; ispod toga se sve srazmerno smanjuje
   (isti pristup kao na psihozofija sajtu). Ispod 900 px ide zaseban prelom —
   PSD NEMA mobilni artboard, pa je taj deo moja procena, ne dizajn.
   ========================================================================== */

/* ---------------------------------------------------------------- 0. TOKENI */
:root{
	/* Boje — izmerene iz PSD rendera, ne procenjene */
	--navy:        #003A8D;   /* traka, ikone, kartice, donja traka */
	--navy-dark:   #00155A;   /* dno futera / vrh hero preliva */
	--blue:        #2962B4;   /* CTA, akcenat, marquee */
	--blue-link:   #316DFF;   /* aktivna stavka menija */
	--ink:         #0F313A;   /* naslovi i telo teksta */
	--body:        #2E2E2E;   /* utisci */
	--nav:         #3A3A3A;   /* stavke menija */
	--muted:       #B8B8B8;   /* sporedni tekst na plavom */
	--surface:     #F4F6F6;   /* svetle sekcije i kartice */
	--white:       #FFFFFF;
	--gold:        #FFB311;   /* zvezdice */
	--testi-bg:    #003A8D;   /* izvedeno iz PSD-a: rezultat = 0.85*baza + 0.15*slika */

	/* Tipografija */
	--f-head: 'Urbanist', system-ui, sans-serif;
	--f-body: 'Inter Tight', system-ui, sans-serif;
	--f-num:  'Plus Jakarta Sans', system-ui, sans-serif;

	/* Mere */
	--container: 161rem;      /* 1610 px: sadržaj ide 185 → 1795 */
	--radius-pill: 3.1rem;

	/* Krive */
	--ease: cubic-bezier(.22,.61,.36,1);
	--t-color: .25s ease;
	--t-move: .5s var(--ease);
}

/* 10 px po 1rem na 1980 px; donja granica čuva čitljivost na užim ekranima */
html{ font-size: clamp(6.2px, 0.50505vw, 10px); }

/* ------------------------------------------------------------- 1. RESET */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
	background:var(--white);
	color:var(--ink);
	font-family:var(--f-body);
	font-size:1.8rem;
	font-weight:600;
	line-height:2.8rem;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	overflow-x:hidden;
}
img,picture,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

.skip-link{
	position:absolute; left:-9999px; top:0; z-index:999;
	background:var(--navy); color:#fff; padding:1.2rem 2rem;
}
.skip-link:focus{ left:0; }

.container{
	width:var(--container);
	max-width:calc(100% - 6.4rem);
	margin-inline:auto;
}

/* --------------------------------------------------- 2. TIPOGRAFSKI ELEMENTI */
.h2{
	font-family:var(--f-head);
	font-weight:900;
	font-size:4.5rem;
	line-height:5.5rem;
	color:var(--ink);
}
.h2--center{ text-align:center; }
.h2--white{ color:var(--white); }
.accent{ color:var(--blue); }

.section-lead{
	font-size:1.8rem;
	line-height:2.8rem;
	text-align:center;
	margin-top:2.6rem;
}

.rule{
	display:block;
	width:85.6rem;
	max-width:100%;
	height:.4rem;
	background:rgba(41,98,180,.35);
	margin:1.2rem 0 1.7rem;
	border-radius:.2rem;
}
.rule--wide{ margin:2rem 0 4.5rem; }

p + p{ margin-top:1.5rem; }

/* Ikonice su alfa-maske 512×512 — boju daje `background`, pa su oštre na svakoj
   rezoluciji i mogu se prebojiti bez novog fajla. */
.dc-ico{
	display:inline-block;
	background-color:currentColor;
	-webkit-mask:var(--ico) center/contain no-repeat;
	mask:var(--ico) center/contain no-repeat;
	width:1em; height:1em;
	flex:none;
}

/* ------------------------------------------------------------- 3. DUGMAD */
.btn{
	position:relative;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:20.5rem;              /* PSD: 205 px */
	height:6.2rem;              /* PSD: 62 px */
	padding-right:5.6rem;       /* mesto za krug: 49 + 7 */
	border-radius:var(--radius-pill);
	font-family:var(--f-body);
	font-size:1.6rem;
	font-weight:600;
	line-height:1;
	color:var(--white);
	overflow:hidden;
	transition:background var(--t-color), transform var(--t-move), box-shadow var(--t-move);
}
.btn--wide{ width:25.7rem; }    /* PSD: 257 px — duži natpisi */

.btn__label{ position:relative; z-index:2; white-space:nowrap; }

.btn__circle{
	position:absolute;
	right:.7rem; top:50%;
	transform:translateY(-50%);
	width:4.9rem; height:4.9rem;
	border-radius:50%;
	display:grid; place-items:center;
	z-index:2;
	transition:transform var(--t-move), background var(--t-color);
}
.btn__circle .dc-ico{ width:3.1rem; height:3.1rem; }
.btn__circle--white{ background:var(--white); color:var(--navy); }
.btn__circle--sm{ width:4.2rem; height:4.2rem; background:var(--white); color:var(--navy); }
.btn__circle--sm .dc-ico{ width:2.8rem; height:2.8rem; }
/* „plus" je gotov krug sa znakom — ne treba mu podloga */
.btn__circle--plus{ width:4.5rem; height:4.5rem; background:none; color:var(--white); }
.btn__circle--plus .dc-ico{ width:4.5rem; height:4.5rem; }

.btn--blue{ background:var(--blue); }
.btn--navy{ background:var(--navy); }
.btn--light-blue{ background:var(--blue); }
.btn--ghost{ background:transparent; box-shadow:inset 0 0 0 .2rem var(--white); }

/* Sjaj koji prelazi preko dugmeta (isti rečnik kao Psihozofija) */
.btn::before{
	content:"";
	position:absolute; top:0; left:-80%;
	width:50%; height:100%;
	background:linear-gradient(100deg, transparent, rgba(255,255,255,.3), transparent);
	transform:skewX(-20deg);
	transition:left .55s ease;
	pointer-events:none;
	z-index:1;
}
.btn:hover::before{ left:130%; }
.btn:hover{ transform:translateY(-.3rem); }
.btn--blue:hover{ background:#2f6cc4; box-shadow:0 1.4rem 2.8rem -1rem rgba(41,98,180,.55); }
.btn--navy:hover{ background:#00448f; box-shadow:0 1.4rem 2.8rem -1rem rgba(0,58,141,.55); }
.btn--ghost:hover{ background:rgba(255,255,255,.12); }
.btn:hover .btn__circle--plus{ transform:translateY(-50%) rotate(90deg); }
.btn:hover .btn__circle--white,
.btn:hover .btn__circle--sm{ transform:translateY(-50%) scale(1.06); }

.btnrow{ display:flex; align-items:center; gap:1.4rem; }

/* ============================================================================
   4. ZAGLAVLJE
   Gornja traka 0–81 · glavna traka 81–220 · plava pločica 185→392, do y=210
   ========================================================================== */
.site-header{ position:relative; z-index:20; }

.topbar{ background:var(--navy); height:8.1rem; }
.topbar__inner{
	width:var(--container);
	max-width:calc(100% - 6.4rem);
	margin-inline:auto;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:2rem;
	padding-left:23.5rem;      /* tekst kreće na 420 px, iza pločice */
}

.topbar__ticker{
	position:relative;
	flex:1 1 auto;
	height:2.6rem;
	overflow:hidden;
}
.ticker__item{
	position:absolute; inset:0;
	display:flex; align-items:center; gap:.6rem;
	font-size:1.6rem;
	font-weight:600;
	line-height:2rem;
	color:var(--white);
	white-space:nowrap;
	opacity:0;
	transform:translateY(1.4rem);
	transition:opacity .6s ease, transform .6s var(--ease);
	pointer-events:none;
}
.ticker__item.is-active{ opacity:1; transform:none; pointer-events:auto; }
.ticker__item.is-leaving{ opacity:0; transform:translateY(-1.4rem); }
.ticker__pipe{ opacity:.55; margin-inline:.8rem; }
.ticker__sep{ display:inline-block; width:.2rem; }

.topbar__cta{ flex:none; }

.navbar{ background:var(--white); height:13.9rem; }
.navbar__inner{
	position:relative;
	width:var(--container);
	max-width:calc(100% - 6.4rem);
	margin-inline:auto;
	height:100%;
	display:flex;
	align-items:center;
}

/* Plava pločica sa logotipom — visi iz gornje trake, zaobljena dole levo */
.brand{
	position:absolute;
	left:0; top:-8.1rem;         /* poravnato sa vrhom gornje trake */
	width:20.7rem;               /* PSD: 185 → 392 */
	height:21rem;                /* PSD: do y=210 */
	background:var(--navy);
	border-radius:0 0 1.2rem 7rem;   /* dole-desno 12, dole-levo 70 */
	display:grid;
	place-items:center;
	z-index:3;
}
.brand__logo{
	width:10.7rem; height:15.1rem;   /* PSD: 236,30 → 343,181 */
	transition:transform var(--t-move);
}
.brand:hover .brand__logo{ transform:scale(1.04); }

.nav{ margin-left:auto; margin-top:2rem; }   /* PSD: tekst menija je 10 px ispod sredine trake */
.nav__list{ display:flex; align-items:center; gap:0; }
.nav__list > li{ position:relative; }
.nav__list > li > a{
	display:block;
	padding:0 5.05rem;
	font-size:1.8rem;
	font-weight:700;
	letter-spacing:.01em;
	line-height:7rem;
	color:var(--nav);
	transition:color var(--t-color);
}
/* podvlaka koja izleti sleva */
.nav__list > li > a::after{
	content:"";
	position:absolute;
	left:5.05rem; right:5.05rem; bottom:4rem;
	height:.2rem;
	background:var(--blue-link);
	transform:scaleX(0);
	transform-origin:left;
	transition:transform .3s var(--ease);
}
.nav__list > li > a:hover{ color:var(--blue-link); }
.nav__list > li > a:hover::after,
.nav__list > li.current-menu-item > a::after,
.nav__list > li.current_page_item > a::after{ transform:scaleX(1); }
.nav__list > li.current-menu-item > a,
.nav__list > li.current_page_item > a{ color:var(--blue-link); }

.nav__list .sub-menu{
	position:absolute; left:0; top:100%;
	min-width:24rem;
	background:var(--white);
	box-shadow:0 1.8rem 4rem -1.6rem rgba(0,58,141,.35);
	border-radius:.8rem;
	padding:1rem 0;
	opacity:0; visibility:hidden;
	transform:translateY(-.8rem);
	transition:opacity var(--t-color), transform var(--t-color), visibility var(--t-color);
	z-index:10;
}
.nav__list > li:hover .sub-menu,
.nav__list > li:focus-within .sub-menu{ opacity:1; visibility:visible; transform:none; }
.nav__list .sub-menu a{
	display:block;
	padding:1rem 2rem;
	font-size:1.6rem; font-weight:600;
	color:var(--nav);
	transition:background var(--t-color), padding-left var(--t-color);
}
.nav__list .sub-menu a:hover{ background:var(--surface); padding-left:2.6rem; color:var(--blue); }

.lang{ display:flex; align-items:center; gap:1.1rem; padding-left:3.95rem; padding-right:.8rem; margin-top:2rem; }
.lang__sep{ width:.4rem; height:6.1rem; background:var(--surface); border-radius:.2rem; }
.lang__btn{
	font-size:1.8rem; font-weight:700; color:var(--nav);
	transition:color var(--t-color);
}
.lang__btn:hover{ color:var(--blue-link); }

.burger{ display:none; }

/* ============================================================================
   5. HERO (220–1121, visina 901)
   ========================================================================== */
.hero{
	position:relative;
	height:90.1rem;
	background:linear-gradient(135deg, #000E4E 0%, #003A8D 50%, #000F50 100%);
	overflow:hidden;
}
.hero__media{
	position:absolute;
	top:0; right:0; bottom:0;
	width:50%;                /* PSD: plavo 0→990, slika 990→1980 */
}
.hero__media img{ width:100%; height:100%; object-fit:cover; }

.hero__inner{ position:relative; height:100%; }
.hero__copy{ padding-top:22.7rem; }   /* nadnaslov na y=444 */

.hero__eyebrow{
	font-size:1.8rem;
	font-weight:700;
	line-height:1;
	text-transform:uppercase;
	color:var(--white);
}
.hero__bar,
.hero__eyebrow::after{
	content:"";
	display:block;
	width:18.4rem; height:1.2rem;
	background:var(--blue);
	border-radius:.6rem;
	margin-top:2.5rem;         /* PSD: 490 − 463 */
}
.hero__title{
	font-family:var(--f-head);
	font-weight:900;
	font-size:6rem;
	line-height:9rem;       /* izmereno: razmak linija 90 px */
	color:var(--white);
	margin-top:2.8rem;
}
.hero__title .line{ display:block; }
.hero .btnrow{ margin-top:4.5rem; }    /* PSD: dugmad na y=845 */

/* ============================================================================
   6. INFO TRAKA (1121–1257)
   ========================================================================== */
.infobar{ background:var(--navy); height:13.6rem; }
.infobar__inner{
	height:100%;
	display:grid;
	grid-template-columns:52.8rem 59.7rem auto;  /* pregrade na 713 i 1310 */
	align-items:center;
}
.infobar__item{
	position:relative;
	display:flex;
	align-items:center;
	gap:2.4rem;
	height:100%;
	padding-left:3.9rem;
}
.infobar__item:nth-child(2){ padding-left:8.1rem; }
.infobar__item:nth-child(3){ padding-left:9.5rem; }
.infobar__item + .infobar__item::before{
	content:"";
	position:absolute; left:0; top:50%;
	transform:translateY(-50%);
	width:.4rem; height:9.8rem;
	background:var(--surface);
	border-radius:.2rem;
}
.infobar__ico{
	width:6.1rem; height:6.1rem;
	color:var(--white);
	transition:transform var(--t-move);
}
.infobar__item:hover .infobar__ico{ transform:translateY(-.4rem); }
.infobar__label{
	font-family:var(--f-head);
	font-size:1.8rem; font-weight:600; line-height:2.2rem;
	color:var(--white);
}
.infobar__value{
	font-size:1.8rem; font-weight:400; line-height:2.2rem;
	color:var(--muted);
	margin-top:.8rem;
}
.infobar__value a{ transition:color var(--t-color); }
.infobar__value a:hover{ color:var(--white); }

/* ============================================================================
   7. O NAMA (1259–2231)
   ========================================================================== */
.section--light{ background:var(--surface); }

.about{ padding:15.4rem 0 17.5rem; }   /* slika kreće na 1411 */
.about__inner{
	display:grid;
	grid-template-columns:64.8rem 85.6rem;
	gap:10.8rem;
	align-items:start;
}

.about__media{ position:relative; }
.about__media img{
	width:64.8rem; height:64.5rem;
	object-fit:cover;
	border-radius:2rem;
}

/* Značka „20+" — slika ispod, plavi preliv preko nje (PSD: 633,1592 → 869,1828) */
.badge{
	position:absolute;
	left:45rem; top:18.1rem;
	width:23.6rem; height:23.6rem;
	border-radius:2.4rem;
	overflow:hidden;
	color:var(--white);
	box-shadow:0 2rem 4rem -1.6rem rgba(0,32,90,.45);
	transition:transform var(--t-move);
}
.about__media:hover .badge{ transform:scale(1.03); }
.badge__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.badge::after{
	content:"";
	position:absolute; inset:0;
	background:rgba(41,98,180,.82);
}
.badge__body{
	position:relative; z-index:2;
	padding:3.3rem 0 0 3.6rem;
	font-family:var(--f-num);
	font-weight:800;
}
.badge__num{ display:block; font-size:7.52rem; line-height:5.8rem; }
.badge__lead{ display:block; font-size:1.73rem; line-height:1.8rem; margin-top:1.2rem; }
.badge__rule{ display:block; width:18.4rem; height:1.2rem; background:var(--white); border-radius:.6rem; margin:.7rem 0 .9rem; }
.badge__tail{ display:block; font-size:1.73rem; line-height:2.1rem; }

.about__copy .h2{ margin-top:.8rem; }
.about__copy p + p{ margin-top:3.3rem; }
.about__copy .lead + *{ margin-top:2.8rem; }

.checklist{
	display:grid;
	grid-template-columns:36rem auto;
	gap:2.2rem 3.2rem;
	margin-top:5rem;
}
.checklist li{
	display:flex; align-items:center; gap:.8rem;
	font-size:1.8rem; font-weight:600; line-height:2.2rem;
}
.check{ width:2.8rem; height:2.8rem; color:var(--blue); }

.about .btnrow{ margin-top:7.6rem; gap:5.7rem; }

/* ============================================================================
   8. USLUGE (2232–3188)
   ========================================================================== */
.services{ padding:11.8rem 0 16rem; }
.services .svc-grid{ margin-top:15rem; }

.svc-grid{
	display:flex;
	justify-content:space-between;
	align-items:stretch;
}
.svc{
	position:relative;
	width:28.4rem;              /* PSD: 284 px */
	min-height:33.7rem;
	background:var(--surface);
	border-radius:1.2rem;
	padding:8.5rem 3.2rem 0;
	transition:transform var(--t-move), box-shadow var(--t-move);
}
.svc:hover{ transform:translateY(-.6rem); box-shadow:0 2.4rem 4.8rem -2rem rgba(0,58,141,.3); }

/* krug sa ikonicom prelazi preko gornje ivice kartice */
.svc__ico{
	position:absolute;
	left:2.8rem; top:-4.2rem;
	width:8.9rem; height:8.9rem;
	border-radius:50%;
	background:var(--navy);
	display:grid; place-items:center;
	transition:transform var(--t-move);
}
.svc:hover .svc__ico{ transform:translateY(-.6rem); }
/* SVG ikonice već nose dizajn: bela kontura (stroke) + plava površina (#2962B4).
   Filter bi ih spljoštio u belo — svaka zadržava svoju veličinu iz PSD-a. */
.svc__ico img{ width:auto; height:auto; }

.svc__title{
	font-family:var(--f-head);
	font-size:2.46rem; font-weight:800; line-height:2.8rem;
	color:var(--ink);
}
.svc__text{
	font-size:1.58rem; font-weight:600; line-height:2.5rem;
	color:var(--ink);
	margin-top:3.4rem;
}
.svc__btn{
	position:absolute;
	left:4.1rem; bottom:-2.5rem;   /* dugme visi ispod kartice (PSD: 2992–3054) */
}

/* ============================================================================
   9. AMBIJENT (3189–4110)
   ========================================================================== */
.ambient{ padding:13rem 0 11.8rem; }
.ambient__inner{
	display:grid;
	grid-template-columns:85.6rem 64.6rem;
	gap:10.8rem;
	align-items:start;
}
.ambient__copy .h2 + *{ margin-top:2.6rem; }

.feat-grid{
	display:grid;
	grid-template-columns:repeat(2, 37rem);
	gap:6.4rem 12.3rem;
}
.feat__title,
.feat__title .elementor-heading-title{
	display:flex; align-items:center; gap:1.2rem;
	font-family:var(--f-head);
	font-size:1.8rem; font-weight:700; line-height:2.2rem;
	color:var(--blue);
}
.feat__text{
	font-size:1.6rem; font-weight:600; line-height:2.8rem;
	margin-top:1.4rem;
}

/* Galerija: tri slike u dva stuba + dugme (PSD koordinate su apsolutne) */
.gallery{
	position:relative;
	height:69rem;               /* 3288 → 3978 */
	margin-top:-3.1rem;         /* galerija kreće iznad teksta (PSD y=3288) */
}
.gallery__item{ position:absolute; margin:0; overflow:hidden; border-radius:1.6rem; }
.gallery__item img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.gallery__item:hover img{ transform:scale(1.05); }
.gallery__item--a{ left:0;      top:0;      width:26rem; height:27.7rem; }
.gallery__item--b{ left:28.5rem; top:6.6rem; width:36rem; height:50.6rem; }
.gallery__item--c{ left:.2rem;  top:29.9rem; width:25.5rem; height:39.1rem; }
.gallery__btn{ position:absolute; left:28.6rem; top:62.8rem; }

/* ============================================================================
   10. UTISCI (4111–4727)
   ========================================================================== */
.testi{
	position:relative;
	background:var(--testi-bg);
	padding:10.5rem 0 9.1rem;
	overflow:hidden;
}
.testi__bg{
	position:absolute; inset:0;
	background:url('../img/utisci-bg.jpg') center/cover no-repeat;
	opacity:.15;
	pointer-events:none;
}
.testi > *{ position:relative; z-index:2; }

.testi__grid{
	display:flex;
	gap:4.7rem;
	margin-top:6.2rem;
	margin-left:9.9rem;        /* PSD: kartice kreću na x=99, ne po kontejneru */
	margin-right:5.4rem;
}
.testi-card{
	width:42.3rem;
	min-height:30.4rem;
	background:var(--white);
	border-radius:1.2rem;
	padding:4.1rem 3.6rem 3rem;
	text-align:center;
	transition:transform var(--t-move), box-shadow var(--t-move);
}
.testi-card:hover{ transform:translateY(-.6rem); box-shadow:0 2.4rem 4.8rem -2rem rgba(0,20,70,.45); }
.stars{ display:flex; justify-content:center; gap:.5rem; }
.star{ width:2.6rem; height:2.6rem; color:var(--gold); }
.testi-card__name{
	font-size:1.8rem; font-weight:600; line-height:2.2rem;
	color:var(--body);
	margin-top:4.3rem;
}
.testi-card__text{
	font-size:1.4rem; font-weight:400; line-height:2.8rem;
	color:var(--body);
	margin-top:1.7rem;
}

/* ============================================================================
   11. AKCIJE (4728–5681)
   ========================================================================== */
.promo{ padding:12.3rem 0 12.6rem; }
.promo .section-lead{ margin-top:2.4rem; }
.promo__inner{ margin-top:6.7rem; }

.promo__inner{
	display:grid;
	grid-template-columns:53.7rem auto;
	gap:5.8rem;
	align-items:start;
}
.promo__copy{ padding-top:4.8rem; }
.promo__copy > * + *{ margin-top:2.4rem; }
.promo__copy p + p{ margin-top:2.4rem; }
.promo__copy .btnrow{ margin-top:5.8rem; gap:3rem; }

.promo__cards{
	display:flex;
	gap:2.4rem;
	justify-content:flex-end;
}
.promo-card{
	position:relative;
	width:32.3rem; height:44.8rem;
	background:var(--navy);
	border-radius:1.6rem;
	overflow:hidden;
	transition:transform var(--t-move), box-shadow var(--t-move);
}
.promo-card:hover{ transform:translateY(-.8rem); box-shadow:0 3rem 5rem -2.4rem rgba(0,20,70,.55); }

/* svetlija elipsa u gornjem desnom uglu (PSD: 925,5012 → 1210,5208) */
.promo-card__badge{
	position:absolute;
	left:14.4rem; top:-9.6rem;
	width:28.5rem; height:19.6rem;
	border-radius:50%;
	background:var(--blue);
	z-index:2;
}
/* Cene su dva zasebna Elementor widgeta (klijent menja brojku), pa se svaki
   pozicionira posebno — obe su centrirane na x=256 px od leve ivice kartice. */
.promo-card__now,
.promo-card__old{
	position:absolute;
	left:25.6rem;
	transform:translateX(-50%);
	z-index:3;
	text-align:center;
	color:var(--white);
	font-family:var(--f-body);
	font-weight:600;
	white-space:nowrap;
}
.promo-card__now{ top:.3rem; font-size:4.14rem; line-height:4rem; }
.promo-card__now .cur{ font-size:2.83rem; }
.promo-card__old{
	top:5.6rem;
	font-size:2.09rem; line-height:2.4rem;
}
.promo-card__old .cur{ font-size:1.43rem; }
.promo-card__old::after{
	content:"";
	position:absolute; left:-1.6rem; right:-1.6rem; top:50%;
	height:.5rem;
	background:var(--white);
	border-radius:.25rem;
}
.promo-card__img{
	position:absolute;
	z-index:1;
	transition:transform .6s var(--ease);
}
.promo-card:hover .promo-card__img{ transform:scale(1.05); }
.promo-card__img--png{ left:0; top:5rem; width:25.8rem; height:auto; }
.promo-card__img--foto{ inset:0; width:100%; height:100%; object-fit:cover; }

.promo-card__title{
	position:absolute;
	left:3.2rem; bottom:8rem;
	z-index:3;
	font-family:var(--f-head);
	font-size:3rem; font-weight:700; line-height:3.4rem;
	color:var(--white);
}
.promo-card__rule{
	position:absolute;
	left:3rem; bottom:5.9rem;
	z-index:3;
	width:18.4rem; height:.9rem;
	background:var(--white);
	border-radius:.45rem;
}

/* ============================================================================
   12. POKRETNA TRAKA (5682–5827)
   ========================================================================== */
.marquee{
	height:14.6rem;
	background:var(--blue);
	display:flex;
	align-items:center;
	overflow:hidden;
}
.marquee__track{
	display:flex;
	align-items:center;
	gap:2.6rem;
	white-space:nowrap;
	animation:marquee 42s linear infinite;
	will-change:transform;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__word{
	font-family:var(--f-head);
	font-size:3.5rem; font-weight:700; line-height:1;
	color:var(--white);
}
.marquee__star{ width:3rem; height:3.2rem; color:var(--white); }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ============================================================================
   13. FUTER (5828–6313) + DONJA TRAKA (6314–6389)
   ========================================================================== */
.site-footer{
	background:linear-gradient(180deg, #003282 0%, var(--navy-dark) 100%);
	color:var(--white);
	padding:12.1rem 0 7.4rem;
}
.site-footer__inner{
	width:153.6rem;                       /* PSD: 221 → 1757 */
	max-width:calc(100% - 6.4rem);
	margin-inline:auto;
	display:grid;
	grid-template-columns:33.8rem auto 33.8rem;
	gap:6rem;
	align-items:start;
}
.foot-title{
	font-family:var(--f-head);
	font-size:2rem; font-weight:700; line-height:2.4rem;
}
.foot-text{
	font-size:1.6rem; font-weight:400; line-height:3.2rem;
	margin-top:1.8rem;
}
.foot-text a{ transition:color var(--t-color); }
.foot-text a:hover{ color:#9CC1F5; }
.foot-rule{
	display:block;
	width:33.8rem; max-width:100%;
	height:.5rem;
	background:var(--white);
	border-radius:.25rem;
	margin-top:.4rem;
}
.foot-col--right .foot-rule{ margin-top:1rem; }
.foot-cta{ margin-top:3.9rem; }

.foot-col--mid{ text-align:center; margin-top:-7rem; }   /* logo je na y=5879 */
.foot-logo img{ width:10.7rem; height:15.1rem; margin-inline:auto; transition:transform var(--t-move); }
.foot-logo:hover img{ transform:scale(1.04); }
.foot-about{
	font-size:1.5rem; font-weight:600; line-height:2.4rem;
	margin-top:2.4rem;
	line-height:2.4rem;
	max-width:55.8rem;
	margin-inline:auto;
}
.foot-legal{ margin-top:2.9rem; font-size:1.5rem; font-weight:600; }
.foot-legal a{ text-decoration:underline; text-underline-offset:.4rem; transition:color var(--t-color); }
.foot-legal a:hover{ color:#9CC1F5; }

.foot-social{ display:flex; gap:2.1rem; margin-top:3.3rem; }
.foot-social a{ display:block; transition:transform var(--t-move); }
.foot-social a:hover{ transform:translateY(-.4rem); }
.foot-social .dc-ico{ width:4.9rem; height:4.9rem; color:var(--white); }

.colophon{ background:var(--navy); height:7.5rem; }
.colophon__inner{
	width:var(--container);
	padding:0 .7rem;
	max-width:calc(100% - 6.4rem);
	margin-inline:auto;
	height:100%;
	display:flex; align-items:center; justify-content:space-between;
	color:var(--white);
	font-size:1.5rem; font-weight:400;
}
.colophon a{ text-decoration:underline; text-underline-offset:.4rem; }

/* ============================================================================
   14. OTKRIVANJE PRI SKROLU
   ========================================================================== */
body.dc-js .reveal{
	opacity:0;
	transform:translateX(-4.6rem);
	transition:opacity .75s ease, transform .75s var(--ease);
	transition-delay:var(--delay, 0s);
	will-change:opacity, transform;
}
body.dc-js .reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
	body.dc-js .reveal{ opacity:1; transform:none; transition:none; }
	.marquee__track{ animation:none; }
	*{ transition-duration:.01ms !important; }
}

/* ============================================================================
   15. MOST KA ELEMENTORU
   -----------------------------------------------------------------------------
   Sadržaj se uređuje u Elementoru, ali mere ostaju ovde. Elementor kontejneri i
   widgeti nose iste klase kao ručni markup (`hero`, `h2`, `svc`…), a ova sekcija
   samo skida Elementorove podrazumevane vrednosti i pušta da tipografija sa
   omotača propadne na <h1>/<p> unutra.
   ========================================================================== */

/* Elementor za SVAKI kontejner generiše pravilo specifičnosti 0,3,0
   (`.elementor-15 .elementor-element.elementor-element-xxx{--display:flex}`),
   i to se ispisuje PRE našeg fajla. Zato se ovde ide na istu specifičnost —
   `--display:block` gasi Elementorov flex, a raspored dalje rade obične klase
   (`.about__inner{display:grid}` pobeđuje jer se učitava kasnije). */
.elementor .elementor-element.e-con{
	--display:block;
	--width:auto;               /* 100% bi ignorisalo margine (npr. .testi__grid) */
	--content-width:100%;
	--min-height:auto;
	--padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px;
	--gap:0px; --row-gap:0px; --column-gap:0px;
	--flex-direction:row;       /* Elementor podrazumeva column — mi rasporede pišemo sami */
	--flex-wrap:initial;
	--justify-content:initial;
	--align-items:initial;
	--align-content:initial;
}
.elementor .elementor-element.elementor-widget{ --kit-widget-spacing:0px; }
/* HTML widget ne sme da bude „containing block" — inače se apsolutno pozicionirani
   delovi (značka 20+, pozadina utisaka, elipsa cene) vežu za widget umesto za sekciju. */
.elementor .elementor-element.elementor-widget-html{ position:static; }
/* Elementorov `--content-width` je već 100% gore; `max-width:none` je ovde nekad
   stajalo i gazilo `.container{max-width:calc(100% - 6.4rem)}` — zbog toga je na
   telefonu sadržaj bio širok 1385 px. Ograničava se samo Elementorov omotač. */
.e-con > .e-con-inner{ max-width:none; }
/* widget je običan blok — širinu i poziciju određuje klasa na njemu */
.e-con > .elementor-widget{ max-width:none; width:auto; }

/* Tipografija se postavlja na omotač widgeta i nasleđuje unutra */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor .elementor-widget-container > *{
	font:inherit;
	color:inherit;
	letter-spacing:inherit;
	text-transform:inherit;
	margin:0;
}
.elementor-widget-text-editor .elementor-widget-container > * + *{ margin-top:1.5rem; }

/* Dugme: Elementor pravi <a class="elementor-button"> u omotaču sa našom klasom */
.dc-btn .elementor-button{
	position:relative;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:20.5rem;
	height:6.2rem;
	padding:0 5.6rem 0 0;
	border-radius:var(--radius-pill);
	font-family:var(--f-body);
	font-size:1.6rem;
	font-weight:600;
	line-height:1;
	color:var(--white);
	background:var(--blue);
	overflow:hidden;
	transition:background var(--t-color), transform var(--t-move), box-shadow var(--t-move);
}
.dc-btn .elementor-button-content-wrapper{ position:relative; z-index:2; }
.dc-btn .elementor-button-text{ white-space:nowrap; }

.dc-btn--wide  .elementor-button{ width:25.7rem; }
.dc-btn--navy  .elementor-button{ background:var(--navy); }
.dc-btn--ghost .elementor-button{ background:transparent; box-shadow:inset 0 0 0 .2rem var(--white); }

/* krug sa ikonicom — kao ::after, pa dugme ostaje običan Elementor widget */
.dc-btn .elementor-button::after{
	content:"";
	position:absolute;
	right:.7rem; top:50%;
	transform:translateY(-50%);
	width:4.9rem; height:4.9rem;
	border-radius:50%;
	background:var(--white);
	-webkit-mask:none; mask:none;
	z-index:2;
	transition:transform var(--t-move);
}
.dc-btn .elementor-button::before{
	content:"";
	position:absolute;
	right:1.6rem; top:50%;
	transform:translateY(-50%);
	width:3.1rem; height:3.1rem;
	background:var(--navy);
	-webkit-mask:var(--ico) center/contain no-repeat;
	mask:var(--ico) center/contain no-repeat;
	z-index:3;
	transition:transform var(--t-move);
}
/* ikonica po modifikatoru — `--ico` je maska koju čita ::before */
.dc-btn--plus{    --ico:url('../icons/plus.png'); }
.dc-btn--support{ --ico:url('../icons/customer-support.png'); }
.dc-btn--camera{  --ico:url('../icons/camera.png'); }
.dc-btn--list{    --ico:url('../icons/order-list.png'); }

/* „plus" je gotov krug — nema belu podlogu ispod */
.dc-btn--plus .elementor-button::after{ background:none; }
.dc-btn--plus .elementor-button::before{
	right:.7rem;
	width:4.5rem; height:4.5rem;
	background:var(--white);
}
.dc-btn .elementor-button:hover{ transform:translateY(-.3rem); }
.dc-btn--plus .elementor-button:hover::before{ transform:translateY(-50%) rotate(90deg); }
.dc-btn:not(.dc-btn--plus) .elementor-button:hover::after{ transform:translateY(-50%) scale(1.06); }
.dc-btn--blue  .elementor-button:hover{ background:#2f6cc4; box-shadow:0 1.4rem 2.8rem -1rem rgba(41,98,180,.55); }
.dc-btn--navy  .elementor-button:hover{ background:#00448f; box-shadow:0 1.4rem 2.8rem -1rem rgba(0,58,141,.55); }
.dc-btn--ghost .elementor-button:hover{ background:rgba(255,255,255,.12); }

/* ============================================================================
   16. RESPONZIVNO
   -----------------------------------------------------------------------------
   PSD NEMA mobilni artboard — sve ispod je moja procena, ne dizajn.
   IDE POSLE MOSTA: Elementor ima `.e-con-full.e-flex{flex-direction:var(--flex-direction)}`
   specifičnosti 0,2,0, pa se smer menja preko `--flex-direction`, a to mora da dođe
   posle bridž pravila iste specifičnosti (0,3,0).
   ========================================================================== */
@media (max-width: 1400px){
	.container, .topbar__inner, .navbar__inner, .colophon__inner, .site-footer__inner{
		max-width:calc(100% - 4.8rem);
	}
	/* kartice utisaka u PSD-u nisu centrirane (99 levo, 54 desno) — ispod pune
	   širine to nema smisla, pa se poravnavaju sa ostatkom sadržaja */
	.testi__grid{ margin-inline:0; padding-inline:4.8rem; }
}

/* ---------------------------------------------------- tablet: 1024 i naniže */
@media (max-width: 1024px){
	html{ font-size:10px; }
	.container, .topbar__inner, .navbar__inner, .colophon__inner, .site-footer__inner{
		width:100%;
		max-width:none;
		padding-inline:2.4rem;
	}

	/* ---- zaglavlje ---- */
	.topbar{ height:auto; padding:1rem 0; }
	.topbar__inner{ padding-left:0; display:block; }
	.topbar__ticker{ height:auto; min-height:2.2rem; }
	/* na telefonu je flex pravio kolonu od svake reči — ovde je to običan tekst */
	.ticker__item{
		position:relative;
		display:block;
		white-space:normal;
		text-align:center;
		font-size:1.3rem; line-height:1.9rem;
	}
	.ticker__item:not(.is-active){ position:absolute; inset:0; }
	.ticker__pipe{ margin-inline:.5rem; }
	.ticker__sep{ display:none; }
	.topbar__cta{ display:none; }

	.navbar{ height:7.2rem; }
	.navbar__inner{ align-items:center; }
	.brand{
		position:static;
		width:auto; height:7.2rem;
		background:none;
		border-radius:0;
		place-items:center start;
	}
	.brand__logo{ width:4.4rem; height:6.2rem; }
	.nav, .lang{ display:none; }
	.burger{
		display:flex; flex-direction:column; justify-content:center; gap:.6rem;
		width:4.6rem; height:4.6rem; margin-left:auto;
	}
	.burger span{ display:block; height:.3rem; background:var(--navy); border-radius:.2rem;
		transition:transform .3s ease, opacity .3s ease; }
	.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(.9rem) rotate(45deg); }
	.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
	.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-.9rem) rotate(-45deg); }

	.mobile-menu{ background:var(--white); padding:1.6rem 2.4rem 2.8rem; border-bottom:1px solid #E4E8EC; }
	.mobile-menu .nav__list{ display:block; }
	.mobile-menu .nav__list > li > a{ display:block; padding:1.2rem 0; line-height:1.4; font-size:1.8rem; }
	.mobile-menu .nav__list > li > a::after{ display:none; }
	.mobile-menu__cta{ margin-top:1.6rem; }

	/* ---- hero ---- */
	.hero{ height:auto; padding-bottom:5.6rem; }
	.hero__media{ position:relative; width:100%; height:32rem; }
	.hero__inner{ height:auto; }
	.hero__copy{ padding-top:4rem; }
	.hero__title{ font-size:4rem; line-height:5rem; margin-top:2.4rem; }
	.hero .btnrow{ margin-top:3.2rem; }

	/* ---- info traka ---- */
	.infobar{ height:auto; padding:3.2rem 0; }
	.infobar__inner{ grid-template-columns:1fr; gap:2.4rem; }
	.infobar__item,
	.infobar__item:nth-child(2),
	.infobar__item:nth-child(3){ padding-left:0; height:auto; align-items:flex-start; gap:1.6rem; }
	.infobar__ico{ margin-top:.2rem; }
	.infobar__text{ flex:1 1 auto; }
	.infobar__item + .infobar__item::before{ display:none; }

	/* ---- dve kolone -> jedna ---- */
	.about__inner, .ambient__inner, .promo__inner{ grid-template-columns:1fr; gap:4.8rem; }
	.about{ padding:6.4rem 0 8rem; }
	.about__media img{ width:100%; height:auto; }
	.badge{ left:auto; right:2.4rem; top:auto; bottom:-3.2rem; }
	.about__copy .h2{ margin-top:4.8rem; }

	.rule, .rule--wide, .foot-rule{ width:100%; }
	.checklist{ grid-template-columns:1fr; margin-top:3.2rem; }
	.about .btnrow{ margin-top:4rem; }

	/* ---- usluge ---- */
	.services{ padding:6.4rem 0 8rem; }
	.services .svc-grid{ margin-top:8rem; }
	.svc-grid{ flex-wrap:wrap; gap:8rem 2.4rem; justify-content:flex-start; }
	.svc{ width:calc(50% - 1.2rem); min-height:0; padding-bottom:3.2rem; display:flex; }
	.elementor .elementor-element.svc{ --flex-direction:column; }
	/* dugme na desktopu visi ispod kartice; na telefonu ide u tok da ne gazi sledeću */
	.svc__btn{ position:static; margin-top:2.4rem; align-self:flex-start; }

	/* ---- ambijent ---- */
	.ambient{ padding:6.4rem 0 8rem; }
	.feat-grid{ grid-template-columns:1fr; gap:3.2rem; }
	.gallery{ height:auto; margin-top:0; display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; }
	.gallery__item{ position:static; width:auto !important; height:22rem !important; }
	.gallery__btn{ position:static; grid-column:1 / -1; justify-self:start; }

	/* ---- utisci ---- */
	.testi{ padding:6.4rem 0 6.4rem; }
	.testi__grid{ flex-wrap:wrap; margin:4.8rem 0 0; padding-inline:2.4rem; }
	.testi-card{ width:calc(50% - 2.4rem); min-height:0; padding:3.2rem 2.4rem 3.2rem; }
	.testi-card__name{ margin-top:2.4rem; }

	/* ---- akcije ---- */
	.promo{ padding:6.4rem 0 8rem; }
	.promo .section-lead{ margin-bottom:0; }
	.promo__inner{ margin-top:4.8rem; }
	.promo__copy{ padding-top:0; }
	.promo__cards{ flex-wrap:wrap; justify-content:flex-start; gap:2.4rem; }
	.promo-card{ width:calc(50% - 1.2rem); height:40rem; }
	/* elipsa i cena su u PSD-u vezane za karticu od 323 px — ovde idu uz desnu ivicu */
	.promo-card__badge{ left:auto; right:-6rem; top:-9rem; width:26rem; height:18rem; }
	.promo-card__now, .promo-card__old{ left:auto; right:3.2rem; transform:none; }
	.promo-card__img--png{ top:7rem; width:70%; }
	.promo-card__title{ bottom:6.4rem; }
	.promo-card__rule{ bottom:4rem; }

	/* ---- marquee i futer ---- */
	.marquee{ height:9.6rem; }
	.marquee__word{ font-size:2.4rem; }
	.marquee__star{ width:2rem; height:2.2rem; }

	.site-footer{ padding:6.4rem 0 6.4rem; }
	.site-footer__inner{ grid-template-columns:1fr; gap:4rem; text-align:center; }
	.foot-col--mid{ margin-top:0; order:-1; }
	.foot-social{ justify-content:center; }
	.foot-rule{ margin-inline:auto; }
	.foot-cta{ margin-top:2.4rem; }
	.foot-about{ margin-top:2.4rem; }
	.colophon{ height:auto; padding:1.6rem 0; }
	.colophon__inner{ flex-direction:column; gap:.8rem; text-align:center; }

	/* dugmad se prelamaju umesto da cure van ekrana */
	.btnrow{ flex-wrap:wrap; gap:1.6rem; }
}

/* ------------------------------------------------------ telefon: 700 i niže */
@media (max-width: 700px){
	html{ font-size:10px; }
	.container, .topbar__inner, .navbar__inner, .colophon__inner, .site-footer__inner{
		padding-inline:2rem;
	}

	.h2{ font-size:3rem; line-height:3.8rem; }
	.section-lead{ font-size:1.6rem; line-height:2.6rem; }
	body{ font-size:1.6rem; line-height:2.6rem; }

	.topbar__inner{ padding-inline:2rem; }
	.hero__title{ font-size:3.2rem; line-height:4.2rem; }
	.hero__eyebrow{ font-size:1.4rem; }
	.hero__media{ height:24rem; }

	.svc{ width:100%; }
	.svc-grid{ gap:7.2rem 0; }
	.testi__grid{ padding-inline:2rem; }
	.testi-card{ width:100%; }

	.promo-card{ width:100%; height:38rem; }
	.promo-card__badge{ right:-8rem; }
	.promo-card__img--png{ width:55%; left:2rem; }
	.promo-card__img--foto{ object-position:center 20%; }

	.gallery{ grid-template-columns:1fr; }
	.gallery__item{ height:24rem !important; }

	.badge{ right:1.6rem; bottom:-2.4rem; transform:scale(.85); transform-origin:bottom right; }
	.marquee__word{ font-size:2rem; }
	.marquee{ height:7.2rem; }

	body.dc-js .reveal{ transform:translateY(2.4rem); }
}