/* ═══════════════════════════════════════════════════════════════
   Biroplast Solutions — V2 GreenTill FLAGSHIP hero (7. 9. 2026,
   "PREMIUM HIGH-TECH REDESIGN" brief). Samostojna datoteka, ki jo
   uporablja SAMO `blagajna-greentill.html` — naložena POLEG
   `blagajna-modeli.css` (ne namesto), ker GreenTill obdrži vse
   ostale skupne razdelke te strani ("Zakaj lasten sistem", "Naprava",
   "Sorodne strani", zaključni CTA-band) NESPREMENJENE — samo hero
   dobi popolnoma nov, svetel "flagship hardware" sistem, ker je
   GreenTill edini LASTEN Biroplastov razvoj med davčnimi blagajnami
   (brief razdelek 21/59: "FLAGSHIP HARDWARE PRODUCT, ne ena kartica").

   Razred "gt-" (GreenTill) je namerno LOČEN od skupnega "bm-" (vseh 5
   "blagajna-*" strani) — nič tu ne vpliva na blagajna-gastro/market/
   prenosna/dogodki.html, ki še vedno uporabljajo nespremenjeno temno
   ".bm-hero" iz `blagajna-modeli.css`.

   To je tudi PRVA uporaba novega "light hero" + "technical visual
   language" vizualnega jezika (brief razdelek 3-4, 8-9A) v V2 —
   namesto teme kot privzetka: svetlo/off-white ozadje, temna
   tipografija, zelo subtilna ambientna cyan/zelena svetloba, tanka
   tehnična črtna grafika (namesto pikčastega vzorca). Zasnovan kot
   PONOVLJIV vzorec za prihodnje "Hardware Hero" strani (Davčne
   blagajne, Tiskalniki), a v tem krogu uporabljen samo tukaj — glej
   dnevnik za obseg tega kroga.

   ─── 8. 9. 2026 dopolnitev — "PREMIUM CGP REFINEMENT" ───────────────
   Uporabnik: smer je dobra, a "malo preveč svetlo/sterilno" — ~20 %
   več Biroplast CGP prisotnosti, brez vrnitve na temno ozadje, brez
   velikih nasičenih ploskev. Spremembe (samo znotraj te datoteke +
   hero v blagajna-greentill.html, nič drugega):
     - tehnična SVG grafika: dodana 3. barva (modra, "gt-line--blue")
       poleg obstoječe cyan/zelene — prej je bila modra iz CGP palete
       v tem heroju povsem odsotna, brief eksplicitno zahteva "blue
       technical details";
     - vse linije/vozlišča zdaj rišejo SEBE ob nalaganju (počasna,
       nadzorovana ~2.5s sekvenca prek stroke-dashoffset + fade, glej
       "gt-line/gt-node" spodaj) namesto da so statične od začetka —
       brief razdelek 5 ("linija se počasi izriše, node se prižge");
     - eno zeleno "accent" vozlišče po uvodni animaciji preide v zelo
       počasen, neskončen utrip (drop-shadow pulz, 4s cikel) — to je
       moja interpretacija dovoljene ("lahko") možnosti "accent
       potuje po liniji": namesto dobesednega premikanja po poti
       (SMIL/offset-path, krhko čez brskalnike in dodatna JS-logika
       samo za to stran) sem izbral utripajoč "živ" node, ki daje enak
       občutek aktivnosti/tehnologije brez dodatnega JS-a — glej
       dnevnik za to odločitev;
     - vozlišča dobijo rahel barvno-ujemajoč drop-shadow (zelo majhen
       blur, zmerna prosojnost) za občutek "osvetljenega" vozlišča —
       ne neon, samo fin sij;
     - ambientna svetloba (glow za produktom + 2 hero-glow oblaka)
       intenzivnejša (opacity/velikost), a ostaja LOKALNA (2 obstoječa
       "blob" elementa + 1 zelo blaga radialna prevleka čez celoten
       hero ozadje) — NE en gradient čez celo stran;
     - `.gt-hero-tech` kontejner opacity 0.5→0.62 (namizje), 0.35→0.4
       (≤900px) — grobo +20-25 %, ujema se z željeno oceno;
     - diferenciran parallax: produkt (video) 0.02→0.014, ambientna
       svetloba (glow) 0.022/0.016→0.010/0.008 (počasneje od
       produkta, kot zahteva brief razdelek 6), tehnične linije
       (kontejner) NOVO 0.006 ("minimalen drift"); posamezna vozlišča
       NISO dobila lastnega ločenega parallaxa (bi vizualno "odlepila"
       node od črte, na katero je vezan) — namesto tega njihova
       "diferenciacija" pride iz utripa na accent vozlišču;
     - na mobilnem (≤760px) je modra sekundarna linija/vozlišča
       skrita ("odstrani dodatne secondary nodes" iz brief-a), glow
       oblaki manjši — poenostavitev, ne izklop.
   Vse novo spoštuje prefers-reduced-motion (glej media query na dnu
   datoteke: animacije izklopljene, elementi takoj v končnem stanju,
   parallax je itak globalno izklopljen v js/motion.js).

   ─── 8. 9. 2026 (2. dopolnitev) — "FINAL BACKGROUND DEPTH REFINEMENT"
   + "ANIMATED AMBIENT BACKGROUND" ────────────────────────────────────
   Uporabnik: smer je zelo blizu, a še vedno ~skoraj-belo — želel je
   10-15 % več globine/barvne prisotnosti (NE 30-40 %, izrecno), IN
   počasno, komaj zaznavno neskončno gibanje ambientne svetlobe namesto
   povsem statičnega ozadja. Izrecno SAMO background/atmosphere — brez
   sprememb layouta, tipografije, produktne fotografije, CTA-jev,
   nagrade ali spacinga (preverjeno: noben od teh elementov v tem
   krogu ni bil dotaknjen).

   Ambientni "blob" elementi (bivši ".gt-hero-glow--cyan/--green") so
   PREIMENOVANI in RESTRUKTURIRANI v ".gt-ambient-wrap" (zunanji, nosi
   SAMO data-parallax) + ".gt-ambient" (notranji, nosi SAMO neskončno
   CSS "drift" animacijo transforma). Razlog za to ločitev je isti
   hrošč kot pri prejšnjem popravku ".gt-hero-tech" centriranja: CSS
   animacija, ki animira `transform`, ima v cascade prednost pred
   katerokoli drugo vrednostjo te lastnosti — VKLJUČNO z inline
   `style.transform`, ki ga ob scrollu piše `js/motion.js` za parallax.
   Če bi bila neskončna "drift" animacija IN data-parallax na istem
   elementu, bi animacija scroll-parallax popolnoma preglasila (parallax
   sploh ne bi bil viden). Z ločitvijo na dva gnezdena elementa oba
   sistema delujeta sočasno, neodvisno.

   Dodana nova plast ".gt-ambient-navy" (statična, brez parallaxa in
   brez animacije — namerno, da ne izgleda kot "premikajoč se temen
   madež", samo kot mirna globina) in ".gt-ambient--blue" (nova,
   animirana, med cyan in navy po legi/barvi — "light blue depth" za
   produktom, brief 1/razdelek 2).

   ─── 8. 9. 2026 (3. dopolnitev) — "FINAL PREMIUM REFINEMENT" ────────
   Uporabnik: "zelo blizu končni smeri... samo zadnjih 10 % polish-a."
   Izrecno SAMO ozadje/atmosfera + krožna grafika + značka — brez
   sprememb layouta, copyja, H1, CTA-jev, nagrade ali kompozicije.
     - ozadje dodatno ~5-8 % hladnejše/temnejše (glej ".gt-hero" zgoraj);
     - cyan/modra ambientna globina okoli produkta rahlo izrazitejša
       (".gt-hero-video::before", ".gt-ambient--cyan/--blue") — zelena
       NAMENOMA nedotaknjena, uporabnik: "ne povečuj več zelene, trenutno
       green CGP presence deluje dobro";
     - odstranjena dashed okvir ("gt-frame") in koordinatne oznake
       ("gt-ticks") — skupaj s prejšnjimi ravnimi ob-robu-poravnanimi
       linijami sta dajala vtis dekorativnega "L-oblikovanega okvirja";
     - 2 novi, bolj izdelani poti z zavoji (cyan, modra) namesto 3 ravnih
       linij; ena (cyan) "izgine" pod produktom in se kot ločen segment
       "znova pojavi" na drugi strani; zelena zdaj samo EN accent node na
       modri poti (manj skupne zelene teže kot prej, ne več — glej zgoraj);
     - nov ".gt-signal": subtilna cyan pika, ki vsakih 10s enkrat počasi
       potuje po glavni (cyan) poti — čist CSS (offset-path/offset-
       distance), ne SMIL, da ostane zanesljivo izklopljiva prek
       prefers-reduced-motion kot vse ostalo v tej datoteki;
     - ".gt-hero-znacka" (badge) prenovljena iz generičnega "pill" videza
       v "product-status/technical label" (ostrejši kot, status-pika,
       manjše velike črke s širšim razmikom) — glej spodaj;
     - PREVERJENO, a NAMENOMA NE zamenjano: v projektu obstajata
       kakovostna prosojna PNG-ja GreenTilla brez ozadja
       (`assets/products/greentill-naprava(-xpos).png`, zaslon prižgan,
       resnično UI, prava transparentnost) — vizualno zelo dobra, a
       zamenjava trenutnega videa-v-kartici z njima bi pomenila
       spremembo KOMPOZICIJE heroja (izguba video-gibanja, odstranitev
       kartice/sence), kar je ta krog eksplicitno izvzel ("NE spreminjaj
       ... osnovne kompozicije"). Glej dnevnik za polno oceno in predlog
       za naslednji krog, če si uporabnik želi raziskati to smer.
   ═══════════════════════════════════════════════════════════════ */

/* ─── 21. 9. 2026 (4. dopolnitev) — "HERO SHOT KOT NA HOMEPAGE, ČEZ CEL
   ZASLON" (uporabnikov izrecen popravek) ─────────────────────────────
   Prvi poskus tega kroga (video kot ožja "kartica" ob besedilu,
   ".gt-hero-grid" dvostolpčna postavitev, glej opombo v HTML) je bil
   IZRECNO zavrnjen: "no, hero shot should be like on the hompage...on
   the hero section" + "over all screen". To ni bila prošnja za manjše
   popravke kartice, ampak zahteva po drugačni kompoziciji — isti
   ".hero-video-stage"/".hero-video" vzorec kot na `index.html` heroju
   (glej tam in `css/pages.css` za izvirnik): video je POLNOZASLONSKA
   OZADNJA PLAST celotne sekcije (na namizju `position:absolute;
   inset:0`), besedilo naloženo čez njegov levi del s temnim prelivom
   za berljivost.

   Ta tehnika terja TEMNO (navy) osnovo z belim besedilom namesto
   prejšnjega svetlega "flagship" ozadja (na svetlem ozadju isti trik ne
   deluje — svetlo besedilo bi bilo neberljivo na svetlem robu videa).
   Spodaj so zato spremenjeni: ozadje/barva besedila ".gt-hero", cela
   ".gt-hero-grid" dvostolpčna postavitev ukinjena (nadomeščena z
   flex-column logiko kot ".hero" na homepage), ".gt-ambient-navy" (bila
   kalibrirana za svetlo ozadje in staro kartico) odstranjena, prejšnja
   kartica ".gt-hero-video-wrap"/".gt-hero-video" (senca, radij, glow,
   levi-rob-prelivnica) nadomeščena z ".gt-hero-video-stage". Značka/h1/
   lead/nagrada dobijo barve za berljivost na temnem ozadju. Video-sam/
   poster/vir NEDOTAKNJEN (isti `greentill-hero.mp4`, nativno 2560×1080).
   Za razliko od `index.html` (skoraj-polnovišinski hero) ta sekcija NI
   polnovišinska — višino določa lastni padding + višina besedila (glej
   spodaj), cilj ~600-720px na namizju po brief-u prejšnjega kroga. */

/* ─── 21. 9. 2026 (5. dopolnitev) — "FIX THE GREENTILL PAGE HERO" ──────
   Aleš je po 4. dopolnitvi še enkrat popravil: video NE sme biti ločen
   blok pod besedilom na NOBENI širini (prej je bil na ≤960px navaden
   tok-blok pod besedilom — to je bilo tisto "TEXT AREA ↓ VIDEO AREA",
   ki ga je zavrnil). Video je zdaj POLNOZASLONSKA OZADNJA PLAST na VSEH
   širinah, besedilo pa vedno leži ČEZ njega. Uveljavljena je natančna
   plastna struktura iz brief-a:

     LAYER 0  video ozadje        `.gt-hero-video-stage`   z-index:0
     LAYER 1  prelivni overlay    `.gt-hero::after/::before` z-index:1
     LAYER 2  tehnika/ambient     `.gt-hero-tech/.gt-ambient-wrap` z-index:2
     LAYER 10 vsebina             `.gt-hero > .wrap`       z-index:10

   Video in overlay imata `pointer-events:none` (vsa interaktivnost
   ostane vsebini). Višina heroja je zdaj EKSPLICITEN `min-height`
   (~620-720px na namizju, kot zahteva brief) namesto zgolj posledica
   padding+besedila — s tem je "kinematičen" kader zanesljiv ne glede na
   dolžino besedila. Video sam je `object-fit:cover` čez CELO sekcijo,
   nikoli raztegnjen, nikoli v kontejnerju/kartici, brez marginov in brez
   max-width omejitve. ───────────────────────────────────────────────── */

.gt-hero{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; align-items:stretch;
  /* osnovna barva pod videom — vidna samo, dokler se video ne naloži
     (in za poster), ne kot samostojno ozadje kot v prejšnjem krogu */
  background:var(--navy-deep);
  color:#fff;
  padding:var(--sp-6) 0;
  min-height:520px;
}
@media (min-width:961px){
  /* brief: "min-height: approximately 620–720px", "at large desktop
     sizes the hero should feel cinematic" — 680px je sredina razpona in
     pri 2560×1080 viru da širok, ploščat kader brez pretiranega obreza. */
  .gt-hero{ min-height:680px; padding:var(--sp-6) 0; }
}

/* ── LAYER 1 — berljivostni preliv čez video. Brief: "LEFT: deep navy /
   semi-opaque → CENTER: gradually transparent → RIGHT: fully transparent
   video", in izrecno: "Do not put an opaque rectangular box behind the
   text", "without covering or darkening the entire video". Zato mehek
   vodoraven preliv, ki je povsem prozoren že pri ~52 % širine — torej
   krepko preden se začne vidni del naprave v kadru. Ista tehnika in ista
   barva (--navy-deep = rgb(38,58,79)) kot `.hero-video-stage::before` na
   naslovnici, samo malenkost močnejša na levi, ker je besedilni blok tu
   gostejši (značka + h1 + lead + 2 CTA + nagrada). ── */
.gt-hero::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(38,58,79,.80) 0%,
    rgba(38,58,79,.58) 20%,
    rgba(38,58,79,.22) 37%,
    rgba(38,58,79,0) 52%);
}
/* zelo blaga hladna CGP prevleka (cyan zgoraj desno, limeta spodaj levo)
   — ostaja iz prejšnjih krogov, zdaj v isti plasti kot preliv */
.gt-hero::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(circle at 80% 6%, rgba(23,185,236,.1), transparent 46%),
    radial-gradient(circle at 3% 94%, rgba(171,208,57,.08), transparent 42%);
}
/* ── mobilno/tablično: besedilo se razteza čez večji del širine, zato
   vodoraven preliv tam ne zadošča — namesto njega NAVPIČEN: močan v
   zgornjem delu (za besedilom/CTA-ji) in odprt v spodnji tretjini, ki
   postane "okno" za napravo. Video ostane ozadje (brief: "The video may
   still function as the HERO background"), obenem pa so izpolnjene vse
   tri mobilne prioritete iz brief-a: berljivo besedilo, vidna naprava,
   uporabni CTA-ji. Prva različica tega kroga je imela preliv enakomerno
   močan (.90/.74/.66/.88) — preverjeno vizualno je naprava takrat skoraj
   povsem izginila, zato spodnja polovica zdaj bistveno svetlejša. ── */
@media (max-width:960px){
  .gt-hero{
    /* vsebina k vrhu + višji hero: pod besedilom nastane prost pas, v
       katerem se naprava vidi brez prekrivanja z besedilom */
    justify-content:flex-start;
    min-height:660px;
    padding:var(--sp-5) 0 var(--sp-6);
  }
  .gt-hero::after{
    background:linear-gradient(180deg,
      rgba(38,58,79,.93) 0%,
      rgba(38,58,79,.88) 40%,
      rgba(38,58,79,.55) 62%,
      rgba(38,58,79,.28) 82%,
      rgba(38,58,79,.34) 100%);
  }
}

/* ── LAYER 10 — vsebina. Vedno nad videom, prelivom IN tehnično
   dekoracijo; edina plast, ki prejema klike. ── */
.gt-hero > .wrap{ position:relative; z-index:10; width:100%; }
/* brief: "Use a constrained content width approximately 420–520px",
   "Do NOT let the headline stretch halfway across the video" — 480px je
   sredina razpona in ista vrednost, kot jo za isti namen uporablja
   naslovnica (".hero-v3-naslov/-opis/..." v pages.css). Na ozkih
   zaslonih omejitev popusti, ker tam ni videa "ob" besedilu. */
.gt-hero-text{ max-width:480px; }
@media (max-width:960px){
  .gt-hero-text{ max-width:560px; }
}
.gt-hero h1{ font-size:clamp(30px,3.6vw,48px); margin:2px 0 var(--sp-3); color:#fff; }
.gt-hero .lead{ color:#d4dfea; max-width:480px; margin-bottom:var(--sp-4); }
.gt-hero-cta{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }
/* telefonski CTA — brief: "transparent/dark glass treatment with
   readable light text". Prekrivni "glass" sloj namesto navadnega
   prosojnega gumba, ker gumb zdaj stoji na VIDEU (spremenljiva podlaga),
   ne na mirnem ozadju: rahlo zatemnjeno navy steklo + zabris podlage
   poskrbita, da je besedilo berljivo tudi, če se kader pod njim posvetli.
   `backdrop-filter` je progresivna izboljšava — brez podpore ostane samo
   polprosojno ozadje, kar je še vedno berljivo. */
.gt-hero-cta .btn-secondary{
  background:rgba(38,58,79,.52);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-color:rgba(255,255,255,.3); color:#fff;
}
.gt-hero-cta .btn-secondary:hover,
.gt-hero-cta .btn-secondary:focus-visible{
  background:rgba(38,58,79,.7); border-color:rgba(255,255,255,.5); color:#fff;
}

/* značka — barve zamenjane za temno ozadje po istem receptu kot
   ".badge-cyan.on-navy" (components.css): svetlejši cyan tekst na
   prosojnejšem cyan ozadju namesto prejšnjega temnega teksta na skoraj-
   belem. Oblika (ostrejši kot, status-pika, širok letter-spacing) iz
   3. dopolnitve ostaja nespremenjena. */
.gt-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(23,185,236,.22); color:#8fe0f7; border:1px solid rgba(23,185,236,.4);
}
.gt-hero-znacka::before{
  content:''; width:6px; height:6px; border-radius:50%; flex-shrink:0;
  background:var(--cyan); box-shadow:0 0 0 3px rgba(23,185,236,.28);
}
/* tanka tehnična oznaka poleg značke — nespremenjena */
.gt-hero-znacka-tick{ width:30px; height:8px; opacity:.55; flex-shrink:0; }

/* nagrada — brief: "Award: light / subtle green-cyan accent". Besedilo
   svetlo (na videu mora vzdržati tudi svetlejši kader), ikona v CGP
   limeti (zeleno-cian smer, ne nova barva), hover v cian. */
.gt-hero-nagrada{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:var(--sp-3); font-family:var(--fh); font-weight:600; font-size:13.5px;
  color:#cfe0ee; transition:color var(--dur-fast) var(--ease-premium);
}
.gt-hero-nagrada svg{ width:16px; height:16px; color:var(--lime); flex-shrink:0; }
.gt-hero-nagrada:hover, .gt-hero-nagrada:focus-visible{ color:var(--cyan); }

/* produktni video — 21. 9. 2026 (4. dopolnitev): kartica (".gt-hero-video-
   wrap"/".gt-hero-video" z border-radius/box-shadow/glow/micro-float)
   NADOMEŠČENA s polnozaslonskim ".gt-hero-video-stage" po vzoru
   ".hero-video-stage"/".hero-video" na `index.html` (glej tam in
   `css/pages.css`). Mobilno/tablično (≤960px) je to navaden tok-blok
   (isti "width:calc(100% - gutter*2)" trik kot na homepage, ker ta
   element ni znotraj `.wrap`, ampak njegov neposreden sosed); na
   namizju (≥961px) postane `position:absolute; inset:0` prekrivka za
   CEL `.gt-hero` — brez radija/sence/glow-a, ker ni več "kartica",
   ampak ozadje. Micro-float animacija odstranjena — smiselna je bila za
   diskreten produktni element, ne za polnozaslonsko ozadje. */
/* ── LAYER 0 — video kot ozadje CELE sekcije, na VSEH širinah. Brez
   kontejnerja, brez kartice, brez marginov, brez max-width, brez radija/
   sence. `.gt-hero` je edini pozicioniran prednik, zato `inset:0` pomeni
   natanko "od levega do desnega roba zaslona in od vrha do dna heroja".
   `pointer-events:none`, ker je to čista dekoracija — klike prejema samo
   vsebina (LAYER 10). ── */
.gt-hero-video-stage{
  position:absolute; inset:0; z-index:0;
  overflow:hidden; pointer-events:none;
  background:var(--navy-deep);
}
/* `cover` + nativno razmerje 2560×1080: video NIKOLI ni raztegnjen —
   prekomerno širino/višino kadra obreže, razmerja pa ne spremeni.
   `object-position:center center` je ista vrednost kot jo uporablja
   `.hero-video` na naslovnici (glej pages.css). */
.gt-hero-video{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:center center;
  background:transparent;
}
/* ozki zasloni: pri portretnem razmerju `cover` iz ultra-širokega
   2560×1080 vira pokaže samo ~30 % širine kadra. Pri privzetem
   `center` pade to okno na veliko temno ploskev zaslona naprave, ki
   brez konteksta izgleda kot abstrakten temen trikotnik. Objektna
   točka je zato pomaknjena desno (64 %) — tam so prezračevalne reže,
   rob ohišja in spodnji vogal, torej del kadra, v katerem se naprava
   PREPOZNA kot naprava. Vrednost je izbrana po primerjavi 40/52/64/74 %
   na dejanskem posnetku pri 390px, ne po občutku. Navpično ni obreza
   (višina kadra se natanko prilega), zato Y ostaja na sredini. */
@media (max-width:760px){
  .gt-hero-video{ object-position:64% center; }
}

/* tehnična črtna grafika — 3. dopolnitev ("FINAL PREMIUM REFINEMENT"):
   2 poti z zavoji (cyan, modra) namesto prejšnjih 3 ravnih linij ob
   robu okvirja + odstranjen dashed okvir/koordinatne oznake — prejšnja
   kombinacija je delovala kot dekorativen "L-oblikovan okvir", ne kot
   pravi tehnični vod. En zelen "accent" node sedi na koncu modre poti
   (ne lastna zelena linija — uporabnik: "ne povečuj več zelene").
   Poravnano na desno polovico (za produktno kartico), del poti A
   "izgine" pod produktom in se kot ločen segment "znova pojavi" na
   drugi strani (glej HTML). Elementi znotraj se ob nalaganju sami
   "izrišejo" (glej animacije spodaj); kontejner sam nosi svoj (zelo
   rahel) parallax "drift" ločen od hitrejšega premika produkta —
   glej data-parallax v HTML. */
.gt-hero-tech{
  /* top:calc(50% - polovica višine) namesto transform:translateY(-50%) —
     ta element zdaj nosi svoj data-parallax (glej HTML), motion.js pa
     parallax uveljavlja z direktnim prepisom `style.transform`, kar bi
     zbrisalo centrirni transform, če bi bil na istem elementu. */
  position:absolute; z-index:0; top:calc(50% - 280px); right:-4%; width:560px; height:560px;
  /* razdelek 5 (2. dopolnitev): linije naj bodo za ~10-20% bolj
     izpostavljene kot v prejšnjem krogu (.62→.70) — a ŠE VEDNO ultra-
     tanke/nizko-prosojne, zato dvig SAMO opacity, ne stroke-width. */
  opacity:.7; pointer-events:none;
}
.gt-hero-tech svg{ width:100%; height:100%; }
/* LAYER 2 — tehnika/ambient ležita NAD videom (z-index:2), a POD vsebino
   (z-index:10). Brief: "they may remain ABOVE the video very subtly...
   THE VIDEO MUST BE THE PRIMARY VISUAL" — zato ostajata nizko-prosojna
   in umeščena v desno/spodnjo polovico, stran od besedila. */
.gt-hero-tech, .gt-ambient-wrap{ z-index:2; }

/* ── uvodna "risanje se" animacija — počasna, nadzorovana, CSS/SVG-
   only (pathLength=1 trik: dashoffset 1→0 ne glede na dejansko
   dolžino poti). 4. dopolnitev (razdelek 3): trajanje podaljšano na
   ~2s (znotraj eksplicitno zahtevanega razpona 1.5-3s), stagger med
   potmi ohranjen (ne rišejo se vse hkrati). ── */
.gt-line{
  stroke-dasharray:1; stroke-dashoffset:1; opacity:0;
  animation:gtDrawLine 2s cubic-bezier(.4,0,.2,1) both;
}
.gt-line--cyan{ animation-delay:.6s; }
/* "reappear" segment (pot A2) se izriše malenkost pozneje — kot da
   nadaljuje pot A na drugi strani produkta */
.gt-line--cyan.gt-line--cyan-reappear{ animation-delay:1.6s; }
.gt-line--blue{ animation-delay:1.1s; }

.gt-node{
  opacity:0; transform-origin:center;
  animation:gtNodeIn .5s ease-out both;
}
.gt-node--cyan{ animation-delay:2.6s; filter:drop-shadow(0 0 3px rgba(23,185,236,.55)); }
.gt-node--blue{ animation-delay:3.1s; filter:drop-shadow(0 0 3px rgba(4,123,193,.5)); }
.gt-node--green{ animation-delay:3.3s; filter:drop-shadow(0 0 3px rgba(24,165,75,.5)); }
/* accent vozlišče: enak uvod kot ostala zelena, nato preide v zelo
   počasen neskončen utrip. 4. dopolnitev (razdelek 5, "NODE PULSE"):
   pulz zdaj eksplicitno vključuje TUDI opacity (.45→1→.45) in scale
   (1→1.15→1), ne samo drop-shadow kot prej — uporabnik je natančno
   specificiral to obliko, prejšnja različica (samo drop-shadow) je
   bila premalo opazna. Cikel 4.2s (znotraj zahtevanega razpona 3-5s). */
.gt-node.gt-node--accent{
  animation:gtNodeIn .5s ease-out 3.3s both, gtPulse 4.2s ease-in-out 4s infinite;
}
/* drugo, ločeno utripajoče vozlišče — DRUGAČEN cikel/zamik, da vsa
   vozlišča ne utripajo hkrati ("ne pulse-aj vseh nodes hkrati").
   Izbrano vozlišče poti A, kjer ta "izgine" pod produktom (235,180) —
   smiselna vizualna izbira (točka, kjer je nekaj vizualno "aktivnega"). */
.gt-node.gt-node--pulse2{
  animation:gtNodeIn .5s ease-out 2.6s both, gtPulse2 3.6s ease-in-out 5.5s infinite;
}
/* 8. 9. 2026 — "GLOBAL ANIMATED TECHNOLOGY BACKGROUND SYSTEM": tretji,
   ponovno uporabljen pulz na "reappear" vozlišču poti A2 (470,150) prek
   skupnega ".dpt-anim-pulse" razreda (depth-system.css razdelek 11,
   keyframe "dpt-node-pulse") namesto tretje bespoke gtPulse3 — a ker
   ".gt-node" (single-class, ta datoteka, naložena PO depth-system.css)
   sicer vedno zmaga nad ".dpt-anim-pulse" (single-class, prejšnja
   datoteka) pri enaki specifičnosti, je tu potreben ta majhen "sestavljen
   selektor" override (.gt-node.dpt-anim-pulse, specifičnost 0,0,2,0), da
   skupni razred dejansko prevzame `animation`. Isti vzorec kot
   ".gt-node--accent"/".gt-node--pulse2" zgoraj: uvodna "risanje se"
   animacija (isti zamik/trajanje kot prej, gtNodeIn 2.6s) + prehod v
   neskončen pulz (dpt-node-pulse, LASTNO trajanje/zamik 4.6s/3.3s, da
   NI sinhron z gtPulse/gtPulse2). prefers-reduced-motion ostane pokrit
   prek obstoječega ".gt-node{ animation:none !important }" spodaj
   (deluje ne glede na dodatne razrede na elementu). */
.gt-node.dpt-anim-pulse{
  animation:gtNodeIn .5s ease-out 2.6s both, dpt-node-pulse 4.6s ease-in-out 3.3s infinite;
}

/* ── "signal" — subtilna potujoča cyan pika po poti A (3. dopolnitev,
   razdelek 5): "en signal približno vsakih 8-12s, ne animiraj vseh
   linij hkrati". Čisto CSS (offset-path/offset-distance), NE SMIL —
   iz istega razloga kot povsod drugod v tej datoteki: SMIL animacije
   se ne dajo zanesljivo izklopiti prek prefers-reduced-motion, CSS
   animacije pa se (glej media query na dnu). `cx`/`cy` na elementu
   sta hkrati "izhodiščni" atribut ZA brskalnike brez podpore za
   offset-path na SVG elementih (redko, a možno) — v tem primeru pika
   preprosto obstane na začetku poti A namesto animirano potuje, kar
   je popolnoma neopazna, varna degradacija (izgleda kot še en node). */
.gt-signal{
  offset-path: path('M55 130H150V180H235');
  offset-rotate: 0deg;
  opacity:0; /* dokler animacija ne štarta (animation-delay), naj bo
                skrita — brez tega bi 3s pred prvim potovanjem stala
                vidna/prekrivala se s sosednjim cyan node-om */
  filter:drop-shadow(0 0 5px rgba(23,185,236,.85));
  /* 4. dopolnitev: cikel 10s→9s (znotraj zahtevanega razpona 6-10s),
     delež "potovanja" povečan (5-38 % cikla namesto 4-28 %, ~3.15s od
     9s), da je gib bolj opazen, ostanek cikla je premor. */
  animation: gtSignal 9s linear 3s infinite;
}
@keyframes gtSignal{
  0%{ offset-distance:0%; opacity:0; }
  5%{ opacity:1; }
  38%{ offset-distance:100%; opacity:1; }
  44%{ opacity:0; }
  100%{ offset-distance:100%; opacity:0; }
}

@keyframes gtDrawLine{ from{ stroke-dashoffset:1; opacity:0; } to{ stroke-dashoffset:0; opacity:.95; } }
@keyframes gtNodeIn{ from{ opacity:0; transform:scale(.4); } to{ opacity:1; transform:scale(1); } }
/* 4. dopolnitev (razdelek 5, "NODE PULSE"): natančno po specifikaciji
   — opacity .45→1→.45, scale 1→1.15→1. Dva ločena barvna varianta
   (zelena za accent node, cyan za drugi pulzirajoči node), različna
   trajanja/zamiki (glej ".gt-node--accent"/".gt-node--pulse2" zgoraj),
   da NISTA sinhrona. */
@keyframes gtPulse{
  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 gtPulse2{
  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)); }
}

/* ── ambientni "blob" sloji — LAYER 2/4 (cyan/blue ambient + green
   accent). Zunanji ".gt-ambient-wrap" nosi SAMO data-parallax (scroll),
   notranji ".gt-ambient" nosi SAMO neskončno "drift" animacijo — glej
   razlago v uvodnem komentarju datoteke, zakaj sta ločena. ── */
/* z-index:2 (LAYER 2) — nad videom, pod vsebino. To pravilo je v datoteki
   POZNEJE od skupnega ".gt-hero-tech, .gt-ambient-wrap{z-index:2}" zgoraj,
   zato mora vrednost nositi tudi tu, sicer (enaka specifičnost, poznejše
   pravilo zmaga) ambientni sloji padejo za video in so nevidni. */
.gt-ambient-wrap{ position:absolute; z-index:2; pointer-events:none; }
.gt-ambient{ position:absolute; inset:0; border-radius:50%; filter:blur(10px); }

/* 21. 9. 2026 — `top` približan navzdol (-120px→-40px): prejšnja kvadratna
   video-kartica je segala višje v hero, zato je bil cian oblak namerno
   postavljen bolj proti vrhu; novi, plitvejši video sedi bolj v sredini
   vrstice, oblak mu sledi (rahlo povečan, 440→480px, da ohrani vizualno
   prisotnost na širšem videu). */
.gt-ambient-wrap--cyan{ width:480px; height:480px; right:1%; top:-40px; }
.gt-ambient--cyan{
  /* 3. dopolnitev: "zelo malenkost bolj izrazit" (razdelek 3) */
  background:radial-gradient(circle, rgba(23,185,236,.21), transparent 70%);
  animation:gtDriftCyan 20s ease-in-out infinite;
}

.gt-ambient-wrap--blue{ width:470px; height:470px; right:-8%; top:24%; }
.gt-ambient--blue{
  background:radial-gradient(circle, rgba(4,123,193,.17), transparent 72%);
  filter:blur(16px);
  animation:gtDriftBlue 18s ease-in-out infinite; animation-delay:-9s;
}

.gt-ambient-wrap--green{ width:380px; height:380px; left:-6%; bottom:-140px; }
.gt-ambient--green{
  background:radial-gradient(circle, rgba(171,208,57,.21), transparent 70%);
  animation:gtDriftGreen 24s ease-in-out infinite; animation-delay:-14s;
}

/* 4. dopolnitev ("MOTION IMPLEMENTATION FIX", razdelek 1): amplitude
   POVEČANE na eksplicitno zahtevane razpone — prejšnja različica
   (16-30px) je bila tehnično animirana in izmerjena v Playwright, a
   uporabnik je poročal, da premika s prostim očesom ni zaznal. Cyan/
   modra zdaj ~30-70px kombiniranega premika (16-22s), zelena ~25-60px
   (20-28s), vsaka svoja smer + negativni zamik, da cikli niso
   sinhroni. Samo transform (translate+scale) — GPU-prijazno, brez
   layout lastnosti, brez canvas/WebGL. */
@keyframes gtDriftCyan{
  0%, 100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(-34px,46px,0) scale(1.07); }
}
@keyframes gtDriftBlue{
  0%, 100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(30px,-40px,0) scale(1.06); }
}
@keyframes gtDriftGreen{
  0%, 100%{ transform:translate3d(0,0,0) scale(1); opacity:1; }
  50%{ transform:translate3d(46px,-26px,0) scale(.94); opacity:.9; }
}

/* 21. 9. 2026 (5. dopolnitev) — mobilno/tablično: postavitev je zdaj
   KONCEPTUALNO ENAKA kot na namizju (video ozadje + besedilo čezenj),
   spremenita se le smer prelivа (navpičen namesto vodoravnega, glej
   ".gt-hero::after" zgoraj) in objektna točka videa (glej
   ".gt-hero-video" zgoraj). Nobenega preklopa postavitve ni več.
   ".gt-hero-tech" ostaja skrita ≤960px — na polni mobilni širini je ta
   560×560 grafika segala pod besedilni blok in je bila ob "lead"
   odstavku vidna kot naključna črta (preverjeno vizualno v 4. krogu);
   brief za mobilno tudi izrecno daje prednost berljivosti besedila in
   vidnosti naprave pred dekoracijo. Ambientni "blob" sloji ostanejo. */
@media (max-width:960px){
  .gt-hero-tech{ display:none; }
}
@media (max-width:760px){
  /* zmanjšaj ambientno svetlobo na ožjih zaslonih */
  .gt-ambient-wrap--cyan{ width:280px; height:280px; }
  .gt-ambient-wrap--blue{ display:none; }
  .gt-ambient-wrap--green{ width:240px; height:240px; }
}
@media (max-width:600px){
  .gt-hero{ padding:var(--sp-5) 0; }
}

/* prefers-reduced-motion — vse animacije izklopljene, elementi so
   takoj v svojem "končnem" stanju (brief razdelek 16, ter razdelek 8
   drugega brief-a: "ustavi ambient movement", ter razdelek 11 tretjega
   brief-a: "izklopi ambient movement, signal animation IN parallax");
   parallax je ločeno že globalno izklopljen v js/motion.js. */
@media (prefers-reduced-motion: reduce){
  .gt-line, .gt-node,
  .gt-ambient--cyan, .gt-ambient--blue, .gt-ambient--green{ animation:none !important; }
  .gt-line{ stroke-dashoffset:0; opacity:.95; }
  .gt-node{ opacity:1; transform:none; }
  /* "signal" pika: pri statičnem ozadju bi mirujoča pika sredi poti
     izgledala kot naključna napaka, zato jo raje popolnoma skrijemo
     namesto samo ustaviti animacijo */
  .gt-signal{ animation:none !important; opacity:0 !important; }
  /* .gt-node{animation:none !important} zgoraj že izklopi oba "pulse"
     node-a (accent + nov "pulse2"), .gt-node{opacity:1} pa poskrbi, da
     ostaneta polno vidna namesto obtičati na vmesni (.45) vrednosti.
     21. 9. 2026: ".gt-hero-video" ni več v seznamu — micro-float
     animacija je odstranjena skupaj s staro video-kartico (glej zgoraj),
     polnozaslonski video zdaj nima svoje animacije za izklopiti. */
}

/* ─── 8. 9. 2026 — "ADD VISUAL DEPTH TO LIGHT PAGES" (telo strani) ────
   Ta datoteka ostaja rezervirana SAMO za ".gt-" hero, ki je najstarejša
   in najbolj dovršena referenca za celoten depth-sistem — hero zato
   NAMENOMA ni dobil nobene nove ".dpt-*" primitive od zgoraj. Sekcije
   POD herojem ("Zakaj lasten sistem", "Naprava") so dobile depth-
   dekoracijo neposredno v `blagajna-greentill.html` prek skupnih
   ".dpt-field/.dpt-line/.dpt-grid/.dpt-card" primitiv iz nove
   `depth-system.css` (vključene tik pred to datoteko), v GreenTill-ovi
   lastni cyan+zeleni paleti (nikoli obe barvi v isti sekciji) — brez
   sprememb tukaj, ker so vsi potrebni razredi (".bm-zakoga-kartica" itd.)
   že v `blagajna-modeli.css`, ki ga ta datoteka namerno ne podvaja.
   Različica datoteke je zgolj bump-ana (v5→v6) zaradi cache-busting po
   spremembi <head> vrstnega reda v HTML (dodan depth-system.css link). */

/* ─── 17. 9. 2026 — "VEČ TEMNEGA KONTRASTA (GreenTill sme)" popravek ───
   Aleš: prejšnja svetla/MID prenova je bila prevečkrat enaka ostalim
   stranem — GreenTill je edini LASTEN razvoj (flagship hardver) in sme
   imeti VEČ pravega temnega/steel kontrasta kot druge strani (glej
   depth-system.css razdelek 13, "PAGE-SPECIFIC" opomba: "blagajna-greentill
   → SME imeti VEČ temnega kontrasta kot druge strani — kovinsko/circuit/
   product lighting"). Ta datoteka je bila prej NAMENOMA rezervirana samo za
   hero (glej opombo zgoraj) — ta majhna dopolnitev je edina upravičena
   izjema, ker gre za 2. od dveh dovoljenih temnih/steel trenutkov na tej
   strani (1. je bil prej hero produktni panel, ".gt-ambient-navy" — ta je
   21. 9. 2026 odstranjena, ker je hero sam POSTAL temen, glej zgoraj), ne za nov
   vzporeden dekorativni sistem: samo EN page-specific override (gradient
   namesto ravne barve) na skupnem ".on-steel" razredu (depth-system.css),
   po dokumentiranem receptu "13. STRONG/DARK SEKCIJA Z GLOBINO" (gradient
   med sosednjima toniloma iste družine namesto ravne barve, za globino brez
   nove barve). Vse ostalo za to sekcijo (2 barvna ambientna polja, delni
   grid, krogotok "tone-strong", ".on-steel" na eyebrow) je v
   `blagajna-greentill.html` samem, prek že obstoječih skupnih ".dpt-*"/
   ".circuit-field" primitiv — brez podvajanja tukaj. */
#naprava.on-steel{
  background:linear-gradient(165deg, var(--steel) 0%, var(--steel-deep) 68%, var(--navy-deep) 100%);
}