/* ═══════════════════════════════════════════════════════════════
   Biroplast Solutions — V2 DAVČNE BLAGAJNE (produktna kategorija)
   Prva podstran sklopa "davčne blagajne" (GreenTill/Market/Gastro/
   Prenosna/Dogodki ostajajo za naslednje korake — na tej strani so
   predstavljeni kot pregled, brez povezav na še ne obstoječe
   podstrani). Predpona razredov "db-" (davčne blagajne), namenoma
   LOČENA datoteka od aplikacija-izdelek.css (ki je za spletne
   aplikacije/TAStudio/Booking Studio in ostaja nedotaknjena) — ista
   splošna vizualna logika (temen hero, circuit/glow/motiv ozadje,
   product-moment, kljuke, reveal), a lastna postavitev, ker gre za
   kategorijo izdelkov, ne za en sam produkt.

   Naglasna barva: cyan/modra (ista kategorija kot na domači strani —
   kartica "Davčne blagajne" je rk-cyan), zelena samo pri kljukicah
   (že uveljavljen vzorec) in pri CTA gumbih (.btn-primary, globalno).
   ═══════════════════════════════════════════════════════════════ */

/* ═══ 1. HERO — "POS ECOSYSTEM / BUSINESS TECHNOLOGY" (globalna
   svetla premium-tech prenova, september 2026, glej dnevnik).
   VARIANTA A (hardware/product) istega jezika, ki ga je referenčno
   vzpostavil `blagajna-greentill.html`, a NAMENOMA ne kopija: paleta
   je tu bolj MODRO-vodena (brief razdelek 16: "Davčne blagajne: blue
   + subtle cyan", GreenTill je cyan+zelena), tehnična grafika ima
   drugačno kompozicijo/potek linij, značka je pravokotna oznaka
   namesto GreenTillove "product-status" nalepke, produkt ostaja v
   temni "product-moment" video-kartici (isti recept kot GreenTill,
   ker gre za isti video asset), a s svojim, neodvisnim setom
   ambientnih/tehničnih plasti in parallax vrednosti (ne deljeno z
   greentill-flagship.css — ločena datoteka, prefiks "db-"). ═══ */
.db-hero{
  position:relative; overflow:hidden;
  padding:calc(var(--sp-7) + 30px) 0 var(--sp-7);
}
.db-hero--light{
  /* hladnejša, bolj modro-vodena osnova kot GreenTill (ki je cyan+
     zelena) — "blue + subtle cyan" po brief razdelku 16 */
  background:linear-gradient(170deg, #f4f7fb 0%, #e4ebf4 52%, #d9e3ef 100%);
  color:var(--ink);
}
.db-hero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr .95fr; gap:var(--sp-6); align-items:center;
}
.db-hero h1{ font-size:clamp(40px,5.2vw,64px); margin:2px 0 var(--sp-3); max-width:620px; color:var(--navy); }
.db-hero .lead{ max-width:500px; margin-bottom:var(--sp-4); }
.db-hero-cta{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }

/* pravokotna "status" značka nad H1 — sorodna GreenTillovi ".gt-hero-
   znacka", a lastna barvna mešanica (modra namesto cyan-vodene) in
   lastno besedilo ("Ekosistem davčnih blagajn" namesto "V razvoju"),
   da stran deluje kot svoja identiteta, ne kopija */
.db-hero-znacka-badge{
  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,.24);
}
.db-hero-znacka-badge .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);
}

/* produktni video — ista wrap/inner ločitev kot na GreenTill (zunanji
   nosi SAMO data-parallax, notranji SAMO CSS animacijo), da se
   scroll-parallax in neskončna "micro-float" animacija ne prekrivata
   na istem elementu (isti hrošč/rešitev, glej greentill-flagship.css) */
.db-hero-vizual{ position:relative; }
.db-hero-video-wrap{ display:block; width:100%; }
.db-hero-video{
  position:relative; width:100%; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/3;
  box-shadow:0 30px 70px -25px rgba(23,34,46,.28), 0 0 0 1px rgba(23,34,46,.06);
  z-index:1;
  animation: dbFloat 8s ease-in-out infinite;
}
@keyframes dbFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
.db-hero-video video{ display:block; width:100%; height:100%; object-fit:cover; object-position:center 30%; }

.db-hero-znacka{
  position:absolute; z-index:3; left:-14px; bottom:28px;
  display:flex; align-items:center; gap:10px;
  background:rgba(23,34,46,.72); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.14); border-radius:999px;
  padding:9px 16px 9px 10px; box-shadow:var(--sh-lg);
}
.db-hero-znacka .pika{
  width:8px; height:8px; border-radius:50%; background:var(--cyan); flex-shrink:0;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--cyan) 22%, transparent);
}
.db-hero-znacka span{ font-family:var(--fh); font-weight:700; font-size:12.5px; letter-spacing:.02em; color:#fff; }

/* ── ambientno ozadje: statična navy globina + 3 animirane plasti
   (drift, ista arhitektura/amplitude-razred kot GreenTill po
   "MOTION IMPLEMENTATION FIX" krogu — glej greentill-flagship.css za
   polno razlago wrap/inner ločitve), a modro-vodena razmerja/pozicije
   so svoje, ne kopija. ── */
.db-ambient-navy{
  position:absolute; z-index:0; pointer-events:none; border-radius:50%;
  width:560px; height:560px; right:-8%; top:22%;
  filter:blur(32px);
  background:radial-gradient(circle, rgba(42,61,80,.10), rgba(51,72,97,.04) 55%, transparent 74%);
}
.db-ambient-wrap{ position:absolute; z-index:0; pointer-events:none; }
.db-ambient{ position:absolute; inset:0; border-radius:50%; filter:blur(10px); }

.db-ambient-wrap--blue{ width:460px; height:460px; right:0; top:-110px; }
.db-ambient--blue{
  background:radial-gradient(circle, rgba(4,123,193,.24), transparent 70%);
  animation:dbDriftBlue 19s ease-in-out infinite;
}
.db-ambient-wrap--cyan{ width:420px; height:420px; right:-6%; top:24%; }
.db-ambient--cyan{
  background:radial-gradient(circle, rgba(23,185,236,.18), transparent 72%);
  filter:blur(14px);
  animation:dbDriftCyan 21s ease-in-out infinite; animation-delay:-8s;
}
.db-ambient-wrap--green{ width:340px; height:340px; left:-6%; bottom:-130px; }
.db-ambient--green{
  background:radial-gradient(circle, rgba(171,208,57,.16), transparent 70%);
  animation:dbDriftGreen 25s ease-in-out infinite; animation-delay:-15s;
}
@keyframes dbDriftBlue{ 0%,100%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(28px,-42px,0) scale(1.06); } }
@keyframes dbDriftCyan{ 0%,100%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(-32px,44px,0) scale(1.07); } }
@keyframes dbDriftGreen{ 0%,100%{ transform:translate3d(0,0,0) scale(1); opacity:1; } 50%{ transform:translate3d(40px,-24px,0) scale(.95); opacity:.9; } }

/* ── tehnična črtna grafika — LASTNA kompozicija (ne GreenTillova
   pot): dve ločeni "vezji" v nasprotnih kotih (zgoraj levo modra,
   spodaj desno cyan+zelen accent node), namesto ene sklenjene poti.
   Draw-in animacija ob nalaganju, ista tehnika kot GreenTill
   (stroke-dasharray/dashoffset prek pathLength=1). ── */
.db-hero-tech{
  position:absolute; z-index:0; top:calc(50% - 260px); right:-2%; width:520px; height:520px;
  opacity:.62; pointer-events:none;
}
.db-hero-tech svg{ width:100%; height:100%; }
.db-line{ stroke-dasharray:1; stroke-dashoffset:1; opacity:0; animation:dbDrawLine 2s cubic-bezier(.4,0,.2,1) both; }
.db-line--blue{ animation-delay:.5s; }
.db-line--cyan{ animation-delay:1s; }
.db-line--cyan.db-line--cyan2{ animation-delay:1.5s; }
@keyframes dbDrawLine{ from{ stroke-dashoffset:1; opacity:0; } to{ stroke-dashoffset:0; opacity:.9; } }
.db-node{ opacity:0; transform-origin:center; animation:dbNodeIn .5s ease-out both; }
.db-node--blue{ animation-delay:2.3s; filter:drop-shadow(0 0 3px rgba(4,123,193,.5)); }
.db-node--cyan{ animation-delay:2.8s; filter:drop-shadow(0 0 3px rgba(23,185,236,.55)); }
.db-node--green{ animation-delay:3s; filter:drop-shadow(0 0 3px rgba(24,165,75,.5)); }
@keyframes dbNodeIn{ from{ opacity:0; transform:scale(.4); } to{ opacity:1; transform:scale(1); } }
.db-node.db-node--accent{ animation:dbNodeIn .5s ease-out 3s both, dbPulse 4.4s ease-in-out 3.8s infinite; }
.db-node.db-node--pulse2{ animation:dbNodeIn .5s ease-out 2.3s both, dbPulse2 3.8s ease-in-out 5.2s infinite; }
@keyframes dbPulse{ 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)); } }
@keyframes dbPulse2{ 0%,100%{ opacity:.45; transform:scale(1); filter:drop-shadow(0 0 3px rgba(23,185,236,.45)); } 50%{ opacity:1; transform:scale(1.15); filter:drop-shadow(0 0 6px rgba(23,185,236,.75)); } }

@media (max-width:960px){
  .db-hero-grid{ grid-template-columns:1fr; gap:var(--sp-5); }
  /* "width:100%" je tu namerno (poleg "max-width") — brez njega bi
     "margin:0 auto" grid-postavko preklopil iz privzetega
     "justify-self:stretch" v "shrink-to-fit" velikost, kar je pri
     kombinaciji grid+aspect-ratio+zamenjanem elementu (video) med
     brskalniki nezanesljivo. Eksplicitna širina je varnejša, robustna
     rešitev ne glede na to — enak popravek kot je bil potreben, ko je
     bila tu še <img> (glej dnevnik: isti vzorec/hrošč obstaja tudi na
     že zaključeni aplikacija-izdelek.css, tam namenoma ni popravljen). */
  .db-hero-video-wrap{ order:-1; width:100%; max-width:480px; margin:0 auto; }
  .db-hero h1{ max-width:none; }
  .db-hero .lead{ max-width:none; }
  .db-hero-znacka{ left:12px; bottom:16px; }
  .db-hero-tech{ opacity:.4; }
}
@media (max-width:760px){
  .db-line--blue, .db-node--blue, .db-node--accent{ display:none; }
  .db-hero-tech{ opacity:.32; }
  .db-ambient-wrap--blue{ width:280px; height:280px; }
  .db-ambient-wrap--cyan{ display:none; }
  .db-ambient-wrap--green{ width:220px; height:220px; }
  .db-ambient-navy{ width:340px; height:340px; opacity:.7; }
}
@media (max-width:600px){
  .db-hero{ padding:calc(var(--sp-6) + 20px) 0 var(--sp-6); }
  .db-hero-znacka span{ font-size:11.5px; }
}
@media (prefers-reduced-motion: reduce){
  .db-line, .db-node,
  .db-ambient--blue, .db-ambient--cyan, .db-ambient--green,
  .db-hero-video{ animation:none !important; }
  .db-line{ stroke-dashoffset:0; opacity:.9; }
  .db-node{ opacity:1; transform:none; }
}

/* ═══ 3. VREDNOST — "Kaj vse uredimo namesto vas" (na strani zdaj za
   "Kako do svoje blagajne", glej dnevnik za nov vrstni red) — en umirjen
   dvostolpčni seznam kljukic namesto ponavljajočih se kartic. To je
   hkrati vrednostna ponudba IN ključne koristi (V1 ni imel dovolj
   ločene, neponavljajoče se vsebine za dve zaporedni sekciji — glej
   dnevnik za utemeljitev združitve). ═══ */
.db-vrednost-glava{ max-width:680px; margin:0 auto var(--sp-6); text-align:center; }
.db-vrednost-list{
  list-style:none; margin:0 auto; padding:0; max-width:920px;
  display:grid; grid-template-columns:1fr 1fr; gap:16px var(--sp-5);
}
.db-vrednost-list li{
  display:flex; gap:14px; align-items:flex-start; font-size:16px; line-height:1.5;
  padding-bottom:16px; border-bottom:1px solid var(--line);
}
.db-vrednost-list li:nth-last-child(-n+2){ border-bottom:0; padding-bottom:0; }
.db-vrednost-list .icon-box{ width:38px; height:38px; border-radius:10px; }
.db-vrednost-list .icon-box svg{ width:18px; height:18px; }
@media (max-width:700px){
  .db-vrednost-list{ grid-template-columns:1fr; }
  .db-vrednost-list li:nth-last-child(-n+2){ border-bottom:1px solid var(--line); padding-bottom:16px; }
  .db-vrednost-list li:last-child{ border-bottom:0; padding-bottom:0; }
}

/* ═══ 4. REŠITVE / MODELI — GreenTill kot izpostavljen "flagship"
   (edini z resnično fotografijo, v razvoju), nato mreža štirih
   modelov kot mirne informativne ploščice (BREZ povezav na še ne
   zgrajene podstrani — glej dnevnik). ═══ */
.db-flagship{
  display:grid; grid-template-columns:.95fr 1.05fr; gap:var(--sp-6); align-items:center;
  background:linear-gradient(155deg, var(--navy-mid), var(--navy) 55%, var(--navy-deep));
  border-radius:var(--r-xl); overflow:hidden; color:#fff;
  padding:var(--sp-5); margin-bottom:var(--sp-5);
  position:relative;
}
.db-flagship-media{ position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/3; }
.db-flagship-media video{ display:block; width:100%; height:100%; object-fit:cover; }
.db-flagship-vsebina{ position:relative; z-index:1; padding:var(--sp-2) var(--sp-2) var(--sp-2) 0; }
.db-flagship-vsebina .lead{ color:var(--muted-on-navy); margin-bottom:var(--sp-3); }
.db-flagship-nagrada{
  display:inline-flex; align-items:center; gap:8px; margin-top:var(--sp-1); margin-bottom:var(--sp-3);
  font-size:13px; color:var(--muted-on-navy);
}
.db-flagship-nagrada a{ color:#8fe0f7; font-weight:600; border-bottom:1px solid rgba(143,224,247,.35); transition:color var(--dur-fast) var(--ease-premium); }
.db-flagship-nagrada a:hover{ color:#fff; }
@media (max-width:900px){
  .db-flagship{ grid-template-columns:1fr; padding:var(--sp-4); }
  .db-flagship-media{ aspect-ratio:16/10; }
  .db-flagship-vsebina{ padding:0; }
}

.db-modeli-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3);
}
/* .db-model je zdaj <a> (september 2026: 5 blagajna-*.html podstrani
   je zgrajenih, kartice zdaj resnično vodijo nanje — prej so bile
   neklikljivi <div>, glej dnevnik). */
/* NADALJEVANJE 12 — "GLOBALNA PORAVNAVA SPODNJEGA DELA KARTIC": prej
   "display:block" ni imel nobenega mehanizma, ki bi CTA povezavo
   (".db-model-vec", zadnji otrok) sidral na dno kartice — pri različno
   dolgih opisih/vrsticah se je zato CTA znašel na različnih Y
   pozicijah. Zdaj flex-column + "height:100%" (grid item se sicer že
   privzeto raztegne na višino vrstice, height:100% je tu le eksplicitna
   varovalka) + ".db-model-vec{margin-top:auto}" spodaj — glej recept
   v depth-system.css (".dpt-cta-bottom"). */
.db-model{
  display:flex; flex-direction:column; height:100%;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-3); 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);
}
/* 9. 9. 2026 — "GLOBALNA ANIMACIJA KARTIC" brif: uglašeno na nov globalni
   jezik (~20-30% bolj izrazito), glej dnevnik. */
.db-model:hover, .db-model: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);
}
.db-model h3{ font-size:17px; margin:var(--sp-2) 0 6px; transition:color var(--dur-med) var(--ease-premium); }
.db-model:hover h3, .db-model:focus-visible h3{ color:var(--navy-deep); }
.db-model p{ color:var(--muted); font-size:14.5px; line-height:1.5; margin-bottom:var(--sp-2); }
.db-model .icon-box{ margin-bottom:2px; transition:transform var(--dur-med) var(--ease-premium), background var(--dur-med) var(--ease-premium), color var(--dur-med) var(--ease-premium); }
.db-model:hover .icon-box, .db-model:focus-visible .icon-box{ transform:translateY(-2px) scale(1.05); background:rgba(23,185,236,.14); color:var(--blue); }
.db-model-vec{
  display:inline-flex; align-items:center; gap:6px; margin-top:auto; padding-top:var(--sp-1);
  font-family:var(--fh); font-weight:700; font-size:13.5px; color:var(--blue);
}
.db-model-vec svg{ width:15px; height:15px; transition:transform .3s var(--ease-premium); }
.db-model:hover .db-model-vec svg{ transform:translateX(5px); }
@media (prefers-reduced-motion:reduce){
  .db-model:hover, .db-model:focus-visible{ transform:none; }
  .db-model:hover .icon-box, .db-model:hover .db-model-vec svg{ transform:none; }
}
@media (max-width:960px){ .db-modeli-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .db-modeli-grid{ grid-template-columns:1fr; } }

/* ═══ 2. NAČINI PRIDOBITVE — zdaj takoj za heroom (glej dnevnik) — 4
   kartice po ceni (namerno BREZ cen —
   V1 ima za vse štiri le "XX €" placeholder, glej dnevnik). Namesto
   cene kratek napotek + CTA na kalkulator. Uporablja obstoječo
   ".paket" komponento (components.css) — prva dejanska uporaba v V2. ═══ */
.db-paketi{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3); align-items:stretch; }
.db-paketi .paket{ height:100%; }
.db-paketi .paket .za{ color:var(--muted); font-size:14px; margin:-4px 0 2px; }
/* NADALJEVANJE 17 — Aleš je poslal nov screenshot: spodnji del kartic
   (ločilnik/opomba/gumb) ni bil "pixel-perfect" poravnan pri featured
   kartici ("Mesečni najem"). Vzrok: prejšnja "NADALJEVANJE 12" rešitev
   (ohranjena tu v zgodovini spodaj) je dala margin-top:auto DVEMA
   ločenima elementoma (".db-paket-info" TUKAJ + generično ".paket >
   a.btn" iz components.css) — komentar je takrat trdil, da je drugi
   auto-margin "neškoden/brez učinka", ker naj bi prvi porabil VES
   preostali prostor. To je NAPAČNA predpostavka: ko ima flex vrstica
   VEČ elementov z margin-top:auto, brskalnik preostali prostor
   ENAKOMERNO RAZDELI med vse — kar je bilo prej neopazno (razlike med
   karticami so bile majhne, ~23px vsaka), a je postalo vidno, ko sem
   (nadaljevanje 16) featured kartici dodal "padding-top:70px" za
   značko "Najpogosteje": s tem se je preostali prostor te kartice
   skrčil na ~0, medtem ko so imele ostale tri kartice še vedno ~46px
   — porazdelitev na DVA auto-margina je zato pri featured kartici dala
   0px, pri ostalih pa po 23px, kar je razdaljo "opomba → gumb"
   naredilo VIDNO različno (16px vs 39px).

   PRAVI popravek (brief, t. 1+6+7): SAMO EN element sme imeti
   margin-top:auto — nov ovojni blok ".db-paket-cta" (glej spodaj),
   ki ločilnik+opombo+gumb premakne na dno KOT EN SKLOP. Ker gumb zdaj
   ni več NEPOSREDEN otrok ".paket" (je znotraj ".db-paket-cta"),
   generično ".paket > a.btn{margin-top:auto}" (components.css) zanj
   več ne velja (selektor s ">" ne ujame vnuka) — brez potrebe po
   dodatnem popravku tam, in brez vpliva na druge strani, ki ".paket"
   uporabljajo brez tega vmesnega ovoja. */
.db-paket-info{
  font-size:13.5px; color:var(--muted); font-style:italic;
  padding-top:var(--sp-1); border-top:1px solid var(--line);
  /* brief, t. 2: rezerviran prostor za besedilo naj ostane enak, tudi
     če je katero besedilo daljše in bi se v prihodnje prelomilo v 2
     vrstici na samo eni kartici — "1.55em" je NARAVNA, že obstoječa
     višina ene vrstice tega besedila (izmerjeno: 20.925px pri 13.5px
     pisavi = točno 1.55em), zato brez vidne spremembe pri trenutnem,
     enovrstičnem besedilu na vseh štirih karticah. */
  min-height:1.55em;
}
/* NADALJEVANJE 17 — edini nosilec "potisni na dno" logike za to CTA
   območje (ločilnik+opomba+gumb KOT EN SKLOP, brief t. 1) — glej
   obsežno pojasnilo hrošča zgoraj pri ".db-paket-info". Notranji
   razmik med opombo in gumbom je fiksen ("gap", isti kot osnovni
   razmik med ostalimi elementi kartice) — NE auto-margin — zato je
   enak na VSEH štirih karticah ne glede na to, koliko presežnega
   prostora ima posamezna kartica (brief, t. 4+6: brez ročnih fixov na
   posamezni kartici). */
.db-paketi .paket .db-paket-cta{
  display:flex; flex-direction:column; gap:var(--sp-2); margin-top:auto;
}
@media (max-width:960px){ .db-paketi{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .db-paketi{ grid-template-columns:1fr; } }

/* ── AKTIVNE KARTICE (avgust 2026, dodatek) — cela kartica postane
   pravi radiogroup element (role="radio", glej davcne-blagajne.js).
   "Aktivno" obrobo rišemo z ISTO tehniko kot že odobrena "izbrano"
   obroba na produktnih karticah v izracun.css/izracun.js (SVG rect,
   dolžina izmerjena v JS, stroke-dashoffset "riše" obrobo) — tu
   podvojena/prilagojena za ".paket", namenoma samostojna kopija (glej
   opombo o samostojnosti posameznih V2 strani na vrhu te datoteke).
   Hover je namerno občutneje blažji od aktivnega stanja (manjši dvig/
   zoom, brez obrobe) — aktivno stanje ostaja edini "to je izbrano"
   signal, hover pa samo "to je klikljivo". ────────────────────────── */
.db-paketi .paket{
  cursor:pointer; outline:none;
  transition:transform var(--dur-med) var(--ease-premium), box-shadow var(--dur-med) var(--ease-premium),
             border-color var(--dur-med) var(--ease-premium);
}
/* ".priporoceno" (components.css) sicer daje trajen zelen rob + senco
   za "priporočeno" kartico — znotraj tega izbirnika bi to, ko uporabnik
   izbere DRUGO kartico, izgledalo, kot da je "Mesečni najem" še vedno
   delno aktiven (dva "aktivna" roba hkrati). Značka "NAJPOGOSTEJE" sama
   po sebi že nosi to sporočilo, zato rob/senca znotraj te sekcije
   sledita izključno hover/aktivnemu stanju, enako kot pri ostalih treh
   karticah — glej opombo pri točki 9 v naročilu (badge NI aktivni
   indikator, zato niti obratno: trajen rob ni "priporočeno" indikator). */
.db-paketi .paket.priporoceno{ border-color:var(--line); box-shadow:none; }
.db-paketi .paket:hover,
.db-paketi .paket:focus-visible{
  transform:translateY(-4px) scale(1.01);
  box-shadow:0 12px 30px rgba(42,61,80,.1);
  border-color:rgba(23,185,236,.45);
}
/* NADALJEVANJE 12 — "transform:scale(1.018)" na aktivni kartici je bil
   ODSTRANJEN (prej tu in v naslednjih dveh pravilih spodaj): brief
   izrecno zahteva, da izbrana/"featured" kartica NE spremeni notranje
   vertikalne geometrije (razdelek 11) — ker je privzeto aktivna
   kartica lahko KATERAKOLI od štirih (uporabnik izbira), bi scale na
   POLJUBNI kartici premaknil njen CTA/separator/price-note stran od
   ostalih treh (transform je čisto vizualen, ne vpliva na layout
   višino, zato ga "height:100%"/"align-items:stretch" poravnava ne
   zajame) — izmerjeno kot 14-26px odstopanje pred popravkom. Izbrano
   stanje ostaja jasno razpoznavno SAMO prek barvne SVG obrobe (spodaj,
   ".paket-obroba") + močnejše sence, brez dodatnega zooma. */
.db-paketi .paket[aria-checked="true"]{
  border-color:transparent;
  box-shadow:0 22px 46px rgba(23,52,80,.16);
}
.db-paketi .paket[aria-checked="true"]:hover,
.db-paketi .paket[aria-checked="true"]:focus-visible{
  border-color:transparent;
  box-shadow:0 22px 46px rgba(23,52,80,.16);
}
/* CTA gumb ("Pridobite ponudbo") postane zelen (isti stil kot
   .btn-primary) ob hoverju KATEREKOLI kartice IN dokler je kartica
   aktivna — namerno omejeno na .btn-secondary (kartice, ki privzeto
   nimajo zelenega CTA); "Mesečni najem" ima .btn-primary že privzeto
   zelen, zato ni potreben poseg vanj. Prehod je hitrejši od kartičnih
   prehodov (var(--dur-fast), enako kot bazni .btn v components.css),
   ker gre za majhen element, ki mora slediti kazalcu takoj. */
.db-paketi .paket .btn-secondary{
  transition:background var(--dur-fast) var(--ease-premium), color var(--dur-fast) var(--ease-premium),
             border-color var(--dur-fast) var(--ease-premium), transform var(--dur-fast) var(--ease-premium),
             box-shadow var(--dur-fast) var(--ease-premium);
}
.db-paketi .paket:hover .btn-secondary,
.db-paketi .paket:focus-visible .btn-secondary,
.db-paketi .paket[aria-checked="true"] .btn-secondary{
  background:var(--grad-green); color:#0d2015; border-color:transparent;
}
/* Plastenje (od spodaj navzgor): kartica (avto) → animirana SVG obroba
   → značka "NAJPOGOSTEJE" vedno najvišje, da je obroba nikoli ne
   prekrije, tudi ko obide zgornji rob kartice, kjer značka delno
   "visi" izven okvira. */
.paket-obroba{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }
.paket-obroba rect{
  fill:none; stroke:url(#dbObrobaGradient); stroke-width:2.5; stroke-linecap:round;
  transition:stroke-dashoffset .8s var(--ease-premium);
}
.db-paketi .paket .znak{ z-index:3; }
@media (prefers-reduced-motion:reduce){
  .paket-obroba rect{ transition:none; }
  .db-paketi .paket .btn-secondary{ transition:none; }
}
@media (hover:none){
  /* na dotik ni hoverja — hover-dvig/scale/obrobo izklopimo, da se
     kartica ne "zatakne" v dvignjenem stanju po tapu; aktivno stanje
     (obroba + zoom) ostane edini, jasno viden signal izbire tudi na
     mobilnem */
  .db-paketi .paket:hover{ transform:none; box-shadow:none; border-color:var(--line); }
  .db-paketi .paket[aria-checked="true"]:hover{
    box-shadow:0 22px 46px rgba(23,52,80,.16); border-color:transparent;
  }
  /* na dotik naj CTA obarva zelen samo, ko je kartica dejansko aktivna
     (ni "hover" v klasičnem smislu, samo :active med samim tapom) */
  .db-paketi .paket:hover .btn-secondary{ background:transparent; color:var(--navy); border-color:var(--line); }
  .db-paketi .paket[aria-checked="true"] .btn-secondary{ background:var(--grad-green); color:#0d2015; border-color:transparent; }
}

/* ═══ 4b. POGOSTA VPRAŠANJA — kompakten premium accordion (september
   2026, dopolnitev). Native <details>/<summary>, brez dodatnega JS —
   dostopno in delujoče tudi brez main.js. Ploščat seznam s tankimi
   delilniki namesto kartic, chevron ikona se ob odprtju zavrti. ═══ */
.db-faq{ max-width:800px; margin:0 auto; }
.db-faq-item{ border-bottom:1px solid var(--line); }
.db-faq-item:first-child{ border-top:1px solid var(--line); }
.db-faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:22px 4px; cursor:pointer; list-style:none;
  font-family:var(--fh); font-weight:700; font-size:17px; color:var(--navy);
  transition:color var(--dur-fast) var(--ease-premium);
}
.db-faq-item summary::-webkit-details-marker{ display:none; }
.db-faq-item summary:hover{ color:var(--blue); }
.db-faq-ikona{
  width:20px; height:20px; flex-shrink:0; color:var(--blue);
  transition:transform var(--dur-fast) var(--ease-premium);
}
.db-faq-item[open] .db-faq-ikona{ transform:rotate(180deg); }
.db-faq-item p{ margin:0 0 22px; padding-right:36px; color:var(--muted); font-size:15.5px; line-height:1.6; }
@media (max-width:640px){
  .db-faq-item summary{ font-size:15.5px; padding:18px 2px; }
  .db-faq-item p{ padding-right:0; font-size:15px; }
}

/* ═══ 5. ZAKLJUČNI CTA — ".cta-band" jezik podvojen namerno (glej
   isto odločitev v aplikacija-izdelek.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); }
}

/* ═══════════════════════════════════════════════════════════════
   NADALJEVANJE 11 — "PREUREDITEV HIERARHIJE + IZPOSTAVITEV GLAVNIH
   POTI" (september 2026). Dve sekciji: (a) nova "Izberite blagajno"
   solution-selector TAKOJ za herojem (2. sekcija strani), (b)
   restilizirana "Kako do svoje blagajne" (#nacini) kot premium
   proces/timeline vizual. Obe sekciji NAMENOMA kompaktni (zmanjšan
   padding proti privzetemu ".section{padding:var(--sp-7) 0}") — brief
   razdelek 15 svari pred skupno višino 3-4 viewportov. ═══════════ */

/* ── (a) IZBERITE BLAGAJNO — solution selector ─────────────────── */
.db-selektor{ padding-top:var(--sp-6); padding-bottom:var(--sp-5); }
.db-sol-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3); }
@media (max-width:960px){ .db-sol-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .db-sol-grid{ grid-template-columns:1fr; } }

/* ".db-sol-card" nadgradi obstoječi ".db-model" (isto besedilo/route/
   osnovna interakcija) z bolj "premium" prezentacijo: rahel ambientni
   CGP gradient ozadja namesto ravne bele, tanka modro tonirana obroba
   namesto nevtralne "--line", tehnični kotni accent (::before/::after
   L-oblika zgoraj desno), tri kratke točke povzete po obstoječem
   opisnem stavku vsake kartice (NE nove trditve — glej HTML), in hover
   ~20 % izrazitejši od sitewide ".db-model"/".dpt-card" standarda
   (brief razdelek 5-6). Selektor ".db-sol-card.db-model" je namenoma
   bolj specifičen od obstoječega ".db-model ...", da povozi osnovni
   hover ne glede na vrstni red v datoteki. */
.db-sol-card{
  position:relative;
  background:linear-gradient(165deg, #fff, var(--ice) 68%, var(--ice-deep));
  border-color:rgba(4,123,193,.16);
  padding:var(--sp-4) var(--sp-3) var(--sp-3);
}
.db-sol-card h3{ font-size:19px; letter-spacing:-.005em; margin-top:var(--sp-2); }
.db-sol-card > p{ margin-bottom:var(--sp-2); }
.db-sol-bullets{
  list-style:none; margin:2px 0 var(--sp-3); padding:0;
  display:flex; flex-direction:column; gap:7px;
}
.db-sol-bullets li{
  position:relative; padding-left:19px; font-size:13.5px; color:var(--muted); line-height:1.4;
}
.db-sol-bullets li::before{
  content:''; position:absolute; left:1px; top:5px; width:7px; height:7px; border-radius:2px;
  background:linear-gradient(135deg, var(--cyan), var(--blue));
  transform:rotate(45deg);
}
/* tehnični kotni accent — tanek "⌐" v zgornjem desnem kotu kartice,
   subtilen v mirovanju, opazneje cyan ob hoverju (brief razdelek 5) */
.db-sol-card::before, .db-sol-card::after{
  content:''; position:absolute; top:16px; right:16px; pointer-events:none;
  border-color:rgba(4,123,193,.3);
  transition:border-color var(--dur-med) var(--ease-premium);
}
.db-sol-card::before{ width:14px; height:0; border-top:1.5px solid; }
.db-sol-card::after{ width:0; height:14px; border-left:1.5px solid; }
.db-sol-card.db-model:hover::before, .db-sol-card.db-model:focus-visible::before,
.db-sol-card.db-model:hover::after, .db-sol-card.db-model:focus-visible::after{
  border-color:rgba(23,185,236,.75);
}
.db-sol-card.db-model:hover, .db-sol-card.db-model:focus-visible{
  transform:translateY(-5px) scale(1.012);
  box-shadow:0 18px 38px rgba(23,185,236,.16), 0 10px 22px rgba(42,61,80,.12);
  border-color:rgba(23,185,236,.55);
}
@media (prefers-reduced-motion:reduce){
  .db-sol-card.db-model:hover, .db-sol-card.db-model:focus-visible{ transform:none; }
  .db-sol-card::before, .db-sol-card::after{ transition:none; }
}

/* ── (b) "KAKO DO SVOJE BLAGAJNE" — premium proces/timeline restyle ──
   Podatki/funkcionalnost/route te sekcije ostajajo POPOLNOMA
   nedotaknjeni (glej davcne-blagajne.js — nič spremenjeno) — 01-04
   značke in povezovalna črta so izključno vizualna "4 poti do
   blagajne" metafora, ne trditev o zaporednem procesu (glej HTML
   komentar in dnevnik za analizo).

   NADALJEVANJE 20 — "VEČ KONTRASTA, MANJ MONOTONOSTI" (popravek 18/19):
   18/19 je zamenjal `on-navy` → `on-ice-deep`, kar je sekcijo naredilo
   PREVEČ svetlo/plosko (Alešev screenshot te sekcije) — stran je s tem
   izgubila svoj glavni "STRONG CONTRAST"/conversion moment (brif t. 3).
   Aleš je eksplicitno prepovedal vrnitev na raven `on-navy` pravokotnik,
   zato je nov ton `.on-steel` (pravi vmesni temno-svetel "steel blue",
   tokens.css/depth-system.css razdelek 13) — NE ravna barva, temveč
   GRADIENT (spodaj, `#nacini.on-steel`) za pravo globino. Ostaja jasno
   temnejši od `on-mid` sosede pred njo IN od `on-surface-alt` soseda za
   njo, kar ustvari pravi vrh v ritmu strani. `.eyebrow`/`.lead` sta zdaj
   dobila `.on-steel` (glej HTML in depth-system.css za nove skupne
   razrede — isti vzorec kot `.eyebrow.on-navy`/`.on-navy .lead`),
   `.circuit-field` je dobil `.tone-strong` namesto `.on-light.subtle`
   (avtomatsko svetlejša barva prek `.on-steel .circuit-field`,
   components.css). Marker/badge "ring" in spodnja povezava so spodaj
   prilagojeni novi, temnejši podlagi — geometrija stepperja/kartic/CTA
   ostaja popolnoma nespremenjena. */
#nacini.on-steel{
  /* gradient namesto ravne "--steel" barve (brif t. 4: "dark ne pomeni
     raven pravokotnik") — rahel prehod proti --navy-deep proti dnu
     sekcije doda globino brez uvajanja nove barve. */
  background:linear-gradient(165deg, var(--steel), var(--steel-deep) 65%, var(--navy-deep));
}
#nacini.section{ padding-bottom:var(--sp-6); }
#nacini .db-paketi{ position:relative; }
#nacini .db-paketi .paket{ position:relative; z-index:2; }
/* HROŠČ (odkrit ob prejšnjem "on-navy" krogu, popravljen pred dostavo):
   ".on-navy h2, .on-navy h3{color:#fff}" (components.css) je bilo
   posplošeno pravilo za VSAK h3 znotraj ".on-navy" sekcije — vključno s
   h3 znotraj BELIH ".paket" kartic, kjer je bila bela pisava na beli
   podlagi skoraj nevidna. Sekcija zdaj ni več ".on-navy" (glej zgoraj),
   a to pravilo ostaja namenoma: kartice so BELE ne glede na podlago
   sekcije (".paket{background:#fff}", components.css), zato njihov h3
   ostane eksplicitno temen ne glede na to, kateri "on-*" razred ima
   sekcija zdaj ali v prihodnje. */
#nacini .paket h3{ color:var(--navy); }

/* ═══ POVEZOVALNA SLED MARKERJEV 01-04 (nadaljevanje 15, popravek
   geometrije) — glej depth-system.css ".dpt-stepper" za razlago hrošča
   (dve neodvisni koordinatni sistemi) in izpeljavo popravka (skupna
   grid sled, rob-do-roba segmenti). Tu SAMO instanca (mere/barve) +
   animacijski trigger (obstoječ, nespremenjen ".db-flow-vidno"
   mehanizem, glej davcne-blagajne.js) — uporabnik je potrdil, da je
   SAMA animacija (timing) že v redu, popravlja se izključno geometrija,
   zato ohranjam identične zamike/trajanja kot prejšnja različica.

   Samo na širših zaslonih (≥961px, ista meja kot ".db-paketi" preklop
   na 2 stolpca spodaj), da so vse 4 kartice v eni vrstici — pod tem
   prelomom mreža kartic preide v več vrstic, kjer ena vodoravna
   povezovalna sled geometrijsko ne bi imela pomena (isti razlog kot
   prej), zato tam ostane prejšnji, nespremenjen na-kartici
   ".db-nacini-badge" (spodaj) — ta je torej zdaj izključno mobilni/
   tablični fallback, na širokem zaslonu ga ".dpt-stepper" prekrije.

   NADALJEVANJE 16 — Aleš je poslal nov screenshot: marker 02 +
   povezovalna črta sta (z mojim prejšnjim popravkom, ki je samo
   pomanjšal značko) še vedno prekrivala "Najpogosteje". Izrecno je
   prepovedal premikanje markerja/črte iz skupne osi — rešitev mora
   biti na ZNAČKI/KARTICI, glej popravek spodaj ("#nacini .paket.
   priporoceno .znak"). Tu spodaj samo ŠE ENA sprememba, ki jo ta
   popravek zahteva: PLASTENJE (z-index) je zdaj razdeljeno na 4 ravni,
   kot je uporabnik eksplicitno naročil — črta(1) < kartica(2) <
   značka(3, znotraj svoje kartice) < marker(4) — glej ".paket"
   (z-index:2, zgoraj v tej datoteki) in ".znak" (z-index:3, spodaj v
   tej datoteki). Da ta razvrstitev dejansko deluje MED elementi (ne
   samo znotraj vsake kartice posebej), ".dpt-stepper" NAMENOMA NIMA
   lastnega z-indexa (torej ne tvori svojega "stacking context") — s
   tem ".dpt-stepper-connector" (z-index:1) in ".dpt-stepper-marker"
   (z-index:4, override spodaj) tekmujeta neposredno z ".paket"
   (z-index:2) na isti ravni, namesto da bi bila kot ena sama enota
   vedno skupaj nad/pod kartico. Brif izrecno opozarja: "z-index NI
   nadomestilo za pravilno pozicioniranje" — zato to plastenje samo
   podpira popravek spodaj, ne nadomešča ga. ═══ */
#nacini .dpt-stepper{
  position:absolute; left:0; right:0; top:-16px;
  --dpt-cols:4; --dpt-gap:var(--sp-3); --dpt-marker-size:32px;
  /* nadaljevanje 20 — podlaga sekcije je zdaj gradient "--steel →
     --steel-deep → --navy-deep" (glej "#nacini.on-steel" zgoraj); stepper
     sedi v ZGORNJEM delu sekcije, kjer gradient prehaja skozi "--steel" —
     ring sledi isti "ista barva kot podlaga sekcije" logiki kot prej,
     samo z najbližjim ujemajočim tokenom tega dela gradienta. */
  --dpt-marker-ring:0 0 0 4px var(--steel);
  display:none;
}
@media (min-width:961px){ #nacini .dpt-stepper{ display:grid; } }

#nacini .dpt-stepper-marker{ z-index:4; }

#nacini .dpt-stepper-connector{
  transform:scaleX(0); transform-origin:left center;
  transition:transform .7s var(--ease-premium);
}
#nacini.db-flow-vidno .dpt-stepper-connector{ transform:scaleX(1); }
/* segment znotraj koraka N teče do markerja N+1 — isti zamik kot
   prihod TEGA naslednjega markerja spodaj, da segment "prispe" natanko
   takrat, ko se prikaže marker, h kateremu vodi (brif, t. 9 —
   zaporedno 01→02, 02→03, 03→04). */
#nacini.db-flow-vidno .dpt-stepper-item:nth-child(1) .dpt-stepper-connector{ transition-delay:.12s; }
#nacini.db-flow-vidno .dpt-stepper-item:nth-child(2) .dpt-stepper-connector{ transition-delay:.24s; }
#nacini.db-flow-vidno .dpt-stepper-item:nth-child(3) .dpt-stepper-connector{ transition-delay:.36s; }

#nacini .dpt-stepper-marker{
  opacity:0; transform:translateY(8px);
  transition:opacity .5s var(--ease-premium), transform .5s var(--ease-premium);
}
#nacini.db-flow-vidno .dpt-stepper-marker{ opacity:1; transform:none; }
#nacini.db-flow-vidno .dpt-stepper-item:nth-child(2) .dpt-stepper-marker{ transition-delay:.12s; }
#nacini.db-flow-vidno .dpt-stepper-item:nth-child(3) .dpt-stepper-marker{ transition-delay:.24s; }
#nacini.db-flow-vidno .dpt-stepper-item:nth-child(4) .dpt-stepper-marker{ transition-delay:.36s; }

@media (prefers-reduced-motion:reduce){
  #nacini .dpt-stepper-connector{ transition:none; transform:scaleX(1); }
  #nacini .dpt-stepper-marker{ transition:none; opacity:1; transform:none; }
}

/* NADALJEVANJE 16 — Aleš je zavrnil prejšnji poskus (pomanjšana
   značka je bila še vedno na isti "vrstici" kot marker/črta — brif:
   "nič se ne sme dotikati, nič se ne sme prekrivati", vzrok reši na
   ZNAČKI/KARTICI, NE na stepperju). Nova rešitev: značko "Najpogosteje"
   PRESTAVIM iz plavajočega položaja NAD kartico (prejšnji
   "top:-12px", components.css) NA položaj ZNOTRAJ featured kartice,
   POD celotno markersko vrstico — zdaj je vizualno vezana na kartico
   ("Mesečni najem"), ne na stepper (brif, t. 1). Vodoravno ostane
   nespremenjena (components.css "left:24px" je že v priporočenem
   20-30px razponu od notranjega levega roba, brif t. 2 — ni razloga
   za poseg). Pisava/padding sta vrnjena na privzeto velikost
   (components.css) — polna čitljivost (brif, t. 3: "badge mora biti
   jasno berljiv"), saj potreba po zmanjšanju odpade, ko sta plasti
   ločeni po VIŠINI, ne stisnjeni druga ob drugo.

   Izračun varnostnega razmika: marker je visok 32px, sredina stepperja
   je na "top:-16px" glede na vrh kartice (glej ".dpt-stepper" zgoraj)
   → spodnji rob markerja je na +16px. Značka je zdaj na "top:30px"
   (+14px varnostnega razmika pod markerjem — brif t. 3 zahteva
   12-18px). SAMO na ≥961px (ista meja kot ".dpt-stepper" — pod tem
   pragom mreža kartic preide v več vrstic in ta stepper sploh ni
   prikazan, glej zgoraj, zato tam ostane prejšnji, nespremenjen
   plavajoči položaj značke nad kartico). */
@media (min-width:961px){
  #nacini .paket.priporoceno .znak{ top:30px; }
  /* dovolj dodatnega "padding-top" na featured kartici, da naslov
     ("Mesečni najem") ne trči v na novo spuščeno značko (brif, t. 5) —
     kartice si delijo "align-items:stretch" (".db-paketi"), zato vse
     štiri kartice ostanejo enako visoke in njihov CTA na dnu poravnan
     (obstoječ ".db-paket-info{margin-top:auto}" sistem, nadaljevanje
     12) — ostale tri kartice preprosto dobijo nekoliko več praznega
     prostora nad ločilnikom/ceno, brez vizualne škode. */
  #nacini .paket.priporoceno{ padding-top:70px; }
}

/* oštevilčena značka (01-04) — zdaj SAMO mobilni/tablični fallback
   (<961px, glej opombo zgoraj); na širokem zaslonu jo ".dpt-stepper"
   nadomesti in jo eksplicitno skrije. Sicer popolnoma nespremenjena
   od prejšnje različice — brez sprememb pod 961px. */
.db-nacini-badge{
  position:absolute; top:-16px; right:20px; z-index:2;
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--fh); font-weight:800; font-size:12.5px; color:#fff;
  background:var(--c, var(--blue));
  /* nadaljevanje 20 — ista logika kot "#nacini .dpt-stepper" zgoraj:
     ring sledi novi gradientni podlagi sekcije ("--steel"). */
  box-shadow:0 0 0 4px var(--steel), var(--sh-sm);
  opacity:0; transform:translateY(8px);
  transition:opacity .5s var(--ease-premium), transform .5s var(--ease-premium);
}
#nacini.db-flow-vidno .db-nacini-badge{ opacity:1; transform:translateY(0); }
#nacini.db-flow-vidno .paket:nth-child(2) .db-nacini-badge{ transition-delay:.12s; }
#nacini.db-flow-vidno .paket:nth-child(3) .db-nacini-badge{ transition-delay:.24s; }
#nacini.db-flow-vidno .paket:nth-child(4) .db-nacini-badge{ transition-delay:.36s; }
@media (max-width:960px){ .db-nacini-badge{ box-shadow:0 0 0 3px var(--steel), var(--sh-sm); } }
@media (min-width:961px){ .db-nacini-badge{ display:none; } }
@media (prefers-reduced-motion:reduce){
  .db-nacini-badge{ transition:none; opacity:1; transform:none; }
}

/* zaključna vrstica znotraj sekcije — mehak, podporen CTA (brief
   razdelek 13), namenoma NE nov velik gumb (4 kartice zgoraj že
   vsaka nosi svoj CTA). NADALJEVANJE 20: podlaga sekcije je spet temnejša
   ("--steel" gradient), zato besedilo/povezava spet sledita istemu
   vzorcu kot ".db-flagship-nagrada a" (svetel cyan na temni podlagi) —
   privzeti (svetel-podlagi-namenjeni) recept spodaj ostaja kot fallback
   za primer, da bi bila ta komponenta kdaj ponovno uporabljena na svetli
   sekciji drugje, override za "#nacini" ga povozi. */
.db-nacini-cta{
  text-align:center; margin:var(--sp-4) 0 0; color:var(--muted); font-size:15px;
}
.db-nacini-cta a{
  color:var(--blue); font-weight:600; border-bottom:1px solid color-mix(in srgb, var(--blue) 35%, transparent);
  transition:color var(--dur-fast) var(--ease-premium);
}
.db-nacini-cta a:hover{ color:var(--navy-deep); }
#nacini .db-nacini-cta{ color:var(--muted-on-navy); }
#nacini .db-nacini-cta a{
  color:#8fe0f7; border-bottom-color:rgba(143,224,247,.35);
}
#nacini .db-nacini-cta a:hover{ color:#fff; }
@media (max-width:600px){ .db-nacini-cta{ font-size:14px; } }