/* ═══════════════════════════════════════════════════════════════
   Biroplast Solutions — V2 DeliMe (aplikacija-delime.html)
   Namenska stran za DeliMe — NI ponovna uporaba homepage Heroja/
   .hero{} sistema (ta je namenoma vezan samo na index.html, glej
   js/motion.js "[data-depth-*]"), zato ima ta stran svoj razred
   ".dl-hero" in uporablja splošni [data-parallax] sistem (isti kot
   drugod po strani — hardware/software/CTA prehodi na domači strani).
   Vsa vsebina (besedila, delovni tok, koristi) je usklajena z uradno
   prodajno predstavitvijo (PDF) — brez izmišljenih funkcij/statistik.
   Predpona razredov "dl-" (DeliMe), da se ne prekriva z domačo stranjo.
   ═══════════════════════════════════════════════════════════════ */

/* ── skupno: eyebrow puščični niz (uporabljen v heroju) ────────── */
.dl-flow{
  display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-family:var(--fh); font-weight:700; font-size:12.5px; letter-spacing:.05em;
  color:var(--muted-on-navy);
}
.dl-flow b{ color:#fff; font-weight:700; }
.dl-flow svg{ width:13px; height:13px; opacity:.55; flex-shrink:0; }

/* ═══ 1. HERO — FLAGSHIP SOFTWARE, nov "light hero" sistem (7. 9.
   2026, "PREMIUM HIGH-TECH REDESIGN" brief razdelek 9B/18/19/59:
   DeliMe je "flagship digital product", software heroji naj bodo
   svetli, s pravim UI/product previewom, cyan ambientna svetloba).
   Dosedanja temna ".dl-hero" (deljen recept s skoraj vsemi drugimi
   heroji na strani) je zamenjana s svetlim ozadjem — SAMO barvni
   sistem/kompozicija; besedilo, pravi posnetek nadzorne plošče,
   "v živo v proizvodnji" značka in delovni tok POD herojem (že
   pohvaljena "8-delna scroll zgodba" iz prejšnjih krogov) ostajajo
   NESPREMENJENI, ker so že dobri (brief: "ne redesignaj, če je
   dobro"). `.dl-hero` je uporabljen SAMO na tej strani (preverjeno),
   zato je varno urejati pravilo neposredno, brez novega modifikatorja. */
.dl-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(175deg, #ffffff 0%, var(--surface-alt) 100%);
  color:var(--ink);
  padding:calc(var(--sp-7) + 10px) 0 var(--sp-7);
}
.dl-hero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr .98fr; gap:var(--sp-6); align-items:center;
}
.dl-hero-eyebrow{ color:var(--green); }
.dl-hero h1{ font-size:clamp(46px,6vw,80px); margin:2px 0 var(--sp-2); color:var(--navy); }
.dl-hero-podnaslov{
  font-family:var(--fh); font-weight:600; font-size:clamp(19px,1.9vw,25px);
  color:var(--navy); line-height:1.3; margin-bottom:var(--sp-3); max-width:520px;
}
.dl-hero .lead{ max-width:480px; margin-bottom:var(--sp-4); }
.dl-hero-cta{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }

/* ── VIDEO ENTRY POINT #1 (21. 9. 2026, brief "ADD TWO VIDEO ENTRY
   POINTS") — lahka "discovery" povezava POD obstoječima CTA gumboma,
   NAMENOMA ne tretji ".btn" (brief to izrecno prepove — "do NOT create
   a third large conventional button"). Krog v cian obrobi, brez
   izpolnjenega ozadja v mirovanju — na hover/focus se rahlo poveča in
   dobi mehak cian sijaj + ozadje pilule, besedilo pa preide v modro.
   Restrained, kot zahteva brief ("keep animation sophisticated and
   restrained"). ────────────────────────────────────────────────── */
.dl-hero-video-cta{
  display:inline-flex; align-items:center; gap:12px;
  margin-top:var(--sp-3); padding:4px 16px 4px 4px; border-radius:999px;
  background:none; border:1px solid transparent; cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-premium), background var(--dur-fast) var(--ease-premium);
}
.dl-hero-video-cta:hover, .dl-hero-video-cta:focus-visible{
  border-color:rgba(23,185,236,.3); background:rgba(23,185,236,.07);
}
.dl-hero-video-cta:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
.dl-hero-video-cta-krog{
  flex-shrink:0; width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1.5px solid rgba(23,185,236,.35); color:var(--cyan);
  box-shadow:0 0 0 0 rgba(23,185,236,.3);
  transition:transform var(--dur-fast) var(--ease-premium), box-shadow var(--dur-fast) var(--ease-premium), color var(--dur-fast) var(--ease-premium);
}
.dl-hero-video-cta-krog svg{ width:16px; height:16px; margin-left:2px; transition:transform var(--dur-fast) var(--ease-premium); }
.dl-hero-video-cta:hover .dl-hero-video-cta-krog,
.dl-hero-video-cta:focus-visible .dl-hero-video-cta-krog{
  transform:scale(1.08); color:var(--blue); box-shadow:0 0 0 7px rgba(23,185,236,.14);
}
.dl-hero-video-cta:hover .dl-hero-video-cta-krog svg{ transform:scale(1.1); }
.dl-hero-video-cta-tekst{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; }
.dl-hero-video-cta-naslov{ font-family:var(--fh); font-weight:700; font-size:14.5px; color:var(--navy); transition:color var(--dur-fast) var(--ease-premium); }
.dl-hero-video-cta:hover .dl-hero-video-cta-naslov,
.dl-hero-video-cta:focus-visible .dl-hero-video-cta-naslov{ color:var(--blue); }
.dl-hero-video-cta-cas{ font-size:12.5px; color:var(--muted); }
@media (prefers-reduced-motion:reduce){
  .dl-hero-video-cta-krog, .dl-hero-video-cta-krog svg{ transition:none; }
  .dl-hero-video-cta:hover .dl-hero-video-cta-krog,
  .dl-hero-video-cta:focus-visible .dl-hero-video-cta-krog{ transform:none; }
  .dl-hero-video-cta:hover .dl-hero-video-cta-krog svg{ transform:none; }
}

.dl-hero-vizual{ position:relative; z-index:1; }
/* "UI layering" senca — 8. 9. 2026 dopolnitev (brief razdelek 10):
   dve tanko obrobljeni, diagonalno offsetani ploskvi ZA produktno
   kartico, kot zložene/plastene UI plošče (digitalni ekvivalent
   GreenTillove "hardware" globine). Povsem statično, brez animacije —
   samo dekorativna senca, zato ni obravnavano v prefers-reduced-motion.
   z-index:-1 znotraj lastnega stacking konteksta ".dl-hero-vizual"
   (zdaj z-index:1 zgoraj) ju drži ZA ".product-moment" (ta je sam
   position:relative, torej na privzeti ravni 0), ne glede na to, da
   je "::after" v vrstnem redu slikanja za otroki. */
.dl-hero-vizual::before, .dl-hero-vizual::after{
  content:''; position:absolute; z-index:-1; border-radius:var(--r-lg); pointer-events:none;
}
.dl-hero-vizual::before{ inset:14px -14px -14px 14px; border:1px solid rgba(23,185,236,.22); }
.dl-hero-vizual::after{ inset:26px -26px -26px 26px; border:1px solid rgba(171,208,57,.16); }
/* nadaljevanje 34, 14. krog — razmerje usklajeno NATANČNO z novim
   promocijskim vizualom (1902×1065, prej togih 4:3 za zaslonski posnetek)
   + `object-fit:contain` namesto `cover`, ker slika sama nosi pomembno
   besedilo/logotip čez cel kader in se ne sme obrezati na nobeni širini
   (glej opombo v aplikacija-delime.html). Ker je razmerje okvirja zdaj
   enako razmerju slike, `contain` vizualno ne pusti vidnega "letterboxing"
   robu — slika natančno zapolni okvir. */
.dl-hero-vizual .product-moment{
  aspect-ratio:1902/1065; padding:0;
  transform:translateX(18px);
  box-shadow:0 30px 70px -25px rgba(23,34,46,.24), 0 0 0 1px rgba(23,34,46,.06);
}
.dl-hero-vizual .product-moment img{
  width:100%; height:100%; object-fit:contain; object-position:center;
}

/* ── VIDEO ENTRY POINT #1b ("OPTIONAL HERO IMAGE INTERACTION" iz
   brifa) — majhen "play" nadzor v spodnjem desnem kotu slike (edino
   mesto v kadru brez logotipa/naslova/ikon, glej opombo v HTML).
   `.product-moment` je `position:relative;overflow:hidden` (glej
   components.css), zato je gumb preprosto absolutno pozicioniran
   znotraj njega, nad `.produkt-slika-plast img` (ta ima `z-index:1`,
   gumb dobi `z-index:2`). Privzeto samo polprosojen krog — besedilna
   značka se širino/prosojnost razkrije šele na hover/focus, da slika
   v mirovanju ostane povsem čista/neprekrita. ───────────────────── */
.dl-hero-vizual-video{
  position:absolute; z-index:2; right:16px; bottom:16px;
  display:flex; align-items:center; gap:10px;
  background:none; border:0; padding:0; cursor:pointer;
}
.dl-hero-vizual-video-krog{
  width:50px; height:50px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(11,20,31,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1.5px solid rgba(255,255,255,.55); color:#fff;
  box-shadow:0 6px 18px rgba(4,10,20,.35);
  transition:transform var(--dur-fast) var(--ease-premium), box-shadow var(--dur-fast) var(--ease-premium), background var(--dur-fast) var(--ease-premium), border-color var(--dur-fast) var(--ease-premium);
}
.dl-hero-vizual-video-krog svg{ width:18px; height:18px; margin-left:2px; }
.dl-hero-vizual-video-tekst{
  font-family:var(--fh); font-weight:700; font-size:12.5px; color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
  max-width:0; overflow:hidden; white-space:nowrap; opacity:0;
  transition:max-width .35s var(--ease-premium), opacity .35s var(--ease-premium);
}
.dl-hero-vizual-video:hover .dl-hero-vizual-video-tekst,
.dl-hero-vizual-video:focus-visible .dl-hero-vizual-video-tekst{ max-width:220px; opacity:1; }
.dl-hero-vizual-video:hover .dl-hero-vizual-video-krog,
.dl-hero-vizual-video:focus-visible .dl-hero-vizual-video-krog{
  transform:scale(1.08); background:rgba(23,185,236,.8); border-color:rgba(23,185,236,.95);
  box-shadow:0 0 0 8px rgba(23,185,236,.18), 0 6px 18px rgba(4,10,20,.35);
}
.dl-hero-vizual-video:focus-visible{ outline:none; }
.dl-hero-vizual-video:focus-visible .dl-hero-vizual-video-krog{ outline:2px solid var(--cyan); outline-offset:3px; }
@media (max-width:600px){
  .dl-hero-vizual-video-krog{ width:44px; height:44px; }
}
@media (prefers-reduced-motion:reduce){
  .dl-hero-vizual-video-krog, .dl-hero-vizual-video-tekst{ transition:none; }
  .dl-hero-vizual-video:hover .dl-hero-vizual-video-krog,
  .dl-hero-vizual-video:focus-visible .dl-hero-vizual-video-krog{ transform:none; }
}

/* ambientna svetloba + tehnična grafika — nov "light hero" jezik, ista
   receptura kot GreenTill (glej css/greentill-flagship.css), tu
   ponovljena namesto deljena (dl-hero je namenoma samostojna datoteka,
   glej opombo na vrhu). Opacity bistveno nižja kot na prejšnji temni
   različici (glow tam .45–.5, tu .12–.16), ker svetlo ozadje prenese
   veliko manj, preden "gradient effect" postane opaznejši od vsebine
   (brief razdelek 7). */
.dl-hero .circuit-field{ z-index:0; opacity:.48; }
.dl-hero-bp{ width:640px; height:640px; right:-200px; bottom:-260px; opacity:.05; color:var(--navy); z-index:0; }

/* ── 8. 9. 2026 dopolnitev ("DIGITAL COUNTERPART REFINEMENT") ──────
   Animiran cyan/moder "ambient depth" (zamenjuje prejšnja statična
   ".glow-green"/".glow-blue" bloba in odstranjeno hardware-vezje
   masko ".dl-hero-circuit-gfx" — glej opombo v HTML zgoraj). Zunanji
   ".dl-ambient-wrap" nosi SAMO data-parallax (scroll), notranji
   ".dl-ambient" SAMO neskončno "drift" animacijo transforma — enaka
   ločitev na dva gnezdena elementa kot na GreenTill, iz istega razloga
   (CSS animacija transforma bi sicer preglasila JS scroll-parallax na
   istem elementu, glej greentill-flagship.css za polno razlago). ── */
.dl-ambient-navy{
  position:absolute; z-index:0; pointer-events:none; border-radius:50%;
  width:460px; height:460px; right:-8%; top:6%;
  filter:blur(30px);
  background:radial-gradient(circle, rgba(42,61,80,.07), rgba(51,72,97,.03) 55%, transparent 74%);
}
.dl-ambient-wrap{ position:absolute; z-index:0; pointer-events:none; }
.dl-ambient{ position:absolute; inset:0; border-radius:50%; filter:blur(10px); }
.dl-ambient-wrap--cyan{ width:420px; height:420px; right:-2%; top:-90px; }
.dl-ambient--cyan{
  background:radial-gradient(circle, rgba(23,185,236,.17), transparent 70%);
  animation:dlDriftCyan 21s ease-in-out infinite;
}
.dl-ambient-wrap--blue{ width:380px; height:380px; right:-6%; top:24%; }
.dl-ambient--blue{
  background:radial-gradient(circle, rgba(4,123,193,.13), transparent 72%);
  filter:blur(14px);
  animation:dlDriftBlue 18s ease-in-out infinite; animation-delay:-8s;
}
@keyframes dlDriftCyan{ 0%,100%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(-28px,38px,0) scale(1.06); } }
@keyframes dlDriftBlue{ 0%,100%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(26px,-34px,0) scale(1.05); } }

/* tehnična grafika — "digitalne povezave" namesto hardware vezja (brief
   razdelek 17): dve tanki povezovalni poti (cyan, modra) + en zelen
   "accent" vozel (nadzorovana zelena — brez lastne zelene linije/
   oblaka), kompozicijsko namig na spodnjo sekcijo "Trije uporabniki. En
   sistem." (povezane vloge). Draw-in animacija ob nalaganju, ista
   tehnika (pathLength=1, stroke-dashoffset) kot GreenTill/Davčne
   blagajne/Tiskalniki. */
.dl-hero-tech{
  position:absolute; z-index:0; top:calc(50% - 250px); right:-2%; width:500px; height:500px;
  opacity:.55; pointer-events:none;
}
.dl-hero-tech svg{ width:100%; height:100%; }
.dl-line{ stroke-dasharray:1; stroke-dashoffset:1; opacity:0; animation:dlDrawLine 2s cubic-bezier(.4,0,.2,1) both; }
.dl-line--cyan{ animation-delay:.5s; }
.dl-line--blue{ animation-delay:1s; }
@keyframes dlDrawLine{ from{ stroke-dashoffset:1; opacity:0; } to{ stroke-dashoffset:0; opacity:.85; } }
.dl-node{ opacity:0; transform-origin:center; animation:dlNodeIn .5s ease-out both; }
.dl-node--cyan{ animation-delay:2.3s; filter:drop-shadow(0 0 3px rgba(23,185,236,.5)); }
.dl-node--blue{ animation-delay:2.6s; filter:drop-shadow(0 0 3px rgba(4,123,193,.5)); }
@keyframes dlNodeIn{ from{ opacity:0; transform:scale(.4); } to{ opacity:1; transform:scale(1); } }
.dl-node.dl-node--accent{ animation:dlNodeIn .5s ease-out 2.9s both, dlPulse 4.4s ease-in-out 3.6s infinite; }
@keyframes dlPulse{
  0%, 100%{ opacity:.45; transform:scale(1); filter:drop-shadow(0 0 3px rgba(24,165,75,.45)); }
  50%{ opacity:1; transform:scale(1.15); filter:drop-shadow(0 0 7px rgba(24,165,75,.8)); }
}

@media (max-width:960px){
  .dl-hero-grid{ grid-template-columns:1fr; gap:var(--sp-5); }
  /* POPRAVEK (8. 9. 2026, opaženo med preverjanjem v Playwright na
     390px): ".dl-hero-tech" je pozicioniran relativno na CELOTEN
     ".dl-hero" ("top:calc(50% - 250px)") — to je varno na namizju, kjer
     je slika desno/text levo v ISTI višini, a ko se grid pri ≤960px
     preklopi na en stolpec (slika zgoraj, besedilo spodaj, glej spodaj),
     se skupna višina heroja bistveno poveča in isti izračun "50%"
     grafiko potisne čez besedilo pod sliko. Namesto ponovnega
     preračunavanja pozicije za enostolpčno postavitev (krhko, odvisno od
     dolžine besedila) jo na tej širini preprosto skrijemo — enaka
     odločitev kot npr. skrivanje sekundarnih vozlišč/linij na ostalih
     "hardware hero" straneh pri ozkih širinah (poenostavitev, ne izklop
     celotnega ambientnega sistema — ambient/circuit plasti ostajajo). */
  .dl-hero-tech{ display:none; }
  .dl-ambient-wrap--blue{ width:260px; height:260px; }
  .dl-hero-vizual::before, .dl-hero-vizual::after{ display:none; }
  /* POPRAVEK (7. 9. 2026, opaženo med preverjanjem flagship heroja,
     nepovezano z barvno spremembo — obstajalo je že prej): brez
     eksplicitne "width:100%" tu je ".dl-hero-vizual" v enostolpčnem
     gridu dobil krožno odvisnost velikosti — "max-width:520px" +
     "margin:0 auto" prisilita shrink-to-fit širino, ".product-moment"
     pa nima lastne širine (samo "aspect-ratio:4/3", ki širino
     izračuna IZ že znane širine) in njegova <img> je "width:100%"
     glede na starša — brez sidra se vsa veriga sesede na 0×0, slika
     GreenTill/DeliMe pa na mobilnem popolnoma izgine. Isti vzorec
     verjetno prizadene tudi druge ".produkt-vizual .product-moment"
     uporabe v enostolpčnem mobilnem gridu — glej "Odprto za Vida". */
  .dl-hero-vizual{ order:-1; width:100%; max-width:520px; margin:0 auto; }
  .dl-hero-vizual .product-moment{ transform:none; aspect-ratio:1902/1065; }
  .dl-hero .lead{ max-width:none; }
}
@media (max-width:600px){
  .dl-hero{ padding:calc(var(--sp-6) + 20px) 0 var(--sp-6); }
  .dl-ambient-navy{ width:300px; height:300px; }
}
@media (prefers-reduced-motion: reduce){
  .dl-line, .dl-node, .dl-ambient--cyan, .dl-ambient--blue{ animation:none !important; }
  .dl-line{ stroke-dashoffset:0; opacity:.85; }
  .dl-node{ opacity:1; transform:none; }
}

/* ═══ 2+3. VVREDNOST + DELOVNI PROCES (en sistem: uvod → 4 realne
   faze iz uradne predstavitve). Vodoravno na namizju s povezovalno
   črto, ki se "izriše" ob vstopu v pogled (ponovna uporaba obstoječega
   .reveal/.je-vidno mehanizma iz main.js — BREZ novega JS: ".dl-proces"
   dobi razred .reveal, otroci ".dl-korak" dobijo zamik prek nth-child,
   kar ob dodani .je-vidno na starša ustvari zaporeden "progresiven"
   vstop korakov, enako restrained kot drugod po strani). Navpična
   časovnica na mobilnem (enak vizualni jezik kot obstoječ .pot-vrsta). */
.dl-proces-glava{ text-align:center; margin:0 auto var(--sp-6); max-width:680px; }

.dl-proces{ position:relative; }
.dl-koraki{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3);
}

.dl-korak{ position:relative; text-align:left; }
.js .dl-korak{
  opacity:0; transform:translateY(16px);
  transition:opacity .55s var(--ease-premium), transform .55s var(--ease-premium);
}
.js .dl-proces.je-vidno .dl-korak{ opacity:1; transform:none; }
.dl-koraki .dl-korak:nth-child(2){ transition-delay:.12s; }
.dl-koraki .dl-korak:nth-child(3){ transition-delay:.24s; }
.dl-koraki .dl-korak:nth-child(4){ transition-delay:.36s; }

/* ── povezovalna črta (avgust 2026, prenova) — POVEZAN sistem: en
   "pol-segment" na korak (ne en sam čez celoto), ki sega natanko od
   LEVEGA roba TEGA kroga (krogi so poravnani na levo znotraj stolpca,
   ".dl-korak{text-align:left}" — NISO na sredini stolpca, kar je bil
   vzrok prvotne "vrzeli" pri prejšnji različici te črte, ki je
   napačno predpostavljala sredinsko poravnavo) nazaj do DESNEGA roba
   PREJŠNJEGA kroga. Ker so vsi stolpci mreže enako široki, "roba
   prejšnjega kroga" doseže preprost izračun: širina segmenta =
   (širina stolpca + razmik mreže − premer kroga), levi rob segmenta =
   −(ta širina) glede na levi rob TEGA stolpca (torej sega nazaj v
   prejšnji stolpec) — desni rob segmenta pade natanko na 0, kar je
   levi rob kroga v TEM stolpcu. Prvi korak nima segmenta (ni
   prejšnjega kroga). Dva sloja: ".dl-proces-crta" = osnovna
   (nevtralna) črta, njen "::after" = animiran napredek (scaleX), ki
   se aktivira prek JS (main.js) dodanega razreda
   ".je-aktiven"/".predogled" na .dl-korak — scroll-vodena aktivacija +
   začasen hover predogled. (premer kroga 56px − razmik mreže 24px = 32px) ─ */
.dl-proces-crta{
  position:absolute; z-index:0;
  top:27px; left:calc(-100% + 32px); width:calc(100% - 32px); height:2px;
  border-radius:1px; background:var(--line); overflow:hidden;
}
.dl-proces-crta::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--cyan), var(--green));
  transform:scaleX(0); transform-origin:left;
  transition:transform .7s var(--ease-premium);
}
.dl-korak.je-aktiven .dl-proces-crta::after,
.dl-korak.predogled .dl-proces-crta::after{ transform:scaleX(1); }
/* kaskadni "potujoč" videz na namizju (glej opombo v main.js) — cela
   vrsta se aktivira naenkrat, a vsak segment se napolni z rahlim
   zamikom, kot da napredek dejansko "potuje" od koraka do koraka */
.dl-koraki .dl-korak:nth-child(2) .dl-proces-crta::after{ transition-delay:.12s; }
.dl-koraki .dl-korak:nth-child(3) .dl-proces-crta::after{ transition-delay:.24s; }
.dl-koraki .dl-korak:nth-child(4) .dl-proces-crta::after{ transition-delay:.36s; }

.dl-korak-vozel{
  width:56px; height:56px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; position:relative; z-index:1;
  background:var(--surface); border:2px solid var(--line);
  font-family:var(--fh); font-weight:700; font-size:20px; color:var(--muted);
  margin-bottom:var(--sp-2);
  transition:border-color .45s var(--ease-premium), color .45s var(--ease-premium),
    transform .35s var(--ease-premium), box-shadow .45s var(--ease-premium);
}
.dl-korak.je-aktiven .dl-korak-vozel, .dl-korak.predogled .dl-korak-vozel{ transform:scale(1.045); }
.dl-korak:nth-child(1).je-aktiven .dl-korak-vozel, .dl-korak:nth-child(1).predogled .dl-korak-vozel{
  border-color:var(--cyan); color:var(--blue); box-shadow:0 0 0 6px color-mix(in srgb, var(--cyan) 14%, transparent);
}
.dl-korak:nth-child(2).je-aktiven .dl-korak-vozel, .dl-korak:nth-child(2).predogled .dl-korak-vozel{
  border-color:var(--green); color:var(--green); box-shadow:0 0 0 6px color-mix(in srgb, var(--green) 14%, transparent);
}
.dl-korak:nth-child(3).je-aktiven .dl-korak-vozel, .dl-korak:nth-child(3).predogled .dl-korak-vozel{
  border-color:var(--lime); color:#6d8a1f; box-shadow:0 0 0 6px color-mix(in srgb, var(--lime) 16%, transparent);
}
.dl-korak:nth-child(4).je-aktiven .dl-korak-vozel, .dl-korak:nth-child(4).predogled .dl-korak-vozel{
  border-color:var(--blue); color:var(--blue); box-shadow:0 0 0 6px color-mix(in srgb, var(--blue) 14%, transparent);
}
.dl-koraki .dl-korak:nth-child(2) .dl-korak-vozel{ transition-delay:.12s; }
.dl-koraki .dl-korak:nth-child(3) .dl-korak-vozel{ transition-delay:.24s; }
.dl-koraki .dl-korak:nth-child(4) .dl-korak-vozel{ transition-delay:.36s; }
.dl-korak h3{ font-size:18px; margin-bottom:6px; }
.dl-korak p{ color:var(--muted); font-size:14.5px; line-height:1.55; opacity:.68; transition:opacity .4s var(--ease-premium); }
.dl-korak.je-aktiven p, .dl-korak.predogled p{ opacity:1; }

@media (prefers-reduced-motion:reduce){
  .js .dl-korak{ opacity:1; transform:none; transition:none; }
  .dl-proces-crta::after{ transition:none; }
  .dl-korak-vozel{ transition:none; }
  .dl-korak p{ transition:none; }
}
@media (max-width:860px){
  .dl-koraki{ grid-template-columns:1fr; gap:0; }
  .dl-korak{
    display:flex; gap:var(--sp-3); align-items:flex-start;
    padding:0 0 var(--sp-4) 0; position:relative;
  }
  .dl-korak:last-child{ padding-bottom:0; }
  .dl-korak-vozel{ margin-bottom:0; }
  .dl-proces-crta{
    top:56px; right:auto; left:27px; bottom:-2px; width:2px; height:auto;
  }
  /* na navpični časovnici je aktivacija PRAVO scroll-vodeno napredovanje
     (glej main.js) — nth-child zamiki so namenjeni samo namizni
     kaskadi in bi tu samo po nepotrebnem zakasnili odziv na scroll */
  .dl-koraki .dl-korak:nth-child(2) .dl-proces-crta::after,
  .dl-koraki .dl-korak:nth-child(3) .dl-proces-crta::after,
  .dl-koraki .dl-korak:nth-child(4) .dl-proces-crta::after,
  .dl-koraki .dl-korak:nth-child(2) .dl-korak-vozel,
  .dl-koraki .dl-korak:nth-child(3) .dl-korak-vozel,
  .dl-koraki .dl-korak:nth-child(4) .dl-korak-vozel{ transition-delay:0s; }
  .js .dl-korak{ transition-delay:0s !important; }
}

/* ═══ 4/5/7. UREJEVALNE VRSTE (Zaposleni / Kuhinja / Administracija)
   — velika slika ena stran, vsebina druga, izmenično, brez kartic.
   Svetla/temna izmenjava (ne ves navy) — ".dl-vrsta" na svetli podlagi
   privzeto, ".on-navy" modifikator obrne barve za temne sekcije. ─── */
.dl-vrsta-drza{
  display:grid; grid-template-columns:1.02fr .98fr; gap:var(--sp-6); align-items:center;
}
.dl-vrsta-drza--obrni{ grid-template-columns:.98fr 1.02fr; }
.dl-vrsta-drza--obrni .dl-vrsta-media{ order:2; }
.dl-vrsta-drza--obrni .dl-vrsta-vsebina{ order:1; }

.dl-vrsta-media{ position:relative; }
.dl-vrsta-media .product-moment{ aspect-ratio:5/4; padding:0; }
.dl-vrsta-media .product-moment img{ width:100%; height:100%; object-fit:cover; }

.dl-vrsta-vsebina{ max-width:480px; }
.dl-vrsta-vsebina h2{ margin:4px 0 var(--sp-2); }
.dl-vrsta-vsebina .lead{ margin-bottom:var(--sp-3); max-width:none; }
.dl-vrsta-vsebina .kljuke{ margin-top:var(--sp-3); }

@media (max-width:900px){
  .dl-vrsta-drza, .dl-vrsta-drza--obrni{ grid-template-columns:1fr; gap:var(--sp-4); }
  .dl-vrsta-drza--obrni .dl-vrsta-media, .dl-vrsta-drza .dl-vrsta-media{ order:-1; }
  .dl-vrsta-vsebina{ max-width:none; }
  .dl-vrsta-media .product-moment{ aspect-ratio:16/10; max-width:520px; margin:0 auto; }
}

/* ═══ 6. "PRILAGOJENO VAŠI ORGANIZACIJI" (nova sekcija, glej obsežen
   komentar nad njeno oznako v HTML za celoten kontekst/brief). Uporablja
   OBSTOJEČ vzorec ".dl-vrsta-drza"/".dl-vrsta-media"/".dl-vrsta-vsebina"
   (glej zgoraj) — spodnja pravila so SAMO odstopanja od tega privzetka:
   fotografija poslovnega sestanka ima naravno razmerje 1611:890 (širša
   od privzetega ".dl-vrsta-media" 5:4), zato lastno "aspect-ratio", da
   se noben od dveh vidnih DeliMe zaslonov v kadru ne obreže. Seznam
   01–06 je NAMENOMA "tehnični seznam" (brief izrecno prepove 6 velikih
   belih kartic) — tanke ločnice med postavkami namesto lastnih
   ozadij/senc na vsaki, št. oznaka v cian (barva vzeta iz obstoječih
   ".dl-node--cyan"/CGP žetonov, ne nova). ─── */
.dl-org-media .product-moment{ aspect-ratio:1611/890; }

.dl-org-lista{ list-style:none; margin:var(--sp-3) 0 0; padding:0; display:flex; flex-direction:column; }
.dl-org-postavka{ display:flex; align-items:flex-start; gap:14px; padding:12px 0; border-top:1px solid var(--line); }
.dl-org-postavka:first-child{ border-top:none; padding-top:0; }
.dl-org-num{
  flex-shrink:0; width:28px; padding-top:1px;
  font-family:var(--fh); font-weight:700; font-size:13px; letter-spacing:.02em; color:var(--cyan);
}
.dl-org-naslov{ display:block; font-family:var(--fh); font-weight:600; font-size:15px; color:var(--navy); margin-bottom:2px; }
.dl-org-postavka p{ color:var(--muted); font-size:14px; line-height:1.5; margin:0; }

/* poudarjen mikro-tekst (brief razdelek 5) — brez zaprte "kartice", en
   tanek levi rob v zeleni (redka/selektivna raba zelene, kot zahteva
   brief) + rahlo tonirano ozadje, da izstopa od navadnega odstavka */
.dl-org-poudarek{
  margin-top:var(--sp-3); padding:12px 16px;
  border-left:2px solid var(--green); background:rgba(24,165,75,.07);
  font-size:14.5px; color:var(--navy); line-height:1.5;
}

.dl-org-cta{ margin-top:var(--sp-6); padding-top:var(--sp-5); border-top:1px solid var(--line); text-align:center; }
.dl-org-cta p{ font-family:var(--fh); font-weight:600; font-size:19px; color:var(--navy); margin:0 0 var(--sp-3); }

/* majhna dekorativna "organizacija → DeliMe → kategorije" grafika —
   ponovno uporablja ".dl-line"/".dl-node" risalne animacije, definirane
   zgoraj pri ".dl-hero-tech" (niso vezane nanj, glej komentar tam).
   Postavljena relativno na ODSTOTEK VIŠINE TE sekcije (ne fiksen "top:
   calc(50% − Npx)" kot ".dl-hero-tech") — namenoma NE podeduje iste
   krhkosti pri prelomu na en stolpec (glej POPRAVEK 8. 9. 2026 zgoraj),
   zato jo na mobilnem samo skrijemo skupaj s preostalimi ambientnimi
   elementi te sekcije. */
.dl-org-tech{ position:absolute; z-index:0; top:7%; right:4%; width:190px; height:190px; opacity:.5; pointer-events:none; }
.dl-org-tech svg{ width:100%; height:100%; }

@media (max-width:900px){
  .dl-org-media .product-moment{ aspect-ratio:16/10; max-width:520px; margin:0 auto; }
  .dl-org-tech{ display:none; }
  .dl-org-cta{ margin-top:var(--sp-5); padding-top:var(--sp-4); }
}

/* ═══ 4b. ZAPOSLENI — "half-dark" STRONG CONTRAST peak (17. 9. 2026,
   "RHYTHM PEAK" popravek, glej depth-system.css razdelek 13 in opombo
   v HTML zgoraj). Sekcija ostaja svetla (privzet ".section" beli
   ozadje) — dobi le en velik steel→navy-deep panel ZA obstoječo
   fotografijo naročanja na levi strani (asimetrična "half-dark"
   varianta, NE cel gradient band čez celo sekcijo kot "#nacini" na
   davcne-blagajne.html — brif izrecno zahteva drugačno obliko/barvno
   mešanico za DeliMe). Panel ima z-index:0 (privzet), ".dl-vrsta-drza"
   nima svojega z-index, a njena neposredna otroka (".dl-vrsta-media"/
   ".dl-vrsta-vsebina") sta v normalnem tokovnem kontekstu NAD absolutno
   pozicioniranim panelom (absolutno pozicionirani elementi so vedno
   pod elementi v normalnem toku, razen če imajo ti eksploziten nižji
   z-index — tu ni primera), zato ločen "dpt-fg" na wrap zadostuje. Na
   mobilnem (≤900px) gre slika na vrh vrstice (obstoječe ".dl-vrsta-
   media{order:-1}" pravilo, razdelek 4/5/7 spodaj), zato panel preklopi
   v vodoraven pas na vrhu namesto navpičnega na levi. ═══ */
.dl-zaposleni-panel{
  position:absolute; z-index:0; top:0; left:0; bottom:0; width:50%;
  background:linear-gradient(200deg, var(--steel), var(--steel-deep) 62%, var(--navy-deep));
  border-radius:0 var(--r-xl) var(--r-xl) 0;
}
@media (max-width:900px){
  .dl-zaposleni-panel{
    top:0; left:0; right:0; bottom:auto; width:auto; height:52%;
    border-radius:0 0 var(--r-xl) var(--r-xl);
  }
}
@media (max-width:600px){
  .dl-zaposleni-panel{ height:44%; }
}

/* ═══ 6. PREVZEM / IDENTIFIKACIJA — vizualno drugačna od softverskih
   sekcij: velika fotografska "moment" slika + manjša detajlna kartica
   (bralec ključka), ki se rahlo prekriva prek glavne slike. ────────── */
.dl-prevzem-drza{ display:grid; grid-template-columns:1fr .82fr; gap:var(--sp-6); align-items:center; }
.dl-prevzem-vizual{ position:relative; }
.dl-prevzem-vizual .product-moment{ aspect-ratio:4/3; padding:0; }
.dl-prevzem-vizual .product-moment img{ width:100%; height:100%; object-fit:cover; object-position:center 38%; }
.dl-prevzem-detajl{
  position:absolute; z-index:2; right:-36px; bottom:-30px; width:46%;
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-lg);
  border:4px solid var(--surface);
  background:var(--navy-deep);
}
.dl-prevzem-detajl img{ display:block; width:100%; height:100%; aspect-ratio:1/1; object-fit:cover; }
.dl-prevzem-detajl-label{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:22px 14px 10px; text-align:center;
  background:linear-gradient(0deg, rgba(23,34,46,.82), transparent);
  font-family:var(--fh); font-weight:700; font-size:11.5px; letter-spacing:.04em; color:#fff;
}
.dl-prevzem-vsebina{ max-width:460px; }
.dl-prevzem-vsebina .kljuke{ margin-top:var(--sp-3); }

@media (max-width:900px){
  .dl-prevzem-drza{ grid-template-columns:1fr; gap:var(--sp-6); }
  /* POPRAVEK (7. 9. 2026) — ista krožna sizing-napaka kot pri
     ".dl-hero-vizual" zgoraj (glej opombo tam za polno razlago):
     brez eksplicitne širine tu je bila slika na mobilnem nevidna
     (0×0), odkrito med preverjanjem flagship heroja. */
  .dl-prevzem-vizual{ order:-1; width:100%; max-width:480px; margin:0 auto 26px; }
  .dl-prevzem-detajl{ width:44%; right:-14px; bottom:-24px; }
  .dl-prevzem-vsebina{ max-width:none; }
}
@media (max-width:480px){
  .dl-prevzem-detajl{ width:42%; right:-8px; bottom:-18px; }
}

/* ═══ 7b. KUHINJA — tonalni popravek (15. 9. 2026, "SECTION RHYTHM 2")
   Sekcija je bila ".on-navy" (raven temna podlaga), zdaj ".on-ice-deep"
   (obstoječa utility iz depth-system.css, MID LIGHT ton — glej opombo
   v HTML zgoraj za polno utemeljitev, zakaj ravno ta sekcija in ne
   "Administracija"). Novi razred ".dl-kuhinja-sekcija" (poleg
   ".on-ice-deep") tu NIMA lastnih pravil — je samo stran-specifičen
   kljuk za morebitne prihodnje popravke, ozadje že v celoti pokrije
   ".on-ice-deep{background:var(--ice-deep)}" (depth-system.css), h2/h3
   barva pride brezplačno iz ".on-ice-deep h2,h3{color:var(--ink)}"
   (isto). ".badge-cyan"/".lead" sta v HTML-ju izgubila modifikator
   ".on-navy" (components.css/base.css privzeti, svetli varianti sta že
   pravilno kontrastni). Edini preostali element, ki je bil vizualno
   odvisen od temne podlage, je bila ".circuit-field" (dobila je nov
   ".on-light" modifikator v HTML-ju, glej components.css). ".motif-
   cross" spodaj ni bil spremenjen — njegova barva je bila ŽE
   eksplicitno nastavljena prek inline "color:var(--cyan)" (ne podeduje
   od podlage), zato deluje enako na obeh ozadjih. */

/* ═══ 8. TRIJE UPORABNIKI — EN SISTEM — veliki tipografski stolpci,
   povezani z eno tanko črto, DeliMe kot poenoteni "jedro" na vrhu
   sredine. Brez kartic. Trije ENAKOVREDNI stolpci (Zaposleni / Kuhinja
   / Administracija) + krožni DeliMe naglas nad vrsto, povezan navzdol
   s tanko navpično črto do vodoravne povezovalne črte.

   8. 9. 2026 — "SECTION RHYTHM" popravek: sekcija je zdaj na svetli
   (".on-surface-alt") namesto temni (".on-navy") podlagi (glej opombo
   v HTML), zato so ".dl-uporabniki-pecelj/-crta" (prej belkasti
   prosojni toni za temno ozadje) in ".dl-uporabnik-eyebrow/p" (prej
   lime/belo besedilo) preklopljeni na temne/ink tone. ".dl-uporabniki-
   jedro" (zeleni krog) ostaja nespremenjen — temno besedilo na svetlo-
   zeleni gradientni podlagi je delovalo enako dobro na obeh ozadjih. ── */
.dl-uporabniki{ position:relative; }
.dl-uporabniki-jedro-vrh{ display:flex; flex-direction:column; align-items:center; margin-bottom:var(--sp-4); }
.dl-uporabniki-jedro{
  width:100px; height:100px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--grad-green); box-shadow:0 0 0 10px rgba(171,208,57,.09), var(--sh-lg);
  font-family:var(--fh); font-weight:800; font-size:18px; color:#0d2015; letter-spacing:-.01em;
  position:relative; z-index:2;
}
.dl-uporabniki-pecelj{ width:1px; height:34px; background:linear-gradient(180deg, rgba(23,34,46,.22), rgba(23,34,46,.05)); }
.dl-uporabniki-vrsta{
  position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4);
  align-items:start; max-width:900px; margin:0 auto;
}
.dl-uporabniki-crta{
  position:absolute; z-index:0; top:-1px; left:8%; right:8%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(23,34,46,.16) 12%, rgba(23,34,46,.16) 88%, transparent);
}
.dl-uporabnik{ position:relative; z-index:1; text-align:center; padding:var(--sp-3) var(--sp-2) 0; }
.dl-uporabnik-eyebrow{
  display:block; font-family:var(--fh); font-weight:700; font-size:13px;
  letter-spacing:.07em; text-transform:uppercase; color:var(--green); margin-bottom:10px;
}
.dl-uporabnik p{ font-family:var(--fh); font-weight:600; font-size:clamp(18px,1.7vw,22px); color:var(--navy); line-height:1.35; }
@media (max-width:760px){
  .dl-uporabniki-vrsta{ grid-template-columns:1fr; gap:var(--sp-4); max-width:360px; }
  .dl-uporabniki-crta{ display:none; }
  .dl-uporabnik{ padding-top:0; }
}

/* ═══ 9. KLJUČNE KORISTI — velik naslov + preprost .kljuke seznam v
   dveh stolpcih (brez kartic/ikon-škatel, mirna tipografska lista). ── */
.dl-koristi-vsebina{ display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--sp-6); align-items:start; }
.dl-koristi-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:14px var(--sp-4);
}
.dl-koristi-list li{ display:flex; gap:12px; align-items:flex-start; font-size:16px; }
.dl-koristi-list li svg{ width:19px; height:19px; color:var(--green); flex-shrink:0; margin-top:3px; }
@media (max-width:900px){
  .dl-koristi-vsebina{ grid-template-columns:1fr; gap:var(--sp-3); }
}
@media (max-width:560px){
  .dl-koristi-list{ grid-template-columns:1fr; }
}

/* ═══ 10. NAŠ LASTEN RAZVOJ — atmosferska fotografija v ozadju (polna
   širina), temen prekrivni sloj za berljivost, vsebinski panel čez.
   Namenoma NI navy-gradient "product-moment" jezik (ta je rezerviran
   za softverske momente) — tu gre za ljudi/prostor, ne za UI. ─────── */
.dl-razvoj{ position:relative; overflow:hidden; color:#fff; }
.dl-razvoj-foto{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center 38%;
}
.dl-razvoj-prekritje{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(23,34,46,.94) 0%, rgba(23,34,46,.86) 38%, rgba(38,58,79,.55) 66%, rgba(38,58,79,.3) 100%);
}
.dl-razvoj-vsebina{ position:relative; z-index:2; max-width:560px; padding:var(--sp-7) 0; }
.dl-razvoj-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--fh); font-weight:700; font-size:12px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--lime); margin-bottom:var(--sp-2);
}
.dl-razvoj-vsebina h2{ font-size:clamp(28px,3.4vw,42px); margin-bottom:var(--sp-3); }
.dl-razvoj-vsebina .lead{ color:var(--muted-on-navy); max-width:none; }
@media (max-width:760px){
  .dl-razvoj-vsebina{ padding:var(--sp-6) 0; max-width:none; }
  .dl-razvoj-prekritje{ background:linear-gradient(180deg, rgba(23,34,46,.9), rgba(23,34,46,.82) 55%, rgba(23,34,46,.72)); }
}

/* ═══ 11. ZAKLJUČNI CTA — ponovna uporaba .cta-band (definiran v
   pages.css, homepage-scoped datoteka, ki je namenoma NI vključena na
   tej strani) — pravila tu podvojena namerno, da ostane pages.css
   nedotaknjen in ta stran popolnoma samostojna. Vizualno povezano z
   domačo stranjo (isti razred/jezik), a ne identično (drugačne CGP
   plasti/barvni naglas spodaj v HTML-ju). ─────────────────────────── */
.cta-band{
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  background:linear-gradient(160deg, var(--navy-mid), var(--navy) 65%, var(--navy-deep));
  padding:var(--sp-7) var(--sp-5); text-align:center; color:#fff;
}
.cta-band::before{
  content:''; position:absolute; top:0; left:8%; right:8%; height:2px;
  background:linear-gradient(90deg, transparent, rgba(23,185,236,.55), rgba(171,208,57,.5), transparent);
}
.cta-band h2{ margin-bottom:var(--sp-2); font-size:clamp(30px, 3.2vw, 44px); }
.cta-band .lead{ margin:0 auto var(--sp-4); color:var(--muted-on-navy); }
.cta-btns{ display:flex; gap:var(--sp-2); justify-content:center; flex-wrap:wrap; }

/* ═══ 12. DELIME V 60 SEKUNDAH — VIDEO ENTRY POINT #2 (21. 9. 2026,
   brief "ADD TWO VIDEO ENTRY POINTS"). Ozadje je NAMENOMA najtemnejši
   trenutek na strani — isti "brez uvodnega steel" recept kot
   ".servis-temna" na index.html (glej dnevnik), SAMO iz obstoječih CGP
   žetonov (var(--navy)/var(--navy-deep)), brez novih barv. `.on-navy`
   razred na <section> (v HTML-ju) poskrbi za osnovno belo besedilo/
   ".eyebrow.on-navy" (glej base.css) — spodnje pravilo samo PREGLASI
   njegovo ravno "background:var(--navy)" z globljim gradientom (ista
   tehnika kot ".servis-temna"/".hardware" v pages.css: kasnejši, enako
   specifičen razred v kasneje naloženi datoteki zmaga). ────────────── */
.dl-video-sekcija{ background:linear-gradient(165deg, var(--navy) 0%, var(--navy-deep) 100%); }
.dl-video-sekcija .section-head p{ max-width:560px; margin:0 auto; }
.dl-video-sekcija .section-head p + p{ margin-top:6px; font-size:14.5px; }

/* majhna dekorativna "PODJETJE → DELIME → ZAPOSLENI" nakazana povezava
   (ne dobesedna) — ponovno uporabi ".dl-line"/".dl-node" risalne
   animacije, definirane zgoraj pri ".dl-hero-tech" (niso vezane nanj). */
.dl-video-tech{ position:absolute; z-index:0; top:8%; right:5%; width:150px; height:150px; opacity:.5; pointer-events:none; }
.dl-video-tech svg{ width:100%; height:100%; }

.dl-video-okvir{ position:relative; max-width:960px; margin:var(--sp-6) auto 0; }
.dl-video-okvir::before{
  content:''; position:absolute; z-index:0; inset:-26px;
  background:radial-gradient(ellipse at center, rgba(23,185,236,.22), transparent 70%);
  filter:blur(6px); pointer-events:none;
}
.dl-video-predogled{
  position:relative; z-index:1; display:block; width:100%; aspect-ratio:16/9;
  border-radius:var(--r-xl); overflow:hidden; padding:0;
  border:1px solid rgba(23,185,236,.28); background:var(--navy-deep); cursor:pointer;
  box-shadow:0 30px 80px rgba(2,8,16,.55);
  transition:transform .4s var(--ease-premium), box-shadow .4s var(--ease-premium), border-color .4s var(--ease-premium);
}
.dl-video-predogled:hover, .dl-video-predogled:focus-visible{
  transform:scale(1.008);
  box-shadow:0 36px 92px rgba(2,8,16,.6);
  border-color:rgba(23,185,236,.5);
}
.dl-video-predogled:focus-visible{ outline:2px solid var(--cyan); outline-offset:4px; }
.dl-video-predogled img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 32%;
}
.dl-video-predogled-prekritje{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,20,30,.12) 0%, rgba(7,20,30,.5) 62%, rgba(7,20,30,.8) 100%);
}
.dl-video-predogled-jedro{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:9px;
}
.dl-video-predogled-krog{
  width:82px; height:82px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1.5px solid rgba(255,255,255,.55); color:#fff;
  transition:transform .4s var(--ease-premium), box-shadow .4s var(--ease-premium), background .4s var(--ease-premium), border-color .4s var(--ease-premium);
}
.dl-video-predogled-krog svg{ width:28px; height:28px; margin-left:4px; }
.dl-video-predogled:hover .dl-video-predogled-krog,
.dl-video-predogled:focus-visible .dl-video-predogled-krog{
  transform:scale(1.05);
  background:rgba(23,185,236,.85); border-color:rgba(23,185,236,.95);
  box-shadow:0 0 0 14px rgba(23,185,236,.16);
}
.dl-video-predogled-tekst{ font-family:var(--fh); font-weight:700; font-size:15px; color:#fff; }
.dl-video-predogled-cas{ font-size:12.5px; color:rgba(255,255,255,.72); }

@media (max-width:760px){
  .dl-video-predogled-krog{ width:64px; height:64px; }
  .dl-video-predogled-krog svg{ width:22px; height:22px; }
  .dl-video-okvir{ margin-top:var(--sp-5); }
}
@media (prefers-reduced-motion:reduce){
  .dl-video-predogled, .dl-video-predogled-krog{ transition:none; }
  .dl-video-predogled:hover, .dl-video-predogled:focus-visible{ transform:none; }
  .dl-video-predogled:hover .dl-video-predogled-krog,
  .dl-video-predogled:focus-visible .dl-video-predogled-krog{ transform:none; }
}

/* ═══ 13. VIDEO MODAL — deljen med obema vstopnima točkama na tej
   strani (glej main.js in opombo v HTML tik pred </main>). Isti vzorec/
   z-index/velikosti kot slikovni ".lightbox" (pages.css, homepage-
   scoped, glej opombo pri ".cta-band" zgoraj za razlog namerne
   podvojitve namesto uvoza pages.css na to stran) — tu preimenovan v
   ".video-lightbox", da se ne prekriva, in prilagojen 16:9 videu +
   sekundarni "Odprite na YouTube" povezavi pod okvirjem. ────────────── */
.video-lightbox{ position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:24px; }
.video-lightbox[hidden]{ display:none; }
.video-lightbox-ozadje{ position:absolute; inset:0; background:rgba(5,12,20,.88); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); cursor:pointer; }
.video-lightbox-okvir{
  position:relative; z-index:1; width:min(1200px, 90vw);
  opacity:0; transform:scale(.97);
  transition:opacity .3s var(--ease-premium), transform .3s var(--ease-premium);
}
.video-lightbox.je-odprt .video-lightbox-okvir{ opacity:1; transform:scale(1); }
.video-lightbox-16-9{
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius:var(--r-lg); overflow:hidden; background:#000; box-shadow:var(--sh-lg);
}
.video-lightbox-16-9 iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-lightbox-zapri{
  position:absolute; z-index:2; top:12px; right:12px;
  width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.28);
  background:rgba(10,15,22,.65); color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background var(--dur-fast) var(--ease-premium);
}
.video-lightbox-zapri:hover{ background:rgba(10,15,22,.88); }
.video-lightbox-zapri:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
.video-lightbox-zapri svg{ width:19px; height:19px; }
.video-lightbox-yt{
  position:relative; z-index:1; display:block; text-align:center; margin-top:14px;
  font-size:13px; color:rgba(255,255,255,.65); text-decoration:none;
}
.video-lightbox-yt:hover{ color:#fff; text-decoration:underline; }
@media (max-width:640px){
  .video-lightbox{ padding:10px; }
  .video-lightbox-okvir{ width:100%; }
  .video-lightbox-zapri{ width:38px; height:38px; }
  .video-lightbox-yt{ margin-top:10px; }
}
@media (prefers-reduced-motion:reduce){
  .video-lightbox-okvir{ transition:none; }
}
.cta-znacke{ display:flex; gap:var(--sp-3); justify-content:center; flex-wrap:wrap; margin-top:var(--sp-4); font-size:13px; color:var(--muted-on-navy); }