/* ————————————————————————————————————————————————————————————————
   Simplex GO — dizajnerski sustav
   Svijetla podloga u slojevima, staklene kartice, tipografija u dvije
   groteske, jedan oblik gumba (crna pilula). Boja se pojavljuje samo u
   pozadinskim gradijentima i sitnim naglascima — nikad kao ploha gumba.
   Dijeli ga naslovnica i sve stranice po djelatnosti.
   ———————————————————————————————————————————————————————————————— */

@font-face{font-family:"Schibsted Grotesk";src:url(fontovi/schibsted-grotesk.woff2) format("woff2");
  font-weight:400 800;font-style:normal;font-display:optional}
@font-face{font-family:"Hanken Grotesk";src:url(fontovi/hanken-grotesk.woff2) format("woff2");
  font-weight:400 700;font-style:normal;font-display:optional}

:root{
  --ink:#0A1030;                  /* tinta iz logotipa — naslovi, gumbi, obrubi */
  --ink2:#4A4C63;                 /* tekst u odlomku */
  --ink3:#6E7086;                 /* natpisi, oznake */
  --pap:#FCFCFB;                  /* osnovna ploha */
  --zel:#EDE9FB;                  /* meka ljubičasta u pozadinskom gradijentu */
  --tir:#E7EEFC;                  /* meka plava u pozadinskom gradijentu */
  --nag:#5B34D6;                  /* ljubičasti naglasak — SAMO na 7–16 % */
  --nag2:#4A29B4;                 /* isti naglasak, korak tamnije — za tekst */
  /* Gradijent iz znaka. Ide SAMO u sitne detalje: crtica ispod naglašene
     riječi, točkica u znački, oznaka aktivne stavke. Nikad kao ploha gumba. */
  --grad:linear-gradient(120deg,#2B5BF0,#8B2BF0);
  --rub:rgba(10,16,48,.09);
  --rub2:rgba(10,16,48,.16);
  --stk1:rgba(255,255,255,.85);   /* staklo, gornji rub */
  --stk2:rgba(255,255,255,.68);   /* staklo, donji rub */
  --sjena:0 18px 44px -26px rgba(10,16,48,.28);
  --sjena2:0 30px 70px -34px rgba(10,16,48,.34);
  --mm:clamp(18px,4vw,40px);      /* rubna margina */
  --sp:clamp(62px,8vw,126px);     /* razmak između poglavlja */
  --r:14px;                       /* zaobljenje kartica */
  --tr:cubic-bezier(.22,.72,.24,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* ⚠ Odmak od ljepljivog zaglavlja (.zg, 63 px). Bez njega svako sidro ostavi
   sekciju točno na vrhu okna — dakle IZA poluprozirnog zaglavlja, pa se oznaka
   i prvi redak naslova ne vide. Izmjereno na 390 i na 1280 px: #izradi je
   završavao na top:0. 78 px = visina zaglavlja + 15 px zraka.
   ⚠ Ovo NE ide i na `html{scroll-padding-top}` — odmaci se zbrajaju, pa je
   sidro završavalo 156 px nisko (izmjereno). Jedno ili drugo, ne oboje. */
section[id]{scroll-margin-top:78px}
body{margin:0;background:var(--pap);color:var(--ink);overflow-x:clip;position:relative;
  font:400 16.5px/1.65 "Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block;height:auto}
::selection{background:var(--ink);color:#fff}

/* ——————————————————————————————————————————————————————
   1. POZADINA U SLOJEVIMA
   Ploha nije jedna boja: dva radijalna gradijenta pri vrhu stranice,
   preko njih zrno šuma po cijeloj visini. Zrno je SVG data URI, bez
   ijednog vanjskog zahtjeva.
   —————————————————————————————————————————————————————— */
.poz,.zrno{position:absolute;left:0;right:0;pointer-events:none;z-index:0}
.poz{top:0;height:min(1500px,180vh);
  background:
    radial-gradient(120% 85% at 12% -8%, var(--tir) 0%, transparent 52%),
    radial-gradient(110% 75% at 88% -4%, var(--zel) 0%, transparent 48%)}
.zrno{top:0;bottom:0;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23z)'/%3E%3C/svg%3E");
  background-size:180px 180px}
/* sve što nije pozadina stoji iznad slojeva */
header,main,footer,.mob{position:relative;z-index:1}

/* ——————————————————————————————————————————————————————
   2. TIPOGRAFIJA
   Naslovi Schibsted Grotesk 800, tijelo Hanken Grotesk 400.
   —————————————————————————————————————————————————————— */
h1,h2,h3,h4,.n1,.n2,.n3{font-family:"Schibsted Grotesk","Hanken Grotesk",system-ui,sans-serif;
  margin:0;color:var(--ink);font-variant-numeric:tabular-nums}
.n1{font-size:clamp(2.3rem,5.4vw,4.1rem);font-weight:800;letter-spacing:-.025em;line-height:1.08}
.n2{font-size:clamp(1.85rem,4vw,3rem);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.n3{font-size:clamp(1.06rem,1.7vw,1.24rem);font-weight:700;letter-spacing:-.012em;line-height:1.32}
.n4{font-size:1rem;font-weight:700;letter-spacing:-.008em;line-height:1.35}
/* naglasak u naslovu — potez markerom ispod riječi, nikad ploha. Nosi gradijent
   iz znaka, razrijeđen na 15 %, pa se boja marke pojavi bez šarene plohe.
   Ide kao background-image, a ne kao pseudo-element s negativnim z-indexom:
   negativni z-index bi upao iza konteksta slaganja koji stvara `main`. */
/* Traka mora sjesti NA pismovnu crtu, ne preko slova. Postotak po visini
   retka ju je gurao u sredinu glifova pa je „850 €+" izgledalo precrtano;
   calc od dna retka drži ju ispod crte pri svakoj veličini. */
.n1 em,.n2 em{font-style:normal;white-space:nowrap;border-radius:2px;
  background-image:linear-gradient(100deg,rgba(43,91,240,.15),rgba(139,43,240,.15));
  background-repeat:no-repeat;background-size:100% .24em;
  background-position:0 calc(100% - .04em)}
/* ⚠ Njemački je 20–30 % dulji od hrvatskoga. Na 360 px istaknuta fraza
   („überhaupt belastet wird") s `nowrap` nije stala u redak i gurala je cijelu
   stranicu u vodoravno pomicanje — izmjereno, 371 px sadržaja u 360 px okna.
   Ispod 560 px se zato smije prelomiti; `box-decoration-break:clone` crta
   podcrtu na svakom retku posebno, pa istaknuta fraza u dva retka i dalje
   izgleda kao istaknuta, a ne kao pola podcrte. */
@media(max-width:560px){
  .n1 em,.n2 em{white-space:normal;
    -webkit-box-decoration-break:clone;box-decoration-break:clone}
}
/* oznaka poglavlja */
.ozn{display:block;font-size:12px;font-weight:600;letter-spacing:.075em;text-transform:uppercase;
  color:var(--ink3);margin:0 0 14px}
.uvd{font-size:clamp(1rem,1.35vw,1.09rem);color:var(--ink2);max-width:56ch;margin:16px 0 0}
p{margin:0}

/* ——————————————————————————————————————————————————————
   3. REŠETKA
   —————————————————————————————————————————————————————— */
.o{max-width:1200px;margin:0 auto;padding:0 var(--mm)}
.o--uz{max-width:940px}
.sek{padding:var(--sp) 0}
.sek--tan{padding:clamp(46px,5.5vw,84px) 0}
.zag{margin-bottom:clamp(30px,4vw,54px)}
.zag--sr{text-align:center;margin-left:auto;margin-right:auto;max-width:760px}
.zag--sr .uvd{margin-left:auto;margin-right:auto}

/* ——————————————————————————————————————————————————————
   4. GUMBI — jedan oblik, dvije boje, nijedna šarena ploha
   —————————————————————————————————————————————————————— */
/* Visina 44 px, ne 40 — to je najmanja dodirna meta koju prst pouzdano pogodi.
   Izmjereno na 390 px: „Otvori svoju struku" je bio 184×40. */
.b1,.b2{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:44px;padding:0 16px;border-radius:999px;cursor:pointer;text-decoration:none;
  font:600 14px/1 "Hanken Grotesk",system-ui,sans-serif;letter-spacing:-.003em;
  border:1px solid transparent;white-space:nowrap;
  transition:transform .22s var(--tr),background .22s var(--tr),box-shadow .22s var(--tr)}
.b1{background:var(--ink);color:#fff}
.b1:hover{background:#171F4A;transform:translateY(-1px);box-shadow:0 10px 22px -14px rgba(10,16,48,.7)}
.b2{background:rgba(255,255,255,.78);color:var(--ink);border-color:var(--rub2);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.b2:hover{background:#fff;transform:translateY(-1px)}
.b1.veci,.b2.veci{height:52px;padding:0 26px;font-size:15px;border-radius:999px}
.b1:active,.b2:active{transform:translateY(0)}
.str{display:inline-block;transition:transform .24s var(--tr)}
.b1:hover .str,.b2:hover .str,.bs:hover .str{transform:translateX(4px)}
/* Prsten fokusa nosi boju marke: na papiru je 7:1, dakle vidljiv i onome tko
   tabom prolazi stranicu, a razlikuje se od crne pilule ispod njega. */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--nag);outline-offset:3px;border-radius:6px}

/* ——————————————————————————————————————————————————————
   5. STAKLENA KARTICA
   —————————————————————————————————————————————————————— */
.kar{background:linear-gradient(var(--stk1),var(--stk2));border:1px solid rgba(255,255,255,.75);
  box-shadow:0 0 0 1px var(--rub),var(--sjena);border-radius:var(--r);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  padding:clamp(20px,2.6vw,30px);min-width:0}
.kar--jak{box-shadow:0 0 0 1px var(--rub),var(--sjena2)}

/* značka iznad naslova */
.znk{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:999px;
  background:rgba(255,255,255,.86);border:1px solid var(--rub);box-shadow:0 2px 8px -4px rgba(10,16,48,.2);
  font-size:13px;font-weight:500;color:var(--ink2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.znk::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--grad);flex:none}

/* ——————————————————————————————————————————————————————
   6. GORNJA TRAKA
   —————————————————————————————————————————————————————— */
.zg{position:sticky;top:0;z-index:60;background:rgba(252,252,251,.78);
  -webkit-backdrop-filter:saturate(150%) blur(14px);backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--rub)}
.zg .o{display:flex;align-items:center;gap:clamp(8px,2vw,26px);height:62px}
/* Marka je logotip, ne tekst. Visina se zadaje u CSS-u, širina ostaje `auto` —
   atributi u HTML-u nose izvorni omjer (330×96) pa preglednik rezervira mjesto
   i prije nego slika stigne. Bez toga traka poskoči pri učitavanju. */
.mk{display:flex;align-items:center;text-decoration:none;flex:none;min-height:44px}
.mk img{height:30px;width:auto;max-width:none}
@media(max-width:400px){.mk img{height:26px}}
.nav{display:none;gap:clamp(12px,1.8vw,26px);margin-left:8px}
@media(min-width:940px){.nav{display:flex}}
.nav a{color:var(--ink2);text-decoration:none;font-size:14.5px;font-weight:500;transition:color .18s}
.nav a:hover{color:var(--ink)}
.zgd{display:flex;align-items:center;gap:10px;margin-left:auto}
.zgtel{display:none;color:var(--ink2);text-decoration:none;font-size:14px;font-weight:600}
@media(min-width:700px){.zgtel{display:block}}
.zgtel:hover{color:var(--ink)}
/* ——— prebacivač jezika: padajući izbornik sa zastavama ———
   Vlasnik: „gore mora biti jedna zastava, ona koju prepozna preglednik, a kad
   stisneš otvore ti se druge pa možeš promijeniti jezik."
   ⚠ NE emoji zastave (🇭🇷): Windows ih ne crta kao zastavu nego kao dva slova,
   pa bi na većini stolnih računala pisalo točno ono što se htjelo izbjeći.
   Zastave su inline SVG u HTML-u — nula novih mrežnih zahtjeva. */
.jz{position:relative;flex:none}
.jz-g{position:relative;display:inline-flex;align-items:center;gap:6px;
  height:38px;padding:0 9px 0 8px;border:1px solid var(--rub2);border-radius:999px;
  background:rgba(255,255,255,.72);color:var(--ink2);cursor:pointer;
  transition:background .18s var(--tr),border-color .18s var(--tr)}
.jz-g:hover{background:#fff;border-color:var(--ink)}
.jz-g:focus-visible{outline:2px solid var(--nag);outline-offset:2px}
/* Dodirna meta 44 px po visini, nevidljivo — vidljivi gumb ostaje 38 px zbog
   sklada s gumbom prijave pored njega. Po širini se ne širi, da ne preuzima
   klikove susjedu. */
.jz-g::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;
  transform:translateY(-50%)}
/* U gumbu stoje sve tri zastave; vidi se samo aktivna. Tako promjena jezika ne
   dira innerHTML i nema treperenja pri prvom crtanju. */
.jz-z{display:flex}
.jz-g .jz-z{display:none}
.jz[data-aktivan="hr"] .jz-g .jz-z[data-z="hr"],
.jz[data-aktivan="en"] .jz-g .jz-z[data-z="en"],
.jz[data-aktivan="de"] .jz-g .jz-z[data-z="de"]{display:flex}
.jz-z svg{display:block;width:24px;height:16px;border-radius:3px;
  border:1px solid rgba(15,23,42,.24);box-sizing:content-box}
.jz-str{flex:none;transition:transform .18s var(--tr)}
.jz-g[aria-expanded="true"] .jz-str{transform:rotate(180deg)}

/* Popis pada ISPOD zaglavlja i IZNAD sadržaja — zaglavlje je z-index 60. */
/* ⚠ Odmak je 14 px, ne 8: gumb je 38 px u zaglavlju od 62 px, pa mu je dno
   13 px iznad donjeg ruba zaglavlja. S manjim odmakom popis je ulazio u zadnjih
   pet piksela trake i preklapao joj obrub. */
.jz-p{position:absolute;top:calc(100% + 14px);right:0;z-index:80;
  margin:0;padding:6px;list-style:none;min-width:190px;
  background:#fff;border:1px solid var(--rub2);border-radius:14px;
  box-shadow:0 18px 40px -18px rgba(10,16,48,.42),0 2px 8px rgba(10,16,48,.06);
  opacity:0;transform:translateY(-6px);
  transition:opacity .18s var(--tr),transform .18s var(--tr)}
.jz-p[hidden]{display:none}
.jz-p.otvoren{opacity:1;transform:none}
.jz-p.zatvara{transition-duration:.14s}
/* Tko je isključio animacije, ne dobiva ni ovu — samo prikaz i skrivanje. */
@media(prefers-reduced-motion:reduce){
  .jz-p,.jz-str{transition:none}
  .jz-p{opacity:1;transform:none}
}
.jz-o{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 10px;
  border-radius:10px;cursor:pointer;color:var(--ink);
  font:500 14.5px/1.2 "Hanken Grotesk",sans-serif;white-space:nowrap}
.jz-o:hover,.jz-o.istaknut{background:#F1F2F7}
.jz-o:focus-visible{outline:2px solid var(--nag);outline-offset:-2px}
.jz-i{flex:1}
/* Odabrani jezik se poznaje po kvačici I po debljini, ne samo po podlozi —
   daltonist i čovjek s prigušenim zaslonom moraju vidjeti isto. */
.jz-o[aria-selected="true"]{font-weight:700}
.jz-k{margin-left:auto;color:var(--nag);font-weight:700;visibility:hidden}
.jz-o[aria-selected="true"] .jz-k{visibility:visible}
.zg .b1{display:none}
@media(min-width:560px){.zg .b1{display:inline-flex}}
/* ——— ulaz u panel u zaglavlju ———
   Vidljiv na SVAKOJ širini, uključujući 390 px gdje se telefon i glavni gumb
   već sklone. Razlog nije estetika: poruka s pristupnom poveznicom redovito
   završi u neželjenoj pošti, pa je ovo jedini put u panel koji klijent nađe bez
   tuđe pomoći. Obris, ne puna ploha — glavni poziv na radnju u zaglavlju je i
   dalje „Pogledaj svoju stranicu", ovo je drugi po redu.
   ⚠ 36 px visine i tanak vodoravni odmak: pri 390 px zaglavlje nosi logotip
   (89 px), ovaj gumb i prebacivač jezika (90 px) — izmjereno da stane bez
   guranja logotipa i bez drugog retka. */
.zgp{display:inline-flex;align-items:center;justify-content:center;flex:none;white-space:nowrap;
  height:36px;padding:0 13px;border:1px solid var(--rub2);border-radius:999px;
  background:rgba(255,255,255,.72);color:var(--ink);text-decoration:none;
  font:600 13.5px/1 "Hanken Grotesk",sans-serif;
  transition:background .18s var(--tr),border-color .18s var(--tr),color .18s var(--tr)}
.zgp:hover{background:#fff;border-color:var(--ink)}
.zgp:focus-visible{outline:2px solid var(--nag);outline-offset:2px}
/* Vidljiva visina ostaje 36 px zbog sklada s prebacivačem jezika, ali dodirna
   meta se nevidljivo proširi na 44 px — palac na mobitelu ne gađa obrub. Širi se
   SAMO po visini, pa ne ulazi u susjedni gumb. */
.zgp{position:relative}
.zgp::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;
  transform:translateY(-50%)}
/* Prijavljen klijent: isti oblik, puna ploha — to više nije alternativa nego put natrag. */
.zgp.unutra{background:var(--ink);color:#fff;border-color:var(--ink)}
.zgp.unutra:hover{background:#171F4A}
/* ——— na mobitelu ikona osobe, od 768 px tekst ———
   Vlasnik: „na mobitelu neka se fino vidi prijava, ona ikona čovjeka."
   Do 767 px tekst nestaje i ostaje krug od 44×44 — puna dodirna meta umjesto
   natpisa od 13 px, i 20-ak px uže od riječi „Prijava", što je zaliha za treći
   gumb u prebacivaču jezika (DE). Ime za čitač zaslona nosi `data-a-*` u HTML-u.
   Prag je 768 px, isti na kojem se gasi ljepljiva donja traka (.mob). */
.zgp-ikona{display:none;flex:none}
@media(max-width:767px){
  .zgp{width:44px;height:44px;padding:0;border-radius:50%}
  .zgp-ikona{display:block}
  .zgp-natpis{display:none}
  /* Prijavljen: uz punu plohu i točka u kutu — bez teksta razlika mora biti
     vidljiva na prvi pogled, a ne samo kao promjena boje. */
  .zgp.unutra::before{content:"";position:absolute;top:1px;right:2px;
    width:11px;height:11px;border-radius:50%;background:var(--nag);
    border:2px solid #FCFCFB}
}

/* ——————————————————————————————————————————————————————
   7. HERO — sve centrirano, točkasti pojasevi lijevo i desno
   —————————————————————————————————————————————————————— */
.hero{position:relative;padding:clamp(44px,6.4vw,92px) 0 clamp(40px,5vw,68px);text-align:center;
  overflow:hidden;isolation:isolate}
/* reflektor: blago potamnjenje oko naslova, drži oko u sredini */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(600px at 50% 38%, rgba(10,16,48,.10), rgba(110,112,134,.04) 42%, transparent 70%)}
/* Točkasti OBLAČIĆI, ne stupovi. Izmjereno na Pendru: ćelija 13 px, ploha
   ~224×96 px, izblijeđena maskom pod 115° — sitni ukras uz naslov, ne tapeta.
   Naša prva izvedba je bila stup 245×2111 px preko cijele sekcije i to je
   čitalo kao pozadinski uzorak umjesto kao detalj. */
.tock{position:absolute;z-index:-1;pointer-events:none;
  width:224px;height:96px;
  background-image:radial-gradient(circle, rgba(10,16,48,.16) 1.7px, transparent 2px);
  background-size:13px 13px;
  -webkit-mask-image:linear-gradient(115deg,#000 20%,transparent 75%);
          mask-image:linear-gradient(115deg,#000 20%,transparent 75%)}
.tock.l{left:clamp(16px,4vw,72px);top:120px}
.tock.d{right:clamp(16px,4vw,72px);top:300px;transform:scaleX(-1)}
@media(max-width:1180px){.tock{display:none}}
.hero .znk{margin-bottom:clamp(18px,2.2vw,26px)}
/* 17ch je lomio naslov u 4 retka (714 px); Pendrov ide do ~1024 px i stane u 2 */
.hero .n1{max-width:24ch;margin:0 auto}
/* Gumb u herou je kompaktna pilula kao na Pendru, ne gumb obrasca preko cijele
   širine. Selektor je .bs.bs--hero jer .bs (width:100%) dolazi KASNIJE u
   datoteci pa bi jednostruka klasa izgubila po redoslijedu — provjereno uživo. */
.bs.bs--hero{display:inline-flex;width:auto;padding:0 30px;margin-top:clamp(22px,2.6vw,32px);
  text-decoration:none}
.bs.bs--hero span{text-decoration:none}
.hero .hsit{margin-top:14px}
.nadn{display:block;font-size:12px;font-weight:600;letter-spacing:.075em;text-transform:uppercase;
  color:var(--ink2);margin-bottom:10px}
.hpod{font-size:clamp(1rem,1.5vw,1.17rem);color:var(--ink2);max-width:56ch;
  margin:clamp(16px,2vw,24px) auto 0}
.hcta{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;margin-top:clamp(22px,2.8vw,32px)}
.hsit{margin:clamp(14px,1.8vw,20px) 0 0;font-size:13.5px;color:var(--ink3)}

/* uređaji ispod naslova */
.mock{margin:clamp(34px,4.6vw,62px) auto 0;max-width:940px;position:relative}
.mock-d{position:relative;padding-bottom:5.2%}
.lap-e{background:rgba(255,255,255,.9);padding:10px 10px 0;border-radius:12px 12px 0 0;
  border:1px solid var(--rub);border-bottom:0;box-shadow:var(--sjena2)}
.lap-e img{border-radius:4px 4px 0 0}
/* podnožje prijenosnika viri izvan ekrana, ali nikad više od 16 px —
   inače na ~768 px probije marginu spremnika i stranica dobije vodoravni pomak */
.lap-n{height:12px;margin:0 max(-3.4%,-16px);border-radius:0 0 11px 11px;
  background:linear-gradient(#f2f2f0,#dcdcda);border:1px solid var(--rub);border-top:0;position:relative}
.lap-n::after{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:14%;height:4px;background:rgba(10,16,48,.13);border-radius:0 0 5px 5px}
.tel{position:absolute;right:1%;bottom:0;width:16.5%;max-width:172px}
@media(max-width:700px){.tel{width:23%}}
.tel-e{position:relative;background:#15151c;padding:6px;border-radius:19px;
  box-shadow:var(--sjena2)}
.tel-e img{border-radius:14px;background:#fff}
.tel-e::before{content:"";position:absolute;left:50%;top:11px;transform:translateX(-50%);
  width:30%;height:4px;background:#33333c;border-radius:3px;z-index:2}
.mcap{margin:clamp(18px,2.2vw,26px) auto 0;font-size:14px;color:var(--ink3);max-width:52ch}

/* ——————————————————————————————————————————————————————
   8. OBRAZAC — istaknuta staklena kartica
   —————————————————————————————————————————————————————— */
.obr{max-width:760px;margin:clamp(30px,3.6vw,44px) auto 0;text-align:left}
.obr .kar{padding:clamp(22px,3vw,34px)}
.obr-g{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-bottom:clamp(16px,2vw,22px)}
.obr-g .n3{margin:0}
.obr-g .mal{font-size:13.5px;color:var(--ink3)}
.pol{min-width:0}
.r2{display:grid;gap:12px;grid-template-columns:1fr 1fr;margin-bottom:12px}
@media(max-width:560px){.r2{grid-template-columns:1fr}}
.pol{margin-bottom:12px}
label{display:block;margin-bottom:6px;font-size:12.5px;font-weight:600;letter-spacing:.01em;color:var(--ink2)}
input,textarea{width:100%;background:rgba(255,255,255,.72);border:1px solid var(--rub2);
  border-radius:10px;color:var(--ink);font:400 15.5px/1.45 "Hanken Grotesk",sans-serif;
  padding:11px 13px;min-height:46px;transition:border-color .18s,box-shadow .18s,background .18s;
  /* Odmak od ljepljivog zaglavlja (63 px) i od ljepljive donje trake (67 px)
     kad tipkovnica gurne polje na rub okna. Vrijedi i za skok iz `focus()`. */
  scroll-margin-top:78px;scroll-margin-bottom:84px}
input::placeholder,textarea::placeholder{color:#a3a3ab}
input:hover,textarea:hover{border-color:rgba(10,16,48,.26)}
input:focus,textarea:focus{outline:0;border-color:var(--ink);background:#fff;
  box-shadow:0 0 0 3px rgba(10,16,48,.08)}
textarea{min-height:70px;resize:vertical}
.bs{width:100%;min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--ink);color:#fff;border:1px solid var(--ink);border-radius:999px;cursor:pointer;
  font:600 15px/1 "Hanken Grotesk",sans-serif;margin-top:6px;
  transition:background .2s var(--tr),transform .2s var(--tr)}
.bs:hover{background:#171F4A;transform:translateY(-1px)}
.bs[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.bs2{background:rgba(255,255,255,.7);color:var(--ink);border-color:var(--rub2);margin-top:9px}
.bs2:hover{background:#fff}
/* med — zamka za botove, čovjek je ne vidi */
.med{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ——— napomena o neželjenoj pošti ———
   Ista rečenica stoji na svakom mjestu gdje čekamo poruku. Mirna, ne alarmna:
   ovo nije greška nego uputa, pa nema ni crvene ni ikone upozorenja. */
.spam{margin:14px 0 6px;padding:13px 14px 13px 42px;border-radius:12px;position:relative;
  background:#FFF7E6;border:1px solid #F0C36D;
  font-size:14px;line-height:1.6;color:#5A4520;font-weight:500}
.spam::before{content:"✉";position:absolute;left:14px;top:12px;font-size:17px;line-height:1.2;color:#B07D1A}
.spam b{color:#3D2E10}
@media (prefers-color-scheme: dark){
  .spam{background:rgba(240,195,109,.12);border-color:rgba(240,195,109,.35);color:#F0DDB8}
  .spam b{color:#FFF1D0}
}

/* ——— neobavezna lozinka u obrascu ——— */
.pol--loz{position:relative;margin-top:14px;padding-top:14px;border-top:1px solid var(--rub)}
/* „Prikaži lozinku" je natpis, ne ikona oka: ikona bez teksta se na obrascu
   redovito čita kao „obriši polje". Sjedi u retku s natpisom polja.
   ⚠ Natpis polja MORA imati rezerviran desni prostor: na 390 px se
   „Odaberi lozinku za svoj panel (nije obavezno)" razvuče preko cijele širine i
   prijeđe preko gumba — izmjereno, natpis 41–349 px, gumb 265–349 px. */
.pol--loz label{padding-right:92px}
.pol--loz .oko{position:absolute;top:14px;right:0;background:0;border:0;padding:2px 3px;
  cursor:pointer;font:600 12px/1.2 "Hanken Grotesk",sans-serif;color:var(--ink3);min-height:24px}
.pol--loz .oko:hover{color:var(--ink)}
.pol--loz .oko:focus-visible{outline:2px solid var(--nag);outline-offset:2px;border-radius:6px}
.pol--loz .oko[aria-pressed=true]{color:var(--nag2)}
/* Snaga: dva stanja, ne pet. „Srednje" ne kaže ni smije li dalje ni ne smije. */
.snaga{display:flex;align-items:center;gap:9px;margin-top:9px}
.snaga[hidden]{display:none}
.snaga i{display:block;flex:1;height:4px;border-radius:999px;background:var(--rub2);
  position:relative;overflow:hidden}
.snaga i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--sirina,0%);
  border-radius:999px;background:var(--boja,var(--ink3));transition:width .18s var(--tr)}
.snaga span{flex:none;font:600 12px/1.2 "Hanken Grotesk",sans-serif;color:var(--ink3)}
.snaga.dobra span{color:var(--nag2)}
.nap--loz{margin-top:9px;font-size:12.5px}
/* ——— pristanak na uvjete ———
   ⚠ Ovo je pravni tekst, ne sitni otisak: 13,5 px i puna tinta odlomka, ne
   siva. Kvadratić je 24 px (dodirna meta), a cijeli je natpis <label> pa se
   pogađa i u tekst. Ne smije se skratiti ni sakriti „radi urednijeg obrasca". */
.uvj{display:flex;align-items:flex-start;gap:11px;margin:16px 0 4px;cursor:pointer;
  font-size:13.5px;line-height:1.5;color:var(--ink2)}
/* ⚠ Opće pravilo `input,textarea` gore nosi min-height:46px i padding — bez
   ovog poništavanja kvačica ispadne 24×46, razvučena. */
.uvj input{flex:none;width:24px;height:24px;min-height:0;padding:0;margin:1px 0 0;
  border-radius:5px;accent-color:var(--nag);cursor:pointer}
.uvj a{color:var(--nag2);text-decoration:underline;text-underline-offset:2px}
.uvj a:hover{color:var(--ink)}
.uvj input:focus-visible{outline:2px solid var(--nag);outline-offset:2px}
/* Nakon pokušaja slanja bez kvačice — poruka sama nije dovoljna, oko mora
   naći gdje je stalo. */
.uvj--fali{color:var(--ink);border-radius:10px;outline:2px solid var(--rub2);
  outline-offset:6px}
.msg{margin-top:13px;padding:11px 14px;font-size:14px;display:none;border-radius:10px;border:1px solid}
.msg.v{display:block}
.ok{background:rgba(91,52,214,.07);border-color:rgba(91,52,214,.28);color:#40219E}
.no{background:rgba(10,16,48,.04);border-color:var(--rub2);color:var(--ink2)}
.nap{font-size:13px;color:var(--ink3);margin:14px 0 0;line-height:1.55}

/* ——————————————————————————————————————————————————————
   9. TRAKA BROJEVA
   —————————————————————————————————————————————————————— */
.trk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--rub);border:1px solid var(--rub);border-radius:var(--r);overflow:hidden}
@media(min-width:860px){.trk{grid-template-columns:repeat(4,minmax(0,1fr))}}
.trk>div{background:linear-gradient(var(--stk1),var(--stk2));padding:clamp(20px,2.6vw,28px);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.trk b{display:block;font-family:"Schibsted Grotesk",sans-serif;font-weight:800;
  font-size:clamp(1.9rem,4vw,2.6rem);line-height:1;letter-spacing:-.035em;margin-bottom:8px}
/* --ink3 na staklenoj ćeliji daje 3,9:1 (izmjereno) — ispod praga 4,5:1 za
   tekst od 13,5 px. --ink2 na istoj plohi daje 7,6:1. */
.trk span{display:block;font-size:13.5px;line-height:1.45;color:var(--ink2);max-width:24ch}

/* ——————————————————————————————————————————————————————
   10. KARTICE U REŠETKI (problem, rješenje, koraci, djelatnosti)
   —————————————————————————————————————————————————————— */
.res{display:grid;gap:clamp(14px,1.6vw,20px);grid-template-columns:1fr}
@media(min-width:720px){.res--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:720px){.res--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.res--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:640px){.res--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.res .kar{display:flex;flex-direction:column;gap:9px}
.brj{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none;
  border-radius:50%;background:rgba(91,52,214,.10);color:#4A29B4;
  font:700 12.5px/1 "Schibsted Grotesk",sans-serif;margin-bottom:4px}
.res p{color:var(--ink2);font-size:15px;line-height:1.6}

/* ——————————————————————————————————————————————————————
   11. PRIMJERI
   —————————————————————————————————————————————————————— */
.prim{display:grid;gap:clamp(22px,3vw,40px)}
@media(min-width:880px){.prim{grid-template-columns:1.5fr 1fr;align-items:end}}
.prim figure{margin:0;min-width:0}
.prim a{display:block;text-decoration:none;transition:transform .35s var(--tr)}
.prim a:hover{transform:translateY(-5px)}
.prim figcaption{margin-top:14px;font-size:14px;color:var(--ink3)}
.prim figcaption b{display:block;font-weight:700;color:var(--ink);margin-bottom:2px;font-size:15px}
.tel-s{max-width:224px;margin:0 auto}

/* ——————————————————————————————————————————————————————
   12. DJELATNOSTI — mreža poveznica
   —————————————————————————————————————————————————————— */
.djl{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,232px),1fr))}
.djl a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:linear-gradient(var(--stk1),var(--stk2));border:1px solid rgba(255,255,255,.75);
  box-shadow:0 0 0 1px var(--rub);border-radius:12px;padding:15px 17px;text-decoration:none;
  color:var(--ink);font-size:15px;font-weight:600;letter-spacing:-.006em;min-width:0;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:transform .2s var(--tr),box-shadow .2s var(--tr)}
.djl a:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--rub2),var(--sjena)}
.djl a span:first-child{min-width:0;overflow-wrap:anywhere}
.djl .str{color:var(--ink3);flex:none}

/* pilule s primjerima usluga i pojmova za fotografije */
.cip{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.cip span{display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:999px;
  background:rgba(255,255,255,.72);border:1px solid var(--rub);color:var(--ink2);
  font-size:13.5px;font-weight:500}

/* ——————————————————————————————————————————————————————
   13. CJENIK
   —————————————————————————————————————————————————————— */
.cj{display:grid;gap:clamp(14px,1.6vw,20px)}
@media(min-width:900px){.cj{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}}
.pl{display:flex;flex-direction:column;position:relative}
.pl.top{box-shadow:0 0 0 1.5px var(--ink),var(--sjena2)}
@media(min-width:900px){.pl.top{margin-top:-16px;padding-top:calc(clamp(20px,2.6vw,30px) + 16px)}}
.pl .oz2{position:absolute;top:12px;right:clamp(20px,2.6vw,30px);font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--ink);
  border-radius:999px;padding:4px 10px}
.pl h3{font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3)}
.cn{font-family:"Schibsted Grotesk",sans-serif;font-weight:800;font-size:clamp(2.4rem,5vw,3.1rem);
  line-height:1;letter-spacing:-.04em;margin:12px 0 0}
.cn small{font-size:13px;font-weight:600;letter-spacing:0;color:var(--ink3);margin-left:7px;
  font-family:"Hanken Grotesk",sans-serif}
.kr{font-size:13px;font-weight:600;color:var(--ink2);border-top:1px solid var(--rub);
  margin-top:15px;padding-top:13px}
.pl ul{list-style:none;padding:0;margin:14px 0 22px;font-size:14.5px;color:var(--ink2);flex:1}
.pl li{padding:7px 0 7px 22px;position:relative}
.pl li::before{content:"";position:absolute;left:2px;top:.72em;width:9px;height:9px;border-radius:50%;
  background:rgba(91,52,214,.14);box-shadow:inset 0 0 0 1.5px rgba(91,52,214,.34)}
.pl b{color:var(--ink);font-weight:700}
.pl .b1,.pl .b2{width:100%;height:46px}

/* račun: alati i krediti */
.rac{display:grid;gap:clamp(16px,2vw,22px);margin-top:clamp(30px,3.4vw,44px)}
@media(min-width:900px){.rac{grid-template-columns:1.05fr .95fr}}
.rac .n4{margin-bottom:6px}
.rac>div>p{color:var(--ink2);font-size:14.5px;margin:0 0 16px;max-width:52ch}
.tab{width:100%;border-collapse:collapse;font-size:14.5px}
.tab td{padding:10px 0;border-bottom:1px solid var(--rub);color:var(--ink2);vertical-align:baseline}
.tab td:last-child{text-align:right;color:var(--ink);white-space:nowrap;font-weight:600;
  font-variant-numeric:tabular-nums}
/* zbrojni redak samo u tablici alata — u tablici kredita zadnji redak
   nije zbroj nego obična stavka */
.tab.zbr tr:last-child td{border-bottom:0;border-top:1.5px solid var(--rub2);color:var(--ink);
  font-weight:700;padding-top:13px}
.dop{font-size:14px;color:var(--ink2);margin:16px 0 0;line-height:1.6}
.dop b{color:var(--ink);font-weight:700}

/* ——————————————————————————————————————————————————————
   14. JAMSTVO
   —————————————————————————————————————————————————————— */
.jm{display:grid;gap:26px;align-items:center}
@media(min-width:860px){.jm{grid-template-columns:minmax(0,1fr) 176px;gap:clamp(30px,4vw,60px)}}
.jm p{color:var(--ink2);max-width:58ch;margin:16px 0 0}
.pec{width:150px;height:150px;border-radius:50%;display:grid;place-content:center;text-align:center;
  background:linear-gradient(var(--stk1),var(--stk2));border:1px solid rgba(255,255,255,.8);
  box-shadow:0 0 0 1px var(--rub),var(--sjena);color:var(--ink3);padding:16px;
  font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;justify-self:start}
.pec strong{display:block;font-family:"Schibsted Grotesk",sans-serif;font-weight:800;font-size:3rem;
  line-height:1;letter-spacing:-.04em;margin-bottom:4px;color:var(--ink)}
@media(min-width:860px){.pec{justify-self:end}}

/* ——————————————————————————————————————————————————————
   15. PITANJA
   —————————————————————————————————————————————————————— */
.faq{display:grid;gap:10px}
details{background:linear-gradient(var(--stk1),var(--stk2));border:1px solid rgba(255,255,255,.75);
  box-shadow:0 0 0 1px var(--rub);border-radius:12px;overflow:hidden;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
summary{cursor:pointer;list-style:none;padding:17px 52px 17px 20px;position:relative;
  font-family:"Schibsted Grotesk",sans-serif;font-weight:700;font-size:clamp(.99rem,1.5vw,1.08rem);
  letter-spacing:-.012em;transition:color .18s}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--ink2)}
summary::after{content:"";position:absolute;right:22px;top:50%;width:13px;height:1.5px;
  background:currentColor;transform:translateY(-50%);border-radius:2px}
summary::before{content:"";position:absolute;right:28px;top:50%;width:1.5px;height:13px;
  background:currentColor;transform:translateY(-50%);border-radius:2px;transition:transform .28s var(--tr)}
details[open] summary::before{transform:translateY(-50%) rotate(90deg)}
details p{color:var(--ink2);font-size:15px;margin:0;padding:0 52px 19px 20px;max-width:66ch}

/* ——————————————————————————————————————————————————————
   16. ZAVRŠNI POZIV I PODNOŽJE
   —————————————————————————————————————————————————————— */
.zv{text-align:center}
.zv .n2{max-width:20ch;margin:0 auto}
.zv .uvd{margin-left:auto;margin-right:auto}
.cta{display:flex;gap:11px;flex-wrap:wrap;justify-content:center;margin-top:clamp(24px,3vw,34px)}
.ft{border-top:1px solid var(--rub);padding:clamp(34px,4vw,52px) 0 clamp(46px,3.4vw,40px);
  background:rgba(255,255,255,.5)}
.ftg{display:grid;gap:26px;margin-bottom:28px}
@media(min-width:760px){.ftg{grid-template-columns:1.3fr 1fr 1fr}}
.ftg h4{font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:12px}
.ftg ul{list-style:none;padding:0;margin:0;display:grid;gap:2px}
.ftg a{color:var(--ink2);text-decoration:none;font-size:14.5px;display:inline-block;padding:6px 0}
.ftg a:hover{color:var(--ink)}
.ft .mk img{height:44px}
.ftm{font-size:14.5px;color:var(--ink3);max-width:38ch;margin-top:10px}
.fd{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:center;
  border-top:1px solid var(--rub);padding-top:18px;font-size:13.5px;color:var(--ink3)}
.fd a{color:var(--ink2);text-decoration:none;display:inline-block;padding:5px 0}
.fd a:hover{color:var(--ink)}
/* pravne poveznice u donjoj traci podnožja — moraju biti na svakoj stranici */
.fdp{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
.fdp a{text-decoration:none}
.fdp a:hover,.fdp button:hover{text-decoration:underline;text-underline-offset:3px}
/* „Postavke kolačića“ je gumb, ne poveznica — ne vodi nikamo, otvara traku.
   Izgleda kao ostale stavke jer je korisniku to ista vrsta stvari. */
.fdp button{background:0;border:0;padding:5px 0;margin:0;cursor:pointer;
  font:inherit;font-size:13.5px;color:var(--ink2);line-height:inherit}

/* ——————————————————————————————————————————————————————
   17. LJEPLJIVA TRAKA NA MOBITELU
   —————————————————————————————————————————————————————— */
.mob{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;gap:9px;padding:9px var(--mm);
  background:rgba(252,252,251,.9);border-top:1px solid var(--rub);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
@media(min-width:768px){.mob{display:none}}
.mob .b1{flex:1;height:48px}
.mob .b2{flex:0 0 52px;height:48px;padding:0}
.pd{padding-bottom:66px}
@media(min-width:768px){.pd{padding-bottom:0}}

/* ——————————————————————————————————————————————————————
   18. OKVIR PREGLEDNIKA
   Zajednički za snimke nadzorne ploče i za mockupe izrađenih stranica.
   Omjer je 16:9 jer su snimke ploče 1,78–1,80, a stranice 1,60 — na 16:9
   se stranici odreže donjih ~10 %, što je ionako podnožje.
   `aspect-ratio` ovdje drži samo zato što slika NEMA min-height iz rešetke:
   spremnik je blok, ne stavka rešetke koja se rasteže.
   —————————————————————————————————————————————————————— */
.okv{position:relative;border-radius:11px;overflow:hidden;background:#fff;
  border:1px solid var(--rub);box-shadow:0 12px 30px -22px rgba(10,16,48,.45);
  transition:box-shadow .3s var(--tr)}
.okv::before{content:"";display:block;height:26px;
  background:linear-gradient(#fbfbfa,#f1f1ef);border-bottom:1px solid var(--rub)}
.okv::after{content:"";position:absolute;left:12px;top:10px;width:6px;height:6px;border-radius:50%;
  background:rgba(10,16,48,.15);box-shadow:10px 0 0 rgba(10,16,48,.15),20px 0 0 rgba(10,16,48,.15)}
.okv img{width:100%;aspect-ratio:16/9;min-height:0;object-fit:cover;object-position:top center;
  background:#fff}

/* ——————————————————————————————————————————————————————
   19. TIJEK — tri ekrana kroz koja korisnik prođe
   —————————————————————————————————————————————————————— */
.tij{display:grid;gap:clamp(14px,1.6vw,20px);grid-template-columns:1fr}
@media(min-width:820px){.tij{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tij .kar{display:flex;flex-direction:column;gap:11px;padding:clamp(14px,1.5vw,18px)}
.tij .brj{margin:5px 0 0}
.tij h3{margin:0}
.tij p{color:var(--ink2);font-size:15px;line-height:1.6;margin:0 0 4px}

/* ——————————————————————————————————————————————————————
   20. VREMENSKA CRTA — vodoravna na stolnom, okomita na mobitelu
   —————————————————————————————————————————————————————— */
.crt{list-style:none;margin:0;padding:0;display:grid;gap:24px;position:relative}
.crt::before{content:"";position:absolute;left:5px;top:10px;bottom:10px;width:1.5px;
  background:linear-gradient(rgba(10,16,48,.04),var(--rub2) 12%,var(--rub2) 88%,rgba(10,16,48,.04))}
.crt li{position:relative;padding-left:32px}
.crt li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:12px;border-radius:50%;
  background:var(--pap);border:1.5px solid var(--ink);box-shadow:0 0 0 4px var(--pap)}
.crt li:last-child::before{background:var(--ink)}
@media(min-width:900px){
  .crt{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
  .crt::before{left:0;right:0;top:11px;bottom:auto;width:auto;height:1.5px;
    background:linear-gradient(90deg,rgba(10,16,48,.04),var(--rub2) 10%,var(--rub2) 90%,rgba(10,16,48,.04))}
  .crt li{padding-left:0;padding-top:40px}
  .crt li::before{top:5px}
}
.crt-t{display:block;font-family:"Schibsted Grotesk",sans-serif;font-weight:800;
  font-size:clamp(1.3rem,2.3vw,1.7rem);letter-spacing:-.035em;line-height:1;margin-bottom:9px;
  font-variant-numeric:tabular-nums}
.crt h3{margin:0 0 6px}
.crt p{color:var(--ink2);font-size:14.5px;line-height:1.58;margin:0;max-width:32ch}

/* ——————————————————————————————————————————————————————
   21. GALERIJA IZGLEDA — šest struka, svaka vodi na živu stranicu
   —————————————————————————————————————————————————————— */
.gal{display:grid;gap:clamp(16px,2.2vw,26px);grid-template-columns:1fr}
@media(min-width:640px){.gal{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.gal{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gal a{display:block;text-decoration:none;color:inherit;min-width:0;
  transition:transform .3s var(--tr)}
.gal a:hover{transform:translateY(-4px)}
.gal a:hover .okv{box-shadow:0 22px 44px -24px rgba(10,16,48,.5)}
.gal figure{margin:0;min-width:0}
.gal figcaption{margin-top:13px;display:flex;align-items:baseline;justify-content:space-between;
  gap:10px 14px;flex-wrap:wrap}
.gal figcaption b{font-family:"Schibsted Grotesk",sans-serif;font-weight:700;font-size:15px;
  letter-spacing:-.014em;color:var(--ink)}
.gal .gs{font-size:13px;color:var(--ink3)}
.galn{margin:clamp(26px,3.2vw,40px) 0 0;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:center;gap:12px 18px;text-align:center}
.galn span{font-size:14.5px;color:var(--ink3)}

/* ——————————————————————————————————————————————————————
   22. RAST — što se s nadzornom pločom radi poslije izrade
   —————————————————————————————————————————————————————— */
.rast{display:grid;gap:clamp(14px,1.6vw,20px)}
.rast-v{display:grid;gap:clamp(22px,3vw,44px);align-items:center}
@media(min-width:900px){.rast-v{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.rast-v p{color:var(--ink2);font-size:15.5px;line-height:1.62;margin:14px 0 0;max-width:48ch}
.rast-v ul{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:9px;
  font-size:14.5px;color:var(--ink2)}
.rast-v li{position:relative;padding-left:22px}
.rast-v li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;border-radius:50%;
  background:rgba(91,52,214,.14);box-shadow:inset 0 0 0 1.5px rgba(91,52,214,.34)}
.rast-t{display:grid;gap:clamp(14px,1.6vw,20px);grid-template-columns:1fr}
@media(min-width:760px){.rast-t{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rast-t .kar{display:flex;flex-direction:column;gap:11px}
.rast-t h3{margin:0}
.rast-t p{color:var(--ink2);font-size:14.5px;line-height:1.58;margin:0}
/* Zadnji element kartice (pilule ili snimka) sjeda na dno, pa su naslovi
   svih triju kartica poravnati na vrhu bez obzira ima li kartica sliku. */
.rast-t .cip,.rast-t .okv{margin-top:auto}
.rast-t .cip{padding-top:6px}

/* ——————————————————————————————————————————————————————
   23. POKRET — suzdržan, i uvijek s prekidačem
   —————————————————————————————————————————————————————— */
@keyframes ulaz{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes dizi{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .hero>.o>*{animation:ulaz .78s var(--tr) both}
  .hero>.o>*:nth-child(2){animation-delay:.06s}
  .hero>.o>*:nth-child(3){animation-delay:.12s}
  .hero>.o>*:nth-child(4){animation-delay:.18s}
  .hero>.o>*:nth-child(5){animation-delay:.24s}
  .hero>.o>*:nth-child(6){animation-delay:.3s}
  @supports (animation-timeline:view()){
    .otkr{animation:dizi linear both;animation-timeline:view();animation-range:entry 0% entry 38%}
  }
}

/* ——————————————————————————————————————————————————————
   NA VRH — pojavi se nakon 600 px klizanja. Crna pilula kao svi gumbi.
   —————————————————————————————————————————————————————— */
.navrh{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));
  z-index:70;width:44px;height:44px;border-radius:999px;border:1px solid transparent;
  background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 10px 26px -12px rgba(10,16,48,.55);opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .25s var(--tr),transform .25s var(--tr),background .2s var(--tr)}
.navrh.vidljiv{opacity:1;transform:none;pointer-events:auto}
.navrh:hover{background:#171F4A}

/* ⚠ Gumb „na vrh" i ljepljiva donja traka dijele isti kut. Izmjereno na 390 px:
   preklop 42×41 px preko glavnog gumba — tap na CTA završio bi skokom na vrh.
   Traka postoji samo ispod 768 px, pa se ondje gumb diže iznad nje. */
@media(max-width:767px){
  .navrh{bottom:calc(66px + max(9px, env(safe-area-inset-bottom)))}
}

/* godišnja cijena ispod mjesečne u cjeniku */
.pl .god{font-size:13px;font-weight:600;color:var(--nag);margin:2px 0 10px}

/* ekran uspjeha nakon izrade: stranica + ulaz u panel, bez oslanjanja na e-poštu */
.gotovo-kartica{display:flex;flex-direction:column;gap:12px;text-align:center;padding:8px 0}
.gotovo-kartica h3{font-family:"Schibsted Grotesk",sans-serif;font-size:22px;margin:0 0 4px}
.gotovo-kartica .bs{width:100%}

/* ——— ekran izrade: drži pažnju dok se stranica gradi (obično 3–5 min) ——— */
.iz-zastor{position:fixed;inset:0;z-index:9000;background:rgba(7,10,26,.96);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:20px;animation:iz-uplov .35s var(--tr)}
@keyframes iz-uplov{from{opacity:0}to{opacity:1}}
.iz-kut{width:100%;max-width:440px;box-sizing:border-box;background:#0E1440;
  border:1px solid rgba(255,255,255,.09);border-radius:20px;
  padding:28px 26px;text-align:center;color:#EAF0FF;box-shadow:0 30px 80px rgba(0,0,0,.5);
  max-height:calc(100dvh - 32px);overflow:auto}
/* boja MORA biti na samom naslovu — tema ima direktno h3 pravilo koje pobjeđuje nasljeđivanje */
.iz-naslov{font-family:"Schibsted Grotesk",sans-serif;font-size:21px;margin:14px 0 6px;color:#fff}
.iz-post{font-family:"Schibsted Grotesk",sans-serif;font-size:38px;font-weight:700;letter-spacing:-.02em}
.iz-post .iz-broj{font-variant-numeric:tabular-nums}
/* Zadnja faza: postotak koji stoji na 90-i-nešto čita se kao „zaglavilo se".
   Umjesto broja ide rečenica, pa je manja i u dva retka na uskom oknu. */
.iz-post--kraj{font-size:20px;line-height:1.3;font-weight:800;color:#fff}
.iz-pruga{height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin:10px 0 18px}
.iz-punjenje{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#4C7DFF,#38E1C6);
  transition:width .4s var(--tr);position:relative}
/* neodređeno kretanje — pokazuje da se radi, bez lažne brojke */
.iz-pruga--kraj .iz-punjenje{animation:iz-dise 2.2s ease-in-out infinite}
@keyframes iz-dise{0%,100%{opacity:.55}50%{opacity:1}}
.iz-preostalo{font-size:13px;color:rgba(234,240,255,.6);margin:-8px 0 16px;min-height:1.2em;
  font-variant-numeric:tabular-nums}
.iz-punjenje::after{content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  animation:iz-sjaj 1.6s linear infinite}
@keyframes iz-sjaj{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.iz-koraci{list-style:none;margin:0;padding:0;text-align:left;display:grid;gap:7px}
.iz-koraci li{font-size:13.5px;color:rgba(234,240,255,.38);padding-left:24px;position:relative;transition:color .4s var(--tr)}
.iz-koraci li::before{content:"";position:absolute;left:2px;top:4px;width:12px;height:12px;border-radius:50%;
  border:2px solid rgba(234,240,255,.22);transition:border-color .4s var(--tr),background .4s var(--tr)}
.iz-koraci li.aktivno{color:#fff}
.iz-koraci li.aktivno::before{border-color:#38E1C6;animation:iz-puls 1.1s ease-in-out infinite}
@keyframes iz-puls{0%,100%{box-shadow:0 0 0 0 rgba(56,225,198,.5)}50%{box-shadow:0 0 0 5px rgba(56,225,198,0)}}
.iz-koraci li.proslo{color:rgba(234,240,255,.75)}
.iz-koraci li.proslo::before{background:#38E1C6;border-color:#38E1C6;
  content:"✓";color:#07101F;font-size:9px;line-height:12px;text-align:center;font-weight:800}
.iz-nap{font-size:12.5px;color:rgba(234,240,255,.55);margin:16px 0 0}
/* ——— činjenice koje se vrte dok stranica nastaje ———
   Čekanje traje 3–5 min; ovo ga popunjava i usput govori zašto je stranica
   uopće važna. `min-height` je izmjeren na najduljoj rečenici (njemački, 390 px)
   pa se kartica ne trza pri svakoj zamjeni. */
.iz-cinj{margin:16px 0 0;padding:13px 14px;text-align:left;border-radius:14px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);
  min-height:118px;box-sizing:border-box;
  transition:opacity .3s var(--tr),transform .3s var(--tr)}
/* Kartica je uža što je okno uže, pa ista rečenica ondje uzme više redaka.
   Izmjereno na svih 33 rečenice (hr+en+de): 115 px na 440 px kartice, 135 px na
   414 px okna, 155 px na 390 i 360 px. Bez ove zalihe gumb ispod poskakuje. */
@media(max-width:479px){.iz-cinj{min-height:140px}}
@media(max-width:399px){.iz-cinj{min-height:158px}}
/* Na niskim mobilnim oknima (360×740, 375×667) kartica bi s činjenicama
   prelazila u pomicanje. Ukrasni okvir preglednika (158 px, aria-hidden) tada
   ustupa mjesto — on ništa ne govori, činjenice govore. */
@media(max-width:479px) and (max-height:820px){.iz-okvir{display:none}}
/* Vrlo niska okna (iPhone SE, 375×667): još 20-ak px iz razmaka kartice. */
@media(max-width:479px) and (max-height:700px){
  .iz-kut{padding:22px 20px}
  .iz-cinj{margin-top:12px}
  .iz-nap{margin-top:12px}}
.iz-cinj--odlazi{opacity:0;transform:translateY(-6px)}
.iz-cinj-t{margin:0;font-size:13.5px;line-height:1.5;color:#EAF0FF}
.iz-cinj-i{margin:8px 0 0;font-size:11px;letter-spacing:.02em;color:rgba(234,240,255,.45)}
/* animirani "preglednik" koji slaže stranicu */
.iz-okvir{border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#0A1030}
.iz-traka-okvira{display:flex;gap:5px;padding:8px 10px;background:rgba(255,255,255,.05)}
.iz-traka-okvira i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18)}
.iz-platno{padding:12px;display:grid;gap:8px;grid-template-columns:repeat(3,1fr)}
.iz-crta{height:8px;border-radius:4px;background:rgba(255,255,255,.1);grid-column:1/-1;
  position:relative;overflow:hidden;opacity:0;animation:iz-rast .5s var(--tr) forwards}
.iz-crta::after{content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);
  animation:iz-sjaj 2.2s linear infinite}
.iz-c1{width:55%;animation-delay:.3s}.iz-c2{width:85%;animation-delay:.9s}
.iz-c3{width:70%;animation-delay:3.2s}.iz-c4{width:45%;animation-delay:3.8s}
.iz-blok{height:44px;border-radius:8px;background:linear-gradient(135deg,rgba(76,125,255,.35),rgba(56,225,198,.25));
  opacity:0;animation:iz-rast .6s var(--tr) forwards}
.iz-b1{animation-delay:1.6s}.iz-b2{animation-delay:2.1s}.iz-b3{animation-delay:2.6s}
@keyframes iz-rast{from{opacity:0;transform:translateY(8px) scale(.95)}to{opacity:1;transform:none}}
/* kartica uspjeha */
.iz-kvaka{width:64px;height:64px;margin:4px auto 0;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#4C7DFF,#38E1C6);font-size:30px;font-weight:800;color:#07101F;
  animation:iz-skok .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes iz-skok{from{transform:scale(0)}to{transform:scale(1)}}
/* vlastiti gumbi — .bs je var(--ink) na tamnom = nevidljiv, pa sve deklariramo sami */
.iz-gumb{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;
  margin-top:12px;box-sizing:border-box;border-radius:999px;text-decoration:none;
  font:700 15px/1 "Hanken Grotesk",sans-serif;
  background:linear-gradient(135deg,#4C7DFF,#38E1C6);color:#07101F;border:none;
  transition:transform .2s var(--tr),box-shadow .2s var(--tr)}
.iz-gumb:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(56,225,198,.3)}
.iz-gumb2{background:transparent;border:1.5px solid rgba(255,255,255,.28);color:#EAF0FF}
.iz-gumb2:hover{background:rgba(255,255,255,.06);box-shadow:none}
/* „Račun ti je otvoren" — odvojen okvir, ne sitni tekst uz ostalo: to je jedina
   rečenica na kartici koja govori o nečemu što korisnik još ne zna da ima. */
.iz-racun{margin:18px 0 0;padding:14px 15px;text-align:left;border-radius:14px;
  background:rgba(76,125,255,.1);border:1px solid rgba(120,165,255,.26);
  font-size:13.5px;line-height:1.55;color:#EAF0FF}
.iz-racun b{color:#fff}
.iz-racun-mail{display:inline-block;font-weight:700;color:#8FE9DA;word-break:break-all}
.iz-racun-vez{display:block;margin-top:8px;color:#38E1C6;font-weight:700;
  text-decoration:none;word-break:break-all;min-height:24px}
.iz-racun-vez:hover{text-decoration:underline}
@media (prefers-reduced-motion:reduce){.iz-punjenje::after,.iz-crta::after{animation:none}
  .iz-koraci li.aktivno::before{animation:none}
  .iz-pruga--kraj .iz-punjenje{animation:none}
  /* Činjenice se i tada mijenjaju, ali bez prijelaza — skripta preskoči
     blijeđenje, ovo je pojas i tregeri za slučaj da se klasa ipak postavi. */
  .iz-cinj{transition:none}}

/* preklopnik mjesečno/godišnje na cjeniku — prebacuje se čistim CSS-om,
   obje varijante su u DOM-u pa jezični sloj (data-hr/en) radi netaknut */
.prekl-lp{display:flex;gap:4px;width:max-content;margin:0 auto 26px;padding:4px;
  border:1px solid var(--rub2);border-radius:999px;background:rgba(255,255,255,.6)}
.pg{border:none;background:transparent;min-height:44px;padding:0 20px;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  font:600 14px/1 "Hanken Grotesk",sans-serif;color:var(--ink3);transition:background .2s,color .2s}
.pg.aktivan{background:var(--ink);color:#fff}
.samo-god{display:none}
.cj.godisnje span.samo-mj,.cj.godisnje div.samo-mj{display:none}
.cj.godisnje span.samo-god{display:inline}
.cj.godisnje div.samo-god{display:block}

/* ——————————————————————————————————————————————————————
   20. PRAVNE STRANICE (/pravno/)
   Dug tekst, jedan stupac. Naslovi nose vlastitu boju jer bi ih inače
   naslijeđeno pravilo za h2/h3 povuklo u tinte koje se na dugom tekstu
   čitaju teže od --ink2.
   —————————————————————————————————————————————————————— */
.prv{max-width:74ch;margin:0 auto}
.prv .nap-nacrt{display:flex;gap:10px;align-items:flex-start;margin:0 0 clamp(26px,3vw,36px);
  padding:14px 16px;border:1px solid var(--rub2);border-radius:12px;
  background:rgba(91,52,214,.05);color:var(--ink2);font-size:14px;line-height:1.55}
.prv h2{font-family:"Schibsted Grotesk",sans-serif;font-size:clamp(1.18rem,2.2vw,1.42rem);
  font-weight:800;letter-spacing:-.015em;line-height:1.25;color:var(--ink);
  margin:clamp(34px,4vw,48px) 0 12px;scroll-margin-top:80px}
.prv h3{font-family:"Schibsted Grotesk",sans-serif;font-size:1.02rem;font-weight:700;
  color:var(--ink);margin:24px 0 8px}
.prv p{color:var(--ink2);font-size:16px;line-height:1.68;margin:0 0 14px}
.prv ul,.prv ol{color:var(--ink2);font-size:16px;line-height:1.68;margin:0 0 16px;padding-left:22px}
.prv li{margin-bottom:8px}
.prv b,.prv strong{color:var(--ink);font-weight:700}
.prv a{color:var(--nag2);text-decoration:underline;text-underline-offset:3px}
.prv a:hover{color:var(--ink)}
.prv .kar{padding:clamp(18px,2.4vw,24px);margin:0 0 20px}
.prv .kar p:last-child{margin-bottom:0}
.prv .mal{font-size:13.5px;color:var(--ink3);line-height:1.6}
.prv table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14.5px}
.prv th,.prv td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--rub);
  color:var(--ink2);vertical-align:top}
.prv th{color:var(--ink);font-weight:700;font-size:13px;letter-spacing:.03em;text-transform:uppercase}
.prv .tblo{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* sadržaj na vrhu */
.sadr{display:grid;gap:7px;margin:0 0 clamp(30px,3.4vw,42px);padding:0;list-style:none}
.sadr a{color:var(--ink2);text-decoration:none;font-size:14.5px}
.sadr a:hover{color:var(--ink);text-decoration:underline}
/* zaglavlje pravne stranice */
.prv-zag{margin-bottom:clamp(24px,3vw,34px)}
.prv-zag .n1{font-size:clamp(1.9rem,4.2vw,2.9rem)}
.prv-dat{margin-top:14px;font-size:13.5px;color:var(--ink3)}

/* ——————————————————————————————————————————————————————
   21. TRAKA ZA PRIVOLU (kolačići)
   Dolje, iznad ljepljive mobilne trake (.mob je z-index 70), pa ovdje 80.
   Dok privola nije dana, marketinške skripte se ne učitavaju — traka je
   jedino mjesto koje tu odluku donosi.
   —————————————————————————————————————————————————————— */
.kol{position:fixed;left:0;right:0;bottom:0;z-index:80;
  padding:16px var(--mm) calc(16px + env(safe-area-inset-bottom));
  background:rgba(252,252,251,.96);border-top:1px solid var(--rub2);
  box-shadow:0 -18px 44px -30px rgba(10,16,48,.5);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transform:translateY(110%);transition:transform .4s var(--tr)}
.kol.vidljiv{transform:none}
.kol-o{max-width:1200px;margin:0 auto;display:grid;gap:14px}
@media(min-width:900px){.kol-o{grid-template-columns:1fr auto;align-items:center;gap:24px}}
.kol-t{font-size:14px;line-height:1.6;color:var(--ink2);margin:0;max-width:74ch}
.kol-t a{color:var(--nag2);text-decoration:underline;text-underline-offset:3px}
.kol-g{display:flex;gap:9px;flex-wrap:wrap}
.kol-g button{height:44px;padding:0 20px;border-radius:999px;cursor:pointer;
  font:700 14px/1 "Hanken Grotesk",sans-serif;border:1px solid transparent;
  transition:transform .2s var(--tr),background .2s}
.kol-da{background:var(--ink);color:#fff}
.kol-da:hover{background:#171F4A;transform:translateY(-1px)}
.kol-ne{background:rgba(255,255,255,.8);color:var(--ink);border-color:var(--rub2)}
.kol-ne:hover{background:#fff;transform:translateY(-1px)}
/* [PRIVOLA-MOB] */
/* Na 390 px je traka mjerila 203 px (hr) do 248 px (de); na telefonu od
   667 px to je preko trecine okna, i to je prvo sto posjetitelj vidi.
   Pravni sadrzaj se NE krati — svrha, Meta Pixel i obje politike ostaju u
   cijelosti. Mijenja se samo gustoca: sitniji redak, uzi prored i gumbi u
   jednom retku po pola sirine. Dodirna meta ostaje 44 px. */
@media(max-width:559px){
  .kol{padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .kol-o{gap:10px}
  .kol-t{font-size:13px;line-height:1.45}
  .kol-g{gap:8px;flex-wrap:nowrap}
  .kol-g button{flex:1 1 0;min-width:0;padding:0 10px;font-size:13.5px}
}
/* dok traka stoji, mobilna ljepljiva traka bi je prekrila */
body.kol-otvoren .mob{bottom:auto;position:static;display:none}
@media (prefers-reduced-motion:reduce){.kol{transition:none}}

/* Mockup u herou vodi na živu demo stranicu — natpis ispod to i obećava, pa mora
   biti očito da se može kliknuti: blagi podizaj i sjena na prijelaz mišem. */
.mock-veza{display:block;text-decoration:none;border-radius:14px;
  transition:transform .25s var(--tr),filter .25s var(--tr)}
.mock-veza:hover{transform:translateY(-3px);filter:drop-shadow(0 18px 34px rgba(10,16,48,.16))}
.mock-veza:focus-visible{outline:2px solid var(--nag);outline-offset:6px}
@media(prefers-reduced-motion:reduce){.mock-veza,.mock-veza:hover{transition:none;transform:none}}

/* ——————————————————————————————————————————————————————
   POVJERENJE — traka odmah ispod heroja
   Iza GO-a stoji postojeća agencija (Simplex Digital), ne anoniman alat.
   Traka je namjerno tiha: jedan redak na širokom zaslonu, dva na mobitelu,
   isto staklo kao ostale kartice. Boja se pojavljuje samo na zvjezdicama.
   —————————————————————————————————————————————————————— */
.pvj{display:flex;flex-wrap:wrap;align-items:center;
  gap:10px clamp(14px,2.4vw,26px);
  padding:clamp(13px,1.7vw,17px) clamp(15px,2vw,22px);
  border:1px solid var(--rub);border-radius:var(--r);
  background:linear-gradient(var(--stk1),var(--stk2));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pvj-oc{margin:0;display:flex;align-items:center;gap:8px;flex:none;
  font-size:14px;line-height:1.3;color:var(--ink2)}
.pvj-oc b{font-family:"Schibsted Grotesk",sans-serif;font-weight:800;font-size:16.5px;
  line-height:1;color:var(--ink);letter-spacing:-.02em}
/* Zvjezdice su jedini topli ton na stranici. Nose ga jer se „pet zlatnih
   zvjezdica" pročita bez čitanja. Ukras su, pa idu s aria-hidden — ocjenu
   nosi tekst pokraj njih. */
.pvj-zv{flex:none;color:#E0A008}
.pvj-t{margin:0;flex:1 1 300px;min-width:0;font-size:14px;line-height:1.5;color:var(--ink2)}
.pvj-t b{font-weight:700;color:var(--ink)}
.pvj-v{flex:none;display:inline-flex;align-items:center;gap:7px;border-radius:4px;
  text-decoration:none;font:700 14px/1 "Hanken Grotesk",sans-serif;color:var(--nag2)}
.pvj-v span:first-child{border-bottom:1px solid transparent;transition:border-color .2s var(--tr)}
.pvj-v:hover span:first-child{border-bottom-color:currentColor}
.pvj-v:hover .str{transform:translateX(4px)}
.pvj-v:focus-visible{outline:2px solid var(--nag);outline-offset:4px}
/* Ispod 640 px svaka stavka dobiva svoj redak. Redoslijed se NE mijenja
   `order`-om — ovako se čita isto kako stoji u dokumentu (ocjena, tko smo,
   poveznica), pa se poklapa i s onim što pročita čitač zaslona. */
@media(max-width:640px){
  .pvj{gap:9px 14px}
  .pvj-t{flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){
  .pvj-v span:first-child{transition:none}
  .pvj-v:hover .str{transform:none}
}

/* Napomene uz cjenik: zašto GO postoji, nove mogućnosti, granice podrške.
   Rešetku i kartice nasljeđuje od `.res`/`.kar` — ovdje samo odmak. */
.cjnap{margin-top:clamp(30px,3.4vw,44px)}

/* ——————————————————————————————————————————————————————
   25. SUSTAV REDIZAJNA (kolovoz 2026.)

   Dva pravila drže cijeli raspored:
     TAMNO = radnja ili odluka, SVIJETLO = dokaz.
     ŠIROKO = gledaj, USKO (≤720 px) = čitaj.
   Nijedna sekcija ne smije biti istovremeno široka i puna teksta — to je
   točno ono što je radio cjenik (3 666 px visine na 390 px).

   ⚠ Sve u ovom poglavlju je DOPUNA. Nijedna postojeća klasa nije obrisana
   ni prepisana, jer istu datoteku dijeli i 15 stranica po djelatnosti.
   Nove klase su modifikatori (.pvj--redak, .crt--traka, .hero--v2,
   .gal--traka), pa osnovni oblik koji predložak koristi ostaje netaknut.
   —————————————————————————————————————————————————————— */

/* ⚠ `.sek--tam` (TAMna ploha) i postojeći `.sek--tan` (TANko poglavlje,
   manji razmak) razlikuju se jednim slovom i NISU povezani. Tan = razmak,
   tam = boja. Prije izmjene provjeri koje od to dvoje mijenjaš. */
:root{
  --tam:#0A1030;                  /* tamna ploha — ista tinta kao naslovi */
  --tam-t:#EAF0FF;                /* tekst na tamnom — izmjereno 16,3:1 */
  --tam-t2:#A2AFD6;               /* odlomak na tamnom — 8,5:1 */
  --tam-o:#93A0CC;                /* oznaka i natpis na tamnom — 7,2:1 */
  --tam-n:#A78BFF;                /* naglasak i prsten fokusa na tamnom — 6,9:1 */
  --tam-rub:rgba(255,255,255,.14);
  --tam-pol:rgba(255,255,255,.07); /* ploha polja u tamnom herou */
}

/* ——— tamna ploha ——— */
.sek--tam{position:relative;background:var(--tam);color:var(--tam-t);isolation:isolate}
/* Zrno ide i preko tamne plohe. Bez njega tamni pojas izgleda plosnato uz
   papir koji zrno ima, pa se šav između njih vidi kao greška. */
.sek--tam::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23z)'/%3E%3C/svg%3E");
  background-size:180px 180px}
.sek--tam>*{position:relative;z-index:1}

/* ⚠ Boja se na tamnoj plohi zadaje PO ELEMENTU, nikad globalnim
   `!important` pravilom na `color`. Globalni `!important` je na ovom
   projektu već jednom dao 1,01:1 na ghost gumbima dok je izvještaj tvrdio
   6,2:1 — mjeren je bio jedan par boja, a primijenjen na sve površine.
   Naslovi imaju izravno `color:var(--ink)` pravilo, pa naslijeđena boja
   protiv njih ne može — svaki od njih mora biti izričito naveden. */
.sek--tam h1,.sek--tam h2,.sek--tam h3,.sek--tam h4,
.sek--tam .n1,.sek--tam .n2,.sek--tam .n3,.sek--tam .n4{color:var(--tam-t)}
.sek--tam p,.sek--tam .uvd,.sek--tam .hpod,.sek--tam li{color:var(--tam-t2)}
.sek--tam .ozn,.sek--tam .hsit,.sek--tam .nadn,.sek--tam .mcap,
.sek--tam .gs,.sek--tam small{color:var(--tam-o)}
.sek--tam b,.sek--tam strong{color:var(--tam-t)}
.sek--tam a{color:var(--tam-t)}
/* Potez markerom ispod riječi: 15 % na tamnom se ne vidi, pa ide jače. */
.sek--tam .n1 em,.sek--tam .n2 em{
  background-image:linear-gradient(100deg,rgba(124,156,255,.45),rgba(167,139,255,.45))}
/* Prsten fokusa: --nag (#5B34D6) je na tamnoj plohi pretaman da bi se vidio,
   pa fokus na tamnom nosi --tam-n. */
.sek--tam a:focus-visible,.sek--tam button:focus-visible,
.sek--tam summary:focus-visible,.sek--tam input:focus-visible,
.sek--tam textarea:focus-visible{outline-color:var(--tam-n)}
/* Gumbi na tamnom — obje boje izričito, jer .b2 je staklo s tamnim tekstom
   i na tamnoj plohi bi bio nečitljiv. */
.sek--tam .b1{background:#fff;color:var(--tam);border-color:transparent}
.sek--tam .b1:hover{background:#DFE7FF}
.sek--tam .b2{background:transparent;color:var(--tam-t);border-color:var(--tam-rub);
  -webkit-backdrop-filter:none;backdrop-filter:none}
.sek--tam .b2:hover{background:rgba(255,255,255,.10);color:#fff}

/* ——————————————————————————————————————————————————————
   HERO v2 — proizvod ulazi u prvi zaslon, odrezan donjim rubom

   ⚠ `.hero--v2` NE zadaje boje. Hero je i dalje svijetla ploha; ako mu se
   ikad doda `.sek--tam`, boje dolaze odande i sve se poklopi samo od sebe.
   Kad bi ovdje stajala tamna podloga, `.hpod` (--ink2) bi ostao taman na
   tamnom — to je točno onaj kvar koji se mjeri kao 1,01:1.

   Posao ove klase je samo okomiti ritam: zbiti naslov, podnaslov, gumb i
   redak uvjeta toliko da gornji rub snimke uđe u prvi zaslon (714 px na
   390 px), a ostatak snimke se namjerno reže pregibom.
   —————————————————————————————————————————————————————— */
.hero--v2{padding:clamp(20px,3vw,44px) 0 0;overflow:hidden}
.hero--v2 .hpod{margin-top:clamp(12px,1.6vw,18px)}
.hero--v2 .bs.bs--hero{margin-top:clamp(16px,2vw,24px)}
.hero--v2 .hsit{margin-top:clamp(10px,1.4vw,13px)}
/* Snimka se reže pregibom: gornji rub MORA biti vidljiv, ostatak smije ispasti
   ispod. Bez zaobljenja na dnu, jer dno se ionako ne vidi. */
.hero--v2 .mock{margin-top:clamp(18px,2.6vw,32px)}

/* ——— neobavezan dvostupčani raspored ———
   Uključuje se sam čim struktura dobije `.hero-sl` (snimka u vlastitom
   stupcu). Dok je nema, hero ostaje centriran kakav jest — pa ovaj blok
   ne može ništa pokvariti. */
.hero--v2:has(.hero-sl){text-align:left}
.hero--v2:has(.hero-sl) .n1{max-width:16ch;margin:0}
.hero--v2:has(.hero-sl) .hpod{margin-left:0;margin-right:0;max-width:44ch}
@media(min-width:900px){
  .hero--v2>.o:has(>.hero-sl){display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
    gap:clamp(26px,3.6vw,58px);align-items:center;
    padding-bottom:clamp(30px,4vw,60px)}
  /* Snimka mora doći do STVARNOG ruba okna, ne do ruba spremnika. `.o` je
     ograničen na 1200 px i centriran, pa puki `-var(--mm)` ostavlja gutter
     (izmjereno 40 px na 1280 px) i snimka se čita kao uokvirena, a ne kao
     odrezana. `min(0px,…)` drži formulu ispravnom i ispod 1200 px. */
  .hero--v2 .hero-sl{margin-right:calc(min(0px,(100vw - 1200px) / -2) - var(--mm))}
  .hero--v2 .hero-sl .okv,.hero--v2 .hero-sl .snm{border-radius:14px 0 0 14px}
}
@media(max-width:899px){
  .hero--v2 .hero-sl{margin:clamp(18px,2.6vw,30px) calc(var(--mm) * -1) 0}
  .hero--v2 .hero-sl .okv{border-radius:12px 12px 0 0;max-height:46vh}
}

/* ——— polje u herou (starter s dvije stavke) ———
   Fiksna visina polja i apsolutno pozicioniran natpis, da izmjena primjera
   struke (automehaničar / frizer / stolar) ne pomakne raspored.
   Zadano je svijetlo; na tamnoj plohi boje dolaze iz `.sek--tam` bloka. */
.hero-p{display:grid;gap:10px;margin:clamp(16px,2.2vw,24px) auto 0;max-width:540px}
@media(min-width:600px){.hero-p{grid-template-columns:minmax(0,1fr) minmax(0,.82fr) auto}}
.hero-p .polje{position:relative;min-width:0}
.hero-p input{width:100%;box-sizing:border-box;height:52px;min-height:52px;margin:0;
  background:rgba(255,255,255,.86);border:1px solid var(--rub2);border-radius:12px;
  color:var(--ink);padding:0 15px;
  font:500 15.5px/1.3 "Hanken Grotesk",system-ui,sans-serif}
.hero-p input::placeholder{color:var(--ink3);opacity:1}
.hero-p input:focus{border-color:var(--nag);background:#fff;outline:none}
.hero-p .zam{position:absolute;left:16px;right:16px;top:50%;transform:translateY(-50%);
  pointer-events:none;color:var(--ink3);font-size:15.5px;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:opacity .42s var(--tr)}
.hero-p .zam[hidden]{display:none}
.hero-p .b1{height:52px;min-height:52px;padding:0 22px}
@media(max-width:599px){.hero-p .b1{width:100%}}
.sek--tam .hero-p input{background:var(--tam-pol);border-color:var(--tam-rub);color:var(--tam-t)}
.sek--tam .hero-p input::placeholder,.sek--tam .hero-p .zam{color:var(--tam-o)}
.sek--tam .hero-p input:focus{border-color:var(--tam-n);background:rgba(255,255,255,.11)}

/* ——————————————————————————————————————————————————————
   TRAKA POVJERENJA KAO JEDAN TANAK REDAK

   Dokaz nikad iznad radnje — traka stoji ISPOD proizvoda. Zato gubi staklo,
   okvir i sjenu: ostaje samo tanka linija iznad i ispod. Izmjereno 60 px na
   1280 px i 76 px na 390 px. Osnovni `.pvj` (kartica) ostaje netaknut jer ga
   koristi predložak djelatnosti na 15 stranica.
   —————————————————————————————————————————————————————— */
.pvj-s{padding:0}
.pvj--redak{background:none;border:0;border-top:1px solid var(--rub);
  border-bottom:1px solid var(--rub);border-radius:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  padding:clamp(11px,1.6vw,19px) 0;gap:6px clamp(12px,2vw,22px)}
.pvj--redak .pvj-t{font-size:13.5px;line-height:1.45;flex:1 1 auto}
.pvj--redak .pvj-oc,.pvj--redak .pvj-v{font-size:13.5px}
/* ⚠ Osnovni `.pvj` na ≤640 px gura tekst u vlastiti redak (`flex:1 1 100%`).
   U traci to daje tri retka i 107 px — izmjereno — a traka smije biti
   60–90 px. Zato tekst ovdje teče uz ocjenu i lomi se prirodno. */
@media(max-width:640px){
  .pvj--redak{gap:3px 10px;padding:9px 0}
  .pvj--redak .pvj-t{flex:1 1 180px;font-size:12.5px;line-height:1.35}
  .pvj--redak .pvj-oc,.pvj--redak .pvj-v{font-size:12.5px}
  .pvj--redak .pvj-oc b{font-size:15px}
  .pvj--redak .pvj-zv{width:76px;height:14px}
}
.sek--tam .pvj--redak{border-top-color:var(--tam-rub);border-bottom-color:var(--tam-rub)}
.sek--tam .pvj--redak .pvj-t,.sek--tam .pvj--redak .pvj-oc{color:var(--tam-t2)}
.sek--tam .pvj--redak .pvj-oc b,.sek--tam .pvj--redak .pvj-t b{color:var(--tam-t)}
.sek--tam .pvj--redak .pvj-v{color:var(--tam-n)}

/* ——————————————————————————————————————————————————————
   VREMENSKA CRTA KAO TANAK POJAS
   Pet stanica na jednoj liniji, tiho — pojas na dnu sekcije tijeka, ne
   vlastito poglavlje. Natpis stanice je `h3.n3`, pa selektor mora biti
   specifičniji od `.n3` (0,1,1 > 0,1,0) — bez `!important`.
   —————————————————————————————————————————————————————— */
.crt--traka{gap:14px}
@media(min-width:640px){
  .crt--traka{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.3vw,18px)}
  .crt--traka::before{left:0;right:0;top:9px;bottom:auto;width:auto;height:1.5px;
    background:linear-gradient(90deg,rgba(10,16,48,.04),var(--rub2) 10%,var(--rub2) 90%,rgba(10,16,48,.04))}
  .crt--traka li{padding-left:0;padding-top:30px}
  .crt--traka li::before{top:3px;width:10px;height:10px}
}
.crt--traka .crt-t{font-size:clamp(1.05rem,1.8vw,1.34rem);margin-bottom:5px}
/* Natpis stanice nosi značenje („Pet obaveznih polja"), pa ide na --ink2
   (8,2:1), ne na --ink3 (4,73:1) — najtjesniju boju na stranici. */
.crt--traka h3,.crt--traka h3.n3{font-size:12.5px;font-weight:600;letter-spacing:.01em;
  line-height:1.4;color:var(--ink2);margin:0}
.crt--traka p{font-size:13px;line-height:1.5;max-width:24ch;margin:4px 0 0}
.sek--tam .crt--traka::before{
  background:linear-gradient(90deg,rgba(255,255,255,.02),var(--tam-rub) 10%,var(--tam-rub) 90%,rgba(255,255,255,.02))}
.sek--tam .crt--traka li::before{background:var(--tam);border-color:var(--tam-t);box-shadow:0 0 0 4px var(--tam)}
.sek--tam .crt--traka li:last-child::before{background:var(--tam-n);border-color:var(--tam-n)}
.sek--tam .crt--traka h3,.sek--tam .crt--traka h3.n3{color:var(--tam-t2)}
/* [CRTA-MOB] */
/* Na mobitelu je pojas padao na osnovni oblik `.crt`: pet stanica, svaka u
   dva retka (vrijeme pa natpis), i to odmah ispod tri natpisa snimke koji
   vec nose vlastite kolute — deset redaka u dva razlicita sustava jedan uz
   drugi. Vlasnik je to nazvao „nabacane stavke". Popravlja se rasporedom,
   ne rezom: vrijeme i natpis idu u ISTI redak i poravnaju se u stupac, a
   crta dobiva odmak i vlas prema natpisima iznad. */
@media(max-width:639px){
  .snm-k{gap:5px;margin-top:12px;font-size:13px}
  .crt--traka{margin-top:clamp(20px,5vw,28px);padding-top:clamp(15px,4vw,20px);
    border-top:1px solid var(--rub);gap:13px}
  .crt--traka li{display:flex;align-items:baseline;gap:11px;padding-left:27px}
  .crt--traka li::before{top:4px}
  .crt--traka .crt-t{flex:0 0 auto;min-width:5.8em;margin:0;font-size:15.5px}
  .crt--traka h3,.crt--traka h3.n3{font-size:14px;font-weight:600;line-height:1.35}
}
.sek--tam .crt--traka{border-top-color:var(--tam-rub)}

/* ——————————————————————————————————————————————————————
   USPOREDBA „PRIJE → SAD"
   Tri retka, usko (spremnik je `.o--uz`, 940 px). Svaki redak ima dvije
   strane; `.usp-o` je sitna oznaka („Prije" / „Sad"), `<b>` nosi tvrdnju.
   Strana „sad" je svjetlija i teža — razlika se mora vidjeti bez čitanja.
   —————————————————————————————————————————————————————— */
/* [USP-v2] Vlasnik o prvoj izvedbi: „to 'Obrnuli smo redoslijed', nekako mi
   je lose, taj dio ruzno izgleda." I bio je u pravu — sest natpisa („Prije"
   / „Sad") jedan ispod drugoga, sve u istoj tezini, a najjaci argument
   stranice (~850 € unaprijed) izgledao je kao natuknica medu natuknicama.

   Sadrzaj je netaknut, mijenja se izvedba, u cetiri poteza:
   1. natpis sjeda U REDAK uz tvrdnju umjesto iznad nje — tri retka umjesto
      sest, i par se konacno cita kao par;
   2. strana „prije" je precrtana i prigusena, strana „sad" svjetlija i teza
      — razlika se vidi prije nego se procita;
   3. medu njima stoji vlas s cvorom (znak crtan iz rubova, ne tekst, pa ga
      citac zaslona nema sto procitati) — to je ono sto od dva stupca radi
      prijelaz;
   4. redak s cijenom je vrhunac sekcije: ~850 € je krupno i precrtano, a
      odgovor uz njega je najveci tekst u sekciji. Precrtano je jer je to
      nacin koji smo napustili — nije popust. */
.usp{max-width:880px;margin:0 auto}
.usp-r{position:relative;display:grid;gap:10px 30px;
  padding:clamp(16px,2.4vw,24px) 0;border-top:1px solid var(--rub)}
.usp-r:last-child{border-bottom:1px solid var(--rub)}

/* Natpis stoji lijevo od tvrdnje. Prije je stajao iznad, pa je svaki redak
   trosio dva reda i cjelina se citala kao popis natuknica. Sirina stupca je
   52 px — dovoljno za najduzi oblik („VORHER", 6 znakova na 10,5 px). */
.usp-p,.usp-s{display:grid;grid-template-columns:52px minmax(0,1fr);
  gap:3px 10px;align-items:baseline}
.usp-o{grid-column:1;grid-row:1;display:block;margin:0;
  font-size:11px;font-weight:700;letter-spacing:.09em;line-height:1.75;
  text-transform:uppercase;color:var(--ink3)}
.usp-p b,.usp-s b{grid-column:2;grid-row:1;display:block;margin:0}
.usp-s span:not(.usp-o){grid-column:2;grid-row:2;display:block}

.usp-p b{font-weight:400;font-size:15px;line-height:1.5;color:var(--ink3);
  text-decoration:line-through;text-decoration-thickness:1px;
  text-decoration-color:rgba(10,16,48,.32)}
.usp-s b{font-weight:700;font-size:17px;line-height:1.42;color:var(--ink)}
.usp-s span:not(.usp-o){font-size:13.5px;line-height:1.5;color:var(--ink2)}

/* Vlas s cvorom. Znak je prazan element s dva ruba, zakrenut — na sirokom
   pokazuje udesno, na uskom prema dolje, jer se ondje strane slazu jedna
   ispod druge. */
.usp-s{position:relative;border-left:1.5px solid rgba(91,52,214,.26)}
.usp-s::before{content:"";position:absolute;width:7px;height:7px;
  border-top:1.6px solid var(--nag);border-right:1.6px solid var(--nag);
  pointer-events:none}
@media(min-width:620px){
  .usp-r{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);align-items:center}
  .usp-s{padding-left:32px}
  .usp-s::before{left:-4.7px;top:50%;transform:translateY(-50%) rotate(45deg)}
}
@media(max-width:619px){
  .usp-s{margin-top:3px;padding-left:16px}
  .usp-s::before{left:-4.7px;top:8px;transform:rotate(135deg)}
}

/* ——— redak s cijenom ———
   850 € je stvarna cijena izrade kod nas, potvrdio vlasnik. Zato brojka
   smije nositi ovoliku tezinu, i zato je precrtana samo ONA, a ne cijela
   recenica — strika preko cijele recenice pojede i ostatak znacenja. */
.usp-r--k{padding-top:clamp(22px,3.2vw,32px);padding-bottom:clamp(22px,3.2vw,32px)}
.usp-r--k .usp-p{align-items:start}
.usp-r--k .usp-p b{font-size:15.5px;text-decoration:none}
.usp-r--k .usp-p b i{display:inline-block;margin:0 3px;vertical-align:-.04em;
  font-style:normal;font-family:"Schibsted Grotesk",sans-serif;font-weight:800;
  font-size:clamp(1.75rem,4.8vw,2.4rem);line-height:1.05;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;color:var(--ink2);
  text-decoration:line-through;text-decoration-thickness:2px;
  text-decoration-color:rgba(10,16,48,.45)}
.usp-r--k .usp-s b{font-size:clamp(1.06rem,2.2vw,1.34rem);line-height:1.3}

.sek--tam .usp-o{color:var(--tam-o)}
.sek--tam .usp-p b{color:var(--tam-o);text-decoration-color:rgba(234,240,255,.34)}
.sek--tam .usp-s b{color:var(--tam-t)}
.sek--tam .usp-s span:not(.usp-o){color:var(--tam-t2)}
.sek--tam .usp-r{border-top-color:var(--tam-rub)}
.sek--tam .usp-r:last-child{border-bottom-color:var(--tam-rub)}
.sek--tam .usp-s{border-left-color:rgba(167,139,255,.45)}
.sek--tam .usp-s::before{border-top-color:var(--tam-n);border-right-color:var(--tam-n)}
.sek--tam .usp-r--k .usp-p b i{color:var(--tam-t2);
  text-decoration-color:rgba(162,175,214,.62)}
/* Tihi sjaj ispod retka s cijenom. `inset` je vodoravno NULA namjerno —
   negativan bocni inset na 390 px izbaci plohu izvan okna i stranica dobije
   vodoravno pomicanje. */
.sek--tam .usp-r--k::after{content:"";position:absolute;inset:-2px 0;z-index:-1;
  pointer-events:none;
  background:radial-gradient(78% 140% at 50% 50%,rgba(167,139,255,.13),transparent 72%)}

/* ——————————————————————————————————————————————————————
   DVA BROJA — ~850 € nasuprot 19 €

   Najjači argument na stranici. Vlasnik je potvrdio da je 850 € stvarna
   cijena izrade kod njih, pa brojka smije stajati ovako krupno. „Sad" broj
   je najveći tekst u sekciji — mora se pročitati iz aviona, bez čitanja
   natpisa uz njega.
   —————————————————————————————————————————————————————— */
.dvb{display:grid;gap:clamp(10px,1.8vw,24px);align-items:center;
  margin:0 auto clamp(24px,3.2vw,38px);max-width:760px;text-align:center}
@media(min-width:560px){.dvb{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}}
.dvb-a b,.dvb-b b{display:block;font-family:"Schibsted Grotesk",sans-serif;
  font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.dvb-a b{font-size:clamp(1.9rem,4.6vw,2.6rem);color:var(--ink2);
  /* [DVB-v2] Precrtano istim potezom kao u sekciji „prije i sad", da se
     dva broja citaju kao jedna usporedba, a ne kao dvije cijene. Boja
     je podignuta s --ink3 (4,73:1) na --ink2 (8,2:1). */
  text-decoration:line-through;text-decoration-thickness:2px;
  text-decoration-color:rgba(10,16,48,.4)}
.dvb-b b{font-size:clamp(2.9rem,7.4vw,4.4rem);color:var(--ink)}
.dvb-a span,.dvb-b span{display:block;font-size:13px;line-height:1.45;
  color:var(--ink2);margin-top:8px;max-width:26ch;margin-left:auto;margin-right:auto}
.dvb-v{font-size:clamp(1.2rem,2.6vw,1.8rem);line-height:1;color:var(--ink3)}
@media(max-width:559px){.dvb-v{transform:rotate(90deg)}}
.sek--tam .dvb-a b,.sek--tam .dvb-v{color:var(--tam-o)}
.sek--tam .dvb-b b{color:var(--tam-t)}
.sek--tam .dvb-a span,.sek--tam .dvb-b span{color:var(--tam-t2)}

/* ——————————————————————————————————————————————————————
   BIRAČ STRUKA
   14 poveznica iz bivše sekcije „djelatnosti" preživljavaju (SEO ostaje),
   ali prestaju biti mreža kartica i postaju jedan klizni red pilula.
   Dolazi POSLIJE `.djl` u datoteci, pa `display:flex` pobjeđuje mrežu.
   —————————————————————————————————————————————————————— */
.gal-bir{display:flex;gap:8px;margin:0 0 clamp(16px,2.2vw,26px);
  padding:2px 0 10px;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.gal-bir::-webkit-scrollbar{display:none}
@media(max-width:719px){
  .gal-bir{margin-left:calc(var(--mm) * -1);margin-right:calc(var(--mm) * -1);
    padding-left:var(--mm);padding-right:var(--mm)}
}
.gal-bir a{position:relative;flex:none;scroll-snap-align:start;
  display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;
  border-radius:999px;border:1px solid var(--rub2);background:rgba(255,255,255,.7);
  color:var(--ink2);text-decoration:none;white-space:nowrap;box-shadow:none;
  font:600 13.5px/1 "Hanken Grotesk",system-ui,sans-serif;
  transition:background .2s var(--tr),color .2s var(--tr),border-color .2s var(--tr)}
/* Vidljiva pilula je 40 px zbog sklada s ostalim sitnim trakama, ali dodirna
   meta mora biti 44 px — isti postupak kao na prebacivaču jezika. */
.gal-bir a::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;
  transform:translateY(-50%)}
.gal-bir a:hover{background:#fff;border-color:var(--ink);color:var(--ink);
  transform:none;box-shadow:none}
.gal-bir a span:first-child{overflow-wrap:normal}
.gal-bir .str{color:inherit;opacity:.5}
.gal-bir [aria-current="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

/* Galerija od ruba do ruba: proizvod se pokazuje kao usjek, ne kao sličica u
   okviru. Na 390 px pločice klize i režu se o rub okna — sljedeća viri i time
   kaže da ih ima još. */
@media(max-width:719px){
  .gal--traka{display:flex;grid-template-columns:none;gap:12px;
    overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-left:calc(var(--mm) * -1);margin-right:calc(var(--mm) * -1);
    padding:0 var(--mm) 8px}
  .gal--traka::-webkit-scrollbar{display:none}
  .gal--traka>*{flex:0 0 78%;scroll-snap-align:start}
}

/* ——————————————————————————————————————————————————————
   OKVIR SNIMKE

   `.snm` je `<figure>` koji drži medij (`.okv`) i tri natpisa (`.snm-k`).
   Sam po sebi nema plohu ni sjenu — to nosi `.okv` unutra.

   ⚠ Slika OSTAJE i drži visinu, `alt` i mjerenje najveće iscrtane plohe.
   Snimka (F3, `data-snm`) ide APSOLUTNO PREKO nje, pa pomak rasporeda nije
   moguć ni u načelu — ni ako dohvat pukne. CLS se ne popravlja naknadno,
   nego se onemogući strukturom.
   ⚠ F3: `<video>` se umeće UNUTAR `.okv`, ne u `<figure>` — inače bi
   `inset:0` prekrio i natpise ispod slike.
   —————————————————————————————————————————————————————— */
.snm{margin:0;position:relative}
.snm .okv{position:relative}
.snm .okv video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:top center;border-radius:inherit;
  opacity:0;transition:opacity .42s var(--tr)}
.snm .okv video.vidi{opacity:1}
/* Zaštita ako video ipak završi kao izravno dijete figure. */
.snm>video{position:absolute;top:0;left:0;width:100%;aspect-ratio:16/9;
  object-fit:cover;object-position:top center;opacity:0}
.snm>video.vidi{opacity:1}

/* Tri natpisa ispod snimke — po 3–4 riječi, bez ijedne cijele rečenice. */
.snm-k{display:grid;gap:6px 18px;margin:clamp(12px,1.6vw,18px) 0 0;
  font-size:13.5px;line-height:1.45;color:var(--ink2)}
@media(min-width:620px){.snm-k{grid-template-columns:repeat(3,minmax(0,1fr));text-align:center}}
.snm-k span{position:relative;padding-left:20px}
@media(min-width:620px){.snm-k span{padding-left:0;padding-top:20px}}
/* Brojevi koraka dolaze iz CSS-a, ne iz teksta — tekst ostaje prevodiv. */
.snm-k span::before{counter-increment:snmk;content:counter(snmk);
  position:absolute;left:0;top:.05em;width:15px;height:15px;border-radius:50%;
  background:var(--ink);color:#fff;font-size:9.5px;font-weight:700;
  line-height:15px;text-align:center}
@media(min-width:620px){.snm-k span::before{left:50%;top:0;transform:translateX(-50%)}}
.snm-k{counter-reset:snmk}
.sek--tam .snm-k{color:var(--tam-t2)}
.sek--tam .snm-k span::before{background:var(--tam-n);color:var(--tam)}

/* ——————————————————————————————————————————————————————
   „VIDI SVE ŠTO JE UKLJUČENO" — ostatak stavki plana, sklopljeno
   —————————————————————————————————————————————————————— */
.vise{margin:0 0 18px}
.vise summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:7px;
  min-height:34px;font:600 13.5px/1 "Hanken Grotesk",system-ui,sans-serif;color:var(--nag2)}
.vise summary::-webkit-details-marker{display:none}
.vise summary::after{content:"";width:6px;height:6px;flex:none;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .2s var(--tr)}
.vise[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.vise summary:hover{color:var(--ink)}
.vise ul{margin-top:10px}
.sek--tam .vise summary{color:var(--tam-n)}

/* ——————————————————————————————————————————————————————
   KARTICE PLANOVA — jednaka visina

   Izmjereno prije izmjene: kartice su se unutar istog retka razlikovale
   54–78 px jer je `.cj` imao `align-items:start`. Sa `stretch` dna sjedaju
   na istu crtu (izmjereno 4049/4049/4049 na 1280 px), a istaknuta kartica
   ostaje podignuta svojih 16 px kako i treba.
   ⚠ Zaliha visine za najdulji njemački niz namjerno NIJE ovdje: popisi su
   skraćeni na 4 stavke pa bi izmjerene brojke sa starog cjenika (27,5em)
   ostavile veliku prazninu. Ako se prebacivanjem jezika pokaže skok, mjeri
   ponovno na aktualnom sadržaju.
   —————————————————————————————————————————————————————— */
@media(min-width:900px){.cj{align-items:stretch}}

/* ——————————————————————————————————————————————————————
   POKRET U NOVIM SEKCIJAMA
   Jedan token popuštanja (--tr). Niz otkrivanja u herou mora biti gotov
   ispod 0,65 s: 0,40 s trajanja + 0,24 s zadnjeg koraka = 0,64 s.
   —————————————————————————————————————————————————————— */
@media (prefers-reduced-motion:no-preference){
  .hero--v2>.o>*{animation-duration:.4s}
  .hero--v2>.o>*:nth-child(2){animation-delay:.06s}
  .hero--v2>.o>*:nth-child(3){animation-delay:.12s}
  .hero--v2>.o>*:nth-child(4){animation-delay:.18s}
  .hero--v2>.o>*:nth-child(5){animation-delay:.24s}
  .hero--v2 .hero-tx>*{animation:ulaz .4s var(--tr) both}
  .hero--v2 .hero-sl{animation:ulaz .4s var(--tr) .18s both}
}
/* Tko je isključio pokret, ne dobiva ništa od gornjeg — ni prijelaze. */
@media(prefers-reduced-motion:reduce){
  .hero--v2>.o>*,.hero--v2 .hero-tx>*,.hero--v2 .hero-sl{animation:none}
  .snm .okv video,.snm>video,.hero-p .zam,.hero-p input,
  .gal-bir a,.vise summary::after{transition:none}
  .gal--traka,.gal-bir{scroll-behavior:auto}
}

/* Djelatnosti u galeriji su primjeri, a polje je slobodan unos — bez ove
   napomene obrtnik cija struka nije na popisu zakljuci da alat nije za njega. */
.nap-str{max-width:56ch;margin:18px auto 0;text-align:center;
  font-size:.94rem;line-height:1.55;color:var(--ink3)}
.nap-pol{display:block;margin-top:6px;font-size:.86rem;color:var(--ink3)}
@media(max-width:560px){.nap-str{font-size:.9rem;text-align:left}}

/* ——————————————————————————————————————————————————————
   PRIJEDLOZI STRUKE I USLUGA   [STRUKE-v1]

   Dvije trake ispod dva polja obrasca: `.sug` je padajući popis struka ispod
   „Čime se baviš", `.uslp` traka pločica s tipičnim uslugama ispod polja
   usluga. Puni ih blok [STRUKE-v1] u app.js.

   ⚠ OBJE SU NEUTRALNE ZA RASPORED, i to građom — ne mjerom koja se poslije
   provjerava. `.sug` je apsolutan sloj, pa po definiciji ne sudjeluje u
   rasporedu. `.uslp` ima STALNU visinu i stoji u dokumentu od prvog
   iscrtavanja; napomena i pločice unutar nje su obje apsolutne, pa prazna i
   puna traka zauzimaju točno isto. Pomak zato nije moguć ni kad dohvat
   rječnika pukne, ni kad se struka mijenja usred tipkanja.

   ⚠ Ne dodavati `overflow` na `.pol` ni na `.obr .kar` — padajući popis izlazi
   iz oba i tada bi se odrezao.
   —————————————————————————————————————————————————————— */
.uslp{position:relative;height:48px;margin:8px 0 0}
.uslp-n{position:absolute;inset:0;margin:0;display:flex;align-items:center;
  font-size:12.5px;line-height:1.4;color:var(--ink3);
  transition:opacity .18s var(--tr)}
/* Jedan red koji klizi vodoravno — visina zato ne ovisi ni o broju pločica ni
   o duljini naziva. Dva reda bi na 390 px tražila 140 px stalne praznine. */
.uslp-t{position:absolute;inset:0;display:flex;align-items:center;gap:8px;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
  opacity:0;pointer-events:none;transition:opacity .18s var(--tr)}
.uslp-t::-webkit-scrollbar{display:none}
.uslp--ima .uslp-n{opacity:0}
.uslp--ima .uslp-t{opacity:1;pointer-events:auto}

/* Dodirna meta je cijela pločica, 44 px — bez pseudo-elementa kao na `.gal-bir`,
   jer bi ondje viši sloj probio traku koja ima `overflow-y:hidden`. */
.uslp-p{flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;gap:7px;
  min-height:44px;padding:0 15px 0 12px;border-radius:999px;
  border:1px solid var(--rub2);background:rgba(255,255,255,.72);color:var(--ink2);
  cursor:pointer;white-space:nowrap;
  font:600 13.5px/1 "Hanken Grotesk",system-ui,sans-serif;
  transition:background .2s var(--tr),color .2s var(--tr),border-color .2s var(--tr)}
.uslp-p::before{content:"+";font:600 16px/1 "Hanken Grotesk",system-ui,sans-serif;color:var(--ink3)}
.uslp-p:hover{background:#fff;border-color:var(--ink);color:var(--ink)}
.uslp-p:hover::before{color:var(--ink)}
.uslp-p:focus-visible{outline:2px solid var(--nag);outline-offset:2px}
.uslp-p[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.uslp-p[aria-pressed="true"]::before{content:"✓";font-size:12px;color:#fff}
/* Ulaz je SAMO prozirnost: pomak ili skaliranje bi u traci s `overflow-y:hidden`
   odrezalo pločicu, a i najmanja promjena geometrije je pomak rasporeda. */
.uslp--ima .uslp-p{animation:uslp-ul .3s var(--tr) both;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes uslp-ul{from{opacity:0}to{opacity:1}}

.sug{position:absolute;z-index:5;padding:5px;border-radius:12px;
  border:1px solid var(--rub2);background:#fff;
  box-shadow:0 18px 40px -18px rgba(10,16,48,.42),0 0 0 1px var(--rub);
  max-height:252px;overflow-y:auto;overscroll-behavior:contain}
.sug[hidden]{display:none}
.sug-o{display:block;width:100%;min-height:44px;padding:10px 12px;border:0;border-radius:8px;
  background:0;color:var(--ink2);text-align:left;cursor:pointer;
  font:500 14.5px/1.3 "Hanken Grotesk",system-ui,sans-serif}
.sug-o:hover,.sug-o[aria-selected="true"]{background:rgba(91,52,214,.09);color:var(--ink)}
.sug-o:focus-visible{outline:2px solid var(--nag);outline-offset:-2px}

@media (prefers-reduced-motion:reduce){
  .uslp-n,.uslp-t,.uslp-p{transition:none}
  .uslp--ima .uslp-p{animation:none}
  .uslp-t{scroll-behavior:auto}
}

/* Izlaz za onoga tko ne zeli odmah upisivati — vodi na isti obrazac nize. */
.hero-alt{margin:14px 0 0;text-align:center;font-size:.92rem}
.hero-alt a{color:var(--ink3);text-decoration:underline;text-underline-offset:3px}
.hero-alt a:hover{color:var(--ink)}