/* podrzAVam.rs — stilovi. Mobile-first, bez spoljnih zahteva.
   Redizajn: svetla tema, bela dominantna, akcenti crvena i plava iz logotipa. */

/* ---------- Font ----------
   Montserrat, hostovan KOD NAS (src/assets/fonts/). Ne sa Google Fonts servera:
   sajt obećava posetiocima nula spoljnih zahteva, a font sa tuđeg servera bi
   svakome poslao IP adresu trećoj strani.

   Svaki rez postoji u DVE datoteke — latiničnoj i ćiriličnoj — razdvojene preko
   `unicode-range`. Pregledač preuzima samo onu koja mu treba: latinična
   stranica nikada ne vuče ćirilične fajlove i obrnuto. Zato ćirilična verzija
   sajta ne košta latiničnog posetioca ni bajt.

   Datoteke su podskupovi, pa je latinični rez ~21 KB umesto ~200 KB.
   Licenca (SIL OFL) i detalji su u assets/fonts/LICENSE.txt.

   `font-display: swap` je namerno: tekst se vidi odmah sistemskim fontom i
   zameni se kad Montserrat stigne. Na slaboj vezi je pročitati stranicu
   važnije nego videti je u pravom fontu. */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-400.b622781859.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2122, U+2190-2193;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-400-cir.480a741c95.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0400-045F, U+2116;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-600.a91cfc8653.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2122, U+2190-2193;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-600-cir.2c8b418087.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0400-045F, U+2116;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-800.2c56d00d03.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2122, U+2190-2193;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-800-cir.c7562761e2.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
  unicode-range: U+0400-045F, U+2116;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-800i.211eb4f73c.woff2") format("woff2");
  font-weight: 800; font-style: italic; font-display: swap;
  unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2122, U+2190-2193;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-800i-cir.8c330b72b2.woff2") format("woff2");
  font-weight: 800; font-style: italic; font-display: swap;
  unicode-range: U+0400-045F, U+2116;
}

:root {
  /* ---- Brend boje — uzorkovane iz logotipa (podrzavam1024x1024_v2.png) ----
     Ovo NISU prigušene boje standarda zastave nego tonovi koje sam znak nosi.
     Razlog: logo stoji u headeru odmah pored dugmadi; prigušena crvena
     (#c6363c) je pored logotipske #e70e12 izgledala kao greška u štampi.
     Sve tri prolaze WCAG AA na beloj podlozi — vrednosti su u komentarima. */
  --crvena: #e70e12;        /* slovo A, levi luk    — 4.7:1 na beloj  */
  --crvena-tamna: #c00a0e;  /* hover stanje                            */
  --crvena-ziva: #ff0000;   /* vrh gradijenta u znaku, samo za akcente */
  --plava: #092f87;         /* slovo V, desni luk   — 11.9:1 na beloj */
  --plava-tamna: #062161;   /* šaka u znaku         — 15.0:1 na beloj */
  --plava-svetla: #1a4bb8;  /* linkovi u tekstu                        */

  /* Stari nazivi zadržani da ništa ne pukne ako se negde koriste. */
  --av-crvena: var(--crvena);
  --av-plava: var(--plava);

  --bela: #ffffff;
  --pozadina: #ffffff;
  --pozadina-blaga: #f6f8fc;
  --tekst: #0f1729;
  --tekst-blagi: #55607a;
  --ivica: #e6eaf2;

  /* ---- Staklo ----
     backdrop-filter zamućuje ono STO JE IZA elementa. Na ravnoj beloj podlozi
     zamućena bela je i dalje ista bela — efekat bi bio nevidljiv. Zato ispod
     svega stoji `body::before` sa vrlo razblaženim crveno-plavim oblacima:
     oko i dalje čita beo sajt, ali staklo ima sta da zamuti. */
  --staklo: rgba(255, 255, 255, 0.62);
  --staklo-jako: rgba(255, 255, 255, 0.78);
  --staklo-ivica: rgba(255, 255, 255, 0.9);
  --staklo-blur: blur(18px) saturate(180%);

  --radius: 18px;
  --radius-s: 12px;

  /* ---- Trobojka ----
     Redosled je onakav kakav je na zastavi, odozgo nadole: crvena, plava, bela.
     Puna verzija se koristi SAMO na tamnoj podlozi (futer) — na beloj bi treca
     traka nestala i ostatak bi izgledao kao nedovrsen posao. Na svetlim
     povrsinama ide dvobojna varijanta, gde belu nosi sama podloga.

     Granice su u PIKSELIMA, ne u procentima. Sa procentima (33.333%) prelaz
     pada na neceo piksel, pregledac ga zaokruzi, i jedna traka ispadne za
     piksel tanja od druge — sto se na ekranu vidi. Pikselske granice to
     iskljucuju. Visina elementa mora biti 18 px da bi sve tri stale. */
  --traka-boje: 6px;
  --trobojka: linear-gradient(
    to bottom,
    var(--crvena) 0 var(--traka-boje),
    var(--plava) var(--traka-boje) calc(var(--traka-boje) * 2),
    #ffffff calc(var(--traka-boje) * 2) calc(var(--traka-boje) * 3)
  );
  --dvobojka: linear-gradient(90deg, var(--crvena) 0 50%, var(--plava) 50% 100%);

  /* Senke su slojevite i u brend plavoj, ne u crnoj — crna senka na beloj
     podlozi izgleda prljavo, plava ostaje u istoj porodici. */
  --senka-1: 0 1px 2px rgba(6, 33, 97, 0.04), 0 4px 14px rgba(6, 33, 97, 0.05);
  --senka-2: 0 2px 4px rgba(6, 33, 97, 0.05), 0 14px 34px rgba(6, 33, 97, 0.10);
  --senka-3: 0 30px 70px rgba(6, 33, 97, 0.16);

  /* Sistemski fontovi ostaju kao rezerva — ako WOFF2 iz bilo kog razloga ne
     stigne, sajt i dalje izgleda uredno. */
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Jačina figura levo i desno od hero ploče. 0 ih potpuno sklanja. */
  --hero-figura: 1;

  /* Najmanji cilj za prst. Korisnici su uglavnom slabo tehnički pismeni i
     rade na telefonu, pa je svuda 52 px umesto uobičajenih 44 — promašen
     dodir je ovde skuplji od nekoliko piksela praznog prostora. */
  --dodir: 52px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  color: var(--tekst);
  background: var(--pozadina);
  line-height: 1.65;
  overflow-x: hidden;
  /* Nemačke složenice („Datenschutzerklärung", „Standort-Einwilligung") i
     mejl adrese su duže od 360 px kolone i probijale su stranicu udesno.
     Prelamanje unutar reči je jedino rešenje koje ne traži diranje teksta. */
  overflow-wrap: break-word;
}

/* Obojeni oblaci — podloga bez koje staklo ne postoji. Fiksirani su, pa se
   pri skrolovanju sadržaj kreće preko njih i zamućenje se stvarno vidi. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58rem 40rem at 10% 2%, rgba(231, 14, 18, 0.07), transparent 62%),
    radial-gradient(52rem 38rem at 92% 12%, rgba(9, 47, 135, 0.10), transparent 62%),
    radial-gradient(46rem 34rem at 78% 88%, rgba(231, 14, 18, 0.05), transparent 62%),
    radial-gradient(50rem 36rem at 18% 78%, rgba(9, 47, 135, 0.07), transparent 62%);
}

img, svg { max-width: 100%; display: block; }

.container {
  width: min(1140px, 100% - 2.5rem);
  margin-inline: auto;
}

/* ---------- Logotip ---------- */

/* `gap` se ovde NE sme koristiti: `.logo` je inline-flex, pa mu i goli delovi
   natpisa („podrz", „am") postaju flex-stavke i razmak se ubaci IZMEĐU SLOVA —
   u footeru se to videlo kao „podrz AV am .rs". Razmak zato nosi sam znak. */
.logo {
  display: inline-flex;
  align-items: center;
  font-size: clamp(1rem, 4.4vw, 1.3rem);
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.02em;
  color: var(--tekst);
  text-decoration: none;
  white-space: nowrap;
}
.logo-mark {
  width: 38px;
  height: 38px;
  flex: none;
  margin-right: 0.55rem;
}
.logo-footer { color: var(--bela); }
.logo .tld {
  opacity: 0.5;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
}

/* ---------- AV monogram ---------- */

/* A i V nose brend boje svuda gde se ime pojavljuje u tekstu.

   Razmak je NAMERNO prirodan — isti kao između ostalih slova u reči. Ranije je
   `A` bilo privučeno uz `V` da liči na monogram iz znaka, ali u tekstu to
   izgleda kao slovna greška: „ПодржАВам" mora da se čita kao jedna reč, a
   monogram svoj posao radi bojom, ne razmakom. */
.av .a { color: var(--crvena); }
.av .v { color: var(--plava); }

/* Footer je jedina tamna površina — tamo ide jednobojna bela verzija. */
.site-footer .av .a,
.site-footer .av .v { color: inherit; }

/* ---------- Header / navigacija (CSS-only, bez JS) ---------- */

/* Ovde staklo radi najuverljivije: sadržaj stvarno prolazi ispod headera. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: var(--staklo-blur);
  backdrop-filter: var(--staklo-blur);
  border-bottom: 1px solid rgba(230, 234, 242, 0.8);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  gap: 1rem;
  flex-wrap: wrap;
}
.nav-toggle { display: none; }
/* Burger je uokviren i pun — tri gola štrika mnogi ne prepoznaju kao dugme. */
.nav-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: var(--dodir);
  height: var(--dodir);
  border-radius: 14px;
  border: 1px solid rgba(9, 47, 135, 0.18);
  background: rgba(9, 47, 135, 0.05);
  cursor: pointer;
}
.nav-burger span {
  width: 24px;
  height: 3px;
  background: var(--plava-tamna);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}
.nav-toggle:checked ~ .nav-burger {
  background: var(--plava);
  border-color: var(--plava);
}
.nav-toggle:checked ~ .nav-burger span { background: var(--bela); }

.site-nav {
  display: none;
  flex-basis: 100%;
  flex-direction: column;
  gap: 0.25rem;
  padding-bottom: 0.85rem;
}
.nav-toggle:checked ~ .site-nav { display: flex; }
.nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
.nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Na telefonu su stavke menija pune, uokvirene trake visine --dodir: lakše se
   pogađaju i jasnije je da su dugmad, a ne samo tekst. */
.site-nav a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--dodir);
  color: var(--tekst);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.02rem;
  padding: 0.7rem 1rem;
  border-radius: 12px;
  background: rgba(9, 47, 135, 0.04);
  transition: color 0.18s, background 0.18s;
}
.site-nav a:hover { color: var(--plava); }
.site-nav a[aria-current="page"] { color: var(--plava-tamna); }
/* Aktivna stavka: kratka dvobojna crtica — zastava u malom. */
.site-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0.25rem;
  right: 0.25rem;
  bottom: 0.3rem;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--crvena) 50%, var(--plava) 50%);
}

/* prebacivač jezika */
.lang-switch {
  display: flex;
  gap: 0.2rem;
  margin-top: 0.6rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--ivica);
}
.lang-switch a {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0.4rem 0.6rem !important;
  border-radius: 8px;
  color: var(--tekst-blagi);
}
.lang-switch a::after { display: none !important; }
.lang-switch a[aria-current="true"] {
  color: var(--plava);
  background: rgba(9, 47, 135, 0.08);
}

@media (min-width: 760px) {
  .nav-burger { display: none; }
  .site-nav {
    display: flex;
    flex-basis: auto;
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
    padding-bottom: 0;
  }
  /* Na desktopu meni nije spisak dugmadi nego red linkova — podloga otpada. */
  .site-nav a {
    min-height: 0;
    padding: 0.55rem 0.85rem;
    background: transparent;
    color: var(--tekst-blagi);
    font-size: 0.96rem;
  }
  .site-nav a:hover { background: rgba(9, 47, 135, 0.05); }
  .site-nav a[aria-current="page"]::after { left: 0.85rem; right: 0.85rem; bottom: 0.15rem; }
  .lang-switch {
    margin-top: 0;
    margin-left: 0.75rem;
    padding-top: 0;
    border-top: none;
    border-left: 1px solid var(--ivica);
    padding-left: 0.85rem;
  }
  .logo { font-size: 1.3rem; }
  .logo-mark { width: 44px; height: 44px; }
}

/* ---------- Hero ---------- */

.hero {
  /* Gornji razmak je izdvojen u promenljivu jer o njemu zavisi i visina figura:
     ploča počinje tačno na toj udaljenosti od vrha hero-a, pa figura visoka
     `100% - taj razmak` ima vrh u ravni sa vrhom ploče. */
  --hero-pad-vrh: clamp(3rem, 8vw, 5rem);
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(520px, 78vh, 760px);
  padding: var(--hero-pad-vrh) 0 clamp(3.5rem, 9vw, 6rem);
  text-align: center;
  overflow: hidden;
}

/* Hero sekciju uokviruju dva različita motiva: LEVO silueta Srbije kao vodeni
   žig, DESNO fotografija. Nesimetrično je namerno — dve iste figure levo i
   desno su izgledale kao greška u kopiranju.

   Fotografija je WebP: sa providnošću daje 33 KB naspram 271 KB koliko bi
   tražio PNG. Na pregledačima starijim od 2020. se prosto ne pojavi, a raspored
   ostaje čitav. Razmena je svesna — korisnici su na telefonima i slabim vezama.
   Silueta je ravna dvobojna grafika, pa je tamo PNG sa paletom od 8 boja
   (31 KB) lakši i od WebP-a.

   Namerno DESKTOP-ONLY, i to tako što `background-image` stoji isključivo
   unutar media upita — telefon te fajlove nikada ne preuzme. Ispod 1180 px
   nema mesta pored ploče, pa bi se sudarali sa tekstom.

   `right/left: calc(50% + 330px)` drži unutrašnju ivicu na istom malom
   preklopu sa pločom na svakoj širini ekrana — preklop je namerno: staklo tek
   tada ima šta da zamuti. */
@media (min-width: 1180px) {
  /* Ploča se lepi za vrh hero-a umesto da se centrira. Bez toga bi na visokom
     ekranu `align-items: center` spustio ploču, a figure bi ostale gde jesu —
     poravnanje vrha glave sa vrhom ploče bi se raspalo. */
  .hero { align-items: flex-start; }

  .hero::before,
  .hero::after {
    content: "";
    position: absolute;
    /* Vrh im je u ravni sa vrhom ploče. Visinu određuje razmak top/bottom, a
       `aspect-ratio` iz nje računa širinu — tako `contain` popuni okvir tačno,
       bez praznog hoda koji bi glavu spustio niže. */
    top: var(--hero-pad-vrh);
    z-index: -1;
    width: auto;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
  }

  /* Levo: silueta Srbije, vodeni žig. */
  .hero::before {
    right: calc(50% + 300px);
    bottom: 10%;
    aspect-ratio: 385 / 560;
    background-image: url("../img/srbija.b442905234.png");
    background-position: center;
  }

  /* Desno: fotografija. Spoljna ivica sme malo da izađe iz kadra — figura tako
     deluje kao da ulazi u stranicu, umesto da stoji uredno uramljena. */
  .hero::after {
    left: calc(50% + 300px);
    bottom: 0;
    aspect-ratio: 416 / 622;
    opacity: var(--hero-figura, 1);
    background-image: url("../img/vucic-desno.26f1c514a2.webp");
    background-position: center bottom;
  }
}

/* ---------- Hero na telefonu ----------
   Zahtev: lik dominira prvim ekranom, ispod njega blok sa imenom i logotipom,
   i SVE mora da stane bez sečenja čim se uđe na sajt.

   Ključ je `svh` (small viewport height) umesto `vh`: `100vh` na telefonu meri
   ekran BEZ trake pregledača, pa bi dno bloka završilo ispod adresne trake.
   `100svh` meri stvarno vidljivi prostor, dakle najgori slučaj. Zbog toga se i
   sve unutrašnje mere skaliraju po VISINI ekrana, ne po širini — na niskom
   telefonu se ceo sklop srazmerno sabije umesto da ispadne iz kadra.

   `vh` varijante stoje prve kao rezerva za pregledače pre 2022.

   Silueta Srbije se ovde izostavlja — na uskom ekranu bi bila samo još jedan
   sloj koji odvlači pažnju. Fotografija je zasebna i lakša (26 KB); desktop
   verzije se nikada ne preuzimaju, jer stoje iza `min-width: 1180px` upita. */
@media (max-width: 1179px) {
  .hero {
    min-height: calc(100vh - 68px);
    min-height: calc(100svh - 68px);
    /* `stretch` umesto centriranja: sadržaj popunjava celu visinu ekrana, pa
       ploča može da legne na donju ivicu. */
    align-items: stretch;
    padding-top: clamp(0.25rem, 1.5svh, 1.25rem);
    padding-bottom: 0;
  }

  /* Raspodela visine prvog ekrana: ploča uzima onoliko koliko joj treba, a
     SLIKA GUTA SAV VIŠAK (`flex: 1`). Na višem telefonu lik je time veći, na
     nižem se sam sabije — bez ijednog dodatnog media upita. */
  .hero .container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  /* Lik: najveći pojedinačni element na ekranu. */
  .hero .container::before {
    content: "";
    display: block;
    /* Nova fotografija je skoro kvadratna (416x420) umesto uske, pa na istoj
       visini zauzima oko polovinu više širine — lik time dominira ekranom.
       Razmak ispod je pozitivan: blok sa logotipom stoji NIŽE, ne uvučen pod
       sliku kao ranije. */
    flex: 1 1 auto;
    min-height: 120px;
    margin-bottom: clamp(0.25rem, 1svh, 1rem);
    background: url("../img/vucic-mobilni.3812b4610f.webp") center bottom / contain no-repeat;
    opacity: var(--hero-figura, 1);
  }

  /* Ploča se sabija toliko da posle lika ostane u kadru. */
  .hero-panel {
    flex: 0 0 auto;
    padding: clamp(0.9rem, 2.2svh, 2rem) clamp(1rem, 4vw, 2rem) clamp(1.2rem, 3svh, 2.2rem);
    /* Donji uglovi su ravni jer ploča seda na ivicu ekrana — zaobljeni bi
       ostavili dva bela trougla i izgledali kao propust. */
    border-radius: 22px 22px 0 0;
    /* Zbijeniji prored — na telefonu je svaki red visine zlata vredan. */
    line-height: 1.45;
  }
  .hero-mark {
    width: clamp(44px, 6.8svh, 84px);
    margin-bottom: clamp(0.25rem, 0.8svh, 0.8rem);
  }
  .hero-brand { font-size: clamp(1.35rem, 5.4svh, 2.2rem); }
  .hero-tagline {
    margin-top: clamp(0.3rem, 0.8svh, 0.8rem);
    font-size: clamp(0.9rem, 1.95svh, 1.15rem);
    line-height: 1.35;
  }
  .hero-sub {
    margin-top: clamp(0.25rem, 0.75svh, 0.8rem);
    font-size: clamp(0.8rem, 1.6svh, 0.95rem);
    line-height: 1.4;
  }
  .hero-actions {
    margin-top: clamp(0.6rem, 1.5svh, 1.4rem);
    gap: clamp(0.4rem, 0.9svh, 0.8rem);
  }
  /* Dugmad preko cele širine — najlakši mogući cilj za prst. */
  .hero-actions .btn {
    width: 100%;
    min-height: var(--dodir);
    padding-block: 0.7rem;
  }
}

/* Ispod 900 px visine dugmad prelaze u jedan red. Manji su cilj nego preko
   cele širine, ali je to bolje nego dugme koje se ne vidi bez skrolovanja —
   a korisnik koji ne skroluje ne zna ni da postoji. */
@media (max-width: 1179px) and (max-height: 900px) {
  .hero-actions { flex-wrap: nowrap; }
  .hero-actions .btn {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 0.6rem;
    font-size: 0.86rem;
  }
}

/* Niski telefoni (iPhone SE i slični, ispod 700 px): još jedan stepen sabijanja. */
@media (max-width: 1179px) and (max-height: 700px) {
  .hero .container::before {
    height: clamp(110px, 20svh, 180px);
    margin-bottom: 0.15rem;
  }
  .hero-mark { width: clamp(44px, 6.4svh, 70px); margin-bottom: 0.25rem; }
  .hero-brand { font-size: clamp(1.3rem, 5.2svh, 1.9rem); }
  .hero-tagline { margin-top: 0.3rem; font-size: 0.9rem; line-height: 1.3; }
  .hero-sub { margin-top: 0.3rem; font-size: 0.76rem; line-height: 1.35; }
  .hero-actions { margin-top: 0.6rem; }
  .hero-panel { padding-block: 0.8rem 0.9rem; }
}

/* Vrlo niski ekrani (ispod 700 px): znak se sklanja iz bloka. Isti taj znak
   stoji u zaglavlju, tridesetak piksela iznad — dakle ne gubi se ništa, a
   dobija se pedesetak piksela. Bolje nego smanjivati tekst koji ljudi treba
   da pročitaju; korisnici su ionako slabovidi za sitan slog. */
@media (max-width: 1179px) and (max-height: 700px) {
  .hero-mark { display: none; }
  .hero .container::before { min-height: 90px; }
}

/* Staklena ploča sa sadrzajem — pluta nad portretom i oblacima. */
.hero-panel {
  position: relative;
  max-width: 780px;
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 3.2rem) clamp(1.25rem, 4vw, 3rem) clamp(2.2rem, 5vw, 3rem);
  border-radius: 28px;
  background: var(--staklo);
  -webkit-backdrop-filter: var(--staklo-blur);
  backdrop-filter: var(--staklo-blur);
  border: 1px solid var(--staklo-ivica);
  box-shadow: var(--senka-3);
}

.hero-mark {
  width: clamp(104px, 22vw, 148px);
  height: auto;
  margin: 0 auto clamp(1.1rem, 3vw, 1.6rem);
  filter: drop-shadow(0 12px 28px rgba(6, 33, 97, 0.18));
}

/* Brend je jedna neprelomljiva reč, a Montserrat je širok font. Donja granica
   clamp-a mora biti dovoljno mala da na 360 px stane u ploču — inače reč
   probije okvir, stranica dobije horizontalni preliv i burger ispadne iz kadra.
   `min-content` osigurava da se to ne desi ni ako se natpis kasnije produži. */
.hero-brand {
  font-size: clamp(1.5rem, 7.2vw, 4.4rem);
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.035em;
  line-height: 1.05;
  max-width: 100%;
  overflow-wrap: break-word;
}
.hero-brand .tld {
  opacity: 0.4;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  font-size: 0.5em;
}
.hero-tagline {
  font-size: clamp(1.05rem, 3vw, 1.45rem);
  font-weight: 600;
  color: var(--plava-tamna);
  margin-top: 1rem;
}
.hero-sub {
  max-width: 620px;
  margin: 0.9rem auto 0;
  /* Tamnije od --tekst-blagi, da izdrzi portret u pozadini (vidi .hero::after). */
  color: #46506a;
  font-size: clamp(0.95rem, 2.2vw, 1.08rem);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin-top: clamp(1.6rem, 4vw, 2.3rem);
}

/* ---------- Dugmad ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.8rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  min-height: 50px;
  line-height: 1.4;
  transition: transform 0.18s, box-shadow 0.18s, background 0.18s, color 0.18s;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: linear-gradient(140deg, var(--crvena-ziva), var(--crvena-tamna));
  color: var(--bela);
  box-shadow: 0 8px 24px rgba(231, 14, 18, 0.32);
}
.btn-primary:hover {
  box-shadow: 0 12px 32px rgba(231, 14, 18, 0.42);
  transform: translateY(-2px);
}
.btn-outline {
  background: var(--staklo-jako);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--plava);
  border: 2px solid rgba(9, 47, 135, 0.28);
}
.btn-outline:hover {
  background: var(--plava);
  color: var(--bela);
  border-color: var(--plava);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(9, 47, 135, 0.28);
}
.btn-ghost {
  background: transparent;
  color: var(--plava);
  border: 2px solid rgba(9, 47, 135, 0.2);
}
.btn-ghost:hover { border-color: var(--plava); }

/* ---------- Sekcije ---------- */

.section { padding: clamp(3.2rem, 7.5vw, 6rem) 0; }

/* Bela ploča preko oblaka — daje ritam bez tamnih blokova. */
.section-alt {
  position: relative;
  background: rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-block: 1px solid rgba(230, 234, 242, 0.9);
}

/* Bila tamna navy traka. Sada je svetla, plavo tonirana — brief traži belu
   dominantnu temu. Ime klase je zadržano jer se koristi u 18 HTML fajlova
   na tri jezika; menjanje imena bi znacilo diranje svih. */
.section-dark {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(40rem 26rem at 22% 12%, rgba(231, 14, 18, 0.10), transparent 62%),
    radial-gradient(44rem 30rem at 82% 88%, rgba(9, 47, 135, 0.16), transparent 62%),
    linear-gradient(165deg, #eef3fc 0%, #f7f9fd 62%, #fdf3f3 100%);
  border-block: 1px solid rgba(9, 47, 135, 0.10);
}
.section-dark .section-lead { color: var(--tekst-blagi); }
.section-dark .card p { color: var(--tekst-blagi); }

.section-title {
  font-size: clamp(1.7rem, 4.6vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  text-align: center;
}
.section-lead {
  max-width: 660px;
  margin: 1rem auto 0;
  text-align: center;
  color: var(--tekst-blagi);
  font-size: clamp(0.98rem, 2.2vw, 1.1rem);
}

/* ---------- Kartice ---------- */

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: clamp(2rem, 5vw, 3rem);
}
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .cards-3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  position: relative;
  background: var(--staklo);
  -webkit-backdrop-filter: var(--staklo-blur);
  backdrop-filter: var(--staklo-blur);
  border: 1px solid var(--staklo-ivica);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--senka-1);
  transition: transform 0.22s, box-shadow 0.22s;
}
/* Svetlosni odsjaj po gornjoj ivici — bez njega staklo izgleda kao obična
   poluprovidna površina. */
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95) 30%, rgba(255, 255, 255, 0.95) 70%, transparent);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--senka-2);
}
.card h3 {
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.card p { color: var(--tekst-blagi); font-size: 0.96rem; }

.card-icon {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 14px;
  background: linear-gradient(140deg, var(--plava), var(--plava-svetla));
  color: var(--bela);
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  box-shadow: 0 6px 16px rgba(9, 47, 135, 0.26);
}
/* Svaka treća kartica dobija crvenu pločicu — ritam zastave, bez preterivanja. */
.cards .card:nth-child(3n) .card-icon {
  background: linear-gradient(140deg, var(--crvena-ziva), var(--crvena-tamna));
  box-shadow: 0 6px 16px rgba(231, 14, 18, 0.26);
}

/* ---------- Koraci ---------- */

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: clamp(2.4rem, 5vw, 3.2rem);
  counter-reset: korak;
}
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }

.step {
  position: relative;
  background: var(--staklo);
  -webkit-backdrop-filter: var(--staklo-blur);
  backdrop-filter: var(--staklo-blur);
  border: 1px solid var(--staklo-ivica);
  border-radius: var(--radius);
  padding: 2.4rem 1.7rem 1.7rem;
  box-shadow: var(--senka-1);
  transition: transform 0.22s, box-shadow 0.22s;
}
.step:hover { transform: translateY(-4px); box-shadow: var(--senka-2); }
.step::before {
  /* Iznad trake trobojke. Bez ovoga bi je `::after` (traka) presekao popreko
     preko broja, jer se `::after` iscrtava posle `::before`. */
  z-index: 1;
  counter-increment: korak;
  content: counter(korak);
  position: absolute;
  top: -1.25rem;
  left: 1.5rem;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--crvena-ziva), var(--crvena-tamna));
  color: var(--bela);
  font-weight: 800;
  font-size: 1.05rem;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 20px rgba(231, 14, 18, 0.35);
  border: 3px solid rgba(255, 255, 255, 0.9);
}
/* Dvobojna traka po vrhu koraka. Bela treca traka bi se na beloj kartici
   izgubila, pa je ovde nosi sama kartica — isti potez koji vec koristi
   oznaka aktivne stavke u meniju. */
.step::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 auto 0;
  height: 5px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--dvobojka);
}

.step h3 { margin-bottom: 0.5rem; font-size: 1.1rem; font-weight: 800; }
.step p { color: var(--tekst-blagi); font-size: 0.95rem; }

/* ---------- Znacke i trake ---------- */

.badge {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.badge-uskoro {
  background: rgba(231, 14, 18, 0.1);
  color: var(--crvena-tamna);
  border: 1px solid rgba(231, 14, 18, 0.2);
}
.badge-plava {
  background: rgba(9, 47, 135, 0.09);
  color: var(--plava);
  border: 1px solid rgba(9, 47, 135, 0.18);
}

.notice {
  border-radius: var(--radius-s);
  padding: 1.15rem 1.4rem;
  margin: 1.6rem 0;
  font-size: 0.95rem;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.notice-draft {
  background: rgba(255, 247, 237, 0.8);
  border: 1px solid #fdba74;
  color: #9a3412;
  font-weight: 600;
}
.notice-info {
  background: rgba(9, 47, 135, 0.05);
  border: 1px solid rgba(9, 47, 135, 0.18);
  color: var(--plava);
}

/* ---------- Prose (tekstualne strane) ---------- */

.prose {
  max-width: 760px;
  margin-inline: auto;
}
.prose h1 {
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  letter-spacing: -0.025em;
  margin-bottom: 0.5rem;
}
.prose h2 { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.015em; margin: 2.4rem 0 0.7rem; }
.prose h3 { font-size: 1.1rem; margin: 1.7rem 0 0.45rem; }
.prose p, .prose li { color: var(--tekst-blagi); hyphens: auto; }
.prose p { margin-bottom: 0.95rem; }
.prose ul, .prose ol { padding-left: 1.4rem; margin-bottom: 0.95rem; }
.prose li { margin-bottom: 0.4rem; }
.prose strong { color: var(--tekst); }
.prose a { color: var(--plava-svetla); }

.page-head {
  position: relative;
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: var(--staklo-blur);
  backdrop-filter: var(--staklo-blur);
  border-bottom: 1px solid rgba(230, 234, 242, 0.9);
  padding: clamp(2.6rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem);
}
.page-head h1 {
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.12;
}
.page-head .badge { margin-bottom: 0.9rem; }
.page-head p { color: var(--tekst-blagi); margin-top: 0.7rem; max-width: 640px; }

/* ---------- Store bedzevi ---------- */

.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
  align-items: center;
  margin-top: 1.9rem;
}
/* Natpis ide u svoj red iznad bedževa — `flex-basis: 100%` prelama red. */
.store-uskoro {
  flex-basis: 100%;
  margin: 0 0 0.2rem;
  text-align: center;
  font-weight: 600;
  font-size: 1rem;
  color: var(--tekst-blagi);
}
/* Zvanični bedževi prodavnica. Namerno NISU linkovi — aplikacija još nije
   objavljena, a README traži da se linkovi ne aktiviraju dok pravna potvrda
   ne stigne (LEG-02/LEG-03). Kad dođe, `span` postaje `a` i ništa drugo se
   ne menja. */
.store-note {
  max-width: 480px;
  margin: 1rem auto 0;
  font-size: 0.85rem;
  color: var(--tekst-blagi);
}

.store-badge {
  display: block;
  line-height: 0;
}
.store-badge img {
  width: auto;
  height: clamp(46px, 12vw, 56px);
  border-radius: 9px;
  box-shadow: var(--senka-1);
}

/* Aktivno preuzimanje (.apk) — jedini živ bedž u redu, zato nosi akcionu crvenu.
   MORA stajati posle `.store-badge`: taj blok nosi `display: block` i
   `line-height: 0` (za slike prodavnica), što bi inače sravnilo ovaj tekstualni
   bedž u jedan nečitljiv red. */
.store-badge-apk {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  height: clamp(46px, 12vw, 56px);
  line-height: 1.2;
  background: var(--crvena);
  color: #fff;
  border-radius: 9px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(200, 35, 42, 0.3);
  transition: transform 0.15s, background 0.15s;
}
.store-badge-apk small {
  display: block;
  font-size: 0.7rem;
  opacity: 0.9;
  letter-spacing: 0.04em;
}
.store-badge-apk strong { display: block; font-size: 0.95rem; }
.store-badge-apk:hover { background: var(--crvena-tamna); transform: translateY(-2px); }
.store-badge-apk:active { transform: scale(0.97); }

/* ---------- Footer ---------- */

/* Jedina tamna površina na sajtu — sidro na dnu, u brend navy tonu.

   Preliv se polako pomera: navy -> nešto svetlija brend plava -> natrag u navy.
   Animira se `background-position`, ne same boje — pregledač tada pomera već
   iscrtanu površinu umesto da je ponovo računa u svakom kadru, pa je trošak
   zanemarljiv i na slabom telefonu.

   Ciklus je 22 s i namerno spor: futer treba da „diše", a ne da vuče pogled sa
   sadržaja. Korisnicima koji su isključili animacije preliv stoji mirno. */
.site-footer {
  position: relative;
  background: linear-gradient(
    120deg,
    #04173f 0%,
    var(--plava-tamna) 26%,
    #12459e 50%,
    var(--plava-tamna) 74%,
    #04173f 100%
  );
  background-size: 260% 260%;
  animation: futer-preliv 22s ease-in-out infinite;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 0;
}

/* Traka trobojke po gornjoj ivici futera. Ovde je jedino mesto na sajtu gde se
   zastava vidi cela — tamna podloga nosi i belu traku. */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  /* Visina = 3 x --traka-boje. Ako menjas debljinu, menjaj SAMO --traka-boje
     u :root — ovde se racuna sama. */
  height: calc(var(--traka-boje) * 3);
  background: var(--trobojka);
}

@keyframes futer-preliv {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.2rem;
  padding: 3.2rem 0 2.2rem;
}
@media (min-width: 760px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}
.footer-brand p { font-size: 0.92rem; margin-top: 0.8rem; max-width: 34ch; }
.logo-footer { font-size: 1.15rem; }
.footer-nav { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-nav h3 {
  color: var(--bela);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.4rem;
}
.footer-nav a {
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  font-size: 0.95rem;
  padding: 0.15rem 0;
  transition: color 0.18s;
}
.footer-nav a:hover { color: var(--bela); }
.footer-bottom {
  position: relative;
  padding: 1.3rem 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.45);
}
/* Divajder iznad reda sa autorskim pravima — obicna tanka bela linija.
   Trobojka stoji na vrhu futera; druga preko celog reda bi bila previse. */
.footer-bottom::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.16);
}

/* ---------- Pomocno ---------- */

.center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.section-cta { text-align: center; margin-top: clamp(2rem, 4vw, 2.8rem); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* Stariji Firefox i slabiji telefoni nemaju backdrop-filter. Bez ove rezerve
   kartice bi bile providne i tekst bi se mesao sa pozadinom. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header, .page-head { background: rgba(255, 255, 255, 0.97); }
  .card, .step, .hero-panel, .btn-outline { background: rgba(255, 255, 255, 0.94); }
  .section-alt { background: rgba(255, 255, 255, 0.9); }
}