/* ═══════════════════════════════════════════════════════════════
   Biroplast Solutions — V2 SERVIS (samostojna stran, brez odvisnosti
   od drugih page-CSS datotek). Predpona razredov "sv-". ═══════════ */

/* 8. 9. 2026 — "GLOBAL ANIMATED TECHNOLOGY BACKGROUND SYSTEM": hero iz
   temnega navy gradienta v svetlo "ice" ozadje (glej depth-system.css,
   razdelek 10). Barva besedila neposredno tu (ne prek cross-file
   cascade) — .dpt-hero-light iz depth-system.css bi imel enako
   specifičnost kot ta pravila, servis.css pa se nalaga PO
   depth-system.css, zato bi tako ali tako zmagal; jasneje je, da je
   pravi vir resnice kar tu. Stara ".glow-blue"/".glow-green" velikost
   ni več v uporabi (element v HTML zamenjan z ".dpt-field"). */
.sv-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(165deg, var(--ice), #fff 45%, var(--ice-deep));
  color:var(--ink); padding:calc(var(--sp-7) + 30px) 0 var(--sp-7);
}
.sv-hero .wrap{ position:relative; z-index:2; max-width:720px; }
.sv-hero h1{ font-size:clamp(36px,4.6vw,56px); margin:2px 0 var(--sp-3); color:var(--navy-deep); }
.sv-hero .lead{ max-width:560px; color:var(--muted); margin-bottom:var(--sp-4); }
.sv-hero-cta{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.sv-hero .circuit-field{ z-index:0; }
.sv-hero-bp{ width:600px; height:600px; right:-200px; bottom:-260px; opacity:.06; color:var(--lime); z-index:0; }
@media (max-width:600px){ .sv-hero{ padding:calc(var(--sp-6) + 20px) 0 var(--sp-6); } }

/* ── tri poti do popravila ─────────────────────────────────────────
   17. 9. 2026 — sekcija je zdaj tega pregleda EDINI pravi STRONG
   CONTRAST/"dark premium" vrh (brif t. 14/16 servisu izrecno dovoli
   več temnega kontrasta kot ostalim stranem). Gradient namesto ravne
   barve (recept "13. STRONG/DARK SEKCIJA Z GLOBINO", depth-system.css)
   — rahel prehod proti --navy-deep proti dnu doda globino brez nove
   barve. Kartice ostajajo BELE (recept t. 5): ker ".sv-pot" uporablja
   "color:inherit", bi sicer podedovale belo besedilo sekcije (".on-steel"
   nastavi color:#fff) in postale neberljive na belem ozadju — zato
   spodnji ".on-steel .sv-pot" eksplicitno povrne temno besedilo. ── */
#poti.on-steel{
  background:linear-gradient(165deg, var(--steel), var(--steel-deep) 68%, var(--navy-deep));
}
.on-steel .sv-pot{ color:var(--ink); }
.sv-poti{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); }
.sv-pot{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-4); color:inherit;
}
a.sv-pot{ transition:transform var(--dur-med) var(--ease-premium), box-shadow var(--dur-med) var(--ease-premium), border-color var(--dur-med) var(--ease-premium); }
a.sv-pot:hover, a.sv-pot: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); }
.sv-pot h3{ font-size:18px; margin:var(--sp-2) 0 6px; }
.sv-pot p{ color:var(--muted); font-size:14.5px; line-height:1.55; margin-bottom:var(--sp-1); }
.sv-pot-vec{ display:inline-flex; align-items:center; gap:6px; font-family:var(--fh); font-weight:700; font-size:13.5px; color:var(--blue); }
.sv-pot-vec svg{ width:15px; height:15px; transition:transform .3s var(--ease-premium); }
a.sv-pot:hover .sv-pot-vec svg, a.sv-pot:focus-visible .sv-pot-vec svg{ transform:translateX(5px); }
@media (max-width:900px){ .sv-poti{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){
  a.sv-pot:hover, a.sv-pot:focus-visible{ transform:none; }
  a.sv-pot:hover .sv-pot-vec svg{ transform:none; }
}

/* ── kaj popravljamo / programske storitve — dva 2-stolpčna seznama ── */
.sv-seznam{
  list-style:none; margin:0 auto; padding:0; max-width:820px;
  display:grid; grid-template-columns:1fr 1fr; gap:12px var(--sp-5);
}
.sv-seznam li{ display:flex; gap:10px; align-items:center; font-size:15.5px; color:var(--ink); }
.sv-seznam svg{ width:17px; height:17px; color:var(--green); flex-shrink:0; }
@media (max-width:600px){ .sv-seznam{ grid-template-columns:1fr; } }

/* ── vzdrževalna pogodba ───────────────────────────────────── */
.sv-pogodba{ max-width:720px; margin:0 auto; text-align:center; }
.sv-pogodba .lead{ margin-bottom:var(--sp-3); }

/* ── FAQ (isti recept kot ".db-faq"/".bm-faq", podvojen namerno) ── */
.sv-faq{ max-width:800px; margin:0 auto; }
.sv-faq-item{ border-bottom:1px solid var(--line); }
.sv-faq-item:first-child{ border-top:1px solid var(--line); }
.sv-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);
}
.sv-faq-item summary::-webkit-details-marker{ display:none; }
.sv-faq-item summary:hover{ color:var(--blue); }
.sv-faq-ikona{ width:20px; height:20px; flex-shrink:0; color:var(--blue); transition:transform var(--dur-fast) var(--ease-premium); }
.sv-faq-item[open] .sv-faq-ikona{ transform:rotate(180deg); }
.sv-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){ .sv-faq-item summary{ font-size:15.5px; padding:18px 2px; } .sv-faq-item p{ padding-right:0; font-size:15px; } }

/* ── sorodne strani ────────────────────────────────────────── */
.sv-sorodne{ display:flex; gap:var(--sp-3); justify-content:center; flex-wrap:wrap; }
.sv-sorodne a{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--fh); font-weight:700; font-size:14px; color:var(--navy);
  padding:10px 18px; border:1px solid var(--line); border-radius:999px;
  transition:border-color var(--dur-fast) var(--ease-premium), color var(--dur-fast) var(--ease-premium);
}
.sv-sorodne a:hover{ border-color:var(--blue); color:var(--blue); }
.sv-sorodne a svg{ width:14px; height:14px; }

/* ── 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); } }