/* ============================================================================
   BIRO 404 — SR SITE FINALIZATION R01
   Jedan deljeni sloj nad postojećim sistemom. Uklanjanje ovog <link> reda i
   pratećeg <script src="srfinal-r01.js"> vraća tačno R404_FINAL_SYSTEM_LOCK_R01.

   Sadrži DVE stvari i ništa više:
     A · SIGNAL MOTION GRAMMAR — 6 primitiva, jedan po strani (§15/§16 brifa)
     B · HIRURŠKE KOREKCIJE — naslovna, /cene/, dokazi

   Pravila koja se ne krše:
     · svaki primitiv ima `prefers-reduced-motion` stanje u kome je SADRŽAJ ceo
     · nijedan primitiv ne nosi tekst koji postoji samo u JS-u
     · nema hover-zavisnog sadržaja
     · nema nametnutog horizontalnog skrola
   ========================================================================== */

/* ==========================================================================
   A · SIGNAL MOTION GRAMMAR
   ========================================================================== */

:root {
  --sg-t-trace: 1200ms;
  --sg-t-open: 900ms;
  --sg-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   SIG-TRACE — putanja se crta skrolom.
   Nosilac: pun prelom na naslovnoj. Progres računa JS (Firefox još nema
   `animation-timeline` bez zastavice), CSS drži samo izgled.
   -------------------------------------------------------------------------- */
.sg-trace { --p: 0; }
.sg-trace svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sg-trace .sg-path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--p));
  filter: drop-shadow(0 0 6px rgba(233, 184, 80, .5))
          drop-shadow(0 0 26px rgba(233, 184, 80, .16));
}
.sg-trace .sg-head {
  fill: var(--gold-hi);
  opacity: calc(var(--p) * 3);
  filter: drop-shadow(0 0 10px rgba(255, 226, 160, .9));
}
/* nit ULAZI u kadar iz mraka i pojačava se ka kraju — bez gradijenta bi bila
   ravna žuta kriva koja se čita kao grafikon, a ne kao signal koji putuje */
.sg-trace .sg-path.is-grad { stroke: url(#sgTraceGrad); }
.sg-trace .sg-stop {
  fill: var(--gold); opacity: 0;
  transition: opacity 260ms var(--sg-ease);
  filter: drop-shadow(0 0 7px rgba(233, 184, 80, .8));
}
.sg-trace .sg-stop.on { opacity: 1; }

/* --------------------------------------------------------------------------
   SIG-PROJECT — snimak raste iz rama u pun kadar dok se skroluje.
   Nosilac: /radovi/. Menja se samo `clip-path` i `transform` — bez reflow-a.
   -------------------------------------------------------------------------- */
.sg-proj { --p: 0; position: relative; }
.sg-proj-track { height: 260vh; }
.sg-proj-stage {
  position: sticky; top: 0; height: 100svh;
  display: grid; place-items: center; overflow: hidden;
}
.sg-proj-shot {
  position: relative;
  width: 100%; height: 100%;
  /* 0 → uzak ram u sredini · 1 → pun kadar */
  clip-path: inset(
    calc((1 - var(--p)) * 21%) calc((1 - var(--p)) * 17%)
    calc((1 - var(--p)) * 21%) calc((1 - var(--p)) * 17%)
    round calc((1 - var(--p)) * 14px)
  );
  transition: clip-path 60ms linear;
}
.sg-proj-shot img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  transform: scale(calc(1.09 - var(--p) * .09));
  transition: transform 60ms linear;
}
/* Snimak je CELA naslovna strana klijenta — ona ima SVOJ naslov u kadru.
   Sa slabim zastorom su se dva naslova preklopila i nijedan se nije čitao
   (nađeno gledanjem `radovi_1440_02.jpg`, konzola čista). Zastor zato mora
   da bude pravo dno kadra, ne blaga senka. */
.sg-proj-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    #050505 0%,
    #050505 24%,
    rgba(5, 5, 5, .88) 34%,
    rgba(5, 5, 5, .35) 50%,
    transparent 70%);
  opacity: var(--p);
}
.sg-proj-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 var(--pad-x) clamp(36px, 6vh, 78px);
  opacity: calc(var(--p) * 1.6 - .5);
  transform: translateY(calc((1 - var(--p)) * 26px));
  pointer-events: none;
}
.sg-proj-cap > * { pointer-events: auto; }
.sg-proj-cap .k {
  display: block; font-family: var(--font-m); font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 14px;
}
/* Snimak je cela naslovna klijenta i NOSI SVOJ NASLOV u kadru. Prvi pokušaj je
   ispod njega stavio naš naslov iste težine — dva bela naslova na 200 px
   razmaka, oba velika, oba o istom čoveku. Nađeno gledanjem, ne testom.
   Hijerarhija se zato razdvaja: veliko = RAD, manje = naša oznaka rada. */
.sg-proj-cap h3 {
  font-size: clamp(24px, 2.4vw, 38px); font-weight: 600;
  letter-spacing: -.022em; line-height: 1.06; margin: 0 0 10px;
}
.sg-proj-cap p {
  max-width: 56ch; font-size: clamp(15px, 1.2vw, 18px); font-weight: 300;
  color: rgba(244, 240, 230, .82); margin: 0 0 20px;
}
.sg-proj-cap .links { display: flex; flex-wrap: wrap; gap: 12px 26px; }
.sg-proj-cap .links a {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 500; color: var(--gold); text-decoration: none;
  border-bottom: 1px solid rgba(233, 184, 80, .32); padding-bottom: 3px;
}
.sg-proj-cap .links a:hover, .sg-proj-cap .links a:focus-visible { border-bottom-color: var(--gold); }
.sg-proj-cap .links svg { width: 15px; height: 15px; }
@media (max-width: 860px) {
  .sg-proj-track { height: 210vh; }
  .sg-proj-shot img { object-position: center top; }
  .sg-proj-cap h3 { font-size: clamp(24px, 6.4vw, 34px); }
}

/* --------------------------------------------------------------------------
   SIG-PORTAL — otvor u zastoru raste i poglavlje se menja.
   Nosilac: /izrada-sajtova/, na rezu iz TVRDNJE u DOKAZ.

   Ovde je prvo bio prototip 10 („Kroz reč") u lakoj varijanti sa
   `background-clip: text`. ODBAČEN je posle gledanja snimka
   (`probe_thru_1440_b.jpg`): na sredini staze reč naraste 4×, pozadina se
   uveća zajedno s njom i kadar postane mutna, izlomljena masa slova preko
   uvećanog teksta sa tuđeg sajta. Nijedan test to ne bi prijavio — konzola je
   bila čista, overflow 0. Puna verzija sa SVG maskom nosi svoje dve zamke iz
   laba (Chrome prestane da rasterizuje slovo preko ~30×; ulazak kroz šupljinu
   slova vodi u zastor a ne u sliku), pa je i ona odbačena.

   Prototip 12 („Portal") radi ono što je ovde stvarno potrebno: režiran rez
   između dva poglavlja. `clip-path: circle()` je jedna GPU operacija, nema
   rasterizacije maske, nema mutne pozadine i nema zavisnosti od fonta.
   Zamka iz laba je poštovana: poluprečnik mora da stigne TAČNO do najdaljeg
   ugla — `hypot(W/2, max(cy, H−cy))` — inače se vrata otvore na 40 % staze.
   -------------------------------------------------------------------------- */
.sg-portal { --p: 0; --r: 0px; position: relative; }
.sg-portal-track { height: 220vh; }
.sg-portal-stage {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: grid; place-items: center;
  background: var(--bg);
}
.sg-portal-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  clip-path: circle(var(--r) at 50% 46%);
}
/* prsten na ivici otvora — bez njega je rez samo „slika se pojavila" */
.sg-portal-ring {
  position: absolute; left: 50%; top: 46%;
  width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1);
  border-radius: 50%;
  border: 1px solid rgba(233, 184, 80, .55);
  box-shadow: 0 0 26px rgba(233, 184, 80, .22);
  opacity: calc(1.35 - var(--p) * 1.35);
  pointer-events: none;
}
.sg-portal-word {
  position: relative; z-index: 2;
  margin: 0 0 0; padding-bottom: 8svh;
  font-size: clamp(58px, 11vw, 168px);
  font-weight: 800; letter-spacing: -.05em; line-height: .86;
  color: var(--ink);
  opacity: calc(1 - var(--p) * 2.6);
  pointer-events: none;
}
.sg-portal-cap {
  position: absolute; left: 0; right: 0; bottom: clamp(34px, 7vh, 84px);
  z-index: 3; text-align: center; padding: 0 var(--pad-x);
  opacity: calc(var(--p) * 3.6 - 2.5);
}
.sg-portal-cap p {
  margin: 0 auto; max-width: 26ch;
  font-size: clamp(20px, 2.4vw, 34px); font-weight: 600;
  letter-spacing: -.022em; line-height: 1.14;
  text-shadow: 0 2px 26px rgba(5, 5, 5, .85);
}
.sg-portal-cap p em { font-style: normal; color: var(--gold); }
@media (max-width: 860px) {
  .sg-portal-track { height: 190vh; }
}

/* --------------------------------------------------------------------------
   SIG-FLOW — impuls prolazi kroz stanja i izlazi kao tri ishoda.
   Nosilac: /poslovne-aplikacije/ (Custom sloj). Jedan rAF, ~3 s, pa stane.
   -------------------------------------------------------------------------- */
.sg-flow { position: relative; margin: clamp(28px, 4vw, 52px) 0 0; }
.sg-flow svg { display: block; width: 100%; height: auto; overflow: visible; }
.sg-flow .fl-rail { fill: none; stroke: rgba(244, 240, 230, .16); stroke-width: 1.2; }
.sg-flow .fl-live {
  fill: none; stroke: var(--gold); stroke-width: 1.6;
  stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0));
  filter: drop-shadow(0 0 6px rgba(233, 184, 80, .55));
}
.sg-flow .fl-node { fill: var(--steel); stroke: rgba(244, 240, 230, .22); stroke-width: 1; }
.sg-flow .fl-node.on { fill: var(--gold); stroke: var(--gold-hi); }
.sg-flow .fl-node { transition: fill 240ms var(--sg-ease), stroke 240ms var(--sg-ease); }
.sg-flow .fl-cap {
  font-family: var(--font-m); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; fill: var(--dim);
  transition: fill 240ms var(--sg-ease);
}
.sg-flow .fl-cap.on { fill: var(--gold); }
.sg-flow .fl-out { fill: rgba(244, 240, 230, .92); font-size: 15px; font-weight: 500; opacity: 0; transition: opacity 320ms var(--sg-ease); }
.sg-flow .fl-out.on { opacity: 1; }
.sg-flow-legend {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  margin-top: 18px; font-family: var(--font-m); font-size: 12px;
  letter-spacing: .08em; color: var(--dim);
}

/* --------------------------------------------------------------------------
   SIG-SCATTER — 404 se rasipa i sleže u NAĐENO.
   Nosilac: 404.html. Osa `wght` promenljivog Archivo — bez novog fonta.
   -------------------------------------------------------------------------- */
.sg-scatter { display: inline-block; }
/* `.final p` u site.css nosi `max-width:520px` i `font-size:clamp(16px…18px)`
   sa specifičnošću 0,1,1 — jedna klasa nije dovoljna da to nadjača, pa je broj
   iz prvog pokušaja bio veličine običnog pasusa. Nađeno GLEDANJEM snimka:
   konzola je bila čista i nijedan test to ne bi uhvatio. */
.final .e404-num {
  margin: 4px 0 18px;
  max-width: none;
  font-size: clamp(84px, 13vw, 200px);
  font-weight: 700;
  line-height: .86;
  letter-spacing: -.045em;
  color: var(--gold);
  text-shadow: 0 0 44px rgba(233, 184, 80, .28);
}
@media (max-width: 860px) { .e404-num { margin-bottom: 12px; } }
.sg-scatter .ch {
  display: inline-block;
  font-variation-settings: 'wght' var(--w, 700);
  transform: translate(var(--dx, 0), var(--dy, 0));
  filter: blur(var(--bl, 0px));
  opacity: var(--o, 1);
  will-change: transform, filter;
}

/* --------------------------------------------------------------------------
   SIG-RESPOND — forma odgovara signalom dok se popunjava.
   Nosilac: /kontakt/. Nije ukras: pokazuje koliko je upit spreman za slanje.
   -------------------------------------------------------------------------- */
.sg-respond {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 22px; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: 10px;
  background: rgba(16, 16, 17, .6);
}
.sg-respond-rail {
  position: relative; flex: 1; height: 2px;
  background: rgba(244, 240, 230, .12); border-radius: 2px; overflow: hidden;
}
.sg-respond-rail i {
  position: absolute; inset: 0 auto 0 0;
  width: calc(var(--p, 0) * 100%);
  background: var(--sig-gradient);
  box-shadow: 0 0 10px rgba(233, 184, 80, .55);
  transition: width 420ms var(--sg-ease);
}
.sg-respond-lab {
  font-family: var(--font-m); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim); white-space: nowrap;
}
.sg-respond.is-ready .sg-respond-lab { color: var(--gold); }

/* --------------------------------------------------------------------------
   SIG-CONTINUITY — isti element preživi prelaz strane.
   Degradira u običnu navigaciju tamo gde View Transitions ne postoje.
   -------------------------------------------------------------------------- */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 260ms; }

/* --------------------------------------------------------------------------
   REDUCED MOTION — sadržaj je uvek ceo, samo bez putovanja.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sg-trace .sg-path { stroke-dashoffset: 0; }
  .sg-trace .sg-head { opacity: 0; }
  .sg-trace .sg-stop { opacity: 1; }

  .sg-proj-track { height: auto; }
  .sg-proj-stage { position: static; height: auto; }
  .sg-proj-shot { clip-path: none; }
  .sg-proj-shot img { transform: none; height: auto; }
  .sg-proj-scrim, .sg-proj-cap { opacity: 1; }
  .sg-proj-cap { position: static; transform: none; padding: 26px var(--pad-x) 0; }

  .sg-portal-track { height: auto; }
  .sg-portal-stage { position: static; height: auto; min-height: 68svh; }
  .sg-portal-img { clip-path: none; position: static; height: 52svh; }
  .sg-portal-ring, .sg-portal-word { display: none; }
  .sg-portal-cap { position: static; opacity: 1; padding: 56px var(--pad-x); }

  .sg-flow .fl-live { stroke-dashoffset: 0; }
  .sg-flow .fl-node { fill: var(--gold); stroke: var(--gold-hi); }
  .sg-flow .fl-cap { fill: var(--gold); }
  .sg-flow .fl-out { opacity: 1; }

  .sg-scatter .ch { transform: none; filter: none; opacity: 1; }
  .sg-respond-rail i { transition: none; }
  @view-transition { navigation: none; }
}

/* ==========================================================================
   B · HIRURŠKE KOREKCIJE
   ========================================================================== */

/* --------------------------------------------------------------------------
   B1 · PUN PRELOM (§13) — vizual od ivice do ivice, tekst na sadržajnoj mreži.
   Zatečeno stanje (snimak `final_tband_seam_v3.jpg`): traka je bila 78vh, tekst
   centriran u sredini praznog crnog polja, a svetla nit je PRESECALA drugu
   liniju teksta („…ono što mu treba — i zove…"). Dva odvojena kvara:
   scena nije zauzimala ekran, i nit je išla kroz slova.
   -------------------------------------------------------------------------- */
.tband {
  min-height: 100svh;
  place-items: stretch;
  align-content: stretch;
}
.tband-img {
  /* nit se spušta ispod teksta i pojačava — više nije tanka crta u sredini */
  object-position: center 78%;
  opacity: .95;
  transform: scale(1.06);
}
/* drugi sloj iste niti, zrcaljen i pomeren: scena stiže do obe ivice i posle
   1520 px sadržajne mreže, umesto da se ugasi u crnom */
.tband::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 74% at 50% 88%, rgba(233, 184, 80, .13), transparent 62%),
    linear-gradient(to bottom, var(--bg) 0%, rgba(5, 5, 5, .35) 22%, transparent 44%);
  height: auto;
}
.tband::after {
  height: 300px;
  background: linear-gradient(to top, var(--bg) 12%, transparent);
}
.tband-in {
  position: relative; z-index: 2;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  /* tekst u gornjoj trećini — nit ostaje ispod njega, ne kroz njega */
  align-self: start;
  padding-top: clamp(150px, 26svh, 280px);
  text-align: left;
}
.tband .tband-k {
  display: block;
  font-family: var(--font-m); font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 22px;
}
.tband .tb-l1 {
  font-size: clamp(38px, 6.4vw, 104px);
  letter-spacing: -.03em;
  line-height: .98;
  max-width: 15ch;
}
.tband .tb-l2 {
  margin-top: 22px;
  max-width: 30ch;
  font-size: clamp(18px, 1.9vw, 28px);
  color: rgba(244, 240, 230, .84);
}
/* nit koja se crta skrolom — od leve ivice ekrana do desne */
.tband-trace {
  position: absolute; left: 0; right: 0;
  top: 58%; height: 34%;
  z-index: 2; pointer-events: none;
}
@media (max-width: 860px) {
  .tband { min-height: 92svh; }
  .tband-img { opacity: .7; object-position: center 82%; transform: none; }
  .tband-in { padding-top: clamp(96px, 16svh, 150px); }
  .tband .tb-l1 { max-width: 11ch; }
  .tband .tb-l2 { max-width: none; }
  .tband-trace { top: 62%; height: 30%; }
}

/* --------------------------------------------------------------------------
   B2 · NASLOVNA — sažimanje portfolija (§8).
   Naslovna nosi JEDAN vodeći rad + DVA pogleda. Treći uređaj (ARTA3D 27")
   nije obrisan — premešten je na /radovi/, gde i pripada.
   -------------------------------------------------------------------------- */
.showroom .chapter-head { margin-bottom: 0; }
.showroom .chapter-head p { max-width: 52ch; }
/* Scena je bila komponovana za TRI uređaja na mreži od 24 stupca
   (27" 6/21 · laptop 1/10 · telefon 20/24). Bez 27" ekrana laptop ostaje uz
   levu ivicu, telefon uz desnu, a između zjapi trećina ekrana. Preostala dva
   uređaja se zato pomeraju ka sredini — veličine i razmere su NEPROMENJENE,
   menja se samo gde počinju. */
@media (min-width: 1181px) {
  .scene-a .dev-lap { grid-column: 3 / 12; }
  .scene-a .dev-ph  { grid-column: 16 / 20; }
}

/* --------------------------------------------------------------------------
   B3 · MRTVA CENOVNA TRAKA
   `.price-rail` je u R02 sklonjena CSS-om, ali je ostala u HTML-u — a u njoj
   je stajalo „Nađi me · Sajt + Google profil · 900 €", tačno onaj natpis koji
   proizvodi pogrešan zbir 250+600=850 (PRICING_LOGIC_AUDIT §C-1). Skriveno
   CSS-om nije uklonjeno: čitači ekrana i indekseri to i dalje čitaju.
   U ovoj rundi je izbačeno iz HTML-a. Pravilo ostaje kao mreža za slučaj
   da se blok negde vrati.
   -------------------------------------------------------------------------- */
.price-rail { display: none !important; }

/* --------------------------------------------------------------------------
   B4 · /cene/ — TRI PONUDE (§10)
   Jedna brend porodica, tri stanja. Bez plavo/ljubičasto/zeleno duge.
   Razlika se gradi tonom, brojem 01/02/03, prostornom granicom i tipografijom.
   -------------------------------------------------------------------------- */
.oa {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.oa-col {
  position: relative;
  padding: clamp(30px, 3vw, 46px) clamp(22px, 2.2vw, 38px) clamp(34px, 3.4vw, 52px);
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.oa-col:first-child { border-left: 0; }
/* Tonska polja — ista porodica, tri karaktera. Razlika mora da se vidi iz
   perifernog vida, pre nego što se pročita ijedna reč:
     01 grafit  — ravno, precizno, geometrijska šina (zatvoren obim)
     02 amber   — toplije, autorsko, svetlo koje dolazi odozgo (režija)
     03 dubina  — povezano polje čvorova (sistem, ne jedan predmet) */
.oa-col::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
/* traka na vrhu stupca — tri različita poteza istog materijala */
.oa-col::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  z-index: 2; pointer-events: none;
}

.oa-1::before {
  background:
    linear-gradient(to bottom, rgba(244, 240, 230, .05), transparent 46%),
    repeating-linear-gradient(to bottom, rgba(244, 240, 230, .035) 0 1px, transparent 1px 13px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 34%, transparent 62%);
          mask-image: linear-gradient(to bottom, #000 0 34%, transparent 62%);
}
.oa-1::after { background: rgba(244, 240, 230, .34); }

.oa-2::before {
  background:
    radial-gradient(120% 52% at 50% -6%, rgba(233, 184, 80, .2), transparent 66%),
    linear-gradient(to bottom, rgba(233, 184, 80, .055), rgba(233, 184, 80, .01) 58%, transparent);
}
.oa-2::after { background: var(--sig-gradient); box-shadow: 0 0 14px rgba(233, 184, 80, .45); }

.oa-3::before {
  background:
    radial-gradient(circle 3px at 24% 13%, rgba(233, 184, 80, .85), transparent 100%),
    radial-gradient(circle 2px at 62% 9%,  rgba(233, 184, 80, .5),  transparent 100%),
    radial-gradient(circle 2px at 81% 22%, rgba(233, 184, 80, .6),  transparent 100%),
    radial-gradient(circle 2px at 41% 26%, rgba(233, 184, 80, .42), transparent 100%),
    radial-gradient(circle 3px at 88% 6%,  rgba(233, 184, 80, .55), transparent 100%),
    radial-gradient(64% 34% at 56% 6%, rgba(233, 184, 80, .07), transparent 72%),
    linear-gradient(to bottom, rgba(244, 240, 230, .035), transparent 52%);
}
.oa-3::after {
  background: repeating-linear-gradient(to right,
    var(--gold-deep) 0 26px, rgba(233, 184, 80, .12) 26px 34px);
}

.oa-col > * { position: relative; z-index: 1; }

.oa-num {
  font-family: var(--font-m); font-size: 22px; font-weight: 500;
  letter-spacing: .06em; color: rgba(244, 240, 230, .3); margin: 0 0 16px;
}
.oa-2 .oa-num { color: rgba(233, 184, 80, .72); }
.oa-3 .oa-num { color: rgba(233, 184, 80, .5); }
.oa-name {
  margin: 0 0 6px;
  font-size: clamp(24px, 2.2vw, 34px); font-weight: 600; letter-spacing: -.02em;
}
.oa-2 .oa-name { color: var(--gold-hi); }
.oa-kind {
  display: block; margin: 0 0 20px;
  font-family: var(--font-m); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim);
}
.oa-lead {
  margin: 0 0 22px; font-size: clamp(15px, 1.15vw, 17px); font-weight: 300;
  color: rgba(244, 240, 230, .82); line-height: 1.6;
}
.oa-price {
  margin: 0 0 8px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: clamp(26px, 2.3vw, 36px); font-weight: 600; letter-spacing: -.02em;
}
.oa-price em { font-style: normal; color: var(--gold); }
.oa-price-n {
  display: block; margin: 6px 0 22px;
  font-family: var(--font-m); font-size: 12px; letter-spacing: .04em; color: var(--dim);
}
.oa-rows { list-style: none; margin: 0 0 22px; padding: 0; }
.oa-rows li {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px;
  padding: 13px 0; border-top: 1px solid var(--line);
  align-items: baseline;
}
.oa-rows li:first-child { border-top: 0; }
.oa-rows .n { font-size: 15px; font-weight: 500; }
.oa-rows .p { font-family: var(--font-m); font-size: 15px; color: var(--gold); white-space: nowrap; }
.oa-rows .f { grid-column: 1 / -1; font-size: 13px; color: rgba(244, 240, 230, .62); }
.oa-rows li.lead .n::after {
  content: "najčešći izbor";
  display: inline-block; margin-left: 10px; padding: 2px 8px;
  border: 1px solid var(--gold-deep); border-radius: 999px;
  font-family: var(--font-m); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold); vertical-align: middle;
}
.oa-d { list-style: none; margin: 0 0 22px; padding: 0; }
.oa-d li {
  position: relative; padding: 0 0 0 18px; margin-bottom: 11px;
  font-size: 15px; color: rgba(244, 240, 230, .8); line-height: 1.5;
}
.oa-d li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold-deep);
}
.oa-fine {
  margin: 0 0 22px; padding: 14px 16px;
  border-left: 2px solid var(--gold-deep);
  background: rgba(233, 184, 80, .05);
  font-size: 13.5px; line-height: 1.55; color: rgba(244, 240, 230, .8);
}
.oa-go { margin-top: auto; }
.oa-go a {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 500; color: var(--gold);
  text-decoration: none; border-bottom: 1px solid rgba(233, 184, 80, .3);
  padding-bottom: 3px;
}
.oa-go a:hover, .oa-go a:focus-visible { border-bottom-color: var(--gold); }

/* `#veci-projekti` je postojeći, već povezan anchor. Sekcija se sada zove
   `#signature`, pa stari id živi kao prazan cilj — nijedan link ne puca. */
.anchor-alias { display: block; position: relative; top: -90px; height: 0; }

@media (max-width: 1080px) {
  .oa { grid-template-columns: 1fr; }
  .oa-col { border-left: 0; border-top: 1px solid var(--line); }
  .oa-col:first-child { border-top: 0; }
}

/* --------------------------------------------------------------------------
   B5 · Naslovna „Dubina" — kicker.
   Kicker ove sekcije je nosio liniju koju je vlasnik ODBIO (§4 brifa). Sada
   imenuje samu arhitekturu ponude, što je i informativnije.
   Odbijeni tekst se namerno ne prepisuje ni u komentar — sve što se isporuči
   u pregledač čita se i u view-source. Tačan tekst: PENDING_BRAIN_DELTA.md.
   -------------------------------------------------------------------------- */
.tierx .eyebrow { letter-spacing: .2em; }

/* --------------------------------------------------------------------------
   B6 · Flagship pojas — bez slogana (§7).
   Odbijeni slogan je uklonjen. Dokaz sada nosi ime posla i
   uloga klijenta, ne dosetka.
   -------------------------------------------------------------------------- */
.fl-who {
  display: block;
  margin: 0 0 6px;
  font-size: clamp(26px, 2.6vw, 42px); font-weight: 600; letter-spacing: -.022em;
  line-height: 1.05;
}
.fl-role {
  display: block; margin: 0 0 20px;
  font-family: var(--font-m); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold);
}


/* --------------------------------------------------------------------------
   R404_FINAL_PREDEPLOY_AUDIT_R01 — vodoravno prelivanje na /kontakt/ (EN, FR)

   Izmereno u pregledaču, ne pretpostavljeno: /fr/contact/ na 390 px izlazi
   18 px iz ekrana, na 360 px 48 px; /en/contact/ 1 px odnosno 31 px. Srpski
   je čist na svim širinama, pa se defekt ne vidi dok se gleda samo SR.

   Dva uzroka, oba se zatvaraju ovde:

   1) `@media (max-width:960px) { .contact-grid { grid-template-columns: 1fr } }`
      u `site.css` — golo `1fr` ima podrazumevani minimum `auto`, dakle
      min-content. Kolona zato sme da naraste PREKO svog kontejnera. Desktop
      pravilo u istom fajlu već koristi `minmax(0, …)`; mobilno je ispalo.
      (`site.<otisak>.css` se ne dira — ime nosi otisak sadržaja.)

   2) `.sg-respond-lab` je `white-space: nowrap`. Najduži natpis je na srpskom
      „Upit još nije počet" (kratko), a na francuskom „La demande n’a pas encore
      commencé" — 286 px na 12 px verzalu sa razmakom .1em. Na telefonu to ne
      staje, pa gura ceo red. Na uskom ekranu se pušta da se prelomi; iznad
      toga ostaje u jednom redu, kako je i projektovano.
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .sg-respond-lab { white-space: normal; }
}