/* ==========================================================================
   B-STEEL / STILOVI
   --------------------------------------------------------------------------
   Vizuelni jezik po ugledu na Strux. Kljucni potpisi koje pratimo:
     - smjena traka: bijela / off-white / crna
     - pill dugme sa kruznim znackom ikone na desnoj strani
     - numerisane oznake sekcija (01, 02, 03)
     - zaobljene kartice sa bijelom natpisnom trakom preko slike
     - vrlo gusto trekovani displej naslovi
     - logo badge kao vodeni zig u tamnim trakama

   Redoslijed:
     1. Reset i osnova
     2. Raspored  (container, sekcija, oznake)
     3. Tipografija
     4. Dugmad i kruzne ikone
     5. Komponente
     6. Sekcije
     7. Pristupacnost i pokret

   Mobile-first. Svaki @media je min-width.
   Sve vrijednosti dolaze iz tokens.css.
   ========================================================================== */

/* ==========================================================================
   1. RESET I OSNOVA
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
address { font-style: normal; }

/* ==========================================================================
   2. RASPORED
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section { padding-block: var(--section-padding-y); }

/* Tri polja koja se smjenjuju niz stranicu. */
.section--light { background-color: var(--color-bg); }
.section--alt   { background-color: var(--color-bg-alt); }

.section--dark {
  position: relative;
  background-color: var(--color-dark-bg);
  color: var(--color-dark-text);
  overflow: hidden;
  isolation: isolate;
}

.section--dark .h2,
.section--dark .h3,
.section--dark .display { color: var(--color-dark-heading); }

/* Vodeni zig: logo badge, veliki i jedva vidljiv, kao kod Struxa. */
.watermark {
  position: absolute;
  z-index: -1;
  right: -8%;
  top: 50%;
  translate: 0 -50%;
  width: min(60%, 620px);
  opacity: var(--watermark-opacity);
  pointer-events: none;
  filter: grayscale(1) brightness(3);
}

/* ----- Zaglavlje sekcije -------------------------------------------------- */

.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  max-width: 46ch;
}

.section__head--center {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}

/* Zaglavlje sa akcijom desno (strelice, dugme) na sirokom ekranu. */
.section__head-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.section__head-row .section__head { margin-bottom: 0; }

@media (min-width: 900px) {
  .section__head-row {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-8);
  }
}

/* ----- Oznaka sekcije ----------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  /* Na svijetlom ide tamnija narandzasta; sjajna pada na kontrastu. */
  color: var(--color-accent-text);
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: currentColor;
}

/* Na tamnom ide sjajna narandzasta. Tamna varijanta pada na 3.8:1. */
.section--dark .eyebrow,
.hero .eyebrow,
.contact__panel .eyebrow { color: var(--color-dark-accent); }

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

/* Oznaka za podatke koje klijent jos nije dostavio. */
.todo {
  color: var(--color-accent-text);
  font-weight: var(--weight-medium);
  background-color: rgba(249, 115, 22, 0.12);
  border-radius: var(--radius-sm);
  padding-inline: var(--space-2);
  overflow-wrap: anywhere;
}

.section--dark .todo {
  color: var(--color-dark-accent);
  background-color: rgba(255, 255, 255, 0.10);
}

/* ==========================================================================
   3. TIPOGRAFIJA
   ========================================================================== */

.display, .h2, .h3, .h4 {
  font-family: var(--font-display);
  color: var(--color-heading);
  text-wrap: balance;
}

.display {
  font-size: var(--text-5xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
}

.h2 {
  font-size: var(--text-4xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
}

.h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.h4 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  max-width: var(--measure);
  text-wrap: pretty;
}

.body-text {
  color: var(--color-text);
  max-width: var(--measure);
  text-wrap: pretty;
}

.text-sm { font-size: var(--text-sm); }

.section--dark .lead,
.section--dark .body-text,
.section--dark .text-sm { color: var(--color-dark-text); }

/* ==========================================================================
   4. DUGMAD
   ========================================================================== */

/* --------------------------------------------------------------------------
   Geometrija je prepisana iz izvornog koda Konstre, ne procijenjena:
     padding 16px 20px, razmak 8px, radius 999px,
     natpis Geist 500 / 16px / line-height 16px / trekovanje 0,
     ikona 14x14px, ukupna visina 16 + 2*16 = 48px
   Nema znacke sa kruznom pozadinom kao kod Struxa: ikona stoji
   direktno pored natpisa i rola se na hover.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: var(--btn-gap);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: 0;
  border-radius: var(--btn-radius);
  font-family: var(--font-display);
  font-size: var(--btn-font-size);
  font-weight: var(--weight-medium);
  letter-spacing: var(--btn-tracking);
  line-height: var(--btn-line);
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  overflow: visible;
  transition:
    background-color var(--duration-fast) var(--ease-hover),
    border-color     var(--duration-fast) var(--ease-hover),
    color            var(--duration-fast) var(--ease-hover);
}

/* --------------------------------------------------------------------------
   Ivica se crta pseudoelementom, ne svojstvom border.
   Razlog: obicna 1px ivica dodaje 2px na visinu, pa dugme ispadne 50px
   umjesto 48px koliko ima original. Framer to rjesava isto ovako, preko
   ::after sa inset 0, tako da ivica nikad ne utice na raspored.
   Izmjereno prije popravke: 50px. Poslije: 48px, kao na Konstri.
   -------------------------------------------------------------------------- */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--border-width) solid transparent;
  border-radius: inherit;
  pointer-events: none;
  transition: border-color var(--duration-fast) var(--ease-hover);
}

/* 48px je iznad preporucenih 44px za dodir, pa nema sta da se podize. */

/* Nasljedjene varijante iz prve verzije: ivica im se sad crta kroz ::after. */
.btn--outline { border-color: transparent; }
.btn--outline::after { border-color: var(--color-border); }
.btn--outline:hover::after { border-color: var(--color-heading); }

.btn--on-dark-outline { border-color: transparent; }
.btn--on-dark-outline::after { border-color: var(--color-dark-border); }
.btn--on-dark-outline:hover::after { border-color: rgba(255, 255, 255, 0.5); }

/* --------------------------------------------------------------------------
   ROLANJE NATPISA PO KARAKTERU
   --------------------------------------------------------------------------
   Ovo je najvredniji detalj Konstre i izgleda komplikovanije nego sto jeste.

   Svaki karakter je zaseban element visine 16px sa overflow hidden.
   Unutra je kolona sa DVIJE identicne kopije tog karaktera. U mirovanju
   je kolona na translateY(0), pa se vidi prva kopija. Na hover ide na
   translateY(-50%) i druga kopija se popne na njeno mjesto.

   Iz izvora doslovno:
     transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)
     transition-delay: 0.03s * indeks karaktera

   Razmak dobija width 0.3em, inace bi se rijeci slijepile.
   Kod natpisa od 15 karaktera zadnji krece 0.42s poslije prvog, pa
   efekat traje ukupno oko 0.62s.

   Indeks se prosljedjuje iz skripte kao --i na svakom karakteru.
   -------------------------------------------------------------------------- */
.btn__label { display: flex; gap: 0; }

.btn__char {
  position: relative;
  display: block;
  width: auto;
  height: var(--btn-line);
  overflow: hidden;
}

.btn__char--space { display: inline-block; width: 0.3em; }

.btn__char-inner {
  display: flex;
  flex-direction: column;
  transform: translateY(0%);
  transition: transform var(--duration-hover) var(--ease-roll);
  transition-delay: calc(var(--i, 0) * var(--btn-char-step));
}

/* Karakteri se uopste ne selektuju. Bez ovoga kopiranje teksta sa
   stranice vraca svako slovo dva puta i svako u svom redu
   ("Z Z a a t t r r ..."), jer je svaki karakter blok element sa dvije
   kopije. Umjesto njih se selektuje pravi natpis, koji skripta ostavlja
   u DOM-u kao vizuelno sakriven element. */
.btn__char { user-select: none; -webkit-user-select: none; }

.btn__char-inner span {
  display: block;
  line-height: var(--btn-line);
  white-space: pre;
}

/* Rolanje se pali i kad je pod misem cijela kartica, ne samo dugme.
   Na Konstri je kartica jedan klikabilan blok, pa se dugme ponasa kao
   njegov pokazivac stanja. */
.btn:hover .btn__char-inner,
.btn:focus-visible .btn__char-inner,
.svc:hover .btn__char-inner { transform: translateY(-50%); }

/* --------------------------------------------------------------------------
   ZAMJENA IKONE NA HOVER
   --------------------------------------------------------------------------
   Ista logika, drugim sredstvima. Na Konstri traka je overflow clip sirine
   14px sa dvije iste strelice: u mirovanju je prva u toku a druga apsolutno
   pozicionirana van kadra lijevo, a na hover prva odleti desno (right: -16px)
   a druga udje u tok.

   Original to radi mijenjanjem position, sto tjera pretrazivac na
   preracunavanje rasporeda pri svakom hoveru. Isti vizuelni rezultat se
   dobija jednim translateX na roditelju, sto ide na GPU. To je jedina
   namjerna izmjena u odnosu na original i vizuelno se ne razlikuje.
   -------------------------------------------------------------------------- */
.btn__icons {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 1px;
  width: var(--btn-icon);
  height: var(--btn-icon);
  overflow: hidden;
}

.btn__icon {
  flex: none;
  width: var(--btn-icon);
  height: var(--btn-icon);
  transform: translateX(0);
  transition: transform var(--duration-hover) var(--ease-hover);
}

/* Druga strelica ceka van kadra lijevo. */
.btn__icon:last-child { margin-left: calc(-2 * var(--btn-icon) - 1px); }
.btn__icon:first-child { transform: translateX(0); }

.btn:hover .btn__icon,
.btn:focus-visible .btn__icon,
.svc:hover .btn__icon { transform: translateX(calc(var(--btn-icon) + 1px)); }

/* --------------------------------------------------------------------------
   VARIJANTE PO KONSTRI
   -------------------------------------------------------------------------- */

/* Primarno: puno crno sa pet slojeva sjenke. */
.btn--solid {
  background-color: var(--pure-black);
  border-color: transparent;
  color: var(--cream-100);
  box-shadow: var(--shadow-btn);
}

/* Sekundarno: providno, ivica 1px.
   --------------------------------------------------------------------------
   Izvor na ovom dugmetu nosi mix-blend-mode: exclusion. Provjereno sta taj
   blend stvarno radi na Konstri: NISTA. Dugme sjedi u kontejneru koji ima
   transform i will-change, sto pravi kontekst slaganja, pa se blend racuna
   prema praznoj podlozi (alfa 0) i vraca izvorne boje nepromijenjene.
   Zato na zivom sajtu ivica i natpis izgledaju obicno tamno.

   Prepisali smo ga doslovno i dobili tacno ono sto original izbjegava
   slucajno: kod nas transformacija nestane cim se ulazna animacija zavrsi,
   blend procuri na fotografiju i crn tekst postane zut na zutom, oko 1.2:1.

   Zato je blend uklonjen. Rezultat je pixel-identican zivom sajtu, a nema
   ni jednog rezima koji moze da pukne kad se raspored promijeni. */
.btn--outline-soft {
  background-color: transparent;
  color: var(--ink-900);
}

.btn--outline-soft::after { border-color: var(--ink-900); }
.btn--outline-soft:hover::after { border-color: var(--ink-900); }

/* Dugme bez znacke: original je 36px sa paddingom 8px 20px.
   Opet minus 1px po strani zbog providne ivice. */
.btn--plain {
  min-height: var(--btn-height-sm);
  padding: 7px var(--btn-pad-inline);
  gap: 10px;
}

.btn__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-badge);
  height: var(--btn-badge);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  transition: background-color var(--duration-fast) var(--ease-spring),
              color var(--duration-fast) var(--ease-spring),
              translate var(--duration-fast) var(--ease-spring);
}

.btn__badge svg { width: 16px; height: 16px; }
.btn:hover .btn__badge { translate: 2px 0; }

/* Primarno: crno punjenje, bijela znacka. */
.btn--primary {
  background-color: var(--color-heading);
  color: var(--white);
}
.btn--primary .btn__badge { background-color: var(--white); color: var(--color-heading); }
.btn--primary:hover { background-color: var(--orange-600); }

/* Akcenat: tirkizno punjenje. */
.btn--accent {
  background-color: var(--color-accent);
  color: var(--color-on-accent);
}
.btn--accent .btn__badge { background-color: var(--color-on-accent); color: var(--color-accent); }
.btn--accent:hover { background-color: var(--color-accent-hover); }

/* Sekundarno na svijetloj podlozi: obris. */
.btn--outline {
  background-color: transparent;
  border-color: var(--color-border);
  color: var(--color-heading);
}
.btn--outline .btn__badge { background-color: var(--color-bg-alt); color: var(--color-heading); }
.btn--outline:hover { border-color: var(--color-heading); }

/* Na tamnoj podlozi: bijelo punjenje. */
.btn--on-dark {
  background-color: var(--white);
  color: var(--color-heading);
}
.btn--on-dark .btn__badge { background-color: var(--color-heading); color: var(--white); }
.btn--on-dark:hover { background-color: rgba(255, 255, 255, 0.88); }

/* Na tamnoj podlozi: providno sa obrisom. */
.btn--on-dark-outline {
  background-color: transparent;
  border-color: var(--color-dark-border);
  color: var(--white);
}
.btn--on-dark-outline .btn__badge { background-color: rgba(255, 255, 255, 0.14); color: var(--white); }
.btn--on-dark-outline:hover { border-color: rgba(255, 255, 255, 0.5); }

.btn--block { width: 100%; justify-content: center; }

/* ----- Kruzno dugme (strelice u karuselu, strelica na kartici) ------------ */

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: transparent;
  color: var(--color-heading);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color var(--duration-base) var(--ease-in-out),
              border-color var(--duration-base) var(--ease-in-out),
              color var(--duration-base) var(--ease-in-out);
}

.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { background-color: var(--color-heading); border-color: var(--color-heading); color: var(--white); }

.icon-btn--filled {
  background-color: var(--color-heading);
  border-color: var(--color-heading);
  color: var(--white);
}
.icon-btn--filled:hover { background-color: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }

.section--dark .icon-btn { border-color: var(--color-dark-border); color: var(--white); }
.section--dark .icon-btn:hover { background-color: var(--white); color: var(--color-heading); }

/* ==========================================================================
   5. KOMPONENTE
   ========================================================================== */

/* ----- 5.1 Kartica usluge ------------------------------------------------- */

.services__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (min-width: 640px)  { .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .services__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.service {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background-color: var(--white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--duration-base) var(--ease-in-out),
              transform var(--duration-base) var(--ease-out);
}

.service:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }

.service__num {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  color: var(--color-accent-text);
}

.service__icon {
  width: 28px;
  height: 28px;
  color: var(--color-heading);
}

.service__text {
  font-size: var(--text-sm);
  color: var(--color-text);
  flex: 1;
}

/* ----- 5.2 Kolaz na sekciji O nama ---------------------------------------- */

.collage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-8);
}

@media (min-width: 768px) {
  .collage { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
}

.collage__item {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background-color: var(--color-bg-alt);
}

.collage__item img { width: 100%; height: 100%; object-fit: cover; }

/* Blago razdesen ritam, kao raspršene slicice kod Struxa. */
@media (min-width: 768px) {
  .collage__item:nth-child(odd)  { translate: 0 var(--space-6); }
  .collage__item:nth-child(2)    { aspect-ratio: 4 / 5; }
  .collage__item:nth-child(3)    { aspect-ratio: 4 / 5; }
}

/* ----- 5.3 Galerija radova ------------------------------------------------ */

/* MRTAV BLOK ZA .works__grid JE OBRISAN 02.09.2026.
   Bio je ostatak napustenog Strux rasporeda: mreza od sest kolona sa
   nth-child pravilima koja su prve dvije kartice sirila na tri kolone,
   sljedece tri na dvije, a sestu na punu sirinu sa odnosom 21/9.

   Nijedan HTML nije koristio .works__grid sve do danas, pa su pravila samo
   stajala. Kad je sekcija Radovi presla na kartice i dobila bas tu klasu,
   stari blok je odmah preuzeo: umjesto tri jednake kolone dobile su se
   sest nejednakih, izmjereno 89.5px puta tri pa 289.1px puta tri.

   Ovo je OSMI put u ovom projektu da staro pravilo sa istim selektorom
   pregazi novo. Prije uvodjenja nove klase grepovati fajl.
   Nova pravila za .works__grid stoje na kraju ovog fajla. */

/* Stari blok za galeriju je obrisan 09.08.2026. Koristio je iste
   klase .work, .work__title i .work__meta kao nova lista po Konstri, a
   stajao je RANIJE u fajlu pa je nova lista mislila da radi.

   Nije radila: red je ispadao 972px visok umjesto 104px, jer je stari
   .work img { width:100% } vazio nad novom fotografijom koja se otkriva
   na hover, a ona treba da bude 220x132 i apsolutno pozicionirana.
   Izmjereno prije brisanja: 1296 x 972. */

/* ----- 5.4 Brojevi -------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-4);
}

@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); } }

.stat { display: flex; flex-direction: column; gap: var(--space-2); }

.stat__value {
  font-family: var(--font-display);
  font-size: var(--text-stat);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
  color: var(--color-heading);
}

.stat__label { font-size: var(--text-sm); color: var(--color-text); }
.stat__value .todo { font-size: 0.4em; vertical-align: 0.4em; }

.section--dark .stat__value { color: var(--white); }
.section--dark .stat__label { color: var(--color-dark-text); }

/* Siroka slika ispod brojki. */
.wide-media {
  margin-top: var(--space-8);
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 21 / 9;
  background-color: var(--color-bg-alt);
}

.wide-media img { width: 100%; height: 100%; object-fit: cover; }

/* ----- 5.5 Segmenti ------------------------------------------------------- */

.segments__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-5);
}

@media (min-width: 768px) { .segments__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.segment {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--white);
  border: var(--border-width) solid var(--color-border);
  transition: box-shadow var(--duration-base) var(--ease-in-out);
}

.segment:hover { box-shadow: var(--shadow-lift); }

.segment__media { aspect-ratio: 4 / 3; overflow: hidden; background-color: var(--color-bg-alt); }
.segment__media img { width: 100%; height: 100%; object-fit: cover; }

.segment__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-6);
}

/* ----- 5.6 Razlozi (Zasto mi), na tamnoj traci ---------------------------- */

.reasons {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--border-width);
  background-color: var(--color-dark-hairline);
  border: var(--border-width) solid var(--color-dark-hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

@media (min-width: 640px)  { .reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .reasons { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.reason {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background-color: var(--color-dark-bg);
}

.reason__icon { width: 26px; height: 26px; color: var(--orange-500); }

/* ----- 5.7 Proces --------------------------------------------------------- */

.steps { display: flex; flex-direction: column; }

.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4) var(--space-5);
  padding-block: var(--space-6);
  border-top: var(--border-width) solid var(--color-border);
  align-items: start;
}

.steps > .step:last-child { border-bottom: var(--border-width) solid var(--color-border); }

@media (min-width: 900px) {
  .step {
    grid-template-columns: 6rem minmax(0, 22ch) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-8);
  }
}

.step__num {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  color: var(--color-accent-text);
}

.step__title { grid-column: 2; }

@media (max-width: 899.98px) {
  .step__text { grid-column: 1 / -1; }
}

/* ----- 5.8 Testimonijali -------------------------------------------------- */

.testimonials {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (min-width: 768px) { .testimonials { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  background-color: var(--white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}

.stars { display: flex; gap: 2px; color: var(--amber-500); }
.stars svg { width: 16px; height: 16px; }

.testimonial__quote {
  flex: 1;
  font-size: var(--text-base);
  color: var(--color-heading);
  line-height: var(--leading-relaxed);
}

.testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
}

/* Krug sa inicijalom umjesto izmisljene fotografije klijenta. */
.avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background-color: var(--color-bg-alt);
  border: var(--border-width) solid var(--color-border);
  color: var(--color-heading);
  font-weight: var(--weight-semibold);
  flex-shrink: 0;
}

.testimonial__name {
  display: block;
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  font-size: var(--text-sm);
}

.testimonial__role { display: block; font-size: var(--text-sm); }

/* ----- 5.9 Forma ---------------------------------------------------------- */

.form { display: flex; flex-direction: column; gap: var(--space-5); }

.form__row {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-5);
}

@media (min-width: 640px) { .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.field { display: flex; flex-direction: column; gap: var(--space-2); }

.field__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
}

.field__required { color: var(--color-accent-text); }
.field__hint { font-size: var(--text-sm); }

.field__control {
  min-height: var(--touch-target-min);
  padding: var(--space-3) var(--space-4);
  background-color: var(--white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-heading);
  transition: border-color var(--duration-fast) var(--ease-in-out),
              box-shadow var(--duration-fast) var(--ease-in-out);
}

.field__control::placeholder { color: #9AA1A9; }
.field__control:hover { border-color: #CFD3D7; }
.field__control:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.14);
  outline: none;
}

textarea.field__control { resize: vertical; min-height: 8rem; }

select.field__control {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-heading) 50%),
    linear-gradient(135deg, var(--color-heading) 50%, transparent 50%);
  background-position: calc(100% - var(--space-5)) 55%, calc(100% - var(--space-4)) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--space-9);
}

/* ----- 5.10 Direktan kontakt ---------------------------------------------- */

.contact__layout {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-8);
}

@media (min-width: 1000px) {
  .contact__layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-9); }
}

.contact__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  background-color: var(--color-dark-bg);
  color: var(--color-dark-text);
  border-radius: var(--radius-lg);
}

.contact__panel .h3 { color: var(--white); }

.call-block {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background-color: rgba(255, 255, 255, 0.08);
  border: var(--border-width) solid var(--color-dark-border);
  border-radius: var(--radius-md);
  transition: background-color var(--duration-base) var(--ease-in-out);
}

.call-block:hover { background-color: rgba(255, 255, 255, 0.14); }

.call-block__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background-color: var(--white);
  color: var(--color-heading);
  flex-shrink: 0;
}

.call-block__icon svg { width: 20px; height: 20px; }

.call-block__label {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.call-block__number {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--white);
}

.contact-list { display: flex; flex-direction: column; gap: var(--space-4); }

.contact-item { display: flex; gap: var(--space-4); align-items: flex-start; }

.contact-item__icon {
  width: 20px; height: 20px;
  color: var(--orange-500);
  flex-shrink: 0;
  margin-top: 3px;
}

.contact-item__label {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.contact-item__value { color: var(--white); }
a.contact-item__value:hover { color: var(--orange-500); }

.map-slot {
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-4);
  border: var(--border-width) dashed var(--color-dark-border);
  border-radius: var(--radius-md);
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--text-sm);
}

/* ==========================================================================
   6. SEKCIJE
   ========================================================================== */

/* ----- 6.1 Zaglavlje  /  po Konstri ---------------------------------------
   Providno, fiksirano, bez pozadine i bez linije ispod. Lezi preko heroja.
   Sve mjere su prepisane iz izvornog koda Konstre.
   -------------------------------------------------------------------------- */

/* SKRIVANJE PRI SKROLOVANJU
   --------------------------------------------------------------------------
   Konstra zaglavlje krije na skrol nadolje i vraca na skrol nagore.
   Vrijednosti su iz izvora (script_main chunk):
     scrollDirection  { direction: "down", target: Ur }
     Ur               { y: -200 }
     transition Hr    { type: spring, bounce: 0, delay: 0.2, duration: 0.6 }
     threshold        0.5
   Dakle: pomak od 200px navise, spring bez prebacaja, sa odgodom od
   0.2s prije nego krene. Odgoda je bitna: bez nje zaglavlje trza na
   svaki sitan pokret tocka. */
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  width: 100%;
  padding: 24px var(--container-pad);
  background-color: transparent;
  border-bottom: 0;
  transform: translateY(0);

  /* Odgoda od 200ms vazi SAMO za pomjeranje, ne i za boju.
     Ranije je transition-delay stajao na cijeloj listi, a boja uopste
     nije bila u njoj, pa se pri povratku na vrh crna gasila u istom
     kadru. Sada boja prelazi kroz 600ms, bez odgode, u oba smjera. */
  transition:
    transform        600ms var(--ease-spring) 200ms,
    background-color 600ms var(--ease-hover)  0ms;
}

.header[data-hidden="true"] { transform: translateY(-200px); }

/* SKROLOVANO STANJE
   --------------------------------------------------------------------------
   Izmjereno na zivom sajtu, ne procijenjeno iz koda. Konstra ne mijenja
   samo poziciju: cim se napusti vrh, zaglavlje prelazi na drugu
   varijantu komponente, "Desktop (BG Black)", i mijenja sve boje.

                    na vrhu              skrolovano
     varijanta      Desktop Black        Desktop (BG Black)
     pozadina       rgba(0,0,0,0)        rgb(3, 0, 0)
     logo           #000000              #FFFFFF
     nav linkovi    #504732              #FFFFFF
     tacka          #000000              #FFFFFF
     CTA tekst      #000000              #FCF6E9
     visina         88px                 88px, nepromijenjena

   Ista crna kao punjenje primarnog dugmeta (--pure-black).
   Original prebacuje varijantu bez prelaza; ovdje boje prelaze mekano,
   jer se kod nas isti element preboji umjesto da se zamijeni. */
.header[data-scrolled="true"] { background-color: var(--pure-black); }

.header[data-scrolled="true"] .brand__name { color: var(--cream-50); }

/* Badge je hromiran. Na svijetlom se svodi na crno, na crnom na bijelo. */
.header[data-scrolled="true"] .brand__badge {
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.header[data-scrolled="true"] .nav__link { color: var(--cream-50); }
.header[data-scrolled="true"] .nav__dot  { background-color: var(--cream-50); }
.header[data-scrolled="true"] .btn--bare { color: var(--cream-100); }

.header[data-scrolled="true"] .menu-toggle {
  border-color: var(--cream-50);
  color: var(--cream-50);
}

.header[data-scrolled="true"] .menu-toggle:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

/* Otvoren meni ima prednost: zaglavlje ne smije da odleti sa njim. */
.header[data-menu="open"] { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .header { transition: none; transform: none; }
}

.header__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  max-width: var(--container-content);
  margin-inline: auto;
}

/* Logo i hamburger stoje zajedno. Na desktopu je hamburger sakriven, pa
   ova grupa ispadne sam logo, tacno kao Logo Wrapper na originalu. */
.header__brand-wrap {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

@media (min-width: 810px) {
  .header__brand-wrap { flex: none; width: min-content; }
}

.brand {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

/* Badge je hromiran i na pjescanoj podlozi se gubi. Zato je propusten
   kroz filter koji ga svede na jednu tamnu vrijednost, da stoji uz
   tekstualni wordmark umjesto da se muti. */
.brand__badge {
  width: 76px;
  height: auto;
  filter: brightness(0) saturate(100%);
  opacity: 0.9;
  transition: filter 600ms var(--ease-hover);
}

@media (max-width: 809.98px) { .brand__badge { width: 56px; } }

/* Wordmark ide po H4 presetu Konstre: Geist 500, 32/40, tracking -0.02em.
   Original je cist tekst bez znaka, pa je i ovdje tekst nosilac. */
/* Wordmark ide po H4 presetu Konstre (Geist 500, tracking -0.02em), ali
   je na zahtjev spusten na 34px, dok je badge podignut na 76px: znak nosi,
   natpis prati. */
.brand__name {
  font-family: var(--font-display);
  transition: color 600ms var(--ease-hover);
  font-size: 34px;
  font-weight: var(--weight-medium);
  line-height: 1.1;
  letter-spacing: var(--tracking-tighter);
  text-transform: none;
  color: var(--ink-900);
  white-space: nowrap;
}

@media (max-width: 809.98px) { .brand__name { font-size: 26px; } }

/* --- Navigacija --- */

.nav {
  display: none;
  flex-direction: row;
  align-items: center;
  gap: 0;
  width: min-content;
}

@media (min-width: 810px) {
  .nav { display: flex; }
}

/* Link: gap 8px izmedju tacke i natpisa, padding 8px 16px, overflow clip
   da tacka koja ceka lijevo van okvira ostane sakrivena. */
.nav__link {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: auto;
  padding: 8px 16px;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  color: var(--brown-800);
  transition: color var(--duration-hover) var(--ease-hover);
}

/* Tacka: 9x9px krug. Na originalu stoji apsolutno na left: -15px i na
   hover predje u position: relative, cime udje u tok i gurne natpis
   udesno za 9px tacke plus 8px razmaka.

   Position se ne moze animirati, pa se isto postize negativnom marginom:
   -33px je 16px paddinga plus 17px sirine sa razmakom, sto tacku iznese
   skroz van okvira gdje je overflow odsijeca. Na hover margina ide na 0
   i natpis se pomjeri isto kao na originalu. */
.nav__dot {
  flex: none;
  width: 9px;
  height: 9px;
  margin-left: -33px;
  border-radius: var(--radius-pill);
  background-color: var(--ink-900);
  opacity: 0;
  transition:
    margin-left var(--duration-hover) var(--ease-hover),
    opacity     var(--duration-hover) var(--ease-hover);
}

.nav__link:hover,
.nav__link:focus-visible { color: var(--ink-900); }

.nav__link:hover .nav__dot,
.nav__link:focus-visible .nav__dot { margin-left: 0; opacity: 1; }

/* --- Desna strana --- */

/* Razmak je veci nego izmedju ostalih stavki jer su telefon i Kontakt
   dvije odvojene radnje, a golo dugme nema pozadinu da ih razdvoji. */
.header__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-6);
  width: min-content;
}

.header__call {
  display: none;
  align-items: center;
  gap: var(--space-2);
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  color: var(--brown-800);
  white-space: nowrap;
  transition: color var(--duration-hover) var(--ease-hover);
}

.header__call:hover { color: var(--ink-900); background-color: transparent; }
.header__call svg { width: 18px; height: 18px; }
.header__call span { display: inline; }

@media (min-width: 1100px) { .header__call { display: inline-flex; } }

/* Manja varijanta dugmeta, iz izvora: padding 12px 16px. */
.btn--sm { padding: 12px 16px; }

/* Golo dugme: bez pozadine, bez ivice, bez sjenke. Samo natpis i strelica.
   Zadrzava rolanje slova i zamjenu ikone kao i svako drugo dugme. */
.btn--bare {
  padding: 12px 0;
  background-color: transparent;
  color: var(--ink-900);
  box-shadow: none;
}

.btn--bare::after { border-color: transparent; }

.header__cta { display: none; }

@media (min-width: 810px) { .header__cta { display: inline-flex; } }

/* --- Hamburger, samo ispod 810px --- */

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  background: transparent;
  border: var(--border-width) solid var(--ink-900);
  border-radius: var(--radius-pill);
  color: var(--ink-900);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-hover);
}

.menu-toggle:hover { background-color: rgba(27, 25, 21, 0.08); }
.menu-toggle svg { width: 20px; height: 20px; }
.menu-toggle__close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__open  { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: block; }

@media (min-width: 810px) { .menu-toggle { display: none; } }

/* --- Otvoren meni na mobilnom ---
   Original prelazi u kolonu sa razmakom 32px i dugmetom pune sirine. */
@media (max-width: 809.98px) {
  /* Otvoren meni koristi istu crnu kao skrolovano zaglavlje, da mobilni
     i desktop ne izgledaju kao dva razlicita sajta. */
  .header[data-menu="open"] {
    background-color: var(--pure-black);
    border-bottom: 0;
  }

  .header[data-menu="open"] .brand__name { color: var(--cream-50); }
  .header[data-menu="open"] .brand__badge { filter: brightness(0) invert(1); }
  .header[data-menu="open"] .nav__link { color: var(--cream-50); }
  .header[data-menu="open"] .nav__dot  { background-color: var(--cream-50); }
  .header[data-menu="open"] .btn--bare { color: var(--cream-100); }

  .header[data-menu="open"] .menu-toggle {
    border-color: var(--cream-50);
    color: var(--cream-50);
  }

  .header[data-menu="open"] .header__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
  }

  .header[data-menu="open"] .header__brand-wrap { width: 100%; }

  .nav[data-open="true"] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .nav[data-open="true"] .nav__link { padding-inline: 0; }
  .nav[data-open="true"] .nav__dot  { margin-left: -17px; }

  .header[data-menu="open"] .header__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    width: 100%;
  }

  .header[data-menu="open"] .header__call { display: inline-flex; }
  .header[data-menu="open"] .header__cta  { display: inline-flex; width: 100%; }
}

/* ----- 6.2 Hero  /  po Konstri --------------------------------------------
   Sve mjere dolje su prepisane iz izvornog koda Konstre, ne procijenjene.
   Dokazi: research/2026-08-09-konstra-teardown.md
   -------------------------------------------------------------------------- */

/* Original: height 100vh, padding 180px 72px 64px, justify center.
   Na mobilnom padding 160px 16px 64px i justify flex-start.
   Koristimo 100svh umjesto 100vh da traka pretrazivaca na telefonu
   ne odsijeca dno sekcije. */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  min-height: 100svh;
  padding: 160px var(--container-pad) var(--space-9);
  overflow: hidden;
  isolation: isolate;
  background-color: var(--sand-300);
}

/* Od tableta navise hero je TACNO visine ekrana, kao na Konstri
   (height: 100vh, overflow hidden, justify center). Cim se malo
   proskroluje, krece sljedeca sekcija.

   Da bi sadrzaj stao i na nizim ekranima, odmaci se vezuju za visinu
   ekrana umjesto da budu fiksni. Original ima 180px / 64px, sto su
   ovdje gornje granice:
     na 1080px visine  ->  151px gore, 75px dolje
     na  900px visine  ->  126px gore, 63px dolje
   Racun na 1440x900: 900 - 189 = 711px slobodno, sadrzaju treba 662px. */
@media (min-width: 810px) {
  .hero {
    justify-content: center;
    height: 100svh;
    min-height: 0;
    padding-top: clamp(120px, 14vh, 180px);
    padding-bottom: clamp(32px, 7vh, 64px);
  }
}

/* --- Fotografija i gradijent preko nje --- */

.hero__image {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
  overflow: hidden;
  will-change: transform;
}

/* KADRIRANJE, ovo je namjerno i racunato.
   --------------------------------------------------------------------------
   Fotografija: 4857x3239. Ljevi radnik pocinje na 41% visine kadra, a sve
   iznad toga je cisto nebo bez ijednog detalja.

   Sa obicnim cover kadriranjem i visinom 100%, radnik padne na 42% visine
   heroja, dakle tacno iza vodeceg teksta. Zato je slika visoka 150% heroja
   i zakacena za vrh: time se ista tacka kadra spusti na 61% visine heroja,
   ispod dugmadi, a gornji dio heroja ostane cisto nebo.

   Racun po ekranu (dugmad se zavrsavaju na oko 56% visine):
     1920x1080  slika 1620px  ->  radnik na 663px, dugmad na 601px
     1440x900   slika 1350px  ->  radnik na 552px, dugmad na 499px
   Uvijek ispod, na svakoj visini ekrana, jer su obje mjere procenti
   iste visine.

   Donja trecina fotografije, gdje je skela najgusca, ispada iz kadra.
   To je dobro: ostaje nebo, radnik i gornji dio konstrukcije. */
.hero__image img {
  display: block;
  width: 100%;
  height: 150%;
  object-fit: cover;
  object-position: center top;
}

/* NA TELEFONU OVO KADRIRANJE PUCA, i to je bio najveci kvar na mobilnoj
   verziji. Racun, izmjereno na 375x812:

     hero je visok 992px, pa je okvir slike 375 x 1488 (150%)
     fotografija je 4857 x 3239, dakle polozena, odnos 1.5:1
     cover je skalira na 2229 x 1488 i sijece na 375 sirine
     to je 17% sirine izvornika, uspravna trakica iz sredine
     a sa "center top" ta trakica pocinje na vrhu kadra

   Vrh te fotografije je NEBO NA ZALASKU. Zato je hero na telefonu
   izgledao kao ravno zuto polje bez ijednog detalja: fotografija je
   bila tu cijelo vrijeme, samo se vidjelo cisto nebo, a radnici i
   konstrukcija su bili odsjeceni ispod donje ivice.

   Na Konstri je na telefonu obrnuto: gradijent drzi gornje dvije
   trecine, a fotografija se vidi u donjoj trecini. Zato ovdje slika
   ide na punu visinu heroja (bez 150%) i sidri se na donji dio kadra. */
@media (max-width: 809.98px) {
  .hero__image img {
    height: 100%;
    object-position: 50% 78%;
  }
}

/* Srce heroja. Gradijent je NEPROVIDAN na vrhu i providan od 46% nanize,
   pa naslov moze biti taman i savrseno citljiv: gornja polovina sekcije
   i nije fotografija nego ravno pjescano polje. Fotografija se otvara
   tek ispod teksta. Tri zaustavljanja su doslovno iz izvora. */
/* Struktura gradijenta je Konstrina: neprovidno na vrhu, 70% na 21%,
   providno na 46%. Boja NIJE, i to je racunato.

   Konstra koristi #FAE1A6, jer njihova fotografija ima blijedo pjescano
   nebo koje se sa tom bojom poklapa. Nase nebo je znatno zasicenije:
   uzorkovano iz same fotografije, na tacki gdje gradijent postaje
   providan piksel je #FFBC24, a lijevo i desno #ECA910 i #FFCA30.

   Sa #FAE1A6 na vrhu prelaz ide sa svjetline 81% na 57% uz skok u
   zasicenju, pa se vidi kao traka. Zato je uzeta ista nijansa kao nebo
   (41 stepen), samo svjetlija: #FBD077. Hue se poklapa sa fotografijom,
   mijenja se samo svjetlina, i prelaz nestane.

   Dodato je i cetvrto zaustavljanje na 34%, u boji bliskoj nebu, da se
   ramp ne lomi na sredini.

   Kontrast ostaje visok: #1B1915 na #FBD077 = 12.0:1, #504732 = 6.3:1.

   Brend akcenat --sand-300 se NE dira: ovo je boja samo za hero nebo. */
.hero__overlay {
  --hero-sky: #FBD077;

  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--hero-sky)              0%,
    rgba(251, 208, 119, 0.72)   21%,
    rgba(252, 197, 74, 0.34)    34%,
    rgba(255, 188, 36, 0)       46%
  );
}

/* Na telefonu se preliv drzi duze. Na desktopu je hero sirok pa se
   fotografija otvara vec od 46% i tekst je iznad nje. Na 375 je sve
   uspravno: naslov, opis i DVA dugmeta jedno ispod drugog stignu skoro
   do 70% visine, pa je fotografija na 46% ulazila tacno u drugo dugme,
   koje je providno sa tamnom ivicom, i natpis se gubio u konstrukciji.
   Na Konstri preliv na telefonu drzi gornje dvije trecine, a fotografija
   se vidi u donjoj trecini. Isto je i ovdje. */
@media (max-width: 809.98px) {
  .hero__overlay {
    background: linear-gradient(
      180deg,
      var(--hero-sky)              0%,
      rgba(251, 208, 119, 0.88)   38%,
      rgba(252, 197, 74, 0.45)    58%,
      rgba(255, 188, 36, 0)       72%
    );
  }
}

/* --- Kontejner --- */

.hero__container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  max-width: var(--container-content);
}

@media (min-width: 1440px) {
  .hero__container { gap: var(--space-6); }
}

.hero__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  width: 100%;
}

.hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  width: 100%;
}

/* H1: Geist 500, 88/88 na desktopu, trekovanje tacno 0.
   Original ima max-width 754px na desktopu, 561px na tabletu. */
.hero__title {
  margin: 0;
  max-width: 754px;
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-h1);
  letter-spacing: var(--tracking-normal);
  color: var(--color-heading);
  text-wrap: balance;
}

/* Sirina je odstupanje od originala, na zahtjev: naslov mora da se prelomi
   tacno na "Metalne konstrukcije" / "po mjeri.". Izmjereno u browseru,
   prvi red trazi 866px na 88px i 689px na 70px, a Konstrin okvir je 754px
   odnosno 561px. Zato je prosiren tek toliko da prvi red stane.
   Na mobilnom se prelama sam, jer 551px ne staje u 343px sirine. */
@media (min-width: 810px) and (max-width: 1439.98px) {
  .hero__title { max-width: 700px; text-wrap: initial; }
}

@media (min-width: 1440px) {
  .hero__title { max-width: 880px; text-wrap: initial; }
}

/* Vodeci tekst: 18/28 desktop, 17/28 tablet, 16/22 mobilni.

   Konstrin okvir je 447px, sto kod nase duze recenice daje TRI reda.
   Izmjereno: recenica trazi 548px za dva reda na 18px i 518px na 17px,
   pa je okvir prosiren na 560px. Odstupanje od originala, na zahtjev. */
.hero__lead {
  margin: 0;
  max-width: 560px;
  font-size: var(--text-lg);
  line-height: var(--leading-lead);
  color: var(--brown-800);
}

@media (max-width: 809.98px) {
  .hero__lead { max-width: 330px; }
}

/* --- Dugmad --- */

/* Original: red, gap 12px, ukupna sirina 345px.
   145px (prvo, auto) + 12px + 188px (drugo, flex 1). */
.hero__buttons {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-3);
  width: 345px;
  max-width: 100%;
}

.hero__button { flex: none; }
.hero__button--flex { flex: 1 0 0; width: 1px; max-width: 188px; }
.hero__button .btn { width: 100%; }

/* Mobilni: kolona, oba dugmeta puna sirina. */
@media (max-width: 809.98px) {
  .hero__buttons { flex-direction: column; width: 100%; }
  .hero__button, .hero__button--flex { width: 100%; max-width: none; flex: none; }

  /* CITLJIVOST PREKO FOTOGRAFIJE, izmjereno pa rijeseno.
     -----------------------------------------------------------------------
     Na 375x812 sadrzaj heroja stoji ovako, u procentima visine sekcije:
       naslov 20-42%, opis 44-53%, prvo dugme 57-63%, drugo 64-70%.
     Konstra ima potpuno isti raspored (20-42 / 44-52 / 56-62 / 64-70) i
     gradijent koji se gasi na 46%, dakle njihova dva donja elementa TAKODJE
     stoje preko fotografije. Kod njih to prolazi jer im je gornji dio kadra
     vedro nebo na zalasku. Nasa fotografija je tu tamna konstrukcija.

     Mjereno na stvarnim pikselima, kontrast drugog dugmeta (#1B1915) je
     bio 1.79 pri gradijentu do 46%, i 2.42 pri 72%. Pomjeranje kadra ne
     pomaze: na 375 je slika skalirana na 1217x812, dakle visina TACNO
     popuni okvir i object-position po Y nema sta da pomjera. Provjereno na
     pet vrijednosti, kontrast se nije mrdnuo.

     Zato se ne dira kadar nego sami elementi: opis ide na najtamnije
     slovo, a drugo dugme dobija pjescanu podlogu umjesto providne. Ostaje
     sporedno u odnosu na prvo, crno, ali vise ne zavisi od toga sta je
     iza njega. */
  .hero__lead { color: var(--ink-900); }

  .hero__button--flex .btn--outline-soft {
    background-color: rgba(250, 225, 166, 0.92);
    /* -webkit- prefiks je OBAVEZAN: Safari, i na iPhoneu i na Macu, ne
       razumije nepredfiksirani backdrop-filter. Bez njega dugme na herou
       ostaje bez zamucenja. Jedino mjesto u fajlu gdje je nedostajao. */
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
}

/* --- Kartica sa rotacijom slika, dolje desno --- */

.hero__aside {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end;
  width: 100%;
}

@media (max-width: 809.98px) {
  /* Rotirajuca kartica sa fotografijama se na telefonu SKLANJA.
     Na 375 je bila siroka koliko i ekran i visoka preko 300px, pa je
     produzavala hero za trecinu i zavrsavala presjecena donjom ivicom
     ekrana. Konstra je na telefonu takodje nema: njihov hero je naslov,
     opis, dva dugmeta i fotografija, i nista vise.
     Isti dokaz stoji nize u sekciji Radovi, gdje je galerija sa
     lightboxom, pa se sadrzaj ne gubi. */
  .hero__aside { display: none; }
}

.pcard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  width: 386px;
  max-width: 100%;
  text-decoration: none;
  cursor: pointer;
}

/* Okvir kartice. Traka izmedju slike i ivice NIJE bijela: to je providna
   pjescana boja kroz koju se, jako zamuceno, nazire fotografija ispod.

   Original ima blur(9.7px). Na zahtjev je pojacano na 70px, sto tu usku
   traku pretvara u ravnu mlijecnu boju umjesto u prepoznatljivu sliku.
   Vrijednost je u tokenu da se mijenja na jednom mjestu.

   Zamucuje se PROSTOR, ne ivica: backdrop-filter djeluje na ono sto je
   iza elementa, a ivica se crta preko toga i ostaje ostra. */
.pcard {
  --pcard-frame-blur: 70px;
}

.pcard__frame {

  width: 100%;
  padding: 8px;
  /* Konstra ovdje ima svijetlu ivicu #D2CCBC, jer joj kartica stoji na
     tamnom dijelu fotografije. Kod nas stoji na svijetlom zutom nebu i
     ta ivica se gubi. Zato je tamna: #1B1915 na 55% daje jasnu liniju
     a ne tvrd crn okvir. */
  border: var(--border-width) solid rgba(27, 25, 21, 0.55);
  border-radius: 12px;
  background-color: rgba(237, 202, 94, 0.2);
  backdrop-filter: blur(var(--pcard-frame-blur));
  -webkit-backdrop-filter: blur(var(--pcard-frame-blur));
}

.pcard__images {
  position: relative;
  width: 100%;
  min-height: 244px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: var(--stone-300);
}

/* Svi slajdovi lezu jedan preko drugog. Aktivan ima opacity 1. */
.pcard__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity var(--duration-hover-slow) var(--ease-hover);
}

.pcard__slide.is-active { opacity: 1; }

.pcard__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Veo sa naslovom, vidljiv na hover. Original: backdrop blur 2px. */
.pcard__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  background-color: rgba(27, 25, 21, 0.28);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: opacity var(--duration-hover-slow) var(--ease-hover);
}

.pcard:hover .pcard__veil,
.pcard:focus-visible .pcard__veil { opacity: 1; }

.pcard__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-h5);
  letter-spacing: var(--tracking-tight);
  color: var(--cream-100);
}

/* Paginacija: 01, traka, 02, traka, 03. Gap 8px.

   Na Konstri su brojevi i traka kremasti, jer im kartica stoji na tamnom
   dijelu fotografije. Kod nas stoji na svijetlom zutom nebu, gdje se
   krem na zutom prakticno ne vidi (oko 1.6:1). Zato su prebaceni na
   tamnu: #1B1915 na #FFBC24 daje 11.6:1. */
/* ODSTUPANJE OD IZVORA, i to iz mjerenja a ne iz ukusa.
   --------------------------------------------------------------------------
   Na Konstri paginacija stoji gola preko fotografije, u kremastoj boji,
   jer im je podloga ispod nje uvijek tamna. Kod nas nije. Izmjerena
   svjetlina podloge tacno ispod ove trake:

     1920x1080   57   74% piksela tamno   ->  trazi svijetao tekst
     1440x900   195    5% piksela tamno   ->  trazi taman tekst
     1280x800   197    4% piksela tamno   ->  trazi taman tekst

   Razlog je nasa fotografija: crna skela pada na razlicitu visinu u
   odnosu na karticu, zavisno od visine ekrana. Nijedna jedna boja teksta
   ne prolazi na svim ekranima.

   Zato traka dobija svoju podlogu, isti materijal kao okvir slike iznad
   nje: pjescana boja sa jakim zamucenjem. Racun pokazuje da na 72%
   neprovidnosti daje svjetlinu 197 iznad tamne podloge i 236 iznad
   svijetle, dakle uvijek svijetlu, pa taman tekst prolazi svuda
   (najgori slucaj oko 8:1). */
.pcard__pagination {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background-color: rgba(252, 246, 233, 0.72);
  backdrop-filter: blur(var(--pcard-frame-blur, 70px));
  -webkit-backdrop-filter: blur(var(--pcard-frame-blur, 70px));
}

.pcard__num {
  flex: none;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--ink-900);
  opacity: 0.5;
  transition: opacity var(--duration-hover) var(--ease-hover);
}

.pcard__num.is-active { opacity: 1; }

.pcard__track {
  flex: 1 0 0;
  height: 2px;
  border-radius: var(--radius-lg);
  background-color: rgba(27, 25, 21, 0.18);
  overflow: hidden;
}

/* Original gura sirinu u koracima od 60ms, pa je i prelaz 60ms linear. */
.pcard__fill {
  display: block;
  width: 0%;
  height: 100%;
  background-color: var(--ink-900);
  transition: width 60ms linear;
}



/* ----- 6.2b Ulazne animacije heroja ---------------------------------------
   Odgode i trajanja su doslovno iz __framer__appearAnimationsContent
   u izvoru Konstre. Nista nije procijenjeno.

   SIGURNOSNO PRAVILO: klasa .js-appear se stavlja na <html> ISKLJUCIVO iz
   skripte. Da stoji staticki u HTML-u, cio hero bi ostao nevidljiv ako
   JavaScript ne ucita. Ovako bez skripte sve prosto stoji na svom mjestu.

   Framer spring nema tacan cubic-bezier ekvivalent. Za bounce:0 springove
   koristimo cubic-bezier(0.16, 1, 0.3, 1), koja se poklapa u prva dva
   decimalna mjesta kroz cijelo trajanje. Jedina aproksimacija u prenosu.
   -------------------------------------------------------------------------- */

/* Bez will-change, i to NIJE propust.
   --------------------------------------------------------------------------
   will-change: transform pravi backdrop root na elementu. Kartica dolje
   desno nosi data-appear, a unutar nje okvir slike koristi backdrop-filter.
   Dok je will-change bio postavljen, taj filter je uzorkovao samo sadrzaj
   kartice, dakle nista, pa zamucenja nije ni bilo bez obzira na to koliko
   je bila velika vrijednost blur().

   Prelaz od 1.4s na opacity i transform ide na GPU i bez tog nagovjestaja. */
.js-appear [data-appear] {
  opacity: 0.001;
  transform: translateY(var(--reveal-shift));
}

/* Slika ne blijedi, samo se skuplja sa 1.4 na 1. */
.js-appear [data-appear="image"] {
  opacity: 1;
  transform: scale(1.4);
}

.js-appear [data-appear].is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity   var(--duration-slow) var(--ease-spring),
    transform var(--duration-slow) var(--ease-spring);
  transition-delay: var(--appear-delay, 0ms);
}

/* Slika ima svoje trajanje: 1.8s, odgoda 0.1s. */
.js-appear [data-appear="image"].is-in {
  transition-duration: var(--duration-image);
}

[data-appear="image"] { --appear-delay: var(--hero-delay-image); }
[data-appear="text"]  { --appear-delay: var(--hero-delay-text); }
[data-appear="btn-1"] { --appear-delay: var(--hero-delay-btn-1); }
[data-appear="btn-2"] { --appear-delay: var(--hero-delay-btn-2); }
[data-appear="card"]  { --appear-delay: var(--hero-delay-card); }

/* --------------------------------------------------------------------------
   NASLOV, REVEAL PO RIJECI
   --------------------------------------------------------------------------
   Iz izvora: tokenization "word", trigger "onMount", startDelay 0.7s,
   korak 0.05s po rijeci, spring damping 40 / stiffness 250 / mass 1.

   Taj spring daje faktor prigusenja 1.27, dakle prigusen preko kriticne
   granice, bez ijednog prebacaja. Slijeganje oko 0.5s, pa je trajanje
   ovdje 600ms.

   Pocetno stanje doslovno: opacity .001, blur(10px), x -1px, y 10px.
   -------------------------------------------------------------------------- */
.hero__word {
  display: inline-block;
  white-space: pre;
}

.js-appear .hero__word {
  opacity: 0.001;
  filter: blur(var(--hero-word-blur));
  transform: translate(-1px, 10px);
  will-change: transform, opacity, filter;
}

.js-appear [data-split-words].is-in .hero__word {
  opacity: 1;
  filter: blur(0);
  transform: none;
  transition:
    opacity   var(--hero-word-duration) var(--ease-spring),
    transform var(--hero-word-duration) var(--ease-spring),
    filter    var(--hero-word-duration) var(--ease-spring);
  transition-delay: calc(var(--word-delay, 0ms) + var(--i, 0) * var(--hero-word-step));
}

/* Naslov u herou krece poslije slike i teksta; naslovi sekcija krecu
   odmah cim udju u kadar, jer ih tada korisnik prvi put i vidi. */
.hero__title { --word-delay: var(--hero-delay-title); }

/* Postovanje sistemske postavke. Original Konstra je NE postuje: kod nje
   se animacije vrte i kad korisnik trazi manje pokreta. */
@media (prefers-reduced-motion: reduce) {
  .js-appear [data-appear],
  .js-appear [data-appear="image"],
  .js-appear .hero__word {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }

  .btn__char-inner,
  .btn__icon { transition: none; }
  .btn:hover .btn__char-inner { transform: none; }
  .btn:hover .btn__icon { transform: none; }
}

/* ----- 6.2c O nama  /  po Konstri -----------------------------------------
   Crna traka odmah ispod heroja. Sve mjere iz izvora Konstre.
   -------------------------------------------------------------------------- */

/* z-index 1 je OBAVEZAN, ne kozmetika: hero se pri skrolovanju pomjera
   sporije od stranice i mora da ostane ISPOD ove sekcije. Bez toga bi
   virio preko nje. Pozadina mora biti neprovidna iz istog razloga. */
.about {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 72px;
  width: 100%;
  padding: 112px var(--container-pad);
  background-color: var(--pure-black);
  overflow: hidden;
}

@media (max-width: 809.98px) {
  .about { gap: 40px; padding: 64px var(--container-pad); }
}

.about__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 72px;
  width: 100%;
  max-width: var(--container-content);
}

@media (max-width: 809.98px) { .about__container { gap: 40px; } }

.about__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}

/* Oznaka sekcije: kvadratic pa tekst. Kvadratic je 12x12px sa radiusom
   od 2px, dakle skoro ostar, i jedina je topla boja u cijeloj paleti. */
.label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--cream-100);
}

.label__dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background-color: var(--coral-400);
}

/* Naslov: Geist 500, 56/64 na desktopu, trekovanje -0.1px, centriran.
   Mobilna vrijednost 32/40 je iz izvora. */
.about__title {
  margin: 0;
  max-width: 1100px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: var(--weight-medium);
  line-height: 64px;
  letter-spacing: -0.1px;
  color: var(--cream-100);
}

@media (min-width: 810px) and (max-width: 1439.98px) {
  .about__title { font-size: 44px; line-height: 52px; }
}

@media (max-width: 809.98px) {
  .about__title { font-size: 32px; line-height: 40px; }
}

/* --------------------------------------------------------------------------
   POPUNJAVANJE NASLOVA PRI SKROLOVANJU
   --------------------------------------------------------------------------
   Iz izvora: svako slovo ide opacity 0.2 -> 1 i boja #BAB3A2 -> #FCF6E9.
   Opseg je vezan za polozaj sekcije: pocinje kad joj vrh dodje na 70%
   visine ekrana, zavrsava se na 30%.

   Skripta upisuje samo --t (0 do 1) po slovu. Interpolacija boje ide
   kroz color-mix, pa je po kadru jedan upis umjesto dva. Ako pretrazivac
   ne podrzava color-mix, slovo ostane u zavrsnoj boji, sto je i dalje
   citljivo.
   -------------------------------------------------------------------------- */
/* Naslov se popunjava i na SVIJETLOJ podlozi (sekcija "Pravila koja se
   vide" na stranici O nama). Podrazumijevano je za tamnu: slova se pale u
   kremastu. Na svijetlom stranice.css prebacuje --fill-on na mastilo,
   inace bi popunjen naslov bio krem na kremu. */
.fill-char {
  display: inline-block;
  color: var(--fill-on, var(--cream-100));
}

.js-scroll-fill .fill-char {
  opacity: calc(0.2 + 0.8 * var(--t, 0));
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
  .js-scroll-fill .fill-char {
    color: color-mix(in srgb,
      var(--fill-on, var(--cream-100)) calc(var(--t, 0) * 100%),
      var(--fill-off, var(--stone-500)));
  }
}

/* Rijec se ne smije prelomiti na pola, pa svaka ide u svoj nowrap blok. */
.fill-word { display: inline-block; white-space: nowrap; }

/* Obavezna recenica firme. Konstra ovdje nema paragraf; zadrzan je jer
   mora stajati doslovno, pa je namjerno tisi od naslova. */
.about__note {
  margin: 0;
  max-width: 760px;
  text-align: center;
  font-size: var(--text-lg);
  line-height: var(--leading-lead);
  color: var(--stone-500);
}

/* --------------------------------------------------------------------------
   KARTICE
   --------------------------------------------------------------------------
   Original: sirina 411px, unutra 32px, i razmak od 230px izmedju natpisa
   gore i vrijednosti dolje. Taj razmak je ono sto ih cini visokim i
   praznim u sredini, i zato izgledaju skupo.

   Kod nas su tri kartice sa tekstovima razlicite duzine. Fiksni razmak
   od 230px bi im dao razlicite visine, pa je zamijenjen sa min-height
   434px (isti racun: 32 + 32 + 230 + 108 + 32) i space-between.
   Vizuelno je isto, a kartice su uvijek jednake.

   Sirina je fleksibilna umjesto fiksnih 411px: tri po 411 plus dva
   razmaka od 32 daju 1297px, a kontejner na ekranu od 1440px ima 1296px.
   Fiksna vrijednost bi prelivala za jedan piksel.
   -------------------------------------------------------------------------- */
.about__cards {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--space-6);
  width: 100%;
}

@media (min-width: 810px) and (max-width: 1439.98px) {
  .about__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(50px, 1fr));
    gap: var(--space-6);
  }
}

@media (max-width: 809.98px) {
  .about__cards { flex-direction: column; gap: var(--space-5); }
}

.fact {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-9);
  min-height: 434px;
  padding: var(--space-6);
  border-radius: 12px;
  background-color: var(--ink-900);
  overflow: hidden;
}

/* flex: none je OBAVEZAN na telefonu. Kontejner .about__cards je na
   desktopu red, pa se "flex: 1 1 0" odnosi na sirinu i radi ispravno.
   Na telefonu prelazi u kolonu i ista flex-basis: 0 se odjednom odnosi na
   VISINU, pa su se kartice skupljale na visinu svog paddinga.
   Izmjereno prije popravke na 375: sve tri kartice po 48px, a sadrzaj im
   je ispadao napolje i overflow: hidden ga je sjekao. Na telefonu se od
   njih vidio samo naslov, sto se poklapa sa snimkom ekrana u
   assets/mobnas. */
@media (max-width: 809.98px) {
  .fact { flex: none; min-height: 0; gap: var(--space-6); padding: var(--space-5); }
}

.fact__label {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-h5);
  letter-spacing: var(--tracking-tight);
  color: var(--cream-50);
}

.fact__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
}

.fact__value {
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-h4);
  letter-spacing: var(--tracking-tighter);
  color: var(--cream-100);
}

.fact__note {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-lead);
  color: var(--stone-500);
}

/* --- Kartice sa tackastom shemom ---
   Kartica sa kartom ima tri djeteta umjesto dva, pa joj razmak pada sa
   64px na 32px. Bez toga bi bila jos 64px visa.

   Izmjereno na 1920: sadrzaj je 32 naslov + 32 razmak + 179 karta + 32
   razmak + 148 tekst = 423, plus 64 paddinga = 487px. To je iznad
   min-height od 434px, pa su sve TRI kartice porasle sa 434 na 487, jer
   stoje u redu i izjednacavaju visinu. Prihvaceno: da karta ostane u
   starih 434 morala bi da padne na 126px visine i 249px sirine, sto je
   u koloni od 355px izgledalo kao marka na koverti. */
.fact--viz { gap: var(--space-6); }

.factviz {
  position: relative;
  width: 100%;
  line-height: 0;
}

/* Ista maska kao u komponenti: gore i dole se karta gubi u podlogu, pa
   nema tvrde ivice preko cijele sirine kartice. */
.factviz__img {
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  pointer-events: none;
  user-select: none;
}

/* Polozaj je iz same biblioteke, ne sa oka. Maska NE ide na tacku, samo
   na kartu, jer bi je inace i nju progutala. */
.factviz__pin {
  position: absolute;
  left: 55.56%;
  top: 29.44%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: var(--radius-pill);
  background-color: var(--sand-300);
}

/* Talas oko tacke. U komponenti je to SMIL: r ide 2 -> 8 i opacity
   0.5 -> 0 kroz 1.5s, u krug. Isti odnos, samo kroz CSS: uvecanje 4x. */
.factviz__pin::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--sand-300);
  animation: pin-pulse 1.5s ease-out infinite;
}

@keyframes pin-pulse {
  from { transform: scale(1); opacity: 0.5; }
  to   { transform: scale(4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .factviz__pin::after { animation: none; opacity: 0.3; }
}

/* Prva kartica ulazi sa strane, ostale odozdo. Tako je i na originalu. */
.js-reveal-ready [data-reveal][data-reveal-from="left"] {
  transform: translateX(-50px);
}

.js-reveal-ready [data-reveal][data-reveal-from="left"].is-revealed {
  transform: none;
}

/* ----- 6.2d Usluge  /  po Konstri -----------------------------------------
   Cetiri siroke kartice jedna ispod druge, slika lijevo, tamni panel desno.
   Sve mjere su izmjerene na zivoj Konstri, ne procijenjene.
   -------------------------------------------------------------------------- */

.svcs {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 72px;
  width: 100%;
  padding: 112px var(--container-pad);
  background-color: var(--pure-black);

  /* NEMA overflow: hidden, i to je namjerno.
     Ono pravi kontekst skrolovanja i ubija position: sticky u karticama,
     pa se ne bi preklapale. Ako ikad zatreba odsijecanje, ide clip,
     koji ne pravi kontekst skrolovanja. */
}

@media (min-width: 810px) and (max-width: 1439.98px) { .svcs { padding: 80px var(--container-pad); } }
@media (max-width: 809.98px) { .svcs { gap: 40px; padding: 64px var(--container-pad); } }

.svcs__container {
  display: flex;
  flex-direction: column;
  gap: 72px;
  width: 100%;
  max-width: var(--container-content);
}

@media (max-width: 809.98px) { .svcs__container { gap: 40px; } }

/* Zaglavlje: oznaka pa naslov, poravnato lijevo. */
.svcs__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
}

/* Oznaka u ovoj sekciji je prigusenija nego u "O nama": #897F6C umjesto
   kremaste. Tako je i na originalu. */
.label--muted { color: var(--stone-700); }

/* Naslov sekcije: Geist 500, 56/64, max-width 687px. */
.svcs__title {
  margin: 0;
  max-width: 687px;
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: var(--weight-medium);
  line-height: 64px;
  letter-spacing: -0.1px;
  color: var(--cream-100);
}

/* Konstra boji drugi dio naslova pjescanom. Isto radimo i mi. */
.svcs__title-accent { color: var(--sand-300); }

@media (min-width: 810px) and (max-width: 1439.98px) {
  .svcs__title { max-width: 487px; font-size: 44px; line-height: 52px; }
}

@media (max-width: 809.98px) {
  .svcs__title { font-size: 32px; line-height: 40px; }
}

/* --- Lista kartica --- */

.svcs__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 100%;
}

@media (max-width: 809.98px) { .svcs__list { gap: var(--space-5); } }

/* PREKLAPANJE PRI SKROLOVANJU
   --------------------------------------------------------------------------
   Izmjereno na zivoj Konstri: svaka kartica sjedi u omotacu sa
   position: sticky i top: 120px, a svi omotaci dijele isti roditelj.
   Zato se sve cetiri lijepe na istu visinu i svaka sljedeca klizi preko
   prethodne, dok od one ispod ostaje samo gornja traka.

   Provjereno na cetiri polozaja skrola: kartica se zaustavi tacno na
   120px i tu ostane dok je sljedeca ne prekrije.

   z-index raste po kartici, inace bi ranija ostala iznad kasnije.
   -------------------------------------------------------------------------- */
.svc {
  position: sticky;
  top: var(--card-stack-top);
  z-index: var(--z, 1);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 48px;
  width: 100%;
  padding: 16px 32px 16px 16px;
  border-radius: 12px;
  background-color: var(--ink-900);
}

/* Kartica na hover NE mijenja boju i NE podize se. Provjereno na
   originalu: mijenja se samo slika, koja se uveca, i dugme, koje se
   ponasa kao da je pod misem. */

/* Slika: pola kartice, radius 8px, uvijek lijevo. Ne smjenjuje se
   lijevo-desno, jer na originalu stoji uvijek na istoj strani i to
   drzi oko na jednoj liniji kroz sve cetiri kartice. */
/* position: relative plus apsolutna slika NIJE stil nego popravka.
   Sa slikom u toku i height 100%, kutija ima automatsku visinu, pa
   pretrazivac to 100% ne moze da razrijesi i vrati se na sopstveni
   odnos stranica slike. Izmjereno: kartica je narasla na 832px umjesto
   558px cim bi se slika ucitala, i to samo poslije ucitavanja, sto je
   tesko uhvatiti. Ovako visinu diktira sadrzaj panela, a slika je puni. */
.svc__media {
  position: relative;
  /* Slika i panel NISU pola-pola. Izmjereno na Konstri: 632 naspram 568
     u kartici od 1296px. Odnos se zadaje kroz flex-basis. */
  flex: 632 0 0;
  min-width: 0;
  align-self: stretch;
  min-height: 526px;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--ink-950);
}

.svc__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-hover-slow) var(--ease-hover);
}

.svc:hover .svc__media img { transform: scale(var(--hover-scale)); }

/* Panel: razmak od 152px izmedju gornjeg i donjeg bloka. To je ono sto
   kartici daje visinu i mirnocu. */
.svc__content {
  display: flex;
  flex: 568 0 0;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-9);
  min-height: 526px;
  padding: var(--space-4) 0;
}

.svc__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

/* Naslov kartice: Geist 500, 44/50. */
.svc__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: var(--weight-medium);
  line-height: 50px;
  letter-spacing: var(--tracking-tighter);
  color: var(--cream-100);
}

.svc__desc {
  margin: 0;
  max-width: 440px;
  font-size: var(--text-lg);
  line-height: var(--leading-lead);
  color: var(--stone-500);
}

/* Dno kartice: lista lijevo, dugme desno, oba poravnata po donjoj ivici. */
/* Razmak je 16px a ne 24px, i to je racunato.
   Panel je 584px, dugme 193px. Sa razmakom od 24px listi ostaje 367px,
   a najsira stavka ("Kompletno: projekat -> izrada -> montaza") trazi
   370px i lomila se u dva reda. Sa 16px lista dobija 375px i sve stavke
   staju u jedan red, kao na originalu. */
.svc__foot {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
}

.scope {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  max-width: 400px;
  flex-direction: column;
  gap: var(--space-4);
}

.scope__label {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-lead);
  color: var(--cream-100);
}

.scope__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 17px umjesto Konstrinih 18px. Izmjereno: listi ostaje 333px cistog
   prostora za tekst, a najsira nasa stavka na 18px trazi 344px i lomi
   se u dva reda. Nase recenice su duze od engleskih original. Na 17px
   trazi 325px i sve dvadeset stavki stanu u jedan red. */
.scope__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  font-size: 17px;
  line-height: var(--leading-lead);
  color: var(--stone-500);
}

/* Kvacica: krug 18px sa 4px unutrasnjeg razmaka, ikona 10px.
   Pozadina je #BAB3A2 a kvacica crna, tacno kao na originalu. */
.scope__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background-color: var(--stone-500);
  color: var(--pure-black);
}

.scope__icon svg { display: block; width: 10px; height: 10px; }

/* Dugme na tamnom: providno sa svijetlom ivicom. */
.btn--outline-light {
  background-color: transparent;
  color: var(--cream-100);
  box-shadow: none;
}

.btn--outline-light::after { border-color: var(--cream-50); }
.btn--outline-light:hover,
.svc:hover .btn--outline-light { background-color: rgba(255, 255, 255, 0.06); }

.svc__cta { flex: none; }

/* --- Tablet: slika iznad teksta, kartica u kolonu --- */
@media (max-width: 1439.98px) {
  /* PREKLAPANJE OSTAJE I OVDJE, na zahtjev da bude kao na desktopu.
     Ranije je ispod 1440px stajalo position: static, jer je uspravna
     kartica visa od ekrana pa se pri lijepljenju na 120px donji dio nije
     mogao vidjeti. Rijeseno tako sto se smanji i tacka lijepljenja i sama
     kartica, umjesto da se efekat ugasi:
       top pada sa 120px na 16px
       slika u kartici sa 4/3 na 16/10, sto skida oko 45px
     Izmjereno na 375x812: kartica je visoka oko 700px, pa sa 16px odozgo
     staje u ekran i vidi se cijela dok stoji zalijepljena. */
  .svc { position: sticky; top: 16px; flex-direction: column; gap: var(--space-6); padding: var(--space-4); }
  .svc__media { flex: none; width: 100%; min-height: 0; aspect-ratio: 16 / 10; align-self: auto; }
  .svc__content { flex: none; width: 100%; min-height: 0; gap: var(--space-8); padding: 0 var(--space-4) var(--space-4); }
  .svc__title { font-size: 34px; line-height: 40px; }
}

@media (max-width: 809.98px) {
  /* Preklapanje kartica na TELEFONU ostaje na pocetnoj strani, a gasi se na
     stranici Usluge (.svcs--lista). Tamo iznad kartica nema zaglavlja sekcije
     ni naslova, pa cetiri zalijepljene kartice jedna preko druge zauzmu ceo
     ekran odmah ispod heroja i citaju se kao zaglavljen skrol. Na tabletu i
     desktopu efekat radi na obje strane, pa se Usluge ponasaju isto kao
     odgovarajuca sekcija na pocetnoj.

     Skripta ovo prati sama: initCardStack cita STVARNO position prve kartice
     umjesto medija upita, pa se skaliranje ovdje gasi zajedno sa lijepljenjem. */
  .svcs--lista .svc { position: static; top: auto; }
  .svc__media { aspect-ratio: 16 / 10; }
  .svc__content { padding: 0 var(--space-2) var(--space-3); gap: var(--space-6); }
  .svc__title { font-size: 28px; line-height: 34px; }
  .svc__foot { flex-direction: column; align-items: flex-start; gap: var(--space-6); }
  .scope { max-width: none; width: 100%; }
  .svc__cta { width: 100%; }
}

/* ----- 6.2d-bis  Kako radimo  /  po Konstrinoj "History" ------------------
   Vertikalna traka koja se crta pri skrolovanju, veliki broj koraka, pilula
   sa oznakom, naslov i opis desno, uspravna slika koja stoji zalijepljena.
   Sve mjere su izmjerene na zivoj Konstri, dokazi u komentaru uz markup.

   Imena klasa su .proces i .phase, a NE .step. U ovom fajlu vec postoji
   mrtav blok .steps / .step / .step__num iz ranije, Strux verzije ove
   sekcije (oko linije 753). Da su imena ista, ta stara pravila bi se
   mijesala sa novima. Mrtav blok nije diran, jer ciscenje nije naruceno.
   -------------------------------------------------------------------------- */

.proces {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 112px var(--container-pad);
  background-color: var(--sand-300);

  /* NEMA overflow: hidden. Ono pravi kontekst skrolovanja i ubilo bi
     position: sticky na slici. Isti razlog kao u sekciji Usluge. */
}

@media (min-width: 810px) and (max-width: 1439.98px) { .proces { padding: 80px var(--container-pad); } }
@media (max-width: 809.98px) { .proces { padding: 64px var(--container-pad); } }

.proces__container {
  display: flex;
  flex-direction: column;
  gap: 80px;                       /* izmjereno: razmak zaglavlje -> sadrzaj */
  width: 100%;
  max-width: var(--container-content);
}

@media (max-width: 809.98px) { .proces__container { gap: 40px; } }

.proces__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);             /* 12px, izmjereno */
  width: 100%;
}

/* Oznaka stoji na pjescanoj podlozi, pa joj treba tamno slovo.
   #504732 na #FAE1A6 = 7.2:1. Tacka ostaje #FF7478, kao svuda.

   Selektor je namjerno dvoklasni. Prvo je ovdje stajalo samo
   .label--on-sand, jedna klasa, a .label--caps sa bojom --sand-300 stoji
   NIZE u fajlu (uz sekciju Rezultati). Ista specificnost, pa je odlucivao
   redoslijed: natpis je ispao pjescan na pjescanom i nestao. Dvije klase
   podizu specificnost na (0,2,0) i pravilo vise ne zavisi od redoslijeda.
   Ovo je ista zamka koja je u ovom fajlu vec udarila cetiri puta. */
.label--caps.label--on-sand { color: var(--brown-800); }

.proces__title {
  margin: 0;

  /* Konstra ovdje ima 589px. Kod nas je 640, na zahtjev da drugi red stoji
     cijel. Izmjereno: "od upita do primopredaje." trazi 638px na 56px slova,
     pa se na 589 lomilo u dva reda i naslov je ispadao u tri.
     Ispod 1440px slovo pada na 50px, tekst tad trazi 570px i stao bi i u
     starih 589, tako da se nize nista ne mijenja. */
  max-width: 640px;
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: var(--weight-medium);
  line-height: 64px;
  letter-spacing: var(--tracking-tighter);
  color: var(--ink-900);
}

/* Konstrin H2 na About strani je 56/64 -> 50/58 -> 40/48. Poklapa se sa
   naslovom nase sekcije Usluge, koja stoji tacno iznad ove. */
@media (max-width: 1439.98px) { .proces__title { font-size: 50px; line-height: 58px; } }
@media (max-width: 809.98px)  { .proces__title { font-size: 40px; line-height: 48px; } }

.proces__title-accent { color: var(--brown-800); }

.proces__lead {
  margin: 0;
  max-width: 480px;
  font-size: var(--text-lg);
  line-height: var(--leading-lead);
  color: var(--brown-800);
}

/* --- Dvije kolone: koraci lijevo, slika desno --- */
.proces__details {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 48px;                       /* izmjereno */
  width: 100%;
}

@media (min-width: 810px) and (max-width: 1439.98px) { .proces__details { gap: 32px; } }

/* Na telefonu slika ide ISPRED koraka: prvo dokaz da firma radi, pa tek
   onda postupak. Zato order, a ne izmjena redoslijeda u markupu. */
@media (max-width: 809.98px) {
  .proces__details { flex-direction: column; gap: var(--space-6); }
  .proces__media { order: -1; }
}

.proces__steps {
  display: flex;
  flex-direction: column;
  gap: 8px;                        /* izmjereno */
  flex: 1 1 0;
  min-width: 0;                    /* bez ovoga duga rijec u opisu siri kolonu */
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 809.98px) { .proces__steps { width: 100%; flex: none; } }

/* --- Jedan korak --- */
.phase {
  display: flex;
  flex-direction: row;
  align-items: stretch;            /* da traka moze da se rastegne do dna */
  gap: 32px;                       /* izmjereno */
}

@media (max-width: 809.98px) { .phase { gap: var(--space-5); } }

.phase__mark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;                        /* izmjereno */
  flex: none;
}

/* Tabularne cifre: bez njih 01 i 04 nisu iste sirine, pa traka ispod njih
   ne stoji na istoj vertikali kroz sva cetiri koraka. */
.phase__num {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-3xl);      /* 32/40 -> 30/38 -> 28/34, isto kao Konstra */
  font-weight: var(--weight-medium);
  line-height: var(--leading-h4);
  letter-spacing: var(--tracking-tighter);
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

/* Tacka na traci. Traka je siroka 6px i pomjerena za 3px, pa je sredina
   na 6px; tacka je 9px, dakle lijeva ivica na 1.5px da bi bila centrirana. */
.phase__dot {
  flex: none;
  width: 9px;
  height: 9px;
  margin-left: 1.5px;
  border-radius: 2px;
  background-color: var(--coral-400);
}

/* --- Traka i popuna ---
   Konstra drzi traku na fiksnih 239px i unutra klizi blok visine 247px sa
   pocetnog top:-374px. Te tri brojke vaze samo za njenu visinu koraka.
   Kod nas je isti efekat zapisan preko procenata, pa radi na bilo kojoj
   visini: popuna stoji tacno jednu visinu trake iznad nje, i spusta se za
   101% svoje visine. Onaj procenat viska je namjeran, da pri punom stanju
   donja ivica predje rub i da se ne vidi svijetla crta.

   Vodeca ivica je donja ivica popune i ona je zaobljena, pa linija raste
   sa zaobljenim vrhom, kao na originalu. */
.phase__rail {
  position: relative;
  flex: 1 1 auto;
  width: 6px;                      /* izmjereno */
  min-height: 96px;
  margin-left: 3px;                /* izmjereno: padding-left na omotacu */
  border-radius: var(--radius-xl); /* 12px, izmjereno */
  background-color: var(--sand-500);
  overflow: hidden;
}

.phase__rail-fill {
  position: absolute;
  top: -100%;
  left: calc(50% - 2.5px);
  width: 5px;                      /* izmjereno */
  height: 100%;
  border-radius: var(--radius-xl);
  background-color: var(--ink-900);

  /* Bez skripte i uz smanjen pokret linija stoji NACRTANA. Skripta preuzima
     kontrolu tek kad doda .js-rail na <html>. Isto pravilo kao svuda:
     nista sto skripta pokrece ne smije da sakrije sadrzaj ako skripte nema. */
  transform: translateY(101%);
}

.js-rail .phase__rail-fill {
  transform: translateY(calc(var(--p, 0) * 101%));
}

/* --- Sadrzaj koraka --- */
.phase__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;                       /* izmjereno: pilula -> tekst */
  flex: 1 1 0;
  min-width: 0;
  padding-bottom: var(--space-6);
}

@media (max-width: 809.98px) { .phase__body { gap: var(--space-6); } }

.phase__tag {
  margin: 0;
  padding: 8px 16px;               /* izmjereno */
  border-radius: var(--radius-pill);
  background-color: var(--sand-400);
  color: var(--ink-900);
  font-size: var(--text-base);
  line-height: 24px;               /* pilula je tacno 40px visoka */
}

@media (max-width: 809.98px) { .phase__tag { font-size: var(--text-sm); line-height: 22px; } }

.phase__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);             /* 12px, izmjereno */
}

.phase__title {
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-h4);
  letter-spacing: var(--tracking-tighter);
  color: var(--ink-900);
}

.phase__desc {
  margin: 0;
  max-width: 400px;                /* izmjereno */
  font-size: var(--text-lg);
  line-height: var(--leading-lead);
  color: var(--brown-800);
  text-wrap: balance;              /* original: --framer-text-wrap-override: balance */
}

/* --- Slika koja stoji zalijepljena --- */
.proces__media {
  position: sticky;
  top: var(--card-stack-top);      /* 120px; original ima 80px, vidi markup */
  flex: 1 1 0;
  min-width: 0;
  height: 753px;                   /* izmjereno */
  margin: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

@media (min-width: 810px) and (max-width: 1439.98px) { .proces__media { height: 471px; } }

@media (max-width: 809.98px) {
  .proces__media { position: static; width: 100%; height: 400px; flex: none; }
}

.proces__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .proces__media { position: static; }
}

/* ----- 6.2e Rezultati  /  po Konstrinoj "Delivery Metrics" ----------------
   Rig sa lijepljenjem. Mjere iz izvora, dokazi u komentaru uz markup.
   -------------------------------------------------------------------------- */

.metrics {
  position: relative;
  z-index: 1;
  width: 100%;
  background-color: var(--pure-black);
}

/* Rig daje zalet za skrolovanje. Konstra ima 2996px, sto je skoro tri
   i po ekrana samo za jednu sekciju. Kod nas je 170vh, dakle oko
   pola toga, jer duz zaleta korisnik stoji u mjestu i to se brzo
   pretvori u osjecaj da je sajt zaglavio. */
.metrics__rig { position: relative; height: 170vh; }

.metrics__sticky {
  position: sticky;
  top: var(--card-stack-top);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-9) var(--container-pad) var(--space-11);
}

/* Ispod 1440px lijepljenje se gasi. Kartica od 320px je preuska da bi
   podjela slike na trecine imala smisla, pa sve ide u obican tok. */
@media (max-width: 1439.98px) {
  .metrics__rig { height: auto; }
  .metrics__sticky { position: static; padding: 80px var(--container-pad); }
}

@media (max-width: 809.98px) {
  .metrics__sticky { padding: 64px var(--container-pad); }
}

.metrics__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
  width: 100%;
  max-width: var(--container-content);
}

@media (max-width: 809.98px) { .metrics__container { gap: 40px; } }

.metrics__heading {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  width: 100%;
}

@media (max-width: 809.98px) {
  .metrics__heading { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
}

.metrics__title-block {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

/* VERZAL na zahtjev. Konstra sve svoje oznake pise malim slovima, kao i
   nase dvije prethodne sekcije. Vrijedi ujednaciti kad se odlucite. */
.label--caps {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-sm);
  color: var(--sand-300);
}

.metrics__title {
  margin: 0;
  max-width: 900px;
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: var(--weight-medium);
  line-height: 50px;
  letter-spacing: var(--tracking-tighter);
  color: var(--cream-100);
}

.metrics__title-accent { color: var(--sand-300); }

@media (min-width: 1440px) { .metrics__title { font-size: 50px; line-height: 58px; } }
@media (max-width: 809.98px) { .metrics__title { font-size: 30px; line-height: 38px; } }

.metrics__link { flex: none; color: var(--cream-100); }

/* --- Traka kartica ---
   TRI FAZE, izmjerene na Konstri na svakih 60px skrola:

     1. spojeno    kartice 432px, razmak 0, radius samo na krajevima trake
     2. razdvajanje kartice 419px, razmak 20px, radius 12px na svakoj
        (uhvacen medjukorak: sirina 420, razmak 17, radius 2.85%)
     3. otkrivanje lice isklizne gore/dolje/gore

   Razmak se drzi u --gap koji je registrovan preko @property, pa moze
   da se animira. Bez te registracije custom property skace umjesto da
   klizi, a slika u licima bi se otkacila od razmaka i tokom prelaza
   se vidjelo da se ne poklapa. */
@property --gap {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

.metrics__cards {
  --gap: 0px;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 0;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  transition: --gap 700ms var(--ease-spring);
}

.metrics__cards.is-split { --gap: 20px; }

@media (max-width: 809.98px) {
  .metrics__cards { grid-template-columns: minmax(0, 1fr); }
}

/* ISPOD 1440px KARTICE IZGLEDAJU KAO NA DESKTOPU, na zahtjev.
   -------------------------------------------------------------------------
   Rig sa lijepljenjem i klizanjem lica radi samo iznad 1440px, pa se ni
   klasa .is-split ne dodaje ispod te sirine. Posljedica je bila da su
   kartice ostajale u pocetnom, spojenom stanju: bez razmaka, bez radiusa,
   sa tankom linijom izmedju, i srednja kremasta umjesto sive.

   Ovdje se zavrsno stanje postavlja staticki, bez animacije: razmak 20px,
   radius 12px na svakoj, padding kao na desktopu i srednja kartica siva sa
   svijetlim slovom. Vrijednosti su iste kao u .is-split pravilima gore, da
   se ne razidju ako se tamo nesto promijeni. */
@media (max-width: 1439.98px) {
  .metrics__cards {
    --gap: 20px;
    row-gap: 20px;
    overflow: visible;
  }

  .metric {
    --card-radius: 12px;
    padding: var(--space-6);
  }

  .metric + .metric { box-shadow: none; }

  .metric:nth-child(2) { background-color: var(--steel-600); }

  .metric:nth-child(2) .metric__value,
  .metric:nth-child(2) .metric__title { color: var(--cream-50); }

  .metric:nth-child(2) .metric__desc { color: var(--stone-300); }
}

.metric {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-9);
  min-height: 408px;
  padding: var(--space-6);
  border-radius: var(--card-radius, 0px);
  background-color: var(--cream-200);
  overflow: hidden;
  transition: border-radius 700ms var(--ease-spring);
}

.is-split .metric { --card-radius: 12px; }

/* Dok lice stoji preko kartice, kartica je crna kao i sekcija. Kremasta
   postaje tek u trenutku kad lice krene, a tada je jos pokriva, pa se
   promjena boje ne vidi. Time nestaje svaki bijeli rub pri razdvajanju.
   Vazi samo tamo gdje lica uopste postoje. */
@media (min-width: 1440px) {
  .js-card-flip .metrics__cards:not(.is-open) .metric {
    background-color: var(--pure-black);
  }

  .js-card-flip .metrics__cards:not(.is-open) .metric + .metric {
    box-shadow: none;
  }
}

/* Linija razdvaja kartice DOK SU SPOJENE. Cim se razdvoje, razmak radi
   isti posao pa linija smeta. */
.metric + .metric { box-shadow: inset 1px 0 0 var(--stone-300); }
.is-split .metric + .metric { box-shadow: none; }

/* Na telefonu je ostaje samo ukidanje fiksne visine od 408px, jer bi tri
   takve kartice jedna ispod druge dale 1224px skoro prazne povrsine.
   Razmak i padding ostaju kao na desktopu, na zahtjev, a linija izmedju
   kartica se gasi jer ih sada razdvaja razmak. */
@media (max-width: 809.98px) {
  .metric { min-height: 0; }
  .metric + .metric { box-shadow: none; }
}

/* --- Lice sa slikom ---
   Slika je siroka 300% kartice, dakle tacno sirina cijele trake, i
   pomjerena ulijevo za redni broj kartice. Zato tri kartice zajedno
   pokazuju jednu neprekinutu fotografiju.

   Otkrivanje NIJE vezano za polozaj skrola nego se pusta kao jedan
   potez. Skripta samo doda .is-open kad se predje prag, a CSS odradi
   ostalo kroz 800ms. Zato ne moze da stane na pola: ili je zatvoreno
   ili otvoreno, bez medjustanja koje zavisi od toga gdje je tocak
   slucajno stao.

   Smjer se smjenjuje gore / dolje / gore, kao na originalu. */
/* GLITCH KOJI JE OVDJE RIJESEN
   --------------------------------------------------------------------------
   Pri razdvajanju su iskakali bijeli rubovi oko kvadrata. Tri uzroka,
   sva tri rijesena ovdje i u pravilima ispod:

   1. Kartica ispod lica je kremasta. Svaki podpikselni procjep izmedju
      slike i ivice kartice zasvijetli. Sirina kartice je (1296 - 2*razmak)/3,
      dakle razlomljena dok razmak klizi, pa se zaokruzivanje na piksele
      i polozaj slike racunat iz procenata razidju za djelic piksela.
   2. Radius kartice se animira, a lice je imalo ostre uglove, pa je u
      uglovima virio kremasti sloj ispod.
   3. Slika je bila tacno siroka koliko treba, bez ijednog piksela viska.

   Rjesenja: lice nasljedjuje radius, slika prelazi rub za po jedan
   piksel sa svake strane, a kartica je crna dok je lice preko nje, pa
   je i teoretski procjep crn na crnom. */
.metric__face {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  border-radius: inherit;
  transform: translateY(0);
  transition: transform 800ms var(--ease-spring);
  will-change: transform;
}

.metric:nth-child(odd)  .metric__face { --dir: -100%; }
.metric:nth-child(even) .metric__face { --dir:  100%; }

.is-open .metric__face { transform: translateY(var(--dir)); }

/* max-width: none je OBAVEZAN. Globalni reset na vrhu fajla ima
   img { max-width: 100% }, sto je sirinu od 300% odsijecalo nazad na
   sirinu kartice. Posljedica: druga i treca kartica su imale sliku
   pomjerenu skroz van vidljivog dijela, pa se cinilo da lica uopste
   nema. Izmjereno: sirina slike 432px umjesto 1296px. */
.metric__face img {
  position: absolute;
  top: 0;
  /* Slika ostaje siroka tacno koliko cijela traka, i kad se kartice
     razdvoje. Zato u racun ulazi i --gap: 300% kartice plus dva
     razmaka daje sirinu trake, a pomak je i * (sirina kartice + razmak).
     Bez toga bi se, cim se pojavi razmak, tri isjecka razisla i slika
     vise ne bi bila neprekinuta. */
  left: calc(-1 * var(--i, 0) * (100% + var(--gap, 0px)) - 1px);
  width: calc(300% + 2 * var(--gap, 0px) + 2px);
  max-width: none;
  height: 100%;
  object-fit: cover;
}

/* Bez skripte lice se ne prikazuje uopste, pa podaci stoje citljivi.
   Klasa .js-card-flip ide na <html> iskljucivo iz skripte. */
.metric__face { display: none; }
.js-card-flip .metric__face { display: block; }

/* Ispod 1440px nema riga ni klizanja, pa nema ni lica: kartice odmah
   pokazuju podatke. */
@media (max-width: 1439.98px) {
  .js-card-flip .metric__face { display: none; }
}

.metric__data {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-9);
  height: 100%;
  flex: 1 1 auto;
}

@media (max-width: 809.98px) { .metric__data { gap: var(--space-7); } }

/* Brojevi su na zahtjev podignuti sa 50/58 na 64/70, a na telefonu sa
   40/46 na 48/54. Konstrina mjera je bila 50/58, kolika je i kod nje
   velicina H2 sekcije; ovdje su brojevi glavni sadrzaj kartice pa smiju
   da budu veci od naslova sekcije. */
.metric__value {
  display: block;
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: var(--weight-medium);
  line-height: 70px;
  letter-spacing: var(--tracking-tighter);
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

/* Broj ostaje 64/70 i na telefonu, na zahtjev da kartice budu iste kao na
   desktopu. Provjereno da staje: "100+" na 64px trazi oko 140px, a kartica
   na 375 ima 279px unutrasnje sirine. */

.metric__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.metric__title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-h5);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
}

.metric__desc {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-lead);
  color: var(--brown-800);
}

/* --- Srednja kartica je siva ---
   Vazi od trenutka razdvajanja, dakle uz .is-split. Dok su kartice
   spojene ostaju identicne, kao i na originalu.

   Namjerno stoji NA KRAJU bloka .metric: pravila iznad (.metric,
   .metric__value, .metric__title, .metric__desc) su niza specificnosti
   i dolaze ranije, pa nema sanse da pregaze ovo.

   Boja se, kao i kremasta na druge dvije, mijenja u trenutku kad lice
   jos pokriva karticu, pa se sama promjena ne vidi. Zato ovdje NE ide
   tranzicija na background-color: dobili bismo sivo koje se pretapa
   iza slike koja klizi. Crna podloga dok je lice preko kartice ostaje,
   jer je pravilo .js-card-flip .metrics__cards:not(.is-open) .metric
   vise specificnosti i pobjedjuje sve dok se lica ne otvore. */
.is-split .metric:nth-child(2) { background-color: var(--steel-600); }

.is-split .metric:nth-child(2) .metric__value,
.is-split .metric:nth-child(2) .metric__title { color: var(--cream-50); }

.is-split .metric:nth-child(2) .metric__desc { color: var(--stone-300); }

@media (prefers-reduced-motion: reduce) {
  .js-card-flip .metric__face { display: none; }
  .metrics__rig { height: auto; }
  .metrics__sticky { position: static; }
}

/* ----- 6.2g Radovi  /  po Konstrinoj "Project" ----------------------------
   Numerisana lista redova, ne mreza kartica. Mjere iz izvora.
   -------------------------------------------------------------------------- */

.works {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 72px;
  width: 100%;
  padding: 112px var(--container-pad);
  background-color: var(--cream-50);
}

@media (min-width: 810px) and (max-width: 1439.98px) { .works { padding: 80px var(--container-pad); } }
@media (max-width: 809.98px) { .works { gap: 40px; padding: 64px var(--container-pad); } }

.works__container {
  display: flex;
  flex-direction: column;
  gap: 72px;
  width: 100%;
  max-width: var(--container-content);
}

@media (max-width: 809.98px) { .works__container { gap: 40px; } }

.works__heading {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  width: 100%;
}

@media (max-width: 809.98px) {
  .works__heading { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
}

.works__title-block {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.works .label--caps { color: var(--brown-800); }

.works__title {
  margin: 0;
  max-width: 652px;
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: var(--weight-medium);
  line-height: 50px;
  letter-spacing: var(--tracking-tighter);
  color: var(--ink-900);
}

.works__title-accent { color: var(--brown-800); }

@media (min-width: 1440px) { .works__title { font-size: 50px; line-height: 58px; } }
@media (min-width: 810px) and (max-width: 1439.98px) { .works__title { max-width: 568px; } }
@media (max-width: 809.98px) { .works__title { font-size: 30px; line-height: 38px; } }

.works__cta { flex: none; }

/* Dugme ispod cijele liste. Centrirano, sa razmakom od zadnjeg reda. */
.works__more {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: var(--space-6);
}

@media (max-width: 809.98px) { .works__more .btn { width: 100%; } }

/* --- Lista --- */

.works__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 100%;
}

@media (max-width: 809.98px) { .works__list { gap: var(--space-5); } }

/* Red: broj, naziv, pa godina i znak desno. Visina 104px, padding 32px. */
.work {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  width: 100%;
  padding: var(--space-6);
  border-radius: 12px;
  text-decoration: none;
  overflow: hidden;
  /* 450ms umjesto 320ms: red je velika povrsina, pa isti tempo kao na
     sitnom UI-ju djeluje kao da boja sijevne. */
  transition: background-color 450ms var(--ease-hover);
}

.work:hover,
.work:focus-visible { background-color: var(--cream-200); }

.work__num {
  flex: none;
  width: 64px;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-h4);
  letter-spacing: var(--tracking-tighter);
  color: var(--stone-700);
}

.work__name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-h4);
  letter-spacing: var(--tracking-tighter);
  color: var(--ink-900);
}

.work__meta {
  flex: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-5);
}

.work__year {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-h4);
  letter-spacing: var(--tracking-tighter);
  color: var(--ink-900);
}

/* Isti znak kao u FAQ-u: kvadrat 32px, dvije crte, uspravna se na
   hover okrene i plus postane minus. */
.work__sign {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background-color: var(--cream-200);
  transition: background-color var(--duration-hover) var(--ease-hover);
}

.work:hover .work__sign { background-color: var(--sand-300); }

.work__bar {
  position: absolute;
  width: 14px;
  height: 1px;
  background-color: var(--pure-black);
  transition: transform var(--duration-hover) var(--ease-hover);
}

.work__bar--v { transform: rotate(90deg); }
.work:hover .work__bar--v { transform: rotate(0deg); }

/* --- Fotografija na hover ---
   ODSTUPANJE OD IZVORA, i to svjesno. Konstrina lista na desktopu nema
   nijednu sliku. Kod nas ICP kaze da posjetilac prvo trazi dokaz da
   firma stvarno radi i da je galerija nosac konverzije. Zato red na
   hover otkrije fotografiju, a lista i dalje ostaje mirna. */
/* Fotografija se sidri na POCETAK desne grupe, ne na fiksni odmak od
   ivice. Prvi pokusaj je imao right: 168px i slika je udarala u godinu,
   jer je oznaka [DOPUNITI] mnogo sira od cetvorocifrene godine. Ovako
   se ne moze sudariti bez obzira na duzinu teksta.

   Nosac je flex stavka bez sirine, postavljena redoslijedom ispred
   grupe sa godinom. Slika visi iz nje udesno.

   ODSTUPANJE OD IZVORA, i to svjesno. Konstrina lista na desktopu nema
   nijednu sliku, provjereno mjerenjem. Kod nas ICP kaze da posjetilac
   prvo trazi dokaz da firma stvarno radi i da je galerija nosac
   konverzije, pa cista lista bez ijedne slike taj dokaz sakriva. */
.work__peek {
  position: relative;
  flex: none;
  order: 2;
  width: 0;
  align-self: center;
  pointer-events: none;
}

.work__num  { order: 0; }
.work__name { order: 1; }
.work__meta { order: 3; }

.work__peek img {
  position: absolute;
  top: 50%;
  right: var(--space-5);
  display: block;
  width: 128px;
  /* max-width: none je OBAVEZAN. Globalni reset ima img { max-width: 100% },
     a nosac je sirine NULA, pa je i slika ispadala nula. Ista zamka kao kod
     lica u sekciji Rezultati. Izmjereno prije popravke: sirina 0px. */
  max-width: none;
  height: 76px;
  object-fit: cover;
  border-radius: 8px;
  opacity: 0;
  transform: translateY(-50%) scale(0.94);
  transition:
    opacity   var(--duration-hover) var(--ease-hover),
    transform var(--duration-hover) var(--ease-hover);
}

.work:hover .work__peek img,
.work:focus-visible .work__peek img {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* Na dodir hovera nema, pa fotografija stoji stalno i red se slaze u
   dva reda: tekst gore, slika ispod preko cijele sirine. */
@media (max-width: 809.98px) {
  .work { flex-wrap: wrap; padding: var(--space-5); }
  .work__num { width: auto; }
  .work__name { flex: 1 1 100%; order: 2; }
  .work__meta { order: 1; }

  .work__peek { position: static; order: 4; width: 100%; }

  .work__peek img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    margin-top: var(--space-4);
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .work__peek img { transition: none; }
  .work__bar { transition: none; }
}

/* --------------------------------------------------------------------------
   PREGLED FOTOGRAFIJE
   --------------------------------------------------------------------------
   Sloj preko cijele stranice sa samo jednom fotografijom, bez naslova i
   bez opisa. Podloga je crna sa zamucenjem, da se ne vidi sta je iza.
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background-color: rgba(3, 0, 0, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity var(--duration-hover) var(--ease-hover);
}

/* hidden se skida iz skripte tek kad krene otvaranje, inace se prelaz
   prozirnosti ne bi ni vidio: element bi skocio iz display:none. */
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }

.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 12px;
  object-fit: contain;
  transform: scale(0.97);
  transition: transform var(--duration-hover) var(--ease-hover);
}

.lightbox.is-open .lightbox__img { transform: scale(1); }

.lightbox__close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  padding: 0;
  background: transparent;
  border: var(--border-width) solid var(--cream-50);
  border-radius: var(--radius-pill);
  color: var(--cream-50);
  cursor: pointer;
  transition: background-color var(--duration-hover) var(--ease-hover);
}

.lightbox__close:hover { background-color: rgba(255, 255, 255, 0.14); }
.lightbox__close svg { display: block; width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox__img { transition: none; }
}

/* ----- 6.2h Kontakt  /  po Konstrinoj kontakt stranici --------------------
   Dvije kolone: tekst i podaci lijevo, forma desno. Mjere iz izvora.
   -------------------------------------------------------------------------- */

.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 112px var(--container-pad);
  background-color: var(--cream-50);
}

@media (min-width: 810px) and (max-width: 1439.98px) { .contact { padding: 80px var(--container-pad); } }
@media (max-width: 809.98px) { .contact { padding: 64px var(--container-pad); } }

.contact__container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 48px;
  width: 100%;
  max-width: var(--container-content);
}

@media (max-width: 1439.98px) {
  .contact__container { flex-direction: column; gap: 60px; }
}

/* Podaci za kontakt su do 10.08.2026. bili prilijepljeni uz dno kolone,
   preko justify-content: space-between, kako stoji na Konstrinoj kontakt
   strani. Tamo to radi jer je lijevi tekst dug pa je kolona popunjena.

   Kod nas je tekst kraci od forme, pa je space-between razvlacio prazninu
   od skoro 200px izmedju opisa i bloka Telefon / Email / Lokacija, i to je
   izgledalo kao greska, a ne kao razmak. Zato podaci sada idu odmah ispod
   opisa, na 64px, a kolona se zavrsava gdje se zavrsi. */
.contact__intro {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  max-width: 624px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-9);
}

@media (max-width: 1439.98px) { .contact__intro { max-width: none; } }

.contact__lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.contact .label--caps { color: var(--brown-800); }

.contact__title {
  margin: 0;
  max-width: 602px;
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: var(--weight-medium);
  line-height: 50px;
  letter-spacing: var(--tracking-tighter);
  color: var(--ink-900);
}

.contact__title-accent { color: var(--brown-800); }

@media (min-width: 1440px) { .contact__title { font-size: 50px; line-height: 58px; } }
@media (max-width: 809.98px) { .contact__title { font-size: 30px; line-height: 38px; } }

.contact__desc {
  margin: 0;
  max-width: 404px;
  font-size: var(--text-lg);
  line-height: var(--leading-lead);
  color: var(--brown-800);
}

/* Podaci: tri bloka, razmak 32px, sirina 236px. Ispod 1440px ide mreza
   dva sa dva, kao na originalu. */
.contact__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 100%;
  max-width: 236px;
}

@media (max-width: 1439.98px) {
  .contact__details {
    display: grid;
    grid-template-columns: repeat(2, minmax(50px, 1fr));
    max-width: none;
  }
}

@media (max-width: 809.98px) {
  .contact__details { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
}

.contact__item { display: flex; flex-direction: column; gap: var(--space-2); }

.contact__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  color: var(--stone-700);
}

.contact__label svg { display: block; width: 16px; height: 16px; }

.contact__value {
  font-size: var(--text-lg);
  line-height: var(--leading-lead);
  font-style: normal;
  color: var(--ink-900);
  text-decoration: none;
  width: fit-content;
  transition: color var(--duration-hover) var(--ease-hover);
}

a.contact__value:hover { color: var(--brown-800); }
.contact__value--plain { cursor: default; }

/* --- Forma --- */

.contact__form {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  max-width: 624px;
  flex-direction: column;
  gap: var(--space-6);
}

@media (max-width: 1439.98px) { .contact__form { max-width: none; } }

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

@media (max-width: 809.98px) { .field-row { grid-template-columns: minmax(0, 1fr); } }

.field { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }

.field__label {
  font-size: var(--text-base);
  color: var(--brown-800);
}

.field__input {
  width: 100%;
  padding: 14px 16px;
  border: var(--border-width) solid var(--stone-300);
  border-radius: 8px;
  background-color: var(--cream-100);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-lead);
  color: var(--ink-900);
  transition:
    border-color var(--duration-hover) var(--ease-hover),
    background-color var(--duration-hover) var(--ease-hover);
}

.field__input::placeholder { color: var(--stone-600); }

.field__input:hover { border-color: var(--stone-400); }

.field__input:focus-visible {
  outline: var(--focus-ring-width) solid var(--ink-900);
  outline-offset: 1px;
  border-color: var(--ink-900);
}

.field__input--area { resize: vertical; min-height: 140px; }

/* Strelica za select se crta iz CSS-a, da ne zavisi od izgleda
   operativnog sistema. */
.field__input--select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-900) 50%),
                    linear-gradient(135deg, var(--ink-900) 50%, transparent 50%);
  background-position: calc(100% - 22px) 22px, calc(100% - 16px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.contact__submit { align-self: flex-start; }

@media (max-width: 809.98px) { .contact__submit { width: 100%; } }

/* ----- 6.2i  Mobilni meni  /  po "staggered menu" iz Random projekta ------
   Original vozi GSAP. Ovdje je ista koreografija na CSS tranzicijama, sa
   kasnjenjem izvedenim iz rednog broja stavke (--i). Dokazi i tacne
   vrijednosti stoje uz markup u index.html.
   -------------------------------------------------------------------------- */

.smenu {
  position: fixed;
  inset: 0;
  z-index: 95;
  visibility: hidden;
  pointer-events: none;
}

.smenu.is-open { visibility: visible; pointer-events: auto; }

/* Zaglavlje MORA iznad menija dok je meni otvoren, inace overlay prekrije
   dugme i meni se ne moze zatvoriti. Izmjereno: prvi klik je otvarao, drugi
   je padao na overlay i nista se nije desavalo.
   Uz to, zaglavlje na vrhu strane ima tamno slovo na pjescanom; preko crnog
   panela bi nestalo, pa prelazi u svijetlo. */
.header.is-over-menu { z-index: 100; }
.header.is-over-menu .brand__name { color: var(--cream-50); }
.header.is-over-menu .brand__badge { filter: brightness(0) invert(1); }
.header.is-over-menu .menu-toggle { border-color: var(--cream-50); color: var(--cream-50); }

/* Iznad 810px meni ne postoji: tamo je obicna vodoravna navigacija. */
@media (min-width: 810px) { .smenu { display: none; } }

/* Dva sloja koja ulaze prije panela, pa izgleda kao da se boja prelije
   preko ekrana u dva poteza. Kod Randoma su to clay i ember, kod nas
   pjescana pa tamno smedja, jer se na to nastavlja crn panel. */
.smenu__layer,
.smenu__panel {
  position: absolute;
  inset: 0;
  transform: translateX(100%);
  will-change: transform;

  /* Zatvaranje: sve nazad odjednom, bez odgode. power3.in iz GSAP-a. */
  transition: transform 320ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.smenu__layer--1 { background-color: var(--sand-300); }
.smenu__layer--2 { background-color: var(--brown-800); }

.smenu__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: 104px var(--container-pad) 40px;
  background-color: var(--pure-black);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Otvaranje: svaki sloj sa svojom odgodom. */
.smenu.is-open .smenu__layer,
.smenu.is-open .smenu__panel { transform: translateX(0); }

.smenu.is-open .smenu__layer--1 { transition: transform 500ms var(--ease-spring)   0ms; }
.smenu.is-open .smenu__layer--2 { transition: transform 500ms var(--ease-spring)  70ms; }
.smenu.is-open .smenu__panel    { transition: transform 650ms var(--ease-spring) 150ms; }

.smenu__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: auto 0;
  padding: 0;
  list-style: none;
}

/* overflow: hidden je ono sto pravi efekat: natpis krece ispod ruba reda
   i uklizava odozdo, umjesto da se samo pojavi. */
.smenu__row {
  position: relative;
  overflow: hidden;
  line-height: 1;
}

.smenu__item {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: 6px;
  font-family: var(--font-display);
  font-size: clamp(38px, 11vw, 56px);
  font-weight: var(--weight-medium);
  line-height: 1.05;
  letter-spacing: var(--tracking-tighter);
  color: var(--cream-50);
  text-decoration: none;
}

.smenu__label {
  display: inline-block;
  transform: translateY(140%) rotate(10deg);
  transform-origin: 50% 100%;
}

.smenu__num {
  flex: none;
  font-size: 14px;
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wide);
  color: var(--sand-300);
  opacity: 0;
  font-variant-numeric: tabular-nums;
}

/* Natpisi: pocetak na 248ms, korak 100ms po stavci. Brojevi krecu 100ms
   iza njih, korak 80ms. Oboje iz Randomove tajmlajn. */
.smenu.is-open .smenu__label {
  transform: none;
  transition: transform 1000ms var(--ease-spring);
  transition-delay: calc(248ms + var(--i, 0) * 100ms);
}

.smenu.is-open .smenu__num {
  opacity: 1;
  transition: opacity 600ms ease-out;
  transition-delay: calc(348ms + var(--i, 0) * 80ms);
}

.smenu__cta { align-self: flex-start; }

.smenu__social {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-5);
}

.smenu__social-title {
  margin: 0;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--stone-600);
  opacity: 0;
}

.smenu__social-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.smenu__social-link {
  font-size: var(--text-lg);
  color: var(--stone-500);
  text-decoration: none;
}

.smenu__social-list li { transform: translateY(25px); opacity: 0; }

.smenu.is-open .smenu__social-title {
  opacity: 1;
  transition: opacity 500ms ease-out 410ms;
}

.smenu.is-open .smenu__social-list li {
  transform: none;
  opacity: 1;
  transition: transform 550ms var(--ease-spring), opacity 550ms ease-out;
  transition-delay: calc(450ms + var(--i, 0) * 80ms);
}

/* Uz smanjen pokret meni se samo pojavi, bez klizanja i bez kaskade. */
@media (prefers-reduced-motion: reduce) {
  .smenu__layer, .smenu__panel, .smenu__label,
  .smenu__num, .smenu__social-title, .smenu__social-list li {
    transition: none !important;
    transform: none !important;
  }
  .smenu:not(.is-open) .smenu__layer,
  .smenu:not(.is-open) .smenu__panel { display: none; }
}

/* ----- 6.2h  Staklena kartica oko obrasca --------------------------------
   Po trazenoj "sign-in" kartici, prepisano u nas stack i nasu paletu.
   Objasnjenje sta je preneseno stoji uz markup u index.html.

   OVAJ BLOK MORA DA STOJI IZA svih pravila .field i .field__input iznad.
   Ona su u fajlu na dva mjesta (oko 861 i oko 3435) i kasnije gazi ranije;
   da je ovo bilo iznad, tamna polja bi ostala kremasta.
   -------------------------------------------------------------------------- */

/* Spoljni omotac nosi mjere i pojavljivanje na skrol. Unutrasnji nosi
   izgled i nagib. Razlog za dva elementa stoji uz markup. */
.contact__card {
  flex: 1 1 0;
  min-width: 0;
  max-width: 624px;
}

@media (max-width: 1439.98px) { .contact__card { max-width: none; } }

.glass {
  position: relative;
  width: 100%;
  border-radius: 16px;

  /* Original je bg-black/40 sa backdrop-filterom. Kod nas iza kartice nema
     nista sto bi se mutilo, sekcija je puna kremasta, pa backdrop-filter
     ne bi radio nista osim sto bi trosio. Umjesto njega ide blag preliv
     iz #1B1915 u #030000, koji daje istu dubinu. */
  background-image: linear-gradient(160deg, var(--ink-900), var(--pure-black));
  border: var(--border-width) solid var(--color-dark-border);
  box-shadow: var(--shadow-lift);
}

/* Nagib upisuje skripta u --rx i --ry, i to na SPOLJNI omotac, a primjenjuje
   se na unutrasnji. Razlog je izmjeren:

   Kad su i osluskivanje misa i nagib bili na istoj kartici, ona bi se nagla,
   tacka ispod misa bi ispala iz nagnute geometrije, okinuo bi se mouseleave,
   kartica bi se vratila u ravan, tacka bi opet bila unutra i tako u krug. Na
   15px od ivice ugao je zbog toga uvijek zavrsavao na 0deg.

   Spoljni omotac se ne transformise, pa je njegova pogodna povrsina mirna.
   Vrijednosti se nasljedjuju na dijete, koje se jedino naginje. */
.js-tilt [data-tilt] > .glass,
.js-tilt [data-tilt] > .locmap__inner {
  transform: perspective(1500px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 600ms var(--ease-spring);
}

/* Dok mis stoji na kartici nema tranzicije, da nagib prati mis bez
   kasnjenja. Kad izadje, klasa se skida pa se vraca mekano. */
.js-tilt [data-tilt].is-tilting > .glass,
.js-tilt [data-tilt].is-tilting > .locmap__inner { transition: none; }

/* ----- 6.3  Linkovi ka stranicama koje jos ne postoje ---------------------
   Zavrsena je samo pocetna strana, pa Blog i stranica galerije nemaju gdje
   da vode. Ranije su stajali na href="#", a to NIJE "ne vodi nigdje": to
   skoci na vrh strane i doda # u adresu, sto djeluje kao pokvaren link.

   Sada su bez href. <a> bez href po specifikaciji nije link: ne moze se
   fokusirati tabom, nema pokazivac ruke i klik ne radi nista. aria-disabled
   uz to javlja citacima ekrana da stavka postoji ali trenutno nije dostupna.

   Sidra na gotovoj pocetnoj (#hero, #o-nama, #usluge, #radovi, #kontakt)
   nisu dirana, ona rade.
   -------------------------------------------------------------------------- */
.is-soon {
  cursor: default;
  opacity: 0.45;
}

.is-soon:hover { opacity: 0.45; }

/* Dugme koje ne vodi nigdje ne smije da izgleda kao poziv na akciju. */
.btn.is-soon { pointer-events: none; box-shadow: none; }

/* Tacka uz nav link se ne pali, jer nema sta da se otvori. */
.nav__link.is-soon:hover .nav__dot { margin-left: -33px; opacity: 0; }

/* ----- 6.2j  Kartica lokacije koja se otvara na klik ----------------------
   Po trazenoj "expand map" komponenti, prepisano u nas stack i nasu paletu.
   Objasnjenje sta je preneseno stoji uz markup u index.html.
   Original: 240x140 zatvoreno, 360x280 otvoreno, spring 400/35, nagib 8
   stepeni, perspektiva 1000.
   -------------------------------------------------------------------------- */

.locmap {
  position: relative;
  width: 100%;
  max-width: 360px;
}

.locmap__inner {
  position: relative;
  display: block;
  height: 140px;
  overflow: hidden;
  border-radius: 16px;
  border: var(--border-width) solid var(--color-dark-border);
  background-image: linear-gradient(160deg, var(--ink-900), var(--pure-black));
  will-change: height;

  /* Original mijenja i sirinu i visinu. Kod nas sirina prati kolonu, a
     mijenja se samo visina: na 375 je kolona 343px, pa bi fiksnih 360
     prelilo ekran.

     Kriva je easeOutCubic, NE nas --ease-spring. Spring kriva ima ostar
     polazak i dugi rep, pa je pri promjeni visine, koja vuce prelom
     teksta u svakom kadru, izgledala kao trzaj. Ova ide ravnomjerno i
     bez prebacaja. Trajanje podignuto sa 520 na 620ms. */
  transition: height 620ms cubic-bezier(0.33, 1, 0.68, 1);
}

/* Dugme za uvecanje pokriva karticu. Providno je i bez ivice: vidi se
   samo ono ispod njega. */
.locmap__toggle {
  position: absolute;
  inset: 0;
  z-index: 3;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.locmap__toggle:focus-visible {
  outline: var(--focus-ring-width) solid var(--sand-300);
  outline-offset: calc(-1 * var(--focus-ring-offset));
  border-radius: 16px;
}

.locmap.is-open .locmap__inner { height: 280px; }

/* Mrezica 20px, kao u originalu, i gasi se kad se kartica otvori. */
.locmap__grid {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image:
    linear-gradient(to right, var(--cream-50) 1px, transparent 1px),
    linear-gradient(to bottom, var(--cream-50) 1px, transparent 1px);
  background-size: 20px 20px;
  transition: opacity 300ms var(--ease-hover);
}

.locmap.is-open .locmap__grid { opacity: 0; }

/* --- Shema ulica, vidi se tek kad je otvoreno --- */
.locmap__scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms var(--ease-hover);
}

.locmap.is-open .locmap__scene { opacity: 1; transition-delay: 100ms; }

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

/* Ulice se CRTAJU, ne pojavljuju. U originalu je to pathLength 0 -> 1 iz
   framer-motiona; ovdje isto preko dasharray i dashoffset. 400 je duze od
   najduze linije (360), pa je jedna duzina dovoljna za sve. */
.locmap__road,
.locmap__street {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: stroke-dashoffset 800ms var(--ease-hover);
}

.locmap__road   { stroke: rgba(252, 246, 233, 0.25); stroke-width: 4; }
.locmap__street { stroke: rgba(252, 246, 233, 0.10); stroke-width: 1.5; }
.locmap__road--v   { stroke: rgba(252, 246, 233, 0.20); stroke-width: 3; }

.locmap.is-open .locmap__road,
.locmap.is-open .locmap__street { stroke-dashoffset: 0; }

/* Kaskada po redu pojavljivanja, kao u originalu. */
.locmap.is-open .locmap__road:nth-of-type(1) { transition-delay: 120ms; }
.locmap.is-open .locmap__road:nth-of-type(2) { transition-delay: 180ms; }
.locmap.is-open .locmap__road:nth-of-type(3) { transition-delay: 240ms; }
.locmap.is-open .locmap__road:nth-of-type(4) { transition-delay: 300ms; }
.locmap.is-open .locmap__street { transition-delay: 360ms; }

/* --- Zgrade --- */
.locmap__block {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  border-radius: 2px;
  background-color: rgba(210, 204, 188, 0.28);
  border: 1px solid rgba(210, 204, 188, 0.18);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 400ms var(--ease-hover), transform 400ms var(--ease-spring);
}

.locmap.is-open .locmap__block {
  opacity: 1;
  transform: none;
  transition-delay: var(--d);
}

/* --- Cioda --- */
.locmap__pin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  opacity: 0;
  transform: scale(0) translateY(-20px);
  transition: opacity 300ms var(--ease-hover), transform 500ms var(--ease-spring);
}

.locmap.is-open .locmap__pin {
  opacity: 1;
  transform: none;
  transition-delay: 220ms;
}

.locmap__pin svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 10px rgba(250, 225, 166, 0.5));
}

.locmap__pin path   { fill: var(--sand-300); }
.locmap__pin circle { fill: var(--pure-black); }

.locmap__fade {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top, var(--pure-black), transparent 55%);
  opacity: 0.6;
}

/* --- Sadrzaj --- */
/* Sadrzaj stoji IZNAD dugmeta po z-indexu, ali ne hvata klik. Tako klik
   bilo gdje po kartici uvecava, a link za mapu, koji klik hvata, radi. */
.locmap__content {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: var(--space-5);
  pointer-events: none;
}

.locmap__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.locmap__icon {
  width: 18px;
  height: 18px;
  color: var(--sand-300);
  filter: drop-shadow(0 0 4px rgba(250, 225, 166, 0.3));
  transition: filter var(--duration-hover) var(--ease-hover), opacity 300ms var(--ease-hover);
}

.locmap:hover .locmap__icon { filter: drop-shadow(0 0 8px rgba(250, 225, 166, 0.6)); }
.locmap.is-open .locmap__icon { opacity: 0; }

/* Na mjestu gdje je u originalu stajala oznaka "Live" sada je pravo dugme
   koje vodi na Google Maps. Jedino ono u kartici hvata klik. */
.locmap__gmaps {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: var(--border-width) solid rgba(250, 225, 166, 0.35);
  background-color: rgba(255, 255, 255, 0.06);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--sand-300);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--duration-hover) var(--ease-hover),
    border-color     var(--duration-hover) var(--ease-hover);
}

.locmap__gmaps svg { display: block; width: 12px; height: 12px; }

.locmap__gmaps:hover,
.locmap__gmaps:focus-visible {
  background-color: rgba(250, 225, 166, 0.16);
  border-color: var(--sand-300);
}

.locmap__gmaps:focus-visible {
  outline: var(--focus-ring-width) solid var(--sand-300);
  outline-offset: var(--focus-ring-offset);
}

.locmap__bottom { display: flex; flex-direction: column; gap: 4px; }

.locmap__name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  color: var(--cream-50);
  transition: transform var(--duration-hover) var(--ease-spring);
}

.locmap:hover .locmap__name { transform: translateX(4px); }

/* Koordinate UVIJEK zauzimaju svoju visinu, samo su prozirne dok je
   kartica zatvorena. Ranije se animirao i max-height sa 0 na 20px, pa se
   u istom kadru mijenjala i visina kartice i visina ovog reda, a naziv
   iznad je poskakivao. To je bio glavni izvor trzanja. */
.locmap__coords {
  height: 18px;
  font-size: var(--text-xs);
  line-height: 18px;
  color: var(--stone-600);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 260ms var(--ease-hover), transform 260ms var(--ease-hover);
}

.locmap.is-open .locmap__coords {
  opacity: 1;
  transform: none;
  transition-delay: 160ms;
}

.locmap__rule {
  height: 1px;
  background-image: linear-gradient(to right, rgba(250, 225, 166, 0.5), rgba(250, 225, 166, 0.3) 45%, transparent);
  transform: scaleX(0.3);
  transform-origin: left;
  transition: transform 400ms var(--ease-hover);
}

.locmap:hover .locmap__rule,
.locmap.is-open .locmap__rule { transform: scaleX(1); }

.locmap__hint {
  position: absolute;
  left: 0;
  bottom: -22px;
  font-size: 10px;
  color: var(--stone-600);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 200ms var(--ease-hover), transform 200ms var(--ease-hover);
}

.locmap:hover .locmap__hint { opacity: 1; transform: none; }
.locmap.is-open .locmap__hint { opacity: 0; }

/* Na dodir nema hovera, pa nagovjestaj stoji stalno dok je zatvoreno. */
@media (hover: none) {
  .locmap__hint { opacity: 1; transform: none; }
  .locmap.is-open .locmap__hint { opacity: 0; }
}

.locmap:focus-visible {
  outline: var(--focus-ring-width) solid var(--sand-300);
  outline-offset: var(--focus-ring-offset);
  border-radius: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .locmap__inner, .locmap__scene, .locmap__grid, .locmap__block,
  .locmap__pin, .locmap__coords, .locmap__rule, .locmap__road, .locmap__street {
    transition: none !important;
  }
}

.glass > .contact__form {
  position: relative;
  z-index: 2;
  max-width: none;
  padding: var(--space-7);
}

@media (max-width: 809.98px) { .glass > .contact__form { padding: var(--space-5); } }

/* Mrezica: dvije dijagonale na 30px, kao u originalu. */
.glass__mesh {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  opacity: 0.04;
  background-image:
    linear-gradient(135deg, var(--cream-50) 0.5px, transparent 0.5px),
    linear-gradient(45deg,  var(--cream-50) 0.5px, transparent 0.5px);
  background-size: 30px 30px;
}

/* --- Snop svetla po ivici ---
   Cetiri trake obilaze ivicu, svaka sa svojim kasnjenjem. Original ima
   trajanje 2.5s i pauzu 1s, dakle ciklus 3.5s, i kasnjenja 0 / 0.6 / 1.2
   / 1.8s. Boja je kod nas pjescana umjesto bijele: to je svjetlo iste
   boje kao preliv u herou, pa se kartica veze za ostatak sajta. */
.glass__fx {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.glass__beam {
  position: absolute;
  opacity: 0.7;
  filter: blur(1.5px);
}

.glass__beam--top,
.glass__beam--bottom {
  height: 2px;
  width: 50%;
  background-image: linear-gradient(90deg, transparent, var(--sand-300), transparent);
}

.glass__beam--right,
.glass__beam--left {
  width: 2px;
  height: 50%;
  background-image: linear-gradient(180deg, transparent, var(--sand-300), transparent);
}

.glass__beam--top    { top: 0;    left: -50%;  animation: beam-x 3.5s var(--ease-hover) infinite; }
.glass__beam--right  { top: -50%; right: 0;    animation: beam-y 3.5s var(--ease-hover) infinite 0.6s; }
.glass__beam--bottom { bottom: 0; left: -50%;  animation: beam-x 3.5s var(--ease-hover) infinite 1.2s; }
.glass__beam--left   { bottom: -50%; left: 0;  animation: beam-y-up 3.5s var(--ease-hover) infinite 1.8s; }

/* Kretanje traje 2.5s od 3.5s ciklusa, ostatak je pauza van kadra.
   Zato se na 71.4% stane i do kraja se stoji. */
@keyframes beam-x {
  0%            { transform: translateX(0);    opacity: 0.3; }
  35%           { opacity: 0.75; }
  71.4%, 100%   { transform: translateX(300%); opacity: 0.3; }
}

@keyframes beam-y {
  0%            { transform: translateY(0);    opacity: 0.3; }
  35%           { opacity: 0.75; }
  71.4%, 100%   { transform: translateY(300%); opacity: 0.3; }
}

@keyframes beam-y-up {
  0%            { transform: translateY(0);     opacity: 0.3; }
  35%           { opacity: 0.75; }
  71.4%, 100%   { transform: translateY(-300%); opacity: 0.3; }
}

.glass__spark {
  position: absolute;
  border-radius: var(--radius-pill);
  background-color: var(--sand-300);
  animation: spark 2.2s ease-in-out infinite alternate;
}

.glass__spark--tl { top: 0; left: 0;     width: 5px; height: 5px; filter: blur(1px); }
.glass__spark--tr { top: 0; right: 0;    width: 8px; height: 8px; filter: blur(2px); animation-delay: 0.5s; }
.glass__spark--br { bottom: 0; right: 0; width: 8px; height: 8px; filter: blur(2px); animation-delay: 1s; }
.glass__spark--bl { bottom: 0; left: 0;  width: 5px; height: 5px; filter: blur(1px); animation-delay: 1.5s; }

@keyframes spark {
  from { opacity: 0.2; }
  to   { opacity: 0.5; }
}

/* --- Polja na tamnoj kartici --- */
.glass .field__label {
  font-size: var(--text-sm);
  color: var(--stone-500);
}

.glass .field__wrap {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 10px;
}

/* Ikonica se pali kad polje dobije fokus, kao u originalu gdje ikona ide
   iz white/40 u white. :has je ovdje bezbjedan: ako ga pretrazivac ne
   podrzava, ikonica prosto ostane prigusena, polje radi isto. */
.glass .field__icon {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--stone-600);
  pointer-events: none;
  transition: color var(--duration-hover) var(--ease-hover);
}

.glass .field__wrap--area .field__icon { top: 16px; }
.glass .field__wrap:has(.field__input:focus) .field__icon { color: var(--sand-300); }

.glass .field__input {
  width: 100%;
  padding: 12px 16px 12px 44px;
  border: var(--border-width) solid transparent;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--cream-50);
  transition:
    border-color     var(--duration-hover) var(--ease-hover),
    background-color var(--duration-hover) var(--ease-hover);
}

/* Original ima placeholder u white/30, sto na crnoj kartici daje oko
   2.5:1. Prvo je ovdje stajao --stone-600 i davao 3.1:1. Podignuto na
   --stone-700, dakle 3.7:1 na podlozi polja (#2A2825).
   Ispod 4.5:1 jeste, ali svako polje ima pravi <label> iznad sebe, pa
   placeholder nosi samo primjer, ne i znacenje. Ako zelis punih 4.5,
   --stone-500 daje 9.2:1, samo tad vise lici na vec upisan tekst. */
.glass .field__input::placeholder { color: var(--stone-700); }

.glass .field__input:focus,
.glass .field__input:focus-visible {
  outline: none;
  border-color: rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.10);
}

/* Strelica selecta se crta iz CSS-a, pa mora da prati boju teksta.
   Zatecena je crtana u #1B1915 i na crnom se ne bi vidjela. */
.glass .field__input--select {
  padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, var(--stone-500) 50%),
                    linear-gradient(135deg, var(--stone-500) 50%, transparent 50%);
  background-position: calc(100% - 22px) 21px, calc(100% - 16px) 21px;
}

.glass .field__input--select option { color: var(--ink-900); }

.glass .field__input--area { min-height: 132px; padding-top: 14px; }

.glass .field__hint { color: var(--stone-600); }

/* Dugme na tamnoj kartici. Nasa puna varijanta je crna i ovdje se ne bi
   vidjela, pa ide pjescana sa tamnim slovom, kao sto original okrece
   dugme u bijelo na crnoj kartici. #1B1915 na #FAE1A6 = 12.1:1. */
.btn--sand {
  background-color: var(--sand-300);
  color: var(--ink-900);
  box-shadow: var(--shadow-btn);
}

.btn--sand::after { border-color: transparent; }
.btn--sand:hover { background-color: var(--sand-400); }

@media (prefers-reduced-motion: reduce) {
  .glass__beam, .glass__spark { animation: none; }
  .js-tilt [data-tilt] > .glass { transform: none; }
}

.field__hint {
  margin: 0;
  font-size: var(--text-base);
  color: var(--brown-800);
}

/* ----- 6.2g-bis  Radovi na telefonu: slajder po Konstri ------------------
   Izmjereno na Konstrinoj sekciji "Project" na 375x812:
     sekcija    padding 64px 16px
     naslov     40/48, tri reda, puna sirina nosaca (343px)
     dugme      ODMAH ispod naslova, PUNA sirina 343x48, radius 999px
     kartica    broj i naziv gore, pa fotografija, pa dugme pune sirine
     strelice   dvije okrugle ispod kartice, lijeva providna sa ivicom,
                desna puna crna

   Kod nas je isti red na desktopu numerisana lista; na telefonu se ista
   oznaka prelama u karticu, bez dupliranja markupa. Jedino je dodat
   natpis .work__cta, jer red sam po sebi nema vidljivo dugme.
   -------------------------------------------------------------------------- */
@media (max-width: 809.98px) {
  .works__title { font-size: 40px; line-height: 48px; }

  /* Dugme pune sirine odmah ispod naslova. */
  .works__cta { width: 100%; justify-content: center; }

  /* Lista postaje vodoravni slajder sa lijepljenjem. Negativna margina i
     padding vracaju karticama puni rub ekrana, da prva i posljednja mogu
     da se centriraju. */
  .works__list {
    display: flex;
    flex-direction: row;
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--container-pad));
    padding-inline: var(--container-pad);
  }

  .works__list::-webkit-scrollbar { display: none; }

  /* row wrap, a NE column. Broj i naziv dijele prvi red, kao
     "05  Ironvale logistics hub", a slika i dugme uzimaju punu sirinu i
     padaju u svoj red. Sa column rasporedom su broj i naziv ostajali jedan
     ispod drugog, a slika i dugme su zavrsavali van kartice: izmjereno,
     offsetLeft slike je bio 298px u kartici sirokoj 267px, pa ih je
     overflow: hidden sjekao i kartica je izgledala prazno. */
  .work {
    flex: 0 0 86%;
    scroll-snap-align: center;
    flex-flow: row wrap;
    align-items: baseline;
    align-content: flex-start;
    justify-content: flex-start;
    gap: var(--space-4);
    width: auto;
    padding: var(--space-5);
    background-color: var(--cream-200);
  }

  .work__num {
    order: 0;
    flex: 0 0 auto;
    width: auto;
    font-size: var(--text-2xl);
    line-height: var(--leading-h5);
  }

  .work__name {
    order: 0;
    flex: 1 1 0;
    min-width: 0;
    font-size: var(--text-2xl);
    line-height: var(--leading-h5);
  }

  /* Fotografija je na desktopu slicica sirine nula koja se otvara na hover.
     Ovdje postaje glavni sadrzaj kartice. */
  .work__peek {
    order: 1;
    flex: 0 0 100%;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    border-radius: 8px;
    overflow: hidden;
    opacity: 1;
    transform: none;
  }

  /* Na desktopu je slicica APSOLUTNO pozicionirana, 128x76, providna i
     malo smanjena, pa se otkriva na hover. Sve to mora nazad u normalu,
     inace kartica ostane prazna: izmjereno, okvir je bio tu i visok
     137px, ali je slika u njemu stajala na opacity 0 i van toka. */
  .work__peek img {
    position: static;
    width: 100%;
    height: 100%;
    max-width: none;
    border-radius: 0;
    object-fit: cover;
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Godina i znak plus se sklanjaju: u kartici ih zamjenjuje dugme. */
  .work__meta { display: none; }

  .work__cta {
    order: 2;
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
    min-height: 48px;
    padding: 0 20px;
    border-radius: var(--radius-pill);
    border: var(--border-width) solid var(--ink-900);
    font-size: var(--btn-font-size);
    color: var(--ink-900);
  }

  .work__cta-icon { width: var(--btn-icon); height: var(--btn-icon); }

  .works__nav {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: var(--space-4);
  }

  .works__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border: var(--border-width) solid var(--ink-900);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--ink-900);
    cursor: pointer;
  }

  .works__arrow svg { width: 18px; height: 18px; }

  /* Lijeva strelica je ista ikona okrenuta, da se ne dodaje jos jedan
     simbol u spisak. */
  .works__arrow[data-dir="-1"] svg { transform: scaleX(-1); }

  .works__arrow--solid {
    background-color: var(--pure-black);
    border-color: var(--pure-black);
    color: var(--cream-50);
  }

  .works__arrow[disabled] { opacity: 0.35; cursor: default; }
}

/* Van telefona strelice i natpis u kartici ne postoje: tamo je lista. */
@media (min-width: 810px) {
  .works__nav { display: none; }
  .work__cta  { display: none; }
}

/* ----- 6.2f FAQ  /  po Konstrinoj "Common questions" ----------------------
   Dvije kolone: naslov lijevo i zalijepljen, pitanja desno.
   -------------------------------------------------------------------------- */

.faq {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 48px;
  width: 100%;
  padding: 112px var(--container-pad);
  background-color: var(--cream-50);
}

@media (max-width: 1439.98px) { .faq { flex-direction: column; padding: 80px var(--container-pad); } }
@media (max-width: 809.98px)  { .faq { padding: 64px var(--container-pad); } }

.faq__container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 48px;
  width: 100%;
  max-width: var(--container-content);
}

@media (max-width: 1439.98px) { .faq__container { flex-direction: column; } }
@media (max-width: 809.98px)  { .faq__container { gap: 40px; } }

/* Naslov ostaje na mjestu dok se pitanja skroluju pored njega.
   Ispod 1440px lijepljenje se gasi, jer tamo kolone idu jedna ispod druge. */
.faq__heading {
  position: sticky;
  top: var(--card-stack-top);
  z-index: 1;
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

@media (max-width: 1439.98px) {
  .faq__heading { position: static; flex: none; width: 100%; }
}

.faq__title {
  margin: 0;
  max-width: 617px;
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: var(--weight-medium);
  line-height: 50px;
  letter-spacing: var(--tracking-tighter);
  color: var(--ink-900);
}

.faq__title-accent { color: var(--brown-800); }

/* Oznaka je u sekcijama na crnom pjescana. Ovdje je podloga kremasta,
   gdje pjescana daje oko 1.2:1 i prakticno se ne vidi. Na svijetlom ide
   smedja: #504732 na #FFF7E5 daje 8.1:1. */
.faq .label--caps { color: var(--brown-800); }

@media (min-width: 1440px) { .faq__title { font-size: 50px; line-height: 58px; } }
@media (max-width: 809.98px) { .faq__title { font-size: 30px; line-height: 38px; } }

/* --- Lista --- */

.faq__list {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--space-5);
  width: 624px;
  max-width: 100%;
}

@media (max-width: 1439.98px) { .faq__list { width: 100%; } }

.faq__item {
  border-radius: 12px;
  background-color: var(--cream-200);
  transition: background-color var(--duration-hover-faq) var(--ease-hover);
}

.faq__item:hover { background-color: var(--sand-300); }

/* Ulazak je 60px, duplo vise nego drugdje na sajtu. Tako je i na
   originalu: redovi FAQ-a dolaze izrazenije nego ostali blokovi. */
.js-reveal-ready .faq__item { transform: translateY(60px); }
.js-reveal-ready .faq__item.is-revealed { transform: none; }

.faq__q { margin: 0; }

/* Pravo dugme, ne div sa klikom. Tastatura i citaci ekrana rade sami
   od sebe: Enter i razmak otvaraju, aria-expanded javlja stanje. */
.faq__btn {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  margin: 0;
  padding: var(--space-6);
  background: transparent;
  border: 0;
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

@media (max-width: 809.98px) { .faq__btn { padding: var(--space-5); } }

.faq__btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--ink-900);
  outline-offset: calc(-1 * var(--focus-ring-width));
}

.faq__text {
  flex: 1 1 auto;
  max-width: 478px;
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-h5);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
}

/* Znak plus: kvadrat 32x32 na pjescanoj podlozi, dvije crte od 1px.
   Uspravna se na otvaranju okrene za 90 stepeni i poklopi sa vodoravnom,
   pa plus postane minus. Bez zamjene ikone i bez dodatnog markupa. */
.faq__sign {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background-color: var(--sand-300);

  /* Ovoga ranije nije bilo, pa je znak mijenjao boju trenutno dok se red
     ispod njega jos pretapao. To je bio dobar dio razloga zasto je hover
     djelovao naglo. Sad idu istim tempom. */
  transition: background-color var(--duration-hover-faq) var(--ease-hover);
}

.faq__item:hover .faq__sign { background-color: var(--cream-50); }

.faq__bar {
  position: absolute;
  width: 14px;
  height: 1px;
  background-color: var(--pure-black);
  transition: transform var(--duration-hover) var(--ease-hover);
}

.faq__bar--v { transform: rotate(90deg); }

.faq__btn[aria-expanded="true"] .faq__bar--v { transform: rotate(0deg); }

/* --- Odgovor ---
   Otvaranje ide preko max-height i opacity. Vrijednost se ne pogadja
   nego je skripta izmjeri i upise u --h, pa prelaz uvijek stane tacno
   na visinu teksta umjesto da skoci ili da se odsijece. */
.faq__panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height var(--duration-hover) var(--ease-hover),
    opacity    var(--duration-hover) var(--ease-hover);
}

.faq__panel[hidden] { display: block; }

.faq__btn[aria-expanded="true"] + .faq__panel,
.faq__panel.is-open {
  max-height: var(--h, 400px);
  opacity: 1;
}

.faq__answer {
  padding: 0 var(--space-6) var(--space-6);
  max-width: 478px;
  font-size: var(--text-lg);
  line-height: var(--leading-lead);
  color: var(--brown-800);
}

.faq__answer p { margin: 0; }

@media (max-width: 809.98px) { .faq__answer { padding: 0 var(--space-5) var(--space-5); } }

@media (prefers-reduced-motion: reduce) {
  .faq__panel { transition: none; }
  .faq__bar { transition: none; }
}

/* ----- 6.9 Podnozje  /  po Konstri ----------------------------------------
   Naslov i poziv gore, kolone linkova, pravna traka, pa ogroman wordmark.
   -------------------------------------------------------------------------- */

.footer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-9);
  width: 100%;
  padding: 112px var(--container-pad) 0;
  background-color: var(--pure-black);
  color: var(--stone-500);
  overflow: hidden;
}

@media (max-width: 809.98px) { .footer { padding: 64px var(--container-pad) 0; gap: 40px; } }

.footer__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
  width: 100%;
  max-width: var(--container-content);
}

.footer__top {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  width: 100%;
}

@media (max-width: 809.98px) {
  .footer__top { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
}

.footer__lead {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
}

.footer__title {
  margin: 0;
  max-width: 680px;
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: var(--weight-medium);
  line-height: 50px;
  letter-spacing: var(--tracking-tighter);
  color: var(--cream-100);
}

.footer__title-accent { color: var(--sand-300); }

@media (max-width: 809.98px) { .footer__title { font-size: 30px; line-height: 38px; } }

.footer__sub {
  margin: 0;
  max-width: 520px;
  font-size: var(--text-lg);
  line-height: var(--leading-lead);
  color: var(--stone-500);
}

.footer__cta { flex: none; }

/* --- Kolone --- */

/* Bez gornje linije: gornji blok podnozja je uklonjen, pa linija vise
   nema sta da razdvaja. */
/* Cetiri kolone od 02.09.2026, kad je uz Mreze dosao i globus. */
.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
  width: 100%;
}

@media (min-width: 810px) and (max-width: 1199.98px) {
  /* Na tabletu cetiri kolone postanu preuske za mejl adresu, pa idu dvije
     po dvije. */
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); }
}

@media (max-width: 809.98px) {
  .footer__cols { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
}

.footer__col { display: flex; flex-direction: column; gap: var(--space-4); }

/* Naslovi kolona su veci i izrazeniji nego na Konstri, na zahtjev:
   sa 16px na 24px, sa razmakom ispod. Verzal bi ih dodatno naglasio
   ali bi se sudario sa ostatkom podnozja, pa je ostalo malo slovo. */
.footer__heading {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-h5);
  letter-spacing: var(--tracking-tight);
  color: var(--cream-50);
}

@media (max-width: 809.98px) { .footer__heading { font-size: var(--text-xl); } }

.footer__nav { display: flex; flex-direction: column; gap: var(--space-3); }

/* Jedino pravilo za linkove i podatke u podnozju. Do 10.08.2026. je nize
   u fajlu stajalo jos jedno, iz Strux verzije, koje ga je gazilo i drzalo
   sve na 14px. Obrisano je, vidi komentar na tom mjestu.

   20px je na zahtjev, veci od zatecenih 14. Provjereno da staje: najduzi
   red je "montaznehale24@gmail.com" i na 20px trazi 266px, a najuza
   kolona u podnozju je 3fr, dakle oko 306px na 1440. Na 22px bi trazio
   292px i skoro dodirivao ivicu, pa je 20 gornja sigurna granica.
   Naslovi kolona ostaju 24px, tako da razlika medju njima ostaje. */
.footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;              /* preneseno iz obrisanog pravila, za dodir */
  font-size: var(--text-xl);
  line-height: 28px;
  color: var(--stone-500);
  text-decoration: none;
  font-style: normal;
  width: fit-content;
  transition: color var(--duration-hover) var(--ease-hover);
}

.footer__link:hover { color: var(--cream-100); }
.footer__link--plain { cursor: default; }

/* Mreze su ikonice, ne tekst. U podnozju je podloga crna, pa krug ide
   na svijetlu ivicu umjesto na tamnu iz osnovne varijante. */
.footer__col .social { margin-top: 0; gap: var(--space-3); }

.footer__col .social__link {
  border-color: var(--color-dark-border);
  color: var(--stone-500);
}

.footer__col .social__link:hover {
  border-color: var(--cream-50);
  color: var(--cream-50);
  background-color: rgba(255, 255, 255, 0.08);
}

/* --- Pravna traka --- */

.footer__legal {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--color-dark-border);
  font-size: var(--text-sm);
  color: var(--stone-700);
}

.footer__legal p { margin: 0; }

/* Link na politiku privatnosti stoji u istoj recenici sa autorskim pravom,
   pa mora biti tisi od naslova a jasno kliknjiv. --stone-500 na #030000 daje
   8.3:1, a podvlaka se pojavljuje na hover, kao i ostali linkovi u podnozju. */
.footer__legal-link {
  color: var(--stone-500);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-hover) var(--ease-hover),
              color var(--duration-hover) var(--ease-hover);
}

.footer__legal-link:hover { color: var(--cream-50); border-bottom-color: var(--cream-50); }

/* Potpis izradjivaca. Ime je pjescano i podebljano, ostatak recenice ostaje
   prigusen kao i autorsko pravo pored njega, pa potpis ne konkurise sadrzaju
   podnozja. --sand-300 na #030000 daje 15.4:1. */
.footer__author { margin: 0; }

.footer__author-link {
  color: var(--sand-300);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-hover) var(--ease-hover);
}

.footer__author-link:hover { border-bottom-color: var(--sand-300); }

/* Pravna traka sada nosi tri stavke umjesto dvije. Na sirokom ekranu ide
   razmaknuto po sirini, na uzem u kolonu, kao i do sada. */
@media (min-width: 810px) {
  .footer__legal { gap: var(--space-5); }
}

@media (max-width: 809.98px) {
  .footer__legal { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}

/* --- Ogroman wordmark ---
   Velicina je vezana za sirinu ekrana da uvijek stane tacno preko
   cijele sirine, bez preliva i bez praznine sa strane.
   Odsijecen je odozdo, pa se vidi samo gornji dio slova, kao kod
   originala gdje wordmark izlazi iz kadra. */
.footer__wordmark {
  align-self: stretch;
  margin-top: var(--space-8);
  margin-inline: calc(-1 * var(--container-pad));
  font-family: var(--font-display);
  /* 27vw je izracunato, ne pogodjeno: na 20.5vw natpis "B-STEEL" je bio
     sirok 1090px na ekranu od 1440, dakle 350px uzi od ekrana. 
     20.5 * 1440/1090 = 27.1vw. Visak se odsijeca kroz overflow na podnozju. */
  font-size: 27vw;
  font-weight: var(--weight-medium);
  line-height: 0.78;
  letter-spacing: -0.04em;
  text-align: center;
  color: var(--ink-900);

  /* nowrap je OBAVEZAN. "B-STEEL" ima crticu, a pretrazivac smije da
     prelomi red poslije nje. Cim tekst dodje do ivice, puca na "B-" i
     "STEEL" u dva reda. */
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  overflow: hidden;
}

/* ----- 6.3 CTA traka ------------------------------------------------------ */

.cta-band__inner {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 900px) {
  .cta-band__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-9); }
}

.cta-band__phone {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tighter);
  color: var(--white);
}

a.cta-band__phone:hover { color: var(--orange-500); }

/* ----- 6.4 Podnozje ------------------------------------------------------- */

/* Staro pravilo za podnozje je obrisano 09.08.2026. Stajalo je POSLIJE
   novog i gazilo mu pozadinu: podnozje je ispadalo #1B1915 umjesto
   #030000, pa je ogroman wordmark, koji je bas #1B1915, bio iste boje
   kao podloga i nije se vidio uopste. */

.footer__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-7);
}

@media (min-width: 700px)  { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); } }

.footer__col { display: flex; flex-direction: column; gap: var(--space-4); }

/* Staro pravilo za naslove kolona je obrisano 09.08.2026. Stajalo je
   POSLIJE novog i gazilo ga: naslovi su ostajali 12px verzal umjesto
   24px, iako je novo pravilo bilo tacno. Izmjereno: 600 12px / 32px. */

/* Staro pravilo za linkove i razmak u podnozju je obrisano 10.08.2026.
   Stajalo je POSLIJE novog i gazilo ga, isto kao pozadina podnozja i
   naslovi kolona iznad. Posljedica je bila da su svi linkovi i podaci u
   podnozju stajali na 14px umjesto na velicini iz novog pravila, a razmak
   izmedju njih na 4px umjesto 12px. Izmjereno u pretrazivacu: 14px na sva
   cetiri sirine, iako je novo pravilo trazilo 18px.
   Ono sto je u starom pravilu bilo korisno (inline-flex, poravnanje,
   min-height 36px za dodir) preneseno je gore u jedino pravilo. */

.social { display: flex; gap: var(--space-3); margin-top: var(--space-1); }

/* Krug je 52px umjesto 44px koliko je minimum za dodir: mreze su jedini
   dokaz rada koji klijent trenutno ima, pa smiju da budu uocljivije. */
.social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: var(--border-width) solid var(--color-dark-border);
  border-radius: var(--radius-pill);
  color: var(--color-dark-text);
  transition: color var(--duration-fast) var(--ease-in-out),
              border-color var(--duration-fast) var(--ease-in-out);
}

.social__link:hover { color: var(--white); border-color: rgba(255, 255, 255, 0.45); }
.social__link svg { display: block; width: 22px; height: 22px; }

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--color-dark-hairline);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.5);
}

@media (min-width: 768px) {
  .footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ==========================================================================
   7. PRISTUPACNOST I POKRET
   ========================================================================== */

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 200;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background-color: var(--white);
  color: var(--color-heading);
  font-weight: var(--weight-semibold);
  transform: translateY(-200%);
  transition: transform var(--duration-fast) var(--ease-out);
}

.skip-link:focus { transform: translateY(0); }

:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

.section--dark :focus-visible,
.header :focus-visible,
.hero :focus-visible,
.footer :focus-visible { outline-color: var(--orange-500); }

a, button, [role="button"], summary { cursor: pointer; }
::selection { background-color: var(--color-heading); color: var(--white); }

/* --------------------------------------------------------------------------
   POJAVLJIVANJE NA SKROL
   Preslikano iz Strux chunkova, vrijednosti nisu procijenjene:
     od  opacity 0, translateY 50px
     do  opacity 1, translateY 0
     0.6s, cubic-bezier(.44, 0, .56, 1)
     stepenasto kasnjenje u koracima od 0.1s
   Puna analiza: research/2026-08-09-strux-template-teardown.md

   Pocetno stanje se primjenjuje TEK kad skripta doda .js-reveal-ready na
   <html>. Da stoji staticki u HTML-u, stranica bi ostala nevidljiva ako
   JS ne ucita.
   -------------------------------------------------------------------------- */

.js-reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-shift-mobile));
  transition: opacity var(--duration-slow) var(--ease-spring),
              transform var(--duration-slow) var(--ease-spring);
}

/* Pun pomak tek od tableta navise. Na telefonu 50px izgleda kao poskakivanje. */
@media (min-width: 700px) {
  .js-reveal-ready [data-reveal] { transform: translateY(var(--reveal-shift)); }
}

.js-reveal-ready [data-reveal].is-revealed { opacity: 1; transform: none; }

/* Koraci u sekciji Kako radimo ulaze DRUGACIJE od svega ostalog na sajtu.
   Izmjereno na Konstri, prvo uzorkom na svakih 50px kroz sekciju, pa onda
   jos jednom u vremenu sa zaustavljenim skrolom:

     pomak     translateY 60px -> 0, duplo vise nego nasih 30px
     PROZIRNOST SE NE MIJENJA. opacity stoji na 1 cijelo vrijeme, u
               markupu i kroz cijelu animaciju. Nema pretapanja.
     trajanje  do ispod pola piksela za oko 1340ms, kriva je cisto
               opadajuca eksponencijala: 60 / 46.5 / 29.0 / 10.5 / 1.5
               na 0 / 105 / 232 / 504 / 1024 ms
     okidanje  svaka stavka za sebe, cim joj vrh dodje na oko 1.04 visine
               ekrana, dakle tik ispod donje ivice

   Zato ovdje ide opacity: 1. Nasa podrazumijevana pojava krece od
   opacity 0, a to bi bilo pretapanje kojeg na originalu nema.

   Nema ni stepenastog kasnjenja. Kaskada na Konstri ne dolazi od odgode
   nego od rasporeda: stavke su razmaknute po visini, pa svaka krece kad
   na nju dodje red. Dodano kasnjenje bi ih odvojilo od tog trenutka.

   MORA da stoji IZA pravila .js-reveal-ready [data-reveal] iznad. Oba
   imaju istu specificnost (0,2,0), pa odlucuje redoslijed u fajlu. Da je
   ovo bilo gore, uz samu sekciju, pravilo bi bilo mrtvo. */
.js-reveal-ready .phase { opacity: 1; transform: translateY(60px); }
.js-reveal-ready .phase.is-revealed { opacity: 1; transform: none; }

/* Redovi FAQ-a su i meta pojavljivanja i imaju hover na podlozi, a to se
   dvoje tuklo. Pravilo .js-reveal-ready [data-reveal] iznad postavlja
   SKRACENI transition (opacity + transform), a skraceni oblik brise sve
   sto nije nabrojano. Time je nestala tranzicija na background-color iz
   pravila .faq__item, pa je podloga na hover mijenjala boju TRENUTNO.
   Izmjereno: transition-duration na .faq__item je bio "1.4s, 1.4s",
   dakle samo pojavljivanje, bez boje.

   Zato se ovdje sve tri navode zajedno. Boja ide sporije od pojavljivanja,
   0.8s, na zahtjev, i istim tempom kao znak plus. */
.js-reveal-ready .faq__item {
  transition: opacity          var(--duration-slow)       var(--ease-spring),
              transform        var(--duration-slow)       var(--ease-spring),
              background-color var(--duration-hover-faq)  var(--ease-hover);
}

/* Stepenasto kasnjenje. Skripta upisuje --i na djecu kontejnera. */
.js-reveal-ready [data-reveal-stagger] > * {
  transition-delay: calc(var(--i, 0) * var(--reveal-step));
}

/* --------------------------------------------------------------------------
   HOVER NA SLICI
   Original uvecava tacno 8%, 0.3s, ista kriva.
   -------------------------------------------------------------------------- */

.collage__item:hover img,
.hero__chip:hover .hero__chip-media img { transform: scale(var(--hover-scale)); }

.collage__item img,
.hero__chip-media img {
  transition: transform var(--duration-hover-slow) var(--ease-hover);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .js-reveal-ready [data-reveal] { opacity: 1; transform: none; }
  .work:hover img, .service:hover,
  .segment:hover .segment__media img,
  .collage__item:hover img { transform: none; }
}

@media print {
  .header, .menu-toggle, .watermark { display: none; }
  body { background: #fff; color: #000; }
}


/* ==========================================================================
   WIZARD FORMA
   --------------------------------------------------------------------------
   Preseljeno iz stranice.css 02.09.2026. Wizard stoji na DVIJE strane: u
   sekciji Kontakt na pocetnoj i na kontakt.html, a pocetna ne ucitava
   stranice.css, pa pravila moraju biti ovdje.

   Nije sa Konstre. Konstra ima obicnu formu u jednom koraku; ovo je wizard
   iz skilla website-build-rules: koraci sa dugmadima, tekstualna polja tek
   na kraju, traka napretka, Nazad na svakom koraku osim prvog.

   Svijetla varijanta ispod je zaticena i vise se nigdje ne koristi, jer su
   obje instance u staklenoj kartici. Ostaje kao osnova nad kojom tamna
   varijanta prepisuje tokene.
   ========================================================================== */
   na kraju, traka napretka, Nazad na svakom koraku osim prvog.
   ========================================================================== */
.wizard {
  padding: var(--space-8);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg);
}

.wizard__bar { display: flex; gap: 6px; margin-bottom: var(--space-3); }

/* ==========================================================================
   WIZARD U STAKLENOJ KARTICI
   --------------------------------------------------------------------------
   Od 02.09.2026. wizard stoji u .glass kartici na OBJE strane: u sekciji
   Kontakt na pocetnoj i na kontakt.html. Ranije je na pocetnoj bila obicna
   forma u jednom koraku, a na kontaktu wizard na svijetloj podlozi, pa su
   dva obrasca za isti posao izgledala kao dva razlicita sajta.

   Pravilo je jednostavno: wizard ne nosi svoj izgled nego preuzima onaj
   koji staklena kartica vec ima. Zato se ovdje prepisuju samo TOKENI koje
   .wizard koristi, a ne pojedinacna pravila. Tamna varijanta je izvedena
   iz stare forme, vrijednost po vrijednost:

     podloga polja      rgba(255,255,255,0.05)   isto kao .glass .field__input
     okvir u miru       transparent              isto
     okvir na hover     rgba(255,255,255,0.20)   isto kao :focus na polju
     izabrano           --sand-300               isto kao ikonica na fokusu
     radius             10px                     isto kao polja
     naslov             --cream-50
     tekst              --stone-500

   Zadnji korak wizarda uopste i ne koristi .wfield input nego bas
   .field__wrap + .field__icon + .field__input iz stare forme, pa su polja
   doslovno ista komponenta.
   ========================================================================== */
.contact__card .wizard,
.kontakt__card .wizard {
  /* Iznad ukrasnih slojeva staklene kartice (mrezica z-index 1, snopovi 3),
     da klik sigurno stigne do dugmadi. */
  position: relative;
  z-index: 4;
  --color-bg: transparent;
  --color-bg-alt: rgba(250, 225, 166, 0.14);
  --color-surface: rgba(255, 255, 255, 0.05);
  --color-border: transparent;
  --color-heading: var(--cream-50);
  --color-text: var(--stone-500);
  --brown-800: var(--stone-500);
  --stone-600: var(--stone-500);
  --stone-300: rgba(255, 255, 255, 0.16);
  --color-focus: var(--sand-300);
  /* --brand-blue je kod nas vezan za crnu (vidi tokens.css). Na tamnoj
     kartici crna traka napretka se ne bi vidjela, pa ovdje postaje
     pjescana, ista boja kojom se pali ikonica u polju. */
  --brand-blue: var(--sand-300);
  /* Okvir i radius dolaze od same staklene kartice, ali razmak mora ostati,
     inace traka napretka i koraci sjede na ivici. */
  padding: var(--space-8);
  border: 0;
  background: none;
}

@media (max-width: 809.98px) {
  .contact__card .wizard,
  .kontakt__card .wizard { padding: var(--space-5); }
}

/* Kartice izbora dobijaju isti radius i isto ponasanje ivice kao polja u
   staroj formi: u miru bez ivice, na hover bijela na 20%, izabrana
   pjescana. */
.contact__card .wopt,
.kontakt__card .wopt { border-radius: 10px; }

.contact__card .wopt:hover,
.kontakt__card .wopt:hover {
  border-color: rgba(255, 255, 255, 0.20);
  background-color: rgba(255, 255, 255, 0.10);
}

.contact__card .wopt.is-picked,
.kontakt__card .wopt.is-picked { border-color: var(--sand-300); }

/* Ikonica u kartici se pali kad je kartica izabrana, isto kao ikonica u
   polju kad polje dobije fokus. */
.contact__card .wopt.is-picked svg,
.kontakt__card .wopt.is-picked svg { color: var(--sand-300); }

.contact__card .wnav__back,
.kontakt__card .wnav__back { border-color: rgba(255, 255, 255, 0.20); }

.contact__card .wnav__back:hover,
.kontakt__card .wnav__back:hover { border-color: var(--cream-50); color: var(--cream-50); }

.contact__card .wizard__done,
.kontakt__card .wizard__done {
  position: relative;
  z-index: 4;
  color: var(--stone-500);
  background-color: rgba(255, 255, 255, 0.05);
  border: var(--border-width) solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  margin: var(--space-8);
}

.contact__card .wizard__done h2,
.kontakt__card .wizard__done h2 { color: var(--cream-50); }

/* Greska mora da se vidi i na crnom. --red-500 na #030000 daje 4.6:1. */
.contact__card .wizard__err,
.kontakt__card .wizard__err { color: var(--red-500); }

/* Na kontaktu kartica nosi samo sirinu; izgled dolazi od .glass. */
.kontakt__card { width: 100%; }

.wizard__tick {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background-color: var(--stone-300);
  transition: background-color var(--duration-base) var(--ease-hover);
}

.wizard__tick.is-done { background-color: var(--brand-blue); }

.wizard__count {
  margin: 0 0 var(--space-6);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--stone-600);
}

.wstep { display: none; flex-direction: column; gap: var(--space-5); }
.wstep.is-active { display: flex; }

.wstep__q {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-h5);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-medium);
  color: var(--color-heading);
}

/* Kartice izbora. Dodir na karticu sam vodi na sljedeci korak. */
.wopts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

.wopt {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-4);
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-heading);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--duration-hover) var(--ease-hover),
              background-color var(--duration-hover) var(--ease-hover);
}

.wopt:hover { border-color: var(--ink-900); }
.wopt.is-picked { border-color: var(--brand-blue); background-color: var(--color-bg-alt); }
.wopt svg { width: 20px; height: 20px; flex: none; color: var(--brown-800); }

/* Polja na zadnjem koraku. */
.wfields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.wfield { display: flex; flex-direction: column; gap: 6px; }
.wfield--full { grid-column: 1 / -1; }
.wfield label { font-size: var(--text-sm); color: var(--stone-600); }

.wfield input,
.wfield textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-heading);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}

.wfield input:focus-visible,
.wfield textarea:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: 2px;
}

.wfield textarea { min-height: 110px; resize: vertical; }

.wnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.wnav__back {
  min-height: var(--touch-target-min);
  padding: 0 var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--brown-800);
  background: none;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.wnav__back:hover { border-color: var(--ink-900); color: var(--ink-900); }
.wnav__back[hidden] { display: none; }

.wizard__note { margin: var(--space-4) 0 0; font-size: var(--text-sm); color: var(--stone-600); }

.wizard__done {
  display: none;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-7);
  text-align: center;
}

.wizard__done.is-shown { display: flex; }

.wizard__done h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  color: var(--color-heading);
}

.wizard__done p { margin: 0; color: var(--color-text); }
.wizard__err { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--color-error); }
.wizard__err[hidden] { display: none; }

/* --- Reset fieldseta ------------------------------------------------------
   <fieldset> i <legend> nose okvir i uvlaku iz podrazumijevanog stila
   pretrazivaca. Semantika se zadrzava zbog citaca ekrana, izgled se gasi. */
.wstep { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.wstep__q { padding: 0; }

/* [hidden] mora da pobijedi .btn { display: inline-flex } */
.wnav [hidden] { display: none !important; }

/* Wizard programski fokusira naslov koraka da citac ekrana prati promjenu.
   Naslov nije interaktivan, pa mu vizuelni prsten nije potreban i samo
   izgleda kao greska u dizajnu. Fokus ostaje, prsten se gasi. */
.wstep__q:focus,
.wstep__q:focus-visible { outline: none; }

/* --- Telefon: sve u jednu kolonu ----------------------------------------- */
@media (max-width: 809.98px) {
  .wizard { padding: var(--space-5); }
  .wopts { grid-template-columns: 1fr; }
  .wfields { grid-template-columns: 1fr; }
}


/* ==========================================================================
   GLOBUS U PODNOZJU  /  .globus
   --------------------------------------------------------------------------
   Umjesto trazene React komponente na WebGL biblioteci cobe, isti pokret na
   obicnom 2D platnu, bez ijedne zavisnosti. Skripta je initGlobus u main.js,
   tacke u js/globus-podaci.js.

   Cetvrta kolona u podnozju. Ispod 810px podnozje ionako prelazi u jednu
   kolonu, pa globus tamo ide u red sa natpisom i ogranicava se na 200px, da
   ne pojede pola ekrana.
   ========================================================================== */
.globus {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.globus__canvas-wrap {
  position: relative;
  width: 100%;
  max-width: 190px;
  aspect-ratio: 1 / 1;
  /* Platno se pojavljuje tek kad skripta izmjeri i iscrta prvi kadar, da se
     ne vidi trenutak praznog kvadrata. */
  opacity: 0;
  transition: opacity 900ms var(--ease-hover);
}

.globus__canvas-wrap.is-ready { opacity: 1; }

.globus__canvas-wrap canvas { display: block; width: 100%; height: 100%; }

.globus__note {
  margin: 0;
  max-width: 30ch;
  font-size: var(--text-sm);
  line-height: 20px;
  color: var(--stone-600);
}

/* Bez skripte ostaje samo natpis, sto je i dalje tacan podatak. */
.no-js .globus__canvas-wrap { display: none; }

@media (max-width: 809.98px) {
  .globus__canvas-wrap { max-width: 200px; }
}


/* ==========================================================================
   KARTICE SA FOTOGRAFIJAMA  /  .gal, .gcard
   --------------------------------------------------------------------------
   Preseljeno iz stranice.css 02.09.2026, kad je sekcija Radovi na pocetnoj
   presla sa numerisanih redova na iste kartice kao na strani Galerija.
   Pocetna ne ucitava stranice.css, pa pravila moraju biti ovdje.
   ========================================================================== */
/* --- Galerija: mreza kartica po Konstrinoj /project ---
   Mjere iz njenog izvora:
     Sekcija  #FFF7E5, padding 112px 72px, kontejner max-width 1320
     Kartica  632 sirine, padding 32, overflow hidden, slika preko cijele
              povrsine, veo preko nje, podaci na dnu
     Tacka    7px izmedju tipa posla i mjesta
   Slika se na hover uveca; uvecanje ide na slici, ne na kartici, pa se
   ivice i tekst ne mrdaju. */
.gal {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 112px var(--container-pad);
  background-color: var(--cream-50);
}

.gal__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  width: 100%;
  max-width: var(--container-content);
}

.gcard {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 632 / 500;
  padding: 32px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;
  background-color: var(--ink-900);
}

/* Isti razlog kao kod .ocean: slojevi na pozitivnom z-indeksu, inace slika
   ide iza pozadine same kartice i kartica ostane prazan pravougaonik. */
.gcard__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

.gcard__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 600ms var(--ease-hover);
}

/* Veo je jaci pri dnu, jer podaci sjede tamo. */
.gcard__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(6, 10, 20, 0.15) 0%,
    rgba(6, 10, 20, 0.45) 55%,
    rgba(6, 10, 20, 0.85) 100%);
  transition: opacity var(--duration-fast) var(--ease-hover);
}

.gcard:hover .gcard__media img,
.gcard:focus-visible .gcard__media img { transform: scale(1.06); }

.gcard:hover .gcard__veil,
.gcard:focus-visible .gcard__veil { opacity: 0.85; }

.gcard__body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: var(--space-2); }

.gcard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--stone-500);
}

.gcard__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background-color: var(--sand-300);
}

.gcard__name {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-h4);
  letter-spacing: var(--tracking-tighter);
  font-weight: var(--weight-medium);
  color: var(--cream-50);
}

/* Na pocetnoj stoji IZBOR radova, ne cijela galerija, pa ide tri u redu
   umjesto dva: sest kartica u dva reda staje u jedan pogled, a na Galeriji
   ih je trinaest i tamo veci kadar ima smisla. */
.works__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.works__grid .gcard { aspect-ratio: 4 / 3.2; padding: 24px; }
.works__grid .gcard__name { font-size: var(--text-2xl); line-height: var(--leading-h5); }

@media (max-width: 1199.98px) {
  .works__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 809.98px) {
  .gal__grid { grid-template-columns: 1fr; }
  .gcard { aspect-ratio: 4 / 3; padding: 20px; }
  .works__grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   UCITAVANJE  /  .preloader, .conveyor
   --------------------------------------------------------------------------
   Trazena je React komponenta ConveyorLoop. Ova nije imala nijednu
   biblioteku, samo Tailwind klase i cn(), pa je prevedena jedan na jedan u
   obican CSS. Ponasanje je isto: tri bloka putuju s lijeva na desno preko
   trake od tackica, svaki sa malim kasnjenjem, u petlji.

   Original       -> ovdje
     ░ x 10       -> .conveyor__track, --stone-600
     █ ▓ ▒        -> .conveyor__block, --sand-300, z-index 3/2/1
     1.8s linear  -> isto
     delay 0.05s  -> isto, po rednom broju
     mask-color   -> podloga preloadera, da blok pojede traku ispod sebe

   SIGURNOSNA KOCNICA: sloj se sklanja i BEZ skripte. Ako main.js ne stigne
   ili pukne, animacija preloader-odustani ga poslije 6s trajno sakrije.
   Bez toga bi svaka greska u skripti zakljucala cijeli sajt iza crnog polja.
   ========================================================================== */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--pure-black);
  animation: preloader-odustani 0s linear 6s forwards;
}

@keyframes preloader-odustani {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* Skripta ovo postavlja kad strana stigne. Prelaz je kratak, jer preloader
   nije efekat nego cekanje: sto prije nestane, to bolje. */
.preloader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 420ms var(--ease-hover), visibility 0s linear 420ms;
}

.preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.preloader__brand {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--stone-500);
}

/* --- Sama traka ---------------------------------------------------------
   Sirina se racuna u ch jedinicama, kao u originalu, pa mora monospace:
   u proporcionalnom pismu ░ i █ nisu iste sirine i blok bi klizio mimo
   trake. Uzima se sistemsko monospace pismo, bez novog webfonta. */
.conveyor {
  --conveyor-kolona: 10;
  --conveyor-rep: 1.8s;
  --conveyor-korak: 0.05s;

  position: relative;
  display: inline-flex;
  align-items: center;
  width: calc(var(--conveyor-kolona) * 1ch);
  /* 1.4em a ne 1em: glifovi █ ▓ ▒ ░ su puni okvir i visi su od svog em
     kvadrata, pa su na 1em bili odsjeceni po dnu. */
  height: 1.4em;
  overflow: hidden;
  font-family: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Consolas, monospace;
  font-size: 20px;
  line-height: 1;
  user-select: none;
}

.conveyor__track {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  white-space: nowrap;
  color: var(--stone-600);
  pointer-events: none;
}

.conveyor__block {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1ch;
  height: 100%;
  color: var(--sand-300);
  /* Podloga je ista kao podloga preloadera, pa blok prekriva traku ispod
     sebe umjesto da se vidi kroz njega. To je ono sto ga cini blokom. */
  background-color: var(--pure-black);
  pointer-events: none;
  animation: conveyor-hod var(--conveyor-rep) linear infinite;
}

/* Prvi blok je najgore, kao u originalu (z-30, z-20, z-10). */
.conveyor__block:nth-child(2) { z-index: 3; animation-delay: 0s; }
.conveyor__block:nth-child(3) { z-index: 2; animation-delay: var(--conveyor-korak); }
.conveyor__block:nth-child(4) { z-index: 1; animation-delay: calc(var(--conveyor-korak) * 2); }

/* Krece dvije kolone lijevo od trake (koliko je blokova minus jedan) i
   zavrsava toliko desno od nje, pa ulazak i izlazak ostaju van kadra. */
@keyframes conveyor-hod {
  from { transform: translateX(-2ch); }
  to   { transform: translateX(calc((var(--conveyor-kolona) + 2) * 1ch)); }
}

@media (prefers-reduced-motion: reduce) {
  .conveyor__block { animation: none; }
  .conveyor__block:nth-child(2) { transform: translateX(3ch); }
  .conveyor__block:nth-child(3) { transform: translateX(4ch); }
  .conveyor__block:nth-child(4) { transform: translateX(5ch); }
}


/* ==========================================================================
   PREKIDAC JEZIKA  /  .lang
   --------------------------------------------------------------------------
   Dva mala dugmeta, aktivno je puno. Stoji uz dugme Pozovi u zaglavlju i jos
   jednom u mobilnom meniju, jer se zaglavlje na telefonu skuplja na logo i
   hamburger.

   Zaglavlje ima tri stanja i prekidac mora da radi u sva tri:
     na vrhu svijetle sekcije   tamna slova na kremastom
     na vrhu foto heroja        svijetla slova (.header--on-dark)
     poslije skrola             svijetla slova na crnom
   ========================================================================== */
.lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
}

.lang__btn {
  min-width: 34px;
  padding: 5px 8px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted, var(--stone-600));
  background: none;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--duration-fast, 160ms) var(--ease-hover),
              color var(--duration-fast, 160ms) var(--ease-hover);
}

.lang__btn:hover { color: var(--color-heading, var(--ink-900)); }

.lang__btn.is-on {
  color: var(--cream-50);
  background-color: var(--ink-900);
}

/* Na tamnoj podlozi se sve okrece: ivica i slova posvijetle, a aktivno
   dugme postaje kremasto sa tamnim slovom. */
.header--on-dark:not([data-scrolled="true"]) .lang,
.header[data-scrolled="true"] .lang { border-color: rgba(255, 255, 255, 0.28); }

.header--on-dark:not([data-scrolled="true"]) .lang__btn,
.header[data-scrolled="true"] .lang__btn { color: var(--stone-500); }

.header--on-dark:not([data-scrolled="true"]) .lang__btn.is-on,
.header[data-scrolled="true"] .lang__btn.is-on {
  color: var(--ink-900);
  background-color: var(--cream-50);
}

.lang--menu {
  align-self: flex-start;
  margin-top: var(--space-5);
  border-color: rgba(255, 255, 255, 0.28);
}

.lang--menu .lang__btn { color: var(--stone-500); }
.lang--menu .lang__btn.is-on { color: var(--ink-900); background-color: var(--cream-50); }

/* Na telefonu prekidac iz zaglavlja odlazi: tamo su samo logo i hamburger,
   a prekidac stoji u otvorenom meniju. */
@media (max-width: 809.98px) {
  .header__actions .lang { display: none; }
}


/* ==========================================================================
   TELEFON: CILJEVI ZA DODIR I SITAN TEKST
   --------------------------------------------------------------------------
   Prolaz 02.09.2026, poslije mjerenja na 320 / 360 / 390 / 430px.
   Mjereno je stvarnom visinom elementa, ne procijenjeno.

   Sta je popravljeno i koliko je bilo:
     .footer__link          36px  navigacija, telefon i mejl u podnozju
     .contact__value        22px  telefon i mejl u sekciji Kontakt
     .kdetail__value        31px  isto, na strani Kontakt
     .locmap__gmaps         33px  dugme Otvori mapu
     .btn (metrics__link)   40px  Vise o nama
     .smenu__social-link    21px  Instagram i Facebook u mobilnom meniju
     .crumbs                18px  putanja iznad naslova

   Sve to su SAMOSTALNI ciljevi: stoje sami u redu ili u spisku, prst ih
   gadja bez susjeda. Njima 44px ima smisla.

   NAMJERNO NIJE DIRANO: .footer__legal-link i .footer__author-link (19px)
   i linkovi u tekstu politike privatnosti. To su linkovi UNUTAR recenice, a
   WCAG 2.5.8 ih izricito izuzima od najmanje velicine cilja. Da bi dobili
   44px, morali bi da razbiju red teksta oko sebe.

   Putanja (.crumbs) ide na 32px, ne na 44: stoji odmah iznad naslova heroja
   i na 44px bi ga vidno odgurala nadolje. 32px je iznad AA minimuma od 24px
   iz istog kriterijuma.
   ========================================================================== */
@media (max-width: 809.98px) {

  /* Podnozje: linkovi u spisku dobijaju visinu, ne veci font. */
  .footer__link {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /* Adresa nije link, pa joj visina ne treba, ali mora ostati poravnata sa
     linkovima iznad nje. */
  .footer__link--plain { min-height: 0; }

  /* Telefon i mejl u sekciji Kontakt su najvazniji ciljevi na sajtu. */
  .contact__value,
  .kdetail__value {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .locmap__gmaps { min-height: 44px; }

  /* Svako dugme, bez izuzetka. */
  .btn { min-height: 44px; }

  .smenu__social-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Kartica lokacije: 10px je bilo neprocitljivo na telefonu. */
  .locmap__hint { font-size: 12px; }
  .locmap__coords { font-size: 13px; }
}

/* Putanja iznad naslova, na svim sirinama gdje je dodir glavni ulaz. */
@media (max-width: 809.98px) {
  .crumbs__item a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
  }
}