/* ==========================================================================
   AVERI — TESTNA VERZIJA (nova/)
   Srednji, SVETLI deo stranice. Hero i kontakt su postojeći scrollworld i
   ovde se ne stilizuju — za njih i dalje važe css/site.css i motorov @layer sw.

   Sve mere, boje i pisma dolaze iz brand/tokens/brand-tokens.css. Nijedno novo
   pismo se ne uvodi.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SVETLI OPSEG
   Brend već ima [data-theme="light"] blok, napisan baš za obrnutu sekciju.
   Odatle se uzima sve što valja, a dodaju se četiri tokena koje ovaj deo traži
   (--bg, --text, --muted, --border) plus --accent-ink.

   IZMERENI KONTRAST (WCAG 2.1, podloga --bg #F7F4EF):

     --text   #14120F  na --bg   17.04:1   AAA
     --muted  #5B554C  na --bg    6.72:1   AAA za normalan tekst
     --accent-ink #5B3FBF na --bg 6.58:1   AAA za normalan tekst
     --border #E2DCD2  na --bg    1.24:1   ukras, ne nosi značenje

   ZAŠTO --accent-ink POSTOJI. Brendov --brand-accent-dim je #d9c400 i na ovoj
   podlozi daje 1.62:1 — pada AA za tekst ubedljivo. Ni osnovni --brand-accent
   (#a78bfa) ne prolazi: 2.48:1. Zato sve što je TEKST ili TANKA LINIJA ide na
   --accent-ink, tamniju varijantu brend ljubičaste.

   ISPUNA BAROVA TAKOĐE IDE NA --accent-ink, a ne na --brand-accent-dim.
   Razlog je merljiv: #d9c400 prema podlozi daje 1.62:1, a WCAG 1.4.11 traži
   3:1 za grafiku koja nosi značenje — bar bi bio tehnički prisutan a očima
   nevidljiv. --brand-accent-dim se koristi tamo gde je velika površina sa
   tamnim tekstom preko sebe (traka „najčešći izbor": #14120F na #d9c400 =
   10.55:1), gde radi kako treba.
   -------------------------------------------------------------------------- */
.section--light {
  /* nasleđe iz brend light bloka (--text-secondary, --ink-*, itd.) */
  color-scheme: light;

  --bg: #f7f4ef;          /* topao off-white, ne čisto belo */
  --text: #14120f;
  --muted: #5b554c;
  --border: #e2dcd2;
  --accent-ink: #5b3fbf;  /* tekst, linije, ispune barova */
  --povrsina: #fffdf9;    /* kartice — mrvicu svetlije od podloge */
  --traka: #e7e1d6;       /* prazan deo bara */

  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* REZ tamno → svetlo → tamno.
   Namerno bez preliva: puna širina, tvrda granica. Motorove scene su fiksirane
   i pri prelazu se gase (v. nova/script.js), pa je granica čista i sa obe
   strane. `position: relative` + z-index drži svetli deo iznad svega što bi
   od fiksiranih slojeva ostalo. */
.section--light {
  position: relative;
  /* IZNAD SVIH MOTOROVIH SLOJEVA. Motor ide do 60 (traka za skrol), a redom:
     scena 10, tekst 20, natpis „skrolujte" 30, rutne tačke 40, gornja traka 50.
     Sa nižom vrednošću se na samom prelazu — dok je poslednji piksel herojeve
     staze još na ekranu — logotip i dugme vide preko svetlog teksta, pa rez
     prestaje da bude rez. Ovako svetli deo prekriva sve čega dohvati. */
  z-index: 70;
  border-top: 1px solid var(--ink-1000);
  border-bottom: 1px solid var(--ink-1000);
}

/* Kontejneri scrollworlda. Kad se scena ugasi, sakriva se CELA — inače
   fiksirani slojevi motora ostaju preko svetlog teksta. */
.svet--miruje {
  visibility: hidden;
}

/* ---- kontakt: uspravan snimak na širokom ekranu -------------------------
   Scena iz svemira postoji samo u portretnom lancu (720×1280). Motor
   podrazumevano radi `cover`, što bi na širokom ekranu isekilo levu i desnu
   trećinu — a tu su planeta i galaksija, dakle sve zbog čega je scena i
   izabrana. Zato se prikazuje CEO snimak, a sa strane stoji tamna podloga
   iste boje kao stranica, pa se ne vidi kao „traka" nego kao mrak oko kadra.

   Na telefonu se ništa ne menja: tamo je ekran ionako uspravan, snimak
   popunjava sve i `cover` je ispravan. */
@media (min-width: 861px) {
  .svet--svemir .sw-scene__video,
  .svet--svemir .sw-scene__still {
    object-fit: contain;
    object-position: center;
    background: var(--ink-1000);
  }
  /* Tekst stoji levo, pa se kadar pomera udesno da se ne preklapaju. */
  .svet--svemir .sw-scene {
    background: var(--ink-1000);
  }
}

@media (min-width: 1200px) {
  .svet--svemir .sw-scene__video,
  .svet--svemir .sw-scene__still {
    object-position: 72% center;
  }
}

/* ---- kontakt tekst mora da STOJI do kraja ------------------------------
   Motor bira ponašanje teksta po mestu scene u nizu:

     i === 0        → pozdrav na dolasku: pun na početku, ugašen na 62% scene
     i === N - 1    → CTA se drži do kraja

   Kad mount ima jednu jedinu scenu, oba uslova pokazuju na nju, ali prvi
   pobeđuje — pa se kontakt ponaša kao pozdrav i broj telefona nestane baš kad
   posetilac dođe do njega. U postojećem sajtu se to ne dešava, jer je kontakt
   tamo sedma scena od sedam.

   Motor se ne dira (postojeći sajt mora ostati isti radi poređenja), pa se
   prozirnost nadjačava odavde. Motor upisuje inline stil svaki kadar, a inline
   stil bez !important gubi od pravila sa !important — zato baš tako.
   `pointer-events` ide uz to: motor ga gasi kad je prozirnost ispod pola, a
   ugašen broj telefona se ne bi mogao pozvati. */
.svet--svemir .sw-copy {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Kontakt je kraj puta, ne početak: natpis „skrolujte" tu nema šta da poziva.
   Prazna vrednost u podešavanjima ne pomaže — motor je čita kao nedostajuću i
   vraća svoju podrazumevanu reč („scroll"), pa se gasi odavde.
   Rutna traka sa jednom jedinom tačkom isto: ona služi da se vidi gde si u
   nizu, a niz od jednog nema gde. */
.svet--svemir .sw-hint,
.svet--svemir .sw-route {
  display: none;
}

/* --------------------------------------------------------------------------
   BOX-SIZING

   U projektu ga nigde nema, pa se širina računa BEZ unutrašnjeg razmaka. Zbog
   toga je dugme u kartici paketa (širina 100% + 2×32 px razmaka) izlazilo iz
   okvira za tačno 64 px, i na telefonu i na računaru.

   Namerno se NE postavlja globalno: motorov raspored i css/site.css pisani su
   bez njega, pa bi globalna promena pomerila i ono što danas radi. Važi samo
   za ono što je napisano ovde.
   -------------------------------------------------------------------------- */
.nova, .nova *, .nova *::before, .nova *::after,
.glava, .glava *, .glava *::before, .glava *::after {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   ZAGLAVLJE ZA CELU STRANICU

   Motorove trake se gase: svaka je vezana za svoj mount i nestaje kad se scena
   ugasi, pa bi u svetlom delu stranica ostala bez logotipa i navigacije, a na
   prelazu bi se dve trake preklapale.
   -------------------------------------------------------------------------- */
.sw-topbar {
  display: none;
}

.glava {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;              /* iznad svega: motor ide do 60, svetli deo do 70 */
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 24px);
  padding: 10px clamp(12px, 4vw, 40px);
  padding-top: max(10px, env(safe-area-inset-top));
  /* Boje se menjaju po tome šta je iza (v. .glava--svetla). Prelaz je kratak
     da ne kasni za rezom, ali nije trenutan da ne trepće. */
  color: var(--text-primary);
  background: linear-gradient(180deg, rgba(3, 3, 3, 0.82), rgba(3, 3, 3, 0));
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out);
}

.glava--svetla {
  color: #14120f;
  background: #f7f4ef;
  box-shadow: 0 1px 0 #e2dcd2;
}

.glava__znak {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: inherit;
  text-decoration: none;
  flex: none;
}

.glava__meni {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.glava__meni a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 clamp(9px, 2.2vw, 15px);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-size: clamp(0.75rem, 2.9vw, 0.875rem);
  font-weight: var(--fw-bold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.glava__meni a:hover {
  border-color: currentColor;
}
.glava--svetla .glava__meni a:hover {
  background: rgba(91, 63, 191, 0.08);
  border-color: var(--accent-ink, #5b3fbf);
  color: #5b3fbf;
}

.glava__cta {
  display: none;             /* na telefonu nema mesta; kontakt nosi svoje dugme */
}

.glava a:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

/* Logotip se na najužim ekranima sklanja da četiri dugmeta stanu u jedan red
   bez zbijanja. Brend se ionako vidi u samoj sceni. */
@media (max-width: 419px) {
  .glava__znak { display: none; }
  .glava__meni { margin-left: 0; width: 100%; justify-content: space-between; }
}

@media (min-width: 780px) {
  .glava { padding-block: 14px; }
  .glava__meni { margin-left: auto; gap: 6px; }
  .glava__cta {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 20px;
    border-radius: var(--radius-pill);
    background: var(--brand-accent);
    color: var(--ink-950);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
    flex: none;
  }
  .glava--svetla .glava__cta {
    background: #5b3fbf;     /* --accent-ink; belo na njemu je 7.10:1 */
    color: #fdfdfd;
  }
}

/* Naslov na koji se skače ne sme da završi ispod zaglavlja. */
[id="proces"], [id="paketi"], [id="o-nama"] {
  scroll-margin-top: 76px;
}

/* --------------------------------------------------------------------------
   ZAJEDNIČKO
   -------------------------------------------------------------------------- */
.nova {
  --uvod: clamp(2.5rem, 9vw, var(--space-9));
}

.nova__blok {
  padding-block: var(--uvod);
  padding-inline: clamp(1.25rem, 5vw, var(--space-8));
}
.nova__blok + .nova__blok {
  border-top: 1px solid var(--border);
}

.nova__uze {
  max-width: 62rem;
  margin-inline: auto;
}

.nova h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}
.nova h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  margin: 0 0 var(--space-3);
}
.nova p {
  margin: 0 0 var(--space-4);
  max-width: 60ch;
}
.nova strong {
  font-weight: var(--fw-bold);
}
.nova em {
  font-family: var(--font-accent);
  font-style: italic;
}

.nova__nadnaslov {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 var(--space-3);
}
.nova__nadnaslov::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.nova__tiho {
  color: var(--muted);
}

/* Vidljiv fokus svuda — na svetloj podlozi tanka ljubičasta linija ne bi bila
   dovoljna, pa ide puna kontura sa razmakom. */
.nova a:focus-visible,
.nova button:focus-visible {
  outline: 3px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   OTKRIVANJE — jedan easing kroz ceo srednji deo, samo transform i opacity
   -------------------------------------------------------------------------- */
/* Skriva se SAMO ako JavaScript radi (klasa .js se upisuje u <head>).
   Bez te ograde bi pad skripte ostavio ceo beli deo praznim: tekst bi postojao
   u dokumentu, ali neviđen. Animacija je nadogradnja, ne uslov za sadržaj. */
.js .otkrij {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 520ms var(--ease-out),
    transform 520ms var(--ease-out);
  transition-delay: calc(var(--red, 0) * 70ms);
}
.js .otkrij.je-tu {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   B — BAROVI
   -------------------------------------------------------------------------- */
.barovi {
  display: grid;
  gap: var(--space-6);
  margin: var(--space-7) 0 var(--space-5);
}

.bar__glava {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.bar__broj {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(2rem, 7vw, 3rem);
  line-height: 1;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.bar__natpis {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: var(--lh-tight);
}

/* Traka je puna širina i na 375px — bar se ne skraćuje na telefonu. */
.bar__traka {
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--traka);
  overflow: hidden;
}
.bar__ispuna {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-ink);
  /* Bez JavaScripta bar je ODMAH pun — prazan bar bi bio netačan podatak,
     ne samo izostala animacija. Skupljanje na nulu radi samo uz .js. */
  transform: scaleX(var(--do));
  transform-origin: left center;
}
.js .bar__ispuna {
  transform: scaleX(0);
  transition: transform 900ms var(--ease-out);
  transition-delay: calc(var(--red, 0) * 120ms);
}
.bar.je-tu .bar__ispuna {
  transform: scaleX(var(--do));
}

.bar__opis {
  margin-top: var(--space-4);
}

/* Poređenje 88 / 47 — isti barovi, samo upareni i označeni */
.poredjenje {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--povrsina);
}
.poredjenje .bar__ispuna--slabo {
  background: var(--muted);
}

.izvor {
  margin-top: var(--space-7);
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   C — PAKETI
   -------------------------------------------------------------------------- */
.paketi {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.paket {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Gornji razmak je uvećan za visinu trake „najčešći izbor" u SVIM karticama,
     iako je traka samo na jednoj. Bez toga traka gura sadržaj svoje kartice
     naniže, pa tri cene stoje na tri različite visine i oko odmah vidi da nešto
     nije poravnato. */
  padding: calc(var(--space-6) + 30px) var(--space-6) var(--space-6);
  background: var(--povrsina);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.paket--istaknut {
  border-color: var(--accent-ink);
  border-width: 2px;
}

.paket__traka {
  position: absolute;
  top: var(--space-6);
  left: var(--space-6);
  margin: 0;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--brand-accent-dim);
  color: #14120f;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.paket__ime {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--space-2);
}
.paket__cena {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(2.75rem, 10vw, 3.5rem);
  line-height: 1;
  margin: 0 0 var(--space-4);
}

/* Obećanje je jedna rečenica koja kaže ŠTA paket daje; opis je zašto i kome.
   Razlikuju se težinom i bojom, ne veličinom — kartica ionako nosi mnogo
   redova, pa bi treći stepen veličine samo pravio buku. */
.paket__obecanje {
  margin: 0 0 var(--space-3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  max-width: none;
}
.paket__opis {
  margin: 0 0 var(--space-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  color: var(--muted);
  max-width: none;
}
/* Zaključak stoji ODVOJEN od spiska, iznad dugmeta: on je razlog za klik,
   a ne još jedna stavka. */
.paket__zakljucak {
  margin: 0 0 var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  max-width: none;
}
.paket__stavke {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: grid;
  gap: var(--space-3);
  flex: 1;
}
.paket__stavke li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--space-3);
  align-items: start;
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
}
.paket__stavke svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--accent-ink);
  flex: none;
}

/* Dugme — isti oblik kao pilula u brend vodiču, ali u tamnoj ljubičastoj
   da belo na njemu prođe AA (7.10:1). */
.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--accent-ink);
  color: #fdfdfd;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out);
}
.dugme:hover {
  transform: translateY(-1px);
}
.dugme--puno {
  width: 100%;
}

/* --------------------------------------------------------------------------
   D — BEZ SAJTA / SA SAJTOM
   -------------------------------------------------------------------------- */
.uporedo {
  margin-top: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--povrsina);
}
.uporedo__red {
  display: grid;
  grid-template-columns: 1fr;
}
.uporedo__red + .uporedo__red {
  border-top: 1px solid var(--border);
}
.uporedo__celija {
  padding: var(--space-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
}
.uporedo__celija--bez {
  color: var(--muted);
  background: color-mix(in srgb, var(--bg) 70%, var(--povrsina));
}
.uporedo__celija--sa {
  border-top: 1px solid var(--border);
}
.uporedo__oznaka {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.uporedo__celija--bez .uporedo__oznaka {
  color: var(--muted);
}
.uporedo__celija--sa .uporedo__oznaka {
  color: var(--accent-ink);
}

/* --------------------------------------------------------------------------
   A — KORACI PROCESA
   Broj i tekst su dve kolone; između koraka ide uspravna linija koja ih veže,
   pa se niz čita kao put a ne kao spisak. Strelica je na kraju linije.
   -------------------------------------------------------------------------- */
.koraci {
  list-style: none;
  margin: var(--space-7) 0 0;
  padding: 0;
}

.korak {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-4);
  padding-bottom: var(--space-7);
}

/* Veza ka sledećem koraku. Poslednji je nema. */
.korak::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 34px;
  bottom: 14px;
  width: 2px;
  background: var(--border);
}
.korak::after {
  content: "";
  position: absolute;
  left: 16px;
  bottom: 6px;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--border);
  border-bottom: 2px solid var(--border);
  transform: rotate(45deg);
}
.korak--zadnji::before,
.korak--zadnji::after {
  display: none;
}
.korak--zadnji {
  padding-bottom: 0;
}

.korak__broj {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 34px;
  border-radius: var(--radius-pill);
  background: var(--accent-ink);
  color: #fdfdfd;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
}

.korak__telo h3 {
  font-size: var(--fs-h4);
  margin-bottom: var(--space-2);
}
.korak__telo p {
  margin: 0;
  color: var(--muted);
}

.zakljucak {
  margin-top: var(--space-7);
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--povrsina);
}
.zakljucak h3 {
  margin-bottom: var(--space-3);
}
.zakljucak p {
  margin-bottom: var(--space-2);
  color: var(--muted);
}
.zakljucak__parola {
  margin: var(--space-4) 0 0;
  color: var(--text);
  font-size: var(--fs-lead);
}

/* --------------------------------------------------------------------------
   E — O NAMA
   -------------------------------------------------------------------------- */
.bez-toga {
  list-style: none;
  margin: var(--space-5) 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.bez-toga li {
  padding-left: var(--space-5);
  border-left: 2px solid var(--accent-ink);
  color: var(--muted);
  line-height: var(--lh-tight);
}

#o-nama h3 {
  margin-top: var(--space-7);
}

/* --------------------------------------------------------------------------
   ŠIRI EKRANI — projektovano na 375px, pa se širi
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .uporedo__red {
    grid-template-columns: 1fr 1fr;
  }
  .uporedo__celija--sa {
    border-top: 0;
    border-left: 1px solid var(--border);
  }
}

@media (min-width: 900px) {
  .paketi {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
  }
  .barovi {
    gap: var(--space-7);
  }
}

/* --------------------------------------------------------------------------
   SMANJEN POKRET
   Barovi su odmah puni, tekst odmah vidljiv. JS pod ovim uslovom ne dira
   brojeve (v. nova/script.js), pa oni ostaju onako kako su u HTML-u.
   -------------------------------------------------------------------------- */
/* Selektori namerno nose `.js`: pravila iznad su ograđena tom klasom, pa bi
   bez nje ova imala manju težinu i animacija bi se ipak izvršila. */
@media (prefers-reduced-motion: reduce) {
  .js .otkrij,
  .js .otkrij.je-tu {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .js .bar__ispuna,
  .js .bar.je-tu .bar__ispuna {
    transform: scaleX(var(--do));
    transition: none;
  }
  .dugme,
  .glava,
  .glava__meni a {
    transition: none;
  }
}

/* ==========================================================================
   V2 — IZMENE POSLE PREGLEDA

   Cetiri stvari, redom po isplativosti:
     1. izbaceno sto ne nosi znacenje (rutna traka, brojac scene, kutije)
     2. tipografska skala i panel preko videa bez tvrde ivice
     3. dvokolonski raspored belog dela, sa zalepljenim naslovom
     4. proces kao zalepljena sekvenca + otkrivanje naslova rec po rec
   ========================================================================== */

/* ---- 1. STO SE IZBACUJE ------------------------------------------------
   Rutna traka duplira meni gore i sa tri scene nema sta da pokaze; brojac
   „03 / 03" je podatak koji nikome ne treba. Oboje su vizuelni sum. */
.sw-route,
.sw-copy__num {
  display: none;
}

/* ---- 2a. PANEL PREKO VIDEA ---------------------------------------------
   Bio je pravougaonik cija je desna ivica presecala sliku. Sada preliv koji
   se gasi udesno: tekst i dalje stoji na mirnoj podlozi, ali se ne vidi gde
   podloga prestaje. Akcentna crta levo ostaje kao jedini tvrd potez. */
.sw-copy::before {
  inset: -28px -12% -30px -14px;
  border-radius: 0;
  background: linear-gradient(100deg,
    rgba(6, 6, 12, 0.88) 0%,
    rgba(6, 6, 12, 0.74) 42%,
    rgba(6, 6, 12, 0) 100%);
  box-shadow: inset 2px 0 0 rgba(185, 160, 242, 0.55);
}

/* ---- 2b. TIPOGRAFSKA SKALA ---------------------------------------------
   Naslov scene je bio manji od polovine onoga sto ekran dozvoljava, a scena
   je najjaca slika koju sajt ima. Prored ide na 1.0: na ovoj velicini
   nasledjenih 1.14 pravi rupe izmedju redova. */
.sw-copy__title {
  font-size: clamp(1.9rem, 4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.005em;
}
.sw-copy__body {
  font-size: clamp(1rem, 1.15vw, 1.12rem);
}

.veliki {
  font-size: clamp(2.1rem, 5vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.vodeci {
  font-size: var(--fs-lead);
  line-height: 1.5;
}

/* Izjava umesto uokvirenog zakljucka. Kutija je najprepoznatljiviji znak
   sablona; ista recenica preko cele sirine deluje sigurnije. */
.izjava {
  padding: clamp(3rem, 8vw, var(--space-9)) clamp(1.25rem, 5vw, var(--space-8));
  border-top: 1px solid var(--border);
}
.izjava__glavno {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(1.9rem, 4.6vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.012em;
  margin: 0 0 var(--space-4);
  max-width: 20ch;
}
.izjava__tiho {
  color: var(--muted);
  font-size: var(--fs-lead);
  max-width: 44ch;
  margin: 0;
}

/* ---- 3. DVOKOLONSKI RASPORED -------------------------------------------
   Ranije je sve bilo jedna uska kolona u sirokom praznom prostoru: pasusi su
   ograniceni na 60 znakova, pa je desna polovina kolone stalno zjapila.
   Sada oznaka i naslov stoje levo i LEPE SE dok citas, sadrzaj ide desno.
   Sirina se konacno koristi, a svaka sekcija dobija sidro. */
.blok {
  padding: clamp(3rem, 9vw, var(--space-9)) clamp(1.25rem, 5vw, var(--space-8));
}
.blok + .blok,
.proces + .blok {
  border-top: 1px solid var(--border);
}
.blok__glava > * {
  margin-bottom: var(--space-4);
}
.blok__glava > *:last-child {
  margin-bottom: 0;
}
.blok__telo > *:last-child {
  margin-bottom: 0;
}

@media (min-width: 900px) {
  .blok {
    display: grid;
    grid-template-columns: minmax(0, 23rem) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
    max-width: 88rem;
    margin-inline: auto;
  }
  .blok__glava {
    position: sticky;
    top: 104px;                 /* ispod zaglavlja */
  }
  .blok--siroko {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
  .blok--siroko .blok__glava {
    position: static;
    max-width: 46rem;
  }
  /* U dvokolonskom rasporedu pasus vise ne mora sam sebi da ogranicava
     sirinu — to sada radi kolona. */
  .blok__telo p {
    max-width: 68ch;
  }
}

/* ---- 4. PROCES KAO ZALEPLJENA SEKVENCA ---------------------------------
   Staza daje visinu, ram se lepi za ekran, koraci se smenjuju jedan preko
   drugog. Radi se iskljucivo kroz transform i opacity, pa ne dira budzet koji
   trosi scrub motor. Bez JavaScripta ostaje obican spisak (v. .js ograde). */
.proces__staza {
  min-height: 380vh;
}
.proces__ram {
  position: sticky;
  top: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, var(--space-7));
  padding: clamp(5rem, 12vh, 8rem) clamp(1.25rem, 5vw, var(--space-8)) clamp(2rem, 6vh, 4rem);
  max-width: 88rem;
  margin-inline: auto;
}
.proces__glava h2 {
  margin: var(--space-3) 0 0;
}

.proces__traka {
  height: 2px;
  margin-top: var(--space-5);
  background: var(--traka);
  border-radius: var(--radius-pill);
  overflow: hidden;
  max-width: 22rem;
}
.proces__traka span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accent-ink);
  transform: scaleX(var(--napredak, 0));
  transform-origin: left center;
  transition: transform 240ms var(--ease-out);
}

.proces__koraci {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

/* Bez JS-a koraci ostaju obican spisak jedan ispod drugog. */
.js .proces__koraci {
  min-height: 13rem;
}
.js .pkorak {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
  pointer-events: none;
}
.js .pkorak.je-aktivan {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.pkorak {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 3vw, var(--space-6));
  align-items: start;
}
.pkorak__broj {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(2.6rem, 8vw, 5.5rem);
  line-height: 0.9;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.pkorak__telo h3 {
  font-size: clamp(1.35rem, 3.2vw, 2.2rem);
  line-height: 1.1;
  margin-bottom: var(--space-3);
}
.pkorak__telo p {
  color: var(--muted);
  font-size: var(--fs-lead);
  max-width: 42ch;
  margin: 0;
}

/* ---- otkrivanje reci po rec --------------------------------------------
   Celi blok koji se pojavi odjednom je pokret; reci koje ulaze jedna za
   drugom su ritam. Razlika je velika, a cena je jedan transform po reci. */
.js .rec {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
  transition-delay: calc(var(--r, 0) * 38ms);
}
.js .je-tu .rec {
  opacity: 1;
  transform: none;
}

/* ---- kartice paketa: stanje pri prelasku misem ------------------------- */
.paket {
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .paket:hover {
    transform: translateY(-4px);
    border-color: var(--accent-ink);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .pkorak,
  .js .rec {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .js .pkorak {
    position: relative;
    margin-bottom: var(--space-6);
  }
  .js .proces__koraci { min-height: 0; }
  .proces__staza { min-height: 0; }
  .proces__ram { position: static; min-height: 0; }
  .paket { transition: none; }
}

/* ---- LEPLJENJE MORA DA RADI --------------------------------------------
   Motor postavlja `body { overflow-x: hidden }`. To od body-ja pravi kontejner
   skrolovanja, a `position: sticky` se onda lepi za nesto sto se ne pomera —
   dakle ne lepi se uopste. Izmereno: ram je pratio stazu piksel u piksel.

   `clip` radi isto sto i `hidden` po pitanju odsecanja, ali NE pravi kontejner
   skrolovanja, pa lepljenje ostaje ispravno. */
body {
  overflow-x: clip;
}

/* Stariji pregledaci ne znaju za `clip`. Tamo lepljenje ne moze da radi, pa
   sekvenca pada na obican spisak umesto da ostane prazna. */
@supports not (overflow-x: clip) {
  .proces__staza { min-height: 0; }
  .proces__ram { position: static; min-height: 0; }
  .js .proces__koraci { min-height: 0; }
  .js .pkorak {
    position: relative;
    opacity: 1;
    transform: none;
    margin-bottom: var(--space-7);
  }
  .blok__glava { position: static; }
}

/* ---- RASPORED UNUTAR ZALEPLJENOG RAMA ----------------------------------
   Naslov levo, koraci desno, isto kao u ostalim sekcijama. Ranije je sve bilo
   levo poravnato u jednoj koloni, pa je desnih 60% ekrana stajalo prazno. */
@media (min-width: 900px) {
  .proces__ram {
    display: grid;
    grid-template-columns: minmax(0, 23rem) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-content: center;
  }
  .proces__glava { align-self: start; }
  .js .proces__koraci { min-height: 15rem; }
}

/* Korak je bio pretih u odnosu na prazninu oko sebe: broj krupan, a naslov
   koraka jedva veci od pasusa. Na zalepljenom ekranu je korak jedini sadrzaj,
   pa sme i mora da bude glasniji. */
.pkorak__telo h3 {
  font-size: clamp(1.55rem, 3.6vw, 2.7rem);
  line-height: 1.06;
  letter-spacing: -0.008em;
}
.pkorak__telo p {
  max-width: 38ch;
}
@media (min-width: 900px) {
  .pkorak { gap: clamp(1.5rem, 3vw, 2.5rem); }
  .pkorak__broj { font-size: clamp(3.5rem, 6vw, 6.5rem); }
}

/* ---- naslov samo za pretragu i citace ekrana ---------------------------
   Stranica nije imala nijedan h1: vidljivi naslov prve scene ispisuje motor
   tek posle skripte, i to kao h2. Ovaj stoji u izvoru i govori istinu, a od
   oka je sklonjen jer bi se inace video dvaput. Ne koristi se `display: none`
   ni `visibility: hidden` — to bi ga sakrilo i od citaca ekrana, cime bi
   izgubio i drugu svrhu. */
.samo-za-citace {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}