/* === DOKUMENTNI SISTEM SOFTNOTES — samo resitev-dokumentni-sistem.html (4 jeziki), 25. 10. 2026 ===
   Zasloni so ponazoritve aplikacije, narisane v HTML (sn-win = okno, sn-phone = telefon);
   njihove barve so barve aplikacije, besedilo strani pa sledi slogu softbase.si. */
.sn-hero{padding-bottom:40px}
.sn-hero-grid{display:flex; flex-wrap:wrap; gap:48px 56px; align-items:center}
.sn-hero-text{flex:1 1 420px; min-width:0}
.sn-hero .subpage-title{font-size:clamp(38px, 4.6vw, 58px)}
.sn-h1-kicker{
  display:block; margin-bottom:14px;
  font-family:'Inter', 'Inter Fallback', system-ui, sans-serif;
  font-size:clamp(17px, 1.6vw, 20px); font-weight:600; letter-spacing:0;
  color:var(--brand-500);
}
.sn-hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.sn-btn-outline{background:transparent; color:var(--brand-700); border:1px solid var(--brand-700)}
.sn-btn-outline:hover{
  background:var(--brand-700); color:#fff;
  transform:translateY(-2px); box-shadow:0 12px 28px rgba(11,22,61,.35);
}
.sn-points{list-style:none; margin-top:32px; display:flex; flex-direction:column; gap:10px; font-size:16px; color:var(--ink-dim)}
.sn-points li{display:flex; align-items:flex-start; gap:10px}
.sn-points li::before{content:""; width:7px; height:7px; border-radius:999px; background:var(--brand-500); flex:0 0 auto; margin-top:.6em}
.sn-hero-visual{flex:1 1 580px; min-width:0; margin:0}
.sn-hero-screens{position:relative; margin-bottom:84px}
.sn-note{margin-top:14px; font-size:13.5px; color:var(--ink-muted)}
.sn-toc{display:flex; flex-wrap:wrap; gap:8px; margin-top:40px; padding-top:24px; border-top:1px solid var(--line)}
.sn-toc a{
  font-size:14px; font-weight:500; color:var(--ink-dim);
  padding:8px 14px; border:1px solid var(--line-strong); border-radius:999px; background:#fff;
  transition:all .2s;
}
.sn-toc a:hover{background:var(--brand-700); border-color:var(--brand-700); color:#fff; transform:translateY(-2px); box-shadow:0 8px 20px rgba(11,22,61,.2)}

.sn-h2{
  font-family:'Fraunces', 'Fraunces Fallback', serif;
  font-size:clamp(32px, 4.2vw, 48px); font-weight:400;
  line-height:1.1; letter-spacing:-.02em; margin-top:4px;
}
.sn-h2 em{font-style:italic; color:var(--brand-700)}
.sn-lead{margin-top:16px; font-size:18px; line-height:1.6; color:var(--ink-dim); max-width:75ch}
.sn-statement{
  font-family:'Fraunces', 'Fraunces Fallback', serif;
  font-size:clamp(28px, 3.6vw, 44px); font-weight:400;
  line-height:1.15; letter-spacing:-.02em; color:var(--ink);
  max-width:24ch; margin:0 auto;
}
.sn-dark{background:linear-gradient(135deg, var(--brand-950), var(--brand-800)); color:#fff}
.sn-dark .section-eyebrow{color:var(--brand-200)}
.sn-dark .section-eyebrow::before{background:var(--brand-200)}
.sn-dark .sn-h2 em{color:var(--brand-200)}

/* zasloni aplikacije */
.sn-page figure{margin:0}
.sn-phone{width:264px; flex:0 0 auto; height:548px; box-sizing:border-box; border:9px solid #0E1330; border-radius:40px; background:#fff; overflow:hidden; position:relative; box-shadow:0 24px 60px rgba(14,19,48,.25); display:flex; flex-direction:column; font-size:12px; line-height:1.5; color:#14172B}
.sn-notch{position:absolute; top:6px; left:50%; transform:translateX(-50%); width:84px; height:20px; background:#0E1330; border-radius:12px; z-index:2}
.sn-win{background:#fff; border:1px solid #E2E3EE; border-radius:16px; overflow:hidden; box-shadow:0 20px 50px rgba(14,19,48,.10); line-height:1.5; color:#14172B}
.sn-wbar{background:#0E1330; color:#fff; display:flex; align-items:center; gap:10px; padding:10px 14px; font-size:12px; flex-wrap:wrap}
.sn-lbl{font-size:10px; letter-spacing:.08em; color:#565B73; text-transform:uppercase}
.sn-chip{font-size:13px; background:#F1F2F8; color:#2A2E45; border-radius:6px; padding:4px 8px}
.sn-av{border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-weight:700; color:#fff; flex:0 0 auto}
.sn-row{display:flex; align-items:center; gap:8px}
.sn-page mark{color:inherit}
@media (max-width:760px){.sn-hide-sm{display:none !important} .sn-hero-screens{margin-bottom:0}}
/* mreze z minmax(460px/480px) bi pod to sirino povzrocile vodoravni zamik strani */
@media (max-width:560px){
  .sn-page [style*="minmax(460px"], .sn-page [style*="minmax(480px"]{grid-template-columns:minmax(0, 1fr) !important}
}
@media (max-width:400px){
  .sn-page [style*="minmax(300px"], .sn-page [style*="minmax(260px"]{grid-template-columns:minmax(0, 1fr) !important}
  .sn-hero-screens{margin-bottom:0}
}
/* dolge zlozenke (DE) v ozkih karticah in zaslonih: deljenje z vezajem namesto preloma sredi besede */
.sn-page h3, .sn-page h4, .sn-win, .sn-phone{-webkit-hyphens:auto; hyphens:auto}
/* notranje povezave v besedilu (tudi na temni podlagi) */
.sn-link{color:inherit; text-decoration:underline; text-underline-offset:3px; text-decoration-color:currentColor; text-decoration-thickness:1px}
.sn-link:hover{text-decoration-thickness:2px}