/* 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);
}

/* Prag je 860 px, ne 760: peta stavka („Za aktiviste") sa prekidačem jezika i
   logotipom traži oko 1035 px, pa je između 760 i 840 px zaglavlje prelivalo u
   stranu — cela strana je dobijala bočni skrol. Ispod ovog praga meni ostaje
   burger, gde broj stavki ne igra ulogu. Podnožje ima svoj prag (760 px) i ne
   zavisi od ovoga. */
@media (min-width: 860px) {
  .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; }
  /* „Za aktiviste" nije sadržajna stavka kao ostale nego ulaz u drugi sistem,
     pa nosi okvir — vidi se da vodi napolje, a ne viče kao puno dugme. */
  .site-nav a.nav-aktivisti {
    margin-left: 0.35rem;
    border: 1px solid rgba(9, 47, 135, 0.25);
    border-radius: 999px;
    color: var(--plava);
  }
  .site-nav a.nav-aktivisti:hover {
    background: rgba(9, 47, 135, 0.07);
    border-color: var(--plava);
  }
  .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-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.

     Bočni razmak je 0.75rem umesto nasleđenih 1.8rem: dugme koje ionako drži
     celu širinu ne dobija ništa od širokog razmaka, a oduzima 34 px prostora
     natpisu. Sa 1.8rem se „Preuzmi aplikaciju" lomio u dva reda na 360 i
     375 px — dakle na najčešćim telefonima. */
  .hero-actions .btn {
    width: 100%;
    min-height: var(--dodir);
    padding-block: 0.7rem;
    padding-inline: 0.75rem;
    /* Poslednjih pola koraka za 320 px (iPhone SE prve generacije). */
    font-size: 0.95rem;
  }
  .hero-note {
    margin-top: clamp(0.4rem, 1svh, 1rem);
    font-size: clamp(0.7rem, 1.4svh, 0.85rem);
    line-height: 1.35;
  }
}

/* Poslednja odbrana, ispod 540 px visine: dugmad u jedan red. Manji su cilj i
   natpis se prelama u dva reda, ali je to bolje nego dugme koje se ne vidi bez
   skrolovanja — korisnik koji ne skroluje ne zna ni da postoji.

   Prag je bio 900 px, što je obuhvatalo SVAKI telefon (iPhone 14 ima 844,
   XR 896), pa je pravilo mišljeno za niske ekrane stiskalo glavnu akciju na
   svim uređajima: dugmad od 130–160 px sa natpisom prelomljenim u dva reda.
   Sa 540 px u jedan red padaju samo ekrani kojima to zaista treba, a svi
   pravi telefoni dobijaju dugmad preko cele širine i natpis u jednom redu. */
@media (max-width: 1179px) and (max-height: 540px) {
  .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-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-note { margin-top: 0.45rem; font-size: 0.7rem; line-height: 1.3; }
  .hero-panel { padding-block: 0.8rem 0.9rem; }
}

@media (max-width: 1179px) and (max-height: 700px) {
  .hero .container::before { min-height: 90px; }
}

/* Ispod 660 px visine napomena ispod dugmadi je izlazila iz kadra — falilo je
   28 px na 360x560, a na 320x480 nije stajalo ni samo dugme.

   Portret se ovde sklanja u celini, umesto da se svemu ostalom oduzima po par
   piksela. Krađa razmaka je davala jedva piksel rezerve i pucala na sledećem
   manjem ekranu; ovako ima šezdesetak piksela viška i na 320x480. Lik je
   ukras — dugme i napomena su ono zbog čega se na stranu dolazi. Oblaci i
   pozadina ostaju, pa hero ne postaje prazna bela ploča.

   Prag je podignut sa 600 na 660 px kad su dugmad prešla na punu širinu: dva
   dugmeta jedno ispod drugog traže pedesetak piksela više nego dva u redu, pa
   je 360x640 ostajao bez napomene. Granica je namerno tik ispod 667 — iPhone SE
   zadržava portret i i dalje ima 22 px rezerve. */
@media (max-width: 1179px) and (max-height: 660px) {
  .hero .container::before { display: none; }
  .hero-tagline { margin-top: 0.25rem; }
  .hero-sub { margin-top: 0.25rem; }
  .hero-actions { margin-top: 0.5rem; }
  .hero-note { margin-top: 0.35rem; }
  .hero-panel { padding-block: 0.7rem 0.8rem; }
}

/* 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);
}

/* Znak stoji na ploči SAMO na širokom ekranu, i to je jedina razlika između dva
   raspored hero-a.

   Iznad 1180 px portret stoji pored ploče i nadvisuje je: bez znaka je ploča
   ostajala niska, sa 80 px praznine iznad i 161 px ispod — visila je previsoko
   naspram lika. Znak joj vraća oko 174 px i vraća ravnotežu.

   Ispod te granice portret se seli IZNAD ploče, pa protivteža više nije
   potrebna — a znak postaje čisto ponavljanje onog iz zaglavlja, tridesetak
   piksela više u istom kadru. Tamo je skupo: uzima visinu koja na telefonu
   nedostaje dugmetu i napomeni.

   Skriveni `<img>` ne košta ništa: isti `logo.svg` već stoji u zaglavlju na
   svakoj strani, pa je fajl preuzet pre nego što se do ovog mesta dođe. */
.hero-mark { display: none; }

@media (min-width: 1180px) {
  .hero-mark {
    display: block;
    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);
}
/* Sitna napomena ispod dugmadi: šta se preuzima i gde su prodavnice. Stoji na
   staklenoj ploči, pa je boja tamnija od --tekst-blagi radi kontrasta. */
.hero-note {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: #414b60;
}
.hero-note a { color: inherit; }

/* ---------- 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); }

/* Glavna akcija sajta — preuzimanje aplikacije. Malo veće od ostalih dugmadi.
   Mora stajati POSLE `.btn` i `.btn-primary`: ista je specifičnost (0,1,0), pa
   odlučuje redosled u fajlu. Na uskim i niskim ekranima ga svesno pregazi
   `.hero-actions .btn` (0,2,0) — tamo dugmad ionako idu preko cele širine. */
.btn-hero {
  padding: 1rem 2.2rem;
  font-size: 1.08rem;
}

/* ---------- 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);
}

/* ---------- Asimetrična sekcija ----------

   Sve sekcije su bile istog oblika: naslov u sredini, uvod u sredini, mreža
   ispod — četiri puta zaredom na početnoj. Kad je svaka istog oblika, oko
   prestane da ih razlikuje i strana deluje kao popunjen obrazac.

   Ovde naslov stoji levo, uvod desno od njega, a mreža ide punom širinom
   ispod. Zaglavlje sekcije time postaje vodoravna traka umesto tornja u
   sredini, a kartice zadržavaju svu širinu koju imaju i u ostalim sekcijama.

   Probano je i uže: naslov u levoj koloni, kartice u desnoj. Odbačeno — tri
   kartice u 762 px daju 230 px po kartici, gde se tekst lomi na tri reči po
   redu. Široka kolona teksta vredi više od dramatičnijeg rasporeda.

   Namerno se primenjuje na PO JEDNU sekciju po strani. Da je dobiju sve,
   dobio bi se nov jednoličan ritam umesto starog.

   Prag je 1000 px, ne 900: između te dve vrednosti naslov početne strane lomi
   se u dva reda, a nemački „So ist die Gemeinschaft organisiert" u tri. Na
   telefonu i tabletu raspored ostaje isti kao do sada.

   Leva kolona je šira (1.3 : 1) jer nosi naslov u krupnom slogu, a desna samo
   jednu ili dve rečenice uvoda. Sa jednakim kolonama isti taj nemački naslov
   ostaje u tri reda i na 1000 px. */
@media (min-width: 1000px) {
  .section-split > .container {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-areas:
      "naslov  uvod"
      "sadrzaj sadrzaj";
    column-gap: clamp(2rem, 5vw, 4.5rem);
  }
  .section-split .section-title {
    grid-area: naslov;
    text-align: left;
    align-self: center;
  }
  .section-split .section-lead {
    grid-area: uvod;
    align-self: center;
    text-align: left;
    margin: 0;
    max-width: 46ch;
  }
  .section-split .cards,
  .section-split .steps { grid-area: sadrzaj; }
}

/* ---------- 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;
  /* Grid ćelija se podrazumevano NE skuplja ispod svog sadržaja (`min-width:
     auto`), pa jedna duga reč razvuče karticu preko kolone. Na nemačkoj strani
     o aplikaciji kartica je na 320 px bila 307 px široka u prostoru od 280, i
     cela strana je dobijala bočni skrol od 7 px. Nemački je pun složenica, ali
     isto važi i za srpski („preporučujemo", „obaveštenja") na užem ekranu. */
  min-width: 0;
  overflow-wrap: break-word;
  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;
  box-shadow: 0 6px 16px rgba(9, 47, 135, 0.26);
}
/* Crtež nasleđuje belu od pločice preko `currentColor`, kao ikonice u podnožju.
   22 px u pločici od 46 px ostavlja disk vazduha oko znaka — bez toga ikonica
   dodiruje zaobljene uglove i pločica izgleda pretrpano. */
.card-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}
/* 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 ---------- */

/* Preuzimanje APK-a je jedina stvar koju posetilac ovde MOŽE da uradi, pa nosi
   isto dugme kao glavna akcija u hero-u. Ranije je stajalo u istom redu sa
   bedževima prodavnica, u pola njihove veličine — pa je ono što radi izgledalo
   manje važno od onoga što još ne postoji. */
.download-cta {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}
/* Na uskom ekranu preko cele širine, sa istim skraćenim bočnim razmakom kao
   hero dugmad: natpis „Preuzmi za Android (.apk)" je duži od hero natpisa, pa
   se sa nasleđenih 1.8rem lomio u dva reda već na 360 px — a u engleskoj
   verziji i na 390 px. */
@media (max-width: 700px) {
  .download-cta { display: block; }
  .download-cta .btn {
    width: 100%;
    padding-inline: 0.75rem;
    font-size: 0.95rem;
  }
}

/* Bedževi prodavnica dolaze POSLE napomene o instalaciji, kao fusnota o
   budućnosti — ne kao ponuda ravnopravna preuzimanju.

   Same slike se ne diraju: smernice Google-a i Apple-a ne dozvoljavaju promenu
   boje ni oblika zvaničnih bedževa. Težina se smanjuje jedino visinom, koja
   jeste dozvoljena. */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: center;
  align-items: center;
  margin-top: 2.4rem;
}
/* Natpis ide u svoj red iznad bedževa — `flex-basis: 100%` prelama red. */
.store-uskoro {
  flex-basis: 100%;
  margin: 0 0 0.1rem;
  text-align: center;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  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(38px, 9vw, 44px);
  border-radius: 8px;
  box-shadow: var(--senka-1);
}

/* ---------- 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;
}
/* Kolona „Za aktiviste" je četvrta. Na 760 px sve četiri u red daju oko 150 px
   po koloni, gde se „Prijava na portal" prelama — zato se do 1040 px slažu
   dva po dva, a tek iznad idu u jedan red. */
@media (min-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1040px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.2fr; }
}
.footer-brand p { font-size: 0.92rem; margin-top: 0.8rem; max-width: 34ch; }

/* Dodirne mete su 44 px iako je sam znak 22 px — prst nije kursor, a ovo su
   jedine ikonice na sajtu koje se dodiruju. Razmak je negativan sleva da bi
   prvi znak stajao u ravni sa tekstom iznad, uprkos sopstvenom okviru. */
.footer-social {
  display: flex;
  gap: 0.25rem;
  margin: 1.1rem 0 0 -0.6rem;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.62);
  transition: color 0.18s, background 0.18s;
}
.footer-social a:hover,
.footer-social a:focus-visible {
  color: var(--bela);
  background: rgba(255, 255, 255, 0.1);
}
.footer-social svg { display: block; }
.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); }
}