/* ══════════════════════════════════════════════════════════
   SAJTDŽINICA — stilovi
   Boje, razmaci i fontovi su na jednom mestu (u :root ispod),
   pa se izgled celog sajta menja odatle.
   ══════════════════════════════════════════════════════════ */

:root {
  /* — boje — */
  --papir:       #F2EDE3;
  --papir-tamni: #E7DFD1;
  --papir-svetli:#FAF7F1;
  --mastilo:     #191512;
  --mastilo-70:  #4A4139;
  --mastilo-45:  #7A6F63;
  --linija:      rgba(25, 21, 18, .16);
  --linija-jaka: rgba(25, 21, 18, .35);
  --akcenat:     #C2412A;
  --akcenat-svetli: #DD6242;
  --maslina:     #5C6B52;

  /* — tipografija — */
  --displej: "Fraunces", Georgia, "Times New Roman", serif;
  --tekst:   "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* — razmaci — */
  --margina: clamp(1.25rem, 5vw, 5.5rem);
  --sekcija: clamp(4.5rem, 10vw, 9rem);
  --maks: 1400px;

  --senka-otisak: 4px 4px 0 var(--mastilo);
}

/* ── reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papir);
  color: var(--mastilo);
  font-family: var(--tekst);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; font-family: var(--displej); font-weight: 600; line-height: 1.05; }
p  { margin: 0 0 1.1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; }

em {
  font-style: italic;
  font-variation-settings: "WONK" 1, "SOFT" 40;
  color: var(--akcenat);
}

::selection { background: var(--akcenat); color: var(--papir-svetli); }

:focus-visible {
  outline: 2px solid var(--akcenat);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--mastilo); color: var(--papir);
  padding: .75rem 1.25rem; font-size: .9rem;
}
.skip-link:focus { left: 0; }

/* ── zrnasta tekstura ── */
.grain {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 100;
  opacity: .16;
  mix-blend-mode: multiply;
}

/* ══════════════════ ZAGLAVLJE ══════════════════ */
.site-head {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  padding: .85rem var(--margina);
  background: color-mix(in srgb, var(--papir) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linija);
}

.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; margin-right: auto; }
.brand__mark { width: 30px; height: 30px; color: var(--akcenat); flex: none; }
.brand__mark svg { width: 100%; height: 100%; }
.brand__word {
  font-family: var(--displej);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -.015em;
  font-variation-settings: "SOFT" 30;
}

.site-nav { display: flex; gap: clamp(1rem, 2.2vw, 2rem); }
.site-nav a {
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .01em;
  padding: .35rem 0;
  position: relative;
  color: var(--mastilo-70);
  transition: color .18s;
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: .1rem;
  height: 1.5px; background: var(--akcenat);
  transition: right .28s cubic-bezier(.22,.9,.3,1);
}
.site-nav a:hover { color: var(--mastilo); }
.site-nav a:hover::after { right: 0; }

/* ── dugmad ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  padding: .8rem 1.5rem;
  font-family: var(--tekst);
  font-size: .95rem; font-weight: 600; letter-spacing: .01em;
  text-decoration: none;
  border: 1.5px solid var(--mastilo);
  background: transparent; color: var(--mastilo);
  cursor: pointer;
  transition: transform .16s cubic-bezier(.3,.8,.3,1), box-shadow .16s, background .2s, color .2s;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: var(--senka-otisak); }
.btn:active { transform: translate(0, 0); box-shadow: 0 0 0 var(--mastilo); }

.btn--ink    { background: var(--mastilo); color: var(--papir); }
.btn--accent { background: var(--akcenat); border-color: var(--akcenat); color: var(--papir-svetli); }
.btn--accent:hover { box-shadow: 4px 4px 0 var(--mastilo); }
.btn--ghost  { background: transparent; }
.btn--full   { width: 100%; }

.site-head__cta { padding: .6rem 1.15rem; font-size: .875rem; }

/* ── mobilni meni ── */
.nav-toggle {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px;
  background: transparent; border: 1.5px solid var(--mastilo);
  cursor: pointer; padding: 0 9px;
}
.nav-toggle span { display: block; height: 1.5px; background: var(--mastilo); transition: transform .25s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  position: sticky; top: 62px; z-index: 49;
  display: flex; flex-direction: column;
  padding: 1rem var(--margina) 1.75rem;
  background: var(--papir);
  border-bottom: 1px solid var(--linija);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu a {
  text-decoration: none; font-family: var(--displej); font-size: 1.5rem; font-weight: 600;
  padding: .5rem 0; border-bottom: 1px solid var(--linija);
}
.mobile-menu__cta {
  margin-top: 1.1rem; border: none !important;
  background: var(--akcenat); color: var(--papir-svetli);
  text-align: center; padding: .85rem !important; font-size: 1.15rem !important;
}

/* ══════════════════ HERO ══════════════════ */
.hero {
  position: relative;
  max-width: var(--maks); margin-inline: auto;
  padding: clamp(3rem, 9vw, 7rem) var(--margina) clamp(3rem, 7vw, 5rem);
}
.hero__inner { max-width: min(100%, 54rem); }

.eyebrow {
  font-size: .78rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--akcenat);
  margin-bottom: 1.5rem;
}
.eyebrow--light { color: var(--akcenat-svetli); }
.dot { opacity: .5; margin-inline: .25em; }

.hero__title {
  font-size: clamp(2.25rem, 8vw, 6.5rem);
  font-weight: 500;
  letter-spacing: -.035em;
  font-variation-settings: "SOFT" 20, "WONK" 0;
  margin-bottom: 1.75rem;
  text-wrap: balance;
}
.hero__title span { display: block; }
.hero__title em { display: inline; }

.hero__lede {
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  color: var(--mastilo-70);
  max-width: 46ch;
  margin-bottom: 2.25rem;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 3rem; }

.hero__trust {
  display: flex; flex-wrap: wrap; gap: .5rem 2rem;
  font-size: .875rem; color: var(--mastilo-45);
  padding-top: 1.5rem; border-top: 1px solid var(--linija);
  max-width: 42rem;
}
.hero__trust strong { color: var(--mastilo); font-weight: 600; }

/* ── pečat ── */
.stamp {
  position: absolute;
  top: clamp(2rem, 7vw, 5rem); right: var(--margina);
  width: clamp(120px, 15vw, 210px); aspect-ratio: 1;
  color: var(--akcenat);
  opacity: .9;
  transform: rotate(-9deg);
  animation: okretanje 44s linear infinite;
}
.stamp svg { width: 100%; height: 100%; overflow: visible; }
.stamp__text {
  font-family: var(--tekst); font-size: 12.5px; font-weight: 600;
  letter-spacing: .17em; fill: currentColor;
}
.stamp__big {
  font-family: var(--displej); font-size: 30px; font-weight: 700;
  letter-spacing: .01em;
  fill: currentColor; font-variation-settings: "SOFT" 40;
}
.stamp__small {
  font-family: var(--tekst); font-size: 12px; font-weight: 600;
  letter-spacing: .3em; fill: currentColor;
}
@keyframes okretanje { to { transform: rotate(351deg); } }
@media (prefers-reduced-motion: reduce) { .stamp { animation: none; } }

@media (max-width: 900px) {
  .stamp { position: static; margin: 2.5rem auto 0; display: block; }
}

/* ── traka koja klizi ── */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--linija);
  background: var(--papir-tamni);
  padding: .9rem 0;
  font-family: var(--displej);
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  font-weight: 500;
  font-variation-settings: "SOFT" 40;
}
.marquee__track {
  display: flex; gap: 1.5rem; width: max-content;
  animation: klizanje 44s linear infinite;
}
.marquee .sep { color: var(--akcenat); }
@keyframes klizanje { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ══════════════════ SEKCIJE ══════════════════ */
.sec {
  max-width: var(--maks); margin-inline: auto;
  padding: var(--sekcija) var(--margina);
}
.sec--tint {
  max-width: none;
  background: var(--papir-tamni);
  border-block: 1px solid var(--linija);
}
.sec--tint > * { }

.sec--split {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: clamp(1.75rem, 5vw, 5rem);
}
.sec--tint.sec--split {
  padding-inline: max(var(--margina), calc((100vw - var(--maks)) / 2 + var(--margina)));
}

.sec__aside {
  display: flex; flex-direction: column; gap: .4rem;
  align-self: start;
  position: sticky; top: 6rem;
}
.sec__num {
  font-family: var(--displej);
  font-size: 2.5rem; font-weight: 700; line-height: 1;
  color: var(--akcenat);
  font-variation-settings: "SOFT" 50;
}
.sec__label {
  font-size: .75rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--mastilo-45);
}

.h2 {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -.03em;
  font-variation-settings: "SOFT" 25;
  margin-bottom: 1.25rem;
  max-width: 18ch;
}
.lede {
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  color: var(--mastilo-70);
  max-width: 55ch;
  margin-bottom: 2.75rem;
}
.napomena {
  margin-top: 2.25rem; padding-top: 1.5rem;
  border-top: 1px solid var(--linija);
  font-size: .9rem; color: var(--mastilo-45); max-width: 62ch;
}
.napomena strong { color: var(--mastilo); }
.napomena a { color: var(--akcenat); text-underline-offset: 3px; }

/* ── kartice ── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--linija); border: 1px solid var(--linija); }
.card { background: var(--papir); padding: 1.75rem 1.5rem; }
.sec--tint .card { background: var(--papir-tamni); }
.card h3 { font-size: 1.2rem; margin-bottom: .6rem; letter-spacing: -.015em; }
.card p  { font-size: .93rem; color: var(--mastilo-70); margin: 0; }

/* ── dve publike ── */
.publika {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.publika__karta {
  border: 1.5px solid var(--mastilo);
  background: var(--papir-svetli);
  padding: 1.85rem 1.6rem 1.6rem;
  display: flex; flex-direction: column; gap: .75rem;
  transition: transform .18s cubic-bezier(.3,.8,.3,1), box-shadow .18s;
}
.publika__karta:hover { transform: translate(-3px, -3px); box-shadow: var(--senka-otisak); }
.publika__karta--alt { background: var(--mastilo); color: var(--papir); border-color: var(--mastilo); }
.publika__karta--alt:hover { box-shadow: 4px 4px 0 var(--akcenat); }
.publika__oznaka {
  font-size: .7rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--akcenat); margin: 0;
}
.publika__karta--alt .publika__oznaka { color: var(--akcenat-svetli); }
.publika__karta h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); letter-spacing: -.02em; margin: 0; }
.publika__karta > p:not(.publika__oznaka) { font-size: .93rem; color: var(--mastilo-70); margin: 0; flex: 1; }
.publika__karta--alt > p:not(.publika__oznaka) { color: rgba(242,237,227,.75); }
.publika__link {
  font-size: .85rem; font-weight: 600; text-decoration: none;
  color: var(--akcenat); margin-top: .35rem;
  border-bottom: 1px solid transparent; align-self: start;
  transition: border-color .18s;
}
.publika__karta--alt .publika__link { color: var(--akcenat-svetli); }
.publika__link:hover { border-bottom-color: currentColor; }

/* ── usluge ── */
.traka {
  font-family: var(--displej);
  font-size: 1.05rem; font-weight: 700;
  letter-spacing: .02em;
  color: var(--akcenat);
  margin: 2.5rem 0 .25rem;
  display: flex; align-items: center; gap: .9rem;
}
.traka:first-of-type { margin-top: 0; }
.traka::after {
  content: ""; flex: 1; height: 1px;
  background: var(--linija-jaka);
}
.usluge { display: grid; gap: 0; }
.usluga {
  display: grid; grid-template-columns: 3.5rem 1fr; gap: 1.25rem;
  padding: 1.85rem 0;
  border-top: 1px solid var(--linija);
}
.usluga:last-child { border-bottom: 1px solid var(--linija); }
.usluga__num {
  font-family: var(--displej); font-size: 1.05rem; font-weight: 600;
  color: var(--akcenat); padding-top: .3rem;
}
.usluga h3 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); letter-spacing: -.02em; margin-bottom: .5rem; }
.usluga p  { color: var(--mastilo-70); max-width: 58ch; margin-bottom: .5rem; }
.usluga__meta {
  font-size: .82rem !important; letter-spacing: .04em;
  color: var(--mastilo-45) !important; margin-bottom: 0 !important;
}

/* ── koraci ── */
.koraci { counter-reset: korak; display: grid; gap: 1px; background: var(--linija); border: 1px solid var(--linija); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.koraci li { counter-increment: korak; background: var(--papir); padding: 1.9rem 1.6rem; }
.sec--tint .koraci li { background: var(--papir-tamni); }
.koraci h3 { font-size: 1.25rem; margin-bottom: .65rem; display: flex; align-items: baseline; gap: .6rem; }
.koraci h3::before {
  content: "0" counter(korak);
  font-family: var(--tekst); font-size: .78rem; font-weight: 600;
  letter-spacing: .1em; color: var(--akcenat);
}
.koraci p { font-size: .93rem; color: var(--mastilo-70); margin: 0; }

/* ── radovi ── */
.radovi { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.75rem; }
.rad__slika {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--linija-jaka);
  background:
    repeating-linear-gradient(45deg, transparent 0 11px, rgba(25,21,18,.045) 11px 22px),
    var(--papir-svetli);
  display: grid; place-items: center;
  margin-bottom: .95rem;
  transition: transform .2s cubic-bezier(.3,.8,.3,1), box-shadow .2s;
}
.rad__slika span {
  font-family: var(--tekst); font-size: .72rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--mastilo-45);
  background: var(--papir); padding: .4rem .8rem; border: 1px solid var(--linija);
}
.rad:hover .rad__slika { transform: translate(-3px, -3px); box-shadow: var(--senka-otisak); }
.rad h3 { font-size: 1.15rem; margin-bottom: .25rem; letter-spacing: -.015em; }
.rad p  { font-size: .88rem; color: var(--mastilo-45); margin: 0; }

/* ── istaknuti rad ── */
.rad-glavni {
  display: flex; align-items: center; gap: clamp(1.25rem, 4vw, 3rem);
  text-decoration: none; color: inherit;
  border: 1.5px solid var(--mastilo);
  background: var(--papir-svetli);
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
  margin-bottom: 1rem;
  transition: transform .18s cubic-bezier(.3,.8,.3,1), box-shadow .18s;
}
.rad-glavni:hover { transform: translate(-4px, -4px); box-shadow: 6px 6px 0 var(--akcenat); }
.rad-glavni__info { flex: 1; min-width: 0; }
.rad-glavni__oznaka {
  font-size: .7rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--akcenat); margin: 0 0 .5rem;
}
.rad-glavni h3 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: -.025em; margin: 0 0 .75rem;
  font-variation-settings: "SOFT" 30;
}
.rad-glavni__opis { font-size: .95rem; color: var(--mastilo-70); margin: 0 0 1rem; max-width: 54ch; }
.rad-glavni__link {
  font-size: .88rem; font-weight: 600; color: var(--akcenat);
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.rad-glavni__pecat {
  width: clamp(88px, 11vw, 130px); flex: none;
  color: var(--akcenat); transform: rotate(-8deg);
  transition: transform .25s cubic-bezier(.3,.8,.3,1);
}
.rad-glavni:hover .rad-glavni__pecat { transform: rotate(4deg) scale(1.04); }
.rad-glavni__pecat svg { width: 100%; height: auto; }
.rad-glavni__pecat-veliki {
  font-family: var(--displej); font-size: 21px; font-weight: 700;
  fill: currentColor; font-variation-settings: "SOFT" 40;
}
.rad-glavni__pecat-mali {
  font-family: var(--tekst); font-size: 8.5px; font-weight: 600;
  letter-spacing: .2em; fill: currentColor;
}
@media (max-width: 640px) {
  .rad-glavni { flex-direction: column-reverse; align-items: flex-start; }
}

/* ── iskustvo (stvarni radovi, bez slika) ── */
/* ivice na svakoj kartici, a ne 1px-gap trik — jer broj kartica
   ne popunjava uvek ceo red, pa bi se videla prazna ćelija */
.iskustvo {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.stavka {
  background: var(--papir-tamni);
  border: 1px solid var(--linija-jaka);
  padding: 1.6rem 1.4rem;
  display: flex; flex-direction: column; gap: .55rem;
}
.stavka__gde {
  font-size: .7rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--akcenat); margin: 0;
}
.stavka h3 { font-size: 1.2rem; letter-spacing: -.015em; margin: 0; }
.stavka p:last-child { font-size: .92rem; color: var(--mastilo-70); margin: 0; }

/* ── cene ── */
.cene { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1.25rem; align-items: start; }
.paket {
  position: relative;
  border: 1.5px solid var(--mastilo);
  background: var(--papir-svetli);
  padding: 2rem 1.6rem 1.6rem;
  display: flex; flex-direction: column; gap: 1.1rem;
}
.paket--istaknut {
  background: var(--mastilo); color: var(--papir);
  box-shadow: var(--senka-otisak);
}
.paket--istaknut .paket__cena, .paket--istaknut .paket__ime { color: var(--papir); }
.paket--istaknut li { border-color: rgba(242,237,227,.18); }
.paket--istaknut .btn--accent:hover { box-shadow: 4px 4px 0 var(--papir); }

.paket__oznaka {
  position: absolute; top: -.85rem; left: 1.6rem;
  background: var(--akcenat); color: var(--papir-svetli);
  font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: .35rem .75rem;
}
.paket__ime { font-size: 1.45rem; letter-spacing: -.02em; }
.paket__cena {
  font-family: var(--displej); font-size: 2.5rem; font-weight: 600;
  letter-spacing: -.03em; line-height: 1; margin: 0;
  font-variation-settings: "SOFT" 30;
  display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap;
}
.paket__cena .od {
  font-family: var(--tekst); font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; opacity: .6;
}
.paket__cena .val { font-family: var(--tekst); font-size: .8rem; font-weight: 600; letter-spacing: .06em; opacity: .7; }
.paket ul { display: grid; gap: 0; flex: 1; }
.paket li {
  font-size: .9rem; padding: .6rem 0;
  border-bottom: 1px solid var(--linija);
}
.paket li:last-child { border-bottom: none; }

/* ── cenovnik (ostale usluge) ── */
.cenovnik { border-top: 1px solid var(--linija); }
.cenovnik li {
  display: flex; align-items: baseline; gap: 1rem 1.5rem; flex-wrap: wrap;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--linija);
}
.cenovnik__sta { display: flex; flex-direction: column; gap: .15rem; flex: 1 1 16rem; min-width: 0; }
.cenovnik__sta strong { font-family: var(--displej); font-size: 1.12rem; font-weight: 600; letter-spacing: -.015em; }
.cenovnik__sta span { font-size: .86rem; color: var(--mastilo-45); }
.cenovnik__cena {
  font-family: var(--displej); font-size: 1.35rem; font-weight: 600;
  letter-spacing: -.02em; white-space: nowrap;
  font-variation-settings: "SOFT" 30;
}
.cenovnik__cena::after {
  content: " RSD";
  font-family: var(--tekst); font-size: .68rem; font-weight: 600;
  letter-spacing: .08em; opacity: .55;
}
.cenovnik__cena--tekst { font-size: 1.05rem; color: var(--mastilo-45); }
.cenovnik__cena--tekst::after { content: "" !important; }

/* ── o meni ── */
.o-meni { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.foto-placeholder {
  aspect-ratio: 4 / 5;
  border: 1.5px solid var(--mastilo);
  background:
    repeating-linear-gradient(-45deg, transparent 0 12px, rgba(25,21,18,.05) 12px 24px),
    var(--papir-svetli);
  display: grid; place-items: center;
  box-shadow: var(--senka-otisak);
}
.foto-placeholder span {
  font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--mastilo-45); background: var(--papir); padding: .4rem .8rem; border: 1px solid var(--linija);
}
.o-meni__tekst p { color: var(--mastilo-70); max-width: 56ch; }
.o-meni .h2 { margin-bottom: 1.5rem; }
.o-meni__kredencijali {
  max-width: none !important;
  margin-top: 1.75rem; padding-top: 1.25rem;
  border-top: 1px solid var(--linija);
  font-size: .78rem !important; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--mastilo-45) !important;
}

@media (max-width: 640px) {
  .o-meni { grid-template-columns: 1fr; }
  .o-meni__foto { max-width: 15rem; }
}

/* ── česta pitanja ── */
.faq { border-top: 1px solid var(--linija); }
.faq details { border-bottom: 1px solid var(--linija); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 1.25rem 2.5rem 1.25rem 0;
  font-family: var(--displej); font-size: clamp(1.08rem, 1.9vw, 1.3rem); font-weight: 600;
  letter-spacing: -.015em;
  position: relative;
  transition: color .18s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--akcenat); }
.faq summary::after {
  content: ""; position: absolute; right: .4rem; top: 50%;
  width: 13px; height: 13px;
  background:
    linear-gradient(currentColor, currentColor) center/100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center/1.5px 100% no-repeat;
  transform: translateY(-50%) rotate(0deg);
  transition: transform .25s cubic-bezier(.3,.8,.3,1);
  color: var(--akcenat);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(135deg); }
.faq details p { margin: 0 0 1.4rem; max-width: 62ch; color: var(--mastilo-70); font-size: .95rem; }

/* ══════════════════ KONTAKT ══════════════════ */
.kontakt {
  background: var(--mastilo);
  color: var(--papir);
  padding: clamp(4rem, 9vw, 7.5rem) var(--margina);
}
/* poravnato sa levom ivicom ostalih sekcija */
.kontakt__inner { max-width: calc(var(--maks) - 2 * var(--margina)); margin-inline: auto; }
.kontakt__title {
  font-size: clamp(2.2rem, 6.5vw, 5rem);
  font-weight: 500; letter-spacing: -.035em;
  font-variation-settings: "SOFT" 25;
  margin-bottom: 1.25rem; max-width: 16ch;
}
.kontakt__lede { color: rgba(242,237,227,.72); max-width: 52ch; font-size: clamp(1rem, 1.4vw, 1.15rem); margin-bottom: 3rem; }

.kanali { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1px; background: rgba(242,237,227,.2); border: 1px solid rgba(242,237,227,.2); }
.kanal {
  display: flex; align-items: center; gap: 1rem;
  background: var(--mastilo);
  padding: 1.5rem 1.35rem;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.kanal:hover { background: var(--akcenat); }
.kanal--glavni { background: rgba(242,237,227,.07); }
.kanal__ikona { width: 26px; height: 26px; flex: none; color: var(--akcenat-svetli); transition: color .2s; }
.kanal:hover .kanal__ikona { color: var(--papir-svetli); }
.kanal__ikona svg { width: 100%; height: 100%; }
.kanal__tekst { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.kanal__tekst strong { font-size: .76rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: rgba(242,237,227,.6); transition: color .2s; }
.kanal:hover .kanal__tekst strong { color: rgba(255,255,255,.8); }
.kanal__vrednost { font-family: var(--displej); font-size: 1.2rem; font-weight: 600; letter-spacing: -.015em; overflow-wrap: anywhere; }

.kontakt__sitno { margin: 2rem 0 0; font-size: .85rem; color: rgba(242,237,227,.5); }

/* ══════════════════ PODNOŽJE ══════════════════ */
.site-foot { background: var(--papir); border-top: 1px solid var(--linija); padding: 3rem var(--margina); }
.site-foot__inner {
  max-width: calc(var(--maks) - 2 * var(--margina)); margin-inline: auto;
  display: flex; flex-wrap: wrap; gap: 1.75rem 3rem; align-items: baseline;
}
.site-foot__brand { margin-right: auto; }
.site-foot__brand p { font-size: .875rem; color: var(--mastilo-45); margin: .2rem 0 0; }
.site-foot__nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.site-foot__nav a { font-size: .875rem; text-decoration: none; color: var(--mastilo-70); }
.site-foot__nav a:hover { color: var(--akcenat); }
.site-foot__copy { font-size: .8rem; color: var(--mastilo-45); margin: 0; width: 100%; padding-top: 1.5rem; border-top: 1px solid var(--linija); }

/* ══════════════════ ANIMACIJE ULASKA ══════════════════ */
.reveal { animation: ulaz .8s cubic-bezier(.22,.9,.3,1) both; animation-delay: var(--d, 0ms); }
@keyframes ulaz { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.u-vidokrugu { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.22,.9,.3,1), transform .7s cubic-bezier(.22,.9,.3,1); }
.u-vidokrugu.vidljivo { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; }
  .u-vidokrugu { opacity: 1; transform: none; transition: none; }
}

/* ══════════════════ MANJI EKRANI ══════════════════ */
@media (max-width: 900px) {
  .site-nav, .site-head__cta { display: none; }
  .nav-toggle { display: flex; }
  .sec--split { grid-template-columns: 1fr; }
  .sec__aside { position: static; flex-direction: row; align-items: baseline; gap: .75rem; }
  .sec__num { font-size: 1.6rem; }
}

@media (max-width: 560px) {
  .hero__actions .btn { width: 100%; }
  .usluga { grid-template-columns: 1fr; gap: .35rem; }
  .usluga__num { padding-top: 0; }
}

@media print {
  .grain, .stamp, .marquee, .nav-toggle, .mobile-menu { display: none !important; }
  body { background: #fff; }
}