/* ═══════════════════════════════════════════════════════════════
   Biroplast Solutions — V2 REFERENCE (samostojna stran).
   Predpona razredov "ref-".

   POMEMBNO — brez izmišljenih mnenj/ocen: v1 je imel na tem mestu 6
   ocen s 5 zvezdicami in generičnim besedilom ("Mnenje o hitrem
   servisu...", "Ime P. · Gostinstvo") — v1 SAM jih je označil kot
   `ph-l PLACEHOLDER — pridobiti je treba 4–6 mnenj obstoječih strank`,
   torej niso resnične izjave resničnih strank. Prav tako so bili trije
   "primeri uvedbe" v1 sam označeni `ph-l PLACEHOLDER — primeri iz
   prakse, ki jih napišete vi` (torej tudi ti niso potrjeni resnični
   primeri, ampak predloga). NOBENO od tega ni preneseno v V2 — glej
   dnevnik. Edina potrjena vsebina na tej strani je seznam imen strank
   (brez `ph-l` oznake na samih imenih, samo na vektorskih logotipih),
   zato je stran namenoma krajša od v1-jeve. ═══════════════════════ */

.ref-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(165deg, var(--navy-mid), var(--navy) 55%, var(--navy-deep));
  color:#fff; padding:calc(var(--sp-7) + 30px) 0 var(--sp-7);
}
.ref-hero .wrap{ position:relative; z-index:2; max-width:720px; text-align:center; margin:0 auto; }
.ref-hero h1{ font-size:clamp(36px,4.6vw,56px); margin:2px 0 var(--sp-3); }
.ref-hero .lead{ max-width:560px; margin:0 auto; color:var(--muted-on-navy); }
.ref-hero .circuit-field{ z-index:0; }
.ref-hero-bp{ width:600px; height:600px; right:-200px; bottom:-260px; opacity:.09; color:var(--lime); z-index:0; }
.ref-hero .glow-blue{ width:460px; height:460px; right:6%; top:-160px; opacity:.4; z-index:0; }
@media (max-width:600px){ .ref-hero{ padding:calc(var(--sp-6) + 20px) 0 var(--sp-6); } }

/* ── stranke — 9. 9. 2026, POPRAVEK #2: prejšnji "chip/pilula" slog
   (popravek #1, glej opombo ob HTML-ju zgoraj) je bil sam zavrnjen kot
   premalo tipografsko premium. Nov brief eksplicitno prosi za
   "sophisticated typographic rail": velika, samozavestna tipografija,
   imena ločena z majhno cyan piko namesto pilulastega roba/ozadja. Isti
   recept je ponovljen v pages.css (domača stran, ".reference-vrsta"),
   da obe mesti ostaneta usklajeni. Font-size je tu nekoliko večji kot
   na domači strani, ker gre za samostojen, širši razdelek (ne ozek
   stolpec) — glej brief t. 10, "ne premajhna". ── */
.ref-stranke{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  font-family:var(--fh); font-weight:600; text-transform:uppercase; letter-spacing:.03em;
  font-size:clamp(15px, 1.6vw, 19px); color:var(--navy);
  max-width:880px; margin:0 auto;
}
.ref-stranke span{
  display:inline-flex; align-items:center;
  transition:color var(--dur-fast) var(--ease-premium);
}
.ref-stranke span:hover{ color:var(--blue); }
.ref-stranke span:not(:first-child)::before{
  content:''; flex:none; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--cyan); opacity:.55; margin:0 16px;
}
@media (max-width:600px){
  .ref-stranke span:not(:first-child)::before{ margin:0 10px; }
}

/* ── zastopstva — 9. 9. 2026, nov razdelek: blagovne znamke, ki jih
   Biroplast ZASTOPA/PRODAJA (Ricoh, Nashuatec, HP, Brother, Grenke,
   ESET) — namerno LOČEN od zgornjih strank (glej HTML komentar), z
   drugačnim vizualnim zdravljenjem, kot brief zahteva (t. 8): bolj
   strukturiran/institucionalen 3×2 "brand cell" grid namesto tekočega
   tipografskega seznama — obiskovalec mora takoj vizualno začutiti, da
   gre za drugo kategorijo. Ozadje sekcije je ".on-mid" (iz
   depth-system.css) namesto svetlega/".on-light" pri strankah — brief
   t. 14: "ZASTOPSTVA = slightly stronger blue-grey technology
   background". Kartice so minimalne (brez ikon), z majhnim tehničnim
   naglasnim detajlom v kotu namesto logotipa (brief t. 9). ── */
.zn-znamke{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-2);
  max-width:760px; margin:var(--sp-5) auto 0;
}
.zn-znamka{
  position:relative; display:flex; align-items:center; justify-content:center;
  min-height:92px; padding:var(--sp-2);
  background:rgba(23,185,236,.05);
  border:1px solid var(--line); border-radius:var(--r-lg);
  transition:border-color var(--dur-med) var(--ease-premium),
             background var(--dur-med) var(--ease-premium),
             transform var(--dur-med) var(--ease-premium);
}
.zn-znamka::before{
  content:''; position:absolute; top:14px; left:14px; width:14px; height:2px;
  background:var(--cyan); opacity:.5;
}
.zn-znamka span{
  font-family:var(--fh); font-weight:700; font-size:16.5px; letter-spacing:.02em;
  text-transform:uppercase; color:var(--navy-deep);
}
.zn-znamka:hover{
  border-color:rgba(23,185,236,.4); background:rgba(23,185,236,.09); transform:translateY(-3px);
}
@media (max-width:700px){
  .zn-znamke{ grid-template-columns:repeat(2, 1fr); }
}
@media (prefers-reduced-motion:reduce){
  .zn-znamka{ transition:none; }
  .zn-znamka:hover{ transform:none; }
}

/* ── zaključni CTA (".cta-band" podvojen namerno) ─────────────── */
.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; }
@media (max-width:760px){ .cta-band{ padding:var(--sp-6) var(--sp-3); } }