/* ============================================================
   RSN · SISTEM  (22. 9. 2026)
   Nalaga se ZA nova.css. Ne spreminja nova.css, samo prepisuje.
   Faza 1: tokeni, kontrast, ploskost, tipografska skala.
   Viri: Utopia (tipo) · IBM Carbon (razmiki, trajanja) · Radix (barve)
         · Cloud Four (gnezdeni radii) · Comeau (sence) · M3 (stanja).
   ============================================================ */

:root{
  /* ---------- TIPOGRAFIJA: 9 stopenj, tekoce 390 -> 1440 px ---------- */
  --fs-caption: clamp(0.750rem, 0.7384rem + 0.048vw, 0.781rem);
  --fs-small:   clamp(0.875rem, 0.8518rem + 0.095vw, 0.938rem);
  --fs-body:    clamp(1.000rem, 0.9652rem + 0.143vw, 1.094rem);
  --fs-lead:    clamp(1.188rem, 1.1179rem + 0.286vw, 1.375rem);
  --fs-h4:      clamp(1.375rem, 1.2589rem + 0.476vw, 1.688rem);
  --fs-h3:      clamp(1.625rem, 1.4393rem + 0.762vw, 2.125rem);
  --fs-h2:      clamp(2.000rem, 1.6750rem + 1.333vw, 2.875rem);
  --fs-h1:      clamp(2.500rem, 1.9893rem + 2.095vw, 3.875rem);
  --fs-display: clamp(2.875rem, 2.1321rem + 3.048vw, 4.875rem);
  --lh-tight:1.08; --lh-snug:1.24; --lh-lead:1.5; --lh-body:1.6; --lh-meta:1.45;

  /* ---------- RAZMIKI: Carbon, 13 stopenj ---------- */
  --sp-1:2px; --sp-2:4px; --sp-3:8px; --sp-4:12px; --sp-5:16px; --sp-6:24px;
  --sp-7:32px; --sp-8:40px; --sp-9:48px; --sp-10:64px; --sp-11:80px;
  --sp-12:96px; --sp-13:160px;

  /* ---------- KONTRAST: preverjeno na beli IN na #F5F6F3 ----------
     --ink-50 je dajal 3,53:1 in padel AA na ~180 mestih. Dvignjen na .62 = 5,3:1.
     --ink-30 ostane SAMO za obrobe, zato dobi besedilna varianta svojo. */
  --ink-70:rgba(14,19,16,.74);   /* 7,9:1  telo besedila     */
  --ink-50:rgba(14,19,16,.62);   /* 5,3:1  oznake, podnaslovi */
  --ink-38:rgba(14,19,16,.38);   /*        ikone, puscice     */
  --ink-30:rgba(14,19,16,.16);   /*        SAMO obrobe        */

  /* ---------- ZELENA: vloge namesto odtenkov ----------
     #0363D4 na beli = 1,66:1 -> nikoli besedilo na svetlem.
     Crn tekst NA njej = 11,3:1. Na temni #06142B = 11,3:1. */
  --green-dark:#024DA6;          /* 4,90:1 bela · 4,51:1 siva · edina zelena za tekst na svetlem */
  --green-press:#024DA6;
  --lime-on-ink:#6FB0FF;

  /* ---------- PLOSKVE ---------- */
  --bg-soft:#F4F5F1;
  --ink-surface:#06142B;         /* temne sekcije */
  --ink-surface-2:#0A2147;

  /* ---------- RADII: gnezdenje zunanji = notranji + padding ---------- */
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:24px; --r-pill:999px;
  --r:18px; --r-s:8px;

  /* ---------- GLOBINA: plastena, obarvana. Uporablja se skoraj nikoli. ---------- */
  --el-1:0 1px 1px rgba(14,19,16,.05), 0 2px 2px rgba(14,19,16,.05);
  --el-2:0 1px 2px rgba(14,19,16,.04), 0 3px 6px rgba(14,19,16,.04), 0 6px 12px rgba(14,19,16,.04);

  /* ---------- GIBANJE: Carbon trajanja, dve krivulji ---------- */
  --d-1:70ms; --d-2:110ms; --d-3:150ms; --d-4:240ms; --d-5:400ms; --d-6:700ms;
  --e-std:cubic-bezier(.2,0,.38,.9);
  --e-out:cubic-bezier(.22,1,.36,1);
  --ease:cubic-bezier(.2,0,.38,.9);
  --out:cubic-bezier(.22,1,.36,1);

  --measure:68ch;
}

/* ============ TIPOGRAFIJA ============ */
body{font-size:var(--fs-body);line-height:var(--lh-body);text-rendering:optimizeLegibility}
h1,.h1{font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:-.035em}
h2,.h2{font-size:var(--fs-h2);line-height:var(--lh-tight);letter-spacing:-.03em}
h3{font-size:var(--fs-h3);line-height:var(--lh-snug);letter-spacing:-.025em}
h4{font-size:var(--fs-h4);line-height:var(--lh-snug);letter-spacing:-.02em}
h1,h2,h3,h4{text-wrap:balance}
p{text-wrap:pretty}
p,li{max-width:var(--measure)}
.wrap>p,.sec-head p{max-width:var(--measure)}

/* naslovi sekcij: ena velikost, ne pet */
.shead h2,.split-h{font-size:var(--fs-h2);line-height:var(--lh-tight);letter-spacing:-.03em}
.ssub{font-size:var(--fs-body);line-height:var(--lh-lead);color:var(--ink-50);max-width:52ch}
.kick{font-size:var(--fs-caption);letter-spacing:.14em;color:var(--ink-50)}

/* dolge slovenske besede */
html{hyphens:auto}
p,li,figcaption,.ssub{overflow-wrap:break-word}

/* ============ PLOSKOST ============
   Vseh 12 pregledanih strani v panogi je ploskih: nic senc na karticah,
   ploskve locene z barvo ozadja. RSN je imel 22 razlicnih senc. */
.fcard:hover,.gcard:hover,.kc:hover,.kcard,.demo,.gl-lbl{box-shadow:none}
.ugroup,.as-item,.rwall,.mtab,.gal-im,.uitem,.step,.proof-tile{box-shadow:none}
.ugroup,.as-item{border-color:var(--ink-30)}

/* ============ STANJA ============ */
:focus-visible{outline:2px solid var(--green-dark);outline-offset:3px;border-radius:var(--r-xs)}
a,button{transition:color var(--d-3) var(--e-std),background-color var(--d-3) var(--e-std),
                   border-color var(--d-3) var(--e-std),opacity var(--d-3) var(--e-std)}

/* ============ GUMBI: trije, ne enajst ============ */
.btn{border-radius:var(--r-pill);font-size:var(--fs-small);padding:14px 26px;
     transition:transform var(--d-2) var(--e-std),background-color var(--d-2) var(--e-std)}
.btn:active{transform:scale(.97)}
.btn:hover{background:var(--green-press)}
.btn-dark:hover{background:var(--ink-surface-2)}

/* puscice in tihi znaki: bile so pod 2:1 */
.uar,.ar{color:var(--ink-38)}
.uitem:hover .uar{color:var(--green-dark)}

/* zelena pika za naslovi je imela 1,66:1 -> postane temnejsa na svetlem */
.gdot{color:var(--green-dark)}

/* stena referenc: imena so bila 3,53:1 */
.rw-name{font-size:var(--fs-small);color:var(--ink-70)}
.rw-cell:hover .rw-name{color:var(--ink)}

/* ============ POPRAVKI PO MERITVI (drugi krog) ============ */

/* zelena za tekst: #024DA6 je na #F4F5F1 dal 4,47:1. Par popravljen na 5,24 / 4,79. */
:root{ --green-dark:#5C750E; }

/* puscice: .uitem .uar je imel visjo specificnost kot moj popravek */
.uitem .uar,.guide-row .ar,.who-list .wa{color:var(--ink-50)}
.uitem:hover .uar{color:var(--green-dark)}
/* puscica v temnem gumbu podeduje belo, ne ink */
.btn-dark .ar,.btn-dark:hover .ar{color:inherit}

/* KATALOG: beli napis je lezal na svetlem vzorcu folije (izmerjeno 1,89:1 s
   piksli, ne s sklepanjem). Dobi lasten scrim, ki drzi na svetlem IN temnem vzorcu. */
.sw-tag{background:rgba(6,20,43,.70);color:#fff;padding:5px 9px;border-radius:var(--r-xs);
        backdrop-filter:saturate(1.1) blur(2px);letter-spacing:.06em}

/* noga: belo besedilo pri .35 in .4 alfe je bilo pod 4,5:1 na temni podlagi */
footer p,footer a,.foot-tag,.foot-bottom span{color:rgba(255,255,255,.78)}
.foot-bottom .mock{color:rgba(255,255,255,.62)}
footer a:hover{color:#fff}

/* ============ POPRAVKI PO MERITVI (tretji krog) ============ */

/* Puscica v gumbu je bila --ink-38 NA zeleni podlagi = 2,28:1.
   Podeduje barvo napisa gumba, tako je pravilno in na vsaki podlagi. */
.btn .ar,.btn:hover .ar,.nav-cta .ar,.mc-cta .ar{color:inherit;opacity:.85}
.btn:hover .ar{opacity:1}

/* Zelena NIKOLI kot besedilo na svetlem. Ostanki: pika za stevilkami,
   stevilke v oznakah, napisi v oznakah. */
.stat em,.gdot,.sh-kick b,.ph-cap b,.kick b{color:var(--green-dark)}

/* Stevilke in drobne oznake so bile --ink-30 (1,41:1). --ink-30 je od zdaj
   samo za obrobe, besedilo dobi --ink-50. */
.rw-name em,.on-no,.toc b,.wn,.gn,.sn,.bn,.num{color:var(--ink-50)}

/* Noga: vrednosti so bile vpisane kot inline style, zato z visjo tezo. */
footer p[style],footer .fc-x{color:rgba(255,255,255,.78)!important}

/* ============ POPRAVKI PO MERITVI (cetrti krog, ujemanje specificnosti) ============ */
.stat b em{color:var(--green-dark)}            /* pika za stevilko: bila 1,51:1 na beli */
.opt .on-no{color:var(--ink-50)}               /* stevilka koraka: bila 1,41:1 */
.foot-grid h5{color:rgba(255,255,255,.72)}     /* naslovi stolpcev v nogi: bili 3,79:1 */

/* ============================================================
   SMER B · KONTRAST PLOSKEV
   Bela -> topla siva -> temna. Temno je tam, kjer govori znamka
   (reference, zakljucni poziv), nikoli tam, kjer dela stranka.
   Najvec dve temni sekciji na stran.
   ============================================================ */

.sec-ink{background:var(--ink-surface);color:rgba(255,255,255,.88);border:0}
.sec-ink h1,.sec-ink h2,.sec-ink h3,.sec-ink h4,.sec-ink .split-h{color:#fff}
.sec-ink p,.sec-ink li{color:rgba(255,255,255,.76)}
.sec-ink .kick{color:rgba(255,255,255,.58)}
.sec-ink .kick b{color:var(--lime-on-ink)}
.sec-ink .kick::before,.sec-ink .kick i{background:var(--lime-on-ink)}
.sec-ink .ssub{color:rgba(255,255,255,.66)}
.sec-ink .gdot{color:var(--lime-on-ink)}          /* na temnem je limeta 11,3:1 */
.sec-ink a{color:#fff}
.sec-ink .btn-dark{background:var(--lime-on-ink);color:var(--black)}
.sec-ink .btn-dark:hover{background:var(--green-press)}

/* stena referenc na temnem: ne tabela, ampak stena */
.sec-ink .rwall{background:transparent;border-color:rgba(255,255,255,.14);border-radius:0}
.sec-ink .rw-cell{border-color:rgba(255,255,255,.1);min-height:132px}
.sec-ink .rw-name{color:rgba(255,255,255,.82);font-size:var(--fs-small)}
.sec-ink .rw-name em{color:rgba(255,255,255,.46)}
.sec-ink .rw-cell:hover{background:rgba(3,99,212,.07)}
.sec-ink .rw-cell:hover .rw-name{color:#fff}
.sec-ink .rw-note p,.sec-ink .rw-note{color:rgba(255,255,255,.6)}

/* zakljucni poziv na temnem */
.final.sec-ink{background:var(--ink-surface)}
.final.sec-ink .as-item{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
.final.sec-ink .as-item b{color:#fff}
.final.sec-ink .as-item p{color:rgba(255,255,255,.68)}
.final.sec-ink .final-steps h4{color:#fff}
.final.sec-ink .final-steps span{color:rgba(255,255,255,.66)}
.final.sec-ink .final-steps b{color:var(--lime-on-ink)}
.final.sec-ink .tel{color:rgba(255,255,255,.72)}
.final.sec-ink .tel:hover{color:#fff}

/* ============ PLOSKOST NAMESTO OKVIRJEV ============
   Reference v panogi ne uporabljajo obrob okoli vsebinskih blokov.
   Stolpci se locijo z lasno crto, ne s skatlo. */
.ugroup{border:0;border-radius:0;padding:0;background:transparent;
        border-top:1px solid var(--ink-30);padding-top:var(--sp-6)}
.ugrid{gap:var(--sp-9)}
.as-item{border:0;border-top:1px solid var(--ink-30);border-radius:0;padding:var(--sp-6) 0 0}
.assure{gap:var(--sp-9)}
.rwall{border-radius:0}

/* ============ FOTOGRAFIJA: okvir miruje, slika se priblizuje ============ */
.uitem img,.gal-im img,.story-ph img,.hpanel img{will-change:transform}
.uitem img{width:46px;height:46px;border-radius:var(--r-xs);filter:saturate(.62) contrast(1.02);
           transition:filter var(--d-5) var(--e-out),transform var(--d-6) var(--e-out)}
.uitem{padding:var(--sp-4) var(--sp-3) var(--sp-4) 0;border-top:1px solid var(--ink-30);
       transition:background-color var(--d-3) var(--e-std),padding-left var(--d-4) var(--e-out)}
.uitem:first-child{border-top:1px solid var(--ink-30)}
.uitem:hover{background:rgba(14,19,16,.035);padding-left:var(--sp-3)}
.uitem:hover img{filter:saturate(1) contrast(1);transform:scale(1.07)}
.uitem b{font-size:var(--fs-small)}

.gal-im{border-radius:var(--r-sm)}
.gal-im img{transition:transform 1.1s var(--e-out),filter var(--d-5) var(--e-out);filter:saturate(.82)}
.gal-im:hover img{transform:scale(1.06);filter:saturate(1)}
.gal-im figcaption{font-size:var(--fs-caption);letter-spacing:.08em;
  background:linear-gradient(180deg,transparent,rgba(6,20,43,.82))}

.hpanel{border-radius:var(--r-md)}
.hpanel img{transition:transform 1.4s var(--e-out)}
.hpanel:hover img{transform:scale(1.06)}

.story-ph{border-radius:var(--r-md)}
.story-ph img{transition:transform 1.4s var(--e-out)}
.story-ph:hover img{transform:scale(1.04)}

/* ============ GIBANJE: samo tam, kjer ima nalogo ============ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* dokazne ploscice: skatle -> stolpci z lasno crto (kot vse ostalo) */
.proof{gap:var(--sp-7)}
.proof-tile{border:0;border-top:1px solid var(--ink-30);border-radius:0;padding:var(--sp-5) 0 0;background:transparent}
.proof-tile .ck{color:var(--ink-50)}
.proof-tile b{font-size:var(--fs-small)}

/* stena referenc: manj tabele, vec stene */
.sec-ink .rw-cell{border-color:rgba(255,255,255,.07)}
.sec-ink .rwall{border-color:rgba(255,255,255,.1)}

/* .final .fx a.tel ima barvo --ink (crno). Na temni sekciji je ostala vidna
   samo zelena podcrta. Ujemam specificnost. */
.final.sec-ink .fx a.tel{color:rgba(255,255,255,.86);border-bottom-color:var(--lime-on-ink)}
.final.sec-ink .fx a.tel:hover{color:#fff}
/* vrstica s povezavo na vodnik ima barvo v inline stilu */
.final.sec-ink p[style]{color:rgba(255,255,255,.64)!important}
.final.sec-ink p[style] a{color:rgba(255,255,255,.9)}
/* zakljucna sekcija dobi svoj ton, da se ne zlije z nogo v en dolg temen blok */
.final.sec-ink{background:var(--ink-surface-2);border-bottom:1px solid rgba(255,255,255,.08)}

/* Regresija: .sec-ink a{color:#fff} je pobelil tudi napis na zelenem gumbu,
   kjer mora biti skoraj crn (11,3:1), ne bel (1,66:1). */
.sec-ink a.btn,.sec-ink a.btn .ar,.sec-ink .btn-dark,.sec-ink .btn-dark .ar{color:var(--black)}
.toc a b{color:var(--ink-50)}   /* kazalo na vodniku: stevilke so bile 1,41:1 */

/* ============ TEMNE SEKCIJE: splosni gradniki (ne samo .final) ============ */
.sec-ink .steps .sball{background:var(--lime-on-ink);color:var(--black)}
.sec-ink .steps .sline i,.sec-ink .sline{background:rgba(255,255,255,.16)}
.sec-ink .step h3{color:#fff}
.sec-ink .step p{color:rgba(255,255,255,.72)}
.sec-ink .step .st{color:var(--lime-on-ink)}
.sec-ink .tel,.sec-ink a.tel{color:rgba(255,255,255,.82);border-bottom-color:var(--lime-on-ink)}
.sec-ink .tel:hover{color:#fff}
.sec-ink .chip-link{border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.86)}
.sec-ink .chip-link:hover{border-color:var(--lime-on-ink);background:rgba(3,99,212,.08)}
.sec-ink .chip-link i{background:var(--lime-on-ink)}
.sec-ink .proof-tile{border-top-color:rgba(255,255,255,.14)}
.sec-ink .proof-tile .ck{color:rgba(255,255,255,.55)}
.sec-ink .proof-tile b{color:#fff}
.sec-ink .proof-tile .pd i{color:rgba(255,255,255,.7)}
.sec-ink .ugroup,.sec-ink .as-item,.sec-ink .uitem{border-top-color:rgba(255,255,255,.14)}
.sec-ink .uitem:hover{background:rgba(255,255,255,.05)}
.sec-ink .uitem b{color:rgba(255,255,255,.9)}
.sec-ink .uar{color:rgba(255,255,255,.5)}
.sec-ink .uitem:hover .uar{color:var(--lime-on-ink)}
.sec-ink .rcount,.sec-ink figcaption{color:rgba(255,255,255,.7)}
.sec-ink .rfilter button{background:transparent;border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.82)}
.sec-ink .rfilter button:hover{border-color:rgba(255,255,255,.45)}
.sec-ink .rfilter button[aria-pressed="true"]{background:var(--lime-on-ink);color:var(--black);border-color:var(--lime-on-ink)}
/* sekcija pod temno ne sme imeti dvojne crte */
.sec-ink+.sec,.sec-ink+.band{border-top:0}

/* Stena referenc: samo vodoravne lasne crte, brez navpicnih in brez okvirja.
   S 16 imeni v tabeli je izgledalo kot preglednica, ne kot stena. */
.rwall{border:0}
.rw-cell{border-right:0;border-bottom:1px solid var(--ink-30);min-height:120px}
.rw-cell:nth-last-child(-n+4){border-bottom:0}
.sec-ink .rwall{border:0}
.sec-ink .rw-cell{border-right:0;border-bottom:1px solid rgba(255,255,255,.1)}
.sec-ink .rw-cell:nth-last-child(-n+4){border-bottom:0}
@media(max-width:760px){
  .rw-cell:nth-child(2n){border-right:0}
  .rw-cell:nth-last-child(-n+4){border-bottom:1px solid var(--ink-30)}
  .rw-cell:nth-last-child(-n+2){border-bottom:0}
  .sec-ink .rw-cell:nth-last-child(-n+4){border-bottom:1px solid rgba(255,255,255,.1)}
  .sec-ink .rw-cell:nth-last-child(-n+2){border-bottom:0}
}

/* hero: nekaj vec zraka med naslovom in kadri */
.hero-head{padding-bottom:var(--sp-7)}

/* gibanje: enotno trajanje in krivulja za razkrivanje */
html.js .rev{transition:opacity var(--d-6) var(--e-out),transform var(--d-6) var(--e-out)}

/* 10. stopnja: mono oznake. 10 px je bilo premajhno, 12,5 bi razbilo ozke postavitve. */
:root{ --fs-micro: clamp(0.688rem, 0.6764rem + 0.048vw, 0.719rem); } /* 11 -> 11.5 */

/* Na telefonu je bil tekstovni blok tako visok, da je scrim pojedel skoraj celo
   fotografijo. Kartica dobi visino, da se slika vidi nad besedilom. */
@media(max-width:820px){
  .hpanel{min-height:300px}
  .hp-body::before{top:-26px}
}
@media(max-width:640px){ .hpanel{min-height:276px} }

/* Fotografska vizualizacija namesto risanega diagrama (Tai, 22. 9.).
   Pravilo: vizual je prava fotografija ali pravi podatek, ne risana shema. */
.vizfoto{margin:0;background:transparent}
.vizfoto picture{display:block;border-radius:var(--r-md);overflow:hidden;background:var(--bg-soft)}
.vizfoto img{width:100%;height:auto;display:block}
/* podnapis POD sliko, ne cezenj: vpisani napisi na fotografiji se ne smejo prekrivati */
.vizfoto figcaption{padding:var(--sp-4) 2px 0;font-family:var(--m);font-size:var(--fs-micro);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-50)}

/* Slika je siroka 2,6:1 in ima vpisane odstotke. Na 390 px se izrise 350 px siroka
   in napisi postanejo neberljivi. Zato se na ozkem zaslonu pomika vodoravno pri
   sirini, kjer se napisi se berejo (680 px). Stevilke so tako ali tako tudi v besedilu nad sliko. */
@media(max-width:760px){
  .vizfoto picture{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-sm);scroll-snap-type:x proximity}
  .vizfoto picture img{min-width:680px;scroll-snap-align:start}
  .vizfoto img{min-width:680px}
  .vizfoto figcaption{display:flex;justify-content:space-between;gap:10px}
  .vizfoto figcaption::after{content:"povlecite vstran";color:var(--ink-38);white-space:nowrap}
}
@media(max-width:760px){ .vizfoto figcaption span{max-width:62%} }

/* Dvojni prikaz zunanja/notranja: ena siroka fotografija (3:1) namesto dveh risanih shem,
   pod njo ostane kontekst v dveh stolpcih. */
.vizfoto-wide picture{background:var(--bg-soft)}
.two.ctx{margin-top:var(--sp-9)}
.two.ctx .vs{border:0;background:transparent;padding:0;border-top:1px solid var(--ink-30);padding-top:var(--sp-6)}
.two.ctx .vs .vk{color:var(--ink-50)}
.two.ctx .vs h3{margin:var(--sp-3) 0 var(--sp-5)}
@media(max-width:900px){
  .vizfoto-wide picture{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-sm);scroll-snap-type:x proximity}
  .vizfoto-wide picture img{min-width:900px;scroll-snap-align:start}
  .vizfoto-wide figcaption{display:flex;justify-content:space-between;gap:10px}
  .vizfoto-wide figcaption::after{content:"povlecite vstran";color:var(--ink-38);white-space:nowrap}
  .two.ctx{gap:var(--sp-7)}
}

/* ============================================================
   KAJ VSE DELAMO · kartica z veliko fotografijo (22. 9., Tai: "obup")
   Barva pride iz fotografije in iz tihega tona druzine, ne iz novega accenta.
   Trije toni ustrezajo trem vrstam folij: toplo = sonce, hladno = steklo, globoko = varnost.
   ============================================================ */
.ugrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-7);align-items:stretch}
.ucard{display:flex;flex-direction:column;border:0;background:transparent;border-radius:0}
.uc-hero{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;
         background:var(--bg-soft);text-decoration:none;isolation:isolate}
.uc-hero img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e-out),filter var(--d-5) var(--e-out);
             filter:saturate(.9)}
.ucard:hover .uc-hero img{transform:scale(1.05);filter:saturate(1.04)}
.uc-tint{position:absolute;inset:0;z-index:1;mix-blend-mode:multiply;opacity:.5;transition:opacity var(--d-5) var(--e-out)}
.ucard:hover .uc-tint{opacity:.34}
.uc-hero::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(6,20,43,.42) 0%,transparent 40%,transparent 62%,rgba(6,20,43,.5) 100%)}
.uc-num{position:absolute;z-index:3;top:16px;left:18px;font-family:var(--m);font-size:var(--fs-micro);
        letter-spacing:.14em;color:rgba(255,255,255,.92)}
.uc-lab{position:absolute;z-index:3;bottom:16px;left:18px;right:18px;font-family:var(--m);
        font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.92)}

.tone-termo .uc-tint{background:linear-gradient(150deg,#F2A93B,#E2742A)}
.tone-deko  .uc-tint{background:linear-gradient(150deg,#7FA8C4,#4E7A96)}
.tone-varno .uc-tint{background:linear-gradient(150deg,#5F7A46,#243428)}

.uc-body{padding-top:var(--sp-6);display:flex;flex-direction:column;flex:1}
.uc-body h3{font-size:var(--fs-h4);letter-spacing:-.025em;margin-bottom:var(--sp-3)}
.uc-body .ug-lead{margin-bottom:var(--sp-5)}
.uc-body .ulist{margin-top:auto}
.uc-body .uitem{padding:var(--sp-4) 0;gap:0}
.uc-body .uitem b{font-size:var(--fs-small);font-weight:500}
.ucard .ug-all{margin-top:var(--sp-5)}

@media(max-width:1080px){ .ugrid{grid-template-columns:1fr;gap:var(--sp-9)} .uc-hero{aspect-ratio:16/9} }

/* Popravek: multiply preliv cez fotografijo je vse tri kartice potemnil v isto sivino.
   Barva gre v ploskev, oznako in crte, fotografija ostane naravna. */
.uc-tint{mix-blend-mode:normal;opacity:1;background:none!important;
  inset:auto 0 0 0;height:56%;pointer-events:none}
.tone-termo .uc-tint{background:linear-gradient(180deg,transparent,rgba(122,60,10,.62))!important}
.tone-deko  .uc-tint{background:linear-gradient(180deg,transparent,rgba(16,46,66,.62))!important}
.tone-varno .uc-tint{background:linear-gradient(180deg,transparent,rgba(18,34,22,.66))!important}
.ucard:hover .uc-tint{opacity:.88}
.uc-hero::after{background:linear-gradient(180deg,rgba(6,20,43,.30) 0%,transparent 34%)}
.uc-hero img{filter:saturate(1)}

/* oznaka na fotografiji postane cip v barvi druzine */
.uc-lab{left:14px;right:auto;bottom:14px;padding:7px 12px;border-radius:var(--r-pill);
        background:rgba(255,255,255,.14);backdrop-filter:blur(6px) saturate(1.2);
        border:1px solid rgba(255,255,255,.22);color:#fff}
.uc-num{top:14px;left:16px;color:rgba(255,255,255,.8)}

/* telo kartice dobi tih barvni pridih in barvno crto */
.uc-body{padding:var(--sp-6) var(--sp-5) var(--sp-5);border-radius:0 0 var(--r-lg) var(--r-lg);
         margin-top:-1px;border-top:2px solid}
.tone-termo .uc-body{background:linear-gradient(180deg,rgba(226,116,42,.07),transparent 62%);border-top-color:#E2742A}
.tone-deko  .uc-body{background:linear-gradient(180deg,rgba(78,122,150,.08),transparent 62%);border-top-color:#4E7A96}
.tone-varno .uc-body{background:linear-gradient(180deg,rgba(95,122,70,.09),transparent 62%);border-top-color:#5F7A46}
.uc-hero{border-radius:var(--r-lg) var(--r-lg) 0 0}
.tone-termo .uitem:hover .uar{color:#B4551A}
.tone-deko  .uitem:hover .uar{color:#35617D}
.tone-varno .uitem:hover .uar{color:#46612F}

/* ============ Prehod iz temne sekcije v "Kdo smo" (Tai: slab prehod, monotono) ============
   Fotografija postane polna ploskev cez celo sirino, tik pod temno sekcijo. */
.bandphoto{margin:0;position:relative;width:100%;aspect-ratio:24/7;overflow:hidden;background:var(--ink-surface)}
.bandphoto img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--e-out)}
.bandphoto:hover img{transform:scale(1.03)}
.bandphoto figcaption{position:absolute;left:0;right:0;bottom:0;padding:var(--sp-9) var(--sp-7) var(--sp-5);
  font-family:var(--m);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.9);background:linear-gradient(180deg,transparent,rgba(6,20,43,.72))}
.bandphoto figcaption span{max-width:var(--max);margin:0 auto;display:block;padding:0 var(--sp-5)}
@media(max-width:820px){ .bandphoto{aspect-ratio:16/10} }
.why.sec{padding-top:var(--sp-12)}

/* ============ Pomiritve: minimalne monolinijske ikone (Tai: kartice zgledajo obupno) ============ */
.as-item{display:flex;flex-direction:column;gap:var(--sp-4)}
.as-ic{width:38px;height:38px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;
       background:rgba(3,99,212,.12);border:1px solid rgba(3,99,212,.28);flex:0 0 auto}
.as-ic svg{width:21px;height:21px;fill:none;stroke:var(--lime-on-ink);stroke-width:1.5;
           stroke-linecap:round;stroke-linejoin:round}
.final.sec-ink .as-item{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);
       border-radius:var(--r-md);padding:var(--sp-6)}
.assure{gap:var(--sp-5)}

/* ============================================================
   STRAN "KAJ VSE DELAMO" · hero z ovalom + sticky kazalo
   (Tai: cela stran je nezanimiva in dolgocasna, hero naj bo bolj clean,
    mogoce ovalne oblike, naj bo dinamicno v vertikali)
   ============================================================ */
.uhero{padding:clamp(120px,13vw,170px) 0 clamp(60px,7vw,92px);overflow:hidden}
.uhero-in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,6vw,90px);align-items:center}
.uhero h1{font-size:var(--fs-display);line-height:1.0;letter-spacing:-.04em;margin-top:var(--sp-2)}
.uhero-lead{margin-top:var(--sp-6);max-width:46ch;font-size:var(--fs-lead);color:var(--ink-70);line-height:var(--lh-lead)}
.uhero-meta{margin-top:var(--sp-9);display:flex;gap:var(--sp-9);flex-wrap:wrap}
.uhero-meta span{display:flex;flex-direction:column;font-family:var(--m);font-size:var(--fs-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-50)}
.uhero-meta b{font-family:var(--h);font-size:var(--fs-h3);font-weight:600;letter-spacing:-.03em;
  color:var(--ink);text-transform:none;margin-bottom:var(--sp-1)}

/* oval: elipsa iz razmerja 4/5 */
.uhero-oval{aspect-ratio:4/5;border-radius:50%;overflow:hidden;background:var(--bg-soft);
  position:relative;transform:rotate(-2deg)}
.uhero-oval img{width:100%;height:100%;object-fit:cover;transform:scale(1.06) rotate(2deg);
  transition:transform 1.8s var(--e-out)}
.uhero-oval:hover img{transform:scale(1.12) rotate(2deg)}
.uhero-oval::after{content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(14,19,16,.10)}

/* postavitev s sticky kazalom */
.uplay{padding:0 0 clamp(60px,8vw,110px)}
.uplay-in{display:grid;grid-template-columns:250px 1fr;gap:clamp(30px,5vw,72px);align-items:start}
.uplay-nav{position:sticky;top:104px;display:flex;flex-direction:column;gap:var(--sp-8)}
.un-grp{display:flex;flex-direction:column}
.un-lab{font-family:var(--m);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-50);padding-bottom:var(--sp-3);border-bottom:1px solid var(--ink-30);margin-bottom:var(--sp-2)}
.uplay-nav a{display:flex;gap:var(--sp-4);align-items:baseline;padding:var(--sp-3) 0;text-decoration:none;
  font-size:var(--fs-small);color:var(--ink-50);transition:color var(--d-3) var(--e-std),padding-left var(--d-4) var(--e-out)}
.uplay-nav a:hover{color:var(--ink);padding-left:var(--sp-2)}
.un-n{font-family:var(--m);font-size:var(--fs-micro);color:var(--ink-38);flex:0 0 auto}
.uplay-nav a.on{color:var(--ink);font-weight:500}
.uplay-nav a.on .un-n{color:var(--green-dark)}

.uplay-head{font-size:var(--fs-lead);color:var(--ink-70);max-width:52ch;margin:0 0 var(--sp-9)}
.uplay-main .uplay-head:not(:first-child){margin-top:var(--sp-12);padding-top:var(--sp-9);border-top:1px solid var(--ink-30)}
.ublock{scroll-margin-top:112px;padding:var(--sp-9) 0;border-top:1px solid var(--ink-07)}
.ublock:first-of-type{border-top:0;padding-top:0}
.ublock .usplit{grid-template-columns:.9fr 1.1fr;gap:var(--sp-9);align-items:center}
.ublock .uph{aspect-ratio:1/1;border-radius:var(--r-xl)}
.ublock:nth-child(even) .uph{border-radius:50% 50% 50% 50% / 42% 42% 58% 58%}

@media(max-width:1080px){
  .uhero-in{grid-template-columns:1fr}
  .uhero-oval{max-width:340px;margin-top:var(--sp-8)}
  .uplay-in{grid-template-columns:1fr}
  .uplay-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:var(--sp-6);margin-bottom:var(--sp-9)}
  .un-grp{flex:1 1 260px}
  .ublock .usplit{grid-template-columns:1fr}
}

/* ============================================================
   KONFIGURATOR (Tai: naj bo bolj clean, ne tako velik, znajdljiv,
   z istim karakterjem kot ostala stran)
   ============================================================ */
.ka-head{border-bottom:1px solid var(--ink-30)}
.ka-title{font-size:var(--fs-small)}
.ka-sub{font-size:var(--fs-micro);letter-spacing:.12em}

/* koraki: tanjse, brez velikih zaokrozenih blokov */
.ka-rail button,.ka-steps button{border-radius:var(--r-sm)}
.ka-rail .rl{padding:var(--sp-3) var(--sp-4);border-radius:var(--r-sm)}

/* izbirne kartice: manjse, ploske, z lasno crto namesto skatle */
.choice{border:1px solid var(--ink-30);border-radius:var(--r-md);padding:var(--sp-5);
        background:var(--bg);box-shadow:none;transition:border-color var(--d-3) var(--e-std),
        background-color var(--d-3) var(--e-std),transform var(--d-2) var(--e-std)}
.choice:hover{border-color:var(--ink-38);background:var(--bg-soft)}
.choice:active{transform:scale(.99)}
.choice.on{border-color:var(--green-dark);background:rgba(3,99,212,.10);box-shadow:inset 0 0 0 1px var(--green-dark)}
.choice h4,.choice .ch-t{font-size:var(--fs-small);letter-spacing:-.01em}
.choice p,.choice .ch-d{font-size:var(--fs-caption);color:var(--ink-50)}
.choice svg{width:22px;height:22px}
.choice-grid{gap:var(--sp-4)}

/* izdelki */
.prod{border:1px solid var(--ink-30);border-radius:var(--r-md);box-shadow:none}
.prod:hover{border-color:var(--ink-38);background:var(--bg-soft)}
.prod.on{border-color:var(--green-dark);box-shadow:inset 0 0 0 1px var(--green-dark)}
.pname b{font-size:var(--fs-small)}
.pez{font-size:var(--fs-caption);color:var(--ink-70)}
.pspec span{font-size:var(--fs-micro)}

/* desni predogled */
.kv-card{border:1px solid var(--ink-30);border-radius:var(--r-lg);box-shadow:none}

/* namig, da klik na kartico pelje naprej */
.ka-hint{font-family:var(--m);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;
         color:var(--ink-50);margin-top:var(--sp-5);display:flex;align-items:center;gap:var(--sp-3)}
.ka-hint::before{content:"";width:18px;height:1px;background:var(--green-dark);flex:0 0 auto}

/* Stevilo montaz pod steno referenc (Tai, 22. 9.).
   ⚠ 1.500 je stevilka, ki jo mora potrditi RSN, preden gre stran v zrak. */
.rw-count{margin-top:var(--sp-9);padding-top:var(--sp-7);border-top:1px solid var(--ink-30);
  display:flex;align-items:baseline;gap:var(--sp-5);flex-wrap:wrap}
.rw-count b{font-family:var(--h);font-weight:600;font-size:var(--fs-h2);letter-spacing:-.04em;line-height:1}
.rw-count span{font-size:var(--fs-body);color:var(--ink-50);max-width:46ch}
.sec-ink .rw-count{border-top-color:rgba(255,255,255,.14)}
.sec-ink .rw-count b{color:var(--lime-on-ink)}
.sec-ink .rw-count span{color:rgba(255,255,255,.72)}
@media(max-width:640px){ .rw-count{gap:var(--sp-3)} }

/* ============================================================
   POPRAVEK: v SVG je font-size v enotah viewBoxa, ne v pikslih.
   Preslikava na tipografsko skalo je tam vstavila rem vrednosti in
   razbila merilo (npr. .shat .cap z 8 na ~11,5 -> besedilo je ušlo iz okvirja).
   Te vrednosti se vracajo na izvirne.
   ============================================================ */
.eflow .zl{font-size:8px}
.shat .zl{font-size:8px}
.shat .cap{font-size:8px}

/* .wow-gl je bil sticky in je pri skrolanju zdrsnil cez vrstico .wow-ros pod sabo
   (Tai: "tukaj crasha"). Sekcija je kratka, sticky tu ne prinese nicesar. */
.wow-gl{position:relative;top:auto}
.wow-ros{position:relative;z-index:2}

/* besedilo ob videu na varnostnih */
.video-ctx{margin-top:var(--sp-6);max-width:var(--measure)}
.video-ctx p{color:var(--ink-70);margin-bottom:var(--sp-4)}
.video-ctx .video-note{font-family:var(--m);font-size:var(--fs-micro);letter-spacing:.06em;
  color:var(--ink-50);margin-bottom:0}

/* ============================================================
   PAKET 22. 9. (drugi krog pripomb)
   ============================================================ */

/* --- "Kaj vse delamo": vrstice -> kompaktni cipi, ker je sekcija razpotegnila stran --- */
.uchips{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:auto;padding-top:var(--sp-4)}
.uchip{display:inline-flex;align-items:center;padding:7px 13px;border-radius:var(--r-pill);
  border:1px solid var(--ink-30);font-size:var(--fs-caption);color:var(--ink-70);text-decoration:none;
  transition:border-color var(--d-3) var(--e-std),background-color var(--d-3) var(--e-std),color var(--d-3) var(--e-std)}
.uchip:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.tone-termo .uchip:hover{background:#8C4A12;border-color:#8C4A12}
.tone-deko  .uchip:hover{background:#2C5570;border-color:#2C5570}
.tone-varno .uchip:hover{background:#3C5428;border-color:#3C5428}
.uc-hero{aspect-ratio:16/11}
.uc-body{padding:var(--sp-5) var(--sp-4) var(--sp-4)}
.uc-body h3{font-size:var(--fs-h4)}
.uc-body .ug-lead{font-size:var(--fs-small);margin-bottom:var(--sp-4)}
.ucard .ug-all{margin-top:var(--sp-4)}
.ugrid{gap:var(--sp-6)}

/* --- HERO: vecji, slike naj padejo v oci --- */
.hero-head{padding-top:clamp(112px,11vw,140px);padding-bottom:var(--sp-6)}
.hero-head h1{font-size:var(--fs-display)}
.panels{gap:var(--sp-4)}
.hpanel{border-radius:var(--r-lg)}
@media(min-width:821px){
  .hero{height:auto;min-height:0;padding-bottom:var(--sp-9)}
  .panels{height:clamp(440px,52vw,620px)}
  .hpanel{flex:1}
  .hpanel:hover{flex:1.55}
}
.hp-body h2{font-size:var(--fs-h3)}

/* --- NAVIGACIJA: plavajoca, ovalna --- */
body>nav#nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);width:min(1360px,calc(100% - 28px));
  border:1px solid rgba(14,19,16,.10);border-radius:var(--r-pill);background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 1px 2px rgba(14,19,16,.04),0 8px 24px rgba(14,19,16,.06);z-index:300;
  transition:background-color var(--d-4) var(--e-std),box-shadow var(--d-4) var(--e-std),top var(--d-4) var(--e-std)}
body>nav#nav.solid{background:rgba(255,255,255,.92)}
body>nav#nav .nav-in{padding:10px 12px 10px 20px;border-bottom:0;max-width:none}
body>nav#nav .nav-links{gap:clamp(14px,1.6vw,26px)}
body>nav#nav .nav-links a{font-size:var(--fs-small)}
body>nav#nav .btn.nav-cta{padding:11px 20px;font-size:var(--fs-caption)}
body>nav#nav .lg{max-height:34px;width:auto}
section{scroll-margin-top:96px}
@media(max-width:820px){
  body>nav#nav{top:10px;width:calc(100% - 20px);border-radius:var(--r-xl)}
  body>nav#nav .nav-in{padding:8px 10px 8px 14px}
}

/* --- Nekateri naslovi so bili preveliki in so izpadli neprofesionalno --- */
.shead h2,.split-h{font-size:clamp(1.75rem,2.6vw,2.5rem)}   /* 28 -> 40 px */
.phead h1,.uhero h1{font-size:clamp(2.25rem,4.6vw,3.5rem)}  /* 36 -> 56 px */
.final h2{font-size:clamp(1.9rem,3.2vw,2.75rem)}
.ssub{font-size:var(--fs-small)}

/* --- KONFIGURATOR: vse skupaj manjse in tesneje (Tai: prevelik, prevec zavzame) --- */
.ka-head{padding:10px 18px}
.ka-title{font-size:var(--fs-caption)}
.ka-sub{font-size:10.5px;letter-spacing:.1em}
.ka-head .btn,.ka-head button{padding:8px 14px;font-size:var(--fs-caption)}
.ka-wrap,.ka-body{gap:var(--sp-6)}
.ka-side{width:210px}
.ka-rail{gap:2px}
.ka-rail .rl{padding:9px 12px;gap:10px}
.ka-rail .rl .rn{width:24px;height:24px;font-size:11px}
.ka-rail .rl b{font-size:var(--fs-caption)}
.ka-rail .rl span{font-size:10.5px}
.fpane{padding:var(--sp-6)}
.fpane h2,.fpane .fh{font-size:clamp(1.4rem,2.1vw,1.85rem)}
.fpane>p{font-size:var(--fs-small);max-width:58ch}
.choice{padding:var(--sp-4)}
.choice svg{width:19px;height:19px}
.choice-grid{gap:var(--sp-3)}
.prod{padding:var(--sp-4)}
.kv{width:300px}
.kv-card{padding:var(--sp-5)}
.kv-card .kvbig,.kv .kvbig{font-size:clamp(1.6rem,2.4vw,2.1rem)}
.ka-main{padding:var(--sp-6) var(--sp-6) var(--sp-9)}
@media(max-width:1180px){ .ka-side,.kv{width:auto} }

/* .panels je flex otrok stolpca, zato flex-basis premaga height in so se kartice
   sesedle na 0. Potrebuje flex:none. */
@media(min-width:821px){
  .panels{flex:none;height:clamp(440px,50vw,600px)}
}

/* ============================================================
   NAVIGACIJA · popravka + prosojno steklo kot jezik strani
   1) centriranje s transform je povozilo pravilo .hide (translateY),
      zato je nav ob skrolu odletel v levo. Centriram z margin:auto.
   2) pilula je bila vedno svetla, napisi nad temnim herojem pa beli,
      zato se ni nic videlo. Zdaj se pilula prilagodi podlagi.
   ============================================================ */
body>nav#nav{left:0;right:0;transform:none;margin:0 auto;
  width:min(1360px,calc(100% - 28px));
  transition:background-color var(--d-4) var(--e-std),border-color var(--d-4) var(--e-std),
             box-shadow var(--d-4) var(--e-std),transform .45s var(--ease)}
body>nav#nav.hide{transform:translateY(-140%)}

/* nad temnim herojem: temno steklo, beli napisi (privzeto stanje produktnih strani) */
body>nav#nav:not(.solid){background:rgba(14,19,16,.34);border-color:rgba(255,255,255,.18);
  box-shadow:0 8px 30px rgba(6,20,43,.18)}
/* nad svetlim herojem (domaca stran): svetlo steklo */
body.light-hero>nav#nav:not(.solid){background:rgba(255,255,255,.70);border-color:rgba(14,19,16,.10);
  box-shadow:0 1px 2px rgba(14,19,16,.04),0 8px 24px rgba(14,19,16,.06)}
/* po skrolu: svetlo steklo povsod */
body>nav#nav.solid{background:rgba(255,255,255,.84);border-color:rgba(14,19,16,.10);
  box-shadow:0 1px 2px rgba(14,19,16,.04),0 10px 30px rgba(14,19,16,.07)}

/* ============================================================
   "KAJ VSE DELAMO" · trije polni pasovi s prosojno stekleno plosco
   Brez stolpcev in brez kartic (Tai). Jezik je isti kot pri navigaciji:
   zamegljeno steklo nad fotografijo, kar je za podjetje s folijami
   za steklo tudi pomensko pravilno.
   ============================================================ */
.ubands{display:flex;flex-direction:column;gap:var(--sp-5)}
.uband{position:relative;border-radius:var(--r-xl);overflow:hidden;min-height:clamp(340px,34vw,420px);
  display:flex;align-items:center;isolation:isolate}
.uband-ph{position:absolute;inset:0;z-index:0}
.uband-ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--e-out)}
.uband:hover .uband-ph img{transform:scale(1.04)}
.uband::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(6,20,43,.42),rgba(6,20,43,.06) 62%)}
.uband.flip::after{background:linear-gradient(270deg,rgba(6,20,43,.42),rgba(6,20,43,.06) 62%)}

.uband-glass{position:relative;z-index:2;margin:var(--sp-6);padding:var(--sp-7);max-width:min(560px,52%);
  border-radius:var(--r-lg);background:rgba(255,255,255,.62);
  backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 1px 2px rgba(6,20,43,.05),0 18px 50px rgba(6,20,43,.14)}
.uband.flip{justify-content:flex-end}
.uband-k{font-family:var(--m);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-50);display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.uband-k span{color:var(--green-dark)}
.uband h3{font-size:var(--fs-h3);letter-spacing:-.03em;margin-bottom:var(--sp-3)}
.uband-lead{font-size:var(--fs-small);color:var(--ink-70);margin-bottom:var(--sp-5);max-width:44ch}
.uband .uchips{margin-top:0;padding-top:0}
.uband .uchip{background:rgba(255,255,255,.5);border-color:rgba(14,19,16,.16)}
.uband-all{display:inline-flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-5);
  font-family:var(--m);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink-30);padding-bottom:4px;
  transition:border-color var(--d-3) var(--e-std)}
.uband-all:hover{border-bottom-color:var(--ink)}
@media(max-width:860px){
  .uband{min-height:0;flex-direction:column;align-items:stretch}
  .uband-ph{position:relative;aspect-ratio:16/10}
  .uband::after{inset:0 0 auto 0;height:100%}
  .uband-glass{max-width:none;margin:calc(-1 * var(--sp-9)) var(--sp-4) var(--sp-4);padding:var(--sp-6)}
}

/* ============================================================
   PROSOJNO STEKLO KOT JEZIK STRANI (Tai: uporabi ta Apple videz
   po strani kot dizajnerski poudarek za premium obcutek)
   ============================================================ */

/* --- pomiritve na temni sekciji: steklo namesto skatel --- */
.final.sec-ink .assure{gap:var(--sp-4)}
.final.sec-ink .as-item{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg);padding:var(--sp-6);
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  transition:background-color var(--d-4) var(--e-std),border-color var(--d-4) var(--e-std)}
.final.sec-ink .as-item:hover{background:rgba(255,255,255,.10);border-color:rgba(3,99,212,.34)}
.as-ic{background:rgba(3,99,212,.16);border-color:rgba(3,99,212,.34);border-radius:var(--r-pill);
  width:40px;height:40px}

/* --- kartice s fotografijo na produktnih straneh: napis na steklu cez sliko --- */
.uc.uc-ph{border:0;border-radius:var(--r-lg);overflow:hidden;background:var(--bg-soft);position:relative;
  box-shadow:none;isolation:isolate}
.uc.uc-ph .pstrip{border-radius:0;overflow:hidden}
.uc.uc-ph .pstrip img{transition:transform 1.4s var(--e-out)}
.uc.uc-ph:hover .pstrip img{transform:scale(1.05)}
.uc.uc-ph .uc-b,.uc.uc-ph>div:last-child{position:relative;z-index:2;margin:-46px var(--sp-3) var(--sp-3);
  padding:var(--sp-5);border-radius:var(--r-md);
  background:rgba(255,255,255,.66);backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);border:1px solid rgba(255,255,255,.6);
  box-shadow:0 10px 30px rgba(6,20,43,.10)}

/* --- stekleni poudarek na cipih in gumbih po strani --- */
.chip-link{backdrop-filter:blur(10px) saturate(1.3);-webkit-backdrop-filter:blur(10px) saturate(1.3);
  background:rgba(255,255,255,.55)}
.rfilter button{backdrop-filter:blur(10px) saturate(1.3);-webkit-backdrop-filter:blur(10px) saturate(1.3)}
/* fotografije v kartici naj bodo enako visoke, da se steklene plosce poravnajo */
.uc.uc-ph .pstrip{aspect-ratio:16/9;height:auto}
.uc.uc-ph .pstrip img{width:100%;height:100%;object-fit:cover}

/* ============================================================
   PRODUKTNE STRANI · dvig na jezik indexa (Tai: rabim visji nivo)
   Dva vzorca, ki se ponavljata: fotografska kartica in seznam z
   zivim predogledom. Oba dobita isto stekleno govorico.
   ============================================================ */

/* --- 1) fotografska kartica: napis na stekleni plosci cez sliko --- */
.uc.uc-ph{display:grid;gap:var(--sp-5)}
.uc.uc-ph>div{position:relative;border:0;background:transparent;padding:0;border-radius:var(--r-lg);
  overflow:hidden;isolation:isolate;box-shadow:none}
.uc.uc-ph .pstrip{display:block;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;background:var(--bg-soft)}
.uc.uc-ph .pstrip img{width:100%;height:100%;object-fit:cover;transition:transform 1.5s var(--e-out)}
.uc.uc-ph>div:hover .pstrip img{transform:scale(1.05)}
.uc-t{position:relative;z-index:2;display:block;margin:-64px var(--sp-3) var(--sp-3);padding:var(--sp-5);
  border-radius:var(--r-md);background:rgba(255,255,255,.66);
  backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid rgba(255,255,255,.62);box-shadow:0 12px 34px rgba(6,20,43,.12);
  transition:background-color var(--d-4) var(--e-std)}
.uc.uc-ph>div:hover .uc-t{background:rgba(255,255,255,.78)}
.uc-t b{display:block;font-family:var(--h);font-weight:600;font-size:var(--fs-small);
  letter-spacing:-.015em;margin-bottom:var(--sp-2)}
.uc-t p{font-size:var(--fs-caption);color:var(--ink-70);line-height:1.5;margin:0}

/* --- 2) seznam z zivim predogledom --- */
.opt-list{display:flex;flex-direction:column;border-top:1px solid var(--ink-30)}
.opt{display:grid;grid-template-columns:34px 1fr auto;gap:var(--sp-4);align-items:start;
  padding:var(--sp-5) var(--sp-4) var(--sp-5) var(--sp-3);border:0;border-bottom:1px solid var(--ink-07);
  background:transparent;text-align:left;cursor:pointer;position:relative;border-radius:var(--r-sm);
  transition:background-color var(--d-3) var(--e-std),padding-left var(--d-4) var(--e-out)}
.opt::before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:2px;border-radius:2px;
  background:var(--lime-on-ink);opacity:0;transition:opacity var(--d-3) var(--e-std)}
.opt:hover{background:rgba(14,19,16,.028);padding-left:var(--sp-5)}
.opt.on{background:rgba(3,99,212,.10);padding-left:var(--sp-5)}
.opt.on::before{opacity:1}
.opt .on-no{font-family:var(--m);font-size:var(--fs-micro);color:var(--ink-38);padding-top:3px}
.opt.on .on-no{color:var(--green-dark)}
.opt b{display:block;font-family:var(--h);font-weight:600;font-size:var(--fs-small);letter-spacing:-.015em}
.opt small{display:block;font-size:var(--fs-caption);color:var(--ink-50);line-height:1.5;margin-top:3px}
.opt .bar{display:block;height:3px;border-radius:3px;background:rgba(14,19,16,.10);margin-top:var(--sp-4);
  overflow:hidden;max-width:220px}
.opt .bar i{display:block;height:100%;border-radius:3px;background:var(--ink-38);
  transition:width var(--d-5) var(--e-out),background-color var(--d-3) var(--e-std)}
.opt.on .bar i{background:var(--green-dark)}
.opt .ov{font-family:var(--m);font-size:var(--fs-caption);color:var(--ink-50);white-space:nowrap;padding-top:3px}
.opt.on .ov{color:var(--green-dark)}

/* predogled: steklen okvir namesto navadne skatle */
.wow-gl,.wow-ph{border-radius:var(--r-xl);border:1px solid rgba(14,19,16,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(240,243,240,.9));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 50px rgba(6,20,43,.08)}
.gl-cap,.ph-cap,.w-cap{backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  background:rgba(6,20,43,.62);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-pill);
  padding:8px 14px;color:rgba(255,255,255,.95)}
.wow-ros{margin-top:var(--sp-7);padding-top:var(--sp-6);border-top:1px solid var(--ink-30);gap:var(--sp-9)}
.wow-ros .ro b{font-family:var(--h);font-weight:600;letter-spacing:-.035em}
/* kartice se ne raztegujejo na visino najvisje, sicer se steklene plosce ne poravnajo */
.uc.uc-ph{align-items:start}

/* ============================================================
   KONFIGURATOR · popolna preureditev (Tai: isti jezik kot index
   in nav bar, clean, minimalisticno, RSN karakter)
   Levi stolpec odpade, koraki gredo v vodoravni trak,
   glava postane plavajoca steklena pilula.
   ============================================================ */

/* --- glava: plavajoca steklena pilula, enako kot navigacija --- */
.ka-top{position:fixed;top:14px;left:0;right:0;margin:0 auto;height:auto;
  width:min(1360px,calc(100% - 28px));
  padding:10px 12px 10px 20px;gap:var(--sp-5);
  border:1px solid rgba(14,19,16,.10);border-radius:var(--r-pill);
  background:rgba(255,255,255,.80);
  backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:0 1px 2px rgba(14,19,16,.04),0 10px 30px rgba(14,19,16,.07);z-index:300}
.ka-logo img{height:30px}
.ka-title b{font-family:var(--h);font-weight:600;font-size:var(--fs-caption);letter-spacing:-.01em}
.ka-title span{font-family:var(--m);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-50)}
.ka-tools{margin-left:auto;display:flex;align-items:center;gap:var(--sp-3)}
.ka-tbtn{border-radius:var(--r-pill);padding:9px 15px;border:1px solid var(--ink-30);
  background:rgba(255,255,255,.6);font-size:var(--fs-caption);gap:8px;
  transition:border-color var(--d-3) var(--e-std),background-color var(--d-3) var(--e-std)}
.ka-tbtn:hover{border-color:var(--ink-38);background:#fff}
.ka-tbtn svg{width:16px;height:16px}
.ka-saved{font-family:var(--m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-50)}

/* --- postavitev: brez levega stolpca --- */
.ka-shell{padding-top:calc(var(--ka-top-h) + 22px);background:var(--bg-soft);
  grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:auto minmax(0,1fr);
  column-gap:var(--sp-7);padding-left:var(--sp-7);padding-right:var(--sp-7)}
.ka-rail{grid-column:1/-1;grid-row:1;background:transparent;border:0;
  padding:0 0 var(--sp-6);flex-direction:row;align-items:center;gap:var(--sp-4);overflow:visible}
.ka-rail-h,.ka-rail-foot{display:none}
.ka-main{grid-column:1;grid-row:2;padding:0 0 var(--sp-12);background:transparent}
.ka-side{grid-column:2;grid-row:2;background:transparent;border:0;padding:0 0 var(--sp-12)}
@media(min-width:1181px){ .ka-rail{height:auto;overflow:visible} }

/* --- koraki: vodoravni trak minimalnih pilul --- */
.konf-app .rail{flex-direction:row;gap:var(--sp-2);flex-wrap:wrap;width:100%}
.konf-app .rail button{display:flex;align-items:center;gap:9px;width:auto;
  padding:8px 14px 8px 9px;border-radius:var(--r-pill);border:1px solid transparent;
  background:transparent;grid-template-columns:none;grid-template-rows:none;
  transition:background-color var(--d-3) var(--e-std),border-color var(--d-3) var(--e-std)}
.konf-app .rail button span:nth-child(2){font-size:var(--fs-caption);font-weight:500}
.konf-app .rail button span:nth-child(3){display:none}
.konf-app .rail .rn{width:22px;height:22px;border-radius:50%;font-family:var(--m);font-size:10.5px;
  display:flex;align-items:center;justify-content:center;background:rgba(14,19,16,.08);color:var(--ink-50)}
.konf-app .rail button.done .rn{background:var(--lime-on-ink);color:var(--black)}
.konf-app .rail button.on{background:rgba(255,255,255,.8);border-color:rgba(14,19,16,.10);
  backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4);
  box-shadow:0 1px 2px rgba(14,19,16,.04),0 6px 18px rgba(14,19,16,.06)}
.konf-app .rail button.on .rn{background:var(--ink);color:#fff}
.konf-app .rail button:not(.on):hover{background:rgba(255,255,255,.55)}

/* --- vsebina: steklena plosca namesto bele skatle --- */
.konf-app .kcard{border-radius:var(--r-xl);padding:var(--sp-9) var(--sp-9) var(--sp-10);
  background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.7);
  backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:0 1px 2px rgba(6,20,43,.04),0 18px 50px rgba(6,20,43,.07)}
.ka-main-in{max-width:720px}

/* --- izbire: steklene ploscice --- */
.choice{background:rgba(255,255,255,.55);border:1px solid rgba(14,19,16,.10);
  backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);
  border-radius:var(--r-lg)}
.choice:hover{background:rgba(255,255,255,.9);border-color:rgba(14,19,16,.20);transform:translateY(-1px)}
.choice.on{background:rgba(3,99,212,.14);border-color:var(--green-dark);box-shadow:inset 0 0 0 1px var(--green-dark)}
.prod{background:rgba(255,255,255,.62);border-color:rgba(14,19,16,.10);border-radius:var(--r-lg)}
.prod:hover{background:rgba(255,255,255,.92)}

/* --- predogled: steklena kartica --- */
.kv-card{border-radius:var(--r-xl);background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.7);
  backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:0 1px 2px rgba(6,20,43,.04),0 18px 50px rgba(6,20,43,.07);padding:var(--sp-5)}
.kv-scene{border-radius:var(--r-lg);overflow:hidden}

/* --- namig o kliku --- */
.ka-hint{opacity:.9}

@media(max-width:1180px){
  .ka-shell{grid-template-columns:1fr;padding-left:var(--sp-5);padding-right:var(--sp-5)}
  .ka-rail,.ka-main,.ka-side{grid-column:1}
  .ka-rail{grid-row:1;overflow-x:auto;flex-wrap:nowrap}
  .ka-side{grid-row:2}
  .ka-main{grid-row:3}
  .konf-app .kcard{padding:var(--sp-6)}
}

/* vsebina naj zapolni stolpec, sicer med njo in predogledom zija praznina */
.ka-main-in{max-width:none}
.konf-app .kcard{max-width:820px}
/* predogled: steklena kartica se ni prijela, ker je .kv nosilec, ne .kv-card */
.kv{position:sticky;top:calc(var(--ka-top-h) + 30px);border-radius:var(--r-xl);
  background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.72);
  backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:0 1px 2px rgba(6,20,43,.04),0 18px 50px rgba(6,20,43,.07);padding:var(--sp-5)}
.kv-card{background:transparent;border:0;box-shadow:none;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none}

/* ============================================================
   KONFIGURATOR · lastna, kompaktna skala (Tai: vse je ogromno,
   ni minimalisticno, natrpano). Orodje ne sme podedovati
   oglasne skale strani: vprasanja so se izrisovala pri 46 px.
   ============================================================ */
.ka-shell{
  --fs-body:14.5px; --fs-small:13.5px; --fs-caption:12.5px; --fs-micro:11px;
  --fs-h4:16px; --fs-h3:19px; --fs-h2:23px; --fs-h1:26px; --fs-lead:15.5px;
  font-size:14.5px;
}
.ka-shell .split-h,.ka-shell .shead h2,.ka-shell h2,.ka-shell .fh{
  font-size:clamp(1.25rem,1.6vw,1.5rem);line-height:1.18;letter-spacing:-.025em}
.ka-shell h3{font-size:16px;letter-spacing:-.015em}
.ka-shell p{font-size:14.5px;line-height:1.55;max-width:60ch}
.ka-shell .kick,.ka-shell .ka-hint{font-size:11px;letter-spacing:.12em}

/* --- plosca: manj notranjega prostora --- */
.konf-app .kcard{padding:var(--sp-7) var(--sp-7) var(--sp-8);border-radius:var(--r-lg);max-width:none}
.ka-shell{padding-top:calc(var(--ka-top-h) + 10px);column-gap:var(--sp-6)}
.ka-main{padding-bottom:var(--sp-10)}

/* --- glava: nizja --- */
.ka-top{padding:8px 10px 8px 16px}
.ka-logo img{height:26px}
.ka-tbtn{padding:7px 13px;font-size:12.5px}
.ka-tbtn svg{width:14px;height:14px}
.ka-title b{font-size:12.5px}
.ka-title span{font-size:10px}

/* --- koraki: drobne pilule --- */
.ka-rail{padding-bottom:var(--sp-5)}
.konf-app .rail button{padding:5px 11px 5px 6px;gap:7px}
.konf-app .rail .rn{width:18px;height:18px;font-size:9.5px}
.konf-app .rail button span:nth-child(2){font-size:12.5px;font-weight:500}

/* --- vrstica o shranjenem napredku: iz crnega bloka v tiho vrstico --- */
.ka-resume{background:transparent;border:1px solid var(--ink-30);border-radius:var(--r-pill);
  padding:8px 8px 8px 16px;color:var(--ink-70);display:flex;align-items:center;gap:var(--sp-4);
  font-size:12.5px;margin-bottom:var(--sp-5)}
.ka-resume b{font-weight:500;font-size:12.5px;color:var(--ink)}
.ka-resume .btn,.ka-resume button{padding:6px 13px;font-size:11.5px;background:var(--ink);color:#fff;
  border-radius:var(--r-pill);margin-left:auto}

/* --- izbire: tesneje, dvokolonsko --- */
.choice-grid{gap:var(--sp-3);grid-template-columns:repeat(2,minmax(0,1fr))}
.choice{padding:14px 16px;border-radius:var(--r-md)}
.choice svg{width:17px;height:17px;margin-bottom:8px}
.choice b,.choice h4,.choice .ch-t{font-size:14px;line-height:1.25}
.choice p,.choice .ch-d{font-size:12.5px;line-height:1.45;color:var(--ink-50);margin-top:3px}

/* --- "ne veste, katera je prava": iz velike skatle v tiho vrstico --- */
.konf-app .hintbox,.konf-app .skipbox,.ka-shell .kh{background:rgba(3,99,212,.10);
  border:1px solid rgba(3,99,212,.30);border-radius:var(--r-md);padding:14px 16px;
  display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.konf-app .hintbox b,.konf-app .skipbox b{font-size:13.5px}
.konf-app .hintbox p,.konf-app .skipbox p{font-size:12.5px;margin:2px 0 0;flex:1 1 240px}
.konf-app .hintbox .btn,.konf-app .skipbox .btn{padding:8px 15px;font-size:12.5px;margin-left:auto}

/* --- izdelki: tesneje --- */
.prod{padding:12px 14px;border-radius:var(--r-md);gap:12px}
.pname b{font-size:14px}
.pez{font-size:12.5px}
.pspec span{font-size:10.5px;padding:3px 8px}
.pbadge{font-size:9.5px;padding:3px 8px}

/* --- predogled: kompakten --- */
.kv{padding:var(--sp-4);border-radius:var(--r-lg)}
.kv-scene{border-radius:var(--r-md)}
.ka-shell .kvbig,.kv-stats b,.kv .kvbig{font-size:26px;letter-spacing:-.03em;line-height:1.05}
.kv-chips span,.kv-chips a{font-size:10.5px;padding:4px 9px}
.kv-row{font-size:12px;padding:9px 0}
.kv-note{font-size:11px;padding-right:0}
.ka-side{width:auto}
.ka-shell{grid-template-columns:minmax(0,1fr) 300px}

/* ============================================================
   NAVIGACIJA · tri skupine folij dodane, povezave centrirane
   (Tai: naj ne bo zamaknjeno). Tri stolpci: logo levo, povezave
   tocno na sredini ne glede na sirino logotipa in gumba, CTA desno.
   ============================================================ */
body>nav#nav .nav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--sp-5)}
body>nav#nav .logo{justify-self:start}
body>nav#nav .nav-links{justify-self:center;display:flex;gap:clamp(20px,calc(4.4vw - 29px),46px);white-space:nowrap} /* vec zraka med povezavami (23.9., agent 2, Tai; 14:08 agent 1, Tai: "se malo razmaka" -> ~29 px pri 1333, 22 px pri 1181) */
body>nav#nav .nav-links a{font-size:13px}
body>nav#nav .btn.nav-cta{justify-self:end}
body>nav#nav #burger{justify-self:end}
/* Pod 1180 px povezave ne gredo v vrstico -> meni (burger). Prej se je burger pokazal sele pod 900 px
   (nova.css), zato 901-1180 px ni bilo navigacije. Brez povezav grid postavi CTA/burger v srednji stolpec,
   zato tu flex: logo levo, CTA + burger desno (pod 900 px CTA izgine, burger ostane desno). (23.9., agent 1) */
@media(max-width:1180px){
  body>nav#nav .nav-in{display:flex;gap:12px}
  body>nav#nav .nav-links{display:none}
  body>nav#nav .btn.nav-cta{margin-left:auto}
  body>nav#nav #burger{display:block;margin-left:0}
}
@media(max-width:900px){ body>nav#nav #burger{margin-left:auto} }
/* Odprt meni: nav (z 300) je bil POD menijem (z 350) -> X za zapiranje ni bil viden, meni se je dal zapreti
   samo s klikom na povezavo. Nav gre nad meni, logo v meniju je zato odvec. Meni se prilagodi nizkemu
   zaslonu (Tai 1000x570: vsebina je segala od -70 do 715 px). (23.9., agent 1) */
body.menu-open>nav#nav{z-index:360}
#mmenu .mm-logo{display:none}
#mmenu{justify-content:safe center;overflow-y:auto;padding-top:96px;padding-bottom:24px}
@media(max-height:900px){ #mmenu a{font-size:clamp(1.1rem,3.9vh,2rem);padding:5px 0} }

/* ============================================================
   KONFIGURATOR · Apple mirnost z RSN karakterjem
   Apple: mirna tipografija, velikodusen zrak, en sam accent,
   pilule, skoraj nic obrob. RSN: limeta samo za dejanje,
   DM Mono za oznake, skoraj crna za tekst.
   Vprasanja so se izrisovala pri 46 px, ker ima .konf-app .fpane h3
   visjo specificnost od mojih pravil.
   ============================================================ */
.konf-app .fpane h3{font-size:clamp(22px,2vw,27px);line-height:1.18;letter-spacing:-.03em;
  margin-bottom:var(--sp-3)}
.konf-app .fpane .fhint{font-size:14.5px;line-height:1.55;margin-bottom:var(--sp-7);max-width:56ch;
  color:var(--ink-70)}
.konf-app .kcard{padding:var(--sp-8);border-radius:var(--r-xl);background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.75)}

/* korak nad naslovom: tiha mono oznaka */
.konf-app .fpane .fstep,.konf-app .fpane .kick{font-family:var(--m);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-50);margin-bottom:var(--sp-4);display:block}

/* izbire: mirne ploscice, brez tezkih obrob */
.choice{padding:16px 18px;border-radius:14px;border:1px solid rgba(14,19,16,.09);
  background:rgba(255,255,255,.62);box-shadow:none}
.choice:hover{background:#fff;border-color:rgba(14,19,16,.16);transform:none}
.choice.on{background:rgba(3,99,212,.13);border-color:rgba(96,122,15,.5);box-shadow:none}
.choice svg{width:18px;height:18px;margin-bottom:10px;opacity:.85}
.choice-grid{gap:10px}

/* izdelki */
.prod{padding:13px 15px;border-radius:14px;border-color:rgba(14,19,16,.09);background:rgba(255,255,255,.62)}
.prod.on{border-color:rgba(96,122,15,.5);background:rgba(3,99,212,.10);box-shadow:none}

/* gumbi: pilule, pritisk kot na Apple */
.ka-shell .btn,.konf-app .btn{border-radius:var(--r-pill);font-size:13.5px;padding:11px 20px}
.ka-shell .btn:active{transform:scale(.97)}

/* predogled */
.kv{padding:14px;border-radius:18px}
.ka-shell .kvbig,.kv-stats b{font-size:26px;letter-spacing:-.035em}

/* dihanje med bloki */
.konf-app .fpane>*+*{margin-top:0}
.ka-rail{padding-bottom:var(--sp-5)}

/* ============================================================
   KONFIGURATOR · drugi krog zbijanja (Tai: se vedno preveliko)
   Vse stopnjo nizje in vsebina se ne razteguje cez celo sirino.
   ============================================================ */
.konf-app .fpane h3{font-size:clamp(19px,1.5vw,22px);margin-bottom:6px}
.konf-app .fpane .fhint{font-size:13.5px;line-height:1.5;margin-bottom:var(--sp-6);max-width:52ch}
.konf-app .fpane .fstep,.konf-app .fpane .kick{font-size:10px;letter-spacing:.14em;margin-bottom:10px}
.konf-app .kcard{padding:var(--sp-6) var(--sp-7) var(--sp-7);border-radius:18px}

/* izbire: tri v vrsti, nizje kartice */
.choice-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.choice{padding:13px 14px;border-radius:12px}
.choice svg{width:16px;height:16px;margin-bottom:8px}
.choice b,.choice h4,.choice .ch-t{font-size:13.5px}
.choice p,.choice .ch-d{font-size:12px;line-height:1.4;margin-top:2px}
.choice .ch-m,.choice small{font-size:10px;letter-spacing:.08em}

/* koraki: se drobneje */
.konf-app .rail button{padding:4px 10px 4px 5px;gap:6px}
.konf-app .rail .rn{width:16px;height:16px;font-size:9px}
.konf-app .rail button span:nth-child(2){font-size:12px}
.ka-rail{padding-bottom:14px}

/* glava */
.ka-top{padding:7px 9px 7px 14px}
.ka-logo img{height:23px}
.ka-title b{font-size:12px}
.ka-title span{font-size:9.5px}
.ka-tbtn{padding:6px 12px;font-size:12px}

/* vrstica o napredku */
.ka-resume{padding:6px 6px 6px 14px;font-size:12px;margin-bottom:14px}
.ka-resume .btn,.ka-resume button{padding:5px 12px;font-size:11px}

/* predogled: tise stevilke */
.ka-shell .kvbig,.kv-stats b{font-size:22px}
.kv-chips span,.kv-chips a{font-size:10px;padding:3px 8px}
.kv-row{font-size:11.5px;padding:8px 0}
.ka-shell{grid-template-columns:minmax(0,1fr) 280px;column-gap:var(--sp-5)}

/* izdelki */
.prod{padding:11px 13px;gap:10px}
.pname b{font-size:13.5px}
.pez{font-size:12px}

/* vsebina naj se ne razteguje cez celo sirino kartice */
.konf-app .fpane{max-width:760px}
.ka-shell .btn,.konf-app .btn{font-size:13px;padding:10px 18px}

/* HERO NA NAMIZJU: celoten hero (naslov + kartice) mora biti viden ob nalaganju.
   Prej fiksna visina kartic clamp(440,50vw,600) -> na nizjem oknu odrezane spodaj.
   Zdaj hero = visina okna, kartice dobijo preostanek. (23.9., agent 2) */
@media(min-width:821px){
  .hero{height:100svh;min-height:560px;padding-bottom:var(--sp-6)}
  .hero-head{padding-top:clamp(96px,14svh,140px);padding-bottom:var(--sp-5)}
  .panels{flex:1 1 0;height:auto;min-height:300px;padding-bottom:0}
}

/* ============================================================
   STENA REFERENC · logotipi v originalnih barvah na svetlih
   ploscicah (Tai 23.9.). Datoteke ostanejo originalne, brez filtra.
   Celica brez logotipa ostane napis (temen na svetli ploscici). (agent 2)
   ============================================================ */
.rwall.rw-logos,.sec-ink .rwall.rw-logos{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);
  border:0;border-radius:0;background:transparent;overflow:visible}
.rw-logos .rw-cell,.sec-ink .rw-logos .rw-cell{background:#fff;border:0;border-radius:var(--r-md);
  min-height:120px;padding:var(--sp-6) var(--sp-7);transition:transform .4s var(--e-out),box-shadow .4s var(--e-out)}
.rw-logos .rw-cell:hover,.sec-ink .rw-logos .rw-cell:hover{background:#fff;transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,.28)}
.rw-logos{--lb:50px}
/* --k = izravnava optične velikosti: (3 / razmerje stranic)^0,38, izracunano iz datoteke (enaka povrsina za vse) */
.rw-logos .rw-cell img{height:calc(var(--lb) * var(--k,1));width:auto;max-width:100%;max-height:none;object-fit:contain;filter:none;opacity:1}
/* SESGS Kranj: znak obstaja samo bel na modri pasici sole, zato ploscica v njihovi modri */
.rw-logos .rw-cell.rw-blue,.sec-ink .rw-logos .rw-cell.rw-blue,.sec-ink .rw-logos .rw-cell.rw-blue:hover{background:#005BAB}
.rw-logos .rw-name,.sec-ink .rw-logos .rw-name{color:var(--ink-70)}
.rw-logos .rw-name em,.sec-ink .rw-logos .rw-name em{color:var(--ink-50)}
.rw-logos .rw-cell:hover .rw-name,.sec-ink .rw-logos .rw-cell:hover .rw-name{color:var(--ink)}
@media(max-width:820px){
  .rwall.rw-logos,.sec-ink .rwall.rw-logos{grid-template-columns:repeat(2,1fr);gap:var(--sp-2)}
  .rw-logos .rw-cell,.sec-ink .rw-logos .rw-cell{min-height:92px;padding:var(--sp-5)}
  .rw-logos{--lb:32px}
}

/* ============================================================
   TERMO · "Trije problemi, ena folija" (23.9., agent 2)
   Na novo namesto .uc-ph (5 plasti prepisov, izrezi 1200x350).
   Nesimetricna mreza 7+5 / 5+7, cela fotografija v kartici,
   stekleni panel: problem -> naslov -> velika stevilka -> folije.
   ============================================================ */
.kje{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--sp-4)}
.kje-c{position:relative;grid-column:span 5;height:clamp(400px,34vw,480px);border-radius:var(--r-xl);
  overflow:hidden;isolation:isolate;display:flex;align-items:flex-end;background:#06142B}
.kje-c.kje-w{grid-column:span 7}
.kje-c>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transition:transform 1.4s var(--e-out)}
.kje-c:hover>img{transform:scale(1.04)}
.kje-c::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg,rgba(6,20,43,.34),rgba(6,20,43,0) 55%)}
.kje-g{position:relative;z-index:2;margin:var(--sp-4);padding:var(--sp-5) var(--sp-6) var(--sp-5);width:min(400px,calc(100% - 2*var(--sp-4)));
  border-radius:var(--r-lg);background:rgba(255,255,255,.72);
  backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid rgba(255,255,255,.55);box-shadow:0 18px 50px rgba(6,20,43,.16)}
.kje-k{display:flex;align-items:center;gap:var(--sp-3);margin:0 0 var(--sp-3);
  font-family:var(--m);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50)}
.kje-k::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green-dark);flex:none}
.kje-g h3{font-size:var(--fs-h4);letter-spacing:-.02em;line-height:1.15;margin:0 0 var(--sp-4)}
.kje-n{display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap;margin:0 0 var(--sp-3);
  padding-top:var(--sp-4);border-top:1px solid rgba(14,19,16,.14)}
.kje-n b{font-family:var(--h);font-weight:600;font-size:clamp(2rem,1.4rem + 2vw,2.9rem);letter-spacing:-.04em;line-height:.95;color:var(--ink)}
.kje-n span{font-size:var(--fs-caption);color:var(--ink-70);line-height:1.35;white-space:nowrap}
.kje-p{font-size:var(--fs-caption);color:var(--ink-70);line-height:1.5;margin:0 0 var(--sp-4);min-height:3em}
.kje-f{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0}
.kje-f span{font-family:var(--m);font-size:var(--fs-micro);letter-spacing:.06em;padding:5px 10px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.6);border:1px solid rgba(14,19,16,.16);color:var(--ink)}
@media(max-width:980px){
  .kje-c,.kje-c.kje-w{grid-column:span 12}
}
@media(max-width:640px){
  .kje{gap:var(--sp-3)}
  .kje-c,.kje-c.kje-w{height:auto;min-height:0;flex-direction:column;align-items:stretch;background:transparent;overflow:visible}
  .kje-c>img{position:relative;inset:auto;aspect-ratio:4/3;height:auto;border-radius:var(--r-lg)}
  .kje-c::after{display:none}
  .kje-g{width:auto;margin:calc(-1 * var(--sp-9)) var(--sp-3) 0}
}

/* ============================================================
   TERMO · "Bo pa potem temno?" (23.9., agent 2)
   Eno okno, 5 stekel, isti pogled. Zatemnitev = VLT iz tehnicnega
   lista, izracunana v linearni svetlobi (slike v assets/foto/temno).
   Nacini: vse (primerjava) · ena (predogled ene folije) · brez.
   ============================================================ */
.tp{margin-top:var(--sp-7)}
.tp-win{border-radius:var(--r-lg);overflow:hidden;background:#0C2650;padding:12px;
  box-shadow:0 1px 2px rgba(6,20,43,.08),0 24px 60px rgba(6,20,43,.14)}
.tp-glass{position:relative;aspect-ratio:1170/400;border-radius:4px;overflow:hidden;background:#06142B}
.tp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%;display:block;
  opacity:0;transition:opacity .55s var(--e-out)}
.tp-img.is-on{opacity:1}
.tp-m{position:absolute;top:0;bottom:0;width:10px;margin-left:-5px;background:#0C2650;z-index:3;pointer-events:none;
  box-shadow:inset 1px 0 0 rgba(255,255,255,.06),inset -1px 0 0 rgba(0,0,0,.4)}
.tp-pane{position:absolute;top:0;bottom:0;width:20%;z-index:2;cursor:pointer}
.tp-pane::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 2px var(--green,#0363D4);opacity:0;transition:opacity .3s}
.tp-pane.is-hi::after{opacity:1}
.tp-tag{position:absolute;left:12px;top:12px;font-family:var(--m);font-size:11px;letter-spacing:.1em;color:#fff;
  background:rgba(6,20,43,.46);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:6px;padding:5px 8px;transition:opacity .4s}
.tp:not([data-mode="vse"]) .tp-tag{opacity:0}
.tp-cap{position:absolute;left:14px;bottom:14px;z-index:4;font-family:var(--m);font-size:12px;letter-spacing:.06em;color:#fff;
  background:rgba(6,20,43,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:8px;padding:8px 12px;
  opacity:0;transition:opacity .4s;pointer-events:none}
.tp-cap b{color:var(--green,#0363D4);font-weight:500}
.tp:not([data-mode="vse"]) .tp-cap{opacity:1}

.tp-labs{display:grid;grid-template-columns:repeat(5,1fr);margin:0 12px}
.tp-lab{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;
  padding:var(--sp-5) var(--sp-4) var(--sp-4);border-left:1px solid var(--ink-30);position:relative;transition:background .3s}
.tp-lab:first-child{border-left:0}
.tp-lab.is-hi{background:rgba(3,99,212,.10)}
.tp-lab.is-sel{background:rgba(3,99,212,.16)}
.tp-lab.is-sel::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--green,#0363D4)}
.tp-lab:focus-visible{outline:2px solid var(--green-dark);outline-offset:-2px}
.tp-h{font-family:var(--h);font-size:var(--fs-small);font-weight:600;letter-spacing:-.01em;margin:0 0 var(--sp-4);color:var(--ink)}
.tp-v{display:flex;align-items:baseline;gap:6px}
.tp-v b{font-family:var(--h);font-weight:600;font-size:clamp(1.9rem,1.3rem + 1.8vw,2.7rem);letter-spacing:-.04em;line-height:1;color:var(--ink)}
.tp-v span{font-size:var(--fs-caption);color:var(--ink-70)}
.tp-t{font-family:var(--m);font-size:12px;color:var(--ink-70);margin:var(--sp-3) 0 var(--sp-4)}
.tp-o{display:flex;align-items:center;gap:8px;font-size:var(--fs-caption);color:var(--ink-70);padding-top:var(--sp-3);border-top:1px solid var(--ink-30)}
.tp-o i{width:22px;height:10px;border-radius:5px;flex:none;border:1px solid rgba(0,0,0,.15)}
.tp-u{font-size:var(--fs-caption);color:var(--ink-50);margin-top:var(--sp-3);line-height:1.45}

.tp-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:var(--sp-6)}
.tp-seg{display:inline-flex;padding:4px;border-radius:var(--r-pill);background:rgba(14,19,16,.06);border:1px solid var(--ink-30)}
.tp-seg button{all:unset;cursor:pointer;padding:10px 18px;border-radius:var(--r-pill);font-family:var(--h);font-weight:600;font-size:14px;
  color:var(--ink-70);transition:background .3s,color .3s}
.tp-seg button.is-on{background:var(--ink);color:#fff}
.tp-seg button:focus-visible{outline:2px solid var(--green-dark);outline-offset:2px}
.tp-fn{font-size:12.5px;color:var(--ink-50);max-width:62ch;margin:0}

@media(max-width:760px){
  .tp-win{padding:8px}
  .tp-tag{font-size:9px;left:6px;top:6px;padding:3px 5px}
  .tp-cap{left:8px;bottom:8px;font-size:10.5px;padding:6px 8px;white-space:nowrap}
  .tp-cap span{display:none}
  .tp-labs{grid-template-columns:1fr;margin:var(--sp-4) 0 0}
  .tp-lab{display:grid;grid-template-columns:1fr auto;column-gap:12px;border-left:0;border-top:1px solid var(--ink-30);padding:var(--sp-4) var(--sp-3)}
  .tp-h{margin:0 0 4px}
  .tp-v{grid-row:1 / span 2;grid-column:2;align-self:center}
  .tp-o{grid-column:1 / -1;border-top:0;padding-top:4px}
  .tp-u{display:none}
  .tp-lab.is-sel::before{top:0;bottom:0;right:auto;width:3px;height:auto}
}
@media (prefers-reduced-motion:reduce){ .tp-img,.tp-cap,.tp-tag{transition:none} }


/* ============================================================
   DEKO · "Zasebnost brez zidov" (23.9., agent 2, v2)
   Svoj princip: 4 velike lezece fotografije (2x2), cez vsako
   MAT TRAK v visini oci (pravi blur cez fotografijo). V traku
   so VSE informacije kartice: oznaka, naslov, 2 podatka, opis, folije.
   ============================================================ */
.mt{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.mt-c{position:relative;height:clamp(440px,38vw,540px);border-radius:var(--r-xl);overflow:hidden;isolation:isolate;background:#06142B}
.mt-c>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--e-out)}
.mt-c:hover>img{transform:scale(1.04)}
.mt-b{position:absolute;left:0;right:0;top:42%;z-index:2;
  display:grid;grid-template-columns:1.1fr 1fr;gap:var(--sp-6);align-items:end;
  padding:var(--sp-6) var(--sp-7);min-height:196px;
  background:rgba(247,247,244,.66);backdrop-filter:blur(24px) saturate(.9) brightness(1.06);-webkit-backdrop-filter:blur(24px) saturate(.9) brightness(1.06);
  border-top:1px solid rgba(255,255,255,.75);border-bottom:1px solid rgba(255,255,255,.55)}
.mt-k{font-family:var(--m);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50);margin:0 0 var(--sp-2)}
.mt-b h3{font-size:var(--fs-h4);letter-spacing:-.02em;line-height:1.15;margin:0 0 var(--sp-4);color:var(--ink)}
.mt-b dl{display:flex;gap:var(--sp-6);margin:0}
.mt-b dt{font-family:var(--m);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-50);margin-bottom:4px}
.mt-b dd{margin:0;font-family:var(--h);font-weight:600;font-size:clamp(1.35rem,1rem + 1vw,1.75rem);letter-spacing:-.03em;line-height:1.05;color:var(--ink);white-space:nowrap}
.mt-r{display:flex;flex-direction:column;gap:var(--sp-3);padding-left:var(--sp-6);border-left:1px solid rgba(14,19,16,.14)}
.mt-r>p:first-child{font-size:var(--fs-caption);color:var(--ink-70);line-height:1.5;margin:0}
.mt-r .kje-f span{background:rgba(255,255,255,.5)}
/* postavitev C (Tai 23.9.): siroka vodilna vrstica + tri manjse spodaj */
.mt.mt-c3{grid-template-columns:1.2fr 1fr 1fr;grid-template-rows:clamp(440px,38vw,520px) clamp(400px,31vw,440px)}
.mt-c3 .mt-c{height:auto}
.mt-c3 .mt-c:first-child{grid-column:1 / -1}
.mt-c3 .mt-c:first-child .mt-b{top:44%}
/* male kartice: nizek, zbit trak na dnu, da fotografija ostane vidna */
.mt-c3 .mt-c.sm .mt-b{top:auto;bottom:0;min-height:0;grid-template-columns:1fr;gap:var(--sp-2);padding:var(--sp-4) var(--sp-5) var(--sp-4)}
.mt-c3 .mt-c.sm .mt-b h3{margin-bottom:var(--sp-3);font-size:var(--fs-body)}
.mt-c3 .mt-c.sm .mt-b dd{font-size:clamp(1.15rem,.9rem + .7vw,1.4rem)}
.mt-c3 .mt-c.sm .mt-r{padding:0;border:0}
.mt-c3 .mt-c.sm .mt-r>p:first-child{display:none}
.mt-c3 .mt-c.sm .kje-f span{font-size:10px;padding:3px 8px}
@media(max-width:1100px) and (min-width:761px){
  .mt-c3 .mt-c:first-child .mt-b{grid-template-columns:1.1fr 1fr;gap:var(--sp-5);padding:var(--sp-5) var(--sp-6);top:40%;min-height:0}
  .mt-c3 .mt-c:first-child .mt-r{padding-left:var(--sp-5);border-left:1px solid rgba(14,19,16,.14);border-top:0;padding-top:0}
  .mt-c3 .mt-c.sm .mt-b{min-height:178px}
}
@media(max-width:1100px){
  .mt-b{grid-template-columns:1fr;gap:var(--sp-3);padding:var(--sp-5);top:36%;min-height:240px}
  .mt-r{padding-left:0;border-left:0;border-top:1px solid rgba(14,19,16,.14);padding-top:var(--sp-3)}
}
@media(max-width:760px){
  .mt,.mt.mt-c3{grid-template-columns:1fr;grid-template-rows:none;gap:var(--sp-3)}
  .mt-c3 .mt-c:first-child{grid-column:auto}
  .mt-c,.mt-c3 .mt-c{height:460px}
  .mt-b{min-height:0;top:auto;bottom:18%}
}

/* "Naprej" koraki: puscica v zelenem krogu namesto podcrtanega "Poglej" (23.9., agent 2) */
.final-steps>div{align-items:center}
.final-steps .fs-go{margin-left:auto;flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--green,#0363D4);color:var(--ink,#06142B);transition:transform .35s var(--e-out),background .25s}
.final-steps .fs-go:hover,.final-steps>div:hover .fs-go{transform:rotate(45deg)}
.final-steps .fs-go:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ============================================================
   DEKO · "Koliko zasebnosti potrebujete?" v2 (23.9., agent 2)
   3 prostori, 6 folij/vzorcev, 3 pokritosti. Folija = .zp-film z
   SVG masko v koordinatah fotografije (samo steklo).
   v2b (Tai): panel ob sliki, ne na njej; slika + panel vedno cela
   na enem zaslonu (visina slike vezana na visino okna).
   ============================================================ */
.zp{--zh:calc(100svh - 150px);display:grid;justify-content:center;gap:var(--sp-5);margin-top:var(--sp-7);
  grid-template-columns:min(calc(100% - 300px - var(--sp-5)),calc(var(--zh) * 1.49)) 300px}
.zp-stage{position:relative;aspect-ratio:1796/1204;border-radius:var(--r-xl);overflow:hidden;background:#06142B;align-self:start}
.zp-room{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--e-out)}
.zp-room.is-on{opacity:1}
.zp-room img{position:absolute;inset:0;width:100%;height:100%;display:block}
.zp-film{position:absolute;inset:0;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;transition:opacity .16s linear}
.zp-film.is-sw{opacity:0}
.zp-film[data-f="mat"],.zp-film[data-f="pike"],.zp-film[data-f="valovi"],.zp-film[data-f="napis"]{
  background:rgba(238,239,235,.46);backdrop-filter:blur(12px) saturate(.85) brightness(1.08);-webkit-backdrop-filter:blur(12px) saturate(.85) brightness(1.08)}
.zp-film[data-f="white"]{background:rgba(242,242,238,.95);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.zp-film[data-f="black"]{background:rgba(15,17,16,.96)}

.zp-panel{display:flex;flex-direction:column;gap:8px;padding:var(--sp-4) var(--sp-5);border-radius:var(--r-lg);background:#fff;
  border:1px solid var(--ink-30);align-self:stretch;justify-content:space-between;min-height:0}
.zp-tabs{display:flex;padding:3px;border-radius:var(--r-pill);background:rgba(14,19,16,.07)}
.zp-tabs button{all:unset;cursor:pointer;flex:1;text-align:center;padding:7px 4px;border-radius:var(--r-pill);font-family:var(--h);font-weight:600;font-size:12px;color:var(--ink-70);transition:background .25s,color .25s}
.zp-tabs button.is-on{background:var(--ink);color:#fff}
.zp-now{font-family:var(--h);font-weight:600;font-size:clamp(1.15rem,.9rem + .6vw,1.45rem);letter-spacing:-.025em;line-height:1.1;margin:4px 0 0;color:var(--ink)}
.zp-cov{font-family:var(--m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-50);margin:-6px 0 0}
.zp-ro{display:grid;grid-template-columns:1.35fr 1fr .8fr;gap:8px;margin:0;padding:10px 0;border-top:1px solid var(--ink-30);border-bottom:1px solid var(--ink-30)}
.zp-ro dt{font-family:var(--m);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-50);margin-bottom:2px}
.zp-ro dd{margin:0;font-family:var(--h);font-weight:600;font-size:13.5px;color:var(--ink);white-space:nowrap}
.zp-lab{font-family:var(--m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50);margin:0}
.zp-sw{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 4px}
.zp-sw button{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;color:var(--ink-70);text-align:center}
.zp-sw i{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-family:var(--h);font-weight:700;font-size:11px;color:#8C908B;box-shadow:0 0 0 1px rgba(14,19,16,.14);transition:box-shadow .25s}
.zp-sw button.is-on i{box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--ink)}
.zp-sw button.is-on span{color:var(--ink);font-weight:600}
.zp-sw button:focus-visible i,.zp-tabs button:focus-visible,.zp-seg button:focus-visible{outline:2px solid var(--green-dark);outline-offset:2px}
.sw-mat{background:radial-gradient(circle at 35% 30%,#FAFAF7,#D9DBD6 72%)}
.sw-white{background:#F4F4F1}
.sw-black{background:radial-gradient(circle at 35% 30%,#3A3D3B,#121413 70%)}
.sw-pike{background:radial-gradient(circle,#C9CCC7 34%,transparent 37%) 0 0/7px 7px,#fff}
.sw-valovi{background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='8'%3E%3Cpath d='M0 4 Q5 1 10 4 T20 4 T30 4 T40 4' fill='none' stroke='%23C3C6C1' stroke-width='1.6'/%3E%3C/svg%3E") 0 0/32px 7px,#fff}
.sw-napis{background:radial-gradient(circle at 35% 30%,#FAFAF7,#DDDFDA 72%)}
.zp-seg{display:flex;gap:4px}
.zp-seg button{all:unset;cursor:pointer;flex:auto;text-align:center;padding:7px 6px;border-radius:var(--r-pill);border:1px solid rgba(14,19,16,.16);font-family:var(--h);font-weight:600;font-size:11.5px;color:var(--ink-70);white-space:nowrap;transition:all .2s}
.zp-seg button.is-on{border-color:var(--ink);background:var(--ink);color:#fff}
.zp-fn{grid-column:1 / -1;font-size:12px;color:var(--ink-50);line-height:1.45;margin:0}
@media(max-width:860px){
  .zp{grid-template-columns:1fr}
  .zp-sw{grid-template-columns:repeat(6,1fr)}
}
@media(max-width:480px){ .zp-sw{grid-template-columns:repeat(3,1fr)} .zp-seg{flex-wrap:wrap} }
@media (prefers-reduced-motion:reduce){ .zp-room,.zp-film{transition:none} }


/* ===== MOBILNI POPRAVKI (23.9., agent 2, Tai) ===== */
/* domaca "Kdo smo": levi stolpec je bil lepljiv tudi na telefonu, zato so tocke 01-03 drsele cezenj */
@media(max-width:900px){ .why-left{position:static} }
/* vodnik (in vse .vfig): slika s parallax scale(1.14) se je risala cez podnapis */
.vfig figcaption{position:relative;z-index:1}
/* termo "Zunanja ali notranja": na telefonu dve sliki drugo pod drugo namesto vodoravnega poteza */
.vz-split{display:none}
@media(max-width:900px){
  .vizfoto-wide picture{display:none}
  .vizfoto-wide .vz-split{display:grid;gap:var(--sp-4)}
  .vizfoto-wide .vz-split img{min-width:0;width:100%;height:auto;display:block;border-radius:var(--r-sm)}
  .vizfoto-wide figcaption::after{content:none}
}