/* ═══════════════════════════════════════════════════════════════
   Biroplast Solutions — V2 SPLETNE STRANI (samostojna stran).
   Predpona razredov "ss-". ═══════════════════════════════════════ */

/* ─── 8. 9. 2026 — "VARIANTA C: CORPORATE/SERVICE/EDITORIAL" hero
   prenova. Zamenjuje prejšnji polnozaslonski temen navy hero (dark
   gradient + circuit-field + motif-bp pikčasti vzorec + 2 glow
   "blob"-a) s svetlim, editorial/creative-tech sistemom — glej
   `blagajna-greentill.html`/`css/greentill-flagship.css` in
   `davcne-blagajne.html`/`css/davcne-blagajne.css` za sorodne
   referenčne primere ISTEGA vizualnega jezika (light hero, tehnična
   črtna grafika namesto pikčastega vzorca) — ta hero je namenoma
   DRUGAČEN karakter od obeh: manj tehničnih detajlov (samo 1 tanka
   pot/2 vozlišči v kotu namesto več prepletenih poti), split
   layout (levo headline+copy, desno abstraktna "spletna stran"
   kompozicija — generična brskalniška kartica z UI-bloki, NE
   fotografija). Edina obstoječa slika v projektu, ki bi ustrezala
   "real website visual" iz brief-a
   (`assets/images/resitve/spletne-strani.webp`), je generičen stock
   device-mockup s ciriličnim placeholder besedilom (nerazločljive
   tujejezične besede) — neprimerna za veliko, berljivo hero
   postavitev na slovenski strani, zato je NAMENOMA ne uporabljam;
   namesto tega lastna, jezikovno nevtralna "fine technical
   composition" (brief eksplicitno dovoljuje to alternativo, glej
   naslov naloge). Slika ostaja nedotaknjena in se še naprej uporablja
   kot kartica na `index.html`. ─── */
.ss-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(155deg, #f8fafc 0%, #eef2f7 55%, #e7edf4 100%);
  color:var(--ink);
  padding:calc(var(--sp-7) + 20px) 0 var(--sp-7);
}
/* zelo blaga cyan svetloba zgoraj desno — "subtle blue-grey tone +
   very light cyan area" iz brief-a, ne poln gradient čez stran */
.ss-hero::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 88% 6%, rgba(23,185,236,.10), transparent 46%);
}

/* ── tehnična grafika — namenoma minimalna (ena pot, 2 vozlišči) v
   spodnjem levem kotu, "manj engineering detajlov kot hardware
   strani" (brief). Rišeta se ob nalaganju, isti recept kot gt-/db-. ── */
.ss-hero-tech{
  position:absolute; z-index:0; left:-30px; bottom:-26px; width:200px; height:200px;
  opacity:.55; pointer-events:none;
}
.ss-hero-tech svg{ width:100%; height:100%; }
.ss-line{ stroke-dasharray:1; stroke-dashoffset:1; opacity:0; animation:ssDraw 1.6s cubic-bezier(.4,0,.2,1) .5s both; }
.ss-node{ opacity:0; animation:ssNodeIn .5s ease-out 1.9s both; filter:drop-shadow(0 0 3px rgba(23,185,236,.4)); }
.ss-node--green{ animation-delay:2.2s; filter:drop-shadow(0 0 3px rgba(24,165,75,.4)); }
@keyframes ssDraw{ to{ stroke-dashoffset:0; opacity:.75; } }
@keyframes ssNodeIn{ from{ opacity:0; transform:scale(.4); } to{ opacity:1; transform:scale(1); } }
/* 8. 9. 2026 (GLOBAL ANIMATED TECHNOLOGY BACKGROUND SYSTEM): "dpt-anim-pulse"
   dodan na ".ss-node--green" v HTML-ju — namesto da ta univerzalni razred
   preprosto PREGLASI ".ss-node--green"-jevo enkratno "fade-in" animacijo
   (enaka specifičnost, kar bi ogrozilo vidnost vozla, glej depth-system.css
   hrošč-opombe), ta selektor z višjo specifičnostjo VERIŽI obe animaciji v
   eno "animation" lastnost — enaka tehnika kot ".apl-node--accent"/
   ".dl-node--accent" (glej aplikacije.css/aplikacija-delime.css). */
@media (prefers-reduced-motion: no-preference){
  .ss-node--green.dpt-anim-pulse{
    animation:ssNodeIn .5s ease-out 2.2s both, dpt-node-pulse 4.5s ease-in-out 2.9s infinite;
  }
}

.ss-hero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr .95fr; gap:var(--sp-6); align-items:center;
}
.ss-hero h1{ font-size:clamp(34px,4.4vw,54px); margin:2px 0 var(--sp-3); max-width:600px; color:var(--navy); }
.ss-hero .lead{ max-width:520px; margin-bottom:var(--sp-4); }
.ss-hero-cta{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }

/* ── desno: abstraktna "spletna stran" kompozicija. "-wrap" nosi SAMO
   data-parallax (scroll), ".ss-hero-vizual" SAMO neskončno "micro-
   float" animacijo transforma — ločitev na dva gnezdena elementa je
   nujna (glej gt-hero-video-wrap v dnevniku: CSS animacija transforma
   bi sicer preglasila JS scroll-parallax na istem elementu). ── */
.ss-hero-vizual-wrap{ position:relative; display:block; width:100%; }
.ss-hero-vizual{
  position:relative; z-index:1;
  animation:ssFloat 8s ease-in-out infinite;
}
@keyframes ssFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }

/* ── 17. 9. 2026 — "temen oder" TIK ZA maketo (glej HTML opomba nad
   ".ss-hero-vizual-wrap"): edini pravi steel/navy kontrastni trenutek v
   heroju, namenoma NE sekcijsko ozadje. Peek-a izpod desnega/spodnjega
   roba makete, torej mora biti PRED njo v DOM-u (z-index:0 proti
   ".ss-hero-vizual"-ovemu z-index:1 zgoraj) in znotraj lastnega
   overflow:hidden (skupaj z ".ss-hero{overflow:hidden}" zunaj —
   dvojna zaščita pred vodoravnim prelivanjem, glej hrošč #3). ── */
.ss-hero-stage{
  position:absolute; z-index:0; pointer-events:none; overflow:hidden;
  inset:7% -6% -7% 11%;
  border-radius:calc(var(--r-lg) + 14px);
  background:linear-gradient(160deg, var(--steel) 0%, var(--steel-deep) 55%, var(--navy-deep) 100%);
  box-shadow:0 40px 90px -28px rgba(13,22,32,.32);
  color:#bcd3e6;
}
.ss-hero-stage .circuit-field{ inset:0; }
@media (max-width:900px){
  .ss-hero-stage{ inset:6% -4% -6% 7%; border-radius:var(--r-lg); }
}
@media (max-width:600px){
  .ss-hero-stage{ inset:5% -3% -5% 4%; box-shadow:0 26px 60px -22px rgba(13,22,32,.28); }
}

.ss-browser{
  position:relative; background:#fff; border-radius:var(--r-lg);
  box-shadow:0 30px 70px -25px rgba(23,34,46,.18), 0 0 0 1px rgba(23,34,46,.06);
  overflow:hidden;
  transition:transform var(--dur-med) var(--ease-premium), box-shadow var(--dur-med) var(--ease-premium);
}
/* brief t. 8 — zelo subtilen hover, brez zooma. Ne prihaja v konflikt z
   ".ss-hero-vizual"-ovo "float" animacijo (drug element, glej HTML
   opombo) niti z JS scroll-parallaxom na ".ss-hero-vizual-wrap". */
.ss-browser:hover{
  transform:translateY(-3px);
  box-shadow:0 38px 84px -25px rgba(23,34,46,.24), 0 0 0 1px rgba(23,34,46,.07);
}
.ss-browser-bar{
  display:flex; align-items:center; gap:6px;
  padding:12px 14px; border-bottom:1px solid var(--line); background:var(--surface-alt);
}
.ss-browser-bar span{ width:8px; height:8px; border-radius:50%; background:var(--line); flex-shrink:0; }
.ss-browser-bar span:nth-child(1){ background:rgba(24,165,75,.35); }
.ss-browser-bar span:nth-child(2){ background:rgba(23,185,236,.35); }
.ss-browser-bar span:nth-child(3){ background:rgba(4,123,193,.3); }
.ss-browser-url{
  flex:1; display:flex; align-items:center; height:20px; margin-left:8px; max-width:160px;
  padding:0 10px; border-radius:5px; background:var(--line);
  font-family:var(--fb); font-size:10.5px; color:var(--muted); letter-spacing:.01em;
}
/* ── ".ss-browser-body" — "live" predogled dejanske domače strani
   (glej HTML opombo + js/ss-preview.js). `aspect-ratio` iz data-design-
   w/h drži pravilno razmerje stranic na vseh širinah brez JS; JS
   izračuna samo `transform:scale()` za notranji iframe (fiksne "design"
   velikosti), da se dejanska stran natančno prilega vsaki širini
   kartice. Temno ozadje (ne belo) prepreči bel "flash" preden se
   iframe naloži — ujema se s temnim GreenTill hero tonom, ki ga
   predogled dejansko prikazuje. ── */
.ss-browser-body{
  position:relative; overflow:hidden;
  aspect-ratio:1440 / 1000;
  background:#0d1620;
}
.ss-browser-body iframe{
  position:absolute; top:0; left:0;
  width:1440px; height:1000px; border:0;
  transform-origin:top left;
  pointer-events:none;
}

/* plavajoča značka — potrebuje position:relative na neposrednem
   staršu (".ss-hero-vizual" zgoraj), sicer se napačno pozicionira
   (glej gotcha #2 v dnevniku, popravljeno na Davčnih blagajnah). */
.ss-hero-badge{
  position:absolute; right:-10px; bottom:-16px; z-index:3;
  display:flex; flex-direction:column; gap:2px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:10px 14px; box-shadow:var(--sh-md);
  font-family:var(--fh); font-weight:700; font-size:12.5px; letter-spacing:.02em; color:var(--navy);
}
.ss-hero-badge small{ font-family:var(--fb); font-weight:500; font-size:11px; color:var(--muted); letter-spacing:0; }

@media (max-width:900px){
  .ss-hero-grid{ grid-template-columns:1fr; gap:var(--sp-5); text-align:center; }
  .ss-hero-grid > div{ margin:0 auto; }
  /* 9. 9. 2026 popravek: prej "order:-1" (predogled PRED besedilom na
     mobilnem) — brief zdaj eksplicitno zahteva predogled POD besedilom,
     zato je razred odstranjen (naravni DOM vrstni red je že besedilo→
     predogled, glej HTML). */
  .ss-hero-vizual-wrap{ max-width:420px; margin:var(--sp-4) auto 0; }
  .ss-hero h1{ max-width:none; }
  .ss-hero .lead{ max-width:none; margin-left:auto; margin-right:auto; }
  .ss-hero-cta{ justify-content:center; }
  .ss-hero-tech{ opacity:.4; }
}
@media (max-width:600px){
  .ss-hero{ padding:calc(var(--sp-6) + 16px) 0 var(--sp-6); }
  .ss-hero-badge{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .ss-line, .ss-node, .ss-hero-vizual{ animation:none !important; }
  .ss-line{ stroke-dashoffset:0; opacity:.75; }
  .ss-node{ opacity:1; transform:none; }
  .ss-browser{ transition:none; }
  .ss-browser:hover{ transform:none; }
}

/* ── kaj delamo — 4 kartice ────────────────────────────────── */
.ss-kaj{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); }
.ss-kaj-kartica{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-4); }
.ss-kaj-kartica h3{ font-size:18px; margin:var(--sp-2) 0 6px; }
.ss-kaj-kartica p{ color:var(--muted); font-size:14.5px; line-height:1.55; }
@media (max-width:700px){ .ss-kaj{ grid-template-columns:1fr; } }

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

/* ── koraki ────────────────────────────────────────────────── */
.ss-koraki{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); counter-reset:korak; }
.ss-korak{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-4); position:relative; }
.ss-korak::before{
  counter-increment:korak; content:counter(korak);
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%; margin-bottom:var(--sp-2);
  background:var(--grad-green); color:#0d2015; font-family:var(--fh); font-weight:800; font-size:15px;
}
.ss-korak h3{ font-size:17px; margin-bottom:6px; }
.ss-korak p{ color:var(--muted); font-size:14.5px; line-height:1.55; }
@media (max-width:900px){ .ss-koraki{ grid-template-columns:1fr; } }

/* ── sorodne strani ────────────────────────────────────────── */
.ss-sorodne{ display:flex; gap:var(--sp-3); justify-content:center; flex-wrap:wrap; }
.ss-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);
}
.ss-sorodne a:hover{ border-color:var(--blue); color:var(--blue); }
.ss-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); } }