@charset "UTF-8";
/* ==========================================================================
   Direkt Agencija — komponente
   Bez frameworka, bez build koraka. Sve vrijednosti dolaze iz tokens.css.
   Redoslijed: fontovi → reset → tipografija → layout → komponente → utility
   ========================================================================== */

/* --- Fontovi -------------------------------------------------------------
   Archivo i Instrument Sans su otvorene licence (SIL OFL) i hostaju se
   lokalno. Datoteke .woff2 stavite u /fonts (vidi README → placeholderi). */
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-variable.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-variable.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--boja-bg-base);
  color: var(--boja-tekst);
  font-family: var(--font-tekst);
  font-size: var(--tf-tekst);
  line-height: var(--lh-tekst);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: var(--boja-link); text-decoration: none; }
a:hover { color: var(--boja-link-hover); }
:focus-visible {
  outline: var(--rub-deblji) solid var(--boja-fokus);
  outline-offset: 3px;
}
.vizualno-skriveno {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.preskoci-na-sadrzaj {
  position: absolute; left: var(--r-4); top: -60px; z-index: var(--z-izbornik);
  padding: var(--r-3) var(--r-4); background: var(--boja-akcent);
  color: var(--boja-akcent-kontrast); font-weight: var(--tez-semibold);
  transition: top var(--trajanje) var(--easing);
}
.preskoci-na-sadrzaj:focus { top: var(--r-4); }

/* --- Tipografija po ulogama ------------------------------------------------
   Naslovni font (Archivo) koriste i elementi koji nisu h1–h4: .hero-poruka,
   .stat-broj, .slider-naslov, .broj-koraka, .cijena. Popis je u README-u.  */
h1, h2, h3, h4, .hero-naslov, .hero-poruka, .stat-broj, .slider-naslov,
.broj-koraka, .cijena, .logo-tekst {
  font-family: var(--font-naslov);
  margin: 0;
}
h1, .hero-naslov {
  font-weight: var(--tez-black);
  font-stretch: 112%;
  font-size: var(--tf-h1);
  line-height: 0.94;
  letter-spacing: var(--ls-hero);
}
.hero-naslov--veliki { font-size: var(--tf-hero); line-height: var(--lh-hero); }
/* Hero poruke koje nisu h1 (druga i treća poruka u hero bloku / slajdu) */
.hero-poruka {
  display: block;
  font-weight: var(--tez-black);
  font-stretch: 112%;
  font-size: var(--tf-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-hero);
}
h2 {
  font-weight: var(--tez-black);
  font-stretch: 112%;
  font-size: var(--tf-h2);
  line-height: 0.96;
  letter-spacing: var(--ls-naslov);
}
h3, .slider-naslov {
  font-weight: var(--tez-bold);
  font-stretch: 106%;
  font-size: var(--tf-h3);
  line-height: var(--lh-podnaslov);
  letter-spacing: var(--ls-podnaslov);
}
h4 {
  font-weight: var(--tez-bold);
  font-stretch: 104%;
  font-size: var(--tf-h4);
  line-height: 1.2;
  letter-spacing: var(--ls-podnaslov);
}
/* Naglasak u naslovu — najviše jedna riječ po naslovu. */
h1 em, h2 em, .hero-poruka em { font-style: normal; color: var(--boja-akcent); }
.na-svijetlom em { color: var(--boja-link); }

p { margin: 0 0 var(--r-4); }
p:last-child { margin-bottom: 0; }
.uvod {
  font-size: var(--tf-uvod);
  line-height: 1.55;
  color: var(--boja-tekst-prigusen);
  max-width: 52ch;
}
.tekst-prigusen { color: var(--boja-tekst-prigusen); }
.meta { font-size: var(--tf-meta); color: var(--boja-tekst-slab); letter-spacing: 0.03em; }

/* Oznake (eyebrow) NAMJERNO koriste tekstualni font, ne Archivo. */
.oznaka {
  display: flex; align-items: center; gap: var(--r-3);
  margin: 0 0 var(--r-5);
  font-family: var(--font-tekst);
  font-size: var(--tf-oznaka);
  font-weight: var(--tez-medium);
  letter-spacing: var(--ls-oznaka);
  text-transform: uppercase;
  color: var(--boja-link);
}
.oznaka::before {
  content: ""; display: block; width: 30px; height: 6px; background: var(--boja-akcent);
}
.oznaka--bez-crte::before { display: none; }
.oznaka--na-tamnom { color: var(--boja-akcent); }

/* --- Layout ---------------------------------------------------------------- */
.kontejner {
  width: 100%;
  max-width: var(--kontejner-max);
  margin-inline: auto;
  padding-inline: var(--kontejner-padding);
}
.sekcija { padding-block: var(--sekcija-y); }
.sekcija--velika { padding-block: var(--sekcija-y-velika); }
.sekcija--alt { background: var(--boja-bg-alt); }
.sekcija--tamna { background: var(--boja-bg-dark); color: var(--boja-tekst-na-tamnom); }
.sekcija--tamna h2, .sekcija--tamna h3, .sekcija--tamna h4 { color: var(--boja-tekst-na-tamnom); }
.sekcija--tamna p { color: var(--boja-tekst-na-tamnom-prigusen); }
.sekcija--zuta { background: var(--boja-bg-accent); }
.sekcija--linija-gore { border-top: var(--rub-tanki) solid var(--boja-rub); }

.mreza { display: grid; gap: var(--r-6); }
.mreza--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mreza--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mreza--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mreza--tekst-slika { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
/* Kad su oba stupca tekst (kontakt), poravnaj ih po vrhu, ne po sredini. */
.mreza--tekst-slika.mreza--vrh { align-items: start; }
.mreza--clanak { grid-template-columns: minmax(0, 1fr); justify-items: start; }

.zaglavlje-sekcije {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--r-5); margin-bottom: var(--r-7);
}
.zaglavlje-sekcije h2 { max-width: 18ch; }

/* --- Gumbi ------------------------------------------------------------------ */
.gumb {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--r-2);
  min-height: 44px;
  padding: var(--r-3) var(--r-5);
  border: var(--rub-tanki) solid transparent;
  border-radius: var(--radius-gumb);
  font-size: 15.5px; font-weight: var(--tez-semibold); line-height: 1;
  cursor: pointer;
  transition: background var(--trajanje) var(--easing),
              color var(--trajanje) var(--easing),
              transform var(--trajanje) var(--easing),
              box-shadow var(--trajanje) var(--easing);
}
.gumb--primarni { background: var(--boja-akcent); color: var(--boja-akcent-kontrast); }
.gumb--primarni:hover { background: var(--boja-akcent-hover); color: var(--boja-akcent-kontrast); transform: translateY(-2px); box-shadow: var(--sjena-akcent); }
.gumb--primarni:active { transform: translateY(0); box-shadow: none; background: var(--boja-akcent); }
.gumb--sekundarni { background: transparent; border-color: var(--boja-rub-jaci); color: var(--boja-tekst); }
.gumb--sekundarni:hover { background: var(--boja-tekst); color: var(--boja-tekst-na-tamnom); }
.gumb--sekundarni:active { background: var(--boja-bg-dark-2); color: var(--boja-tekst-na-tamnom); }
.gumb--tekst {
  min-height: 0; padding: 0 0 6px; border-radius: 0;
  border-bottom: var(--rub-tanki) solid var(--boja-rub-jaci);
  background: none; color: var(--boja-link); font-size: 14px;
}
.gumb--tekst:hover { gap: var(--r-4); color: var(--boja-tekst); }
.gumb--na-tamnom { border-color: var(--boja-rub-na-tamnom); color: var(--boja-akcent); }
.gumb:disabled, .gumb[aria-disabled="true"] {
  opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none;
}

/* --- Header i navigacija ----------------------------------------------------- */
.zaglavlje {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(251, 250, 247, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: var(--rub-tanki) solid var(--boja-rub);
  transition: box-shadow var(--trajanje) var(--easing), background var(--trajanje) var(--easing);
}
/* Stanje nakon skrolanja — dodaje ga skripta (class="je-skrolan") */
.zaglavlje.je-skrolan { box-shadow: var(--sjena-mala); background: rgba(251, 250, 247, 0.99); }
.zaglavlje__unutar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--r-6);
  padding-block: var(--r-3);
}
.logo img { height: 40px; width: auto; }
.navigacija { display: flex; align-items: center; gap: var(--r-6); }
.nav-link {
  display: flex; align-items: center; min-height: 44px;
  font-size: 15.5px; font-weight: var(--tez-medium); color: var(--boja-link);
  opacity: 0.78; transition: opacity var(--trajanje) var(--easing);
}
.nav-link:hover, .nav-link:focus-visible { opacity: 1; }
.nav-link[aria-current="page"] {
  opacity: 1; border-bottom: var(--rub-deblji) solid var(--boja-akcent);
}
.padajuci { position: relative; display: flex; align-items: center; }
.padajuci__gumb {
  display: flex; align-items: center; gap: 7px; min-height: 44px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 15.5px; font-weight: var(--tez-medium); color: var(--boja-link); opacity: 0.78;
}
.padajuci__gumb:hover { opacity: 1; }
.padajuci__strelica { font-size: 11px; transition: transform var(--trajanje-sporo) var(--easing); }
.padajuci__gumb[aria-expanded="true"] .padajuci__strelica { transform: rotate(180deg); }
.padajuci__panel {
  position: absolute; top: calc(100% + 12px); left: -18px; min-width: 288px;
  padding: var(--r-2); background: var(--boja-bg-dark);
  border: var(--rub-tanki) solid var(--boja-rub-na-tamnom);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--trajanje) var(--easing), transform var(--trajanje-sporo) var(--easing), visibility var(--trajanje);
}
.padajuci__gumb[aria-expanded="true"] + .padajuci__panel,
.padajuci:hover .padajuci__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.padajuci__panel a {
  display: block; padding: var(--r-3) var(--r-4);
  font-size: var(--tf-tekst); font-weight: var(--tez-medium);
  color: var(--boja-tekst-na-tamnom-prigusen);
  transition: background var(--trajanje) var(--easing), color var(--trajanje) var(--easing);
}
.padajuci__panel a:hover { background: rgba(255, 255, 255, 0.07); color: var(--boja-akcent); }

/* Mobilni izbornik: gumb vidljiv < 861px, panel klizi odozgo (translateY + opacity). */
.izbornik-gumb {
  display: none; align-items: center; gap: var(--r-2);
  min-height: 44px; padding: var(--r-2) var(--r-3);
  border: var(--rub-tanki) solid var(--boja-rub-jaci); background: none;
  border-radius: var(--radius-gumb); cursor: pointer;
  font-size: 14px; font-weight: var(--tez-semibold);
}
.izbornik-gumb__crte { display: grid; gap: 4px; width: 18px; }
.izbornik-gumb__crte span { display: block; height: 2px; background: var(--boja-tekst); }
.mobilni-izbornik {
  display: none; border-top: var(--rub-tanki) solid var(--boja-rub);
  background: var(--boja-bg-base);
}
.mobilni-izbornik[data-otvoren="true"] { display: block; }
.mobilni-izbornik ul { list-style: none; margin: 0; padding: var(--r-4) 0 var(--r-5); }
.mobilni-izbornik a {
  display: flex; align-items: center; min-height: 48px;
  font-size: 17px; font-weight: var(--tez-medium); color: var(--boja-tekst);
  border-bottom: var(--rub-tanki) solid var(--boja-rub);
}
.mobilni-izbornik .gumb { margin-top: var(--r-4); width: 100%; }

/* --- Hero -------------------------------------------------------------------- */
.hero { position: relative; background: var(--boja-bg-dark); color: var(--boja-tekst-na-tamnom); overflow: hidden; }
.hero__slika { position: absolute; inset: 0; }
.hero__slika img { width: 100%; height: 100%; object-fit: cover; opacity: 0.42; }
.hero__sadrzaj { position: relative; padding-block: var(--r-10) var(--r-9); }
.hero__naslov { color: var(--boja-tekst-na-tamnom); max-width: 20ch; }
.hero__uvod { margin-top: var(--r-5); max-width: 46ch; color: var(--boja-tekst-na-tamnom-prigusen); }
.hero__akcije { display: flex; flex-wrap: wrap; gap: var(--r-4); margin-top: var(--r-7); }
.hero--svijetli { background: var(--boja-bg-base); color: var(--boja-tekst); }
.hero--svijetli .hero__naslov { color: var(--boja-tekst); }
.hero--svijetli .hero__uvod { color: var(--boja-tekst-prigusen); }

/* --- Kartice ------------------------------------------------------------------ */
.kartica { display: block; background: var(--boja-bg-surface); border: var(--rub-tanki) solid var(--boja-rub); }

/* Kartica usluge — redak s brojem, naslovom i opisom */
.kartica-usluga {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: var(--r-6); padding: var(--r-6) 0;
  border-bottom: var(--rub-tanki) solid var(--boja-rub);
  transition: background var(--trajanje) var(--easing), padding-inline var(--trajanje) var(--easing);
}
.kartica-usluga:hover { background: var(--boja-bg-alt); padding-inline: var(--r-4); }
.kartica-usluga__broj {
  font-family: var(--font-naslov); font-weight: var(--tez-semibold); font-stretch: 84%;
  font-size: 12px; letter-spacing: 0.14em; color: var(--boja-tekst-slab);
}
.kartica-usluga__naslov { color: var(--boja-link); }
.kartica-usluga__opis { max-width: 42ch; font-size: 14.5px; color: var(--boja-tekst-prigusen); }
.kartica-usluga__strelica { font-family: var(--font-naslov); font-size: 20px; color: var(--boja-link); }

/* Kartica blog objave */
.kartica-objava { display: block; }
.kartica-objava__slika { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--boja-bg-alt); }
.kartica-objava__slika img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--trajanje-sporo) var(--easing);
}
.kartica-objava:hover .kartica-objava__slika img { transform: scale(1.04); }
.kartica-objava__slika--logo { background: var(--boja-bg-surface); border: var(--rub-tanki) solid var(--boja-rub); }
.kartica-objava__slika--logo img { object-fit: contain; padding: var(--r-6); }
.kartica-objava__kategorija {
  display: block; margin-top: var(--r-4);
  font-family: var(--font-tekst); font-size: 10.5px; font-weight: var(--tez-medium);
  letter-spacing: var(--ls-oznaka); text-transform: uppercase; color: var(--boja-tekst-slab);
}
.kartica-objava__naslov { margin-top: var(--r-3); }
.kartica-objava:hover .kartica-objava__naslov { color: var(--boja-link); }

/* Kartica reference / recenzije */
.kartica-recenzija { padding: var(--r-6); background: var(--boja-bg-surface); border: var(--rub-tanki) solid var(--boja-rub); }
.kartica-recenzija blockquote { margin: 0; font-family: var(--font-naslov); font-weight: var(--tez-semibold); font-stretch: 104%; font-size: var(--tf-h3); line-height: var(--lh-podnaslov); letter-spacing: var(--ls-podnaslov); color: var(--boja-link); }
.kartica-recenzija figcaption { margin-top: var(--r-5); font-size: var(--tf-sitno); color: var(--boja-tekst-prigusen); }

/* Statistika */
.stat { padding: var(--r-6) var(--r-5); background: var(--boja-bg-surface); border: var(--rub-tanki) solid var(--boja-rub); }
.stat-broj { font-weight: var(--tez-black); font-stretch: 118%; font-size: var(--tf-stat); line-height: 0.9; letter-spacing: -0.045em; color: var(--boja-link); }
.stat-broj span { color: var(--boja-akcent); }
.stat p:not(.stat-broj) { margin-top: var(--r-3); font-size: var(--tf-meta); color: var(--boja-tekst-prigusen); }

/* Koraci procesa */
.korak { padding: var(--r-6) var(--r-5) var(--r-7); background: var(--boja-bg-dark-2); }
.broj-koraka { display: block; margin-bottom: var(--r-7); font-weight: var(--tez-black); font-stretch: 118%; font-size: var(--tf-stat); line-height: 1; letter-spacing: -0.04em; color: var(--boja-akcent); }

/* --- Forma --------------------------------------------------------------------- */
.forma { display: grid; gap: var(--r-5); max-width: 560px; }
.polje { display: grid; gap: var(--r-2); }
.polje__oznaka { font-size: var(--tf-meta); font-weight: var(--tez-medium); letter-spacing: 0.04em; text-transform: uppercase; color: var(--boja-tekst-prigusen); }
.unos, .textarea, .odabir {
  width: 100%; min-height: 48px; padding: var(--r-3) var(--r-4);
  background: var(--boja-bg-surface);
  border: var(--rub-tanki) solid var(--boja-rub-jaci);
  border-radius: var(--radius-polje);
  font-family: var(--font-tekst); font-size: 15.5px; color: var(--boja-tekst);
  transition: border-color var(--trajanje) var(--easing), box-shadow var(--trajanje) var(--easing);
}
.textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
.odabir { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--boja-link) 50%), linear-gradient(135deg, var(--boja-link) 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.unos:focus, .textarea:focus, .odabir:focus { outline: none; border-color: var(--boja-fokus); box-shadow: 0 0 0 3px rgba(27, 60, 86, 0.16); }
.unos::placeholder, .textarea::placeholder { color: var(--boja-tekst-slab); }
.polje--greska .unos, .polje--greska .textarea, .polje--greska .odabir { border-color: var(--boja-greska); background: var(--boja-greska-bg); }
.polje--uspjeh .unos, .polje--uspjeh .textarea, .polje--uspjeh .odabir { border-color: var(--boja-uspjeh); background: var(--boja-uspjeh-bg); }
.polje__poruka { font-size: var(--tf-meta); }
.polje--greska .polje__poruka { color: var(--boja-greska); }
.polje--uspjeh .polje__poruka { color: var(--boja-uspjeh); }
.kvacica { display: flex; align-items: flex-start; gap: var(--r-3); font-size: var(--tf-sitno); color: var(--boja-tekst-prigusen); }
.kvacica input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--boja-link); }
.forma__poruka { padding: var(--r-4); font-size: var(--tf-sitno); border: var(--rub-tanki) solid; }
.forma__poruka--uspjeh { color: var(--boja-uspjeh); border-color: var(--boja-uspjeh); background: var(--boja-uspjeh-bg); }
.forma__poruka--greska { color: var(--boja-greska); border-color: var(--boja-greska); background: var(--boja-greska-bg); }

/* --- Akordeon / FAQ -------------------------------------------------------------- */
.akordeon { border-top: var(--rub-tanki) solid var(--boja-rub); }
.akordeon__stavka { border-bottom: var(--rub-tanki) solid var(--boja-rub); }
.akordeon__gumb {
  display: flex; align-items: center; justify-content: space-between; gap: var(--r-5);
  width: 100%; padding: var(--r-5) 0; border: 0; background: none; cursor: pointer;
  text-align: left;
  font-family: var(--font-naslov); font-weight: var(--tez-bold); font-stretch: 104%;
  font-size: var(--tf-h4); letter-spacing: var(--ls-podnaslov); color: var(--boja-tekst);
}
.akordeon__ikona { position: relative; flex: none; width: 16px; height: 16px; }
.akordeon__ikona::before, .akordeon__ikona::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 2px; background: var(--boja-link);
  transition: transform var(--trajanje) var(--easing);
}
.akordeon__ikona::after { transform: rotate(90deg); }
.akordeon__gumb[aria-expanded="true"] .akordeon__ikona::after { transform: rotate(0deg); }
.akordeon__panel { padding: 0 0 var(--r-5); max-width: 68ch; color: var(--boja-tekst-prigusen); }
.akordeon__panel[hidden] { display: none; }

/* --- Cjenik ----------------------------------------------------------------------- */
.cjenik { width: 100%; border-collapse: collapse; text-align: left; }
.cjenik caption { margin-bottom: var(--r-4); font-size: var(--tf-meta); color: var(--boja-tekst-prigusen); text-align: left; }
.cjenik th, .cjenik td { padding: var(--r-4) var(--r-4) var(--r-4) 0; border-bottom: var(--rub-tanki) solid var(--boja-rub); vertical-align: top; }
.cjenik thead th {
  font-family: var(--font-tekst); font-size: 10.5px; font-weight: var(--tez-medium);
  letter-spacing: var(--ls-oznaka); text-transform: uppercase; color: var(--boja-tekst-slab);
}
.cjenik tbody th { font-family: var(--font-naslov); font-weight: var(--tez-bold); font-stretch: 104%; font-size: var(--tf-h4); }
.cjenik__opis { font-size: var(--tf-sitno); color: var(--boja-tekst-prigusen); }
/* Kategorije u cjeniku NAMJERNO koriste tekstualni font (nisu naslovi). */
.cjenik__kategorija { font-family: var(--font-tekst); font-size: var(--tf-meta); font-weight: var(--tez-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--boja-link); }
.cijena { font-weight: var(--tez-black); font-stretch: 112%; font-size: var(--tf-h3); letter-spacing: -0.03em; color: var(--boja-tekst); white-space: nowrap; }
.cijena small { display: block; font-family: var(--font-tekst); font-size: var(--tf-meta); font-weight: var(--tez-medium); letter-spacing: 0; color: var(--boja-tekst-slab); }

/* --- Slider / galerija ------------------------------------------------------------- */
.slider { position: relative; }
.slider__traka {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr);
  gap: var(--r-5); overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: var(--r-3);
}
.slider__traka::-webkit-scrollbar { display: none; }
.slider__stavka { scroll-snap-align: start; }
.slider__kontrole { display: flex; gap: var(--r-3); margin-top: var(--r-5); }
.slider__gumb {
  width: 44px; height: 44px; border: var(--rub-tanki) solid var(--boja-rub-jaci);
  border-radius: var(--radius-gumb); background: none; cursor: pointer;
  font-family: var(--font-naslov); font-size: 16px;
}
.slider__gumb:hover { background: var(--boja-tekst); color: var(--boja-tekst-na-tamnom); }

/* --- Blog objava -------------------------------------------------------------------- */
.putanja { display: flex; flex-wrap: wrap; gap: var(--r-2); margin-bottom: var(--r-6); font-size: 11.5px; letter-spacing: 0.06em; color: var(--boja-tekst-slab); }
.putanja a { color: var(--boja-tekst-slab); }
.putanja a:hover { color: var(--boja-link); }
.clanak { max-width: var(--clanak-max); }
.clanak p { font-size: var(--tf-tekst-veliki); line-height: var(--lh-tekst-clanak); color: rgba(14, 26, 36, 0.82); margin-bottom: var(--r-5); }
.clanak h2 { margin: var(--r-6) 0 var(--r-4); font-size: var(--tf-h3); color: var(--boja-link); }
.clanak strong { font-weight: var(--tez-semibold); color: var(--boja-tekst); }
.clanak a { border-bottom: var(--rub-deblji) solid var(--boja-akcent); }
.clanak figure { margin: var(--r-6) 0; }
.clanak figcaption { margin-top: var(--r-3); font-size: var(--tf-meta); color: var(--boja-tekst-slab); }
.lista-znak { list-style: none; margin: 0 0 var(--r-5); padding: 0; border-top: var(--rub-tanki) solid var(--boja-rub); }
.lista-znak li {
  position: relative; padding: var(--r-4) 0 var(--r-4) var(--r-6);
  border-bottom: var(--rub-tanki) solid var(--boja-rub);
  font-size: var(--tf-tekst-veliki); line-height: var(--lh-tekst); color: var(--boja-tekst-prigusen);
}
.lista-znak li::before {
  content: "\2733"; position: absolute; left: 0; top: var(--r-4);
  font-family: var(--font-naslov); font-weight: var(--tez-bold); color: var(--boja-akcent);
}

/* --- Pravna stranica ------------------------------------------------------------------ */
.pravni-tekst { max-width: var(--clanak-max); }
.pravni-tekst h2 { margin: var(--r-7) 0 var(--r-4); font-size: var(--tf-h3); color: var(--boja-link); }
.pravni-tekst h3 { margin: var(--r-5) 0 var(--r-3); font-size: var(--tf-h4); }
.pravni-tekst ul { margin: 0 0 var(--r-5); padding-left: var(--r-5); color: var(--boja-tekst-prigusen); }
.pravni-tekst li { margin-bottom: var(--r-2); }

/* --- Footer ------------------------------------------------------------------------------ */
.podnozje { padding-block: var(--r-8) var(--r-6); background: var(--boja-bg-dark); color: var(--boja-tekst-na-tamnom); }
.podnozje__mreza {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--r-6);
  padding-bottom: var(--r-7); border-bottom: var(--rub-tanki) solid var(--boja-rub-na-tamnom);
}
.podnozje__logo img { height: 40px; width: auto; filter: brightness(0) invert(1); }
.podnozje p:not(.podnozje__naslov) { color: var(--boja-tekst-na-tamnom-prigusen); font-size: var(--tf-sitno); }
/* Naslovi stupaca u footeru NAMJERNO koriste tekstualni font. */
.podnozje__naslov {
  margin: 0 0 var(--r-4); font-family: var(--font-tekst);
  font-size: 10.5px; font-weight: var(--tez-medium);
  letter-spacing: var(--ls-oznaka); text-transform: uppercase; color: rgba(255, 255, 255, 0.35);
}
.podnozje ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r-3); }
.podnozje a { color: rgba(255, 255, 255, 0.72); font-size: var(--tf-sitno); }
.podnozje a:hover { color: var(--boja-akcent); }
.podnozje__dno { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--r-4); padding-top: var(--r-5); }
.podnozje__dno p { font-size: var(--tf-meta); color: rgba(255, 255, 255, 0.35); margin: 0; }

/* --- Breakpointi --------------------------------------------------------------------------
   1200px  – kontejner dobiva manji padding
   1024px  – 4-stupčane mreže postaju 2-stupčane
   861/860 – prijelom heroja i glavnog layouta (desktop ⇄ mobitel)
   640px   – 2-stupčane mreže postaju 1-stupčane, cjenik prelazi u kartice
   -------------------------------------------------------------------------------------------- */
@media (min-width: 861px) {
  .hero:not(.hero--svijetli) .hero__sadrzaj { min-height: 72vh; display: flex; flex-direction: column; justify-content: flex-end; }
  .hero--svijetli .hero__sadrzaj { padding-block: var(--r-8) var(--r-7); }
  .hero__slika--mobil { display: none; }
}

@media (max-width: 1200px) {
  :root { --kontejner-padding: var(--r-7); }
}

@media (max-width: 1024px) {
  .mreza--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .podnozje__mreza { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .navigacija { display: none; }
  .izbornik-gumb { display: inline-flex; }
  .hero__slika--desktop { display: none; }
  .hero__sadrzaj { padding-block: var(--r-8) var(--r-7); }
  .mreza--3, .mreza--tekst-slika { grid-template-columns: minmax(0, 1fr); }
  .kartica-usluga { grid-template-columns: auto minmax(0, 1fr); gap: var(--r-3) var(--r-4); }
  .kartica-usluga__strelica { display: none; }
  .zaglavlje-sekcije { margin-bottom: var(--r-6); }
}

@media (max-width: 640px) {
  .mreza--2, .mreza--4 { grid-template-columns: minmax(0, 1fr); }
  .cjenik thead { display: none; }
  .cjenik tr { display: grid; gap: var(--r-2); padding: var(--r-5) 0; border-bottom: var(--rub-tanki) solid var(--boja-rub); }
  .cjenik th, .cjenik td { padding: 0; border: 0; }
  .podnozje__mreza { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --- Samo za components.html (pregled komponenti) -------------------------------- */
.primjer { margin: var(--r-4) 0 var(--r-7); border: var(--rub-tanki) dashed var(--boja-rub-jaci); }
.primjer--usko { max-width: 480px; }
.primjer--mobilni { max-width: 390px; }
.primjer .zaglavlje { position: static; }
.izbornik-gumb--uvijek { display: inline-flex; }
.pregled hr { margin: var(--r-8) 0; border: 0; border-top: var(--rub-tanki) solid var(--boja-rub); }
.pregled h2 { margin-top: var(--r-8); }
.pregled h3 { margin-top: var(--r-6); margin-bottom: var(--r-3); }
.pregled .mreza, .pregled .forma, .pregled .akordeon, .pregled .cjenik, .pregled .slider, .pregled .kartica-recenzija { margin-bottom: var(--r-6); }

/* --- Tipografski hero (bez fotografije) ---------------------------------------------
   Koristi se na naslovnici dok nema namjenske fotografije tima. Akcent je suptilan
   sloj svjetla iza teksta, ne dekoracija koja se natječe s naslovom.               */
.hero--tipografski { background: var(--boja-bg-dark); }
.hero--tipografski::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(255, 222, 89, 0.15) 0%, transparent 58%),
    radial-gradient(90% 80% at 100% 100%, rgba(27, 60, 86, 0.85) 0%, transparent 62%);
}

/* --- Dodatne komponente (stranice usluga, blog, kontakt, pravni tekst) ---------------
   Sve vrijednosti dolaze iz tokens.css, jednako kao i ostatak datoteke.            */

/* Kartica načina suradnje na stranicama usluga (unutar tamne sekcije) */
.kartica-paket { padding: var(--r-6) var(--r-5) var(--r-7); background: var(--boja-bg-dark-2); }
.kartica-paket h3 { margin: 0 0 var(--r-4); color: var(--boja-tekst-na-tamnom); }
.kartica-paket p { margin: 0; color: var(--boja-tekst-na-tamnom-prigusen); }
.napomena-na-tamnom {
  margin-top: var(--r-7); max-width: 62ch;
  font-size: var(--tf-sitno); color: var(--boja-tekst-na-tamnom-prigusen);
}

/* Slika uz tekstualni blok */
.slika-blok { margin: 0; }
.slika-blok img { width: 100%; height: auto; }

/* Kartica objave kao poveznica (blog) */
.kartica-objava__poveznica { display: block; color: inherit; text-decoration: none; }
.kartica-objava__tijelo { display: block; }

/* Zaglavlje i naslovna slika članka */
.clanak__zaglavlje { max-width: 34ch; margin-bottom: var(--r-7); }
.clanak__zaglavlje h1 { margin: var(--r-3) 0 var(--r-4); }
.clanak__slika { margin: 0 0 var(--r-8); }
.clanak__slika img { width: 100%; height: auto; }

/* Popis kontakt podataka */
.kontakt-lista { list-style: none; margin: var(--r-6) 0 var(--r-8); padding: 0; border-top: var(--rub-tanki) solid var(--boja-rub); }
.kontakt-lista li {
  display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--r-4);
  padding: var(--r-4) 0; border-bottom: var(--rub-tanki) solid var(--boja-rub);
}
.kontakt-lista__oznaka {
  font-size: var(--tf-meta); font-weight: var(--tez-medium);
  letter-spacing: var(--ls-oznaka); text-transform: uppercase; color: var(--boja-tekst-slab);
}
.kontakt-lista--sitno li { padding: var(--r-3) 0; font-size: var(--tf-sitno); }

/* Popis podataka o obrtu u pravnom tekstu */
.lista-podaci { list-style: none; margin: var(--r-5) 0 var(--r-6); padding: 0; border-top: var(--rub-tanki) solid var(--boja-rub); }
.lista-podaci li {
  display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--r-4);
  padding: var(--r-3) 0; border-bottom: var(--rub-tanki) solid var(--boja-rub);
}
.lista-podaci li > span:first-child {
  font-size: var(--tf-meta); font-weight: var(--tez-medium);
  letter-spacing: var(--ls-oznaka); text-transform: uppercase; color: var(--boja-tekst-slab);
}

/* Tablica u pravnom tekstu — vodoravno pomicanje umjesto prelijevanja */
.tablica-omot { margin: var(--r-5) 0 var(--r-6); overflow-x: auto; }

/* Skriveno polje za hvatanje neželjene pošte (honeypot) */
.polje-medeni { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 640px) {
  .kontakt-lista li,
  .lista-podaci li { grid-template-columns: 1fr; gap: var(--r-2); }
}

/* --- Kartica vrijednosti (O nama) ---------------------------------------------------- */
.kartica-vrijednost {
  padding: var(--r-6) var(--r-5) var(--r-7);
  background: var(--boja-bg-surface); border: var(--rub-tanki) solid var(--boja-rub);
}
.kartica-vrijednost h3 { margin: 0 0 var(--r-4); }
.kartica-vrijednost p { margin: 0; color: var(--boja-tekst-prigusen); }

/* Koraci na svijetloj podlozi (stranice usluga) */
.korak--svijetli h3 { color: var(--boja-link); }
.korak--svijetli p { color: var(--boja-tekst-prigusen); }
.sekcija--tamna .korak--svijetli h3 { color: var(--boja-tekst-na-tamnom); }
.sekcija--tamna .korak--svijetli p { color: var(--boja-tekst-na-tamnom-prigusen); }

/* Opis ispod naslova rada na naslovnici */
.kartica-objava__opis {
  display: block; margin-top: var(--r-3);
  font-size: var(--tf-sitno); color: var(--boja-tekst-prigusen);
}

/* Uvodni odlomak koji dolazi odmah ispod zaglavlja sekcije */
.uvod--pod-naslovom { margin-top: calc(var(--r-5) * -1); margin-bottom: var(--r-7); max-width: 60ch; }

/* Poziv na akciju na kraju blog objave */
.clanak__poziv {
  margin-top: var(--r-7); padding: var(--r-5);
  background: var(--boja-bg-alt); border-left: 3px solid var(--boja-akcent);
  font-weight: var(--tez-medium);
}

/* Pojedinačna recenzija — širi razmak i veći citat nego u mreži */
.kartica-recenzija--sama {
  max-width: 62ch; margin: 0 auto; padding: var(--r-8) var(--r-7); text-align: center;
}
.kartica-recenzija--sama blockquote { margin-top: var(--r-4); font-size: var(--tf-h2); }
.kartica-recenzija--sama figcaption { margin-top: var(--r-5); }
.kartica-recenzija--sama .oznaka { justify-content: center; }

/* --- Uvodni blok na stranicama usluga ------------------------------------------------
   Naslov lijevo, tekst desno, oba pune širine. Zamjena za raspored tekst + uspravna
   slika, koji je ostavljao veliku prazninu ispod kratkog teksta.                     */
.uvod-blok {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--r-7) var(--r-9); align-items: start;
}
.uvod-blok__naslov { position: sticky; top: calc(var(--r-9) + var(--r-5)); }
.uvod-blok__naslov h2 { margin: 0; }
.uvod-blok__tekst > :first-child { margin-top: 0; }
.uvod-blok__tekst p { max-width: 64ch; }

/* Široka slikovna traka između sekcija */
.traka-slika { margin: var(--r-9) 0 calc(var(--r-9) * -1); }
.traka-slika img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 30%;
}

@media (max-width: 860px) {
  .uvod-blok { grid-template-columns: minmax(0, 1fr); gap: var(--r-5); }
  .uvod-blok__naslov { position: static; }
  .traka-slika img { aspect-ratio: 3 / 2; }
}

/* ============================================================================
   NASLOVNICA — raspored preslikan iz dizajna
   ========================================================================== */

.mreza-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(24px, 3vw, 48px); }

/* --- Hero ------------------------------------------------------------------ */
.hero-naslovna {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: min(94vh, 940px); background: var(--boja-bg-dark); overflow: hidden;
  color: var(--boja-tekst-na-tamnom);
}
.hero-naslovna::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 10% 0%, rgba(255, 222, 89, 0.13) 0%, transparent 58%),
    radial-gradient(90% 80% at 100% 100%, rgba(27, 60, 86, 0.90) 0%, transparent 62%);
}
.hero-naslovna__sadrzaj { position: relative; padding-block: var(--r-10) 0; }
.hero-naslovna__naslov {
  margin: var(--r-5) 0 0; max-width: 20ch; color: var(--boja-tekst-na-tamnom);
  font-family: var(--font-naslov); font-weight: var(--tez-black); font-stretch: 112%;
  font-size: clamp(2.55rem, 7.35vw, 7.6rem); line-height: .86; letter-spacing: -.04em;
}
.hero-naslovna__dno {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--r-6); margin-top: var(--r-8);
}
.hero-naslovna__uvod { max-width: 46ch; margin: 0; color: var(--boja-tekst-na-tamnom-prigusen); }
.hero-naslovna__akcije { display: flex; flex-wrap: wrap; gap: var(--r-4); }

/* Traka koja klizi ispod heroja */
.markiza {
  position: relative; margin-top: clamp(48px, 8vh, 90px); overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.markiza__traka { display: flex; width: max-content; animation: markiza-klizi 34s linear infinite; }
.markiza__grupa {
  display: flex; align-items: center; gap: clamp(20px, 3vw, 44px);
  padding: var(--r-5) clamp(10px, 1.5vw, 22px);
  font-family: var(--font-naslov); font-weight: var(--tez-semibold);
  font-size: clamp(.95rem, 1.5vw, 1.35rem); color: var(--boja-tekst-na-tamnom);
  white-space: nowrap;
}
.markiza__znak { color: var(--boja-akcent); }
@keyframes markiza-klizi { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .markiza__traka { animation: none; } }

/* --- Tko pita, ne skita + brojke ------------------------------------------- */
.sekcija--o-nama { padding-block: clamp(80px, 13vh, 160px); }
.o-nama-slika { grid-column: 1 / span 5; grid-row: 1 / span 2; margin: 0; overflow: hidden; }
.o-nama-slika img { width: 100%; height: 100%; min-height: clamp(400px, 56vh, 660px); object-fit: cover; }
.o-nama-tekst { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: var(--r-5); }
.o-nama-tekst h2 { margin: 0; }
.o-nama-tekst__stupci { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.4vw, 34px); }
.o-nama-tekst__stupci p { margin: 0; }
.o-nama-tekst .gumb--tekst { align-self: flex-start; }

.brojke {
  grid-column: 7 / span 6; align-self: end;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--boja-rub); border-top: var(--rub-tanki) solid var(--boja-rub); padding-top: 1px;
}
.brojka { background: var(--boja-bg-base); padding: var(--r-5) var(--r-5) var(--r-6); }
.brojka .stat-broj { margin: 0; }
.brojka .stat-broj span { color: var(--boja-akcent); }
.brojka p:last-child { margin: var(--r-3) 0 0; font-size: var(--tf-meta); color: var(--boja-tekst-prigusen); }
.brojka--tekst { display: flex; flex-direction: column; justify-content: space-between; }
.brojka__slogan {
  margin: 0; font-family: var(--font-naslov); font-weight: var(--tez-bold);
  font-size: var(--tf-h3); line-height: var(--lh-podnaslov); color: var(--boja-link);
}

/* --- Što sve možemo -------------------------------------------------------- */
.sekcija--usluge {
  padding-block: clamp(60px, 10vh, 120px) clamp(80px, 13vh, 150px);
  border-top: var(--rub-tanki) solid var(--boja-rub);
}
.sekcija--usluge h2 { margin: 0; max-width: 18ch; }
.sekcija--usluge > .kontejner > .uvod { max-width: 52ch; margin: var(--r-5) 0 var(--r-8); }
.usluga-red {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: clamp(16px, 3vw, 40px); padding: clamp(22px, 3.4vh, 38px) 0;
  border-bottom: var(--rub-tanki) solid var(--boja-rub);
  color: inherit; text-decoration: none;
  transition: padding-inline var(--trajanje) var(--easing);
}
.usluga-red:first-child { border-top: var(--rub-tanki) solid var(--boja-rub); }
.usluga-red:hover { padding-inline: var(--r-4); background: var(--boja-bg-alt); }
.usluga-red__broj {
  font-family: var(--font-tekst); font-size: var(--tf-meta); font-weight: var(--tez-medium);
  letter-spacing: var(--ls-oznaka); color: var(--boja-tekst-slab);
}
.usluga-red__tekst {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: baseline; gap: clamp(14px, 2.4vw, 32px);
}
.usluga-red__naslov {
  font-family: var(--font-naslov); font-weight: var(--tez-bold); font-stretch: 104%;
  font-size: var(--tf-h3); line-height: var(--lh-podnaslov); color: var(--boja-link);
}
.usluga-red__opis { font-size: var(--tf-sitno); color: var(--boja-tekst-prigusen); }
.usluga-red__strelica { color: var(--boja-link); transition: transform var(--trajanje) var(--easing); }
.usluga-red:hover .usluga-red__strelica { transform: translateX(6px); }

/* --- Radovi (mozaik na tamnom) --------------------------------------------- */
.sekcija--radovi {
  padding-block: clamp(80px, 13vh, 150px);
  background: var(--boja-bg-dark); color: var(--boja-tekst-na-tamnom);
}
.sekcija--radovi h2 { color: var(--boja-tekst-na-tamnom); margin: 0; max-width: 16ch; }
.sekcija--radovi .zaglavlje-sekcije { margin-bottom: var(--r-7); }
.radovi-mozaik { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(14px, 1.6vw, 26px); }
.rad {
  position: relative; margin: 0; overflow: hidden; background: var(--boja-bg-dark-2);
}
.rad--7 { grid-column: span 7; }
.rad--5 { grid-column: span 5; background: var(--boja-bg-alt); }
.rad--4 { grid-column: span 4; }
.rad__slika { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rad__slika--uklopi { inset: 13% 13% 24%; width: auto; height: auto; object-fit: contain; }
.rad::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 26, 36, 0) 42%, rgba(14, 26, 36, .82) 100%);
}
.rad__natpis {
  position: absolute; left: clamp(16px, 2vw, 28px); right: clamp(16px, 2vw, 28px);
  bottom: clamp(16px, 2vw, 26px); z-index: 1;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--r-3) var(--r-4); color: var(--boja-tekst-na-tamnom);
}
.rad--5 .rad__natpis { display: block; }
.rad--5 .rad__opis { display: block; margin-top: var(--r-3); }
.rad--4 .rad__natpis { display: block; }
.rad__kategorija {
  display: block; font-family: var(--font-tekst); font-size: 10.5px; font-weight: var(--tez-medium);
  letter-spacing: var(--ls-oznaka); text-transform: uppercase;
  color: rgba(255, 255, 255, 0.70);
}
.rad__naslov {
  display: block; margin-top: var(--r-2);
  font-family: var(--font-naslov); font-weight: var(--tez-bold); font-stretch: 104%;
  font-size: var(--tf-h3); line-height: var(--lh-podnaslov);
}
.rad__opis {
  max-width: 34ch; font-size: var(--tf-sitno);
  color: rgba(255, 255, 255, 0.75);
}
.rad--4 .rad__opis { display: none; }

/* --- Proces ---------------------------------------------------------------- */
.sekcija--proces {
  padding-block: clamp(80px, 13vh, 150px);
  background: var(--boja-bg-dark-2); color: var(--boja-tekst-na-tamnom);
}
.sekcija--proces h2 {
  margin: 0 0 clamp(40px, 7vh, 80px); max-width: 24ch; color: var(--boja-tekst-na-tamnom);
}
.koraci {
  display: flex; flex-wrap: wrap; gap: 1px;
  background: rgba(255, 255, 255, 0.16);
}
.koraci .korak {
  flex: 1 1 220px; background: var(--boja-bg-dark-2);
  padding: clamp(22px, 3vw, 34px) clamp(20px, 2.4vw, 30px) clamp(30px, 4vw, 44px);
}
.koraci .korak h3 { color: var(--boja-tekst-na-tamnom); }
.koraci .korak p:last-child { color: var(--boja-tekst-na-tamnom-prigusen); }

/* --- Recenzija + klijenti --------------------------------------------------- */
.sekcija--recenzija {
  padding-block: clamp(64px, 10vh, 120px);
  border-top: var(--rub-tanki) solid var(--boja-rub);
}
.sekcija--recenzija .mreza-12 { align-items: center; }
.citat { grid-column: 1 / span 5; margin: 0; }
.citat p {
  margin: 0; font-family: var(--font-naslov); font-weight: var(--tez-semibold); font-stretch: 104%;
  font-size: var(--tf-h3); line-height: var(--lh-podnaslov); color: var(--boja-link);
}
.citat footer { margin-top: var(--r-4); font-size: var(--tf-meta); color: var(--boja-tekst-slab); }
.klijenti { grid-column: 7 / span 6; }
.klijenti__traka {
  display: flex; flex-wrap: wrap; gap: 1px; margin-top: var(--r-4);
  background: var(--boja-rub);
}
.klijent {
  /* tri po retku: široki logotipi inače prelome u vlastiti red i razvuku se */
  flex: 1 1 calc(33.333% - 1px); display: flex; align-items: center; justify-content: center;
  padding: var(--r-4); background: var(--boja-bg-base);
}
.klijent img { max-width: 100%; max-height: 48px; width: auto; height: auto; object-fit: contain; }

/* --- Završna sekcija -------------------------------------------------------- */
.sekcija--zavrsna {
  position: relative; padding-block: clamp(70px, 12vh, 140px);
  background: var(--boja-akcent); color: var(--boja-link); overflow: hidden;
}
.sekcija--zavrsna::before {
  content: ""; position: absolute; right: -8vw; top: -12vh;
  width: min(46vw, 620px); height: min(46vw, 620px); border-radius: 50%;
  border: clamp(50px, 7vw, 110px) solid rgba(14, 26, 36, .06);
  border-right-color: transparent; border-bottom-color: transparent; pointer-events: none;
}
.sekcija--zavrsna .mreza-12 { position: relative; align-items: end; }
.zavrsna__tekst { grid-column: 1 / span 7; }
.zavrsna__tekst h2 { margin: 0; color: var(--boja-link); }
.zavrsna__tekst .uvod { max-width: 48ch; }
.zavrsna__kontakt {
  grid-column: 9 / span 4; display: flex; flex-direction: column;
  border-top: 1px solid rgba(14, 26, 36, .22);
}
.zavrsna__kontakt > * {
  padding: var(--r-5) 0; border-bottom: 1px solid rgba(14, 26, 36, .22);
  color: var(--boja-link); text-decoration: none;
}
.zavrsna__oznaka {
  display: block; font-size: 10.5px; font-weight: var(--tez-medium);
  letter-spacing: var(--ls-oznaka); text-transform: uppercase;
  color: rgba(14, 26, 36, .55);
}
.zavrsna__vrijednost {
  display: block; margin-top: var(--r-2);
  font-family: var(--font-naslov); font-weight: var(--tez-bold); font-size: var(--tf-h3);
  line-height: var(--lh-podnaslov);
}
.zavrsna__opis { display: block; margin-top: var(--r-3); font-size: var(--tf-sitno); color: rgba(14, 26, 36, .7); }

@media (max-width: 1024px) {
  .o-nama-tekst__stupci { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .mreza-12 { grid-template-columns: minmax(0, 1fr); }
  .o-nama-slika, .o-nama-tekst, .brojke,
  .citat, .klijenti, .zavrsna__tekst, .zavrsna__kontakt { grid-column: 1 / -1; }
  .o-nama-slika img { min-height: 320px; }
  .hero-naslovna__dno { flex-direction: column; align-items: flex-start; }
  .usluga-red { grid-template-columns: auto minmax(0, 1fr) auto; }
  .usluga-red__tekst { grid-template-columns: minmax(0, 1fr); gap: var(--r-3); }
  .rad--7, .rad--5, .rad--4 { grid-column: span 12; }
  .rad__natpis { display: block; }
  .rad__opis { display: none; }
}
@media (max-width: 640px) {
  .brojke { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================================
   PODSTRANICE — rasporedi preslikani iz dizajna
   ========================================================================== */

/* --- Mrvice i oznaka sa žutom crtom ---------------------------------------- */
.mrvice {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--r-3);
  margin-bottom: clamp(28px, 5vh, 56px);
  font-size: var(--tf-meta); color: var(--boja-tekst-slab);
}
.mrvice a { color: var(--boja-tekst-slab); }
.mrvice a:hover { color: var(--boja-link); }

.oznaka-crta {
  display: flex; align-items: center; gap: var(--r-4); margin: 0 0 var(--r-5);
  font-family: var(--font-tekst); font-size: var(--tf-meta); font-weight: var(--tez-medium);
  letter-spacing: var(--ls-oznaka); text-transform: uppercase; color: var(--boja-tekst-prigusen);
}
.oznaka-crta__crta { display: block; width: 30px; height: 6px; background: var(--boja-akcent); }
.oznaka-crta--na-tamnom { color: var(--boja-tekst-na-tamnom-prigusen); }

/* --- Zaglavlje podstranice -------------------------------------------------- */
.pod-hero { padding-block: clamp(44px, 7vh, 80px) clamp(50px, 8vh, 96px); }
.pod-hero__mreza {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(24px, 3vw, 48px); align-items: end;
}
.pod-hero__naslov { grid-column: 1 / span 7; }
.pod-hero__naslov--sirok { grid-column: 1 / span 9; }
.pod-hero__naslov h1 {
  margin: 0; font-size: clamp(2.1rem, 5.4vw, 5.2rem); line-height: .9; letter-spacing: -.035em;
}
.pod-hero__uvod { grid-column: 9 / span 4; }
.pod-hero__uvod h2 { margin: 0 0 var(--r-4); font-size: var(--tf-h3); }
.pod-hero__uvod p { margin: 0; color: var(--boja-tekst-prigusen); }
.pod-hero__akcije { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r-5); margin-top: var(--r-6); }
.pod-hero__traka {
  margin: clamp(40px, 7vh, 80px) 0 0; aspect-ratio: 21 / 9; overflow: hidden;
  background: var(--boja-bg-dark-2);
}
.pod-hero__traka img { width: 100%; height: 100%; object-fit: cover; }
.pod-hero--clanak .pod-hero__naslov h1 { font-size: clamp(1.9rem, 4.2vw, 3.9rem); }
.pod-hero--clanak .meta { margin-top: var(--r-4); }

/* --- Gumb s točkom i podcrtana veza ---------------------------------------- */
.gumb-tocka {
  display: inline-flex; align-items: center; gap: var(--r-3);
  padding: 18px 28px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--boja-bg-dark); color: var(--boja-tekst-na-tamnom);
  font-family: var(--font-tekst); font-size: 15px; font-weight: var(--tez-semibold);
  transition: transform var(--trajanje) var(--easing);
}
.gumb-tocka:hover { transform: translateY(-2px); color: var(--boja-tekst-na-tamnom); }
.gumb-tocka__tocka { width: 7px; height: 7px; border-radius: 50%; background: var(--boja-akcent); }

.veza-podcrtana {
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
  font-size: var(--tf-sitno); font-weight: var(--tez-medium); color: var(--boja-link);
}
.veza-podcrtana--na-tamnom { color: var(--boja-tekst-na-tamnom); }

/* --- Žuta završna sekcija --------------------------------------------------- */
.zavrsna {
  position: relative; overflow: hidden;
  padding-block: clamp(56px, 9vh, 120px); padding-inline: var(--kontejner-padding);
  background: var(--boja-akcent); color: var(--boja-link);
}
.zavrsna__prsten {
  position: absolute; right: -8vw; top: -12vh;
  width: min(46vw, 620px); height: min(46vw, 620px); border-radius: 50%;
  border: clamp(50px, 7vw, 110px) solid rgba(14, 26, 36, .06);
  border-right-color: transparent; border-bottom-color: transparent; pointer-events: none;
}
.zavrsna__unutar {
  position: relative; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--r-7);
}
.zavrsna h2 { margin: 0; max-width: 22ch; color: var(--boja-link); }
.zavrsna__akcije { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r-5); }

/* --- Plava traka na stranicama usluga --------------------------------------- */
.plava-traka {
  padding-block: clamp(60px, 10vh, 120px);
  background: var(--boja-bg-dark-2); color: var(--boja-tekst-na-tamnom);
}
.plava-traka__mreza {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(24px, 3vw, 48px); align-items: end;
}
.plava-traka__naslov { grid-column: 1 / span 7; }
.plava-traka__naslov h2 { margin: var(--r-4) 0 0; color: var(--boja-tekst-na-tamnom); }
.plava-traka__tekst { grid-column: 9 / span 4; }
.plava-traka__tekst p { margin: 0 0 var(--r-5); color: var(--boja-tekst-na-tamnom-prigusen); }

/* --- Social media: slika + četiri kartice ---------------------------------- */
.slika-i-mreza { padding-block: clamp(56px, 9vh, 110px); border-top: var(--rub-tanki) solid var(--boja-rub); }
.slika-i-mreza__mreza { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(24px, 3vw, 48px); }
.slika-i-mreza__slika {
  grid-column: 1 / span 4; margin: 0; overflow: hidden;
  background: var(--boja-bg-dark-2); min-height: clamp(380px, 50vh, 620px);
}
.slika-i-mreza__slika img { width: 100%; height: 100%; object-fit: cover; }
.mreza-kartice {
  grid-column: 6 / span 7; display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--boja-rub);
  border-top: var(--rub-tanki) solid var(--boja-rub);
  border-left: var(--rub-tanki) solid var(--boja-rub);
}
.mreza-kartica { background: var(--boja-bg-base); padding: clamp(22px, 2.8vw, 34px); }
.mreza-kartica h2 { margin: 0 0 var(--r-4); font-size: var(--tf-h3); }
.mreza-kartica p { margin: 0; font-size: var(--tf-sitno); color: var(--boja-tekst-prigusen); }

/* --- Social media: tri koraka s pločicama ---------------------------------- */
.koraci-sekcija { padding-block: clamp(60px, 10vh, 120px); }
.koraci-sekcija h2 { margin: 0 0 clamp(32px, 5vh, 56px); max-width: 20ch; }
.korak-kartice { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 36px); }
.korak-kartica h3 { margin: var(--r-5) 0 var(--r-3); }
.korak-kartica p { margin: 0; color: var(--boja-tekst-prigusen); }
.korak-kartica__plocica {
  position: relative; display: block; aspect-ratio: 1.385; overflow: hidden;
}
.korak-kartica__plocica--plava { background: var(--boja-bg-dark-2); }
.korak-kartica__plocica--zuta { background: var(--boja-akcent); }
.korak-kartica__plocica--crna { background: var(--boja-bg-dark); }
.korak-kartica__prsten { position: absolute; border-radius: 50%; aspect-ratio: 1; }
.korak-kartica__plocica--plava .korak-kartica__prsten {
  right: -18%; bottom: -42%; width: 74%;
  border: clamp(22px, 4vw, 44px) solid rgba(255, 222, 89, 0.90);
  border-right-color: transparent; border-bottom-color: transparent;
}
.korak-kartica__plocica--zuta .korak-kartica__prsten {
  left: -16%; top: -38%; width: 70%;
  border: clamp(22px, 4vw, 44px) solid rgba(27, 60, 86, 0.90);
  border-left-color: transparent; border-top-color: transparent;
}
.korak-kartica__plocica--crna .korak-kartica__prsten {
  right: -14%; bottom: -40%; width: 70%;
  border: clamp(18px, 3.4vw, 38px) solid rgba(255, 255, 255, 0.14);
  border-top-color: var(--boja-akcent); transform: rotate(-18deg);
}
.korak-kartica__broj {
  position: absolute; left: clamp(18px, 2vw, 26px); bottom: clamp(14px, 1.8vw, 22px);
  font-family: var(--font-naslov); font-weight: var(--tez-black); font-stretch: 112%;
  font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1;
}
.korak-kartica__plocica--zuta .korak-kartica__broj { color: var(--boja-link); }
.korak-kartica__plocica--plava .korak-kartica__broj,
.korak-kartica__plocica--crna .korak-kartica__broj { color: var(--boja-tekst-na-tamnom); }

/* --- Web: slika + dva bloka -------------------------------------------------- */
.slika-i-tekst { padding-block: clamp(56px, 9vh, 110px); border-top: var(--rub-tanki) solid var(--boja-rub); }
.slika-i-tekst__mreza { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(24px, 3vw, 48px); }
.slika-i-tekst__slika {
  grid-column: 1 / span 5; grid-row: 1 / span 2;
  min-height: clamp(360px, 48vh, 600px); background: var(--boja-bg-dark-2);
}
.slika-i-tekst__blok {
  grid-column: 7 / span 6; padding-top: clamp(20px, 3vh, 30px);
  border-top: var(--rub-tanki) solid var(--boja-rub);
}
.slika-i-tekst__blok h2 { margin: 0 0 var(--r-4); }
.slika-i-tekst__blok p { margin: 0; color: var(--boja-tekst-prigusen); }

/* --- Web: šest razloga ------------------------------------------------------ */
.razlozi { padding-block: clamp(60px, 10vh, 120px); }
.razlozi h2 { margin: 0 0 clamp(32px, 5vh, 56px); max-width: 22ch; }
.razlozi__mreza {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px; background: var(--boja-rub); border-top: var(--rub-tanki) solid var(--boja-rub);
}
.razlog {
  background: var(--boja-bg-base);
  padding: clamp(24px, 3.2vw, 38px) clamp(20px, 2.4vw, 30px) clamp(30px, 4vw, 44px);
}
.razlog__broj {
  margin: 0 0 var(--r-4); font-family: var(--font-tekst); font-size: var(--tf-meta);
  font-weight: var(--tez-medium); letter-spacing: var(--ls-oznaka); color: var(--boja-tekst-slab);
}
.razlog h3 { margin: 0 0 var(--r-3); }
.razlog p:last-child { margin: 0; font-size: var(--tf-sitno); color: var(--boja-tekst-prigusen); }

/* --- Web: projekti (tamno) --------------------------------------------------- */
.projekti {
  padding-block: clamp(60px, 10vh, 120px);
  background: var(--boja-bg-dark); color: var(--boja-tekst-na-tamnom);
}
.projekti h2 { margin: 0 0 clamp(32px, 5vh, 56px); color: var(--boja-tekst-na-tamnom); }
.projekti__mreza { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(16px, 2vw, 28px); }
.projekt { margin: 0; }
.projekt--7 { grid-column: span 7; }
.projekt--5 { grid-column: span 5; }
.projekt--6 { grid-column: span 6; }
.projekt__okvir {
  display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--boja-bg-dark-2);
}
.projekt__okvir img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.projekt__natpis {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--r-3); margin-top: var(--r-4);
}
.projekt__naslov { font-family: var(--font-naslov); font-weight: var(--tez-bold); font-size: var(--tf-h3); }
.projekt__domena { font-size: var(--tf-sitno); color: var(--boja-tekst-na-tamnom-prigusen); }

/* --- Grafički dizajn -------------------------------------------------------- */
.dobivate { padding-block: clamp(60px, 10vh, 120px); border-top: var(--rub-tanki) solid var(--boja-rub); }
.dobivate__mreza { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(24px, 3vw, 48px); }
.dobivate__naslov { grid-column: 1 / span 4; }
.dobivate__naslov h2 { margin: 0; }
.dobivate__popis {
  grid-column: 6 / span 7; display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--boja-rub);
  border-top: var(--rub-tanki) solid var(--boja-rub); border-left: var(--rub-tanki) solid var(--boja-rub);
}
.dobivate__stavka { background: var(--boja-bg-base); padding: clamp(22px, 2.8vw, 34px); }
.dobivate__broj {
  margin: 0 0 var(--r-4); font-family: var(--font-tekst); font-size: var(--tf-meta);
  font-weight: var(--tez-medium); letter-spacing: var(--ls-oznaka); color: var(--boja-tekst-slab);
}
.dobivate__stavka h3 { margin: 0 0 var(--r-3); }
.dobivate__stavka p:last-child { margin: 0; font-size: var(--tf-sitno); color: var(--boja-tekst-prigusen); }

.znak-vrijeme {
  padding-block: clamp(60px, 10vh, 120px);
  background: var(--boja-bg-dark-2); color: var(--boja-tekst-na-tamnom);
}
.znak-vrijeme__mreza { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(24px, 3vw, 48px); }
.znak-vrijeme__mreza > div { grid-column: 1 / span 4; }
.znak-vrijeme h2 { margin: var(--r-4) 0 0; color: var(--boja-tekst-na-tamnom); }
.znak-lista {
  grid-column: 6 / span 7; list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px; background: rgba(255, 255, 255, 0.16);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.znak-lista li {
  display: flex; gap: var(--r-4); background: var(--boja-bg-dark-2); padding: 18px 4px;
  color: var(--boja-tekst-na-tamnom-prigusen);
}
.lista__znak { color: var(--boja-akcent); flex: none; }
.lista__broj {
  flex: none; font-family: var(--font-naslov); font-weight: var(--tez-bold);
  color: var(--boja-akcent);
}

.faze { padding-block: clamp(60px, 10vh, 120px); }
.faze h2 { margin: var(--r-4) 0 clamp(24px, 3vh, 36px); max-width: 22ch; }
.faze__mreza {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(18px, 2vw, 32px);
  border-top: var(--rub-tanki) solid var(--boja-rub); padding-top: clamp(24px, 3vh, 36px);
}
.faza__broj {
  margin: 0 0 var(--r-4); font-family: var(--font-naslov); font-weight: var(--tez-black);
  font-size: var(--tf-h2); color: var(--boja-link);
}
.faza__broj span { color: var(--boja-akcent); }
.faza h3 { margin: 0 0 var(--r-3); }
.faza p:last-child { margin: 0; font-size: var(--tf-sitno); color: var(--boja-tekst-prigusen); }

/* Mozaik radova na tamnom */
.mozaik-sekcija {
  padding-block: clamp(60px, 10vh, 120px);
  background: var(--boja-bg-dark); color: var(--boja-tekst-na-tamnom);
}
.mozaik-sekcija h2 { margin: var(--r-4) 0 clamp(32px, 5vh, 56px); color: var(--boja-tekst-na-tamnom); }
.mozaik { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(20px, 2.4vw, 40px); }
.mozaik__stavka { margin: 0; }
.mozaik__stavka--7 { grid-column: span 7; }
.mozaik__stavka--6 { grid-column: span 6; }
.mozaik__stavka--5 { grid-column: span 5; }
.mozaik__okvir {
  display: block; position: relative; aspect-ratio: 1.385; overflow: hidden;
  background: var(--boja-bg-alt);
}
.mozaik__okvir img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.mozaik__natpis { display: block; margin-top: var(--r-4); }
.mozaik__kategorija {
  display: block; font-family: var(--font-tekst); font-size: 10.5px; font-weight: var(--tez-medium);
  letter-spacing: var(--ls-oznaka); text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}
.mozaik__naslov {
  display: block; margin-top: var(--r-2);
  font-family: var(--font-naslov); font-weight: var(--tez-bold); font-size: var(--tf-h3);
}
.mozaik__opis {
  display: block; margin-top: var(--r-3); max-width: 42ch; font-size: var(--tf-sitno);
  color: rgba(255, 255, 255, 0.72);
}

/* FAQ */
.faq { padding-block: clamp(60px, 10vh, 120px); }
.faq__mreza { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(24px, 3vw, 48px); }
.faq__naslov { grid-column: 1 / span 4; }
.faq__naslov h2 { margin: 0 0 var(--r-4); }
.faq__naslov p { margin: 0; font-size: var(--tf-sitno); color: var(--boja-tekst-prigusen); }
.faq__popis { grid-column: 6 / span 7; border-top: var(--rub-tanki) solid var(--boja-rub); }
.pitanje { padding: var(--r-5) 0; border-bottom: var(--rub-tanki) solid var(--boja-rub); }
.pitanje h3 { margin: 0 0 var(--r-3); }
.pitanje p { margin: 0; color: var(--boja-tekst-prigusen); }

/* --- O nama ----------------------------------------------------------------- */
.prica { padding-block: clamp(56px, 9vh, 110px); border-top: var(--rub-tanki) solid var(--boja-rub); }
.prica__mreza { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(24px, 3vw, 48px); }
.prica__slika {
  grid-column: 1 / span 6; grid-row: 1 / span 2; margin: 0; overflow: hidden;
  min-height: clamp(340px, 44vh, 540px); background: var(--boja-bg-dark-2);
}
.prica__slika img { width: 100%; height: 100%; object-fit: cover; }
.prica__tekst { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: var(--r-5); }
.prica__tekst p { margin: 0; }
.prica__slogan {
  grid-column: 8 / span 5; align-self: end; margin: 0;
  padding: clamp(24px, 3vw, 36px) clamp(22px, 2.6vw, 32px);
  background: var(--boja-bg-dark-2); color: var(--boja-tekst-na-tamnom);
  font-family: var(--font-naslov); font-weight: var(--tez-bold); font-size: var(--tf-h3);
  line-height: var(--lh-podnaslov);
}

.o-nama-plava {
  padding-block: clamp(60px, 10vh, 120px);
  background: var(--boja-bg-dark-2); color: var(--boja-tekst-na-tamnom);
}
.o-nama-plava__mreza { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(24px, 3vw, 48px); }
.o-nama-plava__naslov { grid-column: 1 / span 3; }
.o-nama-plava__naslov h2 { margin: 0; color: var(--boja-tekst-na-tamnom); }
.o-nama-plava__tekst { grid-column: 5 / span 8; display: flex; flex-direction: column; gap: var(--r-5); }
.o-nama-plava__tekst p { margin: 0; color: var(--boja-tekst-na-tamnom-prigusen); }
.o-nama-plava__tekst .uvod { color: var(--boja-tekst-na-tamnom); }
.o-nama-plava__zavrsna {
  padding-top: var(--r-5);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.vrijednosti { padding-block: clamp(60px, 10vh, 120px); }
.vrijednosti h2 { margin: var(--r-4) 0 clamp(32px, 5vh, 56px); }
.vrijednosti__mreza {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px; background: var(--boja-rub); border-top: var(--rub-tanki) solid var(--boja-rub);
}
.vrijednost {
  background: var(--boja-bg-base);
  padding: clamp(26px, 3.4vw, 40px) clamp(22px, 2.6vw, 32px) clamp(32px, 4vw, 46px);
}
.vrijednost h3 { margin: 0 0 var(--r-4); }
.vrijednost h3 span { color: var(--boja-akcent); }
.vrijednost p { margin: 0; color: var(--boja-tekst-prigusen); }

/* --- Kontakt ----------------------------------------------------------------- */
.kontakt-trake { border-top: var(--rub-tanki) solid var(--boja-rub); }
.kontakt-trake__mreza {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px; background: var(--boja-rub);
}
.kontakt-traka {
  display: block; background: var(--boja-bg-base); color: inherit;
  padding: clamp(28px, 4vw, 44px) var(--kontejner-padding);
  transition: background var(--trajanje-sporo) var(--easing);
}
.kontakt-traka:hover { background: var(--boja-bg-alt); color: inherit; }
.kontakt-traka--plava { background: var(--boja-bg-dark-2); color: var(--boja-tekst-na-tamnom); }
.kontakt-traka--plava:hover { background: var(--boja-bg-dark); color: var(--boja-tekst-na-tamnom); }
.kontakt-traka__oznaka {
  display: block; margin: 0 0 var(--r-3); font-family: var(--font-tekst);
  font-size: 10.5px; font-weight: var(--tez-medium); letter-spacing: var(--ls-oznaka);
  text-transform: uppercase; opacity: .6;
}
.kontakt-traka__vrijednost {
  display: block; margin: 0; font-family: var(--font-naslov); font-weight: var(--tez-bold);
  font-size: var(--tf-h3); line-height: var(--lh-podnaslov);
}

.obrazac-sekcija { padding-block: clamp(60px, 10vh, 120px); }
.obrazac-sekcija__mreza { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(24px, 3vw, 48px); }
.obrazac-sekcija__naslov { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: clamp(26px, 4vh, 44px); }
.obrazac-sekcija__naslov h2 { margin: 0; }
.obrazac-sekcija__logo { flex: 1; display: flex; align-items: center; justify-content: center; min-height: clamp(140px, 18vh, 220px); }
.obrazac-sekcija__logo img { width: min(100%, 220px); height: auto; opacity: .35; }
.obrazac { grid-column: 6 / span 7; display: flex; flex-direction: column; gap: clamp(18px, 2.4vh, 24px); }
.obrazac__par { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2vw, 24px); }
.obrazac__dno {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--r-4); padding-top: var(--r-5); border-top: var(--rub-tanki) solid var(--boja-rub);
}
.obrazac__greska {
  margin: 0; padding: var(--r-4) var(--r-5);
  background: var(--boja-bg-alt); border-left: 3px solid var(--boja-akcent);
  font-size: var(--tf-sitno);
}

.karta-sekcija { border-top: var(--rub-tanki) solid var(--boja-rub); }
.karta-sekcija__mreza { display: grid; grid-template-columns: repeat(12, 1fr); align-items: stretch; }
.karta-sekcija__tekst {
  grid-column: 1 / span 4; display: flex; flex-direction: column; justify-content: center;
  gap: var(--r-4); padding: clamp(40px, 6vw, 72px) var(--kontejner-padding);
  background: var(--boja-bg-dark-2); color: var(--boja-tekst-na-tamnom);
}
.karta-sekcija__tekst .veza-podcrtana { align-self: flex-start; margin-top: var(--r-3); }
.karta-sekcija__karta { grid-column: 5 / span 8; position: relative; min-height: clamp(300px, 42vh, 460px); background: var(--boja-bg-alt); }
.karta-sekcija__karta iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- Blog popis --------------------------------------------------------------- */
.popis-objava {
  padding: clamp(44px, 7vh, 80px) 0 clamp(70px, 11vh, 140px);
  border-top: var(--rub-tanki) solid var(--boja-rub);
}
.popis-objava__mreza {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(20px, 2.4vh, 36px) clamp(20px, 2.4vw, 32px);
}
.objava { display: block; color: inherit; }
.objava--7 { grid-column: span 7; }
.objava--6 { grid-column: span 6; }
.objava--5 { grid-column: span 5; }
.objava--4 { grid-column: span 4; }
.objava__slika {
  display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--boja-bg-alt);
}
.objava__slika img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--trajanje-sporo) var(--easing);
}
.objava:hover .objava__slika img { transform: scale(1.04); }
.objava__kategorija {
  display: block; margin-top: var(--r-4); font-family: var(--font-tekst);
  font-size: 10.5px; font-weight: var(--tez-medium); letter-spacing: var(--ls-oznaka);
  text-transform: uppercase; color: var(--boja-tekst-slab);
}
.objava__naslov {
  display: block; margin-top: var(--r-3);
  font-family: var(--font-naslov); font-weight: var(--tez-bold); font-stretch: 104%;
  font-size: var(--tf-h3); line-height: var(--lh-podnaslov); color: var(--boja-link);
}

/* --- Blog objava --------------------------------------------------------------- */
.clanak-omot { padding: clamp(44px, 7vh, 84px) 0 clamp(50px, 8vh, 100px); }
.clanak-omot .clanak {
  max-width: none; margin: 0;
  display: flex; flex-direction: column; gap: clamp(20px, 2.8vh, 30px);
}
.clanak-omot .kontejner { display: grid; grid-template-columns: repeat(12, 1fr); }
.clanak-omot .clanak { grid-column: 3 / span 8; }
.clanak-omot .clanak > * { margin: 0; }
.clanak__figura { aspect-ratio: 940 / 626; overflow: hidden; background: var(--boja-bg-dark); }
.clanak__figura img { width: 100%; height: 100%; object-fit: cover; }
.clanak-omot .lista-znak {
  list-style: none; padding: 0;
  border-top: var(--rub-tanki) solid var(--boja-rub);
  border-bottom: var(--rub-tanki) solid var(--boja-rub);
}
.clanak-omot .lista-znak li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--r-4);
  padding: 20px 4px; border: 0; position: static;
}
.clanak-omot .lista-znak li::before { content: none; }
.clanak__poziv {
  padding-top: var(--r-5); border-top: var(--rub-tanki) solid var(--boja-rub);
  font-weight: var(--tez-medium);
}

.jos-bloga { padding-block: clamp(50px, 8vh, 100px); background: var(--boja-akcent); color: var(--boja-link); }
.jos-bloga__zaglavlje {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--r-4); margin-bottom: var(--r-6);
}
.jos-bloga h2 { margin: 0; color: var(--boja-link); }
.jos-bloga__mreza {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px; background: rgba(14, 26, 36, .22); border-top: 1px solid rgba(14, 26, 36, .22);
}
.jos-kartica {
  display: block; background: var(--boja-akcent); color: var(--boja-link);
  padding: clamp(22px, 3vw, 32px) clamp(18px, 2.2vw, 26px) clamp(28px, 3.6vw, 38px);
  transition: background var(--trajanje-sporo) var(--easing);
}
.jos-kartica:hover { background: #FFE67D; color: var(--boja-link); }
.jos-kartica__kategorija {
  display: block; font-family: var(--font-tekst); font-size: 10.5px; font-weight: var(--tez-medium);
  letter-spacing: var(--ls-oznaka); text-transform: uppercase; color: rgba(14, 26, 36, .6);
}
.jos-kartica__naslov {
  display: block; margin-top: var(--r-3);
  font-family: var(--font-naslov); font-weight: var(--tez-bold); font-size: var(--tf-h3);
  line-height: var(--lh-podnaslov);
}

/* --- Prijelomi --------------------------------------------------------------- */
@media (max-width: 1024px) {
  .korak-kartice { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .mreza-kartice, .dobivate__popis { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .pod-hero__mreza, .plava-traka__mreza, .slika-i-mreza__mreza, .slika-i-tekst__mreza,
  .dobivate__mreza, .znak-vrijeme__mreza, .faq__mreza, .prica__mreza,
  .o-nama-plava__mreza, .obrazac-sekcija__mreza, .karta-sekcija__mreza,
  .clanak-omot .kontejner { grid-template-columns: minmax(0, 1fr); }
  .pod-hero__naslov, .pod-hero__naslov--sirok, .pod-hero__uvod,
  .plava-traka__naslov, .plava-traka__tekst,
  .slika-i-mreza__slika, .mreza-kartice, .slika-i-tekst__slika, .slika-i-tekst__blok,
  .dobivate__naslov, .dobivate__popis, .znak-vrijeme__mreza > div, .znak-lista,
  .faq__naslov, .faq__popis, .prica__slika, .prica__tekst, .prica__slogan,
  .o-nama-plava__naslov, .o-nama-plava__tekst,
  .obrazac-sekcija__naslov, .obrazac, .karta-sekcija__tekst, .karta-sekcija__karta,
  .clanak-omot .clanak { grid-column: 1 / -1; }
  .slika-i-mreza__slika, .slika-i-tekst__slika, .prica__slika { min-height: 300px; grid-row: auto; }
  .objava--7, .objava--6, .objava--5, .objava--4 { grid-column: span 12; }
  .projekt--7, .projekt--5, .projekt--6 { grid-column: span 12; }
  .mozaik__stavka--7, .mozaik__stavka--6, .mozaik__stavka--5 { grid-column: span 12; }
  .obrazac__par { grid-template-columns: minmax(0, 1fr); }
  .mreza-kartice { border-left: 0; }
}