/* ═══════════════════════════════════════════════════════════════
   Biroplast Solutions — V2 TISKALNIKI IN MFP (produktna kategorija)
   Ista splošna vizualna logika kot davcne-blagajne.css (temen hero,
   circuit/glow/motiv ozadje, product-moment, kljuke, reveal, cta-band,
   faq accordion) — NAMENOMA samostojna kopija, brez odvisnosti od
   davcne-blagajne.css/pages.css (glej dogovor o samostojnosti strani
   v dnevniku). Predpona razredov "tsk-" (tiskalniki).

   Naglasna barva: modra/cyan (premium hardware/enterprise tehnologija
   po brief-u), zelena samo pri kljukicah in CTA gumbih — ista logika
   kot povsod drugje v V2.

   Razlika od davcne-blagajne.css: tu je edini razpoložljivi produktni
   vizual manjši izrezan posnetek naprave s prosojnim ozadjem (429×472,
   ne polnozaslonski video/fotografija 4:3), zato hero-vizual uporablja
   ožji, navpičnejši "product-moment" okvir, v katerem slika "plava" na
   sredini namesto da ga v celoti zapolni. ═══════════════════════════ */

/* ═══ 1. HERO — "ENTERPRISE HARDWARE" (globalna svetla premium-tech
   prenova, september 2026, glej dnevnik). VARIANTA A (hardware), a
   NAMENOMA drugačna od Davčnih blagajn/GreenTilla na tri načine:
   (1) kompozicija je OBRNJENA — slika levo, besedilo desno (brief
   razdelek 15: "variiraj, ne vedno text-left/image-right"); (2)
   hladnejša, bolj nevtralna paleta (brief razdelek 16: "Tiskalniki:
   cool blue + neutral grey", manj cyan/zelene kot GreenTill/Davčne
   blagajne — razdelek 7: "manj green kot pri GreenTill"); (3) produkt
   NI v temni product-moment kartici — edini razpoložljivi vizual je
   že izrezana naprava s pravo transparentnostjo (429×472 webp), zato
   preprosto "plava" neposredno na svetlem ambientnem ozadju z mehko
   senco (drop-shadow), kar je Variant-A napotek "ne daj izdelka v
   generično kartico" izpolnjeno dobesedno, ne le pogojno kot na
   ostalih dveh straneh, kjer video potrebuje okvir. Tehnična grafika:
   "engineering lines" (razdelek 17) — kratke vodoravne merilne črte
   levo (namig na tehnične specifikacije/inženirsko risbo), eno
   navpično vezje desno, MANJ vozlišč/barv kot GreenTill/Davčne
   blagajne (samo modra+cyan, brez zelene — razdelek 7: "manj green").
   ═══ */
.tsk-hero{
  position:relative; overflow:hidden;
  padding:calc(var(--sp-7) + 30px) 0 var(--sp-7);
}
.tsk-hero--light{
  /* hladnejša, bolj nevtralna osnova kot GreenTill/Davčne blagajne —
     "cool blue + neutral grey" po brief razdelku 16, manj cyan/zelene
     tople note, več sive */
  background:linear-gradient(172deg, #f3f5f7 0%, #e5eaef 50%, #dde3ea 100%);
  color:var(--ink);
}
.tsk-hero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--sp-6); align-items:center;
}
.tsk-hero h1{ font-size:clamp(38px,5vw,60px); margin:2px 0 var(--sp-3); max-width:600px; color:var(--navy); }
.tsk-hero .lead{ max-width:480px; margin-bottom:var(--sp-4); }
.tsk-hero-cta{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }

.tsk-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(51,72,97,.07); color:var(--navy); border:1px solid rgba(51,72,97,.22);
}
.tsk-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);
}

/* Vizual: izrezana naprava (429×472, prava transparentnost) plava
   neposredno na ambientnem ozadju — brez kartice/okvira — z lastnim
   komaj zaznavnim "micro-float" (isti recept kot GreenTill/Davčne
   blagajne video, tu neposredno na slikovnem elementu, ker ni
   ločenega notranjega elementa za senco/overflow potreben). */
.tsk-hero-vizual{ position:relative; display:flex; justify-content:center; }
.tsk-hero-img{
  display:block; width:auto; height:auto; max-width:78%; max-height:440px;
  object-fit:contain; filter:drop-shadow(0 34px 50px rgba(23,34,46,.22));
  animation:tskFloat 8.5s ease-in-out infinite;
}
@keyframes tskFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }

/* ── ambientno ozadje: navy globina (statična) + 2 animirani plasti
   (cyan + nevtralno-sivkasta namesto zelene — "manj green", razdelek
   7), ista drift arhitektura kot GreenTill/Davčne blagajne. ── */
.tsk-ambient-navy{
  position:absolute; z-index:0; pointer-events:none; border-radius:50%;
  width:540px; height:540px; left:-6%; top:18%;
  filter:blur(34px);
  background:radial-gradient(circle, rgba(42,61,80,.11), rgba(51,72,97,.04) 55%, transparent 74%);
}
.tsk-ambient-wrap{ position:absolute; z-index:0; pointer-events:none; }
.tsk-ambient{ position:absolute; inset:0; border-radius:50%; filter:blur(10px); }
.tsk-ambient-wrap--cyan{ width:420px; height:420px; right:2%; top:-100px; }
.tsk-ambient--cyan{
  background:radial-gradient(circle, rgba(23,185,236,.16), transparent 72%);
  animation:tskDriftCyan 20s ease-in-out infinite;
}
.tsk-ambient-wrap--grey{ width:380px; height:380px; right:-8%; bottom:-140px; }
.tsk-ambient--grey{
  background:radial-gradient(circle, rgba(51,72,97,.13), transparent 70%);
  filter:blur(16px);
  animation:tskDriftGrey 25s ease-in-out infinite; animation-delay:-11s;
}
@keyframes tskDriftCyan{ 0%,100%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(-30px,40px,0) scale(1.06); } }
@keyframes tskDriftGrey{ 0%,100%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(32px,-30px,0) scale(1.05); } }

/* ── tehnična grafika: kratke vodoravne "merilne" črte levo + eno
   navpično vezje desno zgoraj — "engineering lines", brez zelene. ── */
.tsk-hero-tech{
  /* namenoma OMEJENA na zgornji del heroja (ne vertikalno centrirana
     čez celotno višino kot na GreenTill/Davčnih blagajnah) — ta stran
     ima besedilo/CTA v desnem stolpcu, zato mora tehnična grafika
     ostati nad njim, ne čez CTA vrstico */
  position:absolute; z-index:0; top:-10px; right:-1%; width:420px; height:340px;
  opacity:.5; pointer-events:none;
}
.tsk-hero-tech svg{ width:100%; height:100%; }
.tsk-line{ stroke-dasharray:1; stroke-dashoffset:1; opacity:0; animation:tskDrawLine 2s cubic-bezier(.4,0,.2,1) both; }
.tsk-line--h{ animation-delay:.4s; }
.tsk-line--v{ animation-delay:1s; }
@keyframes tskDrawLine{ from{ stroke-dashoffset:1; opacity:0; } to{ stroke-dashoffset:0; opacity:.85; } }
.tsk-node{ opacity:0; transform-origin:center; animation:tskNodeIn .5s ease-out 2.2s both; filter:drop-shadow(0 0 3px rgba(4,123,193,.5)); }
@keyframes tskNodeIn{ from{ opacity:0; transform:scale(.4); } to{ opacity:1; transform:scale(1); } }
.tsk-node.tsk-node--accent{ animation:tskNodeIn .5s ease-out 2.6s both, tskPulse 4.2s ease-in-out 3.6s infinite; }
.tsk-node.tsk-node--pulse2{ animation:tskNodeIn .5s ease-out 2s both, tskPulse2 3.6s ease-in-out 5s infinite; }
@keyframes tskPulse{ 0%,100%{ opacity:.45; transform:scale(1); filter:drop-shadow(0 0 3px rgba(4,123,193,.45)); } 50%{ opacity:1; transform:scale(1.15); filter:drop-shadow(0 0 7px rgba(4,123,193,.8)); } }
@keyframes tskPulse2{ 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){
  .tsk-hero-grid{ grid-template-columns:1fr; gap:var(--sp-5); }
  .tsk-hero-vizual{ order:-1; width:100%; }
  .tsk-hero-img{ max-width:64%; margin:0 auto; }
  .tsk-hero h1{ max-width:none; }
  .tsk-hero .lead{ max-width:none; }
  .tsk-hero-tech{ opacity:.35; }
}
@media (max-width:600px){
  .tsk-hero{ padding:calc(var(--sp-6) + 20px) 0 var(--sp-6); }
  .tsk-hero-img{ max-width:56%; }
  .tsk-ambient-wrap--cyan{ width:260px; height:260px; }
  .tsk-ambient-wrap--grey{ width:220px; height:220px; }
  .tsk-ambient-navy{ width:300px; height:300px; opacity:.7; }
}
@media (prefers-reduced-motion: reduce){
  .tsk-line, .tsk-node,
  .tsk-ambient--cyan, .tsk-ambient--grey,
  .tsk-hero-img{ animation:none !important; }
  .tsk-line{ stroke-dashoffset:0; opacity:.85; }
  .tsk-node{ opacity:1; transform:none; }
}

/* ═══ 2. ZAKAJ NAJEM — ikonska vrstica (namenoma brez kartičnih
   okvirjev — brief opozarja pred "preveč kartic" na strani, ki že ima
   mrežo naprej spodaj). Na desktopu ločeno z navpičnimi delilniki. ═══ */
.tsk-razlogi{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4);
}
.tsk-razlog{ padding:0 var(--sp-3); border-left:1px solid var(--line); }
.tsk-razlog:first-child{ border-left:0; padding-left:0; }
.tsk-razlog h3{ font-size:17px; margin:var(--sp-2) 0 6px; }
.tsk-razlog p{ color:var(--muted); font-size:14.5px; line-height:1.55; }
@media (max-width:900px){
  .tsk-razlogi{ grid-template-columns:1fr 1fr; row-gap:var(--sp-4); }
  .tsk-razlog:nth-child(3){ border-left:0; padding-left:0; }
}
@media (max-width:560px){
  .tsk-razlogi{ grid-template-columns:1fr; }
  .tsk-razlog{ border-left:0; padding-left:0; padding-top:var(--sp-3); border-top:1px solid var(--line); }
  .tsk-razlog:first-child{ padding-top:0; border-top:0; }
}

/* ═══ 3. VRSTE NAPRAV — primerjalna mreža BREZ cen (namesto v1-jevih 4
   "paketov" s placeholder imeni/cenami — glej dnevnik). Ploščice so
   namerno mirne (ne ".paket"/ne interaktivne kartice kot pri davčnih
   blagajnah), ker tu ni izbirnega mehanizma — samo informativni
   pregled pred CTA na kalkulator. Ena ploščica (najpogostejša izbira)
   dobi rahlo poudarjeno obrobo prek modifikatorja, brez animacije. ═══ */
.tsk-vrste{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3);
}
.tsk-vrsta{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-3); display:flex; flex-direction:column; gap:8px;
  transition:border-color var(--dur-fast) var(--ease-premium), box-shadow var(--dur-fast) var(--ease-premium);
}
.tsk-vrsta .badge{ align-self:flex-start; }
.tsk-vrsta h3{ font-size:17px; margin:4px 0 0; }
.tsk-vrsta p{ color:var(--muted); font-size:14.5px; line-height:1.55; margin:0; }
.tsk-vrsta--priporoceno{ border-color:rgba(171,208,57,.5); box-shadow:var(--sh-sm); }
.tsk-vrste-opomba{ text-align:center; color:var(--muted); font-size:14.5px; margin-top:var(--sp-4); }
.tsk-vrste-opomba a{ color:var(--blue); font-weight:600; }
@media (max-width:960px){ .tsk-vrste{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .tsk-vrste{ grid-template-columns:1fr; } }

/* ═══ 3b. VRSTE NAPRAV — STEEL PEAK (17. 9. 2026, "TONALNI RITEM"
   popravek). Edina STRONG CONTRAST/STEEL sekcija na strani (depth-
   system.css razdelek 13 "specs-highlight moment") — primerjalna mreža
   naprav dobi globljo inženirsko podlago namesto prejšnjega ".on-
   surface-alt". Gradient namesto ravne ".on-steel" barve, lastna
   pozicija plasti (glej tiskalniki.html za usklajene pare z
   sosednjima sekcijama). Kartice (.tsk-vrsta) ostanejo bele — glej
   razdelek 3 zgoraj, ni jih treba spreminjati, beseda/kontrast pride
   sam od sebe iz svetle kartice na temnejši podlagi. Le besedilo/
   povezava POD kartično mrežo (.tsk-vrste-opomba) leži neposredno na
   steel podlagi in zato potrebuje svetlo različico (isti vzorec kot
   ".on-steel .lead"/".eyebrow.on-steel" v depth-system.css, tu za
   stran-specifičen element, ki ni .lead). ═══ */
.tsk-vrste-steel{
  background:linear-gradient(165deg, var(--steel), var(--steel-deep) 70%, var(--navy-deep));
}
.tsk-vrste-steel .tsk-vrste-opomba{ color:var(--muted-on-navy); }
.tsk-vrste-steel .tsk-vrste-opomba a{ color:var(--cyan); }
/* POPRAVEK — ".on-steel h2,h3{color:#fff}" (depth-system.css) je potomski
   pravilo, ki brez tega popravka pobeli tudi naslove ZNOTRAJ belih
   ".tsk-vrsta" kartic (nevidno belo na belem). Kartice ostanejo na
   privzeti temni barvi ne glede na temnejšo podlago sekcije okoli njih. */
.tsk-vrste-steel .tsk-vrsta h3{ color:var(--ink); }

/* ═══ 4. KAJ JE VKLJUČENO — dvostolpčni "kljuke" seznam, isti vzorec
   kot .db-vrednost-list na davcne-blagajne.html (10 postavk namesto 6,
   zato tu brez border-bottom med vrsticami — pri 10 postavkah bi
   delilniki v dveh stolpcih vizualno preveč razdrobili sekcijo). ═══ */
.tsk-vkljuceno-list{
  list-style:none; margin:0 auto; padding:0; max-width:940px;
  display:grid; grid-template-columns:1fr 1fr; gap:16px var(--sp-5);
}
.tsk-vkljuceno-list li{
  display:flex; gap:14px; align-items:flex-start; font-size:15.5px; line-height:1.5; color:var(--ink);
}
.tsk-vkljuceno-list .icon-box{ width:38px; height:38px; border-radius:10px; }
.tsk-vkljuceno-list .icon-box svg{ width:18px; height:18px; }
@media (max-width:700px){ .tsk-vkljuceno-list{ grid-template-columns:1fr; } }

/* ═══ 5. NAKUP — kratek dvo-stolpčni blok (besedilo + CTA), umirjena
   alternativa najemu, brez slik/grafike. ═══ */
.tsk-nakup{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5);
  flex-wrap:wrap;
}
.tsk-nakup > div{ flex:1 1 420px; max-width:640px; }
.tsk-nakup .lead{ margin-bottom:0; }
.tsk-nakup .btn{ flex-shrink:0; }

/* ═══ 6. POGOSTA VPRAŠANJA — enak accordion vzorec kot .db-faq na
   davcne-blagajne.html, s stranskim predponskim imenom razredov
   (namerna podvojitev CSS-ja, glej opombo o samostojnosti strani na
   vrhu te datoteke). ═══ */
.tsk-faq{ max-width:800px; margin:0 auto; }
.tsk-faq-item{ border-bottom:1px solid var(--line); }
.tsk-faq-item:first-child{ border-top:1px solid var(--line); }
.tsk-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);
}
.tsk-faq-item summary::-webkit-details-marker{ display:none; }
.tsk-faq-item summary:hover{ color:var(--blue); }
.tsk-faq-ikona{
  width:20px; height:20px; flex-shrink:0; color:var(--blue);
  transition:transform var(--dur-fast) var(--ease-premium);
}
.tsk-faq-item[open] .tsk-faq-ikona{ transform:rotate(180deg); }
.tsk-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){
  .tsk-faq-item summary{ font-size:15.5px; padding:18px 2px; }
  .tsk-faq-item p{ padding-right:0; font-size:15px; }
}

/* ═══ 7. ZAKLJUČNI CTA — ".cta-band" jezik podvojen namerno (glej isto
   odločitev v davcne-blagajne.css/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); }
  .tsk-nakup{ text-align:center; justify-content:center; }
}