/* ═══════════════════════════════════════════════════════════════════════
   Sekcije koje objašnjavaju posao: šta radimo, šta sve možemo napraviti,
   pitanja klijenata i vlastiti proizvodi.

   Sve stoji na hairline redovima, bez kartica: sekcija se čita kao spisak
   isporuka, a ne kao mreža kutija. Tokeni i pomoćne klase su iste kao na
   ostatku naslovne (.u, .oz, .d2, .vod, .r, .mk).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── zajednički vrh sekcije: naslov lijevo, uvod desno ── */
.sr-vrh,.uc-vrh,.fq-vrh,.vnt-vrh{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(24px,4vw,72px);align-items:end;margin-bottom:clamp(48px,6vw,96px)
}
.sr-vrh .vod,.uc-vrh .vod,.fq-vrh .vod,.vnt-vrh .vod{max-width:44ch}
@media(max-width:900px){
  .sr-vrh,.uc-vrh,.fq-vrh,.vnt-vrh{grid-template-columns:1fr;align-items:start;gap:22px}
}

/* ── ŠTA RADIMO: disciplina, veliki naslov i dva snimka iz projekta ── */
.sr-l{display:grid;gap:clamp(72px,9vw,140px)}
.sr-d{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(28px,4.5vw,80px);align-items:center}
.sr-obrnuto .sr-d-tekst{order:2}
.sr-br{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--zar)}
.sr-d-tekst h3{margin-top:14px;font-family:var(--sans-d);font-weight:400;
  font-size:clamp(40px,6vw,86px);line-height:.98;letter-spacing:-.042em}
.sr-uvod{margin-top:clamp(16px,2vw,24px);font-size:17px;line-height:1.62;
  color:var(--siva);max-width:46ch}
.sr-d-tekst ul{margin:clamp(24px,2.8vw,34px) 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(20px,2.6vw,42px)}
.sr-vrh .mk{color:var(--zar)}
.sr-vrh .mk::before{display:none}
.sr-d-tekst li{position:relative;padding:9px 0 9px 15px;border:0;font-size:15px;line-height:1.45}
.sr-d-tekst li::before{content:"";position:absolute;left:0;top:17px;width:4px;height:4px;border-radius:50%;background:var(--zar)}
.sr-d-tekst li b{font-weight:500}
.sr-d-tekst li span{display:block;margin-top:3px;font-size:13px;color:var(--siva)}
.sr-primjer{margin-top:clamp(20px,2.4vw,28px);font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--siva-2)}
.sr-primjer a{color:var(--siva);text-decoration:none;transition:color .2s}
.sr-primjer a:hover{color:var(--zar)}

.sr-d-kadar{position:relative;height:clamp(440px,43vw,650px);padding:clamp(26px,3.2vw,50px);
  overflow:hidden;border-radius:clamp(24px,2.4vw,38px);isolation:isolate;
  background:radial-gradient(circle at 78% 18%,rgba(255,255,255,.82),transparent 34%),#e9e4dc;
  box-shadow:0 38px 78px -54px rgba(18,17,11,.48)}
.sr-obrnuto .sr-d-kadar{background:radial-gradient(circle at 22% 18%,rgba(255,255,255,.82),transparent 34%),#e4e7e2}
.sr-d-kadar::after{content:"";position:absolute;inset:auto -12% -38% 28%;z-index:-1;aspect-ratio:1;border-radius:50%;background:rgba(255,79,49,.07);filter:blur(2px)}
.sr-obrnuto .sr-d-kadar::after{inset:auto 28% -38% -12%}
.sr-velika{position:relative;width:88%;height:82%;margin:0;overflow:hidden;border-radius:clamp(18px,1.7vw,26px);background:var(--krem);
  box-shadow:0 34px 70px -42px rgba(18,17,11,.62)}
.sr-obrnuto .sr-velika{margin-left:auto}
.sr-shot{position:absolute;inset:-1.5%;display:block;opacity:0;
  transform:translate3d(var(--sr-dx,0),var(--sr-dy,0),0) scale(1.035);
  animation:sr-shot-cycle 6.6s cubic-bezier(.4,0,.2,1) infinite;will-change:opacity,transform}
.sr-shot:nth-child(2){animation-delay:-4.4s}
.sr-shot:nth-child(3){animation-delay:-2.2s}
.sr-shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;
  animation:sr-shot-drift 6.6s ease-in-out infinite;will-change:transform}
.sr-shot:nth-child(2) img{animation-delay:-4.4s}
.sr-shot:nth-child(3) img{animation-delay:-2.2s}
@keyframes sr-shot-cycle{0%,29%{opacity:1}33.4%,96%{opacity:0}100%{opacity:1}}
@keyframes sr-shot-drift{0%{transform:scale(1.045)}50%{transform:scale(1.012) translate3d(.3%,.45%,0)}100%{transform:scale(1.045)}}
.sr-mala{position:absolute;z-index:2;right:3.5%;bottom:3.5%;width:clamp(150px,34%,260px);margin:0;
  overflow:hidden;border-radius:clamp(16px,1.5vw,23px);aspect-ratio:4/5;background:var(--krem);
  border:clamp(6px,.7vw,10px) solid var(--papir);box-shadow:0 34px 62px -32px rgba(18,17,11,.68)}
.sr-obrnuto .sr-mala{right:auto;left:3.5%}
.sr-mala img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.sr-d-kadar.is-live{perspective:1400px;--mx:50%;--my:50%}
.sr-d-kadar.is-live .sr-velika,.sr-d-kadar.is-live .sr-mala{will-change:transform,opacity}
.sr-d-kadar.is-live img{will-change:transform}
@media(max-width:900px){
  .sr-d{grid-template-columns:1fr;gap:26px}
  .sr-obrnuto .sr-d-tekst{order:0}
  .sr-d-tekst ul{grid-template-columns:1fr}
  .sr-d-kadar{height:clamp(390px,112vw,620px)}
  .sr-velika{width:92%;height:80%}
  .sr-mala{width:39%;right:2.5%;bottom:2.5%}
  .sr-obrnuto .sr-mala{left:2.5%;right:auto}
}
@media(prefers-reduced-motion:reduce){
  .sr-shot,.sr-shot img{animation:none}
  .sr-shot{display:none;opacity:1;transform:none}
  .sr-shot:first-child{display:block}
}

/* ── ŠTA MOŽEMO: indeks domena uz ljepljivi pregled ── */
.uc-scena{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.84fr);
  gap:clamp(30px,5vw,84px);align-items:start}
.uc-l{border-top:1px solid var(--linija)}
.uc-d{position:relative;padding-block:clamp(22px,2.5vw,32px);border-bottom:1px solid var(--linija);
  transition:padding-left .4s var(--lako)}
.uc-d h3{font-family:var(--sans-d);font-weight:500;font-size:clamp(19px,1.6vw,25px);
  line-height:1.2;letter-spacing:-.02em;transition:color .3s var(--lako)}
.uc-d p{margin-top:10px;font-size:15.5px;line-height:1.55;color:var(--siva);max-width:44ch}
.uc-primjer{margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--siva-2)}
.uc-primjer a{color:var(--siva);text-decoration:none;border-bottom:1px solid var(--linija);
  transition:color .2s,border-color .2s}
.uc-primjer a:hover{color:var(--zar);border-color:var(--zar)}
/* živa verzija: red koji čitate nosi crtu i punu tintu, ostali su tiši */
.uc-zivo .uc-d h3{color:var(--siva)}
.uc-zivo .uc-d.je-aktivan{padding-left:20px}
.uc-zivo .uc-d.je-aktivan h3{color:var(--tinta)}
.uc-zivo .uc-d::before{content:'';position:absolute;left:0;top:clamp(22px,2.5vw,32px);bottom:auto;
  width:2px;height:0;background:var(--zar);transition:height .4s var(--lako)}
.uc-zivo .uc-d.je-aktivan::before{height:calc(100% - 2 * clamp(22px,2.5vw,32px))}

.uc-pregled{position:sticky;top:104px;margin:0;overflow:hidden;border-radius:20px;
  aspect-ratio:4/3;background:var(--krem);box-shadow:0 36px 64px -38px rgba(18,17,11,.5)}
.uc-pregled img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;
  transition:opacity .35s var(--lako),transform .9s var(--lako)}
.uc-pregled img.mijenja{opacity:0;transform:scale(1.03)}
.uc-pregled figcaption{position:absolute;left:14px;bottom:14px;padding:8px 13px;border-radius:999px;
  background:rgba(18,17,11,.7);color:#f5f2ed;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase}
.uc-mobil{display:none}
.uc-kraj{display:flex;flex-wrap:wrap;align-items:baseline;gap:16px 28px;
  margin-top:clamp(40px,4.5vw,64px)}
.uc-kraj p{font-size:17px;line-height:1.6;color:var(--siva);max-width:52ch}
@media(max-width:900px){
  .uc-scena{grid-template-columns:1fr}
  .uc-pregled{display:none}
  .uc-mobil{display:block;margin:16px 0 0;overflow:hidden;border-radius:14px;aspect-ratio:16/10;
    background:var(--krem)}
  .uc-mobil img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
}

/* ── PITANJA: pitanje lijevo, odgovor desno, bez akordeona ── */
.fq-l{border-top:1px solid var(--linija)}
.fq-d{display:grid;grid-template-columns:minmax(0,.46fr) minmax(0,1.54fr);
  gap:clamp(16px,3vw,64px);padding-block:clamp(26px,2.8vw,38px);
  border-bottom:1px solid var(--linija)}
.fq-d h3{font-family:var(--sans-d);font-weight:500;font-size:clamp(18px,1.55vw,24px);
  line-height:1.24;letter-spacing:-.018em;max-width:26ch}
.fq-d p{font-size:16.5px;line-height:1.62;color:var(--siva);max-width:62ch}
.fq-d p+p{margin-top:10px}
.fq-d a{color:var(--tinta);text-decoration:none;border-bottom:1px solid var(--linija);
  transition:color .2s,border-color .2s}
.fq-d a:hover{color:var(--zar);border-color:var(--zar)}
@media(max-width:900px){.fq-d{grid-template-columns:1fr;gap:12px}}

/* ── NAŠI PROIZVODI: venture redovi sa snimkom ── */
.vnt{background:var(--papir-2)}
.vnt-l{border-top:1px solid var(--linija)}
.vnt-d{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr) auto;
  gap:clamp(20px,3vw,56px);align-items:center;padding-block:clamp(26px,3vw,42px);
  border-bottom:1px solid var(--linija)}
.vnt-d figure{margin:0;overflow:hidden;border-radius:14px;background:var(--krem);
  aspect-ratio:16/10;box-shadow:0 18px 40px -22px rgba(18,17,11,.35)}
.vnt-d figure img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--lako)}
.vnt-d:hover figure img{transform:scale(1.04)}
.vnt-t h3{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  font-family:var(--sans-d);font-weight:400;font-size:clamp(28px,3.4vw,50px);
  line-height:1.02;letter-spacing:-.036em}
.vnt-stanje{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 12px;border:1px solid var(--linija);border-radius:999px;color:var(--siva)}
.vnt-stanje.je-sljedeci{color:var(--zar);border-color:rgba(255,79,49,.4)}
.vnt-t p{margin-top:14px;font-size:16.5px;line-height:1.6;color:var(--siva);max-width:52ch}
.vnt-veza{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:500;
  color:var(--tinta);text-decoration:none;white-space:nowrap;
  border-bottom:1px solid var(--tinta);padding-bottom:3px;transition:color .2s,border-color .2s}
.vnt-veza:hover{color:var(--zar);border-color:var(--zar)}
@media(max-width:900px){
  .vnt-d{grid-template-columns:1fr;gap:18px;align-items:start}
  .vnt-d figure{max-width:340px}
}

/* ── ICBL: šta radimo za njih ── */
.icbl-rad{margin-top:clamp(26px,3vw,38px);border-top:1px solid var(--linija)}
.icbl-rad li{list-style:none;padding:11px 0;border-bottom:1px solid var(--linija);
  font-size:15.5px;line-height:1.5;color:var(--siva)}
.icbl-rad li b{display:block;font-weight:500;color:var(--tinta)}
.icbl-stanje{display:inline-flex;align-items:center;gap:9px;margin-top:22px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--siva);padding:7px 14px;border:1px solid var(--linija);border-radius:999px}
.icbl-stanje i{width:7px;height:7px;border-radius:50%;background:var(--zar);
  box-shadow:0 0 0 3px rgba(255,79,49,.16)}
/* Članstvo u njihovom inkubatoru. Činjenica, ne tvrdnja — stoji sama u redu
   ispod oznake stanja, a ne u uvodnom pasusu, jer uvod govori o tome šta za
   ICBL gradimo, a ovo je druga strana istog odnosa.
   Bez linije iznad: lista već nosi pet linija, pa bi šesta ovaj red vizuelno
   vratila u listu umjesto da ga odvoji. Razdvaja ih razmak.
   Dvije klase u selektoru jer `.icbl-kopija p` ima veću specifičnost od gole
   klase i pojeo bi taj razmak. */
.icbl-kopija .icbl-uz{margin-top:clamp(30px,3.6vw,46px)}

/* ── GOLDEN STANDARD: obim angažmana na naslovnoj ── */
.gsa-uvod{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,72px);margin-top:clamp(26px,3vw,40px)}
.gsa-uvod>p{font-size:17px;line-height:1.62;color:var(--siva);max-width:50ch}
.gsa-obim{margin:0;padding:0;list-style:none;border-top:1px solid var(--linija)}
.gsa-obim li{padding:11px 0;border-bottom:1px solid var(--linija);font-size:15.5px;line-height:1.5}
.gsa-obim li span{display:block;margin-top:3px;font-size:13.5px;color:var(--siva)}
.gsa-veze{display:flex;flex-wrap:wrap;gap:14px 26px;margin-top:clamp(22px,2.4vw,30px)}
@media(max-width:900px){.gsa-uvod{grid-template-columns:1fr;gap:22px}}

/* red venture koji jos nije objavljen: tekst, ne link */
.vnt-uskoro{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--siva-2);white-space:nowrap}

/* ═══ ŠTA DOBIJATE ═══════════════════════════════════════════════════════
   Tamna traka sa ishodima. Svaki red ima broj, tvrdnju i snimak iz projekta
   koji je već u upotrebi, pa tvrdnja ima pokriće. Redovi se naizmjenično
   pomjeraju, a snimci ulaze iz uvećanja kroz postojeću klasu .r-slika.
   ═══════════════════════════════════════════════════════════════════════ */
.vr{background:var(--tinta);color:#f5f2ed;padding-block:clamp(96px,13vw,190px);
  position:relative;isolation:isolate;overflow:clip}
.vr::before{content:'';position:absolute;inset:-20% -10% auto;height:70%;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 55% at 72% 0%,rgba(255,79,49,.16),transparent 70%)}
.vr .oz{color:rgba(245,242,237,.56)}
.vr .oz::before{background:var(--zar)}
.vr .d2{color:#f5f2ed}
.vr .mk::before{background:var(--zar);opacity:.92}
.vr .vod{color:rgba(245,242,237,.62)}

.vr-vrh{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(24px,4vw,72px);align-items:end;margin-bottom:clamp(56px,7vw,110px)}
.vr-vrh .vod{max-width:46ch}
@media(max-width:900px){.vr-vrh{grid-template-columns:1fr;align-items:start;gap:22px}}

.vr-l{margin:0;padding:0;list-style:none;display:grid;gap:clamp(56px,7vw,104px)}
.vr-d{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(20px,3.4vw,58px);align-items:center}
/* Parni redovi imaju snimak lijevo i uvučeni su, pa spisak ne stoji kao tabela. */
.vr-d:nth-child(even){grid-template-columns:minmax(0,.92fr) auto minmax(0,1fr);
  margin-left:clamp(0px,4vw,88px)}
.vr-d:nth-child(even) .vr-s{order:-1}
.vr-br{font-family:var(--mono);font-size:clamp(12px,1vw,14px);letter-spacing:.14em;
  color:var(--zar);align-self:start;padding-top:10px}
.vr-t h3{font-family:var(--sans-d);font-weight:400;font-size:clamp(28px,3.6vw,54px);
  line-height:1.02;letter-spacing:-.036em;max-width:16ch}
.vr-t p{margin-top:clamp(14px,1.6vw,20px);font-size:17px;line-height:1.62;
  color:rgba(245,242,237,.66);max-width:48ch}
.vr-dokaz{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(245,242,237,.44)}
.vr-dokaz a{color:rgba(245,242,237,.78);text-decoration:none;
  border-bottom:1px solid rgba(245,242,237,.28);transition:color .2s,border-color .2s}
.vr-dokaz a:hover{color:var(--zar);border-color:var(--zar)}
.vr-s{margin:0;overflow:hidden;border-radius:18px;background:#1c1b17;aspect-ratio:16/11;
  box-shadow:0 40px 70px -40px rgba(0,0,0,.8)}
.vr-s img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
@media(max-width:900px){
  .vr-d,.vr-d:nth-child(even){grid-template-columns:auto minmax(0,1fr);gap:14px 18px;margin-left:0;align-items:start}
  .vr-d .vr-s,.vr-d:nth-child(even) .vr-s{order:0;grid-column:1 / -1;margin-top:18px;aspect-ratio:16/10}
  .vr-t h3{max-width:none}
}

/* obećanja: četiri stvari koje stoje u svakom dogovoru */
.vr-zavjet{margin-top:clamp(64px,8vw,120px);padding-top:clamp(32px,3.6vw,46px);
  border-top:1px solid rgba(245,242,237,.18)}
.vr-zavjet ul{margin:clamp(24px,3vw,38px) 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,40px)}
.vr-zavjet li{padding-top:16px;border-top:1px solid rgba(245,242,237,.18)}
.vr-zavjet li b{display:block;font-size:17px;font-weight:500;letter-spacing:-.012em}
.vr-zavjet li span{display:block;margin-top:8px;font-size:14.5px;line-height:1.5;
  color:rgba(245,242,237,.6)}
.vr-dug{margin-top:clamp(30px,3.4vw,44px);background:var(--zar);color:#fff;border-color:var(--zar)}
.vr-dug:hover{background:#e8452b}
@media(max-width:1000px){.vr-zavjet ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.vr-zavjet ul{grid-template-columns:1fr}}

/* Znak partnera se uklapa po visini, ne rese se ivice. */
.uc-pregled img.sadrzi,.uc-mobil img.sadrzi{object-fit:contain;object-position:center;padding:9%;background:var(--papir-2)}

/* ── KAKO RADIMO SA KLIJENTIMA ────────────────────────────────────────────
   Četiri usluge, svaka sa zašto, kako i šta dobijate. Bez snimaka projekata:
   nosi ih tipografija, redni broj i crtani znak u jednom potezu. Blokovi se
   smjenjuju po tonu papira, pa spisak ne izgleda kao tabela.
   ───────────────────────────────────────────────────────────────────────── */
.nc-vrh{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(24px,4vw,72px);align-items:end;margin-bottom:clamp(48px,6vw,92px)}
.nc-vrh .vod{max-width:46ch}
@media(max-width:900px){.nc-vrh{grid-template-columns:1fr;align-items:start;gap:22px}}

.nc-l{display:grid;gap:clamp(18px,2vw,26px)}
.nc-d{padding:clamp(28px,3.4vw,52px) clamp(22px,3vw,48px);border-radius:24px;
  background:var(--papir-2);border:1px solid var(--linija)}
.nc-d:nth-child(even){background:transparent}
.nc-glava{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;
  gap:clamp(14px,2vw,28px);align-items:center;
  padding-bottom:clamp(20px,2.4vw,30px);border-bottom:1px solid var(--linija)}
.nc-br{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--zar)}
.nc-glava h3{font-family:var(--sans-d);font-weight:400;font-size:clamp(26px,3.2vw,46px);
  line-height:1.04;letter-spacing:-.036em;max-width:20ch}
.nc-znak{width:clamp(34px,3vw,46px);height:auto;fill:none;stroke:var(--zar);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.nc-cijena{text-align:right;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;line-height:1.5;color:var(--tinta);white-space:nowrap}
.nc-cijena span{display:block;color:var(--siva)}

.nc-tijelo{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.15fr) minmax(0,.8fr);
  gap:clamp(22px,3vw,54px);margin-top:clamp(22px,2.6vw,34px)}
.nc-oz{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--siva-2);margin-bottom:12px}
.nc-tijelo p{font-size:16px;line-height:1.62;color:var(--siva)}
.nc-tijelo ol{margin:0;padding:0;list-style:none;counter-reset:korak}
.nc-tijelo ol li{counter-increment:korak;position:relative;padding:9px 0 9px 30px;
  border-top:1px solid var(--linija);font-size:15px;line-height:1.5}
.nc-tijelo ol li::before{content:counter(korak);position:absolute;left:0;top:9px;
  font-family:var(--mono);font-size:11px;color:var(--zar)}
.nc-tijelo ul{margin:0;padding:0;list-style:none}
.nc-tijelo ul li{padding:9px 0;border-top:1px solid var(--linija);font-size:15px;line-height:1.45}
.nc-tijelo ul li:first-child,.nc-tijelo ol li:first-child{border-top:0;padding-top:0}

.nc-kraj{display:flex;flex-wrap:wrap;align-items:baseline;gap:16px 28px;
  margin-top:clamp(36px,4vw,56px)}
.nc-kraj p{font-size:16.5px;line-height:1.6;color:var(--siva);max-width:56ch}

@media(max-width:1100px){
  .nc-tijelo{grid-template-columns:1fr 1fr}
  .nc-tijelo>div:last-child{grid-column:1 / -1}
}
@media(max-width:820px){
  .nc-glava{grid-template-columns:auto minmax(0,1fr);row-gap:14px}
  .nc-znak{grid-row:1;justify-self:end}
  .nc-cijena{grid-column:1 / -1;text-align:left;white-space:normal}
  .nc-tijelo{grid-template-columns:1fr}
  .nc-tijelo>div:last-child{grid-column:auto}
}

/* ── fascikla i kartice ────────────────────────────────────────────────
   Fascikla stoji na istom mjestu kroz cijelu sekciju (ljepljivo sidro bez
   visine), a kartice usluga se lijepe jedna preko druge dok skrol ide, pa
   se slazu kao papiri u nju. Uze su od fascikle, pa joj se rub uvijek vidi. */
.nc-l{position:relative}
.nc-drzac{position:sticky;top:0;height:0;z-index:0;pointer-events:none}
.nc-fascikla{position:absolute;left:50%;transform:translateX(-50%);
  top:clamp(88px,13vh,150px);width:min(100%,1240px);height:clamp(380px,66vh,640px);
  border-radius:28px;background:linear-gradient(158deg,#f0a074,#d97045);
  box-shadow:0 40px 80px -46px rgba(109,60,42,.6),inset 0 2px 0 #ffbf97}
.nc-fascikla::before{content:"";position:absolute;top:-26px;left:40px;width:clamp(150px,22%,230px);
  height:28px;border-radius:14px 18px 0 0;background:#e08a5c}
.nc-jezicak{position:absolute;left:44px;top:-19px;z-index:1;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:#7a3f29}
@media(min-width:901px){
  .nc-d{position:sticky;top:calc(94px + var(--i,0) * 18px);z-index:calc(var(--i,0) + 1);
    width:min(100%,1150px);margin-inline:auto;
    box-shadow:0 34px 60px -44px rgba(18,17,11,.55)}
  .nc-d:nth-child(even){background:var(--papir)}
  .nc-l{gap:clamp(26px,3vw,46px);padding-bottom:clamp(40px,6vw,90px)}
}
@media(max-width:900px){
  .nc-drzac{display:none}
}

/* Fascikla mora biti visa od kartica, da joj se rub vidi i ispod zadnje. */
.nc-fascikla{height:clamp(520px,84vh,780px);top:clamp(76px,11vh,128px)}

/* ── UVODNA PLOHA ─────────────────────────────────────────────────────────
   Prvi kadar sajta. Znak se otkriva odozdo, traka ispod njega pokazuje
   stvarni napredak ucitavanja, a brojac u desnom dnu broji isto to. Zato je
   mono: to je mjerenje, ne ukras. Na kraju sadrzaj ode malo nagore i utihne,
   pa tek onda ploha otkliza — dva pokreta umjesto jednog, da prelaz na hero
   ne izgleda kao rez. Ploha stoji u dokumentu od prvog bajta, pa nema
   treptaja prije nego skripta stigne.
   ───────────────────────────────────────────────────────────────────────── */
.uvod{position:fixed;inset:0;z-index:9500;display:grid;place-items:center;
  background:var(--papir);transition:transform .86s cubic-bezier(.76,0,.24,1)}
.uvod::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--linija);opacity:0;transition:opacity .3s ease}
.uvod-kraj::after{opacity:1}
.uvod-radi{overflow:hidden}
.uvod-kraj{transform:translateY(-101%)}

.uvod-sredina{display:grid;justify-items:center;
  transition:transform .5s cubic-bezier(.65,0,.35,1),opacity .4s ease}
.uvod-ode .uvod-sredina{transform:translateY(-14px);opacity:0}
.uvod-znak{width:min(210px,44vw);height:auto;display:block;
  clip-path:inset(0 0 100% 0)}
.uvod-ide .uvod-znak{animation:uvod-otkrij .78s cubic-bezier(.16,1,.3,1) forwards}

/* Traka je sirina znaka, da linija i znak dijele istu mjeru. */
.uvod-crta{display:block;width:min(210px,44vw);height:1.5px;margin-top:24px;
  background:var(--linija);position:relative;overflow:hidden}
.uvod-crta i{position:absolute;inset:0;background:var(--zar);
  transform:scaleX(var(--uvod-p,0));transform-origin:0 50%;
  transition:transform .35s cubic-bezier(.22,1,.36,1)}

.uvod-dno{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(22px,4vh,40px);
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--siva);
  opacity:0;transform:translateY(8px);
  transition:opacity .5s ease .12s,transform .5s cubic-bezier(.16,1,.3,1) .12s}
.uvod-ide .uvod-dno{opacity:1;transform:none}
.uvod-ode .uvod-dno{opacity:0;transform:translateY(-8px);transition-delay:0s}
.uvod-broj{font-variant-numeric:tabular-nums;color:var(--tinta)}
.uvod-broj::after{content:"%";margin-left:.35em;color:var(--siva)}

@keyframes uvod-otkrij{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@media(prefers-reduced-motion:reduce){
  .uvod{display:none}
}

/* ── KURSOR ───────────────────────────────────────────────────────────────
   Prsten je postojao, ali je bio toliko tih da se nije primjecivao. Veci je,
   ima jaci rub i tacku u sredini; stanja iz osnovne skripte ostaju ista. */
@media (hover:hover) and (pointer:fine){
  .kur{width:30px;height:30px;margin:-15px 0 0 -15px;border-color:rgba(18,17,11,.5)}
  .kur::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;
    background:var(--zar);opacity:.95;transition:opacity .25s var(--lako)}
  .kur[data-tamno]{border-color:rgba(245,242,237,.6)}
  .kur[data-st="veza"]::after,.kur[data-st="rad"]::after,.kur[data-st="tekst"]::after{opacity:0}
  .kur[data-st="tekst"]{width:2px;height:28px;margin:-14px 0 0 -1px}
}

/* ── Sitan tekst na telefonu ───────────────────────────────────────────
   Oznake sekcija su na uskom ekranu bile 10px, a natpis iznad hero naslova
   9px. To je ispod granice citljivosti za verzal sa razmaknutim slovima,
   pa na telefonu idu za pola stepena gore. Na sirokom ekranu ostaje kako je. */
@media (max-width:700px){
  .oz{font-size:11px}
  .hero--landscape .hero-eyebrow{font-size:10.5px}
}