/* Hallmark · shape: custom, Spona (obe strane u istom kadru) · genre: modern-minimal · theme: custom · idea: "Spona: svaka sekcija stavlja obe strane u isti kadar, onog kome treba i onog koji zna" · vibe: "tiho samouverena, precizna, topla, lokalna"
 * paper: brand #0B1220 (oklch 17% 0.03 262), light #F7FAFC · accent: brand #2F68FF (oklch 56% 0.22 264) · display: Outfit 700 · body: Outfit 400 · hero: naslov preko cele mreže, ispod rečenica i pozivi levo, 3D spona desno · nav: znak levo, dva sidra i prekidač teme desno, bez dugmeta · footer: znak levo, sedam linkova desno, red mesta ispod · signature: „Kako radi", prekidač dve strane sa pravim snimcima proizvoda
 * axes: dark/grotesk-heavy/chromatic-blue · posture: restrained · modes: dark+light · imagery: 3D slot (snimak scene sa sajta) · job: try (uzmi aplikaciju) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4 · weakest: S i E, heroj je naslov preko podeljene mreže; specifičnost nosi spona u 3D, dve strane u naslovu i stvarni pozivi po uređaju, ne raspored */
/* Hallmark · waive 38iii · drugi red naslova heroja je ceo u plavom, jednom na strani · naslov zaključan planom 19 §7.2; drugi red nosi stranu ponude */
/* Hallmark · dismissed 74 · #F8FAFC, #0F172A i #64748B su brend tokeni iz site.css i brand-tokens.css, pre-flight ih je našao u projektu */
/* Hallmark · dismissed 58 · naslov heroja ima 11 reči jer je zaključan planom 19 §7.2, dva reda za dve strane platforme */
/* Hallmark · waive 39b · red koraka u „Kako radi" je 85 px visok jer nosi broj i naslov koraka · to je izbor koraka kao red liste, ne marketinško dugme; ceo red je meta za prst i miš */
/* Hallmark · waive 49b · nazivi oblasti „Obrazovanje i instrukcije", „Dekoracija i eventi" prelamaju se u dva reda na 320 px · to su stvarni nazivi kategorija iz aplikacije, skraćivanje bi ih odvojilo od pretrage */
/* Hallmark · hero-review: fix · 5 findings · 3 resolved 1 partial 1 unresolved · partial 3: dve strane sada stoje u heroju kao par linkova, ostatak ideje nosi „Kako radi" · unresolved 4: naslov, rečenica i 3D su zaključani, stvarni brojevi idu u „Tri broja" odmah ispod pregiba */
/* Hallmark · finish-review: subagent · 7 findings · 5 resolved 1 partial 1 unresolved · partial 5: brojevi vezani za strane (ko radi, ko traži), redosled sekcija je zaključan planom 20 §3 · unresolved 4: prekidač Treba mi usluga / Nudim uslugu je zahtev klijenta, obe strane se ne vide istovremeno · gap: none */
/* ============================================================
   Uslužionica, početna strana: funnel v3

   Prenos makete iz site-design/funnel-v3/ (pocetna.css, tokens.css,
   base.css), po predaja.md. Učitava se samo na „/", posle site.css.

   Redosled:
   1. Hallmark pečat iz pocetna.css, doslovno (waive i dismissed linije).
   2. Tokeni koji u site.css još ne postoje. `--us-*` koji postoje se ovde
      NE ponavljaju: izvor istine ostaje site.css, i boja postoji samo na
      jednom mestu. Hallmark imena (`--color-*`) su samo pokazivači.
   3. Osnova iz base.css koju strana traži (overflow-x: clip, naslovi,
      .container, .visually-hidden, reduced-motion). [data-slot] pravila
      su bila samo za maketu.
   4. pocetna.css doslovno, bez @import-a, bez panela .lista (na sajtu je
      to Funnel/Modal.razor) i bez [data-uredjaj] pravila (server crta
      samo stanje za uređaj).
   5. Ono što maketa nije imala jer je nosila snimke umesto živih scena.

   Stara početna (/v2) ima svoj funnel.css i ovaj fajl ne učitava.
   ============================================================ */


/* ── Tokeni: samo novi, ostalo je u site.css ─────────────────── */

:root {
  --us-accent-cta-hover: #2457E0;
  --us-on-accent:   #FFFFFF;
  --us-radius-ekran: 28px;   /* svetla „ekran" površina, plan §4 */

  /* Lajm: SAMO plaćeno isticanje */
  --us-boost:      #D9F99D;

  /* Pokret, site-design/05-pokret.md (ostala trajanja su u site.css) */
  --us-t-pritisak: 120ms;
  --us-t-heroj:   420ms;

  /* Senke iz v2 (funnel.css): plavi sjaj ispod punog dugmeta, mekana ispod polja pretrage */
  --us-senka-poziv: 0 10px 24px rgba(47, 107, 255, 0.25);
  --us-senka-polja: 0 18px 40px rgba(2, 8, 23, 0.18);

  /* Svetla „ekran" ploča za snimke aplikacije: svetla i na tamnom sajtu */
  --us-ploca: #F7FAFC;
  --us-ploca-rub: #F7FAFC;

  /* Dragulj tokena, SVG rezerva kad nema WebGL-a (iz Funnel/Tokens.razor) */
  --us-dragulj-svetlo: #7CC3FF;
  --us-dragulj-tamno:  #1E40AF;

  /* Aplikacija, svetla tema (brand-tokens.css) */
  --app-bg:        #F7FAFC;
  --app-elevated:  #FFFFFF;
  --app-fg:        #0F172A;
  --app-fg-muted:  #64748B;
  --app-border:    #E2E8F0;
  --app-link:      #2456CC;   /* tekst-link na svetloj ploči, AA */
  --app-posao:     #A21CAF;

  /* ── Hallmark imena, samo pokazivači ── */
  --color-paper:   var(--us-bg);
  --color-paper-2: var(--us-bg2);
  --color-paper-3: var(--us-surface);
  --color-ink:     var(--us-fg);
  --color-ink-2:   var(--us-fg-muted);
  --color-muted:   var(--us-fg-subtle);
  --color-rule:    var(--us-border);
  --color-accent:  var(--us-accent-cta);
  --color-accent-hover: var(--us-accent-cta-hover);
  --color-accent-ink: var(--us-on-accent);
  --color-accent-text: var(--us-accent);
  --color-focus:   var(--us-accent);
  --color-posao:   var(--us-posao);
  --color-error:   var(--us-error);
  --color-success: var(--us-success);

  --font-display: var(--us-font);
  --font-body:    var(--us-font);
  --font-outlier: var(--us-font);

  /* Skala: 8 pt mreža, plan §4 */
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 128px;
  --text-xs: 0.8125rem; --text-sm: 0.9375rem; --text-md: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem); --text-lg: 1.1875rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-3xl: 2.75rem;
  /* Naslov heroja: 40 na telefonu, 64 na računaru (plan §4) */
  --text-display: clamp(2.5rem, 1.6rem + 3vw, 4rem);
  --text-display-s: clamp(2.25rem, 1.5rem + 2.4vw, 3.5rem);
  /* Naslov sekcije: 30 / 44 */
  --text-section: clamp(1.875rem, 1.35rem + 1.7vw, 2.75rem);
  --text-title: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  /* Podnaslov: 17 / 19 */
  --text-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);

  --ease-out: var(--us-ease); --ease-in: var(--us-ease-izlaz); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-micro: var(--us-t-mikro); --dur-short: var(--us-t-stanje); --dur-long: var(--us-t-ulaz);

  --container: 1328px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 96px; --section-gap: 128px; --section-gap-l: 160px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
  --radius-card: var(--us-radius-ekran); --radius-input: 14px; --radius-pill: 999px; --rule-hair: 1px; --shadow-card: none;
  --tracking-display: -0.035em;
}

/* Svetla tema menja samo rub ploče; ostale svetle vrednosti (`--us-*`)
   već postavlja site.css, a `--color-*` ih prate kao pokazivači. */
:root[data-theme="light"] {
  --us-ploca-rub: #E2E8F0;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --us-ploca-rub: #E2E8F0;
  }
}

/* ── Osnova (base.css) ───────────────────────────────────────── */

/* clip, a ne hidden kao u site.css: hidden pravi okvir za skrol i lomi
   position: sticky na gornjoj traci. */
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* site.css boji svaki link i podvlači ga na hover; ovde link nosi svoj stil. */
a { color: inherit; font-weight: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
.dugme:hover, .preskoci:hover, .znak:hover { text-decoration: none; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight, 700); font-synthesis: none; letter-spacing: var(--tracking-display); line-height: 1.05; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h1 { max-width: 20ch; font-size: var(--text-display); } h2 { max-width: 30ch; font-size: var(--text-section); } h3 { max-width: 40ch; font-size: var(--text-title); line-height: 1.2; }
p { margin: 0; text-wrap: pretty; }
p:not([class]) { max-width: 65ch; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
figure { margin: 0; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; } }
@media (prefers-reduced-motion: reduce) { *:not(.keep-motion), *:not(.keep-motion)::before, *:not(.keep-motion)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }

/* ── Strana (pocetna.css) ────────────────────────────────────── */


/* ── Osnova stranice ─────────────────────────────────────────── */

body { font-size: var(--text-md); line-height: 1.6; letter-spacing: var(--us-tracking-normal); }

.preskoci { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); border-radius: var(--us-radius-sm); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; text-decoration: none; }
.preskoci:focus-visible { top: var(--space-md); outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Jedan glavni stil dugmeta na strani. Pune površine nose beo tekst
   samo na #2F68FF (4,62:1); tekst u plavom na tamnom ide kroz --color-accent-text. */
.dugme { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-lg); border: 1px solid var(--color-accent); border-radius: var(--radius-input); background: var(--color-accent); color: var(--color-accent-ink); font: 600 var(--text-md)/1 var(--font-body); letter-spacing: -0.01em; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--us-t-mikro) var(--us-ease), border-color var(--us-t-mikro) var(--us-ease), transform var(--us-t-pritisak) var(--us-ease); }
.dugme:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.dugme:active { transform: scale(0.98); }
.dugme:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.dugme:disabled, .dugme[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
/* Tihi oblik istog dugmeta: kad je glavni poziv nešto drugo (Android) */
.dugme--tiho { background: transparent; border-color: var(--color-rule); color: var(--color-ink); }
.dugme--tiho:hover { background: var(--us-surface); border-color: var(--color-muted); }

/* Zvanični Google Play bedž: slika se ne menja. PNG već nosi Google-ov
   obavezni prazan prostor (41 od 250 px, četvrtina visine bedža), pa je
   slika visoka 78 px da crni bedž bude 52 px, koliko i dugme. Negativna
   margina vraća taj prazan prostor u red, da se ne udvostruči. */
.play { display: inline-block; margin: calc(-1 * var(--space-sm)) 0; line-height: 0; border-radius: var(--us-radius-md); }
.play img { width: auto; height: 78px; }
.play:hover img { opacity: 0.9; }
.play:active { transform: scale(0.98); }
.play:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.play { transition: transform var(--us-t-pritisak) var(--us-ease); }
.play img { transition: opacity var(--us-t-mikro) var(--us-ease); }

/* Tekstualni linkovi za pregled bez naloga. Oglasi su plavi (usluge),
   poslovi orhideja: boja kaže koja je polovina platforme. */
.link { color: var(--color-accent-text); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; transition: color var(--us-t-mikro) var(--us-ease); }
.link:hover { color: var(--color-ink); }
.link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; }
.link--posao { color: var(--color-posao); }

/* ── Gornja traka (ista kao na v2, Funnel/Nav.razor) ──────────
   Providna na vrhu; pozadinu, blur i ivicu dobija na skrol (funnel.js
   upisuje inline stil na data-us="nav"). Sidra se vide od 900 px, poziv
   se krije ispod 560 px, jer tamo meni nosi sve. NavMeni crta site.css. */

.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); border-bottom: 1px solid transparent; transition: background-color 260ms var(--us-ease), border-color 260ms var(--us-ease), backdrop-filter 260ms var(--us-ease); }
.nav__red { display: flex; align-items: center; gap: 20px; padding-block: 14px; }
.nav__znak { display: flex; flex-shrink: 0; align-items: center; gap: 10px; color: var(--color-ink); font-size: 19px; font-weight: 700; letter-spacing: var(--us-tracking-tight); text-decoration: none; border-radius: var(--us-radius-sm); }
.nav__znak:hover { text-decoration: none; }
.nav__znak:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.nav__znak svg { width: 34px; height: 34px; }
.nav__sidra { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav__sidra a { display: none; color: var(--color-ink-2); font-size: 15px; font-weight: 500; text-decoration: none; border-radius: 6px; transition: color var(--us-t-mikro) var(--us-ease); }
.nav__sidra a:hover { color: var(--color-ink); text-decoration: none; }
.nav__sidra a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.nav__desno { display: flex; align-items: center; gap: 10px; }
.nav__tema { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--color-rule); border-radius: var(--us-radius-sm); background: transparent; color: var(--color-ink-2); cursor: pointer; transition: color var(--us-t-mikro) var(--us-ease), border-color var(--us-t-mikro) var(--us-ease); }
.nav__tema:hover { border-color: var(--color-accent); color: var(--color-ink); }
.nav__tema:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
html:not(.js) .nav__tema { display: none; }
.nav__poziv { padding: 11px 18px; border: 0; border-radius: var(--us-radius-sm); background: var(--color-accent); box-shadow: var(--us-senka-poziv); color: var(--color-accent-ink); font: 600 14.5px/1.2 var(--font-body); letter-spacing: -0.01em; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--us-t-mikro) var(--us-ease), transform var(--us-t-pritisak) var(--us-ease); }
.nav__poziv:hover { background: var(--color-accent-hover); text-decoration: none; }
.nav__poziv:active { transform: scale(0.98); }
.nav__poziv:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
@media (min-width: 900px) { .nav__sidra a { display: inline-block; } }
/* Otvoren meni (navigacija.js) i prozor (funnel.js) zaključavaju skrol sa
   overflow: hidden na body. Ovde html ima overflow-x: clip, pa bi body tada
   postao zaseban okvir za skrol i lepljiva traka bi odletela na vrh strane.
   Zato se skrol zaključava na html, a body ostaje kakav je. */
html.us-meni-otvoren, html:has(body[style*="overflow: hidden"]) { overflow: hidden; }
html.us-meni-otvoren body, body[style*="overflow: hidden"] { overflow-x: clip !important; overflow-y: visible !important; }
@media (max-width: 559px) { .nav__poziv { display: none; } }

/* Znak u podnožju */
.znak { display: inline-flex; align-items: center; gap: var(--space-xs); margin-right: auto; color: var(--color-ink); font-weight: 700; font-size: var(--text-lg); letter-spacing: var(--us-tracking-tight); text-decoration: none; border-radius: var(--us-radius-sm); }
.znak:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.znak svg { width: 28px; height: 28px; flex-shrink: 0; }
.znak__a { stroke: var(--us-mark1); }
.znak__b { stroke: var(--us-mark2); }

/* ── Heroj ───────────────────────────────────────────────────────
   Kontejner, ne prozor: isti heroj se crta i u uskim okvirima na
   hero-stanja.html, pa raspored i veličina naslova slušaju širinu
   heroja, ne širinu ekrana. */

.heroj { container: heroj / inline-size; padding-block: var(--space-xl) var(--space-2xl); }
.heroj__mreza { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); }

.heroj__naslov { max-width: none; font-size: clamp(2.5rem, 1.55rem + 4.2cqi, 4rem); line-height: 1.04; letter-spacing: var(--tracking-display); color: var(--color-ink); }
.heroj__naslov > span { display: block; }
.heroj__drugi { color: var(--color-accent-text); }

.heroj__telo { position: relative; z-index: var(--z-raised); display: grid; justify-items: start; gap: var(--space-lg); min-width: 0; }
.heroj__recenica { max-width: 40ch; text-wrap: balance; font-size: var(--text-lead); line-height: 1.55; color: var(--color-ink-2); }

.heroj__pozivi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-sm); }
.heroj__dostupnost { margin-top: calc(-1 * var(--space-xs)); font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-2); }
.heroj__dostupnost .link { white-space: nowrap; }

/* Dve strane u istom kadru: ko traži majstora i ko zna nešto da radi.
   Pregled bez naloga, plavo za oglase, orhideja za poslove. */
.heroj__strane { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 30rem); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.heroj__strane p { display: grid; gap: var(--space-2xs); padding-inline: var(--space-lg); font-size: var(--text-sm); line-height: 1.4; color: var(--color-ink-2); }
.heroj__strane p:first-child { padding-left: 0; }
.heroj__strane p + p { padding-right: 0; border-left: 1px solid var(--color-rule); }
.heroj__strane .link { justify-self: start; font-size: var(--text-md); white-space: nowrap; }

/* Slot fiksnog odnosa 1:1 za Three.js scenu „spona": <canvas data-us="canvas">
   i SVG rezerva iz starog Hero.razor (pravila su na dnu fajla). */
.heroj__scena { position: relative; width: min(100%, 16rem); aspect-ratio: 1; margin: calc(-1 * var(--space-md)) 0 calc(-1 * var(--space-3xl)); justify-self: center; background: none; }
/* Glavni poziv po uređaju bira server (Platforma.Prepoznaj) i crta samo
   ono što važi; na Androidu je bedž prvi u redu. */
/* Prazan rub bedža ide levo u razmak, da crni bedž stoji na ivici teksta i kad se prelomi u novi red. */
.heroj__pozivi .play { margin-left: calc(-1 * var(--space-sm)); }
/* App Store bedž nema ugrađen prazan prostor; Apple traži četvrtinu visine (13 px), razmak reda je 12. */
.heroj__pozivi .as-bedz { margin-inline: var(--space-3xs); }

@container heroj (min-width: 56rem) {
  .heroj__mreza { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-lg); align-items: start; }
  .heroj__naslov { grid-column: 1 / -1; grid-row: 1; position: relative; z-index: var(--z-raised); }
  .heroj__telo { grid-column: 1 / 7; grid-row: 2; align-self: center; position: relative; z-index: var(--z-raised); }
  .heroj__scena { grid-column: 6 / -1; grid-row: 2; width: min(100%, 36rem); justify-self: end; align-self: center; margin-block: calc(-1 * var(--space-3xl)); }
}

/* Pretraga u heroju, ista kao na v2 (Funnel/Hero.razor, funnel.css):
   Usluge ili Poslovi, šta i grad, pa Pretraži preko cele širine. */
.us-hero-pretraga { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 620px; }
.us-hp-vrsta { display: inline-flex; align-self: flex-start; padding: 4px; border: 1px solid var(--color-rule); border-radius: 14px; background: var(--us-surface); }
.us-hp-vrsta label { position: relative; cursor: pointer; }
.us-hp-vrsta input { position: absolute; opacity: 0; pointer-events: none; }
.us-hp-vrsta span { display: inline-block; min-width: 92px; padding: 8px 14px; border-radius: 10px; color: var(--color-ink-2); font-size: 14px; font-weight: 600; text-align: center; transition: background-color var(--us-t-mikro) var(--us-ease), color var(--us-t-mikro) var(--us-ease); }
.us-hp-vrsta input:checked + span { background: var(--color-accent); color: var(--color-accent-ink); }
/* Poslovi su orhideja; puna površina sa belim tekstom ide kroz jaču nijansu. */
.us-hp-vrsta .us-hp-posao input:checked + span { background: var(--us-posao-jak); }
.us-hp-vrsta input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.us-hp-polja { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px; border: 1px solid var(--color-rule); border-radius: 18px; background: var(--us-surface); box-shadow: var(--us-senka-polja); }
/* min-width: 0 i input preko cele širine: red slaže flex-basis, a ne podrazumevana
   širina polja u pregledaču (inače „Grad" negde pada u novi red, negde ne). */
.us-hp-polje { display: flex; flex: 1 1 220px; align-items: center; gap: 10px; min-width: 0; min-height: 48px; padding: 0 12px; border-radius: 12px; color: var(--color-ink-2); cursor: text; }
.us-hp-polje:focus-within { background: var(--color-paper); color: var(--color-ink); outline: 2px solid var(--color-focus); outline-offset: -2px; }
.us-hp-grad { flex: 0 1 170px; border-left: 1px solid var(--color-rule); border-radius: 0 12px 12px 0; }
.us-hp-polje input { flex: 1; width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--color-ink); font: inherit; font-size: 16px; }
.us-hp-polje input::placeholder { color: var(--color-ink-2); opacity: 0.8; }
.us-hp-polje input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.us-hp-dugme { display: inline-flex; flex: 1 1 100%; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--color-accent); box-shadow: var(--us-senka-poziv); color: var(--color-accent-ink); font: 600 17.5px/1 var(--font-body); letter-spacing: -0.01em; cursor: pointer; transition: background-color var(--us-t-mikro) var(--us-ease), transform var(--us-t-pritisak) var(--us-ease); }
.us-hp-dugme:hover { background: var(--color-accent-hover); }
.us-hp-dugme:active { transform: scale(0.97); }
.us-hp-dugme:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.us-hp-nastavi { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; padding: 7px 13px; border: 1px solid var(--color-rule); border-radius: var(--radius-pill); color: var(--color-ink-2); font-size: 13.5px; font-weight: 500; text-decoration: none; }
.us-hp-nastavi:hover { border-color: var(--color-accent-text); color: var(--color-ink); text-decoration: none; }
.us-hp-nastavi:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.us-hp-nastavi b { color: var(--color-ink); font-weight: 600; }
@media (max-width: 559px) {
  .us-hp-grad { flex: 1 1 100%; border-top: 1px solid var(--color-rule); border-left: 0; border-radius: 0 0 12px 12px; }
}

/* Ulazak heroja (05-pokret.md): tekst stiže prvi, stepenovano, scena
   posle. Polazi od vidljivog: animacija samo dodaje pomeraj. */
@keyframes usUlaz { from { opacity: 0; transform: translateY(12px); } }
@keyframes usScena { from { opacity: 0; } }
.heroj__naslov, .heroj__recenica, .us-hero-pretraga, .heroj__pozivi, .heroj__dostupnost, .heroj__strane { animation: usUlaz var(--us-t-heroj) var(--us-ease) backwards; }
.us-hero-pretraga { animation-delay: 90ms; }
.heroj__recenica { animation-delay: 60ms; }
.heroj__pozivi { animation-delay: 120ms; }
.heroj__dostupnost { animation-delay: 180ms; }
.heroj__strane { animation-delay: 240ms; }
.heroj__scena { animation: usScena 600ms var(--us-ease) 320ms backwards; }
@media (prefers-reduced-motion: reduce) {
  .heroj__naslov, .heroj__recenica, .us-hero-pretraga, .heroj__pozivi, .heroj__dostupnost, .heroj__strane, .heroj__scena { animation: none; }
  .dugme, .play, .play img, .link, .nav, .nav__sidra a, .nav__tema, .nav__poziv, .us-hp-vrsta span, .us-hp-dugme { transition: none; }
  .dugme:active, .play:active, .nav__poziv:active, .us-hp-dugme:active { transform: none; }
}

/* ── Sekcije: zajedničko ─────────────────────────────────────────
   Razmak 128 px na računaru, 72 na telefonu (plan §4). Granice se
   smenjuju: linija, pa promena podloge, pa samo vazduh. */

.kr h2, .grad h2, .tokeni h2, .pitanja h2, .finale h2 { font-size: var(--text-section); line-height: 1.1; letter-spacing: var(--us-tracking-tight); color: var(--color-ink); }

/* Jedno otkrivanje po strani (05-pokret.md, „Ulazak sekcije"): bez
   skripte je sve vidljivo, skrivanje važi samo pod .js. */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity var(--us-t-sekcija) var(--us-ease), transform var(--us-t-sekcija) var(--us-ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ── 2. Tri broja ── */

.brojevi { padding-block: var(--space-xl) var(--space-2xl); }
.brojevi__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.brojevi__lista > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--space-xs); min-width: 0; padding: var(--space-2xs) var(--space-sm); border-left: 1px solid var(--color-rule); }
.brojevi__lista > div:first-child { padding-left: 0; border-left: 0; }
.brojevi__lista > div:last-child { padding-right: 0; }
.brojevi__lista dd { margin: 0; color: var(--color-ink); font-weight: 700; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.brojevi__broj { font-size: clamp(2.75rem, 1.6rem + 5.4vw, 7rem); }
.brojevi__jed { font-size: clamp(1.125rem, 0.7rem + 2.2vw, 3rem); letter-spacing: var(--us-tracking-tight); color: var(--color-ink-2); }
.brojevi__lista dt { font-size: var(--text-sm); line-height: 1.4; color: var(--color-ink-2); }

@media (min-width: 48rem) {
  .brojevi__lista > div { padding: var(--space-xs) var(--space-xl); }
  .brojevi__lista > div:first-child { padding-left: 0; }
  .brojevi__lista > div:last-child { padding-right: 0; }
  .brojevi__lista dt { font-size: var(--text-md); }
}

/* ── 3. Kako radi ── */

.kr { padding-block: var(--space-3xl); background: var(--us-bg2); }
.kr__glava { display: grid; justify-items: start; gap: var(--space-sm); }
.kr h2 { max-width: 18ch; }
.kr__video { font-size: var(--text-sm); }

/* Dva radio unosa ostaju u toku na jedan piksel (gate 53); natpis nosi
   stanje i fokus. */
.kr__radio { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.kr__seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 26rem); margin-top: var(--space-xl); padding: var(--space-2xs); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper); }
.kr__seg label { display: grid; place-items: center; min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-pill); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color var(--us-t-stanje) var(--us-ease), color var(--us-t-stanje) var(--us-ease); }
.kr__seg label:hover { color: var(--color-ink); }
#kr-treba:checked ~ .kr__seg label[for="kr-treba"], #kr-nudim:checked ~ .kr__seg label[for="kr-nudim"] { background: var(--color-accent); color: var(--color-accent-ink); }
#kr-treba:focus-visible ~ .kr__seg label[for="kr-treba"], #kr-nudim:focus-visible ~ .kr__seg label[for="kr-nudim"] { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.kr__panel { display: none; margin-top: var(--space-2xl); }
#kr-treba:checked ~ .kr__panel--treba, #kr-nudim:checked ~ .kr__panel--nudim { display: block; }

.kr__koraci { display: grid; gap: var(--space-2xl); margin: 0; padding: 0; list-style: none; }
.kr__korak { display: grid; gap: var(--space-md); min-width: 0; }
.kr__natpis { display: flex; align-items: flex-start; gap: var(--space-sm); font-size: var(--text-title); font-weight: 600; line-height: 1.25; letter-spacing: var(--us-tracking-tight); color: var(--color-ink); }
.kr__br { display: inline-grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border: 1px solid var(--color-rule); border-radius: var(--radius-pill); color: var(--color-accent-text); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }

/* Svetla površina aplikacije, i kad je sajt taman: tako snimak izgleda
   kao proizvod, a ne kao deo sajta (plan §3.3). Bez okvira telefona. */
.ekran { margin: 0; padding: var(--space-sm); border-radius: var(--radius-card); background: var(--us-ploca); outline: 1px solid var(--us-ploca-rub); outline-offset: -1px; }
.ekran > img { position: static; width: 100%; height: auto; border-radius: var(--us-radius-md); }

.kr__bonus { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.kr__bonus p { max-width: 46ch; color: var(--color-ink-2); }
/* Naslov koraka i jedna rečenica o tome šta je na ploči. */
.kr__tekst { display: grid; gap: var(--space-2xs); min-width: 0; padding-top: var(--space-2xs); }
.kr__tekst b { font-weight: 600; }
.kr__opis { font-size: var(--text-sm); font-weight: 400; line-height: 1.45; letter-spacing: var(--us-tracking-normal); color: var(--color-ink-2); }


/* Žive komponente aplikacije (stil: funnel-v3-ekran.css, na .ekran-app). */
.ekran--zivo { padding: var(--space-md); }
.ekran__kartice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.ekran__poslovi { display: grid; gap: var(--space-sm); }
.ekran--zivo .lc, .ekran--zivo .jc { min-width: 0; }
.ekran__ocene { display: grid; gap: var(--space-sm); }
/* Uska kartica na telefonu: cena i ocena se ne lome same u sebi; kad obe ne
   staju u red, ocena cela prelazi ispod cene. (0,3,0) da nadjača
   funnel-v3-ekran.css, koji se učitava posle. */
.ekran.ekran--zivo .lc-dno { flex-wrap: wrap; row-gap: var(--space-2xs); }
.ekran.ekran--zivo .lc-cena, .ekran.ekran--zivo .lc-ocena { white-space: nowrap; }

/* Mali obrazac „Postavi oglas" (V3KakoRadi). Polja i čipovi su klase
   aplikacije (.ob-polje, .polje, .cip); ovde je samo raspored i izabran čip
   preko radio unosa, jer aplikacija bira čip skriptom (aria-pressed). Boje su
   tokeni aplikacije na ploči (.ekran-app). */
.v3-oglas { display: grid; gap: var(--space-md); }
.v3-oglas fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.v3-oglas legend { padding: 0; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.v3-oglas .ob-izbor { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.v3-oglas .cip { cursor: pointer; }
.v3-oglas .cip:has(input:checked) { background: var(--us-accent-cta); border-color: var(--us-accent-cta); color: var(--us-na-cta); }
.v3-oglas .cip:has(input:focus-visible) { outline: 2px solid var(--us-accent); outline-offset: 2px; }
.v3-oglas__iznos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); margin-top: var(--space-xs); }
.v3-oglas__cena:has(input[value="Negotiable"]:checked) .v3-oglas__iznos { display: none; }
.v3-oglas__cena:has(input[value="Fixed"]:checked) .v3-oglas__do { display: none; }
.v3-oglas__cena:has(input[value="Fixed"]:checked) .v3-oglas__iznos { grid-template-columns: minmax(0, 1fr); }
.v3-oglas textarea.polje { resize: vertical; }
.v3-oglas__dugme { justify-self: start; }

@media (min-width: 64rem) {
  .kr { padding-block: var(--space-4xl); }
  .kr__glava { justify-items: center; text-align: center; }
  .kr__seg { margin-inline: auto; }
  .kr__koraci .ekran { max-width: 48rem; }

  /* Sa skriptom: koraci levo, jedna velika površina desno menja snimak
     aktivnog koraka (pretapanje 360 ms). Bez skripte ostaju jedan ispod
     drugog, kao na telefonu. */
  .js .kr__koraci { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto auto minmax(0, 1fr); gap: 0 var(--space-2xl); }
  .js .kr__korak { display: contents; }
  .js .kr__natpis { grid-column: 1; padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); color: var(--color-ink-2); cursor: pointer; transition: color var(--us-t-mikro) var(--us-ease); }
  .js .kr__korak:last-child .kr__natpis { border-bottom: 1px solid var(--color-rule); }
  .js .kr__natpis:hover, .js .je-aktivan .kr__natpis { color: var(--color-ink); }
  .js .je-aktivan .kr__br { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-accent-ink); }
  .js .kr__natpis:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--us-radius-sm); }
  .js .kr__koraci .ekran { display: none; grid-column: 2; grid-row: 1 / -1; align-self: start; justify-self: start; width: fit-content; max-width: 100%; padding: var(--space-md); }
  .js .kr__koraci .je-aktivan .ekran { display: block; animation: usScena var(--us-t-ulaz) var(--us-ease); }
  .js .kr__koraci .ekran > img { width: auto; max-width: 100%; max-height: 34rem; }
  .js .kr__koraci .ekran--zivo { width: 100%; justify-self: stretch; }
}

/* ── 4. U tvom gradu ── */

.grad { padding-block: var(--space-3xl); }
.grad .container { display: grid; gap: var(--space-xl); }
.grad__glava { display: grid; gap: var(--space-md); align-content: start; }
.grad h2 { max-width: 16ch; }
.grad__recenica { max-width: 36ch; font-size: var(--text-lead); line-height: 1.55; color: var(--color-ink-2); }
.grad__oblasti { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-lg); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-rule); }
.grad__oblasti li { min-width: 0; border-bottom: 1px solid var(--color-rule); }
.grad__oblasti a { display: flex; align-items: center; min-height: 56px; padding-block: var(--space-xs); color: var(--color-ink); font-size: var(--text-lg); font-weight: 600; line-height: 1.25; letter-spacing: var(--us-tracking-tight); text-decoration: none; transition: color var(--us-t-mikro) var(--us-ease); }
.grad__oblasti a:hover { color: var(--color-accent-text); }
.grad__oblasti a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }
.grad__pozivi { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); }

@media (min-width: 64rem) {
  .grad { padding-block: var(--space-4xl); }
  .grad .container { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); }
  .grad__glava { grid-column: 1 / 6; grid-row: 1 / 3; }
  .grad__oblasti { grid-column: 6 / -1; column-gap: var(--gap-columns); }
  .grad__oblasti a { min-height: 64px; font-size: var(--text-xl); }
  .grad__pozivi { grid-column: 6 / -1; }
}

/* ── 5. Tokeni ── */

.tokeni { padding-block: var(--space-2xl) var(--space-3xl); }
.tokeni__mreza { display: grid; gap: var(--space-xl); }
.tokeni__tekst { display: grid; gap: var(--space-md); align-content: center; min-width: 0; }
.tokeni h2 { max-width: 16ch; }
.tokeni__recenica { max-width: 44ch; font-size: var(--text-lead); line-height: 1.55; color: var(--color-ink-2); }
.tokeni__tabela { width: 100%; margin-top: var(--space-md); border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tokeni__tabela th, .tokeni__tabela td { padding: var(--space-sm) var(--space-sm) var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); text-align: left; vertical-align: baseline; }
.tokeni__tabela thead th { font-size: var(--text-sm); font-weight: 400; color: var(--color-ink-2); white-space: nowrap; }
.tokeni__tabela tbody th { font-weight: 400; color: var(--color-ink-2); }
.tokeni__tabela td { color: var(--color-ink-2); font-size: var(--text-sm); }
.tokeni__tabela td b { margin-right: var(--space-2xs); color: var(--color-ink); font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.02em; }
/* Slot fiksnog odnosa 566:460 za Three.js dragulj. */
.tokeni__dragulj { width: min(100%, 36rem); aspect-ratio: 566 / 460; margin: 0 auto; background: none; }

@media (min-width: 64rem) {
  .tokeni { padding-block: var(--space-3xl) var(--space-4xl); }
  .tokeni__mreza { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: center; }
  .tokeni__tekst { grid-column: 1 / 7; }
  .tokeni__dragulj { grid-column: 7 / -1; }
}

/* Brojevi stoje odmah ispod heroja, kao njegov nastavak (ranije 96 + 128 px). */
@media (min-width: 64rem) { .heroj { padding-bottom: var(--space-xl); } .brojevi { padding-block: var(--space-xl) var(--space-3xl); } }

/* ── 6. Pitanja ── */

.pitanja { padding-block: var(--space-3xl); }
.pitanja__mreza { display: grid; gap: var(--space-xl); padding-top: var(--space-2xl); border-top: 1px solid var(--color-rule); }
.pitanja__glava { display: grid; justify-items: start; align-content: start; gap: var(--space-md); }
.pitanja h2 { max-width: 14ch; }
.pitanja__lista { min-width: 0; border-top: 1px solid var(--color-rule); }
.pitanja details { border-bottom: 1px solid var(--color-rule); }
.pitanja summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 64px; padding-block: var(--space-sm); color: var(--color-ink); font-size: var(--text-lg); font-weight: 600; line-height: 1.3; list-style: none; cursor: pointer; transition: color var(--us-t-mikro) var(--us-ease); }
.pitanja summary::-webkit-details-marker { display: none; }
.pitanja summary::after { content: "+"; flex-shrink: 0; color: var(--color-ink-2); font-size: var(--text-xl); font-weight: 400; line-height: 1; }
.pitanja details[open] summary::after { content: "\2212"; }
.pitanja summary:hover { color: var(--color-accent-text); }
.pitanja summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }
.pitanja details:not([open]) > p { display: none; }
.pitanja details p { max-width: 60ch; padding-bottom: var(--space-lg); color: var(--color-ink-2); }

@media (min-width: 64rem) {
  .pitanja { padding-block: var(--space-2xl) var(--space-4xl); }
  .pitanja__glava { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .pitanja h2 { max-width: none; }
  .pitanja summary { min-height: 72px; font-size: var(--text-xl); }
}

/* ── 7. Finale ── */

.finale { padding-block: var(--space-3xl); background: var(--us-bg2); }
.finale__unutra { display: grid; justify-items: start; gap: var(--space-lg); }
.finale h2 { max-width: 22ch; font-size: var(--text-display-s); line-height: 1.06; letter-spacing: var(--tracking-display); }
.finale__drugi { margin-top: calc(-1 * var(--space-xs)); font-size: var(--text-lead); color: var(--color-ink-2); }
.finale__pozivi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-xs); }
.finale__pozivi .play { margin-left: calc(-1 * var(--space-sm)); }
.finale__pozivi .as-bedz { margin-inline: var(--space-3xs); }
.finale__sitno { font-size: var(--text-sm); color: var(--color-ink-2); }
.finale__osnivac { width: min(100%, 40rem); margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); color: var(--color-ink-2); }

@media (min-width: 64rem) {
  .finale { padding-block: var(--space-4xl); }
  .finale__unutra { justify-items: center; text-align: center; }
  .finale__pozivi { justify-content: center; }
  .finale__pozivi .play { margin-left: calc(-1 * var(--space-2xs)); }
}

/* ── Podnožje ── */

.podnozje { padding-block: var(--space-xl) var(--space-2xl); border-top: 1px solid var(--us-border-soft); }
.podnozje__mreza { display: grid; gap: var(--space-lg); }
.podnozje__linkovi { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.podnozje__linkovi a { color: var(--color-ink-2); font-size: var(--text-sm); text-decoration: none; white-space: nowrap; transition: color var(--us-t-mikro) var(--us-ease); }
.podnozje__linkovi a:hover { color: var(--color-ink); text-decoration: underline; }
.podnozje__linkovi a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; }
.podnozje__sitno { font-size: var(--text-sm); color: var(--color-ink-2); }

@media (min-width: 64rem) {
  .podnozje__mreza { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--space-2xl); }
  .podnozje__linkovi { justify-content: flex-end; }
  .podnozje__sitno { grid-column: 1 / -1; }
}

/* ── Lepljiva traka na telefonu ── */

.traka { position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-sticky); padding: var(--space-sm) var(--space-md) calc(var(--space-sm) + env(safe-area-inset-bottom)); background: var(--us-bg2); border-top: 1px solid var(--us-border-soft); transform: translateY(100%); transition: transform var(--us-t-stanje) var(--us-ease); }
.traka.je-vidljiva { transform: none; }
.traka .dugme { width: 100%; }
@media (min-width: 48rem) { .traka { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .kr__seg label, .grad__oblasti a, .pitanja summary, .podnozje__linkovi a, .traka, .js .kr__natpis { transition: none; }
  .js .kr__koraci .je-aktivan .ekran { animation: none; }
}

/* Puno stanje „U tvom gradu" (u-tvom-gradu-puno.html): kartice se
   pojavljuju tek kad katalog pređe 6 oglasa (plan §3.4, O3). */
.grad__kartice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.grad__kartica { margin: 0; aspect-ratio: 536 / 686; background: none; }
.grad__kartica > img { object-fit: contain; }
@media (min-width: 64rem) { .grad__kartice { grid-column: 6 / -1; gap: var(--space-md); padding: var(--space-md); } }

/* ── Sajt: žive scene u slotovima ────────────────────────────────
   Maketa je u slotovima nosila snimke; ovde stoje <canvas> koje puni
   scene.js (preko funnel.js) i SVG rezerva. Rezervu pokazuje funnel.js
   kad nema WebGL-a ili je uključen prefers-reduced-motion; bez skripte
   je pokazuje CSS, da slot ne ostane prazan. */

.heroj__scena > canvas, .tokeni__dragulj > canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.tokeni__dragulj { position: relative; }
.heroj__scena > [data-us="fallback"] { display: none; position: absolute; inset: 16%; }
.heroj__scena > [data-us="fallback"] svg { width: 100%; height: 100%; }
.tokeni__dragulj > [data-us="tokenFallback"] { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; }
.tokeni__dragulj > [data-us="tokenFallback"] svg { width: 52%; height: 52%; }
html:not(.js) .heroj__scena > canvas, html:not(.js) .tokeni__dragulj > canvas { display: none; }
html:not(.js) .heroj__scena > [data-us="fallback"] { display: block; }
html:not(.js) .tokeni__dragulj > [data-us="tokenFallback"] { display: flex; }
.dragulj__1 { stop-color: var(--us-dragulj-svetlo); }
.dragulj__2 { stop-color: var(--us-color-primary-blue); }
.dragulj__3 { stop-color: var(--us-dragulj-tamno); }
.dragulj__sjaj { stop-color: var(--us-on-accent); }

/* ── Sajt: „Javi mi kad izađe" ───────────────────────────────────
   Prozor je postojeći Funnel/Modal.razor sa WaitlistForm. Njegov z-index
   (200) je ispod gornje trake (300), pa ga omotač diže iznad nje. Sa
   skriptom ga otvara funnel.js (data-us-click="openModal"); bez skripte
   link vodi na #javi-mi i prozor se otvara preko :target. */

.javi-mi { position: relative; z-index: var(--z-modal); }
/* Na niskom ekranu ploča je viša od prozora: neka se skroluje, a ne seče. */
.javi-mi > [data-us="modal"] { overflow-y: auto; align-items: safe center !important; }
.javi-mi:target > [data-us="modal"] { display: flex !important; }
.javi-mi__zatvori { display: none; }
.javi-mi:target .javi-mi__zatvori { position: fixed; left: 50%; bottom: var(--space-lg); z-index: var(--z-toast); display: inline-flex; background: var(--color-paper); transform: translateX(-50%); }

/* Lepljiva traka nosi jedan poziv za uređaj: dugme ili Play bedž, u sredini. */
.traka { display: flex; justify-content: center; }