/* ═══════════════════════════════════════════════════════════════════════
   SALESI — domača stran, avgust 2026
   Nalaga se samo na naslovnici (glej functions.php). Vsi razredi imajo
   predpono d26- in vsa pravila stojijo pod .domov26, da se slog ne zaleti
   z obstoječim slog.css, ki uporablja ista imena (.hero, .display, .ovoj,
   .znamke, .gumb, .naslov). Odstranitev te datoteke vrne staro naslovnico.

   Paleta indigo in meta iz priročnika znamke, razmerje 88 / 10 / 2.
   Pisava je Manrope, ki jo tema že nalaga. Ena sama družina; stran nosi
   razpon teže od 200 do 800, ne druga pisava.
   ═══════════════════════════════════════════════════════════════════════ */

.domov26{
  --d26-papir:#F7F7F8;
  --d26-bela:#FFFFFF;
  --d26-plast:#EEEEF0;
  --d26-crnilo:#141516;
  --d26-crnilo-2:#4E5054;
  --d26-crnilo-3:#64666A;
  --d26-crta:#DDDEE0;
  --d26-crta-2:#C3C4C7;

  --d26-indigo-950:#0B1034;
  --d26-indigo-800:#27327B;
  --d26-indigo-700:#37459B;
  --d26-indigo-600:#4A5CBA;
  --d26-indigo-300:#AFC1FF;
  --d26-indigo-050:#EEF0FA;

  /* Meta v dveh vlogah. Živa je za drobne oznake (črtice, pike, poteze),
     bleda pa za ploskve, ki nosijo besedilo: badge v heroju, gumb na temni
     ploskvi. Bleda meta s črnilom #0B1034 doseže 15,7 : 1. */
  --d26-meta:#65E68C;
  --d26-meta-bleda:#CFF6DC;
  --d26-meta-bleda-hover:#B6EFC9;

  --d26-rob:clamp(22px,5vw,72px);
  --d26-max:1240px;
  --d26-lah:cubic-bezier(.22,.61,.36,1);

  background:var(--d26-papir);
  color:var(--d26-crnilo);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
}

.domov26 img,.domov26 svg{display:block;max-width:100%}
.domov26 a{color:inherit;text-decoration:none}
.domov26 :focus-visible{outline:2px solid var(--d26-indigo-700);outline-offset:3px;border-radius:3px}

.domov26 .d26-ovoj{
  width:100%;max-width:var(--d26-max);margin-inline:auto;
  padding-inline:var(--d26-rob);
}

/* ── tipografija ────────────────────────────────────────────────────── */
.domov26 .d26-h2{
  --d26-fs:clamp(27px,3.6vw,46px);
  font-size:calc(var(--d26-fs) * var(--vel,1));font-weight:280;
  color:var(--barva,inherit);
  line-height:1.08;letter-spacing:-.028em;text-wrap:balance;max-width:20ch;
}
.domov26 .d26-vodilo{
  --d26-fs:clamp(17px,1.5vw,20px);
  font-size:calc(var(--d26-fs) * var(--vel,1));line-height:1.6;font-weight:350;
  color:var(--barva,var(--d26-crnilo-2));max-width:56ch;
}
.domov26 p{
  --d26-fs:17px;
  color:var(--barva,var(--d26-crnilo-2));max-width:62ch;
  font-size:calc(var(--d26-fs) * var(--vel,1));
}
.domov26 strong{color:var(--d26-crnilo);font-weight:600}
.domov26 h3{font-size:19px;font-weight:600;letter-spacing:-.01em;line-height:1.35}

.domov26 .d26-oznaka{
  --d26-fs:11.5px;
  font-size:calc(var(--d26-fs) * var(--vel,1));
  font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--barva,var(--d26-crnilo-3));
}
.domov26 .d26-oznaka b{color:var(--barva,var(--d26-indigo-700));font-weight:700}

/* ── odsek z umerjevalno črtico ─────────────────────────────────────── */
.domov26 .d26-odsek{padding-block:clamp(56px,8vw,120px);position:relative}
.domov26 .d26-odsek + .d26-odsek{padding-top:0}
.domov26 .d26-glava{
  display:flex;align-items:center;gap:16px;
  margin-bottom:clamp(24px,3vw,40px);
}
.domov26 .d26-glava::before{
  content:"";width:9px;height:9px;flex:none;
  background:var(--d26-meta);border-radius:1px;
}
.domov26 .d26-glava::after{content:"";flex:1;height:1px;background:var(--d26-crta)}

/* ── gumbi ──────────────────────────────────────────────────────────── */
/* Poziv na svetli ploskvi je indigo z belim besedilom (5,97 : 1), na temni
   pa bleda meta s temnim besedilom (15,7 : 1). Živa meta kot polna ploskev
   pod besedilom je na papirju delovala kot bonbon, ne kot medicinska znamka. */
.domov26 .d26-gumb{
  display:inline-flex;align-items:center;gap:11px;
  min-height:54px;padding:0 30px;border-radius:10px;
  font-size:15px;font-weight:700;letter-spacing:.005em;
  background:var(--d26-indigo-600);color:#FFFFFF;
  transition:background 240ms var(--d26-lah);
}
.domov26 .d26-gumb:hover{background:var(--d26-indigo-700)}
.domov26 .d26-gumb svg{width:15px;height:15px;flex:none}
.domov26 .d26-gumb--bela{background:var(--d26-meta-bleda);color:var(--d26-indigo-950)}
.domov26 .d26-gumb--bela:hover{background:var(--d26-meta-bleda-hover)}
/* Napis v gumbu je svoje urejljivo polje, zato stopnjo in barvo nosi span
   in ne sidro: brez tega bi mnozitelj na spanu ostal brez ucinka. */
.domov26 .d26-gumb span{
  --d26-fs:15px;
  font-size:calc(var(--d26-fs) * var(--vel,1));
  color:var(--barva,inherit);
}

/* ═══ HERO ══════════════════════════════════════════════════════════
   Hero zasede cel zaslon in je navpično sredinjen. Stopnje pisave rastejo
   po širini IN po višini okna (min(vw,vh)), zato se na nizkih zaslonih
   naslov sam pomanjša in poziv ostane viden brez drsenja. */
.domov26 .d26-hero{
  min-height:100vh;
  min-height:100svh;
  display:flex;flex-direction:column;align-items:stretch;
  padding-top:calc(100px + clamp(18px,4vh,48px));
  padding-bottom:clamp(28px,6vh,72px);
}
@media (max-width:1100px){
  .domov26 .d26-hero{padding-top:calc(76px + clamp(14px,3vh,36px))}
}
.domov26 .d26-hero > .d26-ovoj{width:100%;margin-block:auto}

/* Nadnaslov v heroju je ploščica v bledi meti, ne le drobno sivo besedilo.
   Ekskluzivno zastopstvo je prodajni argument in si zasluži svojo ploskev. */
.domov26 .d26-hero .d26-oznaka{
  display:inline-block;margin-bottom:clamp(18px,3vh,38px);
  padding:8px 14px;border-radius:7px;
  background:var(--d26-meta-bleda);color:var(--barva,var(--d26-indigo-950));
  letter-spacing:.14em;
}
.domov26 .d26-hero .d26-oznaka b{color:var(--barva,var(--d26-indigo-950))}

/* Za herojem ni potrebe po polnem razmiku; naslednji razdelek se začne prej. */
.domov26 .d26-hero + .d26-odsek{padding-top:clamp(40px,7vh,88px)}

/* Dvostopenjski naslov. Kategorija stoji zgoraj kot uvod, največjo stopnjo
   pa dobi trditev pod njo: »medicinska oprema« zna napisati vsak uvoznik,
   »za natančno diagnostiko in boljšo obravnavo« pa pove, čemu služi. */
.domov26 .d26-naslov{margin-bottom:clamp(18px,3vh,26px)}
/* Nadnaslov je oznaka in ne drugi naslov. Velika stopnja je tekmovala s
   trditvijo pod njo in stopnji sta se izenacili; drobne velike crke s sirokim
   razmikom pa trditev napovejo in ji ne jemljejo teze. */
.domov26 .d26-uvod{
  display:block;margin-bottom:clamp(12px,1.8vh,20px);
  --d26-fs:clamp(11.5px,min(.92vw,1.5vh),13.5px);
  font-size:calc(var(--d26-fs) * var(--vel,1));font-weight:700;
  line-height:1.3;letter-spacing:.24em;text-transform:uppercase;
  color:var(--barva,var(--d26-indigo-700));
}
.domov26 .d26-trditev{
  display:block;
  --d26-fs:clamp(34px,min(5.6vw,9vh),72px);
  font-size:calc(var(--d26-fs) * var(--vel,1));font-weight:320;
  line-height:1.0;letter-spacing:-.038em;color:var(--barva,var(--d26-crnilo));
  max-width:19ch;
}
.domov26 .d26-hero .d26-vodilo{
  --d26-fs:clamp(17px,min(1.35vw,2.6vh),22px);
  font-size:calc(var(--d26-fs) * var(--vel,1));
  line-height:1.62;max-width:52ch;
  margin-bottom:clamp(22px,4vh,36px);
}
.domov26 .d26-hero-akcije{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.domov26 .d26-telefon{
  display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:0 6px;
  font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--d26-crnilo);
  transition:color 240ms var(--d26-lah);
}
.domov26 .d26-telefon:hover{color:var(--d26-indigo-700)}
.domov26 .d26-telefon span{
  --d26-fs:17px;
  font-size:calc(var(--d26-fs) * var(--vel,1));
  color:var(--barva,inherit);
}
.domov26 .d26-telefon svg{width:16px;height:16px;color:var(--d26-indigo-700)}

/* ═══ KDO JE SALESI ═════════════════════════════════════════════════ */
.domov26 .d26-oseba{
  display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);
  gap:clamp(28px,5vw,72px);align-items:start;
}
@media (max-width:900px){.domov26 .d26-oseba{grid-template-columns:1fr}}

/* Mesto za portret. Do fotografije stoji tu ploskev v najnežnejšem indigu
   z znakom v mehki meti. Brez napisa, da za obiskovalca deluje kot del
   znamke in ne kot nedokončano mesto. Ko fotografija pride, se v .d26-portret
   vstavi <img> in ta plošča odpade sama. */
.domov26 .d26-portret{
  aspect-ratio:4/5;border-radius:14px;overflow:hidden;
  background:var(--d26-indigo-050);border:1px solid #DFE4F6;
  display:flex;align-items:center;justify-content:center;padding:18%;
}
.domov26 .d26-portret img{width:100%;height:100%;object-fit:cover}
.domov26 .d26-portret svg{width:100%;height:auto;fill:var(--d26-meta);opacity:.55}

.domov26 .d26-ime{
  --d26-fs:clamp(24px,2.4vw,31px);
  font-size:calc(var(--d26-fs) * var(--vel,1));font-weight:400;letter-spacing:-.025em;
  line-height:1.1;margin-bottom:6px;color:var(--barva,var(--d26-crnilo));max-width:none;
}
.domov26 .d26-vloga{
  --d26-fs:14.5px;
  font-size:calc(var(--d26-fs) * var(--vel,1));
  color:var(--barva,var(--d26-crnilo-3));margin-bottom:24px;
}
.domov26 .d26-oseba p + p{margin-top:16px}

.domov26 .d26-podrocja{
  list-style:none;margin:28px 0 0;padding:24px 0 0;
  display:flex;flex-wrap:wrap;gap:8px;
  border-top:1px solid var(--d26-crta);
}
.domov26 .d26-podrocja li{
  --d26-fs:13px;
  font-size:calc(var(--d26-fs) * var(--vel,1));
  font-weight:500;color:var(--barva,var(--d26-crnilo-2));
  padding:8px 14px;border:1px solid var(--d26-crta);border-radius:999px;
  background:var(--d26-bela);
}

/* ═══ NAČIN DELA ════════════════════════════════════════════════════ */
.domov26 .d26-nacin{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,80px);align-items:start;
}
@media (max-width:900px){.domov26 .d26-nacin{grid-template-columns:1fr;gap:32px}}
.domov26 .d26-vrstice{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.domov26 .d26-vrstice li{
  --d26-fs:16.5px;
  position:relative;padding:18px 0 18px 23px;
  border-bottom:1px solid var(--d26-crta);
  font-size:calc(var(--d26-fs) * var(--vel,1));
  line-height:1.5;color:var(--barva,var(--d26-crnilo));
}
.domov26 .d26-vrstice li:first-child{border-top:1px solid var(--d26-crta)}
.domov26 .d26-vrstice li::before{
  content:"";position:absolute;left:0;top:calc(18px + .62em);
  width:7px;height:7px;border-radius:50%;background:var(--d26-indigo-600);
}

/* ═══ ZAUPANJE ══════════════════════════════════════════════════════
   Edini glasen trenutek na strani. Nosi ga tipografija, ne logotipi in
   ne števci: naštevanje ustanov ali številk bi zvenelo kot dokazovanje,
   mirna trditev na polni ploskvi pa kot dejstvo. */
.domov26 .d26-zaupanje{
  background:var(--d26-indigo-950);color:var(--d26-papir);
  padding-block:clamp(56px,8vw,104px);
  margin-block:clamp(40px,6vw,88px);
}
.domov26 .d26-zaupanje .d26-glava::after{background:rgba(255,255,255,.16)}
.domov26 .d26-zaupanje .d26-oznaka{color:var(--barva,var(--d26-indigo-300))}
.domov26 .d26-zaupanje .d26-h2{color:var(--barva,var(--d26-papir));max-width:17ch}
.domov26 .d26-zaupanje p{
  --d26-fs:clamp(17px,1.5vw,20px);
  color:var(--barva,rgba(255,255,255,.80));
  font-size:calc(var(--d26-fs) * var(--vel,1));
  font-weight:350;line-height:1.6;max-width:56ch;margin-top:22px;
}

/* Pas ustanov. Velike črke, širok razmik, metina pika med njimi:
   isti jezik kot oznake na merilniku. */
.domov26 .d26-ustanove{
  list-style:none;
  margin:clamp(40px,5vw,72px) 0 0;
  padding:clamp(22px,2.6vw,32px) 0;
  border-top:1px solid rgba(255,255,255,.16);
  border-bottom:1px solid rgba(255,255,255,.16);
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(12px,1.6vw,22px);
}
.domov26 .d26-ustanove li{
  display:inline-flex;align-items:center;gap:clamp(12px,1.6vw,22px);
  --d26-fs:clamp(13px,1.35vw,17px);
  font-size:calc(var(--d26-fs) * var(--vel,1));font-weight:300;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--barva,var(--d26-papir));line-height:1.5;
}
.domov26 .d26-ustanove li:not(:last-child)::after{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--d26-meta);flex:none;
}

/* ═══ OSEBNI PRISTOP ════════════════════════════════════════════════ */
.domov26 .d26-zaveza{
  --d26-fs:clamp(26px,3.4vw,44px);
  font-size:calc(var(--d26-fs) * var(--vel,1));font-weight:250;line-height:1.15;
  letter-spacing:-.03em;color:var(--barva,var(--d26-crnilo));max-width:19ch;
  padding-left:clamp(18px,2vw,28px);border-left:3px solid var(--d26-meta);
  margin-block:clamp(28px,3.5vw,44px);
}
.domov26 .d26-pristop{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,80px);
}
@media (max-width:900px){.domov26 .d26-pristop{grid-template-columns:1fr;gap:26px}}
.domov26 .d26-pristop ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin:0;padding:0}
.domov26 .d26-pristop li{
  --d26-fs:16.5px;
  position:relative;padding-left:24px;line-height:1.55;
  font-size:calc(var(--d26-fs) * var(--vel,1));
  color:var(--barva,var(--d26-crnilo-2));
}
.domov26 .d26-pristop li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:11px;height:1.5px;background:var(--d26-indigo-600);
}

/* ═══ UVEDBA ════════════════════════════════════════════════════════ */
.domov26 .d26-uvedba{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(28px,5vw,72px);align-items:center;
  background:var(--d26-indigo-050);border-radius:16px;
  padding:clamp(28px,4vw,60px);
}
@media (max-width:900px){.domov26 .d26-uvedba{grid-template-columns:1fr}}
.domov26 .d26-uvedba .d26-h2{max-width:17ch;margin-bottom:20px}
.domov26 .d26-uvedba p{max-width:52ch}
.domov26 .d26-uvedba .d26-slika{
  display:flex;align-items:center;justify-content:center;
  padding:clamp(10px,2vw,26px);
}
.domov26 .d26-uvedba .d26-slika img{max-height:320px;width:auto;object-fit:contain}

/* ═══ PROIZVAJALCI ══════════════════════════════════════════════════
   Premikajoč trak, ne mreža. Logotipi imajo razmerja od 7,4 : 1 do 0,8 : 1,
   zato napis beremo po VIŠINI ČRK in znak po celotni velikosti: vsak dobi
   svojo višino v ozkem pasu 24 do 34 px, ne skupne škatle. Vsi so v isti
   črni pri isti motnosti, da nobeden ne izstopa in nobeden ne izgine.
   Trak je podvojen; ko prva polovica odpotuje, druga stoji na njenem mestu. */
.domov26 .d26-trak{
  position:relative;overflow:hidden;
  padding-block:clamp(30px,3.6vw,46px);
  border-block:1px solid var(--d26-crta);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.domov26 .d26-tir{
  display:flex;align-items:center;width:max-content;
  animation:d26-potuj 46s linear infinite;
}
.domov26 .d26-trak:hover .d26-tir{animation-play-state:paused}
@keyframes d26-potuj{
  from{transform:translateX(-50%)}
  to{transform:translateX(0)}
}
.domov26 .d26-pol{display:flex;align-items:center;flex:none}
.domov26 .d26-znamka{
  display:flex;align-items:center;justify-content:center;flex:none;
  padding-inline:clamp(30px,3.6vw,62px);
}
.domov26 .d26-znamka img{
  width:auto;max-width:150px;
  filter:brightness(0);opacity:.6;
  transition:opacity 240ms var(--d26-lah);
}
.domov26 .d26-znamka:hover img{opacity:1}

/* Znaki (kvadratni) nosijo večjo višino kot napisi, ker se napis bere po
   višini črk, znak pa po celotni ploskvi. Zgornja meja širine poskrbi,
   da dolg napis ne prevlada nad znaki ob sebi. */
.domov26 .d26-znamka[data-z="lepu"]      img{height:38px}   /* znak */
.domov26 .d26-znamka[data-z="zarys"]     img{height:38px}   /* znak */
.domov26 .d26-znamka[data-z="elinkcare"] img{height:36px}   /* znak */
.domov26 .d26-znamka[data-z="ulma"]      img{height:30px}   /* znak in napis */
/* FL Medical je risan z obrisi. Logotip je zdaj tesno obrezan, brez bele
   meglice okoli napisa, zato je pri isti višini bistveno večji kot prej. */
.domov26 .d26-znamka[data-z="flmedical"] img{height:20px}
.domov26 .d26-znamka[data-z="gima"]      img{height:22px}   /* znak in napis */
.domov26 .d26-znamka[data-z="multix"]    img{height:20px}
.domov26 .d26-znamka[data-z="kawe"]      img{height:27px}   /* napis */
.domov26 .d26-znamka[data-z="getein"]    img{height:25px}   /* napis */
.domov26 .d26-znamka[data-z="sorimex"]   img{height:22px}   /* napis */

@media (max-width:700px){
  .domov26 .d26-znamka{padding-inline:26px}
  .domov26 .d26-znamka img{height:26px !important}
  .domov26 .d26-znamka[data-z="sorimex"] img{height:20px !important}
  .domov26 .d26-znamka[data-z="flmedical"] img{height:18px !important}
  .domov26 .d26-znamka[data-z="gima"] img{height:20px !important}
  .domov26 .d26-znamka[data-z="multix"] img{height:18px !important}
}
@media (prefers-reduced-motion:reduce){
  .domov26 .d26-tir{animation:none;transform:translateX(-50%)}
}

.domov26 .d26-kategorije{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(26px,3vw,40px)}
.domov26 .d26-kategorije a{
  font-size:14px;font-weight:600;color:var(--d26-indigo-700);
  padding:11px 18px;border:1px solid var(--d26-indigo-600);border-radius:999px;
  transition:background 240ms var(--d26-lah), color 240ms var(--d26-lah);
}
.domov26 .d26-kategorije a:hover{background:var(--d26-indigo-700);color:#FFFFFF}

/* ═══ ZAKLJUČEK ═════════════════════════════════════════════════════ */
/* Zaključna ploskev je skoraj črn indigo, ne srednji. Temnejša podlaga da
   bledi meti na gumbu polno moč in loči zaključek od pasu Zaupanje zgoraj. */
.domov26 .d26-konec{
  background:var(--d26-indigo-950)
    radial-gradient(120% 150% at 88% 6%, var(--d26-indigo-800) 0%, transparent 62%);
  color:var(--d26-papir);border-radius:18px;
  padding:clamp(30px,5vw,72px);
}
.domov26 .d26-konec .d26-h2{color:var(--barva,var(--d26-papir));max-width:16ch;margin-bottom:20px}
.domov26 .d26-konec p{
  --d26-fs:18px;
  color:var(--barva,rgba(255,255,255,.80));
  font-size:calc(var(--d26-fs) * var(--vel,1));font-weight:350;max-width:50ch;
}
.domov26 .d26-akcije{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;margin-top:34px}
.domov26 .d26-stik{
  display:inline-flex;align-items:center;gap:10px;min-height:54px;
  font-size:16.5px;font-weight:600;color:var(--d26-papir);
  transition:color 240ms var(--d26-lah);
}
.domov26 .d26-stik:hover{color:var(--d26-meta)}
.domov26 .d26-stik span{
  --d26-fs:16.5px;
  font-size:calc(var(--d26-fs) * var(--vel,1));
  color:var(--barva,inherit);
}
.domov26 .d26-stik svg{width:16px;height:16px;flex:none}
.domov26 .d26-podpis{
  display:flex;align-items:center;gap:14px;
  margin-top:clamp(30px,4vw,46px);padding-top:26px;
  border-top:1px solid rgba(255,255,255,.18);
}
.domov26 .d26-podpis .d26-krog{
  width:52px;height:52px;border-radius:12px;flex:none;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.20);
  display:flex;align-items:center;justify-content:center;padding:12px;
}
.domov26 .d26-podpis .d26-krog svg{width:100%;height:auto;fill:var(--d26-meta);opacity:.85}
.domov26 .d26-podpis .d26-p-ime{font-size:16px;font-weight:600;color:var(--d26-papir)}
.domov26 .d26-podpis .d26-p-kdo{
  --d26-fs:13.5px;
  font-size:calc(var(--d26-fs) * var(--vel,1));
  color:var(--barva,var(--d26-indigo-300));
}

@media (prefers-reduced-motion:reduce){
  .domov26 *{transition:none !important}
}


/* ── Pomožni razredi namesto vgrajenih slogov v predlogi ───────────── */
.domov26 .d26-h2--zracen{margin-bottom:clamp(26px,3.5vw,48px)}
.domov26 .d26-razmik{margin-top:16px}

/* Ko je portret prava fotografija, odmik odpade in slika zapolni okvir. */
.domov26 .d26-portret:has(img){padding:0}

/* ── Trak proizvajalcev na metini ploskvi ──────────────────────────────
   Predstavitev zastopstev je edino mesto, kjer meta pokrije celo širino.
   Bleda meta zato, ker ploskev nosi logotipe in mora ostati mirna; živa bi
   pri tej višini prevpila vse okoli sebe. Logotipi so v isti črni pri
   motnosti 0,62, kar na tej podlagi da najmanj 4,9 : 1. */
.domov26 .d26-trak{
  background:var(--d26-meta-bleda);
  border-block-color:#B6EFC9;
  margin-block:clamp(6px,1vw,14px);
}
.domov26 .d26-znamka img{opacity:.62}
.domov26 .d26-znamka:hover img{opacity:1}


/* Pri veliki stopnji (urejevalnik dovoli do 400 %) dolga beseda ne sme uiti
   čez rob; ovoj se prelomi, namesto da bi stran dobila vodoravno drsenje. */
.domov26 [data-ur-vel]{overflow-wrap:break-word;word-break:break-word}


/* ═══════════════════════════════════════════════════════════════════════
   HERO — temna izvedba, 26. avgust 2026
   Prvi zaslon je edini del naslovnice na temni ploskvi. Plasti od zadaj:

     0   preliv na .d26-hero
    -3   indigo bloom, levo zgoraj
    -2   znak SALESI kot vektorska maska
    -1   vinjeta, ki zbere pozornost na besedilo
     0   vsebina

   .d26-hero ustvari sklad z isolation:isolate, zato negativne plasti ostanejo
   znotraj heroja in ne uidejo pod sosednje razdelke.

   #171F55 ni nova barva: je sredina med #0B1034 in #27327B, torej
   interpolacija dveh barv iz zaklenjene palete.
   ═══════════════════════════════════════════════════════════════════════ */
.domov26 .d26-hero{
  position:relative;isolation:isolate;overflow:hidden;
  /* Tri plasti namesto ene poteze. Dve mehki svetlobi dasta ploskvi globino,
     ravna linearna poteza pa je bila ploscata. Vse tri barve so iz palete,
     #131A46 je interpolacija med #0B1034 in #27327B. */
  background:
    radial-gradient(120% 90% at 78% 8%,  rgba(74,92,186,.55) 0%, transparent 58%),
    radial-gradient(90% 70% at 12% 96%,  rgba(39,50,123,.60) 0%, transparent 62%),
    linear-gradient(168deg, #0B1034 0%, #131A46 46%, #0B1034 100%);
  color:#FFFFFF;
}

/* 1 · ozracje. Svetloba se dviga z dna, ne pada z vrha: pogled tako potuje
   proti besedilu in ne stran od njega. Metina svetloba je pri 13 odstotkih,
   torej komaj zaznavna, in je edina barvna nota v ozadju. */
.domov26 .d26-hero::before{
  content:"";position:absolute;z-index:-3;
  inset:auto -10% -22% -10%;height:62%;
  background:
    radial-gradient(60% 100% at 30% 100%, rgba(175,193,255,.20) 0%, transparent 70%),
    radial-gradient(50% 100% at 74% 100%, rgba(101,230,140,.13) 0%, transparent 72%);
  filter:blur(42px);
  animation:d26-bloom 26s ease-in-out infinite;
}

/* 2 · znak kot maska. Namesto ploske metine silhuete pri 7 odstotkih je zdaj
   preliv iz mete v indigo, zabrisan in pri 28 odstotkih. Zaradi zabrisa je
   kljub visji motnosti mirnejsi kot ostra silhueta: oko ga bere kot svetlobo
   in ne kot nalepko. */
.domov26 .d26-znak{
  position:absolute;z-index:-2;pointer-events:none;
  background:linear-gradient(150deg,
    var(--d26-meta) 0%, var(--d26-meta-bleda) 46%, var(--d26-indigo-600) 100%);
  opacity:.28;filter:blur(2.4px);
  -webkit-mask-image:url("zig-ploski.svg");
          mask-image:url("zig-ploski.svg");
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  animation:d26-znak 48s ease-in-out infinite;
  /* Velikost in polozaj sta nize, pri pravilu o desnem robu. */
}

/* 3 · zrno. Ploskev brez zrna je videti kot izvoz iz programa, z zrnom pa
   kot tisk. Vzorec je 180 px in se ponavlja, zato ne obremeni nalaganja.
   Nacin overlay pomeni, da zrno posvetli temna mesta in potemni svetla,
   torej ne zmanjsa razmerja med besedilom in podlago. */
.domov26 .d26-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='z'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23z)'/></svg>");
}

@keyframes d26-bloom{
  0%,100%{transform:translate3d(-4%,-2%,0) scale(1)}
  50%    {transform:translate3d(6%,4%,0) scale(1.18)}
}
@media (prefers-reduced-motion:reduce){
  .domov26 .d26-hero::before,.domov26 .d26-znak{animation:none}
}

/* ── besedilo na temni ploskvi ──────────────────────────────────────
   Znacka ostane bleda meta s crnilom; na temnem doseze 15,7 : 1. */
.domov26 .d26-hero .d26-uvod{color:var(--barva,var(--d26-indigo-300))}
.domov26 .d26-hero .d26-trditev{color:var(--barva,#FFFFFF)}
.domov26 .d26-hero .d26-vodilo{color:var(--barva,rgba(255,255,255,.88))}
.domov26 .d26-hero .d26-telefon{color:#FFFFFF}
.domov26 .d26-hero .d26-telefon svg{color:var(--d26-meta)}
.domov26 .d26-hero .d26-telefon:hover{color:var(--d26-meta)}
/* Poziv na temni podlagi je bleda meta, tako kot povsod drugod. */
.domov26 .d26-hero .d26-gumb{background:var(--d26-meta-bleda);color:var(--d26-indigo-950)}
.domov26 .d26-hero .d26-gumb:hover{background:var(--d26-meta-bleda-hover)}
.domov26 .d26-hero :focus-visible{outline-color:var(--d26-meta)}

/* ── glava nad temnim herojem ───────────────────────────────────────
   Ta datoteka se nalozi samo na naslovnici, zato smejo pravila seci tudi
   izven .domov26. Vrednosti so izpisane kot stevilke in ne kot zetoni:
   zetoni --d26-* so doloceni na .domov26, glava pa stoji zunaj njega, zato
   bi bila pravila neveljavna in gumb bi ostal brez barve.

   Dokler glava lebdi nad herojem, mora biti svetla; ko ob drsenju dobi
   razred .plava, se vrne v obicajno svetlo izvedbo. */
/* Blok »Smer E« v slog.css da osnovni .glava neprosojno svetlo ploskev
   (#F7F7F8 pri 88 %). Nad temnim herojem bi bila to svetla plosca z belim
   besedilom, torej neberljiva. Dokler glava lebdi, mora biti prosojna. */
/* Ob odprtem meniju prevzame temna plosca iz slog.css, zato je tu pogoj
   `body:not(.meni-odprt)`; brez njega bi prosojna glava zmagala po vrstnem
   redu datotek in pas nad menijem bi ostal prosojen. */
body:not(.meni-odprt) .glava:not(.plava){
  background:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom-color:rgba(255,255,255,.12);
}
/* Ob drsenju se glava zbere: polna ploskev, zabris in nizja vrstica. */
.glava .vrsta,.glava .znak{transition:height 300ms cubic-bezier(.22,.61,.36,1)}
@media (min-width:821px) and (max-width:1100px){
  .glava.plava .vrsta{height:74px}
  .glava.plava .znak{height:46px}
}
/* Znak v lebdeci glavi je bleda meta, ne bela. Na temnem heroju da 15,7 : 1,
   torej dalec nad zahtevo, hkrati pa znamka dobi svojo barvo namesto
   nevtralne bele. Ob drsenju glava posveti in znak se vrne v indigo. */
.glava:not(.plava) svg.znak{color:#CFF6DC}
/* Samo neposredne postavke menija, ne tudi povezav v podmeniju: te stojijo
   na temni stekleni plosci in nosijo meto iz slog.css. Lok pa zivi na metini
   piluli Program, zato tudi ta ostane temen. */
.glava:not(.plava) nav > a{color:rgba(255,255,255,.86)}
.glava:not(.plava) nav > a:hover{color:#FFFFFF}
.glava:not(.plava) nav > a::after{background:#65E68C}
.glava:not(.plava) .meni-gumb{border-color:rgba(255,255,255,.34)}
.glava:not(.plava) .meni-gumb span{background:#FFFFFF}
.glava:not(.plava) .gumb.poudarek{background:#CFF6DC;color:#0B1034}
.glava:not(.plava) .gumb.poudarek:hover{background:#B6EFC9;color:#0B1034}
/* Poziv je zdaj polna metina ploskev, zato ga to pravilo izpusti. */
.glava:not(.plava) .gumb.obroba:not(.namizni-poziv){
  background:transparent;color:#FFFFFF;border-color:rgba(255,255,255,.36);
}
.glava:not(.plava) .gumb.obroba:not(.namizni-poziv):hover{
  background:rgba(255,255,255,.10);border-color:#FFFFFF;
}

/* Ob odprtem meniju na telefonu prevzame vodenje temni meni iz slog.css.
   Prejsnja pravila za svetli meni so odstranjena: bila so v tej datoteki,
   ki se nalozi za slog.css, zato so temni meni povozila in glava je ostala
   svetla z belim znakom na njej. */

/* ── urejanje na temni ploskvi ──────────────────────────────────────
   Indigo crtkan obris je na temnem indigu neviden, zato tu preide v meto. */
.ur-nacin .d26-hero [data-ur]{outline-color:rgba(207,246,220,.5)}
.ur-nacin .d26-hero [data-ur]:hover{outline-color:rgba(207,246,220,.9)}
.ur-nacin .d26-hero [data-ur]:focus{
  outline-color:var(--d26-meta);background:rgba(255,255,255,.07);
}


/* ═══════════════════════════════════════════════════════════════════════
   Popravka po pregledu na ultraširokem zaslonu — 26. avgust 2026
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Znak stoji ob desnem robu ───────────────────────────────────
   Prej je bila maska raztegnjena cez celoten hero in postavljena z odmikom
   od roba. Tak zapis je krhek: dovolj je, da brskalnik trivrednostno obliko
   `right -3% center` razume drugace, in znak pristane na levi.

   Zdaj ima plast svojo skatlo, zasidrano ob desnem robu, maska pa je v njej
   preprosto `contain`. Znak zato ne more zaiti na levo polovico, ne glede
   na brskalnik ali sirino okna. */
.domov26 .d26-znak{
  inset:-6% -18% auto auto;    /* zgoraj, desno, spodaj, levo */
  width:64%;aspect-ratio:200/112;
  -webkit-mask-size:contain;   mask-size:contain;
  -webkit-mask-position:right center; mask-position:right center;
}
@media (min-width:1800px){
  .domov26 .d26-znak{width:56%;inset:-4% -12% auto auto}
}
/* Pod 1100 px besedilo zasede celo sirino, zato znak zdrsne v spodnji kot. */
@media (max-width:1100px){
  .domov26 .d26-znak{
    inset:auto -20% -6% auto;
    width:104%;height:auto;
    opacity:.24;
    -webkit-mask-position:right bottom; mask-position:right bottom;
  }
}
@media (max-width:640px){
  .domov26 .d26-znak{width:132%;inset:auto -34% -4% auto;opacity:.22}
}
/* Droben drift, ki znaka ne more premakniti na besedilo. */
@keyframes d26-znak{
  0%,100%{transform:translate3d(0,0,0)}
  50%    {transform:translate3d(-2.5%,0,0)}
}
/* ── 2. Siroki zasloni ──────────────────────────────────────────────
   Ovoj je bil 1240 px pri vsaki sirini, zato je na ultrasirokem zaslonu
   ostalo ogromno praznega prostora ob straneh. Zdaj se stopnicasto siri,
   z njim pa raste tudi osnovna stopnja pisave in zgornja meja naslova. */
@media (min-width:1500px){
  .domov26{--d26-max:1380px;font-size:17.5px}
  .domov26 .d26-trditev{--d26-fs:clamp(34px,min(5.6vw,9vh),80px)}
  .domov26 .d26-h2{--d26-fs:clamp(27px,3.6vw,50px)}
}
@media (min-width:1800px){
  .domov26{--d26-max:1520px;--d26-rob:clamp(22px,5vw,88px);font-size:18px}
  .domov26 .d26-trditev{--d26-fs:clamp(34px,min(5.4vw,9vh),88px)}
  .domov26 .d26-h2{--d26-fs:clamp(27px,3.4vw,54px)}
  .domov26 .d26-vodilo{--d26-fs:clamp(17px,1.4vw,21px)}
  .domov26 p{--d26-fs:18px}
}
@media (min-width:2200px){
  .domov26{--d26-max:1680px;font-size:18.5px}
  .domov26 .d26-trditev{--d26-fs:clamp(34px,min(5vw,9vh),96px)}
  .domov26 .d26-h2{--d26-fs:clamp(27px,3.2vw,58px)}
  .domov26 p{--d26-fs:18.5px}
}

/* Tablica: dve koloni sta pri 900 px pretesni za portret in besedilo,
   zato preide v eno kolono ze prej, mreza podrocij pa v dve. */
@media (min-width:901px) and (max-width:1180px){
  .domov26 .d26-oseba{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:34px}
  .domov26 .d26-nacin,.domov26 .d26-pristop{gap:36px}
}

/* Ob odprtem meniju na telefonu mora biti tudi pas glave temen, sicer med
   glavo in temno plosco menija nastane svetel sav. Zapisano izrecno, ker se
   ta datoteka nalozi za slog.css in bi sicer prosojna glava zmagala. */
@media (max-width:1100px){
  body.meni-odprt .glava,
  body.meni-odprt .glava:not(.plava){
    background:#0B1034;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    border-bottom-color:rgba(207,246,220,.16);
  }
}


/* ═══ PROSTI BLOKI ═══════════════════════════════════════════════════
   Mesta med razdelki, kamor urednik doda odstavek ali sliko. Prazno mesto
   nima visine, zato stran brez dodanih blokov izgleda natanko kot prej.
   Bloki stojijo na papirju, nikoli na temni ploskvi, zato je barvni odnos
   povsod isti in ni izjem. */
.domov26 .d26-vstavki:not(:empty){padding-block:clamp(30px,4.5vw,64px)}
.domov26 .d26-blok{
  width:100%;max-width:var(--d26-max);margin-inline:auto;
  padding-inline:var(--d26-rob);
}
.domov26 .d26-blok + .d26-blok{margin-top:clamp(24px,3.2vw,44px)}

.domov26 .d26-blok-besedilo [data-blok-vsebina]{max-width:62ch}
.domov26 .d26-blok-besedilo p{
  --d26-fs:17px;
  font-size:calc(var(--d26-fs) * var(--vel,1));
  color:var(--barva,var(--d26-crnilo-2));max-width:none;
}
.domov26 .d26-blok-besedilo p + p{margin-top:14px}
.domov26 .d26-blok-besedilo h3{
  --d26-fs:24px;
  font-size:calc(var(--d26-fs) * var(--vel,1));
  font-weight:400;letter-spacing:-.02em;line-height:1.2;
  color:var(--barva,var(--d26-crnilo));margin-bottom:12px;
}
.domov26 .d26-blok-besedilo ul,
.domov26 .d26-blok-besedilo ol{margin:14px 0 0;padding-left:22px}
.domov26 .d26-blok-besedilo li{
  --d26-fs:16.5px;
  font-size:calc(var(--d26-fs) * var(--vel,1));
  color:var(--barva,var(--d26-crnilo-2));line-height:1.55;margin-bottom:7px;
}

.domov26 .d26-blok-slika{margin-block:0}
.domov26 .d26-blok-slika img{
  width:100%;height:auto;display:block;border-radius:14px;
}
/* Siroka slika sme cez rob stolpca, ker fotografija prenese vec sirine kot
   besedilo; ozka ostane v isti mreze kot vse ostalo. */
.domov26 .d26-slika--siroka{max-width:min(1720px,100%);padding-inline:clamp(0px,2vw,40px)}
.domov26 .d26-blok-slika figcaption{
  --d26-fs:13.5px;
  font-size:calc(var(--d26-fs) * var(--vel,1));
  color:var(--barva,var(--d26-crnilo-3));
  margin-top:12px;line-height:1.5;max-width:62ch;
}
.domov26 .d26-blok-slika figcaption:empty{display:none}


/* -- pas na dnu heroja ---------------------------------------------
   Spodnja tretjina heroja je bila prazna, obiskovalec pa iz naslova ni
   izvedel, kaj podjetje pravzaprav pocne. Ena vrstica na dnu pove oboje in
   hkrati zapre kompozicijo. Isti jezik kot pas ustanov v razdelku Zaupanje:
   velike crke, sirok razmik, metina pika med postavkami. */
.domov26 .d26-hero-pas{
  list-style:none;margin:0 auto;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(12px,1.6vw,22px);
  width:100%;max-width:var(--d26-max);
  padding:clamp(20px,3vh,34px) var(--d26-rob) 0;
  border-top:1px solid rgba(207,246,220,.18);
}
.domov26 .d26-hero-pas li{
  --d26-fs:clamp(11.5px,1vw,14px);
  display:inline-flex;align-items:center;gap:clamp(12px,1.6vw,22px);
  font-size:calc(var(--d26-fs) * var(--vel,1));font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;line-height:1.5;
  color:var(--barva,var(--d26-meta-bleda));
}
.domov26 .d26-hero-pas li:not(:last-child)::after{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--d26-meta);flex:none;
}