@charset "UTF-8";
/* ==========================================================================
   CDA — sistemi obeležavanja objekata
   Osnova, četiri teme, raspored i komponente.
   Sve teme dele istu narandžastu porodicu iz znaka (#FF6600).
   ========================================================================== */

/* ---------- 1. Reset ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* clip, ne hidden — hidden ubija position:sticky u potomcima */
  overflow-x: clip;
}

body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; }

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

@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;
  }
}

/* ---------- 2. Tokeni ---------- */

:root {
  --ff-head: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --ff-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-base: 1rem;
  --fs-sm:   0.875rem;
  --fs-xs:   0.78rem;
  --fs-lg:   clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
  --fs-h1:   clamp(2.35rem, 1.5rem + 3.6vw, 4.6rem);
  --fs-h2:   clamp(1.75rem, 1.3rem + 2vw, 2.9rem);
  --fs-h3:   clamp(1.25rem, 1.1rem + 0.75vw, 1.65rem);
  --fs-h4:   clamp(1.05rem, 1rem + 0.3vw, 1.2rem);

  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-5: 1.5rem;   --sp-6: 2rem;
  --sp-7: 3rem;     --sp-8: 4rem;     --sp-9: 6rem;
  --sp-10: 8rem;

  --wrap: 1280px;
  --wrap-narrow: 780px;
  --gut: clamp(1.15rem, 4vw, 3rem);
  --radius: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --hdr-h: 78px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.45s;

  color-scheme: dark;
}

/* ---------- 3. Boje ---------- */

/* Osnovna narandžasta prati izvornu paletu CDA znaka. */
:root {
  --c-bg:        #f96000;
  --c-bg-2:      #f96000;
  --c-bg-3:      #ff7a24;
  --c-surface:   #ffe0c4;
  --c-head:      #ffffff;
  --c-text:      #ffffff;
  --c-text-2:    #ffffff;
  --c-text-3:    #ffffff;
  --c-line:      rgba(255, 255, 255, .25);
  --c-line-2:    rgba(255, 255, 255, .4);
  --c-border-ui: #ffffff;
  --c-accent:    #1d1004;
  --c-accent-tx: #ffffff;
  --c-accent-2:  #34210f;
  --c-accent-dim:rgba(255, 255, 255, .55);
  --c-on-accent: #ffffff;
  --c-focus:     #ffffff;
  --shadow:      0 1px 2px rgba(29,16,4,.14), 0 14px 34px rgba(29,16,4,.22);
  --img-frame:   rgba(255, 255, 255, .12);
  color-scheme: light;
}

/* ---------- 4. Tipografija ---------- */

h1, h2, h3, h4 {
  font-family: var(--ff-head);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); letter-spacing: -0.035em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.028em; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

/* Naslov nosi boju odvojeno od teksta: na narandžastim pojasevima ide belo, na
   svetlima ostaje mastilo. Sitniji tekst se za njim ne povodi jer belo na
   narandžastom prolazi samo na naslovnoj meri. Naslovi koje je klasa spustila
   na sitnu meru (`.ftr__t`, `.card__title`) nose svoju boju i ovo ih ne dohvata. */
h1, h2 { color: var(--c-head, inherit); }

p { text-wrap: pretty; }

.lead {
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--c-text-2);
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--ff-head);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-accent-tx);
}

.kicker::before {
  content: "";
  width: 30px;
  height: 2px;
  background: var(--c-accent);
  flex: none;
}

.num {
  font-family: var(--ff-head);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--c-accent-tx);
  font-variant-numeric: tabular-nums;
}

.muted { color: var(--c-text-2); }
.small { font-size: var(--fs-sm); }

/* ---------- 5. Raspored ---------- */

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

.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: clamp(3.5rem, 2rem + 7vw, 7.5rem); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }

.sec-head { max-width: 42rem; margin-bottom: var(--sp-8); }
.sec-head > * + * { margin-top: var(--sp-4); }
.sec-head--wide { max-width: 56rem; }

.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }

.prose > * + * { margin-top: var(--sp-5); }
.prose p { color: var(--c-text-2); max-width: 68ch; }
.prose strong { color: var(--c-text); font-weight: 600; }

.center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--c-accent); color: var(--c-on-accent);
  padding: var(--sp-3) var(--sp-5);
  font-weight: 600;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: transform 0.2s var(--ease);
}
.skip:focus { transform: translate(-50%, 0); }

/* ---------- 6. Dugmad ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: 0.95em 1.9em;
  font-family: var(--ff-head);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  transition: background-color .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .22s var(--ease),
              box-shadow .22s var(--ease);
  will-change: transform;
}
.btn--solid { box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--c-accent) 55%, transparent); }
.btn--solid:hover { box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--c-accent) 70%, transparent); }

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--solid { background: var(--c-accent); color: var(--c-on-accent); }
.btn--solid:hover { background: var(--c-accent-2); }

.btn--ghost { border-color: var(--c-border-ui); color: var(--c-text); }
.btn--ghost:hover { border-color: var(--c-accent); color: var(--c-accent-tx); }

.btn--link {
  padding: 0;
  color: var(--c-accent-tx);
  border-bottom: 1.5px solid transparent;
  border-radius: 0;
}
.btn--link:hover { border-bottom-color: var(--c-accent); transform: none; }

.btn .arr { transition: transform .22s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

/* ---------- 7. Zaglavlje ---------- */

.hdr {
  position: sticky;
  top: 0;
  z-index: 90;
  background: color-mix(in srgb, var(--c-bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--c-line);
  transition: border-color .3s var(--ease);
}

@supports not (backdrop-filter: blur(1px)) {
  .hdr { background: var(--c-bg); }
}

.hdr__in {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  height: var(--hdr-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--c-text);
  flex: none;
}
/* Znak ide beo, kako je i dat u brend fajlu — isti fajl u zaglavlju i podnožju,
   bez drugog zahteva prema serveru. */
.brand__logo {
  height: 36px;
  width: auto;
  flex: none;
}
.ftr .brand__logo { height: 52px; }
.brand > span:last-child {
  font-family: var(--ff-body);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-3);
  white-space: nowrap;
}

@media (max-width: 460px) {
  .brand > span:last-child { display: none; }
}

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(0.6rem, 1.6vw, 1.6rem); }

.nav__link {
  position: relative;
  display: block;
  padding: 0.4rem 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-text-2);
  transition: color .2s var(--ease);
}
.nav__link:hover { color: var(--c-text); }
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--c-text); }

.hdr__tools { display: flex; align-items: center; gap: var(--sp-2); flex: none; }

.lang {
  padding: 0.42rem 0.7rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--c-text-2);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.lang:hover { border-color: var(--c-accent); color: var(--c-accent-tx); }

.burger {
  display: none;
  width: 42px; height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  color: var(--c-text);
}
.burger:hover { border-color: var(--c-border-ui); }

.burger__bars { display: block; width: 18px; height: 12px; position: relative; }
.burger__bars::before,
.burger__bars::after,
.burger__bars i {
  content: "";
  position: absolute;
  left: 0;
  width: 100%; height: 1.8px;
  background: currentColor;
  transition: transform .28s var(--ease), opacity .2s var(--ease);
}
.burger__bars::before { top: 0; }
.burger__bars i { top: 5px; }
.burger__bars::after { top: 10px; }

.burger[aria-expanded="true"] .burger__bars::before { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars i { opacity: 0; }
.burger[aria-expanded="true"] .burger__bars::after { transform: translateY(-5px) rotate(-45deg); }

/* ---------- 8. Junak ---------- */

.hero {
  position: relative;
  padding-block: clamp(3.5rem, 2rem + 8vw, 8rem) clamp(3rem, 2rem + 5vw, 6rem);
  overflow: hidden;
}

.hero__in { position: relative; z-index: 1; }
.hero__title { margin-block: var(--sp-5) var(--sp-5); max-width: 16ch; }
.hero__lead { max-width: 54ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-7); }

.hero__mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
  gap: var(--sp-3);
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}
.hero__tile--big { grid-column: span 2; grid-row: span 2; }

.hero__tile {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--img-frame);
}
.hero__tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.hero__tile:hover img { transform: scale(1.05); }

/* ---------- 9. Kartice ---------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  transition: border-color .3s var(--ease), transform .3s var(--ease),
              box-shadow .3s var(--ease);
}
.card:hover {
  border-color: var(--c-accent);
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}
.card__num { margin-bottom: var(--sp-1); }
.card__title { color: var(--c-text); }
.card__text { color: var(--c-text-2); font-size: var(--fs-sm); }
.card__foot { margin-top: auto; padding-top: var(--sp-4); }

/* Kartica i telo reference nose svoju podlogu, pa moraju da nose i boju
   naslova — beo naslov sa narandžastog pojasa bi na breskvi nestao. */
.card, .proj__body {
  --c-head: #1d1004;
  --c-text: #1d1004;
  --c-text-2: #34210f;
  --c-text-3: #412a12;
  --c-accent-tx: #1d1004;
  color: var(--c-text);
}

/* cela kartica je klikabilna preko sloja iznad, tekst ostaje selektabilan */
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* usluga */
.svc {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4) var(--sp-5);
  align-items: start;
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--c-line);
  transition: border-color .3s var(--ease);
}
.svc:last-child { border-bottom: 1px solid var(--c-line); }
.svc:hover { border-color: var(--c-accent); }
.svc__num {
  font-family: var(--ff-head);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  font-weight: 600;
  line-height: 1;
  color: var(--c-text-3);
  transition: color .3s var(--ease);
  font-variant-numeric: tabular-nums;
}
.svc:hover .svc__num { color: var(--c-accent-tx); }
.svc__body > * + * { margin-top: var(--sp-3); }
.svc__title { display: flex; align-items: center; gap: var(--sp-3); }
.svc__text { color: var(--c-text-2); max-width: 62ch; }

/* proces */
.step {
  position: relative;
  padding-left: var(--sp-6);
  padding-block: var(--sp-2);
}
.step::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--c-accent);
}
.step::after {
  content: "";
  position: absolute;
  left: 4px; top: 1.5rem; bottom: -0.5rem;
  width: 1px;
  background: var(--c-line);
}
.step:last-child::after { display: none; }
.step__t { margin-bottom: var(--sp-2); }
.step__d { color: var(--c-text-2); font-size: var(--fs-sm); }

/* referenca */
.proj {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--img-frame);
  border: 1px solid var(--c-line);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.proj:hover { border-color: var(--c-accent); transform: translateY(-6px); box-shadow: var(--shadow); }

.proj__img { position: relative; aspect-ratio: 1; overflow: hidden; }
.proj__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease), opacity .3s var(--ease);
}
.proj:hover .proj__img img { transform: scale(1.055); }

.proj__body {
  padding: var(--sp-5);
  background: var(--c-surface);
  border-top: 1px solid var(--c-line);
}
.proj__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-3);
}
.proj__name { margin-bottom: var(--sp-2); }
.proj__sum { font-size: var(--fs-sm); color: var(--c-text-2); }

/* ---------- 10. Galerija ---------- */

.gal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: var(--sp-3);
}
.gal__item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--img-frame);
  border: 1px solid var(--c-line);
  cursor: zoom-in;
  transition: border-color .25s var(--ease);
}
.gal__item:hover { border-color: var(--c-accent); }
.gal__item img { width: 100%; height: 100%; object-fit: cover; }

/* uvećani prikaz */
.lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--gut);
  /* Zastor mora da bude miran da bi se uvecana fotografija videla — mesavina sa
     narandzastom podlogom je davala skoro cistu narandzastu ploscu ispod slike. */
  background: rgba(74, 22, 0, .94);
  color: #fff5ee;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s var(--ease), visibility .25s;
}
.lb[data-open="true"] { opacity: 1; visibility: visible; }
.lb__img {
  max-width: min(92vw, 1000px);
  max-height: 84vh;
  width: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.lb__bar {
  position: absolute;
  top: var(--gut); right: var(--gut);
  display: flex; gap: var(--sp-2);
}
.lb__btn {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  color: #1d1004;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.lb__btn:hover { border-color: var(--c-accent); color: #1d1004; }
.lb__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid; place-items: center;
  width: 48px; height: 48px;
  color: #1d1004;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 50%;
}
.lb__nav:hover { border-color: var(--c-accent); color: #1d1004; }
.lb__nav--prev { left: var(--gut); }
.lb__nav--next { right: var(--gut); }
.lb__count {
  position: absolute;
  bottom: var(--gut); left: 50%;
  transform: translateX(-50%);
  font-size: var(--fs-sm);
  color: rgba(255, 245, 238, .82);
}

/* ---------- 11. Obrasci ---------- */

.form { display: grid; gap: var(--sp-5); }
.form__row { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.field { display: grid; gap: var(--sp-2); }

.field__label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-text);
}
.field__label span { color: var(--c-text-3); font-weight: 400; }

.field__input,
.field__area,
.field__select {
  width: 100%;
  padding: 0.78rem 0.95rem;
  color: var(--c-text);
  background: var(--c-bg-2);
  border: 1.5px solid var(--c-border-ui);
  border-radius: 14px;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.field__input:hover,
.field__area:hover,
.field__select:hover { border-color: var(--c-text-3); }
.field__input:focus,
.field__area:focus,
.field__select:focus {
  outline: none;
  border-color: var(--c-accent);
  background: var(--c-bg-2);
}
.field__area { min-height: 8.5rem; resize: vertical; }

.field__input::placeholder,
.field__area::placeholder { color: var(--c-text-3); }

.field[data-err="true"] .field__input,
.field[data-err="true"] .field__area { border-color: #e5484d; }
.field__err { font-size: var(--fs-sm); color: #e5484d; }

.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: start;
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  cursor: pointer;
}
.check input {
  width: 20px; height: 20px;
  margin: 2px 0 0;
  accent-color: var(--c-accent);
  cursor: pointer;
}

.form__note { font-size: var(--fs-sm); color: var(--c-text-3); }

.alert {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius);
  border-left: 3px solid var(--c-accent);
  background: var(--c-bg-3);
  font-size: var(--fs-sm);
}
.alert--err { border-left-color: #e5484d; }

/* honeypot */
.hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* ---------- 12. Podnožje ---------- */

.ftr {
  padding-block: var(--sp-8) var(--sp-6);
  border-top: 1px solid var(--c-line);
}
.ftr__grid {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.ftr__t {
  margin-bottom: var(--sp-4);
  font-family: var(--ff-head);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--c-text-3);
}
.ftr__list > li + li { margin-top: var(--sp-2); }
.ftr__list a, .ftr__link {
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  transition: color .2s var(--ease);
}
.ftr__list a:hover, .ftr__link:hover { color: var(--c-accent-tx); }

.ftr__bot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-sm);
  color: var(--c-text-3);
}

/* ---------- 13. Mrvice ---------- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding-top: var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--c-text-3);
}
.crumbs a { color: var(--c-text-2); transition: color .2s var(--ease); }
.crumbs a:hover { color: var(--c-accent-tx); }
.crumbs li { display: flex; align-items: center; gap: var(--sp-2); }
.crumbs li + li::before { content: "/"; color: var(--c-line-2); }

/* ---------- 14. Naslov strane ---------- */

.phead { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(2rem, 1.5rem + 3vw, 3.5rem); }
.phead__in { max-width: 48rem; }
.phead__in > * + * { margin-top: var(--sp-4); }

/* varijanta sa fotografijom: narandžasta ploča preko slike, tamno mastilo */
.phead--media {
  position: relative;
  overflow: hidden;
  /* razmak je ranije bio odmeren prema fotografiji u pozadini; bez nje je
     ostajala prazna narandžasta zona */
  padding-block: clamp(2.75rem, 2rem + 4vw, 5rem) clamp(2.5rem, 2rem + 3vw, 4.5rem);
  color: var(--c-text);
}
.phead--media .phead__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--c-bg);
}
.phead--media .wrap { position: relative; z-index: 1; }
/* mrvice nad fotografijom idu na jače mastilo — svetlija siva ne bi prošla */
.phead--media .crumbs { padding-top: 0; margin-bottom: var(--sp-6); color: var(--c-text-2); }

/* ---------- 15. Detalj: obim, česta pitanja ---------- */

.scope { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.scope li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-3) 0;
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  border-top: 1px solid var(--c-line);
}
.scope li::before {
  content: "";
  width: 7px; height: 7px;
  margin-top: 0.55em;
  background: var(--c-accent);
  flex: none;
}

.items { display: grid; gap: 0; }
.item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--c-line);
}
.item:last-child { border-bottom: 1px solid var(--c-line); }
.item__mark {
  width: 9px; height: 9px;
  margin-top: 0.5rem;
  background: var(--c-accent);
  flex: none;
}
.item__t { margin-bottom: var(--sp-2); }
.item__d { font-size: var(--fs-sm); color: var(--c-text-2); }

.faq { border-top: 1px solid var(--c-line); }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-5) 0;
  font-family: var(--ff-head);
  font-size: var(--fs-h4);
  font-weight: 600;
  text-align: left;
  color: var(--c-text);
}
.faq__q:hover { color: var(--c-accent-tx); }
.faq__sign {
  position: relative;
  width: 18px; height: 18px;
  flex: none;
  color: var(--c-accent-tx);
}
.faq__sign::before, .faq__sign::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: currentColor;
  transition: transform .3s var(--ease);
}
.faq__sign::before { width: 16px; height: 2px; transform: translate(-50%, -50%); }
.faq__sign::after  { width: 2px; height: 16px; transform: translate(-50%, -50%); }
.faq__q[aria-expanded="true"] .faq__sign::after { transform: translate(-50%, -50%) scaleY(0); }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--ease);
}
/* dugme je unutar naslova, pa odgovor nije njegov sused —
   stanje se drži na stavci i odatle stilizuje */
.faq__item[data-open="true"] .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-bottom: var(--sp-5); color: var(--c-text-2); max-width: 68ch; }

/* ---------- 16. Poziv na kraju ---------- */

.cta {
  position: relative;
  padding-block: clamp(3rem, 2rem + 5vw, 6rem);
  background: var(--c-bg);
  border-block: 1px solid var(--c-line);
  overflow: hidden;
}
.cta__in {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  align-items: center;
}
.cta__acts { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ---------- 17. Linija vodilja ---------- */

.guide-root { position: relative; }

.guide-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  /* iznad pozadinskih traka, ispod sadržaja; koridor živi u praznini pored */
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}

.guide-path {
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* stroke se postavlja iz JS-a kao atribut — CSS bi ga pregazio */
}

.guide-dot {
  fill: var(--c-accent);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.guide-dot[data-on="true"] { opacity: 1; }

/* ---------- 18. Otkrivanje na skrol ---------- */

.rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.rv[data-in="true"] { opacity: 1; transform: none; }

.rv-d1 { transition-delay: .07s; }
.rv-d2 { transition-delay: .14s; }
.rv-d3 { transition-delay: .21s; }
.rv-d4 { transition-delay: .28s; }
.rv-d5 { transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; }
}

/* ---------- 19. Oznaka demoa ---------- */

.demo-tag {
  position: fixed;
  left: 12px; bottom: 12px;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.4rem 0.7rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-on-accent);
  background: var(--c-accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ---------- 20. Prilagođavanje ---------- */

@media (max-width: 980px) {
  .hero__mosaic { grid-template-columns: repeat(3, 1fr); }
  .hero__tile:nth-child(n+7) { display: none; }
  .hero__tile--big { grid-column: span 2; grid-row: span 2; }
}

@media (max-width: 860px) {
  :root { --hdr-h: 60px; }

  .burger { display: inline-flex; }
  .hdr__tools { margin-left: auto; }

  .nav {
    position: absolute;
    inset: var(--hdr-h) 0 auto;
    height: calc(100vh - var(--hdr-h));
    height: calc(100dvh - var(--hdr-h));
    margin: 0;
    padding: var(--sp-4) var(--gut) var(--sp-6);
    background: var(--c-bg);
    border-top: 1px solid var(--c-line);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav[data-open="true"] { opacity: 1; visibility: visible; transform: none; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    padding: var(--sp-4) 0;
    font-size: var(--fs-h4);
    font-family: var(--ff-head);
    font-weight: 600;
    color: var(--c-text);
    border-bottom: 1px solid var(--c-line);
  }
  .nav__link::after { display: none; }
  .nav__link[aria-current="page"] { color: var(--c-text); text-decoration: underline; text-underline-offset: .25em; }

  .hero__mosaic { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
  .hero__tile:nth-child(n+6) { display: none; }

  .lb__nav { width: 42px; height: 42px; }
  .lb__nav--prev { left: 4px; }
  .lb__nav--next { right: 4px; }
}

@media (max-width: 560px) {
  .svc { grid-template-columns: 1fr; gap: var(--sp-3); }
  .svc__num { font-size: 1.4rem; }
  .card { padding: var(--sp-5); }
  .ftr__bot { flex-direction: column; align-items: flex-start; }
}

/* ---------- 21. Štampa ---------- */

@media print {
  .hdr, .ftr, .cta, .guide-svg, .demo-tag, .btn, .lb { display: none !important; }
  body { background: #fff; color: #000; }
  .rv { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* ==========================================================================
   Nadogradnja pokreta i vizuelnog sloja
   ========================================================================== */

/* ---------- 22. Ulazne animacije ---------- */

.rv { transition-delay: var(--rv-d, 0s); }

.rv--left  { transform: translateX(-28px); }
.rv--right { transform: translateX(28px); }
.rv--scale { transform: scale(.94); }

/* otkrivanje slike sirenjem kadra — bez transforma, pa ne kvari raspored */
.rv--clip {
  transform: none;
  clip-path: inset(16% 10% 16% 10% round var(--radius-lg));
  transition: clip-path 1s var(--ease), opacity .7s var(--ease);
  transition-delay: var(--rv-d, 0s);
}
.rv--clip[data-in="true"] { clip-path: inset(0 0 0 0 round 0px); }

/* ---------- 23. Uvodna sekvenca (ucitavanje, ne skrol) ---------- */

.hi {
  opacity: 0;
  transform: translateY(24px);
  animation: hi-in .8s var(--ease) forwards;
  animation-delay: var(--hi, 0s);
}

.hw {
  display: inline-block;
  opacity: 0;
  transform: translateY(.45em);
  animation: hi-in .75s var(--ease) forwards;
  animation-delay: var(--hi, 0s);
}

.hero__tile {
  opacity: 0;
  transform: translateY(30px) scale(.96);
  animation: hi-in .85s var(--ease) forwards;
  animation-delay: var(--hi, 0s);
}

@keyframes hi-in {
  to { opacity: 1; transform: none; }
}

/* podvlaka ispod reci u naslovu koja se sama iscrta */
.hero__stroke { position: relative; white-space: nowrap; }
.hero__stroke svg {
  position: absolute;
  left: -2%; bottom: -0.1em;
  width: 104%; height: 0.24em;
  overflow: visible;
  pointer-events: none;
}
.hero__stroke path {
  fill: none;
  /* podvlaka je deo naslova, pa prati njegovu boju: na narandzastom junaku
     ide belo kao i slova, ne mastilo kao ostali akcenti */
  stroke: var(--c-head, var(--c-accent));
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: stroke-in .9s var(--ease) forwards;
  animation-delay: .95s;
  opacity: .85;
}
@keyframes stroke-in { to { stroke-dashoffset: 0; } }

/* ---------- 24. Pokretne trake ---------- */

.mq {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.mq__track {
  display: flex;
  width: max-content;
  animation: mq-slide var(--mq-t, 46s) linear infinite;
}
.mq:hover .mq__track,
.mq:focus-within .mq__track { animation-play-state: paused; }
/* Suprotan smer se dobija preslikavanjem trake, a plocice se vracaju u pravi
   polozaj. Ne `animation-direction: reverse` — traku koja se pomera udesno
   Chrome ne iscrta do kraja, pa desnih ~500px ostane prazno. */
.mq--rev { transform: scaleX(-1); }
.mq--rev .ph { transform: scaleX(-1); }
.mq__half {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-right: var(--sp-4);
}
@keyframes mq-slide { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .mq__track { animation: none; }
}

/* logotipi: znakovi su projektovani za belu podlogu, pa plocica OSTAJE bela
   u svim temama; krupno, u punoj boji, i vodi na referencu */
.lg-chip {
  display: grid;
  place-items: center;
  width: 196px;
  height: 92px;
  padding: var(--sp-3) var(--sp-4);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 14px;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .25);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.lg-chip img {
  /* Pločice su izjednačene po optičkoj težini pri izradi (geometrijska sredina
     stranica), pa im ovde jedan zajednički plafon daje isti prisutan format. */
  max-height: 64px;
  max-width: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
}
a.lg-chip:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .35);
}

/* foto traka: okvir je kvadrat unapred, pa traka ne ceka slike da dobije sirinu */
.ph {
  display: block;
  width: clamp(150px, 20vw, 214px);
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--c-line-2);
  background: linear-gradient(120deg, var(--c-bg-3) 30%, var(--c-bg-2) 50%, var(--c-bg-3) 70%);
  background-size: 220% 100%;
  animation: ph-shimmer 1.6s linear infinite;
  flex: none;
}
@keyframes ph-shimmer { to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .ph { animation: none; } }
.ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s var(--ease);
}
.ph:hover img { transform: scale(1.06); }
.mq + .mq { margin-top: var(--sp-3); }
.mq__track { will-change: transform; }

/* ---------- 25. Brojke ---------- */

.stats {
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  border-block: 1px solid var(--c-line);
}
.stat { border-left: 2px solid var(--c-accent); padding-left: var(--sp-5); }
.stat__n {
  font-family: var(--ff-head);
  font-size: clamp(2.6rem, 2rem + 2.6vw, 4.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--c-accent-tx);
  font-variant-numeric: tabular-nums;
}
.stat__l { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-2); }

/* ---------- 26. Kartice sa fotografijom ---------- */

.card--media { padding: 0; overflow: hidden; }
.card--media .card__img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--img-frame);
  border-bottom: 1px solid var(--c-line);
}
.card--media .card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease);
}
.card--media:hover .card__img img { transform: scale(1.06); }
.card--media .card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1;
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
}

/* red usluge na pocetnoj dobija fotografiju */
.svc__thumb {
  width: 148px;
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--c-line);
  background: var(--img-frame);
}
.svc__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.svc:hover .svc__thumb img { transform: scale(1.08); }

@media (min-width: 861px) {
  .svc { grid-template-columns: auto 1fr 148px; }
}
@media (max-width: 860px) {
  .svc__thumb { display: none; }
}

/* druga fotografija na hover kartice reference */
.proj__img .im2 {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .45s var(--ease), transform 1s var(--ease);
}
.proj:hover .proj__img .im2 { opacity: 1; transform: scale(1.055); }

/* ---------- 27. Vodoravni niz fotografija ---------- */

.strip {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-3);
  scrollbar-width: thin;
  scrollbar-color: var(--c-accent) transparent;
}
.strip::-webkit-scrollbar { height: 6px; }
.strip::-webkit-scrollbar-thumb { background: var(--c-accent-dim); border-radius: 3px; }
.strip__it {
  flex: 0 0 auto;
  width: clamp(180px, 26vw, 250px);
  scroll-snap-align: start;
}
.strip__it .im {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--c-line);
  background: var(--img-frame);
  transition: transform .6s var(--ease), border-color .3s var(--ease);
}
.strip__it:hover .im { transform: translateY(-4px); border-color: var(--c-accent); }
.strip__cap {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-text-3);
}

/* ---------- 28. Galerija na vrhu reference ---------- */

.galhero {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
  gap: var(--sp-3);
}
.galhero .gal__item:first-child { grid-column: span 2; grid-row: span 2; }
@media (max-width: 860px) {
  .galhero { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 29. Sitni ukrasi ---------- */

.step { position: relative; }
.step__big {
  position: absolute;
  right: 4px; top: -10px;
  font-family: var(--ff-head);
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--c-accent);
  opacity: .3;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

.grad-text {
  color: var(--c-accent-tx);
}

/* glava linije vodilje: tacka koja putuje trasom */
.guide-head { fill: var(--c-accent); opacity: 0; transition: opacity .3s var(--ease); }
.guide-head[data-on="true"] { opacity: 1; }
.guide-ring {
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.guide-ring[data-on="true"] { animation: ring-puls 2.2s ease-out infinite; }
@keyframes ring-puls {
  0%   { transform: scale(.35); opacity: .55; }
  75%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .guide-ring[data-on="true"] { animation: none; opacity: 0; }
}

/* ---------- 30. Potpuni redizajn: hero preko celog ekrana ---------- */

.hero--full {
  position: sticky;
  top: 0;
  z-index: 0;
  min-height: min(100svh, 860px);
  display: flex;
  align-items: center;
  padding-block: clamp(5rem, 8vh, 8rem) clamp(6rem, 10vh, 9rem);
}

/* sadrzaj se navlaci preko prikovanog junaka kao zavesa */
.hero--full + .guide-root {
  position: relative;
  z-index: 2;
  background: var(--c-bg);
  border-radius: clamp(20px, 3vw, 36px) clamp(20px, 3vw, 36px) 0 0;
  box-shadow: 0 -24px 60px rgba(29, 16, 4, .22);
}
.cta, .ftr { position: relative; z-index: 2; }

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* Puna boja, bez fotografije ispod. Ranije je junak bio siva slika sa
   narandžastim slojem od 84%, pa se boja iscrtavala kao rgb(216,100,20)
   umesto #FF6600 — merenjem piksela ni jedno mesto na sajtu nije pogađalo
   pravu boju. */
.hero__bg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  background: var(--c-bg);
}
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(1.14) contrast(.86);
}
/* Sloj boje je namerno providniji nego ranije — fotografije treba da se vide.
   Jedna nijansa, bez preliva iz tri različite narandžaste. */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Preliv ostavlja fotografije vidljivim, a tekst je nad tamnim delom. */
  background: linear-gradient(90deg,
    rgba(235, 89, 0, .98) 0%,
    rgba(235, 89, 0, .96) 52%,
    rgba(235, 89, 0, .90) 62%,
    rgba(235, 89, 0, .72) 74%,
    rgba(235, 89, 0, .62) 100%);
}
@media (max-width: 860px) {
  .hero__bg { grid-template-columns: repeat(2, 1fr); }
  .hero__bg img:nth-child(n+5) { display: none; }
  /* Na telefonu tekst ide preko cele širine fotografija. */
  .hero__bg::after {
    background: linear-gradient(180deg,
      rgba(235, 89, 0, .95) 0%,
      rgba(235, 89, 0, .93) 55%,
      rgba(235, 89, 0, .90) 100%);
  }
}

.hero--full .hero__in { position: relative; z-index: 2; width: 100%; }

/* Uvod i oznake u junaku prate beli tekst na zatamnjenoj narandžastoj. */
.hero--full { color: var(--c-text); }
.hero--full .btn--ghost {
  background: rgba(255, 244, 236, .14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero--full .btn--ghost:hover { background: rgba(255, 255, 255, .22); }
/* Junak nosi znak, ne naslov: znak je najkrupniji element na strani, slogan
   ispod njega je namerno spušten, a ključna reč ide u treći red. */
.hero__mark {
  display: block;
  width: clamp(200px, 26vw, 400px);
  height: auto;
  margin-bottom: clamp(.9rem, 1.8vw, 1.6rem);
}
.hero--full .hero__title { max-width: 20ch; font-size: clamp(1.7rem, 1.15rem + 2.1vw, 3.1rem); }
/* Znak je odneo visinu, pa junak drži razmake uže — inače poziv na skrol
   sedne preko brojki u dnu (mereno na 1440x900). */
.hero--full .hero__cta { margin-top: clamp(1.4rem, 2.6vh, 2.4rem); }
.hero--full .hero__facts { margin-top: clamp(1.5rem, 3vh, 2.6rem); }
/* Poziv na skrol je stajao na sredini dna i posle znaka seda preko brojki na
   svakoj širini od 1280 naviše (mereno 1920/1440/1366/1280). Ide uz desnu
   ivicu mreže, gde je junak ionako prazan; na uskim je i dalje sakriven. */
@media (min-width: 861px) {
  .hero--full .hero__cue {
    left: auto;
    right: max(var(--gut), calc(50% - var(--wrap) / 2 + var(--gut)));
    transform: none;
  }
}
/* Klasa mora da nadjača `h1 { color: var(--c-head) }` i `.hw { display:inline-block }`. */
.hero__kicker {
  display: block;
  margin-top: .7rem;
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-text-2);
}

/* statistika u dnu junaka */
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-7);
  margin-top: clamp(2.2rem, 4vh, 3.5rem);
}
.hero__fact { display: flex; align-items: baseline; gap: var(--sp-2); color: var(--c-text-2); }
.hero__fact b {
  font-family: var(--ff-head);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--c-head);
  font-variant-numeric: tabular-nums;
}
.hero__fact span { font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; }

/* poziv na skrol */
.hero__cue {
  position: absolute;
  left: 50%;
  /* Sadržaj je navučen za visinu zaglavlja naviše, pa zavesa prekriva zadnjih
     `--hdr-h` piksela junaka. Niže od toga poziv postoji u rasporedu ali ga
     zavesa preslikava — stoji iznad šava. */
  bottom: calc(var(--hdr-h) + clamp(.5rem, 2vh, 1.25rem));
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: .3rem .7rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  /* Sedi na šavu junaka i zavese, pa nosi svoju pločicu i ne zavisi od toga
     koji je pojas ispod njega. Svetla slova su ovde padala na 2,5:1 — kremasta
     pločica sa mastilom prolazi i preko junaka i preko svetlog pojasa. */
  background: rgba(255, 246, 240, .92);
  color: #1d1004;
}
.hero__cue i {
  display: block;
  width: 22px; height: 34px;
  border: 1.5px solid rgba(29, 16, 4, .45);
  border-radius: 999px;
  position: relative;
}
.hero__cue i::after {
  content: "";
  position: absolute;
  left: 50%; top: 6px;
  width: 4px; height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: #ff6600;
  animation: cue 1.8s var(--ease) infinite;
}
@keyframes cue {
  0%   { transform: translateY(0);    opacity: 1; }
  70%  { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 0; }
}

/* Na telefonu poziv na skrol sedne tačno na šav junaka i zavese, pa mu pola
   ostane na narandžastom gde svetla slova ne prolaze. Tamo se i ne traži. */
@media (max-width: 860px) {
  .hero__cue { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__cue i::after { animation: none; }
}

/* ghost naslov iza zaglavlja sekcije — slova zauzimaju od 0.27em do 1em
   ispod zadatog `top`, pa ovoliko treba da donja ivica ostane iznad kickera */
.sec-head { position: relative; }
.sec-head > * { position: relative; z-index: 1; }

/* Zaglavlje sa ghost naslovom se rasteze na punu sirinu okvira da bi natpis
   mogao da stane na sredinu strane; tekst zadrzava svoju meru preko dece. */
.sec-head[data-ghost] { max-width: none; }
.sec-head[data-ghost] > * { max-width: 42rem; }

.sec-head[data-ghost]::before {
  content: attr(data-ghost);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -1em;
  z-index: 0;
  font-family: var(--ff-head);
  font-size: clamp(3.4rem, 2.4rem + 6.5vw, 8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 2px color-mix(in srgb, var(--c-accent) 46%, transparent);
  /* Narandzasti obris na kremu je slabiji nego mastilo na narandzastom, pa
     svetli pojasevi traze jaci natpis da se ghost uopste vidi. */
  opacity: var(--ghost-op, .55);
  pointer-events: none;
}

/* zaglavlje preko punog hero-a: providno dok se ne skroluje */
.hdr--clear {
  position: fixed;
  left: 0; right: 0; top: 0;
  background: linear-gradient(180deg, rgba(235, 89, 0, .99), rgba(235, 89, 0, .96) 72%, rgba(235, 89, 0, .88));
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hdr--clear .nav__link { color: #ffffff; }
.hdr--clear .nav__link:hover,
.hdr--clear .nav__link[aria-current="page"] { color: #ffffff; }
.hdr--clear .nav__link::after { background: #ffffff; }
.hdr--clear .brand > span:last-child { color: #ffffff; }
/* Znak stoji krupno u junaku, pa ga zaglavlje na početnoj pušta tek kad se
   skroluje — inače stoje dva ista znaka jedan iznad drugog. */
.brand { transition: opacity .3s var(--ease), visibility .3s var(--ease); }
.hdr--clear:not(.hdr--solid) .brand { opacity: 0; visibility: hidden; }
.hdr--clear .lang,
.hdr--clear .burger { border-color: rgba(255, 255, 255, .6); color: #ffffff; }
.hdr--clear .lang:hover { border-color: #ffffff; color: #ffffff; }
.hdr--clear + main { margin-top: calc(var(--hdr-h) * -1); }
.hdr--clear.hdr--solid {
  background: color-mix(in srgb, var(--c-bg) 88%, transparent);
  border-bottom-color: var(--c-line);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
.hdr--clear.hdr--solid .nav__link { color: var(--c-text-2); }
.hdr--clear.hdr--solid .nav__link:hover,
.hdr--clear.hdr--solid .nav__link[aria-current="page"] { color: var(--c-text); }

.hdr--clear.hdr--solid .brand > span:last-child { color: var(--c-text-3); }
.hdr--clear.hdr--solid .nav__link::after { background: var(--c-accent); }
.hdr--clear.hdr--solid .lang,
.hdr--clear.hdr--solid .burger { border-color: var(--c-line); color: var(--c-text-2); }

@media (max-width: 860px) {
  .hdr--clear:not(.hdr--solid) .brand { display: none; }
  .hdr--clear .nav { background: var(--c-bg); }
  .hdr--clear .nav__link { color: var(--c-text); }
  .hdr--clear .nav__link[aria-current="page"] { color: var(--c-text); }
}

/* ---------- 31. Ucitavanje ---------- */

.loader {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  background: var(--c-bg);
  transition: opacity .5s var(--ease), visibility .5s;
}
.loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__in { display: grid; justify-items: center; gap: var(--sp-4); }
.loader__mark {
  font-family: var(--ff-head);
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.06em;
  color: var(--c-accent);
}
.loader__mark b { color: var(--c-text); }
.loader__bar {
  width: 148px;
  height: 2px;
  background: var(--c-line);
  border-radius: 2px;
  overflow: hidden;
}
.loader__bar i {
  display: block;
  height: 100%;
  width: 40%;
  background: var(--c-accent);
  border-radius: 2px;
  animation: loadbar 1s var(--ease) infinite;
}
@keyframes loadbar {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(380%); }
}
@media (prefers-reduced-motion: reduce) {
  .loader { display: none; }
}

/* slike ulaze mekim pretapanjem kada se ucitaju */
img.imf { opacity: 0; }
img.imf.ld { opacity: 1; transition: opacity .55s var(--ease); }

/* ---------- 32. Doterivanje za telefon ---------- */

@media (max-width: 860px) {
  /* Prst nije misev: sve sto se dodiruje dobija visinu bar 44px. Kartice su
     vec klikabilne celom povrsinom (.card__link::after), pa se ne diraju. */
  /* padding umesto visine — `.brand` poravnava znak i potpis po osnovnoj
     liniji, pa bi `min-height` razmakao to poravnanje */
  .brand { padding-block: .6rem; }
  .lang { min-height: 44px; }

  .ftr__list a,
  .ftr__link {
    display: inline-block;
    padding-block: .55rem;
  }
  /* razmak medju stavkama preuzima novi padding, da podnozje ne naraste */
  .ftr__list > li + li { margin-top: 0; }

  .crumbs a,
  .svc__body h3 a,
  .btn--link { display: inline-block; padding-block: .5rem; }

  /* veza na oblast stoji dvaput na strani reference — u nadnaslovu i u redu
     sa podacima — i oba puta je gola, pa meta ostaje na visini slova */
  .kicker a,
  dl.grid dd a { display: inline-block; padding-block: .4rem; }
  .crumbs { padding-top: var(--sp-5); }
  .svc__body > * + * { margin-top: var(--sp-2); }

  /* kontakt: brojevi i adrese se pipaju, ne citaju iz daljine */
  aside.stack-lg a[href^="tel:"],
  aside.stack-lg a[href^="mailto:"] { display: inline-block; padding-block: .45rem; }

  /* filter reference i ostala pilula-dugmad */
  .btn--ghost { min-height: 44px; }

  /* saglasnost: kvadratic ispod 24px pada WCAG 2.5.8 */
  .check input { width: 24px; height: 24px; }
}

/* Ghost natpis je sada centriran, pa na uskom ekranu izlazi na obe strane —
   ovde se drzi unutar okvira da ne otvori vodoravni skrol. */
@media (max-width: 560px) {
  .sec-head[data-ghost]::before {
    font-size: clamp(2.6rem, 1.2rem + 7vw, 3.8rem);
    top: -0.86em;
  }
}

/* ---------- 33. Pojasevi: sekcije se smenjuju po boji ---------- */

/* Strana je bila jedan narandžasti zid od junaka do podnožja. Boje su i dalje
   sve iz porodice znaka (#FF6600) — nema ni sive ni braon osnove — ali sekcije
   sada idu u četiri stepena: puna narandžasta, breskva, amber i zapečena.
   Pojas prevrne tokene na sebi i sve unutra se povede za njima: kartice, linije,
   akcenat, dugmad. Boja teksta MORA da stoji uz tokene — `color` se izračuna kod
   `body` i nasledi naniže, pa naslov bez svoje boje ostane u boji prethodnog
   pojasa. */

/* amber: sekcije sa dugim tekstom i karticama. Ovde je ranije stajao krem —
   podloga je sišla u narandžasti ton, pa je i tekst akcenta morao dublje
   (#b83c00 na ovoj podlozi meri 4,3). */
.band-cream {
  --c-bg:        #ffdcbe;
  --c-bg-2:      #ffd2ae;
  --c-bg-3:      #ffc79c;
  --c-surface:   #ffefdf;
  --c-head:      #1d1004;
  --c-text:      #1d1004;
  --c-text-2:    #4a3218;
  --c-text-3:    #6b4a2a;
  --c-line:      rgba(29, 16, 4, .16);
  --c-line-2:    rgba(29, 16, 4, .26);
  --c-border-ui: #a83b06;
  --c-accent:    #ff6600;
  --c-accent-tx: #9d3000;
  --c-accent-2:  #c94400;
  --c-accent-dim: rgba(255, 102, 0, .5);
  --c-on-accent: #1d1004;
  --c-focus:     #9d3000;
  --shadow:      0 1px 2px rgba(120, 52, 10, .12), 0 16px 36px rgba(120, 52, 10, .18);
  --img-frame:   rgba(29, 16, 4, .08);
  --ghost-op:    .8;
}

/* breskva: tanji pojasevi izmedju dva jaka, nosi mrežu tačaka. Dublja je nego
   ranije da bi se videla razlika prema amberu koji je i sam sišao u narandžasto. */
.band-peach {
  --c-bg:        #ffc49a;
  --c-bg-2:      #ffb884;
  --c-bg-3:      #ffab70;
  --c-surface:   #ffefdf;
  --c-head:      #1d1004;
  --c-text:      #1d1004;
  --c-text-2:    #4a3218;
  --c-text-3:    #6b4a2a;
  --c-line:      rgba(29, 16, 4, .18);
  --c-line-2:    rgba(29, 16, 4, .28);
  --c-border-ui: #a83b06;
  --c-accent:    #ff6600;
  --c-accent-tx: #9d3000;
  --c-accent-2:  #c94400;
  --c-accent-dim: rgba(255, 102, 0, .5);
  --c-on-accent: #1d1004;
  --c-focus:     #9d3000;
  --shadow:      0 1px 2px rgba(120, 52, 10, .14), 0 16px 36px rgba(120, 52, 10, .22);
  --img-frame:   rgba(29, 16, 4, .08);
  --ghost-op:    .8;
  --band-tex:    radial-gradient(rgba(29, 16, 4, .085) 1.2px, transparent 1.2px);
  --band-tex-size: 22px 22px;
}

/* zapečena: uporišta strane — traka sa brojkama i poziv na kraju.
   Svetlija nijansa ne prolazi sa kremastim slovima ni na samoj boji, a kamoli
   na svetlijoj pruzi sare. */
.band-deep,
.stats,
.cta {
  --c-bg:        #b83808;
  --c-bg-2:      #a83000;
  --c-bg-3:      #ca4410;
  --c-surface:   #ffe0c4;
  --c-head:      #fff5ee;
  --c-text:      #fff5ee;
  --c-text-2:    #ffeadd;
  --c-text-3:    #ffeadd;
  --c-line:      rgba(255, 240, 230, .24);
  --c-line-2:    rgba(255, 240, 230, .38);
  --c-border-ui: rgba(255, 240, 230, .55);
  --c-accent:    #ffd9c2;
  --c-accent-tx: #ffe9dc;
  --c-accent-2:  #fff5ee;
  --c-accent-dim: rgba(255, 217, 194, .55);
  --c-on-accent: #1d1004;
  --c-focus:     #fff5ee;
  --shadow:      0 1px 2px rgba(60, 20, 0, .3), 0 16px 36px rgba(60, 20, 0, .38);
  --img-frame:   rgba(255, 240, 230, .1);
  /* Kosa sara podseca na traku za obelezavanje. Jaca od ovoga posvetli podlogu
     toliko da kremast tekst padne ispod 4,5 — mereno na samoj sari, ne na boji
     pojasa. */
  --band-tex:    repeating-linear-gradient(135deg,
                   transparent 0 24px, rgba(255, 240, 230, .045) 24px 48px);
}

/* Podloga se pise razlozeno: `background-color` ne brise sliku sare, pa svaki
   pojas moze da doda svoju preko istog pravila. */
.band-cream,
.band-peach,
.band-deep,
.stats,
.cta,
.ftr {
  background-color: var(--c-bg);
  background-image: var(--band-tex, none);
  background-size: var(--band-tex-size, auto);
  color: var(--c-text);
}

/* Puna narandžasta na kraju: poziv je zapečen, podnožje se vraca na boju znaka. */
.ftr { --band-tex: none; }

/* Zavesa preko junaka je zaobljena gore — prvi pojas u njoj mora da prati taj
   oblik, inace mu ravna podloga prekrije zaobljenje. Ne `:first-child`: liniju
   vodilju JS ubacuje kao prvo dete, pa bi zaobljenje dobio SVG. */
.hero--full + .guide-root > section:first-of-type { border-radius: inherit; }

/* Susedni pojasevi se sada razlikuju po boji, pa im linija na šavu ne treba. */
.stats,
.cta { border-block-width: 0; }