/* ==========================================================================
   Горска Фаббрика — лендинг (преглед за клијента)
   Самостални стил, независан од assets/css/site.css.

   Карусел је хоризонтална трака са scroll-snap-ом: три картице на
   >1024px, две на 768–1024px, једна (са свајпом) испод 768px.
   ========================================================================== */

.fb {
  /* боје */
  --bg: #F2EBDC;
  --ink: #16301E;
  --green: #1F4A2C;
  --card-bg: #FFFDF8;
  --card-bg-off: #F8F2E6;
  --gold: #B98A34;
  --gold-text: #8A6320;
  --line-off: #D9C69C;
  --dot-off: #CDBB93;
  --muted: #4F5D52;

  /* вертикалне мере прате висину прозора (svh), да цео лендинг стане
     на лаптоп екран без скроловања */
  --hero-h: clamp(360px, 58svh, 620px);
  --nav-h: 84px;
  --anchor-offset: var(--nav-h);   /* циљеви сидара: секција почиње одмах испод траке (без траке претходне секције) */
  --overlap: clamp(60px, 12svh, 110px);
  --card-img-h: clamp(150px, 22svh, 222px);

  --hero-pad-top: clamp(16px, 3svh, 28px);
  --hero-gap: clamp(16px, 3svh, 48px);
  --card-pad-top: clamp(12px, 2.4svh, 20px);
  --card-pad-bottom: clamp(14px, 2.8svh, 24px);
  --rule-mt: clamp(8px, 1.6svh, 12px);
  --rule-mb: clamp(10px, 2.2svh, 18px);
  --foot-mt: clamp(14px, 2.6svh, 34px);
  --foot-pad-bottom: clamp(20px, 4svh, 56px);

  /* хоризонталне мере — распоред са једном картицом */
  --visible: 1;
  --nav-size: 44px;
  --row-gap: 12px;
  --card-gap: 16px;
  --side-pad: clamp(8px, 2vw, 16px);
  --track-pad: 14px;   /* места за сенку и подизање картице унутар траке */

  margin: 0;
  background: var(--ink);
  color: var(--ink);
  font-family: Manrope, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

html { scroll-behavior: smooth; }

.fb *, .fb *::before, .fb *::after { box-sizing: border-box; }
.fb img { display: block; max-width: 100%; }
.fb h1, .fb h2, .fb h3, .fb p, .fb ul, .fb ol { margin: 0; }
.fb ul, .fb ol { padding: 0; list-style: none; }
.fb a { color: inherit; text-decoration: none; }

.fb :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

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

/* --- херој ---------------------------------------------------------------- */
/* Садржај је у нормалном току (flex колона), не на фиксним `top`
   вредностима — тако лого не може да се пресече ни да налети на наслов. */

/* Сцена = цео екран. Подлога је апсолутна испод свега, а херој и карусел
   су два појаса у колони који деле ту висину. */
.fb-scena {
  position: relative;
  min-height: 100vh;          /* резерва за прегледаче без dvh */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #16301E;
}

.fb-scena__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

/* Појасеви иду изнад подлоге. */
.fb-scena > .fb-hero,
.fb-scena > main { position: relative; z-index: 2; }

.fb-hero {
  flex: 1 1 auto;
  min-height: 0;              /* без овога flex дете гура распоред */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--nav-h) + var(--hero-pad-top)) 16px var(--hero-gap);
}

.fb-scena > main { flex: 0 0 auto; }

/* Слојеви: постер (0) < видео (1) < вео (2) < садржај (3). */
.fb-hero__img,
.fb-hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
}
.fb-hero__img { z-index: 0; }

/* Топла колор-корекција (saturate 1.3, contrast 1.08, brightness 1.03,
   sepia .15) је УПЕЧЕНА у hero-poster.jpg и у видео фајлове (види
   tools/bake-hero-grade.py). Раније је то био CSS filter на видеу преко
   целог екрана: сваки кадар при скролу пролазио је кроз додатни render
   pass и кочио скрол. Овде зато више нема filter-а. */

/* Видео је невидљив док заиста не крене. Тако нема црног правоугаоника
   ако фајл недостаје, ако аутоплеј буде одбијен или ако кодек не прође. */
.fb-hero__video {
  z-index: 1;
  opacity: 0;
  transition: opacity .6s ease;
}
.fb-hero__video.is-playing { opacity: 1; }

/* Тамни топли прелаз при дну, за читљивост картица. Преко средине слике
   нема никакве измаглице. */
.fb-hero__veil {
  position: absolute; inset: 0;
  z-index: 2;
  /* горе: тамни топли прелаз при дну (читљивост картица); испод њега: вињет —
     тамни руб са странама и дном, као у предлогу дизајна. Обичан alpha (без
     blend-а), облик одговара оном који је коришћен при подешавању боја. */
  background:
    linear-gradient(to bottom, transparent 40%, rgba(30,20,10,.55) 100%),
    radial-gradient(ellipse 50% 75% at 50% 38%, transparent 35%, rgba(12,8,3,.04) 50%, rgba(12,8,3,.15) 75%, rgba(12,8,3,.30) 100%, rgba(12,8,3,.48) 125%, rgba(12,8,3,.65) 150%);
}

.fb-hero__content {
  position: relative;
  z-index: 3;
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Наслов стоји уз дно хероја, одмах изнад картица (као у предлогу дизајна),
     па горњи део слике — сунце, планине — остаје слободан. */
  justify-content: flex-end;
  text-align: center;
}

.fb-hero__text { flex: 0 0 auto; position: relative; isolation: isolate; }

/* Читкост наслова: бели наслов на светлом небу имао је контраст ~1,6:1 (треба
   бар 3:1; сјаје му држала само сенка слова). Мека тамна „ауреола" иза самог
   наслова диже контраст на ~4–5:1, а остатак неба остаје светао. Прати наслов
   где год стоји. */
.fb-hero__text::before {
  content: "";
  position: absolute;
  inset: -64px -200px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(14,10,4,.36) 0%, rgba(14,10,4,.28) 40%, rgba(14,10,4,.12) 72%, rgba(14,10,4,0) 100%);
}
@media (max-width: 767px) {
  .fb-hero__text::before { inset: -44px -56px; }
}

/* таблет и десктоп: мало ваздуха између наслова и картица (на телефону је
   вертикала тесна, па остаје као раније) */
@media (min-width: 768px) {
  .fb { --hero-gap: clamp(26px, 4.4svh, 60px); }
}

.fb-hero__kicker,
.fb-hero__title {
  font-family: "Cormorant Garamond", Georgia, serif;
  color: #FFFDF8;
  text-shadow: 0 1px 2px rgba(30,20,10,.55), 0 0 12px rgba(30,20,10,.32), 0 2px 22px rgba(30,20,10,.25);
  line-height: 1.12;
}

.fb-hero__kicker {
  font-weight: 600;
  font-size: clamp(28px, min(3.2vw, 5.2svh), 46px);
}

.fb-hero__title {
  font-weight: 600;
  font-size: clamp(36px, min(4.4vw, 7svh), 64px);
  margin-top: 6px;
}

/* --- карусел -------------------------------------------------------------- */

.fb-carousel {
  position: relative;
  z-index: 2;
  padding: 0 var(--side-pad) var(--foot-pad-bottom);
}

.fb-carousel__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--row-gap);
  max-width: 1100px;
  margin: 0 auto;
}

/* Трака: свака картица заузима 1/--visible ширине (минус размаци).
   Padding даје простор да сенка и подизање при ховеру не буду одсечени
   (overflow-x исече и по y), а негативна маргина враћа ширину. */
.fb .fb-cards {
  --card-w: calc((100% - (var(--visible) - 1) * var(--card-gap)) / var(--visible));
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: stretch;           /* све картице у реду исте висине */
  gap: var(--card-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--track-pad);
  scrollbar-width: none;
  padding: 24px var(--track-pad) 40px;
  margin: -24px calc(-1 * var(--track-pad)) -40px;
}
.fb-cards::-webkit-scrollbar { display: none; }

/* --- картица -------------------------------------------------------------- */

.fb-card {
  flex: 0 0 var(--card-w);
  scroll-snap-align: start;
  scroll-snap-stop: always;     /* једна по једна, и при јаком свајпу */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  background: var(--card-bg);
  border: 2px solid var(--gold);
  box-shadow: 0 14px 34px rgba(22,48,30,.22);

  --lift-hover: 0px;
  transform: translateY(var(--lift-hover));

  transition: transform .25s ease-out, box-shadow .25s ease-out;
}

.fb-card__media {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
}

.fb-card__media {
  flex: 0 0 auto;
  overflow: hidden;              /* да увећана слика не испадне из оквира */
}

.fb-card__media img {
  width: 100%;
  height: var(--card-img-h);
  object-fit: cover;
  transition: transform .4s ease-out;
}

/* Ховер само тамо где заиста постоји показивач — на додиру ефекат
   ниједном не крене, па не може ни да се „заглави" после тапа. */
@media (hover: hover) and (pointer: fine) {
  /* Само показивач: картица са тастатурним фокусом НЕ добија ховер изглед
     (подизање, сенка, зум, попуњено дугме) — њој остаје само оквир фокуса
     (.fb-card--link:has(.fb-card__link:focus-visible) испод). */
  .fb-card:has(.fb-btn):hover {
    --lift-hover: -8px;
    box-shadow: 0 26px 56px rgba(22,48,30,.30);
  }

  /* суптилан зум: фотографија делује даље и импресивније, не исечено */
  .fb-card:has(.fb-btn):hover .fb-card__media img {
    transform: scale(1.03);
  }

  /* Контурно дугме се на ховер картице пуни тамнозелено (карусел и мрежа). */
  .fb-card:has(.fb-btn):hover .fb-btn {
    background: var(--green);
    border-color: var(--green);
    color: #FFFDF8;
  }
}

.fb-card__body {
  --btn-gap: 16px;
  position: relative;
  padding: var(--card-pad-top) 24px calc(var(--card-pad-bottom) + 14px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1 1 auto;
}

.fb-card__title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: clamp(24px, 2.15vw, 31px);
  line-height: 1.15;
  color: var(--gold-text);
}

.fb-card__rule {
  width: 36px;
  height: 2px;
  margin: var(--rule-mt) 0 var(--rule-mb);
  background: var(--gold);
  border-radius: 2px;
}

.fb-card__meta {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
}
.fb .fb-card__meta + .fb-card__meta { margin-top: 2px; }
.fb-card__meta svg {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  margin-top: 2px;
  fill: none;
  stroke: var(--gold-text);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fb .fb-card__desc {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}

/* Размак изнад дугмета: auto гура дугме на дно картице (једнака висина
   у реду), а padding-top гарантује минимални размак. */
.fb-card__body > .fb-btn { margin-top: auto; }
.fb-card__body > .fb-card__desc { margin-bottom: var(--btn-gap); }

.fb-btn {
  margin-top: auto;
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--ink);
  font-family: Manrope, system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .04em;
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}

/* Пуно (primary) дугме — тамна зелена, бео текст */
.fb-btn--primary {
  background: var(--green);
  border-color: var(--green);
  color: #FFFDF8;
}

/* Картица са живом страницом је цела клик-површина: ::after линка прекрива
   картицу (развучени линк). И даље је један линк и једно заустављање на Tab. */
.fb-card--link { position: relative; cursor: pointer; }
/* тело не сме бити позиционирано, иначе ::after покрива само текст, а не и слику */
.fb-card--link .fb-card__body { position: static; }
.fb-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.fb-card--link .fb-card__link:focus-visible { outline: none; }
.fb-card--link:has(.fb-card__link:focus-visible) { outline: 2px solid var(--green); outline-offset: 3px; }

/* Пројекат без странице: уместо дугмета тиха ознака „Ускоро". Исте је
   висине као дугме (min-height), па картице остају поравнате. */
.fb .fb-card__soon {
  margin-top: auto;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: Manrope, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.fb-card__soon::before,
.fb-card__soon::after {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--gold);
}

/* --- стрелице ------------------------------------------------------------- */

.fb-nav {
  flex: 0 0 auto;
  width: var(--nav-size);
  height: var(--nav-size);
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: #FFFDF8;
  color: var(--gold-text);
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(22,48,30,.14);
  transition: background .35s ease, box-shadow .35s ease, transform .35s ease;
}

.fb-nav:hover { background: #fff; box-shadow: 0 12px 26px rgba(22,48,30,.2); }

.fb-nav svg {
  width: 22px; height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- тачкице и бројач ------------------------------------------------------ */

.fb-carousel__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: var(--foot-mt);
}

/* Карусел и тачкице исцртава JS после првог исцртавања. Висина је унапред
   резервисана (мало испод стварне), па херој наслов не поскочи кад картице
   стигну — без скривања странице и без утицаја на LCP. */
.fb-carousel {
  --card-body-h: 280px;   /* висина текста картице (без слике) — за резервацију места */
  --row-reserve: calc(var(--card-img-h) + var(--card-body-h));
  --foot-reserve: 6px;
  /* Висина целе секције је резервисана из истих променљивих: иначе, кад се
     HTML преузима у деловима, први кадар се исцрта пре него што стигну
     тачкице и доњи размак, па секција нарасте ~55px (измерени CLS до 0,07). */
  min-height: calc(var(--row-reserve) + var(--foot-mt) + var(--foot-reserve) + var(--foot-pad-bottom));
}
.fb-carousel__row { min-height: var(--row-reserve); }
/* трака стоји на врху резервисаног реда, па се празна трака не „помера"
   кад стигну картице (стрелице остају центриране уз ред) */
.fb .fb-cards { align-self: flex-start; }
.fb-carousel__foot { min-height: var(--foot-reserve); }
@media (min-width: 768px) and (max-width: 1024px) {
  /* две картице: што је екран ужи, текст се више ломи (≈ +26px на 768px) */
  .fb-carousel { --card-body-h: calc(270px + (1024px - 100vw) * .1); --foot-reserve: 37px; }
}

.fb-dots { display: flex; align-items: center; gap: 8px; }

.fb-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255,253,248,.62);
  box-shadow: 0 1px 4px rgba(10,28,16,.45);
  cursor: pointer;
  transition: width .35s ease, background .35s ease;
}

.fb-dot.is-active { width: 26px; background: #FFFDF8; }

/* невидљива површина за клик/додир (бар 44px високо) без промене изгледа */
@media (min-width: 768px) {
  .fb-dot { position: relative; }
  .fb-dot::before { content: ""; position: absolute; inset: calc(-19px * var(--zi, 1)) -4px; }
}

.fb-counter {
  font-size: 13px;
  color: #FFFDF8;
  text-shadow: 0 1px 8px rgba(10,28,16,.6);
}

.fb-fallback { display: flex; gap: 20px; justify-content: center; padding-top: 24px; }
.fb-fallback a { color: var(--gold-text); text-decoration: underline; }

/* --- таблет и десктоп ------------------------------------------------------ */

@media (min-width: 768px) {
  .fb {
    --visible: 2;
    --row-gap: 4px;
    /* више ваздуха између картица и тачкица */
    --foot-mt: clamp(26px, 3.8svh, 44px);
    /* стрелице су увек бар 16px од ивице екрана */
    --side-pad: 16px;
  }
}

@media (min-width: 1025px) {
  .fb {
    --visible: 3;
    --nav-size: 56px;
    --row-gap: 6px;
    --card-gap: clamp(16px, 2.2vw, 32px);
    --side-pad: 16px;
  }

  .fb-card { border-radius: 18px; }

  /* бројач је потребан само док нема довољно места за тачкице и стрелице */
  .fb-counter { display: none; }
}

@media (max-width: 1024px) {
  .fb { --nav-h: 68px; }
}

/* --- мобилни ------------------------------------------------------------- */

@media (max-width: 767px) {
  /* на телефону се листа свајпом и тачкицама; стрелице би појеле ширину
     картице, а лева би завиривала преко ивице екрана */
  .fb-nav { display: none; }
  /* слика 16/10 (0.625 ширине картице) + текст и дугме ≈ 256px */
  .fb-carousel { --row-reserve: calc(min(78vw, 300px) * .625 + 256px); --foot-reserve: 65px; }

  .fb {
    --card-pad-top: 16px;
    --card-pad-bottom: 16px;
    --rule-mt: 8px;
    --rule-mb: 10px;
    --foot-mt: 4px;
    --foot-pad-bottom: 20px;
  }

  /* Наслов: мањи и уз clamp(), највише 2–3 кратка реда; исти serif и бела сенка. */
  .fb-hero__kicker { font-size: clamp(20px, 6vw, 26px); }
  .fb-hero__title { font-size: clamp(26px, 8vw, 34px); margin-top: 4px; }

  /* Трака преко целе ширине екрана: картица је у средини, а ивица следеће
     вири 16px и показује да се може свајпати. Намерно тачно 16px: то је
     оквир + празан унутрашњи размак картице, па из суседа не вири ништа
     (ни заобљени крај дугмета, који личи на полуодсечен бели круг).  Празан простор са обе
     стране (padding) омогућава да и прва и последња картица стану у
     средину; поравнање је center. */
  .fb-carousel { padding-inline: 0; }
  .fb-carousel__row { max-width: none; }
  .fb .fb-cards {
    --card-w: min(78vw, 300px);
    --card-gap: clamp(12px, calc((100vw - var(--card-w)) / 2 - 16px), 40px);
    padding-inline: calc((100% - var(--card-w)) / 2);
    scroll-padding-inline: 0;
    margin-inline: 0;
  }
  .fb-card { scroll-snap-align: center; border-radius: 14px; }

  /* Мала, ваздушаста картица */
  .fb-card__media img { height: auto; aspect-ratio: 16 / 10; }
  .fb-card__body { padding-inline: 16px; }
  .fb-card__title { font-size: 22px; }
  .fb-card__meta { font-size: 13px; }
  .fb-card__meta svg { width: 14px; height: 14px; margin-top: 3px; }
  .fb .fb-card__desc {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }
  .fb-card__body { --btn-gap: 12px; }
  .fb-btn { min-height: 44px; padding: 8px 16px; font-size: 14px; }

  /* Тачкице: невидљива површина 44px, видљива је само мала тачка. */
  .fb-dots { gap: 0; }
  .fb-dot {
    position: relative;
    width: 44px; height: 44px;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .fb-dot::after {
    content: "";
    position: absolute; left: 50%; top: 50%;
    width: 6px; height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 999px;
    background: rgba(255,253,248,.62);
    box-shadow: 0 1px 4px rgba(10,28,16,.45);
    transition: width .35s ease, margin .35s ease, background .35s ease;
  }
  .fb-dot.is-active { width: 44px; background: none; }
  .fb-dot.is-active::after { width: 26px; margin-left: -13px; background: #FFFDF8; }
  .fb-carousel__foot { gap: 0; }
}

/* --- размера картица према ширини прозора (десктоп, ≥1025px) ---------------
   Картице су цртане за ~1920px. На 100% зуму лаптоп прозор је 1280–1600px
   широк, па исте картице заузму ~25% ширине и делују претешко. Зато се цела
   група (картице, стрелице, тачкице, текст) пропорционално умањује, тако да
   увек заузима отприлике 17–19% ширине прозора — као на већем екрану.
   `zoom` скалира и резервисане висине унутар групе, па нема померања
   распореда. Прегледачи без `zoom` (Firefox < 126) приказују пуну величину. */
/* --zi = 1/zoom: стрелице и површина за клик тачкица се враћају на ≥44px на екрану */
/* Ширина слике одређује висину (фотографије су 4:3 – 10:7), па се не сече
   горе и доле; висину екрана прати зум, не исецање. */
@media (min-width: 1025px) { .fb-carousel { --card-img-h: 218px; --card-body-h: 300px; } }
/* таблет (две картице): висина слике из ширине (≈4:3); на ниском екрану се
   смањује висина, а ред се сужава за исто толико – слика остаје 4:3 */
@media (min-width: 768px) and (max-width: 1024px) {
  .fb-carousel {
    zoom: .93; --zi: 1.075; --nav-size: 47px;
    --card-img-h: min((100vw - 168px) / 2.66, clamp(150px, 26svh, 240px));
  }
  .fb-carousel__row { max-width: calc(2 * (var(--card-img-h) * 1.33 + 4px) + 160px); }
}
/* веома низак таблет/телефон водоравно: уска картица би ломила текст у
   више редова, па ту остаје широк ред и слика се благо исече */
@media (min-width: 768px) and (max-width: 1024px) and (max-height: 640px) {
  .fb-carousel { --card-img-h: clamp(100px, 19svh, 222px); }
  .fb-carousel__row { max-width: 1100px; }
}
@media (min-width: 1025px) { .fb-carousel { zoom: .66; --zi: 1.52; --nav-size: 66px; } }
@media (min-width: 1280px) { .fb-carousel { zoom: .70; --zi: 1.43; --nav-size: 62px; } }
@media (min-width: 1440px) { .fb-carousel { zoom: .74; --zi: 1.35; --nav-size: 60px; } }
@media (min-width: 1600px) { .fb-carousel { zoom: .78; --zi: 1.28; } }
@media (min-width: 1760px) { .fb-carousel { zoom: .85; --zi: 1.18; } }
@media (min-width: 1920px) { .fb-carousel { zoom: .92; --zi: 1.09; } }
/* низак прозор: уместо исецања слике, цела група се још мало смањи */
@media (min-width: 1025px) and (max-height: 680px) { .fb-carousel { zoom: .61; --zi: 1.64; --nav-size: 72px; } }

/* --- ниски прозори (лаптопи) ----------------------------------------------
   На 100% зуму лаптоп прозор је често само 650–760px висок: картице за
   „високе" екране заузму цео екран, насловом се стисне уз траку, а тачкице
   испадну испод ивице. Зато се испод 760px висине смањује само вертикала
   картица карусела (слика, размаци, текст); ширина и изглед остају исти.
   Важи само за таблет (768–1024px): од 1025px то већ ради `zoom` изнад.
   --card-body-h води рачуна да резервисано место прати нове мере. */
@media (min-width: 768px) and (max-width: 1024px) and (max-height: 760px) {
  .fb {
    --card-pad-top: 12px;
    --card-pad-bottom: 10px;
    --rule-mt: 6px;
    --rule-mb: 9px;
    --foot-mt: 12px;
  }
  .fb-carousel { --card-body-h: calc(224px + max(0px, 1024px - 100vw) * .05); }   /* измерено: 219–229px (прави фонтови); мало више на ужем екрану, где резервни фонт ломи више редова */
  .fb-cards .fb-card__body { --btn-gap: 10px; }
  .fb-cards .fb-card__title { font-size: clamp(22px, min(2.15vw, 4svh), 31px); }
  .fb-cards .fb-card__meta,
  .fb-cards .fb-card .fb-card__desc { font-size: 13px; }
  .fb-cards .fb-card .fb-card__desc { margin-top: 8px; line-height: 1.4; }
}

/* још нижи прозор: уже заглавље и мања слика */
@media (min-width: 768px) and (max-width: 1024px) and (max-height: 680px) {
  .fb {
    --nav-h: 68px;
  }
}

/* Куће су мало лево од средине — на усправном телефону кадар се
   помера тако да не испадну из слике. */
@media (max-width: 768px) and (orientation: portrait) {
  .fb-hero__img,
  .fb-hero__video { object-position: 40% center; }
}

/* --- смањена анимација ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fb *, .fb *::before, .fb *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }

  /* Видео се не приказује — види се само постер.
     Скрипта му уз то уопште не поставља src, па се ништа не преузима. */
  .fb-hero__video { display: none; }

  /* Ховер: остаје само промена сенке, без подизања и увећања. */
  .fb-card:has(.fb-btn):hover { --lift-hover: 0px; }
  .fb-card:has(.fb-btn):hover .fb-card__media img { transform: none; }
}


/* ==========================================================================
   Навигација
   ========================================================================== */

.fb-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  height: var(--nav-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 0 clamp(16px, 3vw, 40px);
  color: #FFFDF8;
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.35);
}

/* тамнији градијент иза провидне траке, да текст остане читљив преко неба */
.fb-topbar::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(30,20,10,.6), rgba(30,20,10,0));
  transition: opacity .3s ease;
  pointer-events: none;
}

/* Пуна тамнозелена трака је посебан слој који се само пројасни (opacity).
   Раније је прелаз радио на background/box-shadow самог header-а, па се
   трака (са сенкама текста) поново исцртавала у сваком кадру од 300 ms. */
.fb-topbar::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--ink);
  box-shadow: 0 4px 18px rgba(0,0,0,.28);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.fb-topbar.is-solid::after,
.fb-topbar.is-open::after { opacity: 1; }
.fb-topbar.is-solid::before,
.fb-topbar.is-open::before { opacity: 0; }

.fb-topbar a,
.fb-topbar button {
  font-family: Manrope, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
  text-shadow: 0 1px 2px rgba(30,20,10,.6), 0 1px 10px rgba(30,20,10,.5);
}

.fb-topbar__links,
.fb-topbar__right { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); }
.fb-topbar__right { justify-content: flex-end; }

.fb-topbar__links a,
.fb-topbar__contact {
  position: relative;
  padding: 6px 0;
}
.fb-topbar__links a::after,
.fb-topbar__contact::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.fb-topbar__links a:hover::after,
.fb-topbar__contact:hover::after { transform: scaleX(1); }

/* Лого: два слоја у истој ћелији мреже (исте мере, нема померања распореда).
   .fb-logo--clear — провидни лого са сенком, на врху странице;
   .fb-logo--badge — лого на белој заобљеној подлози, кад трака позелени
   (.is-solid) или је мени отворен. Прелаз је само opacity. */
.fb-topbar__logo { display: grid; justify-self: center; }
.fb-logo {
  grid-area: 1 / 1;
  height: calc(var(--nav-h) - 10px);
  width: auto;
  border-radius: 10px;
  padding: 2px 8px;
  transition: opacity .2s ease;
}
/* десктоп: лого ~10% већи; transform не мења мере мреже, па трака и
   навигација остају где су (лого стане у траку од 84px) */
@media (min-width: 1025px) {
  .fb-logo { transform: scale(1.1); }
}
.fb-logo--clear {
  /* светли обрис: лого је тамнозелен, па тамна сенка на њему не би помогла */
  filter: drop-shadow(0 0 3px rgba(255,253,248,.9)) drop-shadow(0 1px 8px rgba(255,253,248,.55));
}
.fb-logo--badge { background: #FFFDF8; opacity: 0; }

.fb-topbar.is-solid .fb-logo--clear,
.fb-topbar.is-open .fb-logo--clear { opacity: 0; }
.fb-topbar.is-solid .fb-logo--badge,
.fb-topbar.is-open .fb-logo--badge { opacity: 1; }

.fb-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid var(--gold);
  background: var(--green);
  color: #FFFDF8;
  font-family: Manrope, system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .03em;
  white-space: nowrap;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.fb-pill:hover { background: #2B6340; }
/* `.fb a { color: inherit }` је јачи од `.fb-pill`, па су пилуле-линкови
   наслеђивале боју секције (тамно на тамнозеленом, бело на златном). */
.fb a.fb-pill { color: #FFFDF8; }
.fb a.fb-pill--gold { color: var(--ink); }
.fb-pill svg,
.fb-iconbtn svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.fb-pill--gold { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.fb-pill--gold:hover { background: #CA9B45; }
.fb-pill--solid { min-height: 48px; padding: 0 28px; }

/* Избор језика „СР | EN": активан језик је златан са подвлаком. Дугмад су
   44px, па их је лако погодити и на телефону. */
.fb-langsw { display: inline-flex; align-items: center; color: inherit; }
.fb-langsw span { opacity: .6; text-shadow: inherit; }
.fb-topbar .fb-langsw button {
  position: relative;
  min-width: 44px; min-height: 44px;
  padding: 0 6px;
  background: none; border: 0;
  color: inherit; cursor: pointer;
}
.fb-topbar .fb-langsw button::after {
  content: "";
  position: absolute; left: 8px; right: 8px; bottom: 9px;
  height: 2px; border-radius: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform .2s ease;
}
.fb-topbar .fb-langsw button[aria-pressed="true"] { color: #E3BE72; }
.fb-topbar .fb-langsw button[aria-pressed="true"]::after { transform: scaleX(1); }
.fb-topbar .fb-langsw button:focus-visible { outline-color: #E3BE72; }

/* Док се речник не учита, херој и карусел су скривени (visibility не
   прави померање распореда): нема треперења српског текста код енглеског. */
.fb-i18n-pending .fb-hero__content,
.fb-i18n-pending .fb-scena > main { visibility: hidden; }

.fb-iconbtn,
.fb-burger { display: none; }

.fb-menu { display: none; }

@media (max-width: 1024px) {
  .fb-topbar__links,
  .fb-topbar__contact,
  .fb-pill--bar { display: none; }

  .fb-burger,
  .fb-iconbtn {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 44px; height: 44px;
    padding: 0;
    border: 0; background: none;
    color: inherit; cursor: pointer;
  }
  .fb-burger { justify-self: start; flex-direction: column; gap: 5px; }
  .fb-burger span {
    display: block; width: 24px; height: 2px;
    background: currentColor; border-radius: 2px;
    transition: transform .25s ease, opacity .25s ease;
  }
  .fb-topbar.is-open .fb-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .fb-topbar.is-open .fb-burger span:nth-child(2) { opacity: 0; }
  .fb-topbar.is-open .fb-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .fb-logo { padding: 1px 6px; }
  .fb-topbar__right { gap: 0; }

  .fb-topbar.is-open .fb-menu {
    position: absolute;
    top: 100%; left: 0; right: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 4px 20px 24px;
    background: var(--ink);
    box-shadow: 0 14px 24px rgba(0,0,0,.3);
  }
  .fb-menu > a:not(.fb-pill) {
    padding: 14px 0;
    font-size: 17px;
    border-bottom: 1px solid rgba(255,255,255,.14);
  }
  .fb-menu .fb-pill { margin-top: 18px; }
}

/* најужи телефони: мање бочног размака, да се СР | EN и календар
   (по 44px) стану десно од логоа */
@media (max-width: 480px) {
  .fb-topbar { padding: 0 8px; gap: 8px; }
}
/* испод 375px десна група (СР | EN + календар, 136px) је шира од своје
   колоне и гура лого улево; мало ужа дугмад (висина остаје 44px) враћају
   лого тачно у средину, без преклапања */
@media (max-width: 374px) {
  .fb-topbar { gap: 4px; }
  .fb-topbar .fb-langsw button { min-width: 34px; padding: 0 4px; }
  .fb-topbar .fb-langsw button::after { left: 6px; right: 6px; }
  .fb-iconbtn { width: 40px; }
}

/* ==========================================================================
   Секције
   ========================================================================== */

.fb-section {
  position: relative;
  scroll-margin-top: var(--anchor-offset);
  padding: clamp(56px, 9vw, 104px) 16px;
}
.fb-section--soft { background: var(--card-bg-off); color: var(--ink); }
.fb-section--cream { background: var(--bg); color: var(--ink); }
.fb-section--dark { background: var(--ink); color: #FFFDF8; }

.fb-wrap { max-width: 1180px; margin: 0 auto; }

.fb-section__title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.12;
  color: var(--gold-text);
}
.fb-section--dark .fb-section__title { color: #E3BE72; }
.fb-section--dark :focus-visible { outline-color: #E3BE72; }

.fb-section__rule { display: block; margin: 14px 0 20px; }

.fb-section__intro,
.fb-section__lead {
  max-width: 720px;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.7;
}
.fb-section--dark .fb-section__intro,
.fb-section--dark .fb-section__lead { color: rgba(255,253,248,.9); }

/* Лагано појављивање (само ако JS + IntersectionObserver + без reduced motion) */
/* Подизање (18px) носи садржај секције, а не сама секција: иначе се секција-
   циљ сидра помери за 18px док се појављује, па размак испод траке испадне
   мањи од --anchor-offset. Изглед је исти. */
.fb-anim .fb-reveal {
  opacity: 0;
  transition: opacity .7s ease;
}
.fb-anim .fb-reveal > .fb-wrap {
  transform: translateY(18px);
  transition: transform .7s ease;
}
.fb-anim .fb-reveal.is-in { opacity: 1; }
.fb-anim .fb-reveal.is-in > .fb-wrap { transform: none; }

/* --- #projekti: мрежа --------------------------------------------------- */

.fb .fb-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 40px;
}

/* Хоризонтална картица: слика лево, текст десно */
.fb-card.fb-card--row {
  flex: none;
  flex-direction: row;
  align-items: stretch;
  scroll-snap-align: none;
}
.fb-card--row .fb-card__media { flex: 0 0 38%; }
.fb-card--row .fb-card__media img { height: 100%; min-height: 200px; }
.fb-card--row .fb-card__body { align-items: flex-start; text-align: left; }
.fb-card--row .fb-card__meta { justify-content: flex-start; }
.fb-card--row .fb-card__soon { justify-content: flex-start; }
.fb-card--row .fb-card__soon::before { display: none; }
.fb-card--row .fb-card__title { font-size: clamp(24px, 2.6vw, 30px); }

/* Мрежа: сва дугмад су иста (контурна); пуњење на ховер картице је у
   општем правилу .fb-card:hover .fb-btn (као и у каруселу). */
.fb-card--row .fb-btn { transition: background .25s ease, color .25s ease, border-color .25s ease; }

@media (min-width: 1025px) {
  .fb .fb-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

/* на најужим екранима слика иде изнад текста, иначе текст постане претесан */
@media (max-width: 520px) {
  .fb-card.fb-card--row { flex-direction: column; }
  .fb-card--row .fb-card__media { flex: 0 0 auto; }
  .fb-card--row .fb-card__media img { height: var(--card-img-h); min-height: 0; }
}

/* --- #o-nama -------------------------------------------------------------- */

.fb-about {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
.fb-about__img {
  display: none;
  width: 100%;
  height: 100%;
  max-height: 380px;
  object-fit: cover;
  border-radius: 18px;
  border: 2px solid var(--gold);
  box-shadow: 0 16px 38px rgba(0,0,0,.5);
}
@media (min-width: 1025px) {
  .fb-about { grid-template-columns: 1.15fr 1fr; gap: 56px; }
  .fb-about__img { display: block; }
}

.fb .fb-values {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 48px;
}
@media (min-width: 769px) { .fb .fb-values { grid-template-columns: repeat(3, 1fr); gap: 28px; } }

.fb-value,
.fb-highlight {
  padding: 28px 26px;
  border-radius: 16px;
  background: var(--card-bg);
  border: 1px solid var(--line-off);
}
.fb-section--dark .fb-value,
.fb-section--dark .fb-highlight {
  background: rgba(255,253,248,.06);
  border-color: rgba(185,138,52,.55);
}
.fb-section--dark .fb-value h3,
.fb-section--dark .fb-highlight h3 { color: #E3BE72; }
.fb-value svg,
.fb-highlight svg {
  width: 36px; height: 36px;
  fill: none; stroke: var(--gold);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.fb-value h3,
.fb-highlight h3,
.fb-step h3 {
  margin: 14px 0 8px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  color: var(--gold-text);
}
.fb-value p,
.fb-highlight p { font-size: 15px; line-height: 1.65; }
.fb-section--dark .fb-value p,
.fb-section--dark .fb-highlight p { color: rgba(255,253,248,.9); }

/* --- #investicije ----------------------------------------------------------- */


.fb .fb-highlights {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 44px;
}
@media (min-width: 769px) { .fb .fb-highlights { grid-template-columns: repeat(3, 1fr); gap: 24px; } }


.fb .fb-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 56px;
  counter-reset: none;
}
@media (min-width: 769px) {
  .fb .fb-steps { grid-template-columns: repeat(4, 1fr); gap: 24px; }
}

.fb-step { position: relative; padding-left: 64px; }
.fb-step__n {
  position: absolute; left: 0; top: 0;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--gold-text);
  background: var(--card-bg);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600; font-size: 24px;
  color: var(--gold-text);
}
.fb-step h3 { margin-top: 2px; font-size: 22px; color: var(--ink); }
.fb-step p { font-size: 15px; line-height: 1.65; }

/* вертикална линија између корака (мобилни) */
@media (max-width: 768px) {
  .fb-step:not(:last-child)::before {
    content: "";
    position: absolute; left: 22px; top: 48px; bottom: -24px;
    width: 1px; background: var(--gold);
  }
}
/* хоризонтална линија између корака (таблет/деск) */
@media (min-width: 769px) {
  .fb-step { padding: 60px 0 0; }
  .fb-step:not(:last-child)::before {
    content: "";
    position: absolute; left: 56px; right: -12px; top: 22px;
    height: 1px; background: var(--gold);
  }
}

.fb .fb-note {
  margin-top: 36px;
  font-size: 14px;
  color: var(--muted);
}
/* #zakazi је усред секције: ту остаје мали размак испод траке */
.fb-anchor { scroll-margin-top: calc(var(--anchor-offset) + 24px); outline: none; }
.fb-cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.fb-cta-hint { display: none; }

/* Телефон: Позовите / Пошаљите имејл већ стоје у лепљивој траци при дну екрана,
   па се овде не понављају — само ненаметљив наговештај са стрелицом надоле. */
@media (max-width: 767px) {
  .fb-cta { display: none; }
  .fb .fb-cta-hint {
    display: flex; align-items: center; gap: 8px;
    margin: 20px 0 0;
    font-size: 13px; line-height: 1.4;
    color: var(--muted);
  }
  .fb-cta-hint::after {
    content: "↓";
    flex: none;
    color: var(--gold-text);
    font-size: 16px;
    animation: fb-hint-nudge 2.4s ease-in-out 3;
  }
  @keyframes fb-hint-nudge { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(3px); } }
}
@media (prefers-reduced-motion: reduce) { .fb-cta-hint::after { animation: none; } }
.fb a.fb-pill--ghost { background: transparent; border-color: var(--green); color: var(--ink); }
.fb a.fb-pill--ghost:hover { background: rgba(22,48,30,.08); border-color: var(--ink); }

/* --- збијеније секције испод хероја ------------------------------------------
   Херој и његове картице су мерене по екрану (clamp/vw), а секције испод су
   имале фиксну широку мрежу и крупан текст, па су на великим екранима
   изгледале „зумирано". Овде су контејнер, наслови, картице и размаци мањи
   (исти контејнер користи и подножје). */

.fb-wrap { max-width: 1040px; }
.fb-section { padding-block: clamp(40px, 6vw, 72px); }
.fb-section__title { font-size: clamp(26px, 2.6vw, 34px); }
.fb-section__rule { margin: 10px 0 16px; }
.fb-section__intro,
.fb-section__lead { max-width: 640px; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.65; }

/* пројекти: картице у мрежи */
.fb .fb-grid { gap: 18px; margin-top: 28px; }
@media (min-width: 1025px) { .fb .fb-grid { gap: 20px; } }
.fb-card--row .fb-card__media { flex-basis: 34%; }
.fb-card--row .fb-card__media img { min-height: 160px; }
.fb-card--row .fb-card__body { padding: 18px 20px 20px; }
.fb-card--row .fb-card__title { font-size: clamp(20px, 1.9vw, 25px); }
.fb-card--row .fb-card__meta { font-size: 13px; }
.fb .fb-card--row .fb-card__desc { font-size: 13px; margin-top: 8px; }
.fb-card--row .fb-btn { min-height: 40px; padding: 8px 16px; font-size: 13px; }
.fb-card--row .fb-card__soon { min-height: 40px; font-size: 11px; }
@media (max-width: 520px) { .fb-card--row .fb-card__media img { min-height: 0; } }

/* Телефон: картице пројеката у листи су уже (центриране, са ваздухом са
   страна), а слика је виша (4:3) па се види скоро цела фотографија.
   Само .fb-grid — карусел у херо секцији остаје нетакнут. */
@media (max-width: 520px) {
  .fb .fb-grid { gap: 24px; justify-items: center; }
  .fb-grid .fb-card.fb-card--row { width: min(86%, 360px); }
  /* flex-basis 34% (хоризонтални распоред) у колони се рачуна од висине картице и сече слику */
  .fb-grid .fb-card--row .fb-card__media { flex: 0 0 auto; }
  .fb-grid .fb-card--row .fb-card__media img {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;   /* imgPos из JS (инлајн) и даље има предност */
  }
}

/* о нама */
.fb-about { gap: 28px; }
.fb-about__img { max-height: 300px; }
@media (min-width: 1025px) {
  .fb-about { gap: 44px; grid-template-columns: .85fr 1.15fr; }
  /* шира слика, без исецања: однос као код изворне фотографије (891×629) */
  .fb-about__img { height: auto; max-height: none; aspect-ratio: 891 / 629; }
}
.fb .fb-values { gap: 16px; margin-top: 32px; }
@media (min-width: 769px) { .fb .fb-values { gap: 20px; } }
.fb-value,
.fb-highlight { padding: 20px 20px; border-radius: 14px; }
.fb-value svg,
.fb-highlight svg { width: 30px; height: 30px; }
.fb-value h3,
.fb-highlight h3,
.fb-step h3 { margin: 10px 0 6px; font-size: 20px; }
.fb-value p,
.fb-highlight p { font-size: 14px; line-height: 1.6; }

/* инвестиције */
.fb .fb-highlights { gap: 16px; margin-top: 32px; }
@media (min-width: 769px) { .fb .fb-highlights { gap: 20px; } }
.fb .fb-steps { margin-top: 40px; gap: 24px; }
.fb-step__n { width: 38px; height: 38px; font-size: 21px; }
.fb-step h3 { margin-top: 2px; font-size: 19px; }
.fb-step p { font-size: 14px; }
@media (max-width: 768px) {
  .fb-step { padding-left: 54px; }
  .fb-step:not(:last-child)::before { left: 19px; top: 42px; }
}
@media (min-width: 769px) {
  .fb-step { padding: 52px 0 0; }
  .fb-step:not(:last-child)::before { left: 48px; top: 19px; }
}
.fb .fb-note { margin-top: 28px; font-size: 13px; }
.fb-cta { margin-top: 24px; }
/* Кораци 1–4, напомена и дугмад центрирано (клијент 29.10). Од 769px круг
   стоји на средини стубца, наслов и текст испод њега, а линија иде од круга
   до следећег круга (10px размака са обе стране; 29 = полупречник 19 + 10,
   5 = 29 − размак мреже 24). На телефону (кораци један испод другог) круг и
   вертикална линија остају лево: центриран текст би линија секла. */
@media (min-width: 769px) {
  .fb-step { text-align: center; }
  .fb-step__n { left: 50%; transform: translateX(-50%); }
  .fb-step:not(:last-child)::before { left: calc(50% + 29px); right: calc(-50% + 5px); }
}
.fb .fb-note { text-align: center; }
.fb-cta { justify-content: center; }
@media (max-width: 767px) {
  .fb .fb-cta-hint { justify-content: center; text-align: center; }
}
/* „Инвестирајте у планину“ центрирано (клијент 30.10), само ова секција:
   наслов, златна линија и увод (ред највише 640px, као и до сада), и
   садржај три картице (икона, наслов, текст). Икона остаје у реду текста,
   па су величине, ивице и размаци картица исти. Важи за оба језика и за
   телефон (картице једна испод друге). */
#investicije .fb-section__title,
#investicije .fb-section__intro,
#investicije .fb-highlight { text-align: center; }
#investicije .fb-section__rule,
#investicije .fb-section__intro { margin-left: auto; margin-right: auto; }
.fb-pill--solid { min-height: 44px; padding: 0 24px; }

/* --- подножје --------------------------------------------------------------------
   Исти контејнер као секције изнад (.fb-wrap: max-width 1180 + 16px бочно), па се
   леви и десни руб поклапају са садржајем. Деск: 4 колоне (бренд | контакт |
   навигација | пројекти). Таблет: 2×2. Мобилни: једна колона, лево поравнато.
   Доле: златна линија и трака у три дела (© | права | заслуга). */

.fb-footer {
  background: var(--ink);
  color: #FFFDF8;
  padding: 56px 16px 32px;
}
.fb-footer :focus-visible { outline-color: #E3BE72; }

/* само за читаче екрана */
.fb-vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.fb-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}
.fb-footer__contact { scroll-margin-top: var(--anchor-offset); }

.fb-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.fb-footer__logo img {
  height: 84px; width: auto;
  padding: 3px 10px;
  border-radius: 12px;
  background: #FFFDF8;
}
.fb-footer__line {
  max-width: 24ch;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 18px;
  line-height: 1.35;
  color: rgba(255,253,248,.85);
}

/* један стил наслова колона (као ознака „Ускоро") и исти размак до прве ставке */
.fb-footer__title {
  margin: 0 0 14px;
  font-family: Manrope, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  line-height: 1.4;
  text-transform: uppercase;
  color: #E3BE72;
}

.fb-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.fb-footer__col li { margin: 0; }

/* све ставке: исти ред, исти ритам, површина за клик 44px */
.fb-footer__col a,
.fb-footer__soon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 15px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.fb-footer__col a:hover { color: #E3BE72; }
.fb-footer__col a svg {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  fill: none; stroke: var(--gold);
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.fb-info__link { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.fb-footer__projects a svg { width: 14px; height: 14px; }

.fb-footer__soon { color: rgba(255,253,248,.7); }
.fb-footer__tag {
  font-size: 12px;
  text-transform: lowercase;
  letter-spacing: .04em;
  padding: 1px 8px;
  border: 1px solid rgba(185,138,52,.6);
  border-radius: 999px;
}

/* три дела (© | права | заслуга): на телефону једно испод другог, центрирано */
.fb-footer__bar {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--gold);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  gap: 4px;
}
.fb .fb-footer__copy { font-size: 13px; color: rgba(255,253,248,.7); }
/* заслуга за дизајн: исто као © (величина, боја); линк само подвучен */
.fb .fb-footer__credit a { color: inherit; text-decoration: underline; text-decoration-color: rgba(185,138,52,.6); text-underline-offset: 3px; }
.fb .fb-footer__credit a:hover { color: #E3BE72; }

@media (min-width: 768px) {
  .fb-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px 48px; }
  /* 1fr auto 1fr: средњи део је тачно у средини контејнера, крајеви уз ивице */
  .fb-footer__bar { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 4px 24px; }
  .fb-footer__bar > :first-child { justify-self: start; text-align: left; }
  .fb-footer__bar > .fb-footer__credit { justify-self: end; text-align: right; }
  .fb-footer__col a, .fb-footer__soon { min-height: 36px; }
}
@media (min-width: 1025px) {
  .fb-footer__grid { grid-template-columns: 1.25fr 1.5fr 1fr 1.25fr; gap: 48px; }
}

/* --- плутајуће дугмад: „на врх" + брзи контакт ------------------------------
   Један fixed контејнер доле десно, дугмад једно изнад другог са размаком, па
   се никад не преклапају. Види се тек кад се прође херој (иначе би прекрио
   тачкице). Подножје има празнину испод једнаку висини стека (--float-h), па
   ништа не остане покривено. z-index: изнад садржаја, испод траке горе (60). */

:root { --float-edge: 16px; --float-h: 44px; }
@media (min-width: 768px) { :root { --float-edge: 24px; } }
@media (max-width: 767px) {
  /* трака уз доњу ивицу: 8 + дугме 44 + 8; „на врх" стоји изнад ње */
  :root { --float-h: 60px; --float-edge: 0px; }
}

.fb-float {
  position: fixed;
  right: calc(var(--float-edge) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--float-edge) + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;          /* само дугмад хватају додир, не празнина између */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.fb-float.is-visible { opacity: 1; visibility: visible; transform: none; }
.fb-float > *, .fb-float a, .fb-float button { pointer-events: auto; }

/* подножје не сме да остане испод стека */
.fb-footer { padding-bottom: calc(32px + var(--float-h) + var(--float-edge) + env(safe-area-inset-bottom, 0px)); }
/* од таблета нагоре у стеку је само „на врх" (44px, десно). Од 1200px ивица
   садржаја (1040px) је довољно далеко од дугмета, па празнина није потребна;
   уже од тога заслуга би стајала испод дугмета, па трака остаје изнад њега
   (уместо десног размака, који би померио средњи део из средине). */
@media (min-width: 768px) { .fb-footer { padding-bottom: 24px; } }
@media (min-width: 768px) and (max-width: 1199px) {
  .fb-footer { padding-bottom: calc(var(--float-edge) + 44px + 12px + env(safe-area-inset-bottom, 0px)); }
}

.fb-totop {
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: var(--green);
  color: #FFFDF8;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(22,48,30,.28);
  transition: background .25s ease;
}
.fb-totop:hover { background: #2B6340; }
.fb-totop svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
/* прстен се види и на светлој и на тамној позадини: светли размак + тамни обод */
.fb .fb-totop:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #FFFDF8, 0 8px 20px rgba(22,48,30,.28);
}

/* брзи контакт (само телефон, <768px): компактне пилуле у истом стеку */
.fb-callbar { display: none; }
@media (max-width: 767px) {
  /* пуна ширина, залепљена уз доњу ивицу екрана (не плива) */
  .fb-float { left: 0; right: 0; align-items: stretch; }
  .fb-totop {
    align-self: flex-end;
    margin-right: calc(16px + env(safe-area-inset-right, 0px));
  }
  .fb-callbar {
    display: flex;
    flex-direction: row;
    gap: 10px;
    order: 2;                    /* испод „на врх" */
    padding: 8px calc(16px + env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px));
    background: var(--ink);
    border-top: 1px solid var(--gold);
  }
  .fb-callbar [hidden] { display: none; }
  .fb-callbar__btn {
    min-height: 44px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 999px;
    border: 1px solid var(--gold);
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .02em;
    white-space: nowrap;
    flex: 1 1 0;
  }
  .fb-callbar__btn svg {
    width: 18px; height: 18px;
    fill: none; stroke: currentColor;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  }
  /* „Позовите" је главна радња (пуно, златно); имејл је тамна пилула */
  .fb a.fb-callbar__btn--call { background: var(--gold); color: var(--ink); }
  .fb a.fb-callbar__btn--mail { background: transparent; color: #FFFDF8; }
  .fb a.fb-callbar__btn:focus-visible { outline: 2px solid #FFFDF8; outline-offset: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .fb-float { transition: none; }
}