/* BIRO404_SIGNAL_WEBSITE_REFINEMENT_R01 - dopuna SIGNAL sistema.
   Samo postojeci tokeni iz site2027.css (--ink, --gold, --line, --r-img, --ease-out...).
   Nema novih boja ni fontova. Pokret: postojeci .rv + zlatna linija (SIGNAL sina) koja se pali kad poglavlje udje u kadar. */

/* ---------- naslovna: traka vrednosti umesto cena ---------- */
.facts-row .fx-link{align-content:start}
.facts-row .fx-link a{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:clamp(1.02rem,1.25vw,1.18rem);letter-spacing:-.01em;color:var(--ink);border-bottom:1px solid var(--gold);padding-bottom:3px;width:max-content;max-width:100%;margin-top:clamp(6px,.9vw,12px)}
.facts-row .fx-link a svg{width:16px;height:16px;flex:none;transition:transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.facts-row .fx-link a:hover svg{transform:translateX(3px)}}
.facts-row .fx-link a:active{transform:scale(.98)}

/* ---------- tri oblasti rada (naslovna i /usluge/) ---------- */
.obl-head{display:grid;gap:14px;margin-bottom:clamp(8px,1.4vw,20px)}
.obl-head h2{margin:0;max-width:20ch}
.obl-head .lead{margin:0}
.obl-head .link-arrow{justify-self:start;margin-top:6px}

.obl-ch{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,3vw,52px);row-gap:28px;align-items:start;padding-top:clamp(40px,5vw,72px);margin-top:clamp(28px,3.4vw,52px)}
/* sina: tanka linija preko celog poglavlja + zlatni segment i cvor koji se pale */
.obl-ch::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
.obl-ch::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;margin-top:-.5px;background:linear-gradient(90deg,var(--gold) 0,var(--gold) 38%,rgba(233,184,80,0) 100%);transform-origin:left center}
.obl-node{position:absolute;left:0;top:0;width:11px;height:11px;margin:-5.5px 0 0 -1px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px rgba(233,184,80,.18)}

.obl-job{margin:0 0 10px;font-weight:700;color:var(--gold-ink);font-size:clamp(1rem,1.15vw,1.12rem);letter-spacing:-.005em}
.obl-ch h3{margin:0;font-size:clamp(1.75rem,2.7vw,2.55rem);font-weight:800;letter-spacing:-.035em;line-height:1.04;max-width:13ch;color:var(--ink)}
.obl-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:9px;font-size:clamp(1rem,1.1vw,1.08rem);line-height:1.45;color:var(--ink-2)}
.obl-list a{color:var(--ink);font-weight:600;border-bottom:1px solid var(--line-2);padding-bottom:1px;transition:border-color 180ms ease}
@media (hover:hover) and (pointer:fine){.obl-list a:hover{border-color:var(--gold)}}
.obl-more{margin-top:24px}

.obl-fig{margin:0;position:relative}
.obl-fig a{display:block;color:inherit}
.obl-fig img{display:block;width:100%;height:auto;border-radius:var(--r-img);box-shadow:var(--shadow);background:var(--paper-3)}
.obl-fig figcaption{margin-top:16px;font-size:.9rem;color:var(--ink-3);max-width:52ch}
.obl-fig figcaption a{display:inline;color:var(--ink-2);border-bottom:1px solid var(--line-2)}
.obl-stage{position:relative}
.obl-stage img{transition:transform 600ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.obl-fig a:hover .obl-main{transform:translateY(-3px)}}

/* A: tekst levo, sajt + telefon desno */
.obl-a .obl-txt{grid-column:1 / span 5;padding-top:6px}
.obl-a .obl-fig{grid-column:6 / -1}
.obl-a .obl-phone{position:absolute;left:-5%;bottom:-9%;width:19%;border-radius:14px;border:4px solid var(--card)}

/* B: kadar iz filma levo, art direkcija preklopljena, tekst desno */
.obl-b .obl-fig{grid-column:1 / span 7;grid-row:1;padding-bottom:9%}
.obl-b .obl-txt{grid-column:9 / -1;grid-row:1;padding-top:6px}
.obl-a figcaption{padding-left:17%}
.obl-b .obl-side{position:absolute;right:-7%;bottom:-11%;width:34%;aspect-ratio:4/3;display:grid;place-items:center;border-radius:var(--r-img);background:var(--ink);border:4px solid var(--card);box-shadow:var(--shadow)}
.obl-b .obl-brand img{width:62%;height:auto;box-shadow:none;border-radius:0;background:none}
.obl-b figcaption{max-width:40ch}

/* C: tekst siroko sa dve kolone usluga, mali stvarni ekran desno; vodi u tamni Product Signal ispod */
.obl-c .obl-txt{grid-column:1 / span 7}
.obl-c .obl-list{grid-template-columns:1fr 1fr;column-gap:32px}
.obl-c .obl-fig{grid-column:9 / -1}

/* pokret: samo kad korisnik nije trazio smanjen pokret i kad JS radi (.rv sistem dodaje .on) */
@media (prefers-reduced-motion:no-preference){
  html.js .obl-ch::after{transform:scaleX(0);transition:transform 1100ms var(--ease-out) 120ms}
  html.js .obl-ch.on::after{transform:scaleX(1)}
  html.js .obl-ch .obl-node{transform:scale(.4);opacity:0;transition:transform 500ms var(--ease-out),opacity 300ms ease}
  html.js .obl-ch.on .obl-node{transform:scale(1);opacity:1}
  html.js .obl-ch .obl-txt,html.js .obl-ch .obl-fig{opacity:0;transform:translateY(16px);transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out)}
  html.js .obl-ch .obl-fig{transition-delay:140ms}
  html.js .obl-ch.on .obl-txt,html.js .obl-ch.on .obl-fig{opacity:1;transform:none}
  html.js .obl-ch.rv{opacity:1;transform:none}
}

#oblasti h2,#identitet h2,#aplikacije h2,#odrzavanje h2,#autorski h2,#vodjenje h2{margin-bottom:16px}

/* ---------- /usluge/: sadrzaj tri oblasti ---------- */
.obl-toc{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.obl-toc li{position:relative}
.obl-toc li+li{border-left:1px solid var(--line)}
.obl-toc a{display:grid;gap:8px;padding:24px clamp(14px,2vw,30px) 26px;color:inherit;height:100%}
.obl-toc a::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--gold);transform:scaleX(.18);transform-origin:left;transition:transform 400ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.obl-toc a:hover::before{transform:scaleX(1)}}
.obl-toc a:focus-visible::before{transform:scaleX(1)}
.obl-toc b{font-size:clamp(1.2rem,1.6vw,1.45rem);letter-spacing:-.02em;color:var(--ink);line-height:1.15}
.obl-toc span{color:var(--ink-2);font-size:.95rem;line-height:1.5}
.obl-toc em{font-style:normal;font-weight:700;color:var(--gold-ink);font-size:.92rem}

/* /usluge/#identitet */
.u-id{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4vw,72px);align-items:start}
.u-id .lead{margin-top:14px}
.u-id-do{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:16px}
.u-id-do li{display:grid;gap:3px}
.u-id-do b{color:var(--ink);font-size:1.05rem}
.u-id-do span{color:var(--ink-2);font-size:.97rem;line-height:1.5}
.u-id-note{margin-top:22px;color:var(--ink-2);font-size:.95rem;max-width:60ch}
.u-proof{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:22px}
.u-id-art{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(12px,1.4vw,18px);align-items:start}
.u-id-art figure{margin:0}
.u-id-art img{display:block;width:100%;height:auto;border-radius:var(--r-img);box-shadow:var(--shadow-card)}
.u-id-art figcaption{margin-top:10px;font-size:.86rem;color:var(--ink-3)}
.u-id-art .u-wide{grid-column:1 / -1}
.u-id-brand{display:grid;place-items:center;aspect-ratio:4/3;border-radius:var(--r-img);background:var(--ink)}
.u-id-brand img{width:58%;box-shadow:none;border-radius:0}

/* /usluge/#aplikacije i #podrska */
.u-app{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:center}
.u-app ul{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 28px;color:var(--ink-2)}
.u-app ul b{display:block;color:var(--ink);font-size:1rem}
.u-app figure{margin:0}
.u-app img{display:block;width:100%;height:auto;border-radius:var(--r-img);box-shadow:var(--shadow)}
.u-app figcaption{margin-top:12px;font-size:.88rem;color:var(--ink-3)}
.u-sup{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.u-sup>div{display:grid;gap:10px;align-content:start;padding:24px clamp(14px,2vw,30px) 8px}
.u-sup>div+div{border-left:1px solid var(--line)}
.u-sup h3{margin:0;font-size:1.25rem;letter-spacing:-.02em}
.u-sup p{margin:0;color:var(--ink-2);font-size:.97rem;line-height:1.5}
.u-sup .link-arrow{justify-self:start;margin-top:6px}

/* /drustvene-mreze/: ko sta radi */
.u-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(20px,2.6vw,34px)}
.u-split>div{padding:clamp(22px,2.4vw,32px);border-radius:var(--r-card);border:1px solid var(--line);background:var(--card)}
.u-split>div:first-child{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.u-split h3{margin:0 0 14px;font-size:1.3rem;letter-spacing:-.02em}
.u-split>div:first-child h3{color:var(--gold)}
.u-split ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.u-split li{line-height:1.5;font-size:.98rem}
.u-split li b{display:block}
.u-split>div:first-child li span{color:rgba(247,245,242,.72)}
.u-split>div:last-child li span{color:var(--ink-2)}

/* /poslovne-aplikacije/#odrzavanje */
.u-care{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:start}
.u-care-list{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.u-care-list li{display:grid;gap:4px;padding:18px 0}
.u-care-list li+li{border-top:1px solid var(--line)}
.u-care-list b{color:var(--ink)}
.u-care-list span{color:var(--ink-2);font-size:.97rem;line-height:1.5}

/* /radovi/#autorski */
.u-auth{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(24px,3vw,40px)}
.u-auth figure{margin:0;grid-column:span 4}
.u-auth .u-wide{grid-column:span 8}
.u-auth .u-tall{grid-row:span 2}
.u-auth a{display:grid;gap:12px;color:inherit}
.u-auth .u-ai{display:block;overflow:hidden;border-radius:var(--r-img);background:var(--paper-3);box-shadow:var(--shadow-card)}
.u-auth img{display:block;width:100%;height:auto;transition:transform 600ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.u-auth a:hover img{transform:scale(1.02)}}
.u-auth .u-brand{display:grid;place-items:center;aspect-ratio:16/10;background:var(--ink)}
.u-auth .u-brand img{width:56%;transform:none}
.u-auth figcaption{display:grid;gap:4px}
.u-auth small{font-weight:700;color:var(--gold-ink);font-size:.86rem}
.u-auth b{font-size:1.1rem;letter-spacing:-.01em;color:var(--ink)}
.u-auth figcaption span{color:var(--ink-2);font-size:.95rem;line-height:1.5}

/* ---------- tablet ---------- */
@media (max-width:1100px){
  .obl-a .obl-txt{grid-column:1 / span 6}
  .obl-a .obl-fig{grid-column:7 / -1}
  .obl-b .obl-fig{grid-column:1 / span 7}
  .obl-b .obl-txt{grid-column:8 / -1}
  .obl-c .obl-txt{grid-column:1 / span 8}
  .obl-c .obl-fig{grid-column:9 / -1}
  .obl-c .obl-list{grid-template-columns:1fr}
}
/* ---------- telefon i uzi tablet: jedna kolona, tekst pa slika ---------- */
@media (max-width:820px){
  .obl-ch{grid-template-columns:1fr;row-gap:26px;padding-top:34px;margin-top:26px}
  .obl-ch .obl-txt,.obl-ch .obl-fig,.obl-b .obl-fig,.obl-b .obl-txt{grid-column:1;grid-row:auto}
  .obl-b .obl-fig{padding-bottom:0}
  .obl-a .obl-fig{margin-left:5%}
  .obl-a .obl-phone{width:22%;left:-5%;bottom:-6%}
  .obl-b .obl-txt{order:-1}
  .obl-b .obl-side{right:0;bottom:-8%;width:36%}
  .obl-a figcaption{padding-left:20%}
  .obl-b figcaption{margin-top:28px}
  .obl-c .obl-list{grid-template-columns:1fr}
  .obl-c .obl-fig{max-width:520px}
  .obl-ch h3{max-width:none}
  .obl-toc{grid-template-columns:1fr}
  .obl-toc li+li{border-left:0;border-top:1px solid var(--line)}
  .u-id,.u-app,.u-care,.u-split{grid-template-columns:1fr}
  .u-app ul{grid-template-columns:1fr}
  .u-sup{grid-template-columns:1fr}
  .u-sup>div+div{border-left:0;border-top:1px solid var(--line)}
  .u-auth figure,.u-auth .u-wide{grid-column:1 / -1}
  .u-auth .u-tall{grid-row:auto}
  .facts-row .fx-link a{width:auto;display:inline;font-size:1.02rem;line-height:1.35}
  .facts-row .fx-link a svg{display:inline;vertical-align:-2px;margin-left:4px}
}