/* ============================================================
   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;
}
@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:12px 24px; 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:99px; }
  ::-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:.82rem; letter-spacing:.02em; }
/* Bakarna varijanta na svetlom drži kontrast ≥4.5:1; bronza je presvetla. */
.mono-accent{ font-family:var(--mono); font-size:.82rem; 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:14px;
  font-family:var(--mono); font-size:.72rem; 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);
}
.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:10px;
  padding:13px 24px; 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:9px 16px; font-size:.82rem; }

/* 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:7px;
  padding:8px 15px; border-radius:var(--r-pill);
  border:1px solid var(--line-2);
  background:transparent; color:var(--ink-2);
  font-size:.8rem; 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);
}
.chip:hover{ transform:translateY(-2px); border-color:var(--blue-deep); color:var(--blue-deep); }
[data-theme="dark"] .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:.78rem; 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:8px;
  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:13px; color:var(--bronze); }
.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); }
/* 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); }
@media (min-width:901px){ .shell--page .hero__body{ padding-left:96px; } }
.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:10px; flex-wrap:wrap;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
  color:rgba(255,255,255,.72); margin:0 0 var(--s4);
}
.crumbs a{ color:rgba(255,255,255,.72); }
.crumbs a:hover{ color:var(--bronze-hi); }
.crumbs b{ color:#fff; font-weight:600; }
.phero__meta{ display:flex; flex-wrap:wrap; gap:8px; margin:var(--s5) 0 0; padding:0; list-style:none; }
.phero__meta li{
  font-family:var(--mono); font-size:.72rem;
  padding:7px 14px; 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:10px; }
.cta__acts{ display:flex; gap:10px; 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. */
@media (max-width:900px){
  .shell--dim .shell__scrim{
    background:
      radial-gradient(ellipse 104% 62% at 32% 76%,
        rgba(6,12,24,.6) 0%, rgba(6,12,24,.4) 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,.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%);
  }
}

.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 .38s var(--ease), background-color .38s var(--ease),
             box-shadow .38s var(--ease), border-color .38s 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:10px; 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:7px 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 .38s 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:10px 20px; 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:8px 18px; }
.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:11px 20px; font-size:.86rem; }
.topbar.is-stuck .burger{ width:44px; height:44px; }

/* Brend u mobilnom meniju */
.brand{ display:inline-flex; align-items:center; gap:10px; }
.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; }
.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:9px 13px; }
  .topbar.is-stuck{ padding:7px var(--s4); }
  .topbar__ig{ display:none; }
  .topbar__side--end{ gap:6px; }
  .brandpill{ padding:8px 14px; }
  .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:7px 10px; }
  .brandpill img,.topbar.is-stuck .brandpill img{ width:88px; }
  .topbar__phone{ width:40px; height:40px; }
  .topbar__phone svg{ width:16px; height:16px; }
  .burger{ width:40px; height:40px; padding:0 10px; }
}

/* 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:6px;
  max-width:100%;
}
.finder__f{
  position:relative; display:flex; flex-direction:column; justify-content:center;
  padding:6px 18px; 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:6px;
  font-size:.64rem; font-weight:600; letter-spacing:.08em;
  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:18px;
  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:.82rem; }
.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:4px; 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 .42s 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:10px;
    /* 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:10px 8px;
    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:4px 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:10px;
  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 .3s var(--ease), background-color .3s var(--ease),
             box-shadow .3s var(--ease), backdrop-filter .3s 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:6px; }
.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:8px; }
.rail--sm a,.rail--sm button{ width:40px; height:40px; }
.rail--sm svg{ width:18px; height:18px; }
.rail--xs{ padding:6px; gap:10px; }
.rail--xs .rail__g{ gap:3px; }
.rail--xs .rail__g + .rail__g{ padding-top:10px; }
.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:7px 13px; 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:.78rem; font-weight:600;
  line-height:1.2; white-space:nowrap;
  opacity:0; visibility:hidden; pointer-events:none; z-index:9;
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
/* 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:96px; padding-right:96px; } }
/* Run 10: kartice su otišle, pa naslov više ne mora da beži naviše —
   optički centar ide na ~48% visine heroja.
   Pomeranje ide odmakom, NE `transform`-om: transform na .hero__body pravi
   od njega koordinatni okvir za apsolutne potomke, a prsten je od run-a 10
   njegovo dete (zbog redosleda na telefonu). Sa transformom je prsten
   prestao da se meri prema .shell__in i popeo se 16px, u traku.
   Račun: donji odmak .shell-a (pola spec trake) diže centar za pola svoje
   vrednosti; ovih 25px gornjeg odmaka ga vraća i spušta na 48%. */
@media (min-width:901px){
  .shell:not(.shell--page) .hero__body{ padding-top:calc(var(--s8) + 25px); }
}
/* 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:7px;
  padding:7px 10px; 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 10: na desktopu traka NALEĆE na donju ivicu heroja tačno polovinom
   svoje visine — staklena tezga naslonjena na fotografiju. Da bi „pola"
   bilo tačno, visina mora biti poznata, pa je uvedena mera --strip-h:
   sadržaj (61px) plus dva puta unutrašnji odmak same ćelije. To je isti
   izraz koji ćelija već koristi, pa se traka ne menja — samo se sada zna
   kolika je. Ispod 901 traka stoji normalno, ispod heroja. */
.specbar{
  margin:var(--s4) var(--shell-inset) 0;
  border-radius:var(--r-card);
  display:grid; grid-template-columns:repeat(2,1fr);
  overflow:hidden;
  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);
}
@media (min-width:768px){ .specbar{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:901px){
  .specbar{
    min-height:var(--strip-h);
    /* Donja margina .shell-a (--shell-inset) se sabija sa ovom negativnom:
       spojena vrednost je max(pozitivnih) + min(negativnih). Bez oduzimanja
       inseta preklop ispadne 35px umesto 58 — mereno. */
    margin-top:calc(var(--strip-h) / -2 - var(--shell-inset));
    position:relative; z-index:3;
  }
  /* Heroj dobija isti taj pojas odozdo, da traka ne pokrije ništa svoje. */
  .shell:not(.shell--page){ padding-bottom:calc(var(--strip-h) / 2); }
  /* Podizanje dugmeta asistenta iznad trake stoji uz samu .fab--chat,
     niže u fajlu — ovde bi ga pregazilo `.fab{ bottom }` koje dolazi
     posle, pri istoj težini selektora. */
  /* Tačkice su apsolutne prema padding-boksu heroja, pa ih padding ne
     pomera — dižu se izričito, iznad gornje ivice trake. */
  .shell:not(.shell--page) .dots{ bottom:calc(12px + var(--strip-h) / 2); }
}
.specbar__i{ padding:clamp(18px,2.4vw,28px); border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
@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); font-size:.6em; }
.specbar__k{ font-size:.74rem; color:var(--ink-3); margin-top:8px; font-weight:600; }

/* ============================================================
   MOBILNA NAVIGACIJA
   ============================================================ */
.burger{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:46px; height:46px; padding:0 12px;
  border-radius:var(--r-pill);
  border:1px solid var(--glass-brd); background:var(--glass-2);
  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; } }
.burger i{ display:block; height:1.5px; background:currentColor; border-radius:2px; transition:transform var(--mid) var(--ease), width var(--mid) var(--ease); }
.burger i:nth-child(1){ width:100%; }
.burger i:nth-child(2){ width:64%; }
.burger.is-open i:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger.is-open i:nth-child(2){ width:100%; transform:translateY(-6.5px) rotate(-45deg); }

.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); }
.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:16px;
  padding:17px 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:.66rem; color:var(--ink-3); letter-spacing:.1em; }
.mnav__sub{ list-style:none; margin:0; padding:0 0 14px; display:grid; gap:1px; }
.mnav__sub a{ font-family:var(--ui); font-size:.95rem; font-weight:500; padding:9px 2px 9px 16px; border-left:1px solid var(--line); }
.mnav__sub a[aria-current="page"],.mnav__sub a:hover{ color:var(--bronze); border-color:var(--bronze); }
.mnav__foot{ margin-top:var(--s7); display:grid; gap:10px; }
.mnav__foot a{ font-family:var(--mono); font-size:.86rem; color:var(--blue-deep); }
[data-theme="dark"] .mnav__foot a{ color:var(--blue-lite); }
.mnav__tools{ display:flex; gap:10px; 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);
  padding:8px 6px calc(8px + 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:4px;
  padding:7px 2px; border:0; background:none; cursor:pointer;
  color:var(--ink-3); font-size:.62rem; font-weight:600;
  -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,.8);
  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,.78); border-color:rgba(146,166,209,.22); color:var(--ink); }
.pcard__cap h3{ font-size:1.02rem; font-weight:600; }
.pcard__cap p{ font-size:.74rem; color:var(--ink-3); 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);
}
.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,.8);
  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,.8); 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:6px; 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:6px 18px; margin:var(--s4) 0 0; padding:0; list-style:none;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; color:var(--ink-3);
}
.hud b{ color:var(--bronze); 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:8px; }
.alloy-nav button{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:15px 20px; 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:.68rem; 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:8px; 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:16px 15px; }
.props dt{ font-size:.64rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.props dd{ margin:7px 0 0; font-family:var(--display); font-size:1.2rem; font-weight:500; letter-spacing:-.02em; }
.props dd i{ font-style:normal; font-size:.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:8px; }
@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:9px;
}
.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:12px; margin-bottom:9px; }
.field__l{ font-size:.66rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }
.field__v{ font-family:var(--mono); font-size:.88rem; font-weight:600; color:var(--blue-deep); font-variant-numeric:tabular-nums; }
[data-theme="dark"] .field__v{ color:var(--bronze-hi); }

/* 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:13px 40px 13px 18px;
  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:0 2px 10px rgba(0,47,143,.45); 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; }
.dimtxt{ font-family:var(--mono); font-size:11px; 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); font-size:.38em; margin-left:6px; }
.result__k{ font-family:var(--mono); font-size:.7rem; 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:.68rem; 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:.72rem; letter-spacing:.1em; color:var(--bronze); margin-bottom:10px; }
.step p{ font-size:.9rem; color:var(--ink-2); margin:8px 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:16px 20px; font-family:var(--ui); font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); border-bottom:1px solid var(--line); }
.tbl th,.tbl td{ text-align:left; padding:13px 20px; border-bottom:1px solid var(--line); font-size:.9rem; }
.tbl th{ font-size:.66rem; font-weight:700; letter-spacing:.09em; 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:.82rem; 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:5px;
  transition:transform var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.slist li:hover{ transform:translateY(-3px); border-color:var(--blue-deep); }
.slist b{ font-family:var(--display); font-size:.98rem; font-weight:600; }
.slist i{ font-style:normal; font-family:var(--mono); font-size:.72rem; color:var(--bronze); }
.slist span{ font-size:.8rem; 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 6px; padding:11px 22px; 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); }
.pf__k{ margin-top:10px; font-size:.86rem; 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:12px;
  min-width:0; flex-wrap:wrap;
  padding:16px 22px; 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:.86rem; font-weight:500; }
.net span{ font-size:.78rem; 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:22px 20px 10px;
  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:26px; 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:.74rem; 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:16px; flex-wrap:wrap; margin-top:var(--s4); }
.form__note{ font-size:.8rem; color:var(--ink-3); max-width:36ch; }
.form__msg{
  display:none; margin-top:12px; padding:14px 20px; 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; }

.ct-block{ margin-bottom:var(--s6); }
.ct-block:last-child{ margin-bottom:0; }
.ct-block h5{ font-family:var(--ui); font-size:.66rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); margin:0 0 10px; }
.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:.86rem; }

/* ============================================================
   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 h6{ font-family:var(--ui); font-size:.66rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); margin:0 0 14px; }
.ft ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.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:5px; }
[data-theme="dark"] .ft ul a:hover{ color:var(--bronze-hi); }
.ft__contact{ display:grid; gap:5px; margin-top:var(--s4); }
.ft__contact a,.ft__contact span{ font-family:var(--mono); font-size:.84rem; 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:10px 24px; 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 10, zabeleženo namerno: pošto se spec traka podigla 40px u heroja,
   ovo fiksno dugme na prozoru visokom 900px prelazi preko prve brojke
   (56x32 preko „1999"). Probano je podizanje za pola trake — popravi 900,
   ali pokvari 1080, jer položaj trake u vidnom polju zavisi od visine
   strane, pa nijedan stalan odmak ne pokriva sve slučajeve. Dugme je
   ostavljeno kako je odobreno; plutajuće dugme koje pri skrolu prelazi
   preko sadržaja je očekivano ponašanje. Vidi REPORT-run10.md. */
.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:12px; padding:15px 16px; 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:.68rem; 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:.68rem; color:var(--ink-3); }
.chat__x{ margin-left:auto; }
.chat__body{ flex:1 1 auto; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:12px; }
.msg{ max-width:88%; font-size:.88rem; line-height:1.55; animation:msgIn .4s 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:12px 15px; border-radius:6px 16px 16px 16px; 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:8px 0 0; padding-left:17px; }
.msg--me{ align-self:flex-end; background:var(--blue-deep); color:#fff; padding:11px 15px; border-radius:16px 6px 16px 16px; }
.typing{ display:flex; gap:4px; align-self:flex-start; padding:14px 16px; background:var(--bg-2); border:1px solid var(--line); border-radius:6px 16px 16px 16px; }
.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:6px; padding:0 16px 12px; }
.chat__dis{ padding:0 16px 10px; font-size:.62rem; color:var(--ink-3); text-align:center; margin:0; }
.chat__ft{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); }
.chat__ft input{ flex:1; min-width:0; padding:11px 16px; 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:16px; 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:.74rem; 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:.74rem; 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 1s 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 .72s var(--ease), border-radius .72s var(--ease), visibility .72s;
}
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:16px;
  opacity:0; animation:preIn .5s var(--ease) .18s forwards;
  transition:opacity .34s 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 .45s var(--ease); }
.pre__meta{ display:flex; justify-content:space-between; gap:16px; margin:0; font-family:var(--mono); font-size:.68rem; 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 .9s 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:.64rem; white-space:nowrap;
  }
  .hero-cast__hud .hud__k{ display:none; }
  .hero-cast__hud li + li::before{ content:"·"; margin:0 8px; 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:12px; margin:0; }
  .hero__acts .pill{ flex:1 1 0; width:auto; min-width:0; min-height:44px; padding:12px 8px; }
  .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 .5s var(--ease) .30s both;
  }
  .shell:not(.shell--page) .hero__acts{ opacity:1; animation:none; }
  .shell:not(.shell--page) .hero__acts .pill{ animation:pillIn .5s 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 .6s var(--ease);
}
.entry__panel,.pcard__cap{
  transition:transform var(--mid) var(--ease), background-position .6s 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 .26s var(--ease), height .26s var(--ease),
             margin .26s var(--ease), opacity .2s 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 .3s 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 .82s 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 .24s var(--ease); }
.calc-shape.is-draw .shape-fill,
.calc-shape.is-draw .shape-hole{ transition:stroke-dashoffset .74s 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 .26s var(--ease), visibility .26s;   /* ulaz */
}
.pgx.is-out{ transition-duration:.18s; }                  /* 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 .18s 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 svetloplavim logotipom 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 svetloplavi logotip, bez obzira na temu. */
.ft-grid .logo--light{ display:block; }
.ft-grid .logo--dark{ display:none; }
.ft h6{ 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 .5s 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{
  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 .34s 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:8px;
  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:8px; 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 .12s var(--ease), transform .12s var(--ease), visibility .12s;
}
/* Ulaz 180ms, izlaz 120ms — izlaz nosi osnovno pravilo. */
.csel-p.is-on{ opacity:1; visibility:visible; transform:none; transition-duration:.18s; }
.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:10px;
  height:40px; padding:0 12px; border-radius:10px;
  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:6px 12px; 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))); }
}