/* ═══════════════════════════════════════════════════════════════
   Biroplast Solutions — V2 ZA VAŠO DEJAVNOST (skupina 7 strani)
   Ena SKUPNA datoteka za `dejavnosti.html` (hub/izbirnik) IN vseh 6
   podstrani po panogi (`dejavnost-gostinstvo/trgovina/storitve/
   dogodki/pisarne/racunovodstvo.html`) — NAMERNO odstopanje od
   sicer uveljavljenega dogovora "ena CSS datoteka na stran".
   Utemeljitev: teh 7 strani je EN sam, tesno povezan podsistem
   (izbirnik panoge + 6 skoraj identičnih predlog za posamezno
   panogo, ki delijo dobesedno iste razrede/komponente) — 6x
   podvojena identična CSS datoteka bi škodila vzdrževanju bolj kot
   pomagala, medtem ko je ta skupina še vedno popolnoma neodvisna od
   VSEH OSTALIH V2 strani (components.css/pages.css/druge page-CSS
   datoteke ostajajo nedotaknjene). Predpona razredov "dj-"
   (dejavnosti).

   Naglasna barva: mešano modra/zelena kot na domači strani — ta
   skupina strani ni ena produktna kategorija, ampak presek vseh
   (hardver+softver+aplikacije), zato namerno ne uporablja ene same
   dosledne naglasne barve kot npr. tiskalniki.css (modra) ali
   davcne-blagajne.css (cyan). ═══════════════════════════════════ */

/* ═══ 1. HERO — brez produktne fotografije (noben v1 vir za to
   skupino ne vsebuje nobene prave fotografije/posnetka — glej
   dnevnik). Namesto tega: velik krožni "pečat" z ikono panoge,
   plavajoč na temnem ozadju — daje vizualno asimetrijo/identiteto
   brez izmišljene slike. Hub (`dejavnosti.html`) uporablja ISTO
   ".dj-hero" komponento, a brez ".dj-hero-znak" (glej HTML). ═══ */
.dj-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(165deg, var(--navy-mid), var(--navy) 55%, var(--navy-deep));
  color:#fff;
  padding:calc(var(--sp-7) + 30px) 0 var(--sp-7);
}
.dj-hero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.15fr .85fr; gap:var(--sp-6); align-items:center;
}
.dj-hero-grid.dj-hero-grid--sredina{ grid-template-columns:1fr; text-align:center; }
.dj-hero-grid.dj-hero-grid--sredina > div{ margin:0 auto; }
.dj-hero h1{ font-size:clamp(36px,4.6vw,56px); margin:2px 0 var(--sp-3); max-width:600px; }
.dj-hero-grid.dj-hero-grid--sredina h1{ max-width:760px; margin-left:auto; margin-right:auto; }
.dj-hero .lead{ max-width:520px; margin-bottom:var(--sp-4); color:var(--muted-on-navy); }
.dj-hero-grid.dj-hero-grid--sredina .lead{ max-width:640px; margin-left:auto; margin-right:auto; }
.dj-hero-cta{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.dj-hero-grid.dj-hero-grid--sredina .dj-hero-cta{ justify-content:center; }

.dj-hero-znak{ display:flex; align-items:center; justify-content:center; }
.dj-hero-znak-krog{
  position:relative; width:230px; height:230px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.07), rgba(255,255,255,.02) 60%);
  border:1px solid rgba(255,255,255,.14);
}
.dj-hero-znak-krog::before{
  content:''; position:absolute; inset:-14px; border-radius:50%;
  background:conic-gradient(from 0deg, var(--cyan), var(--lime), var(--cyan));
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #fff calc(100% - 2px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #fff calc(100% - 2px));
  opacity:.55;
}
.dj-hero-znak-krog svg{ width:96px; height:96px; color:#fff; position:relative; z-index:1; }

.dj-hero .circuit-field{ z-index:0; }
.dj-hero-bp{ width:600px; height:600px; right:-200px; bottom:-260px; opacity:.09; color:var(--lime); z-index:0; }
.dj-hero .glow-blue{ width:460px; height:460px; right:6%; top:-160px; opacity:.4; z-index:0; }
.dj-hero .glow-green{ width:380px; height:380px; left:2%; bottom:-190px; opacity:.32; z-index:0; }

@media (max-width:900px){
  .dj-hero-grid{ grid-template-columns:1fr; gap:var(--sp-5); text-align:center; }
  .dj-hero-grid > div{ margin:0 auto; }
  .dj-hero-znak{ order:-1; }
  .dj-hero-znak-krog{ width:150px; height:150px; }
  .dj-hero-znak-krog svg{ width:64px; height:64px; }
  .dj-hero h1{ max-width:none; }
  .dj-hero .lead{ max-width:none; }
  .dj-hero-cta{ justify-content:center; }
}
@media (max-width:600px){
  .dj-hero{ padding:calc(var(--sp-6) + 20px) 0 var(--sp-6); }
}

/* ═══ 1B. HERO — KOMPAKTEN modifikator, 2. redesign krog (7. 9. 2026,
   "UX CORRECTION" brief). Uporabljen SAMO na `dejavnosti.html` (skupaj
   z osnovnim ".dj-hero") — vseh 6 podstrani po panogi še vedno
   uporablja samo ".dj-hero" brez tega modifikatorja in je popolnoma
   nedotaknjenih. 1. krog (padding sp-6+26px≈90px zgoraj, sp-6=64px
   spodaj, h1 do 56px, 2-vrstičen) NI bil dovolj — izmerjeno: hero sam
   je zavzemal 469px, kartice pa so bile vidne šele pri 1024px od vrha
   strani. Ta krog aktivno zmanjša font-size h1/lead (ne samo padding),
   kar je edini način, da hero pade pod ~250px brez obrezovanja
   besedila. PADDING/FONT-SIZE VREDNOSTI SO ZATO V TEM 3. KROGU
   NEDOTAKNJENE — višina heroja se ne sme povečati. ═══ */
.dj-hero--kompakten{
  padding:38px 0 30px;
}
.dj-hero--kompakten .dj-hero-grid.dj-hero-grid--sredina h1{
  font-size:clamp(26px,2.6vw,34px); margin:2px 0 10px; max-width:620px;
}
.dj-hero--kompakten .dj-hero-grid.dj-hero-grid--sredina .lead{
  font-size:15.5px; line-height:1.5; margin-bottom:18px; max-width:520px;
}
.dj-hero--kompakten .eyebrow{ margin-bottom:6px; }
@media (max-width:600px){
  .dj-hero--kompakten{ padding:30px 0 26px; }
  .dj-hero--kompakten .dj-hero-grid.dj-hero-grid--sredina h1{ font-size:24px; }
}

/* ═══ 1C. HERO — LIGHT "PREMIUM TECH" PRENOVA, 3. redesign krog
   (8. 9. 2026, "VARIANTA D — SOLUTION/INDUSTRY SELECTOR" brief). Cela
   stran dobiva nov svetel vizualni jezik namesto starega temnega
   heroja (glej referenco: `blagajna-greentill.html` +
   greentill-flagship.css ".gt-hero", in `davcne-blagajne.html` +
   davcne-blagajne.css ".db-hero"). TA prenova je namenoma SAMO
   OZADJE/BARVA/OKRASJE znotraj `.dj-hero--kompakten` — noben od
   pravil iz razdelka 1B zgoraj (padding, font-size, margin) se NE
   dotika, ker je izmerjena kompaktna višina heroja (~264px na
   1440×900) že tik nad robom prvega viewporta skupaj s "Izberite
   svojo dejavnost" + prvo vrstico kartic in se NE SME povečati (glej
   Playwright meritve v dnevniku, pred/po so enake). Vsi novi
   dekorativni elementi so `position:absolute` znotraj `.dj-hero`
   (že `position:relative`, `overflow:hidden` iz razdelka 1) — ne
   dodajo NIČ vertikalnega prostora, samo se izrežejo na obstoječo
   višino.

   Osnovna ".dj-hero" (temen navy gradient) OSTAJA NEDOTAKNJENA — vseh
   6 podstrani po panogi jo še vedno uporablja brez ".dj-hero--kompakten"
   in ostajajo temne, kot je bilo zahtevano ("razen ... `dejavnosti.html`").
   Prenova je zato izvedena izključno kot override na
   ".dj-hero--kompakten" (enaka specifičnost kot ".dj-hero", a poznejša
   v izvorni datoteki → zmaga, enak trik kot že uporabljen za
   padding/font-size zgoraj).

   Barvna logika: cyan+zelena (ne modra) — sledi obstoječi opombi na
   vrhu te datoteke ("Naglasna barva: mešano modra/zelena kot na
   domači strani ... zato namerno ne uporablja ene same dosledne
   naglasne barve") IN že obstoječim ".glow-blue"/".glow-green"
   elementom v HTML-ju (nespremenjenih, samo retonirani prek
   podedovane barve besedila spodaj). Tehnične linije/vozlišča so
   NOVI element (".dj-hero-tech"), po istem receptu kot
   ".gt-hero-tech"/".db-hero-tech" (pathLength=1 "risanje se"
   animacija), a manjši in umirjenejši (2 kratki poti namesto 2-3
   daljših z zavoji) — to je hub-stran z izbirnikom, ne flagship
   produkt, zato "minimal technical detail (SAMO subtilno)" po brief-u,
   razdelek "UX ima prednost pred dekoracijo". ═══ */
/* 8. 9. 2026 — "GLOBAL ANIMATED TECHNOLOGY BACKGROUND SYSTEM" pregled:
   ta hero je bil ŽE pretvorjen v svetlo ozadje v prejšnjem (istodnevnem)
   "VARIANTA D" krogu zgoraj — ni več temen navy gradient. Ob tem pregledu
   samo poravnano na skupne --ice/--ice-deep sistemske spremenljivke
   (depth-system.css razdelek 10) namesto lokalnih hex vrednosti (barve
   praktično identične, ni vizualne spremembe) + dodan ".dpt-hero-light"
   razred v HTML za skladnost z ostalim sistemom (nastavi privzeto
   besedilno barvo/on-navy override, tukajšnji h1/lead override spodaj že
   pokrivata isto, zato brez vidne spremembe). Namerno BREZ dodatnih
   .dpt-field/.dpt-line/animacijskih razredov na tem heroju — brief za to
   stran zahteva najbolj minimalno dekoracijo (izbirnik #panoge je
   prioriteta), obstoječa ambient/tech-line dekoracija spodaj je že
   namenoma umirjena glede na flagship heroje (servis/greentill) in
   ostaja nedotaknjena. Višina heroja se s to spremembo NI spremenila
   (samo barvni tokeni, brez sprememb padding/font-size/strukture). */
.dj-hero--kompakten{
  background:linear-gradient(170deg, var(--ice) 0%, #fff 55%, var(--ice-deep) 100%);
  color:var(--ink);
}
/* zelo blaga hladna cyan/zelena "wash" prek celotnega heroja — isti
   recept kot ".gt-hero::before"/".db-hero::before", samo dvo-tonska
   (cyan zgoraj desno, zelena spodaj levo), da ostane skladna z
   obstoječima ".glow-blue"/".glow-green" elementoma spodaj namesto da
   uvede tretjo (modro) barvo, ki je na tej strani namenoma odsotna. */
.dj-hero--kompakten::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 48%),
    radial-gradient(circle at 4% 96%, rgba(171,208,57,.06), transparent 44%);
}
.dj-hero--kompakten .dj-hero-grid.dj-hero-grid--sredina h1{ color:var(--navy); }
/* 8. 9. 2026 — popravek kontrasta (Playwright preverjanje): ".dj-hero
   .lead" (osnovno pravilo, ki ga še vedno uporablja vseh 6 temnih
   podstrani po panogi) nastavi color:var(--muted-on-navy) (svetla siva
   za temno podlago). Ta pravilo ima ENAKO specifičnost kot
   ".dpt-hero-light .lead" v depth-system.css (1 razred + tip), zato je
   prej zmagalo po vrstnem redu nalaganja (dejavnosti.css se nalaga PO
   depth-system.css) — na svetli "ice" podlagi je bilo besedilo skoraj
   nečitljivo (#aebdcc na #eef4f8). Ta override ima višjo specifičnost
   (2 razreda + tip) in zanesljivo zmaga ne glede na vrstni red. */
.dj-hero--kompakten .lead{ color:var(--muted); }

/* eyebrow/lead: HTML ne uporablja več ".on-navy" modifikatorja znotraj
   te sekcije (glej dejavnosti.html) — privzeti ".eyebrow"/".lead" iz
   base.css (zelena/muted) so že pravilno berljivi na svetli podlagi,
   brez potrebe po lastnem overridu barve tukaj. Tanka tehnična "tick"
   oznaka poleg eyebrowa (majhen CGP accent, isti vizualni jezik kot
   ".gt-hero-znacka-tick"/".db-hero-znacka-badge", a brez polne
   "badge/pill" predelave — ostaja preprost eyebrow) je v LASTNI flex
   vrstici (".dj-hero-eyebrow-row"), NE znotraj ".eyebrow" samega —
   ".eyebrow" je "display:inline-block" (base.css) in vstavljanje SVG
   otroka vanjo je merljivo POVEČALO višino heroja (+8px na 1440×900,
   preverjeno v Playwright pred/po): brskalnik pri inline-block
   elementu z "vertical-align:middle" otrokom izračuna višino notranje
   vrstice iz pisave-strut metrike, ne samo iz "line-height", kar je
   tiho dvignilo skupno višino heroja — nedopustno glede na KLJUČNO
   zahtevo brief-a. Ločena flex vrstica se te pasti izogne (višina
   vrstice = max naravna višina otrok, brez strut napihovanja). */
.dj-hero-eyebrow-row{ display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:6px; }
.dj-hero-eyebrow-row .eyebrow{ margin-bottom:0; }
.dj-hero-tick{ width:26px; height:8px; opacity:.6; flex-shrink:0; }

/* retoniran ".dj-hero-bp" motiv — na svetli podlagi je isti opacity
   (.09) nekoliko bolj izrazit kot na prejšnji temni; rahlo znižano,
   da ostane "komaj zaznaven material", ne nova dekoracija. */
.dj-hero--kompakten .dj-hero-bp{ opacity:.07; }
.dj-hero--kompakten .glow-blue{ opacity:.22; }
.dj-hero--kompakten .glow-green{ opacity:.16; }

/* statična navy globinska plast — brez parallaxa/animacije (isti
   razlog kot ".gt-ambient-navy": zaznavna globina, ne premikajoč se
   temen gradient), umeščena za besedilom proti robu. */
.dj-hero-ambient-navy{
  position:absolute; z-index:0; pointer-events:none; border-radius:50%;
  width:340px; height:340px; right:-8%; top:-18%;
  filter:blur(30px);
  background:radial-gradient(circle, rgba(42,61,80,.10), rgba(51,72,97,.04) 55%, transparent 74%);
}

/* animirani ambient "blob" sloji (cyan/zelena) — zunanji "-wrap" nosi
   SAMO data-parallax (scroll, glej HTML), notranji ".dj-hero-ambient"
   nosi SAMO neskončno "drift" animacijo transforma — ista wrap/inner
   ločitev kot ".gt-ambient-wrap"/".gt-ambient" (razlog: motion.js
   scroll-parallax direktno prepiše `style.transform`, kar bi
   izbrisalo CSS animacijo transforma na istem elementu). Amplitude so
   manjše kot na GreenTill/davčnih blagajnah (ta hero je nižji in
   umirjenejši, "solution selector", ne flagship produkt). */
.dj-hero-ambient-wrap{ position:absolute; z-index:0; pointer-events:none; }
.dj-hero-ambient{ position:absolute; inset:0; border-radius:50%; filter:blur(9px); }
.dj-hero-ambient-wrap--cyan{ width:300px; height:300px; right:1%; top:-30%; }
.dj-hero-ambient--cyan{
  background:radial-gradient(circle, rgba(23,185,236,.20), transparent 70%);
  animation:djDriftCyan 19s ease-in-out infinite;
}
.dj-hero-ambient-wrap--green{ width:240px; height:240px; left:-4%; bottom:-60%; }
.dj-hero-ambient--green{
  background:radial-gradient(circle, rgba(171,208,57,.18), transparent 70%);
  animation:djDriftGreen 23s ease-in-out infinite; animation-delay:-11s;
}
@keyframes djDriftCyan{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(-16px,14px,0) scale(1.05); }
}
@keyframes djDriftGreen{
  0%,100%{ transform:translate3d(0,0,0) scale(1); opacity:1; }
  50%{ transform:translate3d(14px,-10px,0) scale(.95); opacity:.9; }
}

/* tehnična črtna grafika — 2 kratki poti (cyan zgoraj levo, zelena
   spodaj desno), "risanje se" ob nalaganju (pathLength=1 trik, ista
   tehnika kot ".gt-line"/".db-line"), nato mirujejo. Namenoma BREZ
   potujočega "signala" in brez tretje (modre) linije — ta hero je
   manjši/umirjenejši element skupine, ne flagship produktna stran. */
.dj-hero-tech{
  position:absolute; z-index:0; top:0; left:0; width:100%; height:100%;
  opacity:.6; pointer-events:none;
}
.dj-hero-tech svg{ width:100%; height:100%; }
.dj-line{ stroke-dasharray:1; stroke-dashoffset:1; opacity:0; animation:djDrawLine 1.8s cubic-bezier(.4,0,.2,1) both; }
.dj-line--cyan{ animation-delay:.4s; }
.dj-line--green{ animation-delay:.9s; }
@keyframes djDrawLine{ from{ stroke-dashoffset:1; opacity:0; } to{ stroke-dashoffset:0; opacity:.85; } }
.dj-node{ opacity:0; transform-origin:center; animation:djNodeIn .5s ease-out both; }
.dj-node--cyan{ animation-delay:2s; filter:drop-shadow(0 0 3px rgba(23,185,236,.5)); }
.dj-node--green{ animation-delay:2.4s; filter:drop-shadow(0 0 3px rgba(24,165,75,.5)); }
@keyframes djNodeIn{ from{ opacity:0; transform:scale(.4); } to{ opacity:1; transform:scale(1); } }
/* eno samo utripajoče vozlišče (ne oba hkrati — "ne pulse-aj vseh
   nodes hkrati", isto pravilo kot na GreenTill/davčnih blagajnah),
   počasen cikel znotraj zahtevanega razpona 3-5s. */
.dj-node.dj-node--accent{
  animation:djNodeIn .5s ease-out 2.4s both, djPulse 4.4s ease-in-out 3.2s infinite;
}
@keyframes djPulse{
  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 6px rgba(24,165,75,.75)); }
}

@media (max-width:900px){
  .dj-hero-ambient-wrap--cyan{ width:220px; height:220px; }
  .dj-hero-ambient-wrap--green{ width:180px; height:180px; }
  .dj-hero-ambient-navy{ width:260px; height:260px; }
  .dj-hero-tech{ opacity:.42; }
}
@media (max-width:600px){
  .dj-hero-ambient-wrap--green{ display:none; }
  .dj-hero-ambient-navy{ width:220px; height:220px; opacity:.7; }
  .dj-hero-tech{ opacity:.3; }
}
@media (prefers-reduced-motion: reduce){
  .dj-line, .dj-node,
  .dj-hero-ambient--cyan, .dj-hero-ambient--green{ animation:none !important; }
  .dj-line{ stroke-dashoffset:0; opacity:.85; }
  .dj-node{ opacity:1; transform:none; }
}

/* ═══ 2. IZBIRNIK PANOG (samo dejavnosti.html) — REDESIGN, 2. krog:
   premium "solution selector" namesto generičnih kartic. Sekcija
   ".dj-panoge-sekcija" ima namenoma manjši zgornji padding + rahel
   negativen margin-top, da se rahlo "vleče" pod spodnji rob kompaktnega
   heroja — subtilen prekrivajoč prehod (NE floating-card efekt: kartice
   ne "lebdijo" nad heroje, samo sekcija kot celota začne nekoliko prej,
   znotraj iste bele podlage). Na mobilnem se prekrivanje izklopi (manj
   prostora, manj nadzora nad natančnim robom heroja na majhnih zaslonih
   — glej media query spodaj). Naslov sekcije (".section-head" znotraj)
   je zdaj namenoma manjši/strnjen — glej override spodaj — ker je H2
   zdaj kratek udarni stavek ("Izberite svojo dejavnost"), ne polni
   naslov sekcije kot na drugih straneh. ═══ */
.dj-panoge-sekcija{
  position:relative; z-index:2;
  padding-top:28px;
  margin-top:-26px;
}
.dj-panoge-sekcija .section-head{
  margin-bottom:var(--sp-3);
}
.dj-panoge-sekcija .section-head h2{
  font-size:clamp(22px,2.4vw,30px);
  margin-bottom:6px;
}
.dj-panoge-sekcija .section-head .lead{
  font-size:15px;
}
@media (max-width:760px){
  .dj-panoge-sekcija{ margin-top:0; padding-top:var(--sp-4); }
}

.dj-izbirnik{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); }
.dj-panoga{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; height:100%;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:22px; color:inherit;
  transition:transform var(--dur-med) var(--ease-premium), box-shadow var(--dur-med) var(--ease-premium), border-color var(--dur-med) var(--ease-premium), background var(--dur-med) var(--ease-premium);
}
/* NADALJEVANJE 12 — "GLOBALNA PORAVNAVA SPODNJEGA DELA KARTIC": panoge
   imajo različno dolg opis (glej HTML — od ene do dveh vrstic besedila),
   kar je pri prejšnjem `display:block` potisnilo "Več →" (.dj-panoga-vec)
   na različno Y znotraj vrstice kljub enako visokim karticam (grid
   `align-items:stretch`). Kartica je zdaj flex-column (`height:100%`,
   glej depth-system.css ".dpt-card-col" za polno razlago recepta),
   `.dj-panoga-vec` spodaj dobi `margin-top:auto` — preverjeno s
   Playwright meritvijo (repo 1024px/700px): prej do 21px odstopanje,
   po popravku 0px. */
/* Kartica je nekoliko nižja kot v 1. redesign krogu — manjši padding
   (32→22px) + manjši icon-box (samo znotraj ".dj-panoga", globalni
   ".icon-box" na ostalih straneh ni spremenjen) + tesnejši razmiki, da
   prva vrsta panog pade v prvi viewport skupaj s kompaktnim herojem. */
.dj-panoga .icon-box{ width:38px; height:38px; border-radius:10px; }
.dj-panoga .icon-box svg{ width:19px; height:19px; }
/* zelo nežen tehnični vzorec v ozadju kartice — komaj zaznaven, ne
   dekoracija zaradi dekoracije (brief razdelek 5: "NE napolni kartic z
   dekoracijo"), samo material/teksturo, ki na hoverju rahlo "oživi". */
.dj-panoga::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle at 0 0, var(--navy) 1px, transparent 1.2px);
  background-size:26px 26px; background-position:-4px -4px;
  opacity:.045;
  transition:opacity var(--dur-med) var(--ease-premium);
}
.dj-panoga:hover::before, .dj-panoga:focus-visible::before{ opacity:.09; }
/* tanka accent črta na vrhu — izriše se (scaleX) ob hoverju, isti
   vizualni jezik kot podčrtaj v glavnem meniju (".glavni-meni > li >
   a::after" v components.css), samo vodoravno čez cel zgornji rob. */
.dj-panoga::after{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--cyan), var(--green));
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-med) var(--ease-premium);
}
.dj-panoga:hover::after, .dj-panoga:focus-visible::after{ transform:scaleX(1); }
/* 9. 9. 2026 — "GLOBALNA ANIMACIJA KARTIC" brif: ta kartica je bila
   izrecno navedena kot REFERENCA za nov globalni "card motion language"
   (glej card-interactions.css) — zato je tudi njena lastna intenziteta
   tu dvignjena za ~20-30% (translateY -3→-4px, dodan rahel scale),
   skladno z novim standardom, ne samo kartice, ki so jo posnemale. */
.dj-panoga:hover, .dj-panoga:focus-visible{
  transform:translateY(-4px) scale(1.008); box-shadow:0 12px 30px rgba(42,61,80,.1); border-color:rgba(23,185,236,.4);
  background:linear-gradient(180deg, rgba(23,185,236,.035), rgba(255,255,255,0) 55%);
}
.dj-panoga-st{
  position:absolute; top:14px; right:18px; z-index:0;
  font-family:var(--fh); font-weight:800; font-size:38px; line-height:1;
  color:var(--navy); opacity:.07; letter-spacing:-.01em;
  transition:opacity var(--dur-med) var(--ease-premium), color var(--dur-med) var(--ease-premium);
}
.dj-panoga:hover .dj-panoga-st, .dj-panoga:focus-visible .dj-panoga-st{ opacity:.16; color:var(--green); }
.dj-panoga .icon-box{ position:relative; z-index:1; transition:transform var(--dur-med) var(--ease-premium), background var(--dur-med) var(--ease-premium), color var(--dur-med) var(--ease-premium); }
.dj-panoga:hover .icon-box, .dj-panoga:focus-visible .icon-box{ transform:translateY(-2px) scale(1.05); background:rgba(23,185,236,.14); color:var(--blue); }
.dj-panoga:hover .icon-box.blue, .dj-panoga:focus-visible .icon-box.blue{ background:rgba(24,165,75,.14); color:var(--green); }
.dj-panoga h3{ position:relative; z-index:1; font-size:20px; margin:12px 0 6px; }
.dj-panoga p{ position:relative; z-index:1; color:var(--muted); font-size:14px; line-height:1.5; margin-bottom:10px; }
.dj-panoga-vec{
  position:relative; z-index:1; margin-top:auto;
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  font-family:var(--fh); font-weight:700; font-size:13.5px; color:var(--blue);
}
.dj-panoga-vec svg{ width:15px; height:15px; transition:transform .3s var(--ease-premium); }
.dj-panoga:hover .dj-panoga-vec svg{ transform:translateX(5px); }
@media (max-width:960px){ .dj-izbirnik{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .dj-izbirnik{ grid-template-columns:1fr; } .dj-panoga-st{ font-size:32px; } }

/* ═══ 2B. EKOSISTEM — nov razdelek "Kako sestavimo rešitev" (samo
   dejavnosti.html, brief razdelek 13). Štirje povezani vozli namesto
   generičnih kartic — isti VIZUALNI princip (krog-vozel + vodoravna
   povezovalna črta med stolpci) kot uveljavljen ".dl-korak" sistem na
   `aplikacija-delime.html`, a NAMENOMA poenostavljen: brez scroll-
   vodene JS aktivacije/animiranega "napredka" (".je-aktiven" ipd.) —
   tu gre za mirno, informativno ponazoritev, ne interaktiven proces, in
   tak mehanizem bi bil za to sekundarno sekcijo nesorazmeren (glej
   opombo v HTML). Krogi/besedilo poravnani na levo znotraj stolpca —
   enaka geometrija kot ".dl-korak", zato enaka formula za dolžino
   črte med vozli (premer kroga 56px, razmik mreže var(--sp-3)=24px →
   segment = širina stolpca − 32px). ═══ */
.dj-ekosistem{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3); }
.dj-eko-vozel{ position:relative; text-align:left; }
.dj-eko-crta{
  position:absolute; z-index:0; top:27px; left:calc(-100% + 32px); width:calc(100% - 32px); height:2px;
  border-radius:1px; background:linear-gradient(90deg, var(--cyan), var(--green)); opacity:.4;
}
.dj-eko-krog{
  width:56px; height:56px; border-radius:50%; position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center; margin-bottom:var(--sp-2);
  background:#fff; border:1.5px solid var(--line); color:var(--muted);
}
.dj-eko-krog svg{ width:24px; height:24px; }
.dj-eko-vozel:nth-child(1) .dj-eko-krog{ border-color:var(--cyan); color:var(--blue); }
.dj-eko-vozel:nth-child(2) .dj-eko-krog{ border-color:var(--green); color:var(--green); }
.dj-eko-vozel:nth-child(3) .dj-eko-krog{ border-color:var(--lime); color:#6d8a1f; }
.dj-eko-vozel:nth-child(4) .dj-eko-krog{ border-color:var(--blue); color:var(--blue); }
.dj-eko-vozel h3{ font-size:17px; margin-bottom:4px; }
.dj-eko-vozel p{ color:var(--muted); font-size:14px; line-height:1.5; }
@media (max-width:860px){
  .dj-ekosistem{ grid-template-columns:1fr; gap:0; }
  .dj-eko-vozel{ display:flex; gap:var(--sp-3); align-items:flex-start; padding:0 0 var(--sp-4) 0; }
  .dj-eko-vozel:last-child{ padding-bottom:0; }
  .dj-eko-krog{ margin-bottom:0; }
  .dj-eko-crta{ top:56px; left:27px; bottom:-2px; width:2px; height:auto; }
}

/* ═══ 3. "KAJ REŠIMO" — 6 razlogov/skrbi kot mreža ploščic (ne
   povezave, razen kjer je smiselno — glej HTML), 3×2. ═══ */
.dj-resimo{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); }
.dj-tocka{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-4); display:flex; flex-direction:column; gap:6px;
}
/* nadaljevanje 19 — tonalna prenova šesterice "dejavnost-*" podstrani:
   "#resimo" (samo na teh 6 podstraneh — hub `dejavnosti.html` nima
   tega ID-ja, zato je spodnje pravilo zanj brez učinka) je dobil
   ".on-ice" (depth-system.css, MID LIGHT ton) namesto navadne bele
   podlage. Bele ".dj-tocka" kartice zato dobijo senco V MIROVANJU, da
   vizualno "lebdijo" nad zdaj toniranim ozadjem — enak recept kot
   index.html ".dejavnost-kart" (glej dnevnik, nadaljevanje 18). */
#resimo .dj-tocka{ box-shadow:var(--sh-sm); }
.dj-tocka h3{ font-size:17px; margin:var(--sp-2) 0 2px; }
.dj-tocka p{ color:var(--muted); font-size:14.5px; line-height:1.55; margin-bottom:4px; }
.dj-tocka .btn-text{ margin-top:auto; align-self:flex-start; padding-top:6px; }
@media (max-width:960px){ .dj-resimo{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .dj-resimo{ grid-template-columns:1fr; } }

/* ═══ 4. "PRIPOROČENA KOMBINACIJA" — 3 povezane kartice (na resnične
   V2 strani). ═══ */
.dj-kombinacija{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); }
.dj-kombinacija-kartica{
  display:block; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-4); color:inherit;
  transition:transform var(--dur-med) var(--ease-premium), box-shadow var(--dur-med) var(--ease-premium), border-color var(--dur-med) var(--ease-premium);
}
.dj-kombinacija-kartica:hover, .dj-kombinacija-kartica:focus-visible{
  transform:translateY(-4px) scale(1.008); box-shadow:0 12px 30px rgba(42,61,80,.1); border-color:rgba(24,165,75,.45);
}
.dj-kombinacija-kartica h3{ font-size:18px; margin:var(--sp-2) 0 6px; }
.dj-kombinacija-kartica p{ color:var(--muted); font-size:14px; line-height:1.5; margin-bottom:0; }
@media (max-width:960px){ .dj-kombinacija{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .dj-kombinacija{ grid-template-columns:1fr; } }

/* ═══ 5. "ZA KOGA" — 4 neklikljive info-ploščice (siva podlaga). ═══ */
.dj-zakoga{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3); }
.dj-zakoga-kartica{ padding:var(--sp-3) var(--sp-2); }
.dj-zakoga-kartica h3{ font-size:15.5px; margin:10px 0 6px; }
.dj-zakoga-kartica p{ color:var(--muted); font-size:13.5px; line-height:1.5; }
@media (max-width:900px){ .dj-zakoga{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .dj-zakoga{ grid-template-columns:1fr; } }

/* ═══ 6. DOGODKI — "Kaj dobite v paketu" (edina prava kljuke-vsebina
   v tej skupini, po v1). ═══ */
.dj-paket-vkljuceno{
  list-style:none; margin:0 auto; padding:0; max-width:820px;
  display:grid; grid-template-columns:1fr 1fr; gap:16px var(--sp-5);
}
.dj-paket-vkljuceno li{ display:flex; gap:14px; align-items:flex-start; font-size:15.5px; line-height:1.5; color:var(--ink); }
@media (max-width:700px){ .dj-paket-vkljuceno{ grid-template-columns:1fr; } }

/* ═══ 7. SORODNE DEJAVNOSTI — tanka povezovalna vrstica. ═══ */
.dj-sorodne{ display:flex; gap:var(--sp-3); justify-content:center; flex-wrap:wrap; }
.dj-sorodne a{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--fh); font-weight:700; font-size:14px; color:var(--navy);
  padding:10px 18px; border:1px solid var(--line); border-radius:999px;
  transition:border-color var(--dur-fast) var(--ease-premium), color var(--dur-fast) var(--ease-premium);
}
.dj-sorodne a:hover{ border-color:var(--blue); color:var(--blue); }
.dj-sorodne a svg{ width:14px; height:14px; }

/* ═══ 8. ZAKLJUČNI CTA — ".cta-band" jezik podvojen namerno (glej isto
   odločitev na vseh ostalih V2 straneh). ─────────────────────────── */
.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); }
}

/* ═══ "GLOBALNA ANIMACIJA KARTIC" brif t.18 (9. 9. 2026) — reduced-motion
   override na KONCU datoteke (za osnovnimi hover pravili), da zares
   premaga translateY/scale na .dj-panoga in .dj-kombinacija-kartica pri
   enaki specifičnosti (vrstni red v cascadeu). Pusti samo barvo/senco/
   obrobo, skladno s card-interactions.css. ═══ */
@media (prefers-reduced-motion: reduce){
  .dj-panoga:hover, .dj-panoga:focus-visible,
  .dj-kombinacija-kartica:hover, .dj-kombinacija-kartica:focus-visible{ transform:none; }
  .dj-panoga:hover .icon-box, .dj-panoga:focus-visible .icon-box,
  .dj-panoga:hover .dj-panoga-vec svg, .dj-panoga:focus-visible .dj-panoga-vec svg{ transform:none; }
}