/* ═══════════════════════════════════════════════════════════════════════
   DVORBA · dvorba.com — jedna strana, jedan skrol
   15. 8. 2026.

   Strana govori istim jezikom kao proizvod i brošura, i to doslovno: boje su
   iste vrednosti iz packages/tokens, pisma su iste datoteke koje server daje
   gostu (apps/server/pisma), a jedini ekran koji se vidi nije maketa nego
   snimka iz živog sistema.

   ── TRI PRAVILA KOJA DRŽE OVAJ LIST ────────────────────────────────────

   1. NEMA NIJEDNOG SPOLJNOG ZAHTEVA. Ni pisma, ni slike, ni skripte, ni
      merenja. Strana koja prodaje sistem u kome „gost ne skida aplikaciju i
      ne ostavlja karticu" ne sme svog posetioca predati trećem serveru pre
      nego što je pročitao prvu rečenicu. Kapija to i meri
      (tools/sajt-kapija.mjs).

   2. POKRET IMA UKUPAN BUDŽET. Svaka sekcija upliva JEDANPUT pri ulasku u
      vidno polje (6 px, 0,4 s), kuće se pretapaju 0,5 s. Ništa ne pulsira i
      ništa se ne ponavlja. Ko je u sistemu tražio manje pokreta, dobija
      gotova stanja odmah.

   3. TEKST JE PRE SLIKE. Odrednica u nebu stoji na pesku i bez scene: slika
      stiže posle nje i njeno kašnjenje se ne vidi. Zato hero ima boju
      podloge, a ne prazninu.

   ── ZAŠTO NEMA NIJEDNOG OKVIRA ─────────────────────────────────────────
   Na celoj strani nema nijedne kartice sa senkom osim jedne — izveštaja za
   vlasnika, koji JESTE kartica u proizvodu. Hijerarhiju nose pismo, praznina
   i jedna vlas, isto kao na papiru. Isto pravilo je brošuru s ploha vratilo
   na tekst (brosura.css, „premium prolaz").
   ═══════════════════════════════════════════════════════════════════════ */

/* ── pisma ──────────────────────────────────────────────────────────────
   Iste datoteke koje server daje gostu i panelu, i ista dva Garamonda koja
   nosi naslovnica brošure. Poreklo i licence stoje u site/pisma/PODRIJETLO.txt.

   ── ZAŠTO DVA GARAMONDA, A NE JEDAN ────────────────────────────────────
   Kompozicija traži Cormorant Garamond. Cormorant je izmeren i ne može da
   nosi srpski tekst: njegov kvačica na ž, š, č i ć stoji odvojeno, visoko
   iznad slova, pa „usluživanje; pažnja pre nego što je gost zatraži." — sam
   prvi red strane — izgleda kao slovo i mrlja iznad njega. To nije stvar
   ukusa: EB Garamond istu rečenicu iscrtava sa priljubljenim kvačicama, a
   brošura je zbog toga istu podelu napravila još 15. 8.
   (design/pisma/PODRIJETLO.txt).

   Zato:
     Cormorant kurziv  nosi TAČNO JEDNU reč — „dvorba" u odrednici. U njoj
                       nema nijednog dijakritika, a njen kurziv je potpis
                       naslovnice brošure i najlepše slovo koje brend ima.
     Cormorant 400–500 nosi BROJKE (142, 11,40 €, 9 min, 99 €, 29 €). I one
                       su bez dijakritika, pa mana ne može da se pojavi.
     EB Garamond 400   nosi sav ostali naslovni tekst — definiciju, priču o
                       reči, glagole, tvrdnje i poziv.
   Pravilo je jedno i proverljivo: Cormorant stoji samo tamo gde nema
   nijednog dijakritika.

   Rasponi znakova su Googleovi, doslovno. Podela na `latin` i `latin-ext`
   nije uredna sitnica nego mera: pregledač povlači samo onaj raspon u kome
   ima slova koja crta. Zato Forum i Cormorant nikad ne otputuju u `latin-ext`
   izdanju — DVORBA i brojke su čista latinica — a EB Garamond hoće, jer u
   definiciji stoje „usluživanje", „pažnja" i „zatraži".

   `font-display` je namerno različit po ulozi:
     block  za oba Garamonda i Forum — oni nose naslove. Zamena u letu na
            reči od 76 px se vidi kao trzaj celog kadra, a najavljeni su
            (`preload`), pa je čekanje kratko.
     swap   za Jost i Alegreyu — sitan tekst; njihova zamena se ne primeti,
            a blokiranje bi zadržalo rečenice koje se već mogu čitati. */

@font-face{font-family:Forum;font-style:normal;font-weight:400;font-display:block;
  src:url(pisma/forum-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Forum;font-style:normal;font-weight:400;font-display:block;
  src:url(pisma/forum-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* EB Garamond — GLAS STRANE. Statični rez 400; promenljivo izdanje istog
   pisma nosi raspon 400–900, ali u `latin-ext` teži 114 kB umesto 57, a
   deblji rez ovoj strani nigde ne treba. */
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:block;
  src:url(pisma/eb-garamond-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:block;
  src:url(pisma/eb-garamond-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Kurziv je vlastita datoteka, a ne nakošeni uspravni rez. Na Garamondu se
   sintetički kurziv vidi na prvo gledanje. */
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:block;
  src:url(pisma/eb-garamond-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:block;
  src:url(pisma/eb-garamond-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Cormorant Garamond — SAMO BROJKE. Uspravni rez nosi raspon 400–500 u
   jednoj datoteci (promenljivo pismo), pa se 500 dobija bez druge datoteke.
   `latin-ext` izdanje se ovde nikad ne povuče — u brojkama nema dijakritika —
   ali se navodi, jer je raspon deo lica, a ne popis onoga što danas piše. */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400 500;font-display:block;
  src:url(pisma/cormorant-garamond-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400 500;font-display:block;
  src:url(pisma/cormorant-garamond-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Cormorant kurziv — SAMO reč „dvorba". Potpis naslovnice brošure. */
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:block;
  src:url(pisma/cormorant-garamond-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:block;
  src:url(pisma/cormorant-garamond-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:Jost;font-style:normal;font-weight:400 500;font-display:swap;
  src:url(pisma/jost-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Jost;font-style:normal;font-weight:400 500;font-display:swap;
  src:url(pisma/jost-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url(pisma/alegreya-sans-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url(pisma/alegreya-sans-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ── vrednosti ──────────────────────────────────────────────────────────
   Iste brojke kao packages/tokens/src/boja.ts i design/brosura.css. Ništa se
   ovde ne izmišlja: strana koja prodaje proizvod mora biti iste boje. */
:root{
  --pesak:#F2EBDC;      /* papir */
  --pesak-2:#EAE1CE;
  --kartica:#FBF7EE;    /* svetlija ploha: kuće, cena, izveštaj */
  --tinta:#0A2124;      /* tekst i tamna sekcija */
  --tinta-2:#3D5457;    /* pratnja uz naslove */
  --tiho:#6B5E42;       /* natpisi uz brojke */
  --crta:#D6C9AE;
  --crta-2:#BFAE8C;
  --more:#00706B;       /* znak, aktivno stanje */
  --more-t:#00514E;     /* nadnaslovi */
  --znak-tamno:#4FA79B; /* tačka na tamnoj plohi */
  --tamno-tiho:#93A9A6;

  /* Pisma po ulozi. `--disp` i `--text` nose ta imena zato što ih kapija
     čita baš tako (tools/review.mjs, provera „koja su pisma stvarno tu"). */
  --disp:'EB Garamond',Georgia,'Times New Roman',serif;   /* sav naslovni tekst */
  --broj:'Cormorant Garamond','EB Garamond',Georgia,serif; /* samo brojke */
  --rec:'Cormorant Garamond','EB Garamond',Georgia,serif;  /* samo reč „dvorba" */
  --text:'Alegreya Sans',Optima,Candara,'Segoe UI',sans-serif;
  --natpis:Jost,Futura,'Century Gothic',sans-serif;
  --logo:Forum,'EB Garamond',Georgia,serif;

  /* Okvir sadržaja. `max()` daje tačno 96 px sa strane na 1440 px — meru iz
     kompozicije — a na užem ekranu se sažima do 48, pa do 24 na telefonu. */
  --okvir:1248px;
  --rub:max(48px, (100% - var(--okvir)) / 2);
}

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

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--pesak);
  color:var(--tinta);
  font-family:var(--text);
  font-size:18px;
  line-height:1.62;
  /* Slova na svetlom pesku bez ovoga na Macu izgledaju deblje nego što jesu. */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%}

h1,h2{font-weight:400;margin:0}
p{margin:0}

a{color:inherit}

/* Fokus se VIDI, i to na obe plohe. Bez ovoga bi tastatura kroz pilule kuća
   prolazila naslepo — a to je jedino mesto na strani gde se nešto bira. */
:focus-visible{outline:2px solid var(--more);outline-offset:3px;border-radius:2px}
.poziv :focus-visible{outline-color:var(--znak-tamno)}

/* ── logotip ────────────────────────────────────────────────────────────
   Isti oblik kao u proizvodu (packages/tokens/src/logotip.ts): Forum, verzal
   kroz `text-transform` (u dokumentu piše „Dvorba", pa čitač ekrana pročita
   reč, a ne slovka skraćenicu), razmak .3em i negativna margina koja višak
   iza poslednjeg slova oduzima. */
.logotip{
  font-family:var(--logo);
  font-weight:400;
  font-size:20px;
  text-transform:uppercase;
  letter-spacing:.3em;
  margin-right:-.3em;
}
.logotip .tacka{margin-left:-.3em;color:var(--more)}

/* ── nadnaslov ──────────────────────────────────────────────────────────
   Jedan zvuk pre naslova. Nikad krupniji od 13 px i nikad druge boje. */
.nadnaslov{
  font-family:var(--natpis);
  font-size:13px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--more-t);
  line-height:1.4;
}

/* Vlas — jedina crta na strani. Ne razdvaja plohe nego misli. */
.vlas{width:64px;height:1px;border:0;background:var(--tinta);margin:0}

/* ═══ 1 · ODREDNICA ═══════════════════════════════════════════════════ */

/* ── ZAŠTO JE NASLOVNICA PLAKAT, A NE RASPORED ──────────────────────────
   Kompozicija je zaključana na 1440 px: odrednica je 480 px široka, stoji 84
   od vrha i 96 od desne ivice, a slika je visoka 900. Sve to zajedno drži
   JEDNA stvar — reč „zatraži." staje tačno iznad linije krošnji.

   Kad se prozor suzi, a mere teksta ostanu iste, slika se pod njim skuplja i
   krošnje se penju: na 1366 px poslednji red definicije padne na pergolu i
   kontrast se sruši sa 10,75 : 1 na 2,67 : 1. Mereno, ne procenjeno
   (tools/sajt-kapija.mjs).

   Zato se naslovnica ne prelama nego SRAZMERNO SMANJUJE, kao plakat: visina
   kadra prati širinu, a sve mere odrednice su izražene u `em` jedne osnovne
   mere. Odnos teksta i slike time ostaje isti na svakoj širini — i kontrast
   s njim. Ispod 900 px plakat više nema smisla (definicija bi pala na 19 px),
   pa naslovnica prelazi na svoju drugu kompoziciju: tekst na pesku, slika
   ispod njega. */
.odrednica-kadar{
  position:relative;
  /* 900 px na 1440 i naviše; ispod toga visina prati širinu slike (3:2), pa
     se kadar ne useca nego smanjuje. */
  height:min(66.67vw, 900px);
  overflow:hidden;
  /* Boja podloge, a ne praznina: dok scena stiže, odrednica već stoji na
     pesku i kadar izgleda gotov. */
  background:var(--pesak);
}

.odrednica-kadar .scena{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  /* Kadar se drži GORNJEG ruba slike. Na sredini bi se na svakoj širini
     odsecalo drugačije, pa bi se vrhovi drveća na desnoj strani penjali pod
     poslednji red definicije — a tekst preko krošnji je jedino mesto na
     strani gde čitljivost ne piše u ovom listu. */
  object-position:50% 0;
}

/* PREKO SLIKE NEMA NIKAKVOG ZASTORA — i to je merena odluka, ne hrabrost.
   Dok se odrednica nije smanjivala zajedno sa slikom, definicija je na užim
   ekranima padala na pergolu, pa je u gornjem desnom uglu stajao blagi
   peščani preliv da to popravi. Otkad je naslovnica plakat, preliv više ništa
   ne popravlja: najgori pisani piksel je i bez njega na 5,15 : 1 (kapija meri
   svih šest širina). A slika bez njega zadržava svoje zlatno veče — preliv je
   nebo vukao ka pesku i sliku činio bleđom nego što jeste. */

/* Osnovna mera plakata: 100 px na 1440 px širine. Sve ispod nje je izraženo
   u `em`, pa se cela odrednica smanjuje u jednom komadu — kao što se i mora,
   jer je i slika pod njom jedan komad. */
.odrednica{
  position:absolute;
  font-size:min(6.944vw, 100px);
  line-height:1;
  top:.84em;     /* 84 px na 1440 */
  right:.96em;   /* 96 px na 1440 */
  width:4.8em;   /* 480 px na 1440 */
  text-align:right;
}

.odrednica .logotip{display:block;font-size:.2em;margin-bottom:2.8em}

.odrednica h1{
  font-family:var(--disp);
  font-size:.76em;
  line-height:1.02;
  letter-spacing:-.005em;
}
/* Jedina reč na strani u Cormorantu — i jedina reč koja je i sama predmet
   strane. U njoj nema dijakritika, pa Cormorantova mana ne može da se javi. */
.odrednica h1 em{font-family:var(--rec);font-style:italic}
/* Oznaka roda je odrednička sitnica, ne drugi naslov: manja mera, ista
   osnovna linija. 40 od 76. */
.odrednica h1 .rod{font-size:.5263em}

.odrednica .postanak{
  font-family:var(--disp);
  font-style:italic;
  font-size:.24em;
  line-height:1.3;
  color:var(--tinta-2);
  margin-top:.583em;
}

.odrednica .vlas{width:.64em;margin:.3em 0 .3em auto}

.odrednica .definicija{
  font-family:var(--disp);
  font-size:.34em;
  line-height:1.35;
}

/* ═══ 2 · PRIČA O REČI ════════════════════════════════════════════════ */

.prica{
  padding:140px var(--rub);
  text-align:center;
}
.prica .nadnaslov{margin-bottom:40px}
.prica .recenice{
  font-family:var(--disp);
  font-size:44px;
  line-height:1.4;
  max-width:16em;
  margin-inline:auto;
  /* Reč se prelama tako da nijedan red ne ostane sam. */
  text-wrap:balance;
}
.prica .recenice em{font-style:italic}

/* ═══ 3 · GOSTOV PUT ══════════════════════════════════════════════════ */

.put{padding:0 var(--rub) 130px;text-align:center}
.put .nadnaslov{margin-bottom:64px}

.koraci{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:72px;
}
.korak{margin:0}
.korak figcaption{
  font-family:var(--disp);
  font-size:30px;
  line-height:1.2;
  margin-top:28px;
}

/* ── telefon ────────────────────────────────────────────────────────────
   Isti jezik kao u brošuri (brosura.css, `.tel .ekr`): tinta kao okvir, tanak
   rub i jedan zaobljen ekran. Uređaj se ne crta detaljnije od toga — nije on
   ono što se prodaje. */
.telefon{
  background:var(--tinta);
  border-radius:30px;
  padding:7px;
  box-shadow:0 18px 40px -24px rgba(10,33,36,.55);
}
.telefon .ekran{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  background:var(--pesak);
}
.telefon .ekran img{display:block;width:100%;height:auto}

.telefon--bocni{width:236px}
.telefon--sredisnji{width:300px}
/* Bočni ekrani su crteži, pa im visinu drži isti odnos kao snimci. */
.telefon--bocni .ekran{aspect-ratio:660 / 1230}

/* QR — tamna pločica, nalepnica na njoj, oznaka mesta ispod.
   Selektor je namerno dvočlan (`.telefon .ekran--qr`): jednočlan bi izgubio
   od pravila `.telefon .ekran`, pa bi pločica ostala peščana, a oznaka A-01
   je pisana pijeskom — nestala bi bez traga u mreži i u pregledu. */
.telefon .ekran--qr{
  background:var(--tinta);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.ekran--qr .qr{
  width:150px;
  height:150px;
  border-radius:6px;
  /* Nalepnica ima svoj rub od peska; bez njega bi tihi rub koda pao u tintu
     i čitač ne bi našao granicu. */
  background:var(--pesak);
}
.ekran--qr .qr-oznaka{
  font-family:var(--natpis);
  font-size:38px;
  letter-spacing:.04em;
  color:var(--pesak);
  line-height:1;
  margin-top:32px;
}
.ekran--qr .qr-mesto{
  font-family:var(--text);
  font-size:15px;
  color:var(--tamno-tiho);
  line-height:1;
  margin-top:12px;
}

/* Potvrda — disk, kvačica, koraci. Isti redosled i iste reči kao na pravom
   ekranu (design/snimke-luxury-sr/put-2-potvrda.png); ovde je samo skinuto
   sve što nije taj jedan trenutak. */
.ekran--potvrda{
  padding:28px 24px;
  text-align:left;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:20px;
}
.ekran--potvrda .disk{
  width:54px;
  height:54px;
  border-radius:50%;
  background:var(--more);
  color:#FFFDF8;
  display:grid;
  place-items:center;
}
.ekran--potvrda .disk svg{width:28px;height:28px;display:block}
.ekran--potvrda .potvrda-naslov{
  font-family:var(--text);
  font-weight:400;
  font-size:21px;
  line-height:1.25;
  color:var(--tinta);
}
.stepenice{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.stepenice li{
  position:relative;
  padding-left:28px;
  font-size:16px;
  line-height:1.25;
  color:var(--tinta-2);
}
.stepenice li span{
  display:block;
  font-size:14px;
  color:var(--tiho);
  margin-top:2px;
}
.stepenice li::before{
  content:'';
  position:absolute;
  left:0;
  top:.24em;
  width:14px;
  height:14px;
  border-radius:50%;
  border:1.5px solid var(--crta-2);
}
.stepenice li.sad{color:var(--more-t)}
.stepenice li.sad::before{background:var(--more);border-color:var(--more)}

/* ═══ 4 · ČETIRI KUĆE ═════════════════════════════════════════════════ */

.kuce{background:var(--kartica);padding:130px var(--rub)}
.kuce-red{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:96px;
}
.kuce-tekst{max-width:560px}
.kuce-tekst .nadnaslov{margin-bottom:26px}
.kuce-tekst h2{
  font-family:var(--disp);
  font-size:54px;
  line-height:1.14;
  max-width:11em;
}
.kuce-tekst .uvod{
  color:var(--tinta-2);
  font-size:19px;
  margin-top:26px;
  max-width:30em;
}

.pilule{display:flex;flex-wrap:wrap;gap:12px;margin-top:44px}
.pilula{
  font-family:var(--natpis);
  font-size:15px;
  letter-spacing:.04em;
  color:var(--tinta);
  background:transparent;
  border:1px solid var(--crta-2);
  border-radius:999px;
  /* Meta za prst je 48 px visoka i onda kad slovo traži 20: ovo je jedino
     mesto na strani gde se nešto bira, i bira se palcem. */
  min-height:48px;
  padding:0 22px;
  cursor:pointer;
  transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}
.pilula:hover{border-color:var(--tinta)}
.pilula[aria-selected='true']{
  background:var(--tinta);
  border-color:var(--tinta);
  color:var(--pesak);
}

.kuce-telefon{flex:0 0 auto}
.telefon--kuca{width:330px}
.telefon--kuca .ekran{aspect-ratio:660 / 1230}
/* Četiri kadra stoje jedan preko drugog; menja se samo prozirnost, pa se
   raspored ne pomera ni za piksel dok se kuće smenjuju. */
.kadar-kuce{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  transition:opacity .5s ease;
}
.kadar-kuce.jeste{opacity:1}

/* ═══ 5 · ZA VLASNIKA ═════════════════════════════════════════════════ */

.vlasnik{padding:130px var(--rub)}
.vlasnik-red{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:96px;
}
.tvrdnje{max-width:520px}
.tvrdnje .nadnaslov{margin-bottom:40px}
.tvrdnja + .tvrdnja{margin-top:42px}
.tvrdnja h2{
  font-family:var(--disp);
  font-size:32px;
  line-height:1.2;
}
.tvrdnja p{
  color:var(--tinta-2);
  font-size:18px;
  margin-top:8px;
  max-width:32em;
}

/* Jedina kartica na strani — zato što izveštaj JESTE kartica u proizvodu. */
.izvestaj{
  flex:0 0 auto;
  width:560px;
  margin:0;
  background:var(--kartica);
  border:1px solid var(--crta);
  border-radius:6px;
  padding:36px 40px 32px;
  box-shadow:0 24px 48px -34px rgba(10,33,36,.45);
}
.izvestaj figcaption{
  font-family:var(--natpis);
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--tiho);
}
.brojke{display:flex;gap:44px;margin:26px 0 0}
.brojke div{margin:0}
.brojke dt{
  font-family:var(--broj);
  font-weight:500;
  font-size:52px;
  line-height:1.05;
  /* Brojke u tabeli moraju stajati u koloni, ne plesati po širini cifre. */
  font-variant-numeric:lining-nums tabular-nums;
}
.brojke dd{
  margin:6px 0 0;
  font-size:15px;
  line-height:1.35;
  color:var(--tiho);
}

/* Tihi stubići: promet po satu, bez ijedne legende i bez ijedne ose. Oni
   nisu podatak nego ritam dana — brojke iznad su podatak. */
.stubici{
  display:flex;
  align-items:flex-end;
  gap:10px;
  height:96px;
  margin-top:34px;
}
.stubici span{flex:1;background:var(--crta);border-radius:2px 2px 0 0}
.stubici span.jak{background:var(--more)}
/* Sedam visina, sedam sati. Nisu nasumične — to je oblik dana na plaži:
   jutro tiho, podne puno, popodne pada, veče ponovo raste. */
.stubici span:nth-child(1){height:34%}
.stubici span:nth-child(2){height:52%}
.stubici span:nth-child(3){height:71%}
.stubici span:nth-child(4){height:46%}
.stubici span:nth-child(5){height:88%}
.stubici span:nth-child(6){height:63%}
.stubici span:nth-child(7){height:41%}

/* ═══ 6 · CENA ════════════════════════════════════════════════════════ */

.cena{background:var(--kartica);padding:130px var(--rub);text-align:center}
.cena .nadnaslov{margin-bottom:56px}

.stavke{
  display:flex;
  justify-content:center;
  align-items:stretch;
  margin:0;
}
.stavka{
  padding:0 56px;
  /* Uspravne vlasi razdvajaju tri broja; prva ih nema jer se ne razdvaja od
     ničega. Ovo je jedini raspored na strani u kome crta nosi značenje. */
  border-left:1px solid var(--crta);
}
.stavka:first-child{border-left:0}
.stavka dt{
  font-family:var(--broj);
  font-weight:500;
  font-size:64px;
  line-height:1.05;
  font-variant-numeric:lining-nums;
}
.stavka dd{
  margin:10px 0 0;
  font-size:16px;
  color:var(--tinta-2);
}

.cena .vlas--siroka{width:96px;margin:64px auto 40px}

.cena .nema-uvod{
  font-family:var(--disp);
  font-style:italic;
  font-size:24px;
  color:var(--tiho);
}
.cena .nema{
  font-size:17px;
  line-height:1.7;
  color:var(--tinta-2);
  max-width:44em;
  margin:14px auto 0;
  text-wrap:balance;
}

/* ═══ 7 · POZIV ═══════════════════════════════════════════════════════
   Jedina tamna ploha. Ona je kraj, a ne isticanje: strana se zatvara kao što
   se zatvara večer. */

.poziv{
  background:var(--tinta);
  color:var(--pesak);
  padding:126px var(--rub) 84px;
  text-align:center;
}
.poziv h2{
  font-family:var(--disp);
  font-style:italic;
  font-size:56px;
  line-height:1.15;
}
.poziv .kontakt{
  margin-top:38px;
  font-size:19px;
  letter-spacing:.01em;
}
.poziv .kontakt a{
  text-decoration:none;
  border-bottom:1px solid rgba(242,235,220,.32);
  padding-bottom:2px;
  transition:border-color .25s ease;
}
.poziv .kontakt a:hover{border-bottom-color:var(--pesak)}
.poziv .kontakt .tacka-razdvoj{margin:0 14px;color:var(--tamno-tiho)}
.poziv .kontakt .broj{white-space:nowrap}

.dugme-red{margin-top:52px}
.dugme{
  display:inline-block;
  background:var(--pesak);
  color:var(--tinta);
  text-decoration:none;
  font-family:var(--natpis);
  font-size:16px;
  letter-spacing:.06em;
  /* 58 px visine: dugme koje je jedina radnja na strani ne sme se promašiti. */
  padding:19px 40px;
  border-radius:999px;
  transition:background-color .25s ease;
}
.dugme:hover{background:#FFFDF8}

.poziv footer{
  margin-top:96px;
  padding-top:30px;
  border-top:1px solid rgba(242,235,220,.14);
  font-size:15px;
  color:var(--tamno-tiho);
}
.logotip--dno{font-size:15px;color:var(--pesak)}
/* Na tamnoj plohi znak svetli — isti obrazac kao u proizvodu (ZNAK_TAMNO). */
.logotip--dno .tacka{color:var(--znak-tamno)}
.poziv footer .razdvoj{margin:0 10px}

/* ═══ POKRET ══════════════════════════════════════════════════════════
   Sekcija upliva JEDANPUT, pri ulasku u vidno polje. Stanje čekanja postoji
   samo ako je skripta stigla (`.ima-js`) — inače bi strana bez skripte
   ostala prazna, a to je gora greška od strane bez pokreta.

   ── ZAŠTO SE POMERA SADRŽAJ, A NE SAMA SEKCIJA ─────────────────────────
   Pomak od 6 px na SEKCIJI pomera i njenu plohu, pa poslednja sekcija —
   tamna — dok upliva viri 6 px ispod dna strane. To nije sitnica koja se ne
   vidi: ispod nje se za te 4 desetinke sekunde ukaže pesak, a strana naraste
   za 6 px (nalaz kapije, „prelijevanje iz okvira: section.poziv +6px").

   Ovako se pomera samo sadržaj, unutar postojećeg unutrašnjeg razmaka
   sekcije. Ploha stoji mirno od prvog trenutka, ništa ne viri, a pokret je
   isti — čak i tačniji: podiže se ono što se čita, a ne pozadina. */

.ima-js .upliv > *{opacity:0;transform:translateY(6px)}
.ima-js .upliv.vidljiv > *{
  opacity:1;
  transform:none;
  transition:opacity .4s ease-out, transform .4s ease-out;
}

/* ═══ MOBILNI — SVOJA KOMPOZICIJA ═════════════════════════════════════
   Ovo nije stisnut stoni raspored. Odrednica ide IZNAD slike, na pesak, i
   centrira se; slika postaje traka od 300 px ispod nje. Razlog je merljiv:
   na 390 px reč od 76 px preko neba ostavlja definiciji krošnje i balustradu,
   pa bi jedini način da se održi 4,5:1 bio zastor preko cele slike — a tada
   slike više ni nema. */

@media (max-width:1180px){
  .kuce-red,.vlasnik-red{gap:56px}
  .kuce-tekst h2{font-size:46px}
  .izvestaj{width:480px;padding:32px}
  .brojke{gap:32px}
  .brojke dt{font-size:44px}
  .koraci{gap:44px}
  .stavka{padding:0 36px}
}

@media (max-width:900px){
  .kuce-red,.vlasnik-red{flex-direction:column;align-items:flex-start;gap:64px}
  .kuce-telefon{align-self:center}
  .izvestaj{width:100%;max-width:560px;align-self:center}
  .koraci{flex-wrap:wrap;gap:40px 32px}
  .stavke{flex-direction:column;gap:48px}
  .stavka{border-left:0;padding:0}
}

/* ── DRUGA KOMPOZICIJA NASLOVNICE (ispod 900 px) ────────────────────────
   Ovo nije stisnut stoni raspored nego svoja kompozicija: odrednica ide IZNAD
   slike, na pesak, i centrira se; slika postaje traka ispod nje. Razlog je
   merljiv: da plakat nastavi da se smanjuje, definicija bi na 390 px imala
   18 px i reč koja je ceo brend čitala bi se kao fusnota. A da ostane velika
   preko slike, poslednji red bi pao na krošnje — 1,71 : 1 na 760 px, mereno.
   Ovako preko slike ne stoji nijedno slovo, pa nema šta ni da se meri. */
@media (max-width:899px){
  .odrednica-kadar{
    height:auto;
    display:flex;
    flex-direction:column;
    overflow:visible;
  }
  .odrednica-kadar picture{order:2;display:block}
  .odrednica-kadar .scena{
    position:static;
    width:100%;
    height:clamp(300px, 40vw, 380px);
    object-position:42% 38%;
  }
  .odrednica{
    order:1;
    position:static;
    font-size:16px;
    width:auto;
    text-align:center;
    padding:clamp(64px, 15vw, 88px) var(--rub) clamp(56px, 13vw, 76px);
  }
  .odrednica .logotip{font-size:clamp(17px, 4.6vw, 20px);margin-bottom:clamp(40px, 11vw, 56px)}
  .odrednica h1{font-size:clamp(50px, 13.5vw, 64px)}
  .odrednica .postanak{font-size:clamp(19px, 5.2vw, 24px);margin-top:.58em}
  .odrednica .vlas{width:64px;margin:clamp(24px, 6vw, 32px) auto}
  .odrednica .definicija{font-size:clamp(25px, 6.8vw, 32px);line-height:1.4}
}

@media (max-width:720px){
  :root{--rub:24px}

  body{font-size:17px}

  .prica{padding:80px var(--rub)}
  .prica .nadnaslov{margin-bottom:28px}
  .prica .recenice{font-size:27px;line-height:1.45;max-width:none}

  .put{padding:0 var(--rub) 80px}
  .put .nadnaslov{margin-bottom:44px}
  .koraci{flex-direction:column;align-items:center;gap:52px}
  .telefon--bocni,.telefon--sredisnji{width:260px}
  .korak figcaption{font-size:26px;margin-top:20px}

  .kuce,.vlasnik,.cena{padding:80px var(--rub)}
  .kuce-tekst h2{font-size:38px;max-width:none}
  .kuce-tekst .uvod{font-size:17px}
  .pilule{margin-top:36px}
  .telefon--kuca{width:280px}

  .tvrdnja + .tvrdnja{margin-top:34px}
  .tvrdnja h2{font-size:27px}
  .tvrdnja p{font-size:17px}
  .izvestaj{padding:28px 24px}
  .brojke{flex-direction:column;gap:24px}
  .brojke dt{font-size:42px}
  .stubici{height:76px}

  .cena .nadnaslov{margin-bottom:44px}
  .stavka dt{font-size:52px}
  .cena .vlas--siroka{margin:52px auto 32px}
  .cena .nema-uvod{font-size:21px}
  .cena .nema{font-size:16px}

  .poziv{padding:88px var(--rub) 64px}
  .poziv h2{font-size:38px}
  .poziv .kontakt{font-size:17px}
  /* Adresa i broj na uskom ekranu idu jedno pod drugo — inače se e-adresa
     prelomi na pola i pročita kao dve adrese. Time prestaju da budu poveznice
     u toku rečenice (koje WCAG izuzima od mere za prst) i postaju dve mete
     jedna ispod druge — pa moraju biti visoke 44 px kao i svaka druga. */
  .poziv .kontakt a{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    width:fit-content;
    margin:0 auto 8px;
  }
  .poziv .kontakt .tacka-razdvoj{display:none}
  .poziv footer{margin-top:72px}
  .poziv footer .razdvoj{margin:0 8px}
}

/* ═══ MANJE POKRETA ═══════════════════════════════════════════════════
   Ko je u sistemu tražio manje pokreta, dobija ista stanja — samo odmah.
   Ništa se ne skriva i ništa ne čeka posmatrača; ni pretapanje kuća ni
   samohodni krug (skripta ga pod ovim pravilom uopšte ne pokreće). */
@media (prefers-reduced-motion:reduce){
  .ima-js .upliv > *,
  .ima-js .upliv.vidljiv > *{opacity:1;transform:none;transition:none}
  .kadar-kuce{transition:none}
  .pilula,.dugme,.poziv .kontakt a{transition:none}
  html{scroll-behavior:auto}
}