/* ═══════════════════════════════════════════════════════════════
   Biroplast Solutions — V2 PROGRAMSKE REŠITVE (produktna kategorija)
   Sekcije POD heroem (programi/uvedba/cta-band) ohranjajo splošno
   vizualno logiko drugih produktnih kategorij — NAMENOMA samostojna
   kopija (glej dogovor o samostojnosti strani). Predpona razredov
   "pr-" (programske rešitve).

   Naglasna barva: modra/cyan (brief: "programske rešitve = bolj
   DIGITALEN občutek", modra ustvarja tehnološki občutek) — zelena samo
   pri kljukicah in CTA gumbih, kot povsod drugje. Štiri programe med
   sabo ločuje majhna barvna značka (isto barvno kodiranje kot v1:
   gostinstvo=zelena, trgovina=cyan, storitve=lime, računovodstvo=modra)
   — to je edini namen barve tu, ne dekoracija.

   TONALNI RITEM (17. 9. 2026, "MANJŠA PONOVNA URAVNOTEŽITEV — RITEM PO
   STRANEH", glej dnevnik): namesto sredinske STEEL/STRONG sekcije, kot
   jo imajo davcne-blagajne/tiskalniki, ima ta stran SVOJ lasten,
   postopen ritem — LIGHT (hero, s krajevno "half-dark" steel→navy
   UI-kontrast ploščo TAKOJ za produktno fotografijo, glej
   ".pr-hero-backdrop" spodaj) → ICE (#programi, ".on-ice" — prvi jasen
   tonalni korak, beli programski paneli dobijo ločitev od podlage) →
   MID (uvedba, ".on-mid", že obstoječ) → NAVY (zaključni CTA, obstoječ
   bespoke gradient). Namesto ene same "STRONG CONTRAST" sredinske
   sekcije je kontrast tu namerno skoncentriran OKROG UI posnetka na
   vrhu strani (brif: "fewer dark backgrounds are needed because UI
   screenshots create contrast") — to je edina prava temna gesta pred
   zaključnim CTA-jem, kar to stran vizualno loči od preostalih
   produktnih strani. ═══════════════════════════════════════════ */

/* ═══ 1. HERO — "VARIANTA B — SOFTWARE/DIGITAL" (8. 9. 2026, globalna
   svetla premium-tech prenova, glej dnevnik). Zamenjuje prejšnji temen
   navy gradient hero z istim svetlim "light hero" sistemom, ki ga je
   vzpostavil `blagajna-greentill.html`/`davcne-blagajne.html`
   (gt-/db- razredi), a prilagojenim SVOJI varianti brief-a:
     - zelo svetla HLADNA sivo-modra osnova (ne cyan/zelena kot
       GreenTill, ne modro-vodena kot Davčne blagajne — nekje vmes,
       bolj nevtralno siva, "cool-grey/blue-grey base");
     - CYAN je vodilna ambientna barva ("cyan atmosphere"), modra
       tehnična mreža je namenoma MINIMALNA (manj linij/vozlišč kot na
       GreenTill/Davčnih blagajnah — brief: "minimal blue technical
       grid/nodes"), zelena je samo EN majhen accent node (brez lastne
       ambientne plasti, brez lastne linije — "smaller green details"
       kot na strojni opremi);
     - resnična fotografija UI-ja (programske-resitve.webp — dejanski
       posnetek nadzorne plošče na zaslonu) OSTAJA glavna vizualna
       vsebina, nespremenjena — dodana je samo "layered UI depth":
       dve rahlo zamaknjeni, zasukani "okenski" plasti za glavno
       kartico (".pr-hero-vizual::before/::after"), ki namigujejo na
       več aplikacijskih oken/panelov, ne generična dekorativna
       kartica.
   Vizual/video-ekvivalent (product-moment) zdaj nosi svojo mikro-float
   animacijo LOČENO od data-parallax nosilca (".pr-hero-media-wrap") —
   ista wrap/inner ločitev in isti razlog kot na GreenTillu/Davčnih
   blagajnah (CSS animacija transforma bi sicer preglasila JS scroll-
   parallax na istem elementu, glej dnevnik). Copy/CTA/route-i
   NESPREMENJENI — samo ozadje/kompozicija/barvni sistem heroja. ═══ */
.pr-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(172deg, #f5f7fa 0%, #e7ecf2 52%, #dce3ea 100%);
  color:var(--ink);
  padding:calc(var(--sp-7) + 20px) 0 var(--sp-7);
}
/* zelo blaga hladna prevleka — cyan zgoraj desno (vodilna barva),
   komaj zaznaven zelen namig spodaj levo (brief: "smaller green
   details"), NE poln gradient čez stran */
.pr-hero::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 82% 8%, rgba(23,185,236,.07), transparent 46%),
    radial-gradient(circle at 4% 96%, rgba(171,208,57,.04), transparent 40%);
}
.pr-hero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-6); align-items:center;
}
.pr-hero h1{ font-size:clamp(36px,4.6vw,56px); margin:2px 0 var(--sp-3); max-width:560px; color:var(--navy); }
.pr-hero .lead{ max-width:480px; margin-bottom:var(--sp-4); }
.pr-hero-cta{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }

/* značka — bivši generični ".eyebrow.on-navy" (samo besedilo, brez
   ozadja) zdaj postane pravokotna "tehnična status" nalepka, isti
   vzorec kot ".db-hero-znacka-badge"/".gt-hero-znacka", modro-vodena
   (ujema se z uveljavljeno namero te strani: "modra = tehnološki
   občutek"). Besedilo NESPREMENJENO ("Programske rešitve"). */
.pr-hero-znacka{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--fh); font-weight:700; font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  padding:7px 12px 7px 10px; border-radius:6px; margin-bottom:var(--sp-2);
  background:rgba(4,123,193,.08); color:#0a5c8f; border:1px solid rgba(4,123,193,.22);
}
.pr-hero-znacka .pika{
  width:6px; height:6px; border-radius:50%; flex-shrink:0;
  background:var(--blue); box-shadow:0 0 0 3px rgba(4,123,193,.18);
}

/* ── produktna slika — "layered UI depth": ".pr-hero-vizual" nosi
   position:relative (nujno za ::before/::after spodaj IN za morebitne
   kasnejše absolutno pozicionirane elemente znotraj), dve zamaknjeni
   psevdo-"okenski" plasti simulirajo sklad aplikacijskih oken ZA
   glavno sliko — brez novih slik/besedila, čisto barva+senca. ── */
.pr-hero-vizual{ position:relative; }
.pr-hero-vizual::before, .pr-hero-vizual::after{
  content:''; position:absolute; z-index:0; border-radius:var(--r-lg);
  border:1px solid var(--line); box-shadow:0 20px 45px -24px rgba(23,34,46,.22);
  pointer-events:none;
}
.pr-hero-vizual::before{
  inset:16px -12px -16px 12px; transform:rotate(-2.6deg);
  background:linear-gradient(160deg, rgba(23,185,236,.10), rgba(255,255,255,.92));
}
.pr-hero-vizual::after{
  inset:-12px 16px 12px -16px; transform:rotate(2.2deg);
  background:linear-gradient(160deg, rgba(4,123,193,.08), rgba(255,255,255,.88));
}
/* ── 17. 9. 2026 — "UI SCREENSHOT KOT KONTRAST" (glej dnevnik, brif
   "MANJŠA PONOVNA URAVNOTEŽITEV — RITEM PO STRANEH"): stran je za svoj
   karakter ("data/dashboard, navy SAMO kot UI-kontrast device") imela
   samo eno resnično temno gesto na voljo — fotografijo nadzorne plošče
   v heroju — a ni okrog nje izkoristila nobenega dejanskega ozadinega
   kontrasta (slika je plavala na skoraj enako svetli podlagi kot
   ostanek heroja). Namesto dodajanja nove, ločene temne SEKCIJE nekje
   na strani (kar brif izrecno odsvetuje za to stran), dobi slika samo
   "half-dark" steel→navy PANEL tik za sabo — isti recept kot
   "13. STRONG/DARK SEKCIJA Z GLOBINO → HALF-DARK/ASIMETRIČNA VARIANTA"
   v depth-system.css, a namerno OMEJEN na velikost vizualnega stolpca
   (ne cele širine heroja), tako da ostane dosledno "UI-kontrast okvir
   za posnetek", ne samostojen temen blok. z-index:-1 znotraj
   `.pr-hero-vizual` (position:relative, brez lastnega z-indexa =>
   NE tvori nove stacking context, torej -1 pade na dno OBSTOJEČEGA
   lokalnega sklada znotraj `.pr-hero-grid`, glej dnevnik za polno
   analizo) namerno pusti uveljavljeni ::before/::after "layered
   window" par (zgoraj) NESPREMENJEN čez njim — panel je viden samo kot
   dvignjen rob/senca okrog te že obstoječe kompozicije, ne kot
   prekrivka nanjo. */
.pr-hero-backdrop{
  position:absolute; z-index:-1;
  left:9%; right:-22px; top:-20px; bottom:-30px;
  border-radius:var(--r-xl);
  background:
    radial-gradient(circle at 84% 12%, rgba(23,185,236,.35), transparent 55%),
    linear-gradient(155deg, var(--steel) 0%, var(--steel-deep) 58%, var(--navy-deep) 100%);
  box-shadow:0 34px 70px -32px rgba(15,23,32,.45);
  pointer-events:none;
}
@media (max-width:960px){
  .pr-hero-backdrop{ left:6%; right:-14px; top:-14px; bottom:-20px; }
}
@media (max-width:600px){
  /* na zloženi 1-stolpčni postavitvi slika že zapolni skoraj celo
     širino wrap-a — obrobni panel bi tu izgledal kot naključen rob,
     ne kot namerna kompozicija, zato ga izklopimo (brif t. 15). */
  .pr-hero-backdrop{ display:none; }
}

/* nosilec SAMO data-parallax (scroll) — ".product-moment" znotraj nosi
   SAMO svojo neskončno "micro-float" animacijo (glej spodaj), ista
   ločitev in isti razlog kot ".gt-hero-video-wrap"/".gt-hero-video". */
.pr-hero-media-wrap{ display:block; width:100%; position:relative; z-index:1; }
.pr-hero-vizual .product-moment{
  aspect-ratio:2.15/1; padding:0;
  animation:prFloat 7.5s ease-in-out infinite;
}
@keyframes prFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
.pr-hero-vizual .produkt-slika-plast img{
  display:block; width:100%; height:100%; object-fit:cover; object-position:center 30%;
  position:relative; z-index:1;
}

/* ── ambientno ozadje: statična navy globina + cyan (vodilna,
   največja) + modra (minimalna, ujema se s tehnično mrežo) + zelo
   majhna zelena — ista arhitektura kot GreenTill/Davčne blagajne
   (wrap nosi SAMO data-parallax, notranji SAMO "drift" animacijo). ── */
.pr-ambient-navy{
  position:absolute; z-index:0; pointer-events:none; border-radius:50%;
  width:520px; height:520px; right:-8%; top:20%;
  filter:blur(30px);
  background:radial-gradient(circle, rgba(42,61,80,.08), rgba(51,72,97,.03) 55%, transparent 74%);
}
.pr-ambient-wrap{ position:absolute; z-index:0; pointer-events:none; }
.pr-ambient{ position:absolute; inset:0; border-radius:50%; filter:blur(10px); }

.pr-ambient-wrap--cyan{ width:460px; height:460px; right:0; top:-110px; }
.pr-ambient--cyan{
  background:radial-gradient(circle, rgba(23,185,236,.20), transparent 70%);
  animation:prDriftCyan 20s ease-in-out infinite;
}
.pr-ambient-wrap--blue{ width:320px; height:320px; right:-4%; top:30%; }
.pr-ambient--blue{
  background:radial-gradient(circle, rgba(4,123,193,.14), transparent 72%);
  filter:blur(14px);
  animation:prDriftBlue 19s ease-in-out infinite; animation-delay:-9s;
}
.pr-ambient-wrap--green{ width:200px; height:200px; left:-4%; bottom:-90px; }
.pr-ambient--green{
  background:radial-gradient(circle, rgba(171,208,57,.13), transparent 70%);
  animation:prDriftGreen 24s ease-in-out infinite; animation-delay:-14s;
}
@keyframes prDriftCyan{ 0%,100%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(-30px,42px,0) scale(1.06); } }
@keyframes prDriftBlue{ 0%,100%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(26px,-36px,0) scale(1.05); } }
@keyframes prDriftGreen{ 0%,100%{ transform:translate3d(0,0,0) scale(1); opacity:1; } 50%{ transform:translate3d(30px,-18px,0) scale(.95); opacity:.85; } }

/* ── tehnična črtna grafika — NAMENOMA minimalna (Varianta B: "minimal
   blue technical grid/nodes"): eno modro pot z enim zavojem + eno
   kratko cyan pot, brez lastne zelene linije (samo EN zelen accent
   node na koncu modre poti, manj skupne zelene teže kot na strojni
   opremi). Ista "risanje se" tehnika (stroke-dasharray/dashoffset
   prek pathLength=1) kot GreenTill/Davčne blagajne. ── */
.pr-hero-tech{
  position:absolute; z-index:0; top:calc(50% - 220px); right:-3%; width:460px; height:460px;
  opacity:.55; pointer-events:none;
}
.pr-hero-tech svg{ width:100%; height:100%; }
.pr-line{ stroke-dasharray:1; stroke-dashoffset:1; opacity:0; animation:prDrawLine 2s cubic-bezier(.4,0,.2,1) both; }
.pr-line--blue{ animation-delay:.6s; }
.pr-line--cyan{ animation-delay:1.1s; }
@keyframes prDrawLine{ from{ stroke-dashoffset:1; opacity:0; } to{ stroke-dashoffset:0; opacity:.9; } }
.pr-node{ opacity:0; transform-origin:center; animation:prNodeIn .5s ease-out both; }
.pr-node--blue{ animation-delay:2.4s; filter:drop-shadow(0 0 3px rgba(4,123,193,.5)); }
.pr-node--cyan{ animation-delay:2.8s; filter:drop-shadow(0 0 3px rgba(23,185,236,.55)); }
@keyframes prNodeIn{ from{ opacity:0; transform:scale(.4); } to{ opacity:1; transform:scale(1); } }
.pr-node.pr-node--accent{ animation:prNodeIn .5s ease-out 3s both, prPulse 4.2s ease-in-out 3.8s infinite; }
@keyframes prPulse{ 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){
  .pr-hero-grid{ grid-template-columns:1fr; gap:var(--sp-5); }
  .pr-hero-vizual{ order:-1; }
  .pr-hero h1{ max-width:none; }
  .pr-hero .lead{ max-width:none; }
  .pr-hero-tech{ opacity:.4; }
}
@media (max-width:760px){
  .pr-line--blue, .pr-node--blue, .pr-node--accent{ display:none; }
  .pr-hero-tech{ opacity:.32; }
  .pr-ambient-wrap--blue{ display:none; }
  .pr-ambient-wrap--cyan{ width:280px; height:280px; }
  .pr-ambient-wrap--green{ width:160px; height:160px; }
  .pr-ambient-navy{ width:320px; height:320px; opacity:.7; }
  .pr-hero-vizual::before, .pr-hero-vizual::after{ display:none; }
}
@media (max-width:600px){
  .pr-hero{ padding:calc(var(--sp-6) + 20px) 0 var(--sp-6); }
  .pr-hero-vizual .product-moment{ aspect-ratio:4/3; border-radius:var(--r-lg); }
}
@media (prefers-reduced-motion: reduce){
  .pr-line, .pr-node,
  .pr-ambient--cyan, .pr-ambient--blue, .pr-ambient--green,
  .pr-hero-vizual .product-moment{ animation:none !important; }
  .pr-line{ stroke-dashoffset:0; opacity:.9; }
  .pr-node{ opacity:1; transform:none; }
}

/* ═══ 2. ŠTIRJE PROGRAMI — vsak kot lasten "panel" (belo ozadje,
   tanka obroba), dvostolpčna notranja postavitev (glava z značko/
   naslovom/opisom levo ožje, kljuke+CTA desno širše) — zrcali v1-jevo
   ".prog-dvo" razmerje, a brez cen in brez povezav na še ne obstoječe
   V2 podstrani (glej opomba v HTML-ju).
   17. 9. 2026 — sekcija je dobila ".on-ice" (tokens.css/depth-system.css,
   prvi jasen tonalni korak nad hero-jem, glej ritem na vrhu datoteke);
   beli ".pr-program" paneli spodaj dobijo skupni ".dpt-card" razred
   (depth-system.css, razdelek 7 — rahla inset-svetloba + hover globina)
   namesto lastnega podvojenega hover-recepta. ══════════════════════ */
.pr-program{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  padding:var(--sp-5); margin-bottom:var(--sp-3);
  display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--sp-5);
}
.pr-program:last-child{ margin-bottom:0; }
.pr-program-glava h3{ font-family:var(--fh); font-size:26px; margin:10px 0 10px; }
.pr-program-glava p{ color:var(--muted); font-size:15px; line-height:1.6; }

.pr-znacka{ font-size:11px; }
.pr-znacka--gostinstvo{ background:rgba(24,165,75,.14); color:#0e7a37; }
.pr-znacka--trgovina{ background:rgba(23,185,236,.14); color:#0a6d8a; }
.pr-znacka--storitve{ background:rgba(171,208,57,.18); color:#54711b; }
.pr-znacka--racunovodstvo{ background:rgba(4,123,193,.13); color:#045f95; }

.pr-program-vsebina{ display:flex; flex-direction:column; gap:var(--sp-4); }
.pr-program-vsebina .kljuke{ display:grid; grid-template-columns:1fr 1fr; gap:9px var(--sp-4); }
.pr-program-vsebina .kljuke a{ color:var(--blue); font-weight:600; }
.pr-program-cta{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; padding-top:var(--sp-2); border-top:1px solid var(--line); }

@media (max-width:900px){
  .pr-program{ grid-template-columns:1fr; gap:var(--sp-3); padding:var(--sp-4); }
  .pr-program-vsebina .kljuke{ grid-template-columns:1fr; }
}

/* ═══ 3. UVEDBA — preprost trostolpčni ikonski niz (glej opombo v
   HTML-ju zakaj brez scroll-aktiviranega "koraki" mehanizma). ═══ */
.pr-koraki{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4);
}
.pr-korak{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-4); }
.pr-korak h3{ font-size:18px; margin:var(--sp-2) 0 6px; }
.pr-korak p{ color:var(--muted); font-size:14.5px; line-height:1.55; }
@media (max-width:860px){ .pr-koraki{ grid-template-columns:1fr; } }

/* ═══ 4. ZAKLJUČNI CTA — ".cta-band" jezik podvojen namerno (glej isto
   odločitev v davcne-blagajne.css/tiskalniki.css), da ostane
   components.css/pages.css nedotaknjen in ta stran popolnoma
   samostojna. ─────────────────────────────────────────────────────── */
.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; }
.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); }

@media (max-width:760px){
  .cta-band{ padding:var(--sp-6) var(--sp-3); }
}