/* ============================================================
   NEOTEHNIKA v2 — glavni stilovi
   Geometrija i površine iz reference-hero.png, paleta iz logotipa.
   Tokeni su u tokens.css i ovde se samo koriste.
   ============================================================ */

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* Traka je fiksna — sidra moraju da slete ispod nje. */
  scroll-padding-top:88px;
  /* Run 12: i DOLE — element doveden u ekran fokusom ili sidrom staje iznad
     plutajuće dugmadi (asistent, nazad na vrh), ne ispod njih. */
  scroll-padding-bottom:calc(var(--s6) + var(--fab) + var(--s3));
}
@media (max-width:900px){
  /* na telefonu su dugmad iznad tab trake */
  html{ scroll-padding-bottom:calc(var(--tabbar-h) + var(--fab-gap) + var(--fab) + var(--s3) + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
[id]{ scroll-margin-top:88px; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ui);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  /* Tipografski završni sloj (stavka 17) */
  font-optical-sizing:auto;
  hanging-punctuation:first last;
  transition:background var(--mid) var(--ease), color var(--mid) var(--ease);
}
body.is-locked{ overflow:hidden; }

img,svg,video{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }
p{ margin:0 0 1.05em; } p:last-child{ margin-bottom:0; }

h1,h2,h3,h4,h5,h6{ font-family:var(--display); margin:0; text-wrap:balance; }

::selection{ background:var(--blue-deep); color:#fff; }

/* Fokus prsten prati zaobljenje samog elementa — bez nametnutog radijusa,
   inače kružna dugmad dobijaju pravougaoni okvir (stavka 18). */
:focus-visible{
  outline:2px solid var(--bronze);
  outline-offset:3px;
}

/* Preskoči na sadržaj — staklena pilula koja upada odozgo */
.skip{
  position:fixed; z-index:400; left:50%; top:0;
  transform:translate(-50%,-140%);
  padding:var(--s3) var(--s6); border-radius:var(--r-pill);
  background:var(--glass-2); border:1px solid var(--glass-brd);
  box-shadow:var(--sh-lift);
  backdrop-filter:blur(var(--blur)) saturate(1.35);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.35);
  font-size:.9rem; font-weight:600;
  transition:transform var(--mid) var(--ease);
}
.skip:focus-visible{ transform:translate(-50%,14px); }

@supports selector(::-webkit-scrollbar){
  ::-webkit-scrollbar{ width:11px; height:11px; }
  ::-webkit-scrollbar-track{ background:var(--bg); }
  ::-webkit-scrollbar-thumb{ background:var(--line-2); border:3px solid var(--bg); border-radius:var(--r-pill); }
  ::-webkit-scrollbar-thumb:hover{ background:var(--blue); }
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
/* Rezervacija prostora za fiksni rail stoji na kraju fajla — mora posle
   .ft__in, koje pada niže i skraćenicom `padding:` bi je pregazilo.
   Vidi „POJAS ZA FIKSNI RAIL". */
/* Ritam sekcija je prepolovljen (v2.1): zaobljeni stakleni kontejneri sada
   razdvajaju sekcije, pa prazan prostor ne mora. Vidi --sect u tokens.css. */
.sect{ padding-block:var(--sect); position:relative; }
.sect--tight{ padding-block:clamp(26px,3.4vw,44px); }
/* Naslov -> uvodni pasus. Inline stilovi su uklonjeni iz svih 14 stranica
   da bi ovaj razmak bio na jednom mestu. */
.sect .lead{ margin-top:var(--gap-lead); }

/* ============================================================
   TIPOGRAFIJA
   ============================================================ */
.display{
  font-size:var(--fs-display); font-weight:300;
  line-height:.94; letter-spacing:-.03em;
}
.h1{ font-size:var(--fs-h1); font-weight:400; line-height:1.04; letter-spacing:-.025em; }
.h2{ font-size:var(--fs-h2); font-weight:500; line-height:1.1;  letter-spacing:-.02em; }
.h3{ font-size:var(--fs-h3); font-weight:600; line-height:1.25; letter-spacing:-.01em; }

.lead{ font-size:clamp(1.02rem,1.5vw,1.16rem); color:var(--ink-2); font-weight:400; max-width:60ch; }
.prose{ color:var(--ink-2); max-width:66ch; }
.prose strong{ color:var(--ink); font-weight:600; }

/* Mono je rezervisan za stvarne tehničke podatke.
   Tabularne cifre su izričite (stavka 17): mono font ih ima po definiciji,
   ali deklaracija drži meru i kad se font ne učita i padne na zamenu. */
.mono,.mono-accent,.crumbs,.hud,.phero__meta li,
.ft__contact a,.ft__contact span,.ft-bot,.pre__meta,
.chip--mono,.slist i,.net b,.tbl .m,.dimtxt,.step__n,
.tcard__share,.sect-id,.alloy-nav button small{
  font-variant-numeric:tabular-nums;
}
.mono{ font-family:var(--mono); font-size:.875rem; letter-spacing:.02em; }
/* Bakarna varijanta na svetlom drži kontrast ≥4.5:1; bronza je presvetla. */
.mono-accent{ font-family:var(--mono); font-size:.875rem; color:var(--copper); }
[data-theme="dark"] .mono-accent{ color:var(--bronze-hi); }

.label{
  font-family:var(--ui); font-size:var(--fs-label); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}

/* Kod sekcije — metafora tehničkog crteža */
.sect-id{
  display:flex; align-items:center; gap:var(--s3);
  font-family:var(--mono); font-size:.875rem; letter-spacing:.14em;
  color:var(--ink-3); margin:0 0 var(--s5);
}
.sect-id b{ color:var(--blue-deep); font-weight:600; }
[data-theme="dark"] .sect-id b{ color:var(--blue-lite); }
.sect-id::after{ content:''; flex:1; height:1px; background:linear-gradient(90deg,var(--line-2),transparent 80%); }

/* ============================================================
   STAKLO — jedna definicija za sve površine
   ============================================================ */
.glass{
  background:var(--glass);
  border:1px solid var(--glass-brd);
  box-shadow:var(--sh-card),var(--hi-inset);
  backdrop-filter:blur(var(--blur)) saturate(1.35);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.35);
}
.glass-2{
  background:var(--glass-2);
  border:1px solid var(--glass-brd);
  box-shadow:var(--sh-card),var(--hi-inset);
  backdrop-filter:blur(var(--blur)) saturate(1.35);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.35);
}

/* Staklena kartica */
.gcard{
  position:relative;
  border-radius:var(--r-card);
  padding:clamp(20px,2.4vw,30px);
  background:var(--glass);
  border:1px solid var(--glass-brd);
  box-shadow:var(--sh-card),var(--hi-inset);
  backdrop-filter:blur(var(--blur)) saturate(1.35);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.35);
  transition:transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
/* run 12: podizanje samo kad je kartica link */
a.gcard--hover:hover{ transform:translateY(-5px); box-shadow:var(--sh-lift),var(--hi-inset); }

/* Staklena sekcija-kontejner */
.gpanel{
  position:relative;
  border-radius:var(--r-card);
  padding:clamp(24px,3.2vw,44px);
  background:var(--glass);
  border:1px solid var(--glass-brd);
  box-shadow:var(--sh-card),var(--hi-inset);
  backdrop-filter:blur(var(--blur)) saturate(1.35);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.35);
}

/* Specularni odsjaj je na KRAJU fajla, u odeljku „DOTERIVANJE".
   Mora da stoji posle svakog pravila koje koristi skraćenicu `background:`
   nad .pcard__cap i .entry__panel — skraćenica briše background-image i
   odsjaj bi bio mrtav kod. (Kartice na fotografiji su otpale u run-u 10.) */

/* ============================================================
   DUGMAD
   ============================================================ */
.pill{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  padding:var(--s3) var(--s6); border-radius:var(--r-pill);
  border:1px solid var(--glass-brd);
  background:var(--glass-2);
  color:var(--ink);
  font-family:var(--ui); font-size:.92rem; font-weight:600;
  cursor:pointer; white-space:nowrap;
  backdrop-filter:blur(var(--blur-soft)) saturate(1.3);
  -webkit-backdrop-filter:blur(var(--blur-soft)) saturate(1.3);
  box-shadow:var(--sh-card),var(--hi-inset);
  transition:transform var(--fast) var(--ease), background var(--fast) var(--ease),
             color var(--fast) var(--ease), border-color var(--fast) var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.pill:hover{ transform:translateY(-2px); }
.pill svg{ width:15px; height:15px; flex:0 0 auto; transition:transform var(--fast) var(--ease); }
.pill:hover svg{ transform:translate(2px,-2px); }

.pill--solid{ background:var(--blue-deep); border-color:var(--blue-deep); color:var(--on-accent); }
.pill--solid:hover{ background:var(--blue); border-color:var(--blue); }
.pill--bronze{ background:var(--bronze); border-color:var(--bronze); color:#0A111C; }
.pill--bronze:hover{ background:var(--bronze-hi); border-color:var(--bronze-hi); }
.pill--ghost{ background:transparent; box-shadow:none; border-color:var(--line-2); }
.pill--ghost:hover{ border-color:var(--blue-deep); color:var(--blue-deep); }
[data-theme="dark"] .pill--ghost:hover{ color:var(--blue-lite); border-color:var(--blue-lite); }
.pill--sm{ padding:var(--s2) var(--s4); font-size:.875rem; }

/* Kružno dugme sa strelicom */
.circ{
  width:48px; height:48px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:1px solid var(--glass-brd);
  background:var(--glass-2);
  color:var(--ink);
  cursor:pointer;
  box-shadow:var(--hi-inset);
  backdrop-filter:blur(var(--blur-soft));
  -webkit-backdrop-filter:blur(var(--blur-soft));
  transition:transform var(--fast) var(--ease), background var(--fast) var(--ease),
             border-color var(--fast) var(--ease), color var(--fast) var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.circ svg{ width:18px; height:18px; transition:transform var(--fast) var(--ease); }
.circ:hover{ background:var(--blue-deep); border-color:var(--blue-deep); color:#fff; }
.circ:hover svg{ transform:translate(2px,-2px); }
.circ--solid{ background:var(--blue-deep); border-color:var(--blue-deep); color:#fff; }
.circ--solid:hover{ background:var(--blue); border-color:var(--blue); }
.circ--sm{ width:40px; height:40px; }
.circ--sm svg{ width:16px; height:16px; }

/* Chip / filter pilula */
.chip{
  display:inline-flex; align-items:center; gap:var(--s2);
  padding:var(--s2) var(--s4); border-radius:var(--r-pill);
  border:1px solid var(--line-2);
  background:transparent; color:var(--ink-2);
  font-size:.875rem; font-weight:600; cursor:pointer; white-space:nowrap;
  transition:background var(--fast) var(--ease), color var(--fast) var(--ease),
             border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
a.chip:hover,button.chip:hover{ transform:translateY(-2px); border-color:var(--blue-deep); color:var(--blue-deep); }
[data-theme="dark"] a.chip:hover,[data-theme="dark"] button.chip:hover{ color:var(--blue-lite); border-color:var(--blue-lite); }
.chip.is-on{ background:var(--blue-deep); border-color:var(--blue-deep); color:#fff; }
.chip--mono{ font-family:var(--mono); font-weight:500; font-size:.875rem; color:var(--blue-deep); background:rgba(0,47,143,.06); }
[data-theme="dark"] .chip--mono{ color:var(--bronze-hi); background:rgba(193,128,47,.1); border-color:rgba(193,128,47,.3); }
.chip--static{ cursor:default; }
.chip--static:hover{ transform:none; }

.tlink{
  display:inline-flex; align-items:center; gap:var(--s2);
  color:var(--blue-deep); font-weight:600; font-size:.92rem;
  transition:gap var(--fast) var(--ease), color var(--fast) var(--ease);
}
[data-theme="dark"] .tlink{ color:var(--blue-lite); }
.tlink:hover{ gap:var(--s3); color:var(--bronze-ink); }
.tlink svg{ width:14px; height:14px; }

/* ============================================================
   SHELL — spoljni zaobljeni kontejner sa fotografijom
   ============================================================ */
.shell{
  position:relative;
  margin:var(--shell-inset);
  border-radius:var(--r-shell);
  overflow:hidden;
  isolation:isolate;
  min-height:min(92svh,940px);
  display:flex; flex-direction:column;
}
/* Zaglavlje podstrane — isti kontejner, niži */
.shell--page{ min-height:min(68svh,600px); }
/* Run 13: heroj početne je TAČNO jedan ekran na svakoj širini — visina,
   ne min-height, pa ne raste ni kad sadržaj hoće. Oduzima se samo spoljni
   okvir (--shell-inset gore i dole), da zaobljeni kontejner i dalje stoji
   odmaknut od ivice prozora. Na telefonu se oduzima i tab traka (niže, u
   „MOBILNA KOMPOZICIJA HEROJA"). Prvi red je `vh` zamena za pregledače
   bez `svh`. */
.shell:not(.shell--page){
  height:calc(100vh - 2 * var(--shell-inset));
  height:calc(100svh - 2 * var(--shell-inset));
  min-height:0;
}
/* Zbijanje rail-a je iz .shell--page prešlo na same klase .rail--sm i
   .rail--xs (run 7): rail više nije u .shell-u, pa njegova veličina ne
   zavisi od vrste strane nego samo od visine prozora. */
.shell--page .hero__body{ justify-content:flex-end; text-align:left; padding-bottom:var(--s7); }
/* Run 12: na telefonu traka pluta preko vrha zaglavlja; kad tekst (od
   run-a 12 na 14 px) naraste, putanja „Početna / …" je išla ispod trake.
   Telo zato počinje tek ispod nje. */
@media (max-width:900px){ .shell--page .hero__body{ padding-top:calc(var(--bar-h) + var(--s4)); } }
@media (min-width:901px){ .shell--page .hero__body{ padding-left:var(--s11); } }
.shell--page .hero__title{ margin:0; max-width:18ch; text-align:left; }
.shell--page .hero__p{ margin-left:0; text-align:left; }
.crumbs{
  display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap;
  font-family:var(--mono); font-size:.875rem; letter-spacing:.04em;
  color:rgba(255,255,255,.88); margin:0 0 var(--s4);
}
.crumbs a{ color:rgba(255,255,255,.88); }
.crumbs a:hover{ color:var(--bronze-hi); }
.crumbs b{ color:#fff; font-weight:600; }
.phero__meta{ display:flex; flex-wrap:wrap; gap:var(--s2); margin:var(--s5) 0 0; padding:0; list-style:none; }
.phero__meta li{
  font-family:var(--mono); font-size:.875rem;
  padding:var(--s2) var(--s3); border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.34); color:#fff;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(var(--blur-soft)); -webkit-backdrop-filter:blur(var(--blur-soft));
}

/* CTA traka */
.cta{ position:relative; border-radius:var(--r-shell); overflow:hidden; padding:clamp(28px,4vw,56px); }
.cta__img{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; }
.cta::after{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(100deg, rgba(6,12,24,.9), rgba(6,12,24,.62)); }
.cta__in{ position:relative; z-index:2; display:grid; gap:var(--s5); align-items:center; color:#fff; }
@media (min-width:860px){ .cta__in{ grid-template-columns:1.4fr auto; gap:var(--s7); } }
.cta__in p{ color:rgba(255,255,255,.84); max-width:52ch; margin-top:var(--s2); }
.cta__acts{ display:flex; gap:var(--s2); flex-wrap:wrap; }

.shell__bg{ position:absolute; inset:0; z-index:0; }
.shell__slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  background-repeat:no-repeat; background-color:var(--bg-2);
  opacity:0; transform:scale(1);
  transition:opacity 1.6s var(--ease);
  will-change:opacity,transform;
}
.shell__slide.is-on{ opacity:1; animation:kenburns 7.6s linear forwards; }
@keyframes kenburns{ from{ transform:scale(1); } to{ transform:scale(1.06); } }

/* Zastor — naslov mora da se čita na svakoj fotografiji.
   Tri sloja: opšti vertikalni, opšti dijagonalni i traka pojačanog
   zatamnjenja tačno preko pojasa u kome stoje naslov i pasus.
   Izmereno na sve tri fotografije, obe teme: najgori slučaj ≥ 4,5:1. */
.shell__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    /* 1) Meka elipsa tačno preko bloka sa naslovom i pasusom. Uska je
          namerno — fotografija desno ostaje vidljiva kao u referenci. */
    radial-gradient(ellipse 60% 40% at 42% 34%,
      rgba(6,12,24,.66) 0%, rgba(6,12,24,.54) 44%, rgba(6,12,24,.2) 72%, rgba(6,12,24,0) 88%),
    /* 2) Opšti vertikalni — vrh za traku, dno za kartice */
    linear-gradient(to bottom, rgba(6,12,24,.5) 0%, rgba(6,12,24,.2) 28%, rgba(6,12,24,.4) 62%, rgba(6,12,24,.8) 100%),
    /* 3) Opšti dijagonalni */
    linear-gradient(100deg, rgba(6,12,24,.44) 0%, rgba(6,12,24,.16) 52%, rgba(6,12,24,.34) 100%);
}
/* Na zaglavljima podstrana tekst stoji dole levo. */
.shell--page .shell__scrim{
  background:
    radial-gradient(ellipse 66% 52% at 34% 72%,
      rgba(6,12,24,.68) 0%, rgba(6,12,24,.54) 46%, rgba(6,12,24,.2) 74%, rgba(6,12,24,0) 90%),
    linear-gradient(to bottom, rgba(6,12,24,.5) 0%, rgba(6,12,24,.22) 34%, rgba(6,12,24,.5) 100%),
    linear-gradient(100deg, rgba(6,12,24,.44) 0%, rgba(6,12,24,.18) 54%, rgba(6,12,24,.34) 100%);
}
/* Zaglavlje sa svetlom fotografijom — samo na uskim širinama.
   Na uskom ekranu se kadar kadrira bliže (object-fit:cover), pa pod natpis
   ume da dođe najsvetliji deo slike. Kalaj je na 360/390 davao 2,97:1, ispod
   praga 3,0 za krupan tekst. Dodaje se JOŠ JEDAN sloj preko bloka sa
   tekstom — fotografija i boja slova ostaju netaknute, a od 901px naviše
   ovo pravilo i ne postoji, pa je izgled na desktopu isti. */
/* Run 12: akcentna reč u naslovu — boja teksta iz teme, ne ugrađena
   (plava je na tamnom staklu davala 1,03:1, bronza na svetlom 2,7:1). */
.acc-bronze{ color:var(--bronze-ink); }
.acc-blue{ color:var(--blue-deep); }
[data-theme="dark"] .acc-blue{ color:var(--blue-lite); }

/* Run 12: pojačani sloj važi za SVA zaglavlja podstrana na uskom ekranu —
   i livnica (livenje, užareni metal) je davala 2,5:1 pod pasusom. */
@media (max-width:900px){
  .shell--page .shell__scrim{
    background:
      radial-gradient(ellipse 104% 62% at 32% 76%,
        rgba(6,12,24,.74) 0%, rgba(6,12,24,.52) 54%, rgba(6,12,24,.12) 82%, rgba(6,12,24,0) 100%),
      radial-gradient(ellipse 66% 52% at 34% 72%,
        rgba(6,12,24,.68) 0%, rgba(6,12,24,.54) 46%, rgba(6,12,24,.2) 74%, rgba(6,12,24,0) 90%),
      linear-gradient(to bottom, rgba(6,12,24,.7) 0%, rgba(6,12,24,.46) 30%, rgba(6,12,24,.3) 52%, rgba(6,12,24,.5) 100%),
      linear-gradient(100deg, rgba(6,12,24,.44) 0%, rgba(6,12,24,.18) 54%, rgba(6,12,24,.34) 100%);
  }
}

.shell__in{ position:relative; z-index:2; display:flex; flex-direction:column; flex:1; width:100%; }

/* ============================================================
   GORNJA TRAKA — fiksna na svim stranicama, morfuje u zbijenu
   ------------------------------------------------------------
   U mirovanju stoji unutar gabarita zaobljenog heroja (providna,
   široki odmaci). Posle ~80px skrola dobija staklo, senku i zbija
   se na --bar-h. Ne krije se pri skrolu naniže — prati skrol stalno.
   Namerno je fiksna i u mirovanju: tako prelaz nema skoka, a
   povratak na vrh se vraća istom krivom unazad.
   ============================================================ */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:150;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:var(--s3);
  padding:calc(var(--shell-inset) + var(--s4)) calc(var(--shell-inset) + var(--s4));
  border-bottom:1px solid transparent;
  pointer-events:none;
  transition:padding var(--mid) var(--ease), background-color var(--mid) var(--ease),
             box-shadow var(--mid) var(--ease), border-color var(--mid) var(--ease);
}
.topbar a,.topbar button,.topbar form{ pointer-events:auto; }
.topbar.is-stuck{ pointer-events:auto; }

/* Tačno centriranje pronalazača po X osi — dve jednake 1fr kolone sa
   strane garantuju da je srednja kolona uvek u sredini kontejnera,
   bez obzira na širinu logotipa levo i dugmadi desno. */
@media (min-width:901px){
  .topbar{ grid-template-columns:1fr auto 1fr; gap:var(--s4);
           padding:calc(var(--shell-inset) + var(--s5)) calc(var(--shell-inset) + var(--s5)); }
}
.topbar__side{ display:flex; align-items:center; gap:var(--s2); min-width:0; justify-self:start; }
.topbar__mid{ grid-column:2; justify-self:center; display:flex; justify-content:center; min-width:0; }
.topbar__side--end{ grid-column:3; justify-self:end; }

/* ---------- Zbijeno stanje ---------- */
.topbar.is-stuck{
  padding:var(--s2) var(--gutter);
  min-height:var(--bar-h);
  background-color:var(--glass-2);
  border-bottom-color:var(--glass-brd);
  box-shadow:var(--sh-card),var(--hi-inset);
  backdrop-filter:blur(var(--blur)) saturate(1.35);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.35);
}
/* Skrol-traka je donja ivica zbijene trake (stavka 12). */
.topbar__prog{
  position:absolute; left:0; right:0; bottom:-1px; height:2px;
  opacity:0; pointer-events:none; overflow:hidden;
  transition:opacity var(--mid) var(--ease);
}
.topbar.is-stuck .topbar__prog{ opacity:1; }
.topbar__prog i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--bronze),var(--bronze-hi));
}

/* ---------- Logotip u piluli ---------- */
.brandpill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:var(--s2) var(--s5); border-radius:var(--r-pill);
  background:rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:var(--sh-card), inset 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter:blur(var(--blur-soft)) saturate(1.3);
  -webkit-backdrop-filter:blur(var(--blur-soft)) saturate(1.3);
  transition:transform var(--fast) var(--ease), background var(--fast) var(--ease);
}
.brandpill:hover{ transform:translateY(-2px); background:rgba(255,255,255,.96); }
/* Uvek ceo logotip („NT Neotehnika"), nikad samo NT znak. */
.brandpill img{ width:clamp(112px,11vw,164px); height:auto; }
.topbar.is-stuck .brandpill{ padding:var(--s2) var(--s4); }
.topbar.is-stuck .brandpill img{ width:clamp(108px,9vw,142px); }
/* Zbijeno stanje cilja ~64px ukupne visine. */
.topbar.is-stuck .circ{ width:44px; height:44px; }
.topbar.is-stuck .circ svg{ width:16px; height:16px; }
.topbar.is-stuck .topbar__pill{ padding:var(--s3) var(--s5); font-size:.875rem; }
.topbar.is-stuck .burger{ width:44px; height:44px; }

/* Brend u mobilnom meniju */
.brand{ display:inline-flex; align-items:center; gap:var(--s2); }
.brand img{ height:40px; width:auto; }
@media (min-width:1024px){ .brand img{ height:48px; } }

/* Telefon i Instagram stoje u gornjoj traci — izričit zahtev klijenta.
   U mirovanju su na fotografiji (beli), u zbijenoj traci na staklu. */
.topbar__phone,.topbar__ig{ color:#fff; border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.14); }
.topbar__phone:hover,.topbar__ig:hover{ background:var(--blue-deep); border-color:var(--blue-deep); color:#fff; }
.burger{ color:#fff; border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.14); }
.topbar.is-stuck .topbar__phone,
.topbar.is-stuck .topbar__ig,
.topbar.is-stuck .burger{ color:var(--ink); border-color:var(--line-2); background:transparent; }
/* Otvoren meni je puna svetla (ili tamna) površina ispod trake: dugmad
   više nisu na fotografiji, pa uzimaju boje zbijene trake. */
.mnav.is-open ~ .topbar .topbar__phone,
.mnav.is-open ~ .topbar .burger{ color:var(--ink); border-color:var(--line-2); background:var(--glass-2); }
.topbar.is-stuck .topbar__phone:hover,
.topbar.is-stuck .topbar__ig:hover{ background:var(--blue-deep); border-color:var(--blue-deep); color:#fff; }

/* Tihi podsetnik na dežurnu liniju — jedan prsten svakih 8 s (stavka 14) */
.topbar__phone{ position:relative; }
.topbar__phone::after{
  content:''; position:absolute; inset:-3px; border-radius:50%;
  border:2px solid var(--bronze); opacity:0; pointer-events:none;
  animation:ringPulse 8s var(--ease) infinite;
}
@keyframes ringPulse{
  0%,86%{ transform:scale(1); opacity:0; }
  89%{ transform:scale(1); opacity:.8; }
  100%{ transform:scale(1.6); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .topbar__phone::after{ animation:none; display:none; } }

/* Ispod 1180px „Prodajni program" izlazi iz trake da pronalazač ostane
   čitav i tačno centriran; ulaz ostaje u rail-u i u burger meniju. */
@media (max-width:1180px){ .topbar__pill{ display:none; } }
@media (max-width:900px){
  /* Mobilna traka: logo levo, „Pronađi" u sredini, telefon + burger desno.
     Instagram ide u burger meni (vidi DESIGN-SYSTEM.md). */
  .topbar{ padding:var(--s3) var(--s4); gap:var(--s2); }
  .finder-mini{ padding:var(--s2) var(--s3); }
  .topbar.is-stuck{ padding:var(--s2) var(--s4); }
  .topbar__ig{ display:none; }
  .topbar__side--end{ gap:var(--s1); }
  .brandpill{ padding:var(--s2) var(--s3); }
  .brandpill img{ width:104px; }
  .topbar.is-stuck .brandpill img{ width:100px; }
}
/* Run 10 — pilula „Pronađi" je centrirana na SVAKOJ širini, i na 360.
   Run 7 je to rešavao simetričnim kolonama i tu je i stao: da obe bočne
   kolone budu široke koliko šira od njih (logotip, 110px), traci treba
   110 + 8 + 102 + 8 + 110 = 338px, a na 360 je raspoloživo 328. Jedini
   način da to stane bio bi logotip uži od 96px — ispod donje granice iz
   zadatka, a on je na ≤430 već na 88px.
   Zato se srednja kolona vadi iz toka i kači na sredinu same trake.
   Bočne stavke zadržavaju prirodnu širinu, logotip se ne dira, a centar
   pilule pada na centar ekrana do na piksel. Provereno je i da se pilula
   ne dodiruje sa logotipom ni sa desnim parom na 360.

   Centriranje ide BEZ `transform`-a namerno: donji panel pronalazača je
   `position:fixed`, a transform na pretku bi mu postao koordinatni okvir
   i panel bi se zalepio za traku umesto za ekran. Zato se srednja kolona
   razvlači preko cele trake i centrira sadržaj flex-om. */
@media (max-width:900px){
  .topbar__mid{
    /* `grid-column:1/-1` je ovde nosivo: apsolutni potomak grid
       kontejnera meri `left/right` prema SVOJOJ GRID OBLASTI, ne prema
       traci. Dok je oblast bila druga kolona, `left:0;right:0` ju je samo
       ponovilo i pilula je ostajala pomerena. Preko svih kolona oblast je
       ceo sadržajni pojas trake, a on je simetričan. */
    grid-column:1 / -1;
    position:absolute; left:0; right:0; top:0; bottom:0;
    display:flex; align-items:center; justify-content:center;
    justify-self:auto; pointer-events:none;
  }
}
@media (max-width:430px){
  .brandpill{ padding:var(--s2) var(--s2); }
  .brandpill img,.topbar.is-stuck .brandpill img{ width:88px; }
  .topbar__phone{ width:40px; height:40px; }
  .topbar__phone svg{ width:16px; height:16px; }
}

/* Ikone teme — prikazuje se ona koja opisuje sledeće stanje */
.th-sun{ display:none; }
[data-theme="dark"] .th-sun{ display:block; }
[data-theme="dark"] .th-moon{ display:none; }
.th-sun svg,.th-moon svg{ width:19px; height:19px; }

/* ---------- Finder (tri polja) ---------- */
.finder{
  display:flex; align-items:stretch; gap:0;
  border-radius:var(--r-pill);
  background:var(--glass-2);
  border:1px solid var(--glass-brd);
  box-shadow:var(--sh-card),var(--hi-inset);
  backdrop-filter:blur(var(--blur)) saturate(1.35);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.35);
  padding:var(--s1);
  max-width:100%;
}
.finder__f{
  position:relative; display:flex; flex-direction:column; justify-content:center;
  padding:var(--s1) var(--s4); min-width:0;
  border-right:1px solid var(--line);
}
.finder__f:last-of-type{ border-right:0; }
.finder__l{
  display:flex; align-items:center; gap:var(--s1);
  font-size:.875rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:1px;
}
.finder__l svg{ width:11px; height:11px; }
.finder select,.finder input{
  border:0; background:none; padding:0; margin:0;
  font-size:.88rem; font-weight:600; color:var(--ink);
  appearance:none; cursor:pointer; min-width:0; width:100%;
  padding-right:var(--s4);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237A8699' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right center;
}
.finder input{ background-image:none; cursor:text; font-family:var(--mono); font-size:.875rem; }
.finder select:focus,.finder input:focus{ outline:none; color:var(--blue-deep); }
[data-theme="dark"] .finder select:focus,[data-theme="dark"] .finder input:focus{ color:var(--blue-lite); }
.finder__go{ margin-left:var(--s1); align-self:center; }
.finder__x{ display:none; }

/* ---------- „Pronađi" — zbijeni oblik pronalazača ----------
   U zbijenoj traci tri polja se skupljaju u jednu pilulu. Klik je
   na desktopu razvija natrag u traci, na mobilnom otvara donji panel. */
.finder-mini{ display:none; }
.finder-mini svg{ width:16px; height:16px; }
@media (min-width:901px){
  .topbar.is-stuck .finder{ display:none; }
  .topbar.is-stuck .finder-mini{ display:inline-flex; }
  .topbar.is-stuck.is-finder .finder{ display:flex; animation:finderPop var(--mid) cubic-bezier(.2,1.3,.42,1); }
  .topbar.is-stuck.is-finder .finder-mini{ display:none; }
}
@keyframes finderPop{
  from{ opacity:0; transform:scale(.86); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .topbar.is-stuck.is-finder .finder{ animation:none; }
}

/* Na mobilnom finder postaje donji panel koji otvara pilula „Pronađi". */
@media (max-width:900px){
  .finder-mini{ display:inline-flex; }
  .finder{
    position:fixed; left:0; right:0; bottom:0; z-index:140;
    flex-direction:column; align-items:stretch; gap:var(--s2);
    /* Donji panel mora da nadvisi tab traku, inače dugme „pretraži" ostane ispod nje. */
    padding:var(--s5) var(--s4) calc(var(--s5) + 78px + env(safe-area-inset-bottom));
    border-radius:var(--r-card) var(--r-card) 0 0;
    transform:translateY(112%); visibility:hidden;
    transition:transform var(--slow) var(--ease), visibility var(--slow);
  }
  .finder.is-open{ transform:none; visibility:visible; }
  /* Polja ne smeju da prerastu panel ni preko sadržaja ni preko izvornog
     <select>-a: širina je puna, ali ograničena, a prelivanje se seče
     tročlanom tačkom u samom polju (.csel__v to već radi). */
  .finder__f{
    border-right:0; border-bottom:1px solid var(--line); padding:var(--s2) var(--s2);
    min-width:0; width:100%; max-width:100%;
  }
  .finder__f:last-of-type{ border-bottom:0; }
  .finder select,.finder input{ max-width:100%; box-sizing:border-box; }
  /* Dugme za zatvaranje stoji UNUTAR odmaka panela (bio je na 14px, a
     odmak je 16px — pola dugmeta je visilo preko ivice). */
  /* --s6, ne --s4: `right` se meri od padding-boksa panela, a odmak panela
     je već --s4, pa bi 16px dalo tačno nula zazora do unutrašnje ivice.
     24px ostavlja traženih 8px. */
  .finder__x{ display:inline-flex; position:absolute; right:var(--s6); top:var(--s6); }
  .finder__go{ margin:var(--s1) 0 0; align-self:stretch; width:100%; border-radius:var(--r-pill); }
  .finder-backdrop{
    position:fixed; inset:0; z-index:135; background:rgba(5,9,15,.5);
    opacity:0; visibility:hidden; transition:opacity var(--mid) var(--ease), visibility var(--mid);
  }
  .finder-backdrop.is-on{ opacity:1; visibility:visible; }
}

/* ---------- Levi rail — fiksan, prati skrol (run 7) ----------
   Rail je izašao iz .shell-a i stoji kao samostalan element neposredno
   pre <main>, istim potezom kojim je u v2.1 izašla gornja traka: unutar
   .shell-a (overflow:hidden, isolation:isolate) fiksan element nema šta
   da traži. Levi odmak je isti kao i pre — bio je var(--s5) unutar
   .shell-a, koji sam stoji na var(--shell-inset) od ivice ekrana — pa na
   skrolu 0 ništa nije pomereno.
   Vertikalno je u sredini prozora. Gornju granicu (dno trake + 16px) i
   donju (plutajuće dugme asistenta) računa js/app.js i upisuje --rail-y;
   bez skripte rail ostaje na 50%, što je tačno na svim uobičajenim
   visinama prozora. */
.rail{
  position:fixed; left:var(--rail-x); top:var(--rail-y,50%); transform:translateY(-50%);
  z-index:120;
  display:flex; flex-direction:column; gap:var(--s4);
  padding:var(--s2);
  border-radius:var(--r-pill);
  background:var(--glass);
  border:1px solid var(--glass-brd);
  box-shadow:var(--sh-card),var(--hi-inset);
  backdrop-filter:blur(var(--blur)) saturate(1.35);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.35);
  transition:top var(--fast) var(--ease), background-color var(--fast) var(--ease),
             box-shadow var(--fast) var(--ease), backdrop-filter var(--fast) var(--ease);
}
/* Preko fotografije heroja staklo od .74 je dovoljno. Čim rail pređe na
   svetle sekcije, ta providnost ga rastopi u pozadinu, pa dobija jače
   zamućenje i dublju senku. */
.rail.is-past{
  background:var(--glass-2);
  box-shadow:var(--sh-lift),var(--hi-inset);
  backdrop-filter:blur(calc(var(--blur) + 12px)) saturate(1.5);
  -webkit-backdrop-filter:blur(calc(var(--blur) + 12px)) saturate(1.5);
}
@media (prefers-reduced-motion: reduce){ .rail{ transition:none; } }
.rail__g{ display:flex; flex-direction:column; gap:var(--s1); }
.rail__g + .rail__g{ padding-top:var(--s4); border-top:1px solid var(--line); }
.rail a,.rail button{
  width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; border:0; background:transparent;
  color:var(--ink-2); cursor:pointer;
  transition:background var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.rail svg{ width:19px; height:19px; }
.rail a:hover,.rail button:hover{ background:var(--line); color:var(--ink); transform:translateY(-2px); }
.rail a[aria-current="page"]{ background:var(--blue-deep); color:#fff; }
.rail a[aria-current="page"]:hover{ background:var(--blue); color:#fff; }
/* Na naslovnoj rail prati i sekciju u vidnom polju. Dok je neka sekcija
   označena, oznaka tekuće STRANE se stišava — inače svetle dve. */
.rail a.is-sect{ background:var(--blue-deep); color:#fff; }
.rail a.is-sect:hover{ background:var(--blue); color:#fff; }
.rail.has-sect a[aria-current="page"]:not(.is-sect){ background:transparent; color:var(--ink-2); }
.rail.has-sect a[aria-current="page"]:not(.is-sect):hover{ background:var(--line); color:var(--ink); }
.rail .is-bronze{ color:var(--bronze); }

/* ---------- Zbijene varijante rail-a ----------
   Moraju da stoje POSLE osnovnih pravila .rail a / .rail svg: iste su
   specifičnosti (0,1,1), pa odlučuje redosled. */
.rail--sm{ padding:var(--s2); }
.rail--sm a,.rail--sm button{ width:40px; height:40px; }
.rail--sm svg{ width:18px; height:18px; }
.rail--xs{ padding:var(--s1); gap:var(--s2); }
.rail--xs .rail__g{ gap:var(--s1); }
.rail--xs .rail__g + .rail__g{ padding-top:var(--s2); }
.rail--xs a,.rail--xs button{ width:36px; height:36px; }
.rail--xs svg{ width:16px; height:16px; }
/* Ni najzbijeniji rail nema gde da stane između gornje trake i dugmeta
   asistenta; navigaciju tada nose traka i burger. Retka kombinacija —
   širok a vrlo nizak prozor. */
.rail.is-off{ display:none; }
@media (max-width:900px){ .rail{ display:none; } }

/* ---------- Oblačići rail-a ----------
   Ikone same po sebi ne govore šta rade. Natpis izlazi udesno na hover
   i na fokus tastaturom. Na dodirnim uređajima rail je donja tab traka
   i svaki taster već ima ispisan natpis — tada oblačića nema. */
.rail a,.rail button{ position:relative; }
.rtip{
  position:absolute; left:calc(100% + 13px); top:50%;
  transform:translate(-7px,-50%);
  padding:var(--s2) var(--s3); border-radius:var(--r-pill);
  background:var(--glass-2); border:1px solid var(--glass-brd);
  box-shadow:var(--sh-card),var(--hi-inset);
  backdrop-filter:blur(var(--blur)) saturate(1.35);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.35);
  color:var(--ink); font-family:var(--ui); font-size:.875rem; font-weight:600;
  line-height:1.2; white-space:nowrap;
  opacity:0; visibility:hidden; pointer-events:none; z-index:9;
  transition:opacity var(--fast) var(--ease), transform var(--fast) var(--ease), visibility var(--fast);
}
/* Strelica ka ikoni */
.rtip::before{
  content:''; position:absolute; left:-5px; top:50%; margin-top:-4px;
  width:8px; height:8px; transform:rotate(45deg);
  background:var(--glass-2);
  border-left:1px solid var(--glass-brd); border-bottom:1px solid var(--glass-brd);
}
.rail a:hover .rtip,.rail button:hover .rtip,
.rail a:focus-visible .rtip,.rail button:focus-visible .rtip{
  opacity:1; visibility:visible; transform:translate(0,-50%);
}
@media (hover:none){ .rtip{ display:none; } }

/* ---------- Hero sadržaj ---------- */
.hero__body{
  flex:1; display:flex; flex-direction:column; justify-content:center;
  padding:var(--s8) var(--s5);
  text-align:center;
}
@media (min-width:901px){ .hero__body{ padding-left:var(--s11); padding-right:var(--s11); } }
/* Run 10 je ovde dodavao 25px gornjeg odmaka da poništi donji odmak
   heroja ispod spec trake. Run 13 je traku spustio ispod heroja, pa je
   telo opet simetrično i naslov sam pada na sredinu (~48 %, mereno).
   Pomeranje ide odmakom, nikad `transform`-om: transform na .hero__body
   bi postao koordinatni okvir prstena, koji je njegovo dete. */
@media (min-width:901px){
  /* Optički centar malo iznad geometrijskog: 4svh više dole pomera
     naslov za 2 % visine heroja — na ~48 % (zadatak: 46–50 %). */
  .shell:not(.shell--page) .hero__body{ padding-bottom:calc(var(--s8) + 4svh); }
}
/* Od 1440 naviše naslov i prsten se ne dodiruju ni kad je naslov centriran
   preko celog heroja — izmereno. Ispod toga se dodiruju, jer prsten ima
   donju granicu od 260px koja na 1024 zauzima četvrtinu širine. Tamo se
   naslovu rezerviše pojas levo od prstena i on se centrira U NJEMU; oko
   to čita kao ravnotežu, ne kao pomeraj. */
@media (min-width:1024px) and (max-width:1439px){
  .shell:not(.shell--page) .hero__body{
    padding-right:calc(76px + clamp(260px,22vw,340px) + var(--s4));
  }
}
.hero__title{
  color:rgba(255,255,255,.94); margin:0 auto; max-width:16ch;
  /* Meka senka lokalno podiže čitljivost preko svetlih detalja fotografije. */
  text-shadow:0 2px 26px rgba(4,9,18,.55);
}
.hero__title em{ font-style:normal; display:block; }
.hero__title .bz{ color:var(--bronze-hi); }
.hero__p{
  margin:var(--s6) 0 0; color:rgba(255,255,255,.88);
  max-width:46ch; text-align:left; font-size:clamp(.94rem,1.3vw,1.06rem);
  text-shadow:0 1px 14px rgba(0,0,0,.5);
}
@media (min-width:901px){ .hero__p{ margin-left:0; } }
@media (max-width:900px){ .hero__p{ margin-inline:auto; text-align:center; } }

/* Na mobilnom dugmad idu jedno ispod drugog, puna širina — po specifikaciji. */
.hero__acts{ display:flex; flex-direction:column; gap:var(--s3); margin-top:var(--s7); }
.hero__acts .pill{ width:100%; }
@media (min-width:901px){ .hero__acts{ display:none; } }

/* ---------- Strelice slajdera ----------
   Diskretne, na unutrašnjim ivicama heroja. Leva stoji desno od rail-a
   da ga ne prekrije. Ispod 900px nema ih — tamo radi prevlačenje. */
.shell__arw{
  position:absolute; top:50%; margin-top:-22px; z-index:6;
  width:44px; height:44px; opacity:.55;
  color:#fff; background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.42);
  backdrop-filter:blur(var(--blur-soft)); -webkit-backdrop-filter:blur(var(--blur-soft));
  transition:opacity var(--fast) var(--ease), background var(--fast) var(--ease);
}
.shell__arw:hover{ opacity:1; background:rgba(255,255,255,.3); border-color:rgba(255,255,255,.6); }
.shell__arw:focus-visible{ opacity:1; }
.shell__arw svg{ width:17px; height:17px; }
/* .circ pomera strelicu dijagonalno na hover — ovde to nema smisla. */
.shell__arw:hover svg{ transform:none; }
.shell__arw--p{ left:calc(var(--s5) + 78px); }
.shell__arw--n{ right:var(--s5); }
@media (max-width:900px){ .shell__arw{ display:none; } }

/* Indikatori slajdova */
.dots{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  z-index:7; display:flex; gap:var(--s2);
  padding:var(--s2) var(--s2); border-radius:var(--r-pill);
  background:rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.dots button{
  width:22px; height:5px; padding:0; border:0; border-radius:var(--r-pill);
  background:rgba(255,255,255,.5); cursor:pointer;
  transition:background var(--fast) var(--ease), width var(--fast) var(--ease);
}
.dots button.is-on{ background:var(--bronze-hi); width:34px; }
/* Run 10: tačkice su i na telefonu deo kompozicije (peti blok), pa se
   više ne kriju ispod 1024. */

/* ---------- Spec traka ispod hero-a ----------
   Run 13: traka više NE naleće na donju ivicu heroja (to je uveo run 10).
   Stoji ispod njega, na istom razmaku kao ostali stakleni blokovi, pa se
   vide sva četiri zaobljena ugla heroja. */
.specbar{
  margin:var(--s4) var(--shell-inset) 0;
  border-radius:var(--r-card);
  display:grid; grid-template-columns:repeat(2,1fr);
  overflow:hidden;
  /* run 12: gušće staklo (jedinice 3,7:1 dok je traka ležala na fotografiji) */
  background:var(--glass-2);
  border:1px solid var(--glass-brd);
  box-shadow:var(--sh-card),var(--hi-inset);
  backdrop-filter:blur(var(--blur)) saturate(1.35);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.35);
}
@media (min-width:768px){ .specbar{ grid-template-columns:repeat(4,1fr); } }
.specbar__i{ padding:clamp(18px,2.4vw,28px); border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
/* Run 12 (otvoreno iz run-a 10): na desktopu traka sedi na dnu prvog
   ekrana, tačno u visini plutajućeg asistenta levo dole. Prva ćelija
   zato počinje tek desno od njega — broj „1999" više nije ispod dugmeta. */
@media (min-width:901px){
  .specbar__i:first-child{ padding-left:calc(var(--gutter) + var(--fab) + var(--s2) - var(--shell-inset)); }
}
@media (min-width:768px){ .specbar__i{ border-bottom:0; } .specbar__i:last-child{ border-right:0; } }
@media (max-width:767px){ .specbar__i:nth-child(2n){ border-right:0; } .specbar__i:nth-last-child(-n+2){ border-bottom:0; } }
.specbar__v{
  font-family:var(--display); font-size:clamp(1.5rem,3vw,2rem); font-weight:500;
  letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums;
}
.specbar__v i{ font-style:normal; color:var(--bronze-ink); font-size:max(.875rem,.6em); }
.specbar__k{ font-size:.875rem; color:var(--ink-3); margin-top:var(--s2); font-weight:600; }

/* ============================================================
   MOBILNA NAVIGACIJA
   ============================================================ */
.burger{
  /* Run 13: ovde namerno NEMA boje, ivice ni pozadine — dugme ih deli sa
     telefonom pored sebe (pravilo „.topbar__phone,…,.burger" gore). Ranije
     je ovo pravilo, kao kasnije u fajlu, gazilo to deljeno: bela staklena
     pozadina, a linije bele — na telefonu se videlo samo belo dugme. */
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; width:46px; height:46px; padding:0;
  border-width:1px; border-style:solid; border-radius:var(--r-pill);
  backdrop-filter:blur(var(--blur-soft)); -webkit-backdrop-filter:blur(var(--blur-soft));
  cursor:pointer; flex:0 0 auto;
  -webkit-tap-highlight-color:transparent;
}
@media (min-width:901px){ .burger{ display:none; } }
/* Ispod 431 ista mera kao telefon pored (40px). Stoji POSLE osnovnog
   pravila — ranije je bila iznad njega i osnovnih 46px ju je gazilo. */
@media (max-width:430px){ .burger{ width:40px; height:40px; } }
/* Tri linije: 18 x 2px, 5px razmaka. U X: gornja i donja se okreću oko
   sredine (pomeraj = razmak + debljina = 7px), srednja nestaje. 220 ms. */
.burger i{
  display:block; flex:0 0 auto; width:18px; height:2px;
  background:currentColor; border-radius:var(--r-pill);
  transition:transform var(--fast) var(--ease), opacity var(--fast) var(--ease);
}
.burger.is-open i:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.is-open i:nth-child(2){ opacity:0; }
.burger.is-open i:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce){ .burger i{ transition:none; } }

.mnav{
  position:fixed; inset:0; z-index:120;
  background:var(--bg);
  padding:var(--s9) var(--gutter) var(--s11);
  overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity var(--mid) var(--ease), transform var(--mid) var(--ease), visibility var(--mid);
}
.mnav.is-open{ opacity:1; visibility:visible; transform:none; }
.mnav__x{ position:absolute; right:var(--gutter); top:var(--s5); }
/* Run 13: traka stoji IZNAD otvorenog menija, pa je ovo dugme bilo skriveno
   ispod burgera (i virilo oko njega). Burger se sada pretvara u X i on
   zatvara meni — duplikat se na telefonu ne prikazuje. */
@media (max-width:900px){ .mnav__x{ display:none; } }
.mnav__list{ list-style:none; margin:var(--s7) 0 0; padding:0; }
.mnav__list > li{ border-bottom:1px solid var(--line); }
.mnav__list a{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4);
  padding:var(--s4) 2px; font-family:var(--display); font-size:1.5rem; font-weight:500; letter-spacing:-.02em;
}
.mnav__list a i{ font-family:var(--mono); font-style:normal; font-size:.875rem; color:var(--ink-3); letter-spacing:.1em; }
/* Run 13: „Prodajni program" je harmonika — tekst vodi na proizvodi.html,
   strelica desno otvara osam grupa. Dve mete, obe ≥ 44px. Zatvoreno osim
   na strani neke od grupa (to je u samom markupu, ne u JS-u). Otvaranje
   ide preko grid 0fr → 1fr, zatvaranje isto unazad pa tek onda `hidden`,
   da lista izađe iz redosleda tabova. */
.mnav__row{ display:flex; align-items:center; gap:var(--s2); }
.mnav__row > a{ flex:1 1 auto; min-width:0; min-height:48px; }
.mnav__tog{
  flex:0 0 auto; width:48px; height:48px; margin-right:-6px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line-2); border-radius:var(--r-pill);
  background:transparent; color:var(--ink); cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.mnav__tog:hover{ background:var(--bg-2); }
.mnav__tog svg{ width:20px; height:20px; transition:transform var(--mid) var(--ease); }
.mnav__tog[aria-expanded="true"] svg{ transform:rotate(180deg); }
.mnav__subw{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--mid) var(--ease); }
.mnav__subw.is-open{ grid-template-rows:1fr; }
.mnav__subw[hidden]{ display:none; }  /* inače display:grid gazi [hidden] */
.mnav__subw > .mnav__sub{ min-height:0; overflow:hidden; }
@media (prefers-reduced-motion: reduce){
  .mnav__subw,.mnav__tog svg{ transition:none; }
}
.mnav__sub{ list-style:none; margin:0; padding:0 0 var(--s3); display:grid; gap:1px; }
.mnav__sub a{ font-family:var(--ui); font-size:.95rem; font-weight:500; padding:var(--s2) 2px var(--s2) var(--s4); border-left:1px solid var(--line); }
.mnav__sub a[aria-current="page"],.mnav__sub a:hover{ color:var(--bronze-ink); border-color:var(--bronze); }
/* Run 13: plutajuća dugmad su ista z-ravan kao meni i stajala su preko
   stavki („O nama", „Kontakt"). Dok je meni otvoren — sklonjena. */
.mnav.is-open ~ .fab{ opacity:0; visibility:hidden; pointer-events:none; }
.mnav__foot{ margin-top:var(--s7); display:grid; gap:var(--s2); }
.mnav__foot a{ font-family:var(--mono); font-size:.875rem; color:var(--blue-deep); }
[data-theme="dark"] .mnav__foot a{ color:var(--blue-lite); }
.mnav__tools{ display:flex; gap:var(--s2); margin-top:var(--s5); flex-wrap:wrap; }

/* ---------- Donja tab traka (mobilni rail) ---------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:110;
  display:grid; grid-template-columns:repeat(5,1fr); align-items:center;
  /* Run 13: visina je IZRIČITO --tabbar-h. Run 12 je natpise podigao na
     14px i traka je tiho narasla na 79,7px, dok su heroj i plutajuća
     dugmad i dalje računali sa 71 — donji uglovi heroja su bili ispod
     trake. Sada je mera jedna i ista za sve. */
  height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding:var(--s1) var(--s1) calc(var(--s1) + env(safe-area-inset-bottom));
  background:var(--glass-2);
  border-top:1px solid var(--glass-brd);
  box-shadow:var(--hi-inset);
  backdrop-filter:blur(var(--blur)) saturate(1.35);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.35);
}
@media (min-width:901px){ .tabbar{ display:none; } }
.tabbar a,.tabbar button{
  display:flex; flex-direction:column; align-items:center; gap:var(--s1);
  padding:var(--s1) 2px; border:0; background:none; cursor:pointer;
  color:var(--ink-2); font-size:.875rem; font-weight:600; line-height:1.3;
  -webkit-tap-highlight-color:transparent;
}
.tabbar svg{ width:20px; height:20px; }
.tabbar a[aria-current="page"]{ color:var(--blue-deep); }
[data-theme="dark"] .tabbar a[aria-current="page"]{ color:var(--blue-lite); }
/* Sadržaj nikad ne sme da završi ispod tab trake */
@media (max-width:900px){ body{ padding-bottom:76px; } }

/* ============================================================
   BENTO — mreža zaobljenih foto-kartica
   ============================================================ */
.bento{ display:grid; gap:var(--s4); grid-template-columns:repeat(2,1fr); }
@media (min-width:760px){ .bento{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1100px){ .bento{ grid-template-columns:repeat(4,1fr); } }

.pcard{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:230px; border-radius:var(--r-card); overflow:hidden;
  padding:var(--s4);
  background:var(--bg-2);
  box-shadow:var(--sh-card);
  transition:transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.pcard--tall{ min-height:320px; }
.pcard:hover{ transform:translateY(-5px); box-shadow:var(--sh-lift); }
.pcard__img{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  transition:transform var(--slow) var(--ease);
}
.pcard:hover .pcard__img{ transform:scale(1.05); }
.pcard::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(6,12,24,.86) 0%, rgba(6,12,24,.3) 46%, rgba(6,12,24,.05) 100%);
}
.pcard__cap{
  position:relative; z-index:2;
  border-radius:var(--r-tile);
  padding:var(--s4);
  background:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter:blur(var(--blur-soft)) saturate(1.3);
  -webkit-backdrop-filter:blur(var(--blur-soft)) saturate(1.3);
  color:#0A111C;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  transition:transform var(--mid) var(--ease);
  /* U bento mreži od dva stupca natpis ima 86px unutrašnje širine, a
     naslov traži 80px i strelica još 39px. Bez prelamanja .pcard{overflow:
     hidden} preseče strelicu. Prelama se samo kad ne stane, pa šire
     kartice izgledaju isto kao i pre. */
  flex-wrap:wrap;
}
.pcard__cap > div{ min-width:0; }
.pcard__cap > .circ{ margin-left:auto; }
[data-theme="dark"] .pcard__cap{ background:rgba(12,20,34,.9); border-color:rgba(146,166,209,.22); color:var(--ink); }
.pcard__cap h3{ font-size:1.02rem; font-weight:600; }
/* run 12: staklo preko fotografije — tekst na --ink-2 (4,5:1 i nad najsvetlijim kadrom) */
.pcard__cap p{ font-size:.875rem; color:var(--ink-2); margin:2px 0 0; }
[data-theme="dark"] .pcard__cap p{ color:var(--ink-3); }

/* Dva velika ulaza */
.entries{ display:grid; gap:var(--s5); }
@media (min-width:900px){ .entries{ grid-template-columns:1fr 1fr; } }
.entry{
  position:relative; border-radius:var(--r-shell); overflow:hidden;
  min-height:420px; display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--s5);
  box-shadow:var(--sh-card);
  transition:transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
a.entry:hover{ transform:translateY(-5px); box-shadow:var(--sh-lift); }
.entry__img{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; }
.entry::after{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(6,12,24,.88), rgba(6,12,24,.25) 55%, rgba(6,12,24,.1)); }
.entry__viz{ position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.entry__viz svg{ width:min(74%,320px); height:auto; opacity:.9; overflow:visible; }
.entry__panel{
  position:relative; z-index:2;
  border-radius:var(--r-card); padding:var(--s6);
  background:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter:blur(var(--blur)) saturate(1.35);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.35);
  color:#0A111C;
}
[data-theme="dark"] .entry__panel{ background:rgba(12,20,34,.9); border-color:rgba(146,166,209,.22); color:var(--ink); }
.entry__panel p{ color:#46536A; font-size:.92rem; }
[data-theme="dark"] .entry__panel p{ color:var(--ink-2); }
.entry__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s4); }
.entry__tags{ display:flex; flex-wrap:wrap; gap:var(--s1); margin-top:var(--s4); padding:0; list-style:none; }

/* Animacija centrifugalnog livenja — preneta iz v1, sada kao vizual
   Livnica ulazne kartice. Prsten se NE pomera pri skrolu (zahtev klijenta). */
.spin-slow{ animation:spin 26s linear infinite; transform-origin:250px 250px; }
.spin-fast{ animation:spin 3.4s linear infinite; transform-origin:250px 250px; }
.spin-rev{ animation:spin 44s linear infinite reverse; transform-origin:250px 250px; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.melt{ animation:melt 4.6s ease-in-out infinite; transform-origin:250px 250px; }
@keyframes melt{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .spin-slow,.spin-fast,.spin-rev,.melt{ animation:none !important; }
}

/* ---------- Prsten u zaglavlju (run 8) ----------
   Klijent pamti prsten iz prve verzije i nije mogao da ga nađe, jer u v2
   živi samo na Livnica kartici ispod pregiba. Ovde ulazi u sam heroj.

   Mere su uzete sa strane, ne odokativno: na 1280 naslov ide do x=919, na
   1440 do x=1020, strelice slajdera stoje u pojasu y=416..460 uz desnu
   ivicu, a gornja ivica desne kartice je na y=512. Slobodan pojas je dakle
   desno od naslova i iznad kartica. Zbog toga se prsten sidri uz DESNU
   IVICU (ne u sredinu desne polovine, kako je prvo bilo zamišljeno —
   pri 26vw se tamo seče i sa naslovom i sa strelicama; mereno, vidi
   REPORT-run8.md) i uzima meru koja u taj pojas staje.

   Nema paralakse ni pomeranja pri skrolu — samo rotacija. */
.hero-cast{ display:none; }
.hero-cast__svg{ display:block; width:100%; height:auto; overflow:visible; }
/* Dva imena klase, jer `.hud{display:flex}` stoji niže u fajlu i inače
   pobeđuje pri istoj težini — HUD se prikazuje tek od 1200. */
.hero-cast .hero-cast__hud{ display:none; }

/* Bronzani prsten treba da svetli, plavi da budu tiši da ne takmiče se sa
   naslovom. Crtež se ne dira — samo providnost grupa. */
.hero-cast .spin-rev{ opacity:.4; }
.hero-cast .spin-slow{ opacity:.62; }

/* Mobilni: prsten je središnji blok kompozicije — vidi „MOBILNI HEROJ"
   pri dnu fajla, gde ga mreža smešta između naslova i dugmadi. */

/* Desktop. Run 8 ga je puštao tek od 1200, jer su plutajuće kartice
   zauzimale donju polovinu heroja i prsten je na 1024 sekao naslov. Run 10
   je kartice uklonio, pa prsten može i niže i veći — mera je proverena na
   901, 1024, 1200, 1280, 1440, 1600 i 1920. */
@media (min-width:1024px){
  .hero-cast{
    display:block; position:absolute; z-index:2; pointer-events:none;
    /* Ispod trake. U mirovanju je visoka --bar-rest (143 ili 155, zavisi
       od --shell-inset), a na podstranama je zbijena na --bar-h od prvog
       piksela. .shell__in počinje na --shell-inset, pa se to oduzima. */
    top:calc(var(--bar-rest) + var(--s3) - var(--shell-inset));
    /* Odmak od desne ivice tolik da strelice slajdera ostanu slobodne:
       one stoje 20px od ivice i široke su 44px. */
    right:76px;
    /* Bez kartica ispod, prsten sme da poraste. Donja granica 260 i gornja
       340 su iz zadatka; provereno je da na svakoj od sedam širina ostaje
       slobodan od naslova, strelica, trake i tačkica. */
    width:clamp(260px,22vw,340px);
  }
  .shell--page .hero-cast{ top:calc(var(--bar-h) + var(--s3) - var(--shell-inset)); }
  /* Mek podmetač samo ispod prstena i očitavanja. Bez njega HUD pada na
     1,44:1 nad svetlim delom fotografije — boja .hud-a (--ink-3) je
     predviđena za punu podlogu kartice, ne za sliku. Podmetač stoji u
     stacking contextu samog prstena, pa ne dira ni naslov ni kartice. */
  .hero-cast::before{
    content:""; position:absolute; inset:-14% -10% -8%; z-index:-1;
    pointer-events:none;
    background:radial-gradient(ellipse at 62% 42%,
      rgba(6,12,24,.62) 0%, rgba(6,12,24,.42) 48%, rgba(6,12,24,.16) 76%, rgba(6,12,24,0) 100%);
  }
  .hero-cast .hero-cast__hud{
    display:flex; justify-content:flex-end; text-align:right;
    margin-top:var(--s4);
    color:rgba(255,255,255,.82);
  }
  .hero-cast .hero-cast__hud b{ color:var(--bronze-hi); }
}

/* HUD očitavanja */
.hud{
  display:flex; flex-wrap:wrap; gap:var(--s1) var(--s4); margin:var(--s4) 0 0; padding:0; list-style:none;
  font-family:var(--mono); font-size:.875rem; letter-spacing:.06em; color:var(--ink-2);
}
.hud b{ color:var(--bronze-ink); font-weight:600; }

/* ============================================================
   LEGURE — selektor
   ============================================================ */
.alloys{ display:grid; gap:var(--s5); }
@media (min-width:1000px){ .alloys{ grid-template-columns:320px 1fr; gap:var(--s7); align-items:start; } }
.alloy-nav{ display:flex; flex-direction:column; gap:var(--s2); }
.alloy-nav button{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:var(--s4) var(--s5); border-radius:var(--r-pill);
  border:1px solid var(--line); background:transparent; color:var(--ink-2);
  cursor:pointer; text-align:left; width:100%;
  font-family:var(--display); font-size:1rem; font-weight:500;
  transition:background var(--fast) var(--ease), color var(--fast) var(--ease),
             border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.alloy-nav button small{ font-family:var(--mono); font-size:.875rem; color:var(--ink-3); font-weight:400; }
.alloy-nav button:hover{ transform:translateX(4px); border-color:var(--blue-deep); color:var(--ink); }
.alloy-nav button.is-on{ background:var(--blue-deep); border-color:var(--blue-deep); color:#fff; }
.alloy-nav button.is-on small{ color:rgba(255,255,255,.72); }
.alloy-panel{ position:relative; min-height:330px; }
.alloy-pane{
  position:absolute; inset:0; opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity var(--mid) var(--ease), transform var(--mid) var(--ease), visibility var(--mid);
}
.alloy-pane.is-on{ position:relative; opacity:1; visibility:visible; transform:none; }
.grades{ display:flex; flex-wrap:wrap; gap:var(--s2); margin:var(--s5) 0; padding:0; list-style:none; }

.props{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border-radius:var(--r-tile); overflow:hidden; }
@media (min-width:700px){ .props{ grid-template-columns:repeat(4,1fr); } }
.props div{ background:var(--glass-2); padding:var(--s4) var(--s4); }
.props dt{ font-size:.875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.props dd{ margin:var(--s2) 0 0; font-family:var(--display); font-size:1.2rem; font-weight:500; letter-spacing:-.02em; }
.props dd i{ font-style:normal; font-size:max(.875rem,.62em); color:var(--ink-3); }

/* ============================================================
   KALKULATOR
   ============================================================ */
/* Trake se izričito ograničavaju sa minmax(0,…). Podrazumevana `auto` traka
   ima za donju granicu min-content svog deteta, a dete je .gpanel sa
   min-width:auto — pa traka ne može da bude uža od najdužeg natpisa u
   padajućoj listi. Natpis `Kalajna bronza — CuSn10 — 8,8 g/cm³` nosi
   white-space:nowrap (.csel__v, run 7), min-content mu je 303px, i na 360px
   je traku razvlačio na 362px: .gpanel je izlazio na 376 i pravio bočni
   skrol od 16px (Prohrom/Inox, nešto kraći natpis, 3px). Mereno na svih 14
   strana; padalo je tačno onih pet koje imaju kalkulator i dug natpis.
   Sa minmax(0,…) traka staje u 320px, a natpis se skraćuje trotačkom kako
   .csel__v i inače propisuje. Isti obrazac kao popravka .net-a u run-u 7. */
.calc{ display:grid; gap:var(--s6); grid-template-columns:minmax(0,1fr); }
@media (min-width:960px){ .calc{ grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:var(--s8); align-items:start; } }

.shapes{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2); }
@media (min-width:560px){ .shapes{ grid-template-columns:repeat(6,1fr); } }
.shapes button{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-tile); border:1px solid var(--line);
  background:transparent; cursor:pointer; color:var(--ink-2);
  transition:background var(--fast) var(--ease), border-color var(--fast) var(--ease),
             color var(--fast) var(--ease), transform var(--fast) var(--ease);
  padding:var(--s2);
}
.shapes button svg{ width:100%; height:100%; }
.shapes button:hover{ transform:translateY(-2px); border-color:var(--blue-deep); color:var(--blue-deep); }
.shapes button.is-on{ background:var(--blue-deep); border-color:var(--blue-deep); color:#fff; }

.field{ margin-bottom:var(--s5); }
.field:last-child{ margin-bottom:0; }
.field__top{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3); margin-bottom:var(--s2); }
.field__l{ font-size:.875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
/* Run 11: očitavanje vrednosti je sada polje za unos, u istom redu sa
   klizačem. Staklo i mono slova kao polje „Dimenzija" u pronalazaču;
   ivica je --line-2 kao kod susednog izbora materijala, jer bi bela
   staklena ivica na staklenoj kartici nestala. Boja broja je zatečena
   boja očitavanja. */
.field__row{ display:flex; align-items:center; gap:var(--s3); }
.field__row input[type=range]{ flex:1 1 auto; min-width:0; }
.field__n{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:var(--s1);
  width:108px; min-height:40px; padding:0 var(--s3); box-sizing:border-box;
  border-radius:var(--r-pill); border:1px solid var(--line-2);
  background:var(--glass-2); box-shadow:var(--hi-inset);
  cursor:text; transition:border-color var(--fast) var(--ease);
}
.field__n:focus-within{ border-color:var(--blue-deep); }
.field__n input{
  flex:1 1 auto; min-width:0; width:100%; margin:0; padding:0;
  border:0; background:none; outline:none; text-align:right;
  font-family:var(--mono); font-size:.88rem; font-weight:600;
  font-variant-numeric:tabular-nums; color:var(--blue-deep);
}
.field__u{ font-family:var(--mono); font-size:.875rem; color:var(--ink-3); }
[data-theme="dark"] .field__n input{ color:var(--bronze-hi); }
[data-theme="dark"] .field__n:focus-within{ border-color:var(--blue-lite); }
/* Greška: bez nove boje — bakarni ton iz brenda (tamna tema: svetla bronza). */
.field.is-bad .field__n{ border-color:var(--copper); }
.field__err{ margin:var(--s1) 0 0; text-align:right; font-family:var(--mono); font-size:.875rem; color:var(--copper); }
[data-theme="dark"] .field.is-bad .field__n{ border-color:var(--bronze-hi); }
[data-theme="dark"] .field__err{ color:var(--bronze-hi); }
@media (pointer:coarse){ .field__n{ min-height:44px; } }
@media (max-width:420px){ .field__n{ width:88px; padding:0 var(--s3); } }

/* Okidač padajuće liste (run 7) deli meru sa poljem koje zamenjuje —
   vrednosti stoje na jednom mestu, ne prepisuju se. */
.sel,.field > .csel__t{
  width:100%; padding:var(--s3) var(--s8) var(--s3) var(--s4);
  border-radius:var(--r-pill); border:1px solid var(--line-2);
  background:var(--glass-2); color:var(--ink);
  font-size:.9rem; font-weight:600; cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' fill='none'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%237A8699' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 18px center;
  transition:border-color var(--fast) var(--ease);
}
.sel:hover,.sel:focus,
.field > .csel__t:hover,.field > .csel__t:focus-visible,
.field > .csel__t[aria-expanded="true"]{ border-color:var(--blue-deep); outline:none; }

input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:4px; margin:0;
  background:var(--line-2); border-radius:var(--r-pill); outline:none; cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:20px; height:20px; border-radius:50%;
  background:var(--blue-deep); border:3px solid var(--bg);
  box-shadow:var(--sh-sm); cursor:grab;
  transition:transform var(--fast) var(--ease);
}
input[type=range]::-webkit-slider-thumb:hover{ transform:scale(1.15); }
input[type=range]::-moz-range-thumb{
  width:17px; height:17px; border-radius:50%;
  background:var(--blue-deep); border:3px solid var(--bg); cursor:grab;
}

.calc-viz{ display:flex; flex-direction:column; align-items:center; gap:var(--s5); }
.calc-viz svg{ width:100%; max-width:380px; overflow:visible; }
.calc-shape{ opacity:0; visibility:hidden; transition:opacity var(--mid) var(--ease), visibility var(--mid); }
.calc-shape.is-on{ opacity:1; visibility:visible; }
.dimline{ stroke:var(--ink-3); stroke-width:1; opacity:.7; }
/* jedinice crteža (400 široko): 16 daje >= 14 px i kad se crtež skupi na telefonu */
.dimtxt{ font-family:var(--mono); font-size:16px; fill:var(--ink-3); letter-spacing:.04em; }
.shape-fill{ fill:rgba(0,47,143,.12); stroke:var(--blue-deep); stroke-width:2; }
[data-theme="dark"] .shape-fill{ fill:rgba(232,181,115,.14); stroke:var(--bronze-hi); }
.shape-hole{ fill:var(--bg); stroke:var(--blue-deep); stroke-width:1.6; }
[data-theme="dark"] .shape-hole{ stroke:var(--bronze-hi); }

.result{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s5);
  flex-wrap:wrap;
  border-radius:var(--r-card); padding:var(--s5) var(--s6);
  background:var(--glass-2); border:1px solid var(--glass-brd);
  box-shadow:var(--sh-card),var(--hi-inset);
}
.result__v{
  font-family:var(--display); font-size:clamp(2.2rem,5.2vw,3.3rem); font-weight:500;
  letter-spacing:-.035em; line-height:.95; font-variant-numeric:tabular-nums;
}
.result__v i{ font-style:normal; color:var(--bronze-ink); font-size:max(.875rem,.38em); margin-left:var(--s1); }
.result__k{ font-family:var(--mono); font-size:.875rem; color:var(--ink-3); text-align:right; max-width:24ch; }

/* ============================================================
   TEHNOLOGIJE, PROCES, TABELE
   ============================================================ */
.tri{ display:grid; gap:var(--s4); }
@media (min-width:820px){ .tri{ grid-template-columns:repeat(3,1fr); } }
.tcard__ico{ width:54px; height:54px; margin-bottom:var(--s5); color:var(--blue-deep); }
[data-theme="dark"] .tcard__ico{ color:var(--bronze-hi); }
.tcard__ico svg{ width:100%; height:100%; overflow:visible; }
.tcard__share{ font-family:var(--mono); font-size:.875rem; color:var(--ink-3); }
.tcard__bar{ height:3px; border-radius:var(--r-pill); background:var(--line); margin-top:var(--s5); overflow:hidden; }
.tcard__bar i{ display:block; height:100%; width:0; border-radius:var(--r-pill); background:linear-gradient(90deg,var(--bronze),var(--bronze-hi)); transition:width 1.3s var(--ease); }
.rv-in .tcard__bar i{ width:var(--w,50%); }

.steps{ display:grid; gap:var(--s4); }
@media (min-width:640px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .steps{ grid-template-columns:repeat(3,1fr); } }
.step__n{ font-family:var(--mono); font-size:.875rem; letter-spacing:.1em; color:var(--bronze-ink); margin-bottom:var(--s2); }
.step p{ font-size:.9rem; color:var(--ink-2); margin:var(--s2) 0 0; }

.tbl-wrap{ border-radius:var(--r-card); overflow:hidden; border:1px solid var(--glass-brd); background:var(--glass-2); box-shadow:var(--sh-card),var(--hi-inset); }
.tbl-scroll{ overflow-x:auto; }
.tbl{ width:100%; border-collapse:collapse; min-width:540px; }
.tbl caption{ text-align:left; padding:var(--s4) var(--s5); font-family:var(--ui); font-size:.875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); border-bottom:1px solid var(--line); }
.tbl th,.tbl td{ text-align:left; padding:var(--s3) var(--s5); border-bottom:1px solid var(--line); font-size:.9rem; }
.tbl th{ font-size:.875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.tbl td{ color:var(--ink-2); }
.tbl td:first-child{ color:var(--ink); font-weight:500; }
.tbl tbody tr:last-child td{ border-bottom:0; }
.tbl tbody tr{ transition:background var(--fast) var(--ease); }
.tbl tbody tr:hover{ background:rgba(0,47,143,.04); }
[data-theme="dark"] .tbl tbody tr:hover{ background:rgba(146,166,209,.06); }
.tbl .m{ font-family:var(--mono); font-size:.875rem; color:var(--blue-deep); }
[data-theme="dark"] .tbl .m{ color:var(--bronze-hi); }

/* Asortiman — podoblici */
.slist{ display:grid; gap:var(--s3); grid-template-columns:repeat(2,1fr); list-style:none; padding:0; margin:0; }
@media (min-width:760px){ .slist{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1100px){ .slist{ grid-template-columns:repeat(4,1fr); } }
.slist li{
  border-radius:var(--r-tile); padding:var(--s4);
  background:var(--glass-2); border:1px solid var(--glass-brd);
  display:flex; flex-direction:column; gap:var(--s1);
  transition:transform var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
/* run 12: stavka spiska nije link — bez podizanja na prelaz */
.slist b{ font-family:var(--display); font-size:.98rem; font-weight:600; }
.slist i{ font-style:normal; font-family:var(--mono); font-size:.875rem; color:var(--bronze-ink); }
.slist span{ font-size:.875rem; color:var(--ink-3); line-height:1.5; }

/* Marquee */
.marq-wrap{ border-radius:var(--r-card); overflow:hidden; padding:var(--s6) 0; background:var(--glass); border:1px solid var(--glass-brd); box-shadow:var(--sh-card),var(--hi-inset); }
.marq{ display:flex; width:max-content; animation:marq 46s linear infinite; }
.marq:hover{ animation-play-state:paused; }
@keyframes marq{ to{ transform:translateX(-50%); } }
.marq span{
  margin:0 var(--s1); padding:var(--s3) var(--s5); border-radius:var(--r-pill);
  border:1px solid var(--line-2); color:var(--ink-2);
  font-size:.92rem; font-weight:600; white-space:nowrap;
}

/* Proof */
.proof{ display:grid; gap:var(--s4); grid-template-columns:repeat(2,1fr); }
@media (min-width:1024px){ .proof{ grid-template-columns:repeat(4,1fr); } }
.pf__v{
  font-family:var(--display); font-size:clamp(2.1rem,4.6vw,3rem); font-weight:500;
  letter-spacing:-.035em; line-height:.95; font-variant-numeric:tabular-nums; color:var(--blue-deep);
}
[data-theme="dark"] .pf__v{ color:var(--blue-lite); }
.pf:nth-child(2n) .pf__v{ color:var(--bronze-ink); }
.pf__k{ margin-top:var(--s2); font-size:.875rem; color:var(--ink-2); }

/* ---------- Mreža sajtova ----------
   `1fr` je skraćenica za `minmax(auto,1fr)`, a donja granica `auto` je
   min-content sadržaja staze. Kad taj minimum ne stane, mreža NE ume da
   se skupi — raste preko roditelja. Ovde su dve staze tražile 475px u
   kontejneru od 350px i za toliko širile ceo dokument (run 7, deo 3).
   Staze zato idu kroz minmax(0,1fr), a dva stupca čekaju 640px, gde
   min-content linka (240px) stvarno stane. */
.net{ display:grid; gap:var(--s3); grid-template-columns:minmax(0,1fr); }
@media (min-width:640px){ .net{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1000px){ .net{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.net a{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  min-width:0; flex-wrap:wrap;
  padding:var(--s4) var(--s5); border-radius:var(--r-pill);
  background:var(--glass-2); border:1px solid var(--glass-brd);
  transition:transform var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.net a:hover{ transform:translateY(-3px); border-color:var(--blue-deep); }
.net b{ font-family:var(--mono); font-size:.875rem; font-weight:500; }
.net span{ font-size:.875rem; color:var(--ink-3); }

/* ============================================================
   FORMA
   ============================================================ */
.form{ display:grid; gap:var(--s3); }
.frow{ display:grid; gap:var(--s3); }
@media (min-width:640px){ .frow--2{ grid-template-columns:1fr 1fr; } }
.fld{ position:relative; }
.fld input,.fld textarea,.fld select,.fld > .csel__t{
  width:100%; padding:var(--s5) var(--s5) var(--s2);
  border-radius:var(--r-tile); border:1px solid var(--line-2);
  background:var(--glass-2); color:var(--ink); font-size:.94rem;
  transition:border-color var(--fast) var(--ease);
}
.fld textarea{ min-height:140px; resize:vertical; padding-top:var(--s6); border-radius:var(--r-card); }
.fld select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' fill='none'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%237A8699' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 20px center; }
.fld input:focus,.fld textarea:focus,.fld select:focus,
.fld > .csel__t:focus-visible,.fld > .csel__t[aria-expanded="true"]{ outline:none; border-color:var(--blue-deep); }
.fld label{
  position:absolute; left:20px; top:16px;
  font-size:.875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); pointer-events:none; transform-origin:left top;
  transition:transform var(--fast) var(--ease), color var(--fast) var(--ease);
}
.fld input:focus + label,
.fld input:not(:placeholder-shown) + label,
.fld textarea:focus + label,
.fld textarea:not(:placeholder-shown) + label,
.fld select:focus + label,
.fld select.has-val + label{ transform:translateY(-8px) scale(.86); color:var(--blue-deep); }
.form__foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; margin-top:var(--s4); }
.form__note{ font-size:.875rem; color:var(--ink-3); max-width:36ch; }
.form__msg{
  display:none; margin-top:var(--s3); padding:var(--s3) var(--s5); border-radius:var(--r-tile);
  background:rgba(193,128,47,.12); border:1px solid rgba(193,128,47,.4);
  color:var(--copper); font-size:.88rem;
}
[data-theme="dark"] .form__msg{ color:var(--bronze-hi); }
.form__msg.is-on{ display:block; }
/* Run 12: ishod slanja i greške po polju — bakar za grešku (kao u
   kalkulatoru), plava za uspeh; bez novih boja. */
.form__msg.is-ok{ background:rgba(0,47,143,.08); border-color:rgba(0,47,143,.3); color:var(--blue-deep); }
[data-theme="dark"] .form__msg.is-ok{ background:rgba(146,166,209,.1); border-color:rgba(146,166,209,.3); color:var(--blue-lite); }
.fld.is-bad input,.fld.is-bad textarea{ border-color:var(--copper); }
[data-theme="dark"] .fld.is-bad input,[data-theme="dark"] .fld.is-bad textarea{ border-color:var(--bronze-hi); }
.fld__err{ margin:var(--s1) 0 0 var(--s1); font-size:.875rem; color:var(--copper); }
[data-theme="dark"] .fld__err{ color:var(--bronze-hi); }
.form [type=submit][disabled]{ opacity:.7; cursor:progress; transform:none; }
.fld input,.fld select,.fld > .csel__t{ min-height:48px; }

.ct-block{ margin-bottom:var(--s6); }
.ct-block:last-child{ margin-bottom:0; }
/* run 12: bili h5/h6 — preskakali nivoe naslova posle h2 */
.ct-block .ct__h{ font-family:var(--ui); font-size:.875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin:0 0 var(--s2); }
.ct-block a,.ct-block p{ font-size:.98rem; margin:0; }
.ct-block .mono-l{ display:block; font-family:var(--mono); font-size:.9rem; padding:2px 0; transition:color var(--fast) var(--ease); }
.ct-block .mono-l:hover{ color:var(--blue-deep); }
[data-theme="dark"] .ct-block .mono-l:hover{ color:var(--bronze-hi); }

/* ---------- Kontakt: podaci levo, mapa desno ----------
   Desna polovina staklenog kontejnera je ranije stajala prazna. */
.ct-card{ display:grid; gap:var(--gap-head); }
@media (min-width:860px){
  .ct-card{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:stretch; }
}
.ct-card__map{ display:flex; flex-direction:column; gap:var(--s3); min-height:0; }
.map{
  position:relative; flex:1 1 auto; min-height:280px;
  border-radius:var(--r-card); overflow:hidden;
  border:1px solid var(--glass-brd); background:var(--bg-2);
  box-shadow:var(--hi-inset);
}
/* Na mobilnom mapa ima fiksnu visinu; na desktopu puni visinu kolone. */
@media (max-width:859px){ .map{ flex:0 0 280px; height:280px; } }
.map iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
  /* Blago obezbojenje da mapa sedne u paletu sajta. */
  filter:saturate(.5) contrast(1.02);
}
[data-theme="dark"] .map iframe{ filter:invert(.9) hue-rotate(180deg) saturate(.7); }
.map__link{ align-self:flex-start; font-size:.875rem; }
/* Run 12 — fasada mape: tiha mreža ulica od linija sajta, adresa i dugme. */
.map__load{
  position:absolute; inset:0; width:100%; height:100%; margin:0; padding:var(--s6);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s3);
  border:0; cursor:pointer; color:var(--ink); font:inherit; text-align:center;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 44px 44px,
    var(--bg-2);
}
.map__load .circ{ width:56px; height:56px; }
.map__load .circ svg{ width:22px; height:22px; }
.map__load:hover .circ,.map__load:focus-visible .circ{ background:var(--blue); border-color:var(--blue); }
.map__load:focus-visible{ outline:2px solid var(--blue-lite); outline-offset:-3px; }
.map__t{ font-weight:600; font-size:1rem; }
.map__s{ font-family:var(--mono); font-size:.875rem; color:var(--ink); }

/* ============================================================
   FOOTER
   ============================================================ */
.ft{ margin:var(--s4) var(--shell-inset) var(--shell-inset); }
@media (max-width:900px){ .ft{ margin-bottom:calc(var(--shell-inset) + 4px); } }
.ft__in{
  border-radius:var(--r-shell); padding:clamp(28px,4vw,56px);
  background:var(--glass); border:1px solid var(--glass-brd);
  box-shadow:var(--sh-card),var(--hi-inset);
  backdrop-filter:blur(var(--blur)) saturate(1.35);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.35);
}
.ft-grid{ display:grid; gap:var(--s7); }
@media (min-width:700px){ .ft-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .ft-grid{ grid-template-columns:1.5fr 1fr 1fr 1fr; } }
.ft-grid img{ height:44px; width:auto; margin-bottom:var(--s5); }
.ft .ft__h{ font-family:var(--ui); font-size:.875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin:0 0 var(--s3); }
.ft ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s2); }
.ft ul a{ font-size:.9rem; color:var(--ink-2); transition:color var(--fast) var(--ease), padding-left var(--fast) var(--ease); }
.ft ul a:hover{ color:var(--blue-deep); padding-left:var(--s1); }
[data-theme="dark"] .ft ul a:hover{ color:var(--bronze-hi); }
.ft__contact{ display:grid; gap:var(--s1); margin-top:var(--s4); }
.ft__contact a,.ft__contact span{ font-family:var(--mono); font-size:.875rem; color:var(--ink-2); }
.ft__contact a:hover{ color:var(--blue-deep); }
[data-theme="dark"] .ft__contact a:hover{ color:var(--bronze-hi); }
.ft-bot{
  margin-top:var(--s8); padding-top:var(--s5); border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s6); justify-content:space-between;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.05em; color:var(--ink-3);
}

/* ============================================================
   PLUTAJUĆA DUGMAD — asistent (levo) i nazad na vrh (desno)
   Oba iste veličine i na istoj visini. Na mobilnom stoje IZNAD
   tab trake, sa obaveznih --fab-gap razmaka, nikad na njoj.
   ============================================================ */
.fab{
  position:fixed; z-index:120;
  width:var(--fab); height:var(--fab);
  bottom:calc(var(--s6) + env(safe-area-inset-bottom));
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:1px solid var(--glass-brd);
  background:var(--glass-2); color:var(--ink);
  cursor:pointer;
  box-shadow:var(--sh-card),var(--hi-inset);
  backdrop-filter:blur(var(--blur)) saturate(1.35);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.35);
  transition:transform var(--fast) var(--ease), background var(--fast) var(--ease),
             border-color var(--fast) var(--ease), color var(--fast) var(--ease),
             opacity var(--mid) var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.fab svg{ width:22px; height:22px; }
.fab:hover{ transform:translateY(-3px); background:var(--blue-deep); border-color:var(--blue-deep); color:#fff; }
.fab--chat{ left:var(--gutter); }
/* Run 13: spec traka više nije u prvom ekranu (stoji ispod heroja), pa
   dugme u mirovanju leži na fotografiji. Pri skrolu prelazi preko
   sadržaja kao svako plutajuće dugme — očekivano ponašanje. */
.fab--top{ right:var(--gutter); opacity:0; pointer-events:none; }
.fab--top.is-on{ opacity:1; pointer-events:auto; }
@media (max-width:900px){
  .fab{ bottom:calc(var(--tabbar-h) + var(--fab-gap) + env(safe-area-inset-bottom)); }
}

/* ============================================================
   ASISTENT
   ============================================================ */
.chat{
  position:fixed; z-index:130;
  left:var(--gutter); right:var(--gutter);
  /* Panel staje iznad plutajućeg dugmeta, ono iznad tab trake. */
  bottom:calc(var(--tabbar-h) + var(--fab-gap) + var(--fab) + 10px + env(safe-area-inset-bottom));
  max-height:min(62svh,600px);
  display:flex; flex-direction:column;
  border-radius:var(--r-card); overflow:hidden;
  background:var(--glass-2); border:1px solid var(--glass-brd);
  box-shadow:var(--sh-lift),var(--hi-inset);
  backdrop-filter:blur(var(--blur)) saturate(1.35);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.35);
  opacity:0; visibility:hidden; transform:translateY(18px) scale(.98);
  transform-origin:left bottom;
  transition:opacity var(--mid) var(--ease), transform var(--slow) cubic-bezier(.16,1.02,.3,1), visibility var(--mid);
}
@media (min-width:901px){
  .chat{ left:var(--gutter); right:auto; width:400px; max-height:min(72svh,600px);
         bottom:calc(var(--s6) + var(--fab) + 10px); }
}
.chat.is-open{ opacity:1; visibility:visible; transform:none; }
.chat__hd{ display:flex; align-items:center; gap:var(--s3); padding:var(--s4) var(--s4); border-bottom:1px solid var(--line); }
.chat__av{
  width:36px; height:36px; border-radius:50%; flex:0 0 auto;
  background:var(--blue-deep); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:.875rem; font-weight:600;
}
.chat__hd b{ display:block; font-family:var(--display); font-size:.94rem; font-weight:600; }
.chat__hd small{ display:block; font-size:.875rem; color:var(--ink-3); }
.chat__x{ margin-left:auto; }
.chat__body{ flex:1 1 auto; overflow-y:auto; padding:var(--s4) var(--s4); display:flex; flex-direction:column; gap:var(--s3); }
.msg{ max-width:88%; font-size:.88rem; line-height:1.55; animation:msgIn var(--mid) var(--ease); }
@keyframes msgIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.msg--bot{ align-self:flex-start; background:var(--bg-2); border:1px solid var(--line); padding:var(--s3) var(--s4); border-radius:var(--r-xs) var(--r-tile) var(--r-tile) var(--r-tile); color:var(--ink-2); }
.msg--bot strong{ color:var(--ink); }
.msg--bot a{ color:var(--blue-deep); text-decoration:underline; text-underline-offset:2px; }
[data-theme="dark"] .msg--bot a{ color:var(--bronze-hi); }
.msg--bot code{ font-family:var(--mono); font-size:.84em; color:var(--blue-deep); }
[data-theme="dark"] .msg--bot code{ color:var(--bronze-hi); }
.msg--bot ul{ margin:var(--s2) 0 0; padding-left:var(--s4); }
.msg--me{ align-self:flex-end; background:var(--blue-deep); color:#fff; padding:var(--s3) var(--s4); border-radius:var(--r-tile) var(--r-xs) var(--r-tile) var(--r-tile); }
.typing{ display:flex; gap:var(--s1); align-self:flex-start; padding:var(--s3) var(--s4); background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-xs) var(--r-tile) var(--r-tile) var(--r-tile); }
.typing i{ width:5px; height:5px; border-radius:50%; background:var(--ink-3); animation:dot 1.25s infinite; }
.typing i:nth-child(2){ animation-delay:.18s; } .typing i:nth-child(3){ animation-delay:.36s; }
@keyframes dot{ 0%,60%,100%{ opacity:.25; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-4px); } }
.chips{ display:flex; flex-wrap:wrap; gap:var(--s1); padding:0 var(--s4) var(--s3); }
.chat__dis{ padding:0 var(--s4) var(--s2); font-size:.875rem; color:var(--ink-3); text-align:center; margin:0; }
.chat__ft{ display:flex; gap:var(--s2); padding:var(--s3); border-top:1px solid var(--line); }
.chat__ft input{ flex:1; min-width:0; padding:var(--s3) var(--s4); border-radius:var(--r-pill); border:1px solid var(--line-2); background:var(--bg); font-size:.88rem; }
.chat__ft input:focus{ outline:none; border-color:var(--blue-deep); }

/* ============================================================
   GALERIJA + SVETLOSNA KUTIJA
   ============================================================ */
.gal{ display:grid; gap:var(--s3); grid-template-columns:repeat(2,1fr); grid-auto-rows:clamp(80px,13vw,130px); grid-auto-flow:dense; }
@media (min-width:760px){ .gal{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:1160px){ .gal{ grid-template-columns:repeat(6,1fr); } }
.gal__i{
  grid-row:span 2; padding:0; border:0; cursor:pointer;
  border-radius:var(--r-tile); overflow:hidden;
  background-size:cover; background-position:center; background-color:var(--bg-2);
  box-shadow:var(--sh-card);
  transition:transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.gal__i--w{ grid-column:span 2; }
.gal__i--t{ grid-row:span 3; }
.gal__i:hover{ transform:translateY(-4px); box-shadow:var(--sh-lift); }

/* run 9 — galerija na stranici proizvoda. Ista pločica, druga mreža:
   jedna kolona, dve od 600, tri od 1024. Zidana mreža galerija.html-a
   ovde nema smisla jer je grupa jedna, pa su sve pločice istog oblika.
   minmax(0,1fr) je pravilo iz run-a 8: `1fr` je prećutno minmax(auto,1fr),
   a `auto` traku podiže min-content sadržaja i pravi bočni skrol na 360. */
.gal--prod{ grid-template-columns:minmax(0,1fr); grid-auto-rows:auto; }
@media (min-width:600px){ .gal--prod{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .gal--prod{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.gal--prod .gal__i{ grid-row:auto; grid-column:auto; aspect-ratio:4 / 3; }

/* run 9b — na telefonu dve kolone i kvadratne pločice. Jedna kolona ostaje
   samo kad bi pločica bila uža od 150 px. Prag je računica, ne procena:
   (širina − 2 × 20 px gutter − 12 px gap) / 2 ≥ 150  →  širina ≥ 352 px.
   Izmereno na stranici: 340 px daje pločicu od 144 px, 360 px daje 154 px. */
@media (max-width:599px){
  .gal--prod .gal__i{ aspect-ratio:1; }
}
@media (min-width:352px) and (max-width:599px){
  .gal--prod{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Sklopljena galerija. Skriveni kadrovi nose atribut `hidden`, pa ispadaju
   i iz reda tabulatora — nije `display` trik. Otvaranje ih pokazuje istim
   parom tokena koji nosi otkrivanje (--slow + --ease); `data-rv` se na
   mrežu NE vraća, jer na 390 px nikad ne ispuni prag posmatrača (run 9).
   Bez fill-mode-a namerno: posle animacije pločica se vraća u sopstvene
   stilove, pa `:hover` podizanje i dalje radi. */
@keyframes galIn{ from{ opacity:0; transform:translateY(24px) scale(.97); } }
.gal--prod.is-open .gal__i[data-extra]{ animation:galIn var(--slow) var(--ease); }
.gal-more{ margin-top:var(--s5); }

.lbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(5,9,15,.94);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(56px,8vw,88px) clamp(16px,6vw,96px);
  opacity:0; visibility:hidden; transition:opacity var(--mid) var(--ease), visibility var(--mid);
}
.lbox.is-open{ opacity:1; visibility:visible; }
.lbox__stage{ display:flex; flex-direction:column; align-items:center; gap:var(--s4); max-width:100%; max-height:100%; }
.lbox__img{ max-width:100%; max-height:74svh; border-radius:var(--r-tile); }
.lbox__cap{ font-family:var(--mono); font-size:.875rem; color:rgba(255,255,255,.7); text-align:center; margin:0; }
.lbox__btn{ position:absolute; }
.lbox__x{ top:clamp(14px,3vw,26px); right:clamp(14px,3vw,26px); }
.lbox__p{ left:clamp(8px,2vw,26px); top:50%; margin-top:-24px; }
.lbox__n{ right:clamp(8px,2vw,26px); top:50%; margin-top:-24px; }
.lbox__count{ position:absolute; left:clamp(16px,3vw,28px); top:clamp(20px,3vw,32px); font-family:var(--mono); font-size:.875rem; color:rgba(255,255,255,.7); margin:0; }
.lbox__count b{ color:var(--bronze-hi); }

/* ============================================================
   REVEAL
   ============================================================ */
[data-rv]{ will-change:transform,opacity; }
[data-rv="up"]{ opacity:0; transform:translateY(24px) scale(.97); transition:opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
[data-rv="fade"]{ opacity:0; transition:opacity var(--slow) var(--ease); }
[data-rv="mask"]{ position:relative; }
/* Maska ide preko pseudo-elementa — clip-path na posmatranom elementu
   poništava presek i IntersectionObserver se nikad ne okine. */
[data-rv="mask"]::after{
  content:''; position:absolute; inset:-.12em -4px;
  background:var(--rvbg,var(--bg));
  transform:scaleX(1); transform-origin:right center;
  transition:transform var(--slow) var(--ease);
  pointer-events:none;
}
.rv-in[data-rv="mask"]::after{ transform:scaleX(0); }
.rv-in[data-rv]{ opacity:1 !important; transform:none !important; }

/* ============================================================
   PRELOADER
   ============================================================ */
.pre{
  position:fixed; inset:0; z-index:300; display:none;
  align-items:center; justify-content:center; padding:var(--gutter);
  background:var(--bg);
  /* Izlazi kao zavesa navise; donja ivica se zaobli na radijus heroja. */
  transform:translateY(0);
  border-bottom-left-radius:0; border-bottom-right-radius:0;
  transition:transform var(--slow) var(--ease), border-radius var(--slow) var(--ease), visibility var(--slow);
}
html.js .pre{ display:flex; }
html.pre-done .pre{
  transform:translateY(-100%);
  border-bottom-left-radius:var(--r-shell);
  border-bottom-right-radius:var(--r-shell);
  visibility:hidden; pointer-events:none;
}
/* Logotip i kota moraju da budu iste širine — zato oboje u jednom
   kontejneru fiksne širine, a oboje na 100%. */
.pre__in{
  width:min(420px,70vw); display:grid; gap:var(--s4);
  opacity:0; animation:preIn var(--mid) var(--ease) .18s forwards;
  transition:opacity var(--mid) var(--ease);
}
@keyframes preIn{ from{ opacity:0; transform:translateY(9px); } to{ opacity:1; transform:none; } }
html.pre-done .pre__in{ opacity:0; }
.pre__logo{ width:100%; height:auto; }
.pre__rule{ position:relative; width:100%; height:2px; border-radius:var(--r-pill); background:var(--line); overflow:hidden; }
.pre__rule i{ position:absolute; left:0; top:0; bottom:0; width:0; border-radius:var(--r-pill); background:linear-gradient(90deg,var(--blue-deep),var(--bronze)); transition:width var(--mid) var(--ease); }
.pre__meta{ display:flex; justify-content:space-between; gap:var(--s4); margin:0; font-family:var(--mono); font-size:.875rem; letter-spacing:.12em; color:var(--ink-3); }
.pre__meta b{ color:var(--blue-deep); font-weight:600; font-variant-numeric:tabular-nums; }
[data-theme="dark"] .pre__meta b{ color:var(--bronze-hi); }

/* Ulazna animacija heroja čeka preloader.
   Namerno animation:none, ne animation-play-state — animacija pauzirana pre
   nego što dobije start time ostaje zauvek na currentTime 0. */
html.js:not(.pre-done) .hero__title,
html.js:not(.pre-done) .hero__p,
html.js:not(.pre-done) .hero-cast,
html.js:not(.pre-done) .hero__acts .pill{ animation:none; }

.heroIn{ opacity:0; animation:heroUp var(--slow) var(--ease) forwards; }
.heroIn--1{ animation-delay:.05s; }
.heroIn--2{ animation-delay:.18s; }
@keyframes heroUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

/* ============================================================
   SMANJENA ANIMACIJA
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-rv]{ opacity:1 !important; transform:none !important; }
  [data-rv="mask"]::after{ display:none !important; }
  .shell__slide{ animation:none !important; transform:none !important; }
  .marq{ animation:none !important; }
  .heroIn{ opacity:1 !important; animation:none !important; }
  .pre__in{ opacity:1 !important; animation:none !important; }
  /* Zavesa preloadera ne putuje — samo nestane. */
  html.pre-done .pre{ transform:none !important; border-radius:0 !important; opacity:0; }
}

/* ============================================================
   MOBILNA KOMPOZICIJA HEROJA (≤900px)
   ============================================================ */
@media (max-width:900px){
  .shell{ min-height:auto; }
  .finder{ width:100%; }

  /* ---- Heroj početne je TAČNO jedan ekran ----
     Visina je vidno polje minus tab traka, pa ništa ne završi ispod nje.
     `svh` je mala vidljiva visina — ne skače kad se adresna traka sklopi.
     Prvi red je `vh` zamena za pregledače bez `svh`. */
  .shell:not(.shell--page){
    height:calc(100vh - var(--tabbar-h) - env(safe-area-inset-bottom) - 2 * var(--shell-inset));
    height:calc(100svh - var(--tabbar-h) - env(safe-area-inset-bottom) - 2 * var(--shell-inset));
    min-height:0;
  }

  /* Pet blokova, odozgo: pojas za traku, naslov, prsten, dugmad, pojas za
     tačkice. Redovi su procenti VISINE HEROJA, koja je poznata, pa se
     kompozicija drži na svakom telefonu umesto da se razvlači sadržajem.
     23% je gornji pojas — to naslovu daje vrh na ~23% visine, unutar
     traženih 22–26%, a ujedno je svuda veće od trake (58–64px). */
  .shell:not(.shell--page) .hero__body{
    display:grid;
    /* Izričita kolona: bez nje se `auto` kolona skupi na sadržaj, pa red
       sa dugmadima ostane 275px umesto 304 i natpis nema gde da stane. */
    grid-template-columns:minmax(0,1fr);
    /* Peti red nosi tačkice, ali mora da bude viši od njih: dugme
       asistenta stoji dole levo, visoko 48px sa 12px iznad tab trake, pa
       je pri 46px preklapalo levu pilulu 48x10px. 68px ga razdvaja. */
    grid-template-rows:23% auto minmax(0,1fr) auto 68px;
    justify-items:center; align-items:center;
    padding:0 var(--s4);
  }
  .shell:not(.shell--page) .hero__title{ grid-row:2; align-self:start; }
  .shell:not(.shell--page) .hero-cast{ grid-row:3; }
  .shell:not(.shell--page) .hero__acts{ grid-row:4; align-self:end; justify-self:stretch; }

  .hero__title{
    font-size:clamp(2.4rem,11vw,3.4rem); max-width:14ch;
    text-wrap:balance;
  }

  /* Prsten — središnja tačka kompozicije. */
  .shell:not(.shell--page) .hero-cast{
    display:block; width:min(58vw,300px); margin:0;
    position:relative;
  }
  /* Mek bronzani sjaj iza prstena: nad užurbanom fotografijom prsten inače
     nema od čega da se odvoji. Ide iza njega, u njegovom stacking
     contextu, pa ne dira ni naslov ni dugmad. */
  .shell:not(.shell--page) .hero-cast::before{
    content:""; position:absolute; inset:-22%; z-index:-1; pointer-events:none;
    background:radial-gradient(circle at 50% 50%,
      rgba(232,181,115,.20) 0%, rgba(232,181,115,.10) 42%,
      rgba(193,128,47,.05) 66%, rgba(193,128,47,0) 100%);
  }
  /* Očitavanja u jednom redu: CuSn10 · 1180 °C · 950 min⁻¹ */
  .shell:not(.shell--page) .hero-cast .hero-cast__hud{
    display:flex; flex-wrap:nowrap; justify-content:center; gap:0;
    margin-top:var(--s3); color:rgba(255,255,255,.82);
    font-size:.875rem; white-space:nowrap;
  }
  .hero-cast__hud .hud__k{ display:none; }
  .hero-cast__hud li + li::before{ content:"·"; margin:0 var(--s2); opacity:.6; }
  .hero-cast__hud b{ color:var(--bronze-hi); }
  /* Na niskom ekranu očitavanja otpadaju pre nego što išta drugo popusti. */
  @media (max-height:699px){
    .shell:not(.shell--page) .hero-cast .hero-cast__hud{ display:none; }
  }
  /* Najniži telefoni: prsten sme da se skupi, naslov ne. */
  @media (max-height:660px){
    .shell:not(.shell--page) .hero-cast{ width:min(48vw,220px); }
  }

  /* Dugmad u jednom redu, jednake širine, najmanje 44px visine.
     Ukrasna strelica/ikona OTPADA na telefonu. Razlog je izmeren na 360px,
     gde je red 304px, pilula 146px, a natpisu „Prodajni program" treba
     120px — lestvica iz zadatka ne stiže dotle:
        zatečeno (odmak 10, font 0,92rem)   treba 120, ima  99
        odmak 6                             treba 120, ima 103
        odmak 6 + font 14px (donja granica) treba 114, ima 103
        odmak 4 + font 14px                 treba 114, ima 105
        bez strelice, odmak 8, pun font     treba 120, ima 120
     Dakle ni oba koraka zajedno ne stanu, ni kad se prekorači granica od
     14px. Ikona je ukras — pilula i bez nje čita kao dugme — pa se gubi
     ona, a ne veličina slova i ne red. Slaganje jedno ispod drugog nije
     potrebno. Vidi REPORT-run10.md. */
  .hero__acts{ flex-direction:row; gap:var(--s3); margin:0; }
  .hero__acts .pill{ flex:1 1 0; width:auto; min-width:0; min-height:44px; padding:var(--s3) var(--s2); }
  .hero__acts .pill svg{ display:none; }
  .hero__acts .pill span{ min-width:0; }

  /* Tačkice u petom redu, i dalje apsolutne prema heroju. */
  .shell:not(.shell--page) .dots{ bottom:14px; }

  /* Zavesa preko fotografije: blaga, vertikalna, gušća prema donjoj
     trećini gde stoje dugmad. Elipsa oko naslova iz desktop verzije ostaje
     — samo je spuštena na visinu na kojoj naslov sada i stoji. */
  .shell:not(.shell--page) .shell__scrim{
    background:
      radial-gradient(ellipse 72% 26% at 50% 30%,
        rgba(6,12,24,.62) 0%, rgba(6,12,24,.44) 52%, rgba(6,12,24,0) 88%),
      linear-gradient(to bottom,
        rgba(6,12,24,.56) 0%, rgba(6,12,24,.28) 22%, rgba(6,12,24,.34) 52%,
        rgba(6,12,24,.68) 78%, rgba(6,12,24,.86) 100%);
  }

  /* ---- Ulazak: naslov (postojeći) → prsten → dugmad ---- */
  .shell:not(.shell--page) .hero-cast{
    animation:castIn var(--mid) var(--ease) .30s both;
  }
  .shell:not(.shell--page) .hero__acts{ opacity:1; animation:none; }
  .shell:not(.shell--page) .hero__acts .pill{ animation:pillIn var(--mid) var(--ease) both; }
  .shell:not(.shell--page) .hero__acts .pill:nth-child(1){ animation-delay:.62s; }
  .shell:not(.shell--page) .hero__acts .pill:nth-child(2){ animation-delay:.70s; }
}
@keyframes castIn{ from{ opacity:0; transform:scale(.94); } }
@keyframes pillIn{ from{ opacity:0; transform:translateY(8px); } }
@media (prefers-reduced-motion: reduce){
  .hero-cast,.hero__acts .pill{ animation:none !important; opacity:1 !important; transform:none !important; }
}

/* ============================================================
   DOTERIVANJE (deo F)
   ------------------------------------------------------------
   Sve ispod je sloj završne obrade. Namerno stoji na kraju fajla:
   nijedno pravilo ovde ne sme da koristi skraćenicu `background:`
   nad .gcard / .gpanel / .entry__panel / .pcard__cap, jer bi obrisalo
   specularni sloj definisan gore.
   ============================================================ */

/* ---------- 5. Specularni odsjaj na staklu ----------
   Dijagonalna svetlost klizne preko stakla za 600ms pri prelasku mišem.
   Ide kao background-image sloj, ne pseudo-element, da ne dira slojeve
   sadržaja (npr. apsolutno pozicionirane panele legura). Stoji ovde, na
   kraju fajla, jer skraćenica `background:` u .pcard__cap i .entry__panel
   briše sliku — ranije je ovaj blok bio iznad njih i na
   dve od četiri površine nije radio ništa. */
.gcard,.gpanel,.entry__panel,.pcard__cap{
  background-image:linear-gradient(112deg,
    rgba(255,255,255,0) 38%, rgba(255,255,255,.3) 50%, rgba(255,255,255,0) 62%);
  background-size:260% 100%;
  background-position:-40% 0;
  background-repeat:no-repeat;
}
.gcard,.gpanel{
  transition:transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease),
             background-position var(--slow) var(--ease);
}
.entry__panel,.pcard__cap{
  transition:transform var(--mid) var(--ease), background-position var(--slow) var(--ease);
}
.gcard:hover,.gpanel:hover,.entry:hover .entry__panel,.pcard:hover .pcard__cap{
  background-position:140% 0;
}
[data-theme="dark"] .gcard,[data-theme="dark"] .gpanel,
[data-theme="dark"] .entry__panel,[data-theme="dark"] .pcard__cap{
  background-image:linear-gradient(112deg,
    rgba(255,255,255,0) 38%, rgba(255,255,255,.09) 50%, rgba(255,255,255,0) 62%);
}
@media (prefers-reduced-motion: reduce){
  .gcard,.gpanel,.entry__panel,.pcard__cap{ background-image:none; }
}

/* ---------- 2. Prsten kursora ----------
   Prati pokazivač i naraste nad linkovima i karticama. mix-blend-mode
   difference drži ga vidljivim i na beloj kartici i na tamnoj fotografiji.
   Sistemski kursor se NE sakriva — ovo je dodatak, ne zamena. */
.cursor{
  position:fixed; left:0; top:0; z-index:420;
  width:28px; height:28px; margin:-14px 0 0 -14px;
  border:1.5px solid #fff; border-radius:50%;
  mix-blend-mode:difference; pointer-events:none;
  opacity:0;
  transition:width var(--fast) var(--ease), height var(--fast) var(--ease),
             margin var(--fast) var(--ease), opacity var(--fast) var(--ease);
  will-change:transform;
}
.cursor.is-on{ opacity:1; }
.cursor.is-big{ width:48px; height:48px; margin:-24px 0 0 -24px; }

/* ---------- 1. Magnetna kružna dugmad ----------
   Pomak upisuje js/app.js kao inline transform; ovde je samo kriva
   povratka. .circ već ima transition za transform, ali je brža — magnet
   traži mekši povratak kad pokazivač ode. */
.circ[data-mag]{ transition:transform var(--fast) var(--ease), background var(--fast) var(--ease),
                            border-color var(--fast) var(--ease), color var(--fast) var(--ease); }

@media (hover:none),(pointer:coarse){
  .cursor{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .cursor{ display:none; }
  .circ[data-mag]{ transform:none !important; }
}

/* ---------- 3. Ulaz naslova — reč po reč ----------
   Svaka reč stoji u maski; unutrašnji element klizne odozdo i izoštri se.
   Kreće tek kad preloader siđe, da se ulaz ne odigra iza zavese. */
.hw{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.08em; }
.hw > i{
  display:inline-block; font-style:inherit;
  transform:translateY(106%); filter:blur(8px); opacity:0;
}
html.pre-done .hw > i{ animation:hwIn var(--slow) var(--ease) both; }
@keyframes hwIn{
  from{ transform:translateY(106%); filter:blur(8px); opacity:0; }
  to{ transform:none; filter:blur(0); opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .hw{ overflow:visible; }
  .hw > i{ transform:none !important; filter:none !important; opacity:1 !important; animation:none !important; }
}

/* ---------- 4. Dubina fotografije u zaglavlju ----------
   Fotografija putuje 0,85× brzine skrola UNUTAR svog zaobljenog okvira.
   Prekoračenje od 44px na vrhu sprečava da se ispod nje ukaže praznina
   dok putuje naniže. Kartice, traka i rail se ne pomeraju. */
.shell__bg{ inset:-44px 0 0; will-change:transform; }
@media (prefers-reduced-motion: reduce){
  .shell__bg{ inset:0; transform:none !important; }
}

/* ---------- 6. Brojači kao bubanj ----------
   Svaka cifra je traka od dvadeset polja (0–9 dvaput) u prozoru visine
   1em. Traka sklizne do svog polja, sa jednim punim krugom pre toga.
   Tabularne cifre drže širinu — bubanj ne sme da pomera tekst oko sebe. */
.odo__m{ display:inline-flex; align-items:flex-end; font-variant-numeric:tabular-nums; }
.odo__c{ display:block; overflow:hidden; height:1em; }
.odo__r{
  display:block; transform:translateY(0);
  transition:transform 1.5s cubic-bezier(.16,.9,.24,1);
}
/* Namerno .odo__d, a ne <i>: .specbar__v i i .result__v i već nose svoju
   veličinu slova, pa bi cifre u bubnju pokupile tuđi font-size. */
.odo__d{ display:block; height:1em; line-height:1em; }
.odo__s{ display:block; }
@media (prefers-reduced-motion: reduce){
  .odo__r{ transition:none !important; }
}

/* ---------- 7. Kod sekcije se ispisuje ---------- */
.sect-id b{ display:inline-block; }

/* ---------- 8. Odziv kalkulatora ----------
   Rezultat pukne pri svakoj promeni; presek se iscrtava potezom kad se
   promeni oblik, umesto da bljesne gotov. */
@keyframes resPop{ from{ transform:scale(1.06); } to{ transform:none; } }
.result__v.is-pop{ animation:resPop var(--fast) var(--ease); }
.calc-shape.is-draw .shape-fill,
.calc-shape.is-draw .shape-hole{ transition:stroke-dashoffset var(--slow) var(--ease); }
@media (prefers-reduced-motion: reduce){
  .result__v.is-pop{ animation:none; }
  .calc-viz svg .shape-fill,.calc-viz svg .shape-hole{
    stroke-dasharray:none !important; stroke-dashoffset:0 !important; transition:none !important; }
}

/* ---------- 9. Pokretna pilula u izboru legura ----------
   Jedna pilula klizi između stavki. Pozadinu aktivnog dugmeta gasimo tek
   kad js/app.js javi da je pilula tu (.has-pill) — bez skripte ostaje
   stara, puna pozadina. */
.alloy-nav{ position:relative; }
.alloy-nav__pill{
  position:absolute; left:0; right:0; top:0; height:0;
  border-radius:var(--r-pill);
  background:var(--blue-deep); border:1px solid var(--blue-deep);
  opacity:0; z-index:0; pointer-events:none;
  transition:transform var(--mid) var(--ease), height var(--mid) var(--ease),
             opacity var(--fast) var(--ease);
}
.alloy-nav button{ position:relative; z-index:1; }
.alloy-nav.has-pill button.is-on{ background:transparent; border-color:transparent; }
.alloy-nav.has-pill button:hover{ transform:none; }
.alloy-nav.has-pill button:not(.is-on):hover{ transform:translateX(4px); }

/* ---------- 10. Prelazak preko kartice proizvoda ----------
   Fotografija naraste u svom isečku, bronzana linija se izvuče ispod
   naslova sleva nadesno, a stakleni natpis se podigne za 4px. */
.pcard:hover .pcard__img{ transform:scale(1.04); }
.pcard__cap h3{ position:relative; display:inline-block; }
.pcard__cap h3::after{
  content:''; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background-color:var(--bronze);
  transform:scaleX(0); transform-origin:left center;
  transition:transform var(--mid) var(--ease);
}
.pcard:hover .pcard__cap h3::after{ transform:scaleX(1); }
.pcard:hover .pcard__cap{ transform:translateY(-4px); }
@media (prefers-reduced-motion: reduce){
  .pcard:hover .pcard__cap{ transform:none; }
  .pcard__cap h3::after{ display:none; }
}

/* ---------- 11. Prelaz između stranica ----------
   Zastor u boji pozadine: izlaz 180ms, ulaz 260ms. Boja je ista kao kod
   preloadera, pa se dva sloja na učitavanju ne vide kao dva. */
.pgx{
  position:fixed; inset:0; z-index:290;
  background-color:var(--bg);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--fast) var(--ease), visibility var(--fast);   /* ulaz */
}
.pgx.is-out{ transition-duration:var(--fast); }                  /* izlaz */
.pgx.is-on{ opacity:1; visibility:visible; }

/* ---------- 13. Mobilna tab traka ----------
   Jedna pilula klizi ispod aktivne stavke; dodirnuta stavka se stisne
   na 0,94 i vrati — jedini taktilni odziv koji ekran ima. */
.tabbar__pill{
  position:absolute; left:0; top:6px;
  bottom:calc(6px + env(safe-area-inset-bottom));
  width:0; z-index:0; opacity:0; pointer-events:none;
  border-radius:var(--r-tile);
  background-color:rgba(0,47,143,.1);
  transition:transform var(--mid) var(--ease), width var(--mid) var(--ease),
             opacity var(--fast) var(--ease);
}
[data-theme="dark"] .tabbar__pill{ background-color:rgba(146,166,209,.14); }
.tabbar a,.tabbar button{ position:relative; z-index:1;
  transition:transform var(--fast) var(--ease), color var(--fast) var(--ease); }
.tabbar a:active,.tabbar button:active{ transform:scale(.94); }
@media (prefers-reduced-motion: reduce){
  .tabbar a:active,.tabbar button:active{ transform:none; }
}

/* ---------- 15. Potpis u podnožju ----------
   Podnožje je duboko plav zaobljen kontejner sa belim logotipom (run 11) i
   prstenom centrifugalnog livenja koji se vrlo sporo okreće u uglu. Boje
   su iz logotipa; kontrast beline na #002F8F je izmeren (vidi REPORT). */
.ft__in{
  position:relative; overflow:hidden;
  background:var(--blue-deep);
  border-color:rgba(146,166,209,.26);
  color:#fff;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.ft__ring{
  position:absolute; right:-104px; bottom:-104px;
  width:372px; height:372px; z-index:0;
  opacity:.12; pointer-events:none;
}
.ft__ring svg{ width:100%; height:100%; }
.spin-vslow{ animation:spin 90s linear infinite; transform-origin:250px 250px; }
.ft-grid,.ft-bot{ position:relative; z-index:1; }
/* Na duboko plavom uvek ide beli logotip (run 11), bez obzira na temu. */
.ft-grid .logo--light{ display:block; }
.ft-grid .logo--dark{ display:none; }
.ft .ft__h{ color:var(--blue-lite); }
.ft .prose{ color:rgba(255,255,255,.78); }
.ft .prose strong{ color:#fff; }
.ft ul a{ color:rgba(255,255,255,.8); }
.ft ul a:hover,[data-theme="dark"] .ft ul a:hover{ color:var(--bronze-hi); }
.ft__contact a,.ft__contact span{ color:rgba(255,255,255,.8); }
.ft__contact a:hover,[data-theme="dark"] .ft__contact a:hover{ color:var(--bronze-hi); }
.ft-bot{ border-top-color:rgba(255,255,255,.2); color:rgba(255,255,255,.62); }
/* Plutajuća dugmad lebde iznad tab trake i tačno tu padne poslednji red
   podnožja. Na mobilnom se zato ostavlja rezerva ispod njega. */
@media (max-width:900px){
  .ft-bot{ padding-bottom:calc(var(--fab) + var(--fab-gap)); }
}
@media (prefers-reduced-motion: reduce){
  .spin-vslow{ animation:none !important; }
}

/* ---------- 16. LQIP ----------
   Element nosi 20px predložak kao pozadinu; puna fotografija stoji u
   ovom sloju i preliva se preko njega kad se učita. Nasleđuje kadriranje
   i zaobljenje roditelja, pa okrugle sličice ostaju okrugle. */
.lq{
  position:absolute; inset:0;
  background-image:inherit;
  background-size:inherit; background-position:inherit; background-repeat:no-repeat;
  border-radius:inherit;
  opacity:0; pointer-events:none;
  transition:opacity var(--mid) var(--ease);
}
.lq.is-on{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .lq{ transition:none; }
}

/* ---------- 19. Hladan ton fotografija u tamnoj temi ----------
   Fotografije su snimljene pod toplim svetlom livnice; u tamnoj temi
   se blago ohlade i prigase da svetloplavi logotip i beli tekst ne
   moraju da se bore sa narandžastom. Zastor ostaje isti, pa kontrast
   naslova preko fotografije može samo da poraste. */
[data-theme="dark"] .shell__slide,
[data-theme="dark"] .pcard__img,
[data-theme="dark"] .entry__img,
[data-theme="dark"] .cta__img,
[data-theme="dark"] .gal__i,
[data-theme="dark"] .vid__poster{
  filter:saturate(.88) brightness(.93) hue-rotate(-6deg);
}

/* ---------- 20. Tiho disanje u zaglavlju ----------
   Aktivni indikator slajda diše 22 -> 30px u krugu od 6s. */
.dots button.is-on{ width:30px; animation:dotBreathe 6s var(--ease) infinite; }
@keyframes dotBreathe{
  0%,100%{ width:22px; }
  50%    { width:30px; }
}
/* Primer u polju „Dimenzija" se smenjuje svakih 4s, sa pretapanjem. */
.finder input::placeholder{ transition:opacity var(--mid) var(--ease); }
.finder input.is-fading::placeholder{ opacity:0; }
@media (prefers-reduced-motion: reduce){
  .dots button.is-on{ animation:none; width:30px; }
  .finder input::placeholder{ transition:none; }
}

/* ============================================================
   CRTEŽ PRESEKA (run 5)
   Crna metalurgija i Hardox nemaju upotrebljivu fotografiju:
   klijentov stari sajt daje 500x300 sa utisnutim žigom, a Hardox
   samo 150x112. Umesto mutne slike, ta mesta dobijaju crtež
   preseka — isti oblici koje kalkulator crta u js/calc.js, tankom
   linijom u --blue-lite preko tamnog brend preliva.

   Svaki potez nosi pathLength="100", pa jedna ista animacija izvlači
   i pravu i kružnicu bez merenja dužine u JS-u.
   ============================================================ */
.xsec{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse 120% 86% at 50% 16%, rgba(46,85,169,.34), transparent 64%),
    linear-gradient(168deg, #0B1B3D 0%, #061020 60%, #0A1830 100%);
}
.xsec svg{ width:min(64%,620px); height:auto; }
/* Debljina linije NE sme da se zada ovde, niti sme vector-effect:
   non-scaling-stroke. Uz njega stroke-dasharray radi u ekranskim pikselima,
   pa pathLength="100" prestaje da važi i oblik se iscrta samo delimično —
   krug ostane polukrug, pravougaonik ostane ugao. Debljinu nosi sam SVG. */
.xsec [data-draw]{
  fill:none;
  stroke:var(--blue-lite);
  stroke-linecap:square;
  stroke-linejoin:miter;
  opacity:.55;
  stroke-dasharray:100;
  stroke-dashoffset:100;
}
html.pre-done .xsec [data-draw]{ animation:xsecDraw 1.5s var(--ease) forwards; }
@keyframes xsecDraw{ to{ stroke-dashoffset:0; } }

/* Oznaka preseka ispod svakog oblika — mono, kao i ostali tehnički podaci. */
.xsec text{
  fill:var(--blue-lite); opacity:.5;
  font-family:var(--mono); font-size:7px; letter-spacing:.14em;
  text-anchor:middle;
}

/* U pločici kataloga crtež stoji ispod tamnog preliva kartice, pa mu
   treba nešto više prisustva; širina je manja jer je i pločica manja. */
.xsec--tile svg{ width:76%; }
.xsec--tile [data-draw]{ opacity:.62; }
.xsec--tile text{ display:none; }

/* CTA traka je niska i široka. */
.xsec--band svg{ width:min(74%,620px); }

/* Zaglavlje: naslov i pasus stoje dole levo, pa crtež ide gore desno —
   inače bi linije prolazile kroz tekst i delovale kao smetnja, a ne kao
   pozadina. Zastor se ublažava da se linije uopšte vide; podloga je ionako
   tamna, tako da kontrast naslova time ne pada. */
.shell--xsec .shell__scrim{ opacity:.5; }
/* Zaglavlje sa fotografijom ima 44px pretka nagore zbog paralakse (stavka 4
   run-a 3). Crtež nema šta da paralaksira, a taj pretek bi ga gurnuo pod
   gornju traku i zaobljeni ugao bi ga odsekao. */
.shell--xsec .shell__bg{ inset:0; transform:none !important; }
.shell--page .xsec{
  align-items:flex-start;
  justify-content:flex-end;
  padding:clamp(20px,6vh,72px) clamp(20px,5vw,88px);
}
.shell--page .xsec svg{ width:min(58%,560px); }
@media (max-width:900px){
  /* Na uskom ekranu zaglavlje je nisko i naslov ga popuni celo — crtež bi
     prolazio kroz tekst gde god da se stavi. Zato u zaglavlju ostaje samo
     brend preliv; crtež se i dalje vidi niže na istoj strani, u entry
     kartici i CTA traci. */
  .shell--page .xsec svg{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  html.pre-done .xsec [data-draw]{ animation:none; stroke-dashoffset:0; }
}

/* ============================================================
   PADAJUĆA LISTA — jedna komponenta za svaki <select>  (run 7)
   ------------------------------------------------------------
   Izvorni <select> ostaje u dokumentu i ostaje izvor istine: i dalje se
   šalje uz formu i i dalje ga čitaju postojeće skripte. Vidljivu ulogu
   preuzima okidač .csel__t uz njega, a sama lista .csel-p ide na kraj
   <body>-ja — iznad lepljive trake i van svakog kontejnera koji bi je
   odsekao. Na dodirnim uređajima (hover:none) komponenta se ne gradi;
   tamo je OS-ov izbornik bolji.
   ============================================================ */

/* Izvorni select dok komponenta radi. Ne display:none — polje treba da
   ostane merljivo i dohvatljivo skriptama, samo van ekrana i van reda
   tabulatora (tabindex="-1" postavlja skripta). */
/* Run 10 — ovo je koren bočnog prelivanja donjeg panela.
   `.csel-off` je pomoćna klasa „sklonjeno s ekrana", ali je `width:1px`
   gubio od `.finder select{ width:100% }`: klasa+element (0,1,1) je jača
   od same klase (0,1,0). Izvorni <select> je zato ostajao širok koliko i
   polje (326px na 360), apsolutno postavljen, i virio ~3px preko
   unutrašnje ivice panela — zajedno sa `margin:-1px`. Mera je sada
   izričita, istim `!important` kojim je i `position` već bio. */
.csel-off{
  position:absolute !important; height:1px;
  width:1px !important; max-width:1px !important; min-width:0 !important;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

.csel__t{
  display:flex; align-items:center; gap:var(--s2);
  font-family:inherit; text-align:left;
  border:0; background:none; margin:0; padding:0;
  color:var(--ink); cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.csel__v{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.csel__chev{
  width:10px; height:6px; flex:none; color:var(--ink-3);
  transition:transform var(--fast) var(--ease);
}
.csel__t[aria-expanded="true"] .csel__chev{ transform:rotate(180deg); }
/* U kalkulatoru i u formi strelicu nosi pozadina polja (deljena sa .sel
   odnosno .fld select), pa se sopstvena sklanja. */
.field > .csel__t .csel__chev,.fld > .csel__t .csel__chev{ display:none; }

/* Pronalazač — ista mera kao <select> koji zamenjuje. */
.finder .csel__t{ width:100%; font-size:.88rem; font-weight:600; }
.finder .csel__t[aria-expanded="true"] .csel__v{ color:var(--blue-deep); }
[data-theme="dark"] .finder .csel__t[aria-expanded="true"] .csel__v{ color:var(--blue-lite); }
/* Plutajući natpis u formi mora da se podigne i dok je lista otvorena;
   natpis stoji PRE okidača u dokumentu, pa braća ne pomažu — stanje
   nosi sam .fld. */
.fld.csel-open > label{ transform:translateY(-8px) scale(.86); color:var(--blue-deep); }
[data-theme="dark"] .fld.csel-open > label{ color:var(--blue-lite); }

/* ---------- Ploča ---------- */
.csel-p{
  position:fixed; z-index:160;          /* iznad lepljive trake (150) */
  padding:var(--s2); border-radius:var(--r-tile);
  background:var(--glass-2);
  border:1px solid var(--glass-brd);
  box-shadow:var(--sh-lift),var(--hi-inset);
  backdrop-filter:blur(var(--blur-card)) saturate(1.35);
  -webkit-backdrop-filter:blur(var(--blur-card)) saturate(1.35);
  opacity:0; visibility:hidden;
  transform:translateY(-6px) scale(.98); transform-origin:top left;
  transition:opacity var(--fast) var(--ease), transform var(--fast) var(--ease), visibility var(--fast);
}
/* Ulaz 180ms, izlaz 120ms — izlaz nosi osnovno pravilo. */
.csel-p.is-on{ opacity:1; visibility:visible; transform:none; transition-duration:var(--fast); }
.csel-p--up{ transform:translateY(6px) scale(.98); transform-origin:bottom left; }
/* 376px = devet redova po 40px + razdelnik: „Materijal" tako staje ceo,
   a duže liste (kalkulator ima trinaest legura) i dalje skroluju. */
.csel-p__in{ max-height:376px; overflow-y:auto; overscroll-behavior:contain; }
/* Meko gašenje na donjoj ivici, samo dok ima još redova ispod. */
.csel-p::after{
  content:''; position:absolute; left:1px; right:1px; bottom:1px; height:30px;
  pointer-events:none; border-radius:0 0 var(--r-tile) var(--r-tile);
  background:linear-gradient(to top, var(--glass-2) 20%, transparent);
  opacity:0; transition:opacity var(--fast) var(--ease);
}
.csel-p.has-more::after{ opacity:1; }

/* ---------- Redovi ---------- */
.csel-o{
  display:flex; align-items:center; gap:var(--s2);
  height:40px; padding:0 var(--s3); border-radius:var(--r-xs);
  color:var(--ink-2); font-size:.88rem; font-weight:600;
  cursor:pointer; user-select:none;
}
.csel-o__l{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Jedno stanje i za miš i za tastaturu — inače se otimaju. */
.csel-o.is-cur{ background:rgba(46,85,169,.12); color:var(--ink); }
[data-theme="dark"] .csel-o.is-cur{ background:rgba(146,166,209,.16); }
.csel-o[aria-selected="true"]{ color:var(--ink); }
.csel-o__ck{ width:14px; height:14px; flex:none; color:var(--bronze); opacity:0; }
[data-theme="dark"] .csel-o__ck{ color:var(--bronze-hi); }
.csel-o[aria-selected="true"] .csel-o__ck{ opacity:1; }
.csel-p__div{ height:1px; margin:var(--s1) var(--s3); background:var(--line); }

/* Kružić metala — tonovi su u tokens.css, ovde samo raspored. */
.csel__sw{
  width:14px; height:14px; flex:none; border-radius:50%;
  border:1px solid rgba(10,17,28,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
[data-theme="dark"] .csel__sw{ border-color:rgba(255,255,255,.2); }
.csel__sw[data-m="aluminijum"]{ background:linear-gradient(140deg,var(--m-aluminijum),var(--m-aluminijum-2)); }
.csel__sw[data-m="bakar"]{ background:linear-gradient(140deg,var(--m-bakar),var(--m-bakar-2)); }
.csel__sw[data-m="mesing"]{ background:linear-gradient(140deg,var(--m-mesing),var(--m-mesing-2)); }
.csel__sw[data-m="bronza"]{ background:linear-gradient(140deg,var(--m-bronza),var(--m-bronza-2)); }
.csel__sw[data-m="kalaj-cink-olovo"]{ background:linear-gradient(140deg,var(--m-kalaj-cink-olovo),var(--m-kalaj-cink-olovo-2)); }
.csel__sw[data-m="crna-metalurgija"]{ background:linear-gradient(140deg,var(--m-crna-metalurgija),var(--m-crna-metalurgija-2)); }
.csel__sw[data-m="prohrom-inox"]{ background:linear-gradient(140deg,var(--m-prohrom-inox),var(--m-prohrom-inox-2)); }
.csel__sw[data-m="hardox"]{ background:linear-gradient(140deg,var(--m-hardox),var(--m-hardox-2)); }

/* Crtež preseka uz oblik i mrežica uz „Sve grupe" / „Svi oblici". */
.csel__ic{ width:16px; height:16px; flex:none; color:var(--ink-3); }
.csel-o.is-cur .csel__ic,.csel-o[aria-selected="true"] .csel__ic{ color:var(--blue-deep); }
[data-theme="dark"] .csel-o.is-cur .csel__ic,
[data-theme="dark"] .csel-o[aria-selected="true"] .csel__ic{ color:var(--blue-lite); }

@media (prefers-reduced-motion: reduce){
  .csel-p{ transition:opacity .001s, visibility .001s; transform:none; }
  .csel-p.is-on{ transition-duration:.001s; }
  .csel-p--up{ transform:none; }
  .csel__chev{ transition:none; }
}

/* ============================================================
   POJAS ZA FIKSNI RAIL  (run 7)
   ------------------------------------------------------------
   Rezervacija se radi jednom, na kontejnerima, ne po sekcijama:
   .wrap nosi sve sekcije, .ft__in nosi podnožje. Blok mora da stoji
   NA KRAJU fajla jer .ft__in gore postavlja `padding:` skraćenicom,
   iste specifičnosti — pa bi, da je ranije, bio pregažen.

   Računa se samo razlika koja stvarno fali: kad je prozor širi od
   --maxw, automatska margina .wrap-a već odgurne sadržaj dalje od
   rail-a i tada se ne pomera ništa (na 1920px pojas je 0).

   Heroj (.shell) i staklena ploča podnožja namerno zadržavaju punu
   širinu — rail preko njih stoji po dizajnu, kao i do sada. Pomera se
   ono što se čita.
   ============================================================ */
@media (min-width:901px){
  .wrap{ padding-left:max(var(--gutter),
         calc(var(--rail-gut) - (100% - min(100%, var(--maxw))) / 2)); }
  .ft__in{ padding-left:max(clamp(28px,4vw,56px),
           calc(var(--rail-gut) - var(--shell-inset))); }
}

/* ---------- Run 11 — video prozori ----------
   Staklena pločica (.gcard: radijus kartice, gornji odsjaj) sa 16:9
   okvirom. U okviru je naš poster i kružno dugme sajta; <iframe> ulazi
   tek na klik (js/app.js). Mreža kao galerija proizvoda: 1 / 2 od 600 /
   3 od 1024, minmax(0,1fr) da duga reč ne napravi bočni skrol. */
.vids{ display:grid; gap:var(--s4); margin-top:var(--s6); grid-template-columns:minmax(0,1fr); }
@media (min-width:600px){ .vids{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .vids{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.gcard.vid{ padding:var(--s2); display:flex; flex-direction:column; min-width:0; }
.vid__box{
  position:relative; aspect-ratio:16 / 9; overflow:hidden;
  border-radius:var(--r-tile); background:var(--bg-2);
}
.vid__btn{
  position:absolute; inset:0; width:100%; height:100%;
  padding:0; margin:0; border:0; background:none; cursor:pointer;
  border-radius:inherit; -webkit-tap-highlight-color:transparent;
}
.vid__btn[hidden]{ display:none; }
.vid__btn:focus-visible{ outline:2px solid var(--blue-lite); outline-offset:-3px; }
.vid__poster{
  position:absolute; inset:0; border-radius:inherit;
  background-size:cover; background-position:center;
  transition:transform var(--slow) var(--ease);
}
/* Blagi zatamnjeni pod da krug i poster ne budu iste svetline. */
.vid__btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(to top, rgba(5,9,15,.34), rgba(5,9,15,0) 60%);
}
.vid__play{
  position:absolute; left:50%; top:50%; z-index:1;
  width:60px; height:60px; transform:translate(-50%,-50%);
  box-shadow:var(--sh-card),var(--hi-inset);
}
.vid__play svg{ width:22px; height:22px; margin-left:2px; }
.vid__btn:hover .vid__poster{ transform:scale(1.04); }
.vid__btn:hover .vid__play,.vid__btn:focus-visible .vid__play{ background:var(--blue); border-color:var(--blue); }
.vid__box iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.vid__cap{
  margin:var(--s2) var(--s2) var(--s1); font-family:var(--mono); font-size:.875rem; line-height:1.5;
  color:var(--ink-2); overflow-wrap:anywhere;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.vids__all{ margin-top:var(--s5); }
.vids-empty{
  margin-top:var(--s6); display:flex; align-items:center; gap:var(--s4);
}
.vids-empty .circ svg{ width:20px; height:20px; }
@media (prefers-reduced-motion: reduce){
  .vid__poster{ transition:none; }
  .vid__btn:hover .vid__poster{ transform:none; }
}

/* ---------- Run 11 — tabele asortimana ----------
   Ista staklena komponenta kao „Tehnički podaci" (.tbl-wrap/.tbl-scroll/
   .tbl). Svaka tabela je red sa naslovom i brojem redova koji se otvara
   na mestu; prve tri su otvorene. Na desktopu okvir ima svoju visinu, a
   zaglavlje i prva kolona stoje zalepljeni UNUTAR njega; na telefonu
   nema zalepljenog, samo bočni skrol sa izbledelom ivicom. Zaglavlja su u
   rečima izvora, pa bez velikih slova iz .tbl th. */
.tbls{ display:grid; gap:var(--gap-stack); margin-top:var(--s6); }
.tbl-blk__t{
  display:flex; align-items:center; gap:var(--s3); width:100%;
  padding:var(--s4) var(--s5); margin:0; border:0; background:none; cursor:pointer;
  font:inherit; color:var(--ink); text-align:left; border-radius:var(--r-card);
  -webkit-tap-highlight-color:transparent;
}
.tbl-blk__t:focus-visible{ outline:2px solid var(--blue-lite); outline-offset:-3px; }
.tbl-blk__n{ flex:1 1 auto; min-width:0; font-size:var(--fs-h3); font-weight:600; line-height:1.25; letter-spacing:-.01em; }
.tbl-blk__c{ flex:0 0 auto; font-family:var(--mono); font-size:.875rem; color:var(--ink-3); white-space:nowrap; }
.tbl-blk__chev{ flex:0 0 auto; width:11px; height:7px; color:var(--ink-3); transition:transform var(--mid) var(--ease); }
.tbl-blk.is-open .tbl-blk__chev{ transform:rotate(180deg); }
.tbl-blk__b{ border-top:1px solid var(--line); }
.tbl-blk__b[hidden]{ display:none; }
.tbl-blk.is-opening .tbl-blk__b{ animation:tblIn var(--slow) var(--ease); }
@keyframes tblIn{ from{ opacity:0; transform:translateY(-6px); } }
.tbl-note,.tbl-src{ margin:0; padding:var(--s3) var(--s5); font-family:var(--mono); font-size:.875rem; line-height:1.5; color:var(--ink-3); }
.tbl-note{ padding-bottom:0; }
.tbl-src{ border-top:1px solid var(--line); }
.tbl-src a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.tbl-scroll:focus-visible{ outline:2px solid var(--blue-lite); outline-offset:-2px; }
.tbl--data{ min-width:max(100%, calc(var(--c) * 88px)); }
.tbl--data th,.tbl--data td{ padding:var(--s2) var(--s4); white-space:nowrap; }
.tbl--data thead th{
  white-space:normal; vertical-align:bottom; min-width:64px;
  text-transform:none; letter-spacing:.02em; font-size:.875rem;
}
.tbl--data tbody th{
  text-align:left; font-size:.875rem; font-weight:500; letter-spacing:0;
  text-transform:none; color:var(--ink); font-family:var(--mono);
}
.tbl--data .num{ text-align:right; font-family:var(--mono); font-size:.875rem; font-variant-numeric:tabular-nums; }
/* Zaglavlje ostaje u slovima zaglavlja i kad je kolona brojčana. */
.tbl--data thead th.num{ font-family:inherit; font-size:.875rem; }
@media (min-width:768px){
  .tbl-blk .tbl-scroll{ max-height:min(70vh,620px); overflow:auto; }
  /* Zalepljene ćelije moraju biti neprozirne: isto staklo kao okvir,
     složeno preko pozadine strane, pa se sadržaj ispod ne providi. */
  .tbl--data thead th,.tbl--data tbody th{
    background:linear-gradient(var(--glass-2),var(--glass-2)),var(--bg);
  }
  .tbl--data thead th{ position:sticky; top:0; z-index:2; box-shadow:inset 0 -1px 0 var(--line); }
  .tbl--data tbody th{ position:sticky; left:0; z-index:1; box-shadow:inset -1px 0 0 var(--line); }
  .tbl--data thead th:first-child{ left:0; z-index:3; box-shadow:inset -1px -1px 0 var(--line); }
}
@media (max-width:767px){
  .tbl-blk__t{ padding:var(--s3) var(--s4); }
  .tbl-note,.tbl-src{ padding-left:var(--s4); padding-right:var(--s4); }
  .tbl-blk .tbl-scroll.is-r{ -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent); }
  .tbl-blk .tbl-scroll.is-l{ -webkit-mask-image:linear-gradient(to right,transparent,#000 32px); mask-image:linear-gradient(to right,transparent,#000 32px); }
  .tbl-blk .tbl-scroll.is-l.is-r{ -webkit-mask-image:linear-gradient(to right,transparent,#000 32px,#000 calc(100% - 32px),transparent); mask-image:linear-gradient(to right,transparent,#000 32px,#000 calc(100% - 32px),transparent); }
}
@media (prefers-reduced-motion: reduce){
  .tbl-blk.is-opening .tbl-blk__b{ animation:none; }
  .tbl-blk__chev{ transition:none; }
}

/* ---------- Run 12 — tabele koje postoje samo kao slike ----------
   Klijentove sopstvene slike tabela, dok ne pošalje Excel/Word. Kartica
   je ista staklena .gcard kao video pločica; sličica pokazuje vrh tabele
   (zaglavlje), cela se otvara u svetlosnoj kutiji u načinu „dokument". */
.tabimgs{ display:grid; gap:var(--s4); margin-top:var(--s6); grid-template-columns:minmax(0,1fr); }
@media (min-width:600px){ .tabimgs{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .tabimgs{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.gcard.tabimg{ margin:0; padding:var(--s2); display:flex; flex-direction:column; min-width:0; }
.gal__i.tabimg__btn{
  grid-row:auto; display:block; width:100%; aspect-ratio:4 / 3;
  background:var(--bg-2); box-shadow:none; border-radius:var(--r-tile); overflow:hidden;
}
.tabimg__btn:focus-visible{ outline:2px solid var(--blue-lite); outline-offset:2px; }
.tabimg__btn picture{ display:block; height:100%; }
.tabimg__btn img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top center; }
.tabimg--nat .tabimg__btn img{ object-fit:none; }   /* uska tabela: bez razvlačenja */
[data-theme="dark"] .tabimg__btn img{ filter:brightness(.9); }
.tabimg__cap{ margin:var(--s2) var(--s2) var(--s1); font-size:.95rem; font-weight:500; line-height:1.4; color:var(--ink); }
.tabimg__cap span{ display:block; margin-bottom:2px; font-family:var(--mono); font-size:.875rem; font-weight:400; color:var(--ink-3); }
.tabimgs__note{ margin:var(--s4) 0 0; font-family:var(--mono); font-size:.875rem; color:var(--ink-3); }
.tabimgs__note a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }

/* Svetlosna kutija, način „dokument": visoka tabela (do 640 × 3181) bi
   na 74svh bila široka stotinak piksela i nečitljiva. Ovde dobija svoju
   punu širinu (ne veću od prirodne) i skroluje se uspravno. */
.lbox--doc .lbox__stage{
  width:min(100%, var(--doc-w, 1200px)); max-height:100%;
  overflow:auto; overscroll-behavior:contain; justify-content:flex-start;
  -webkit-overflow-scrolling:touch;
}
.lbox--doc .lbox__img{ width:100%; height:auto; max-height:none; flex:0 0 auto; }

/* Run 12 — napomena o praktičnoj rezervi ispod rezultata kalkulatora. */
.calc-allow{ margin:0; max-width:46ch; text-align:center; font-family:var(--mono); font-size:.875rem; line-height:1.5; color:var(--ink-3); }

/* Run 12 — stranica 404 */
.nf-acts{ display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6); }

/* Run 12 — vidljiv fokus na kontrolama kojima je bio skinut obris.
   Isti prsten kao na ostatku sajta (svetloplavi, 2 px). */
input[type=range]:focus-visible{ outline:2px solid var(--blue-lite); outline-offset:6px; border-radius:var(--r-pill); }
.field__n:focus-within{ outline:2px solid var(--blue-lite); outline-offset:2px; }
.field > .csel__t:focus-visible,.fld > .csel__t:focus-visible{ outline:2px solid var(--blue-lite); outline-offset:2px; }
.fld input:focus-visible,.fld textarea:focus-visible,.fld select:focus-visible{ outline:2px solid var(--blue-lite); outline-offset:2px; }

/* Run 12 — očitavanja kod prstena leže na njegovom bronzanom sjaju (bronza na
   bronzi ~4,2:1). Tamna staklena podloga ih izdvaja, bronza ostaje. */
.hero-cast .hero-cast__hud{
  background:rgba(6,12,24,.58); border-radius:var(--r-tile); padding:var(--s2) var(--s3);
  backdrop-filter:blur(var(--blur-soft)); -webkit-backdrop-filter:blur(var(--blur-soft));
}
/* Tamna tema: odsjaj stakla posvetli podlogu natpisa kartice grupe. */
[data-theme="dark"] .pcard__cap p{ color:var(--ink); }

/* Run 12 — staklo na telefonu. Merenje (4x usporen procesor, 390 px, skrol
   početne): p95 okvira 50 ms sa zamućenjem u sadržaju, 16,7 ms bez. Fiksni
   slojevi (traka, tab traka, dok, panel pronalazača) zadržavaju zamućenje;
   kartice u toku stranice nose gušću boju (--glass .9) umesto njega. */
@media (max-width:900px){
  main *{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
}