/* Skupni slog za vsebinske (SEO) strani — usklajen z domačo stranjo. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:#fff; color:#000; font-family:'Roboto',system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:1080px; margin:0 auto; padding:0 20px}
.narrow{max-width:840px}

/* ---------- header ---------- */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px 0; border-bottom:1px solid #E6E6E6}
.brand{display:flex; align-items:center; gap:12px; font:700 17px/1.2 'IBM Plex Sans',sans-serif; letter-spacing:-.01em; color:#000; text-decoration:none}
.brand img{width:40px; height:40px; border-radius:10px; object-fit:cover; flex:0 0 auto}
.brand small{display:block; font:400 13px/1.2 'Roboto',sans-serif; color:#666; letter-spacing:0}
.topbar .app-link{height:44px; padding:0 20px; display:inline-flex; align-items:center; font:700 14px/1 'IBM Plex Sans',sans-serif; color:#fff; text-decoration:none; border-radius:12px; background:#000; white-space:nowrap; flex:0 0 auto; transition:.15s}
.topbar .app-link:hover{background:#069B3D}
@media(max-width:560px){
  .topbar{padding:14px 0; gap:8px}
  .brand{gap:8px; font-size:15px}
  .brand img{width:36px; height:36px; border-radius:9px}
  .brand small{display:none}
  .topbar .app-link{height:44px; padding:0 14px; font-size:13px}
}

/* ---------- breadcrumb ---------- */
.crumbs{font:400 13px/1.5 'Roboto',sans-serif; color:#666; padding:20px 0 0}
.crumbs a{color:#666; text-decoration:none}
.crumbs a:hover{color:#069B3D; text-decoration:underline}
.crumbs span{color:#666}
.crumbs b{color:#000; font-weight:500}

/* ---------- article head ---------- */
.article-head{padding:16px 0 8px}
.article-head h1{font:700 clamp(28px,4.4vw,42px)/1.14 'IBM Plex Sans',sans-serif; color:#000; letter-spacing:-.02em; margin:0 0 16px; max-width:20ch}
.article-head .lead{font:400 clamp(17px,2.2vw,19px)/1.65 'Roboto',sans-serif; color:#333; max-width:720px; margin:0}
.article-head .lead strong{color:#000; font-weight:500}
.article-head .updated{font:400 13px/1 'Roboto',sans-serif; color:#666; margin:16px 0 0}
.article-head .updated b{color:#000; font-weight:500; text-transform:capitalize}

/* ---------- content sections (kot section.info na domači) ---------- */
section.info{background:#fff; border:1px solid #E6E6E6; border-radius:16px; padding:clamp(22px,3.4vw,36px); margin-top:24px}
section.info h2{font:700 28px/1.25 'IBM Plex Sans',sans-serif; color:#000; letter-spacing:-.01em; margin:0}
section.info h2:not(:first-child){margin-top:44px}
section.info h3{font:600 20px/1.35 'IBM Plex Sans',sans-serif; color:#000; margin:36px 0 0}
section.info p{font:400 17px/1.7 'Roboto',sans-serif; color:#000; margin:16px 0 0; max-width:720px}
section.info h3 + p{margin-top:12px}
section.info strong{font-weight:700; color:#000}
section.info a{color:#000; text-decoration:underline; text-underline-offset:3px}
section.info a:hover{color:#069B3D}
section.info ul,section.info ol{margin:16px 0 0; padding-left:22px; max-width:720px}
section.info li{font:400 17px/1.7 'Roboto',sans-serif; color:#000; margin:8px 0}
section.info .note{font:400 13px/1.6 'Roboto',sans-serif; color:#666; margin-top:20px; padding-top:20px; border-top:1px solid #E6E6E6; max-width:none}
section.info .note a{color:#000}
@media(max-width:560px){
  section.info h2{font-size:22px; line-height:1.3}
  section.info h2:not(:first-child){margin-top:34px}
  section.info h3{font-size:17px; line-height:1.4; margin-top:30px}
  section.info p,section.info li{font-size:15px}
  section.info h3 + p{margin-top:10px}
}

/* checklist / koraki */
ol.steps{list-style:none; counter-reset:st; padding:0; margin:20px 0 0; max-width:720px}
ol.steps li{counter-increment:st; position:relative; padding:0 0 0 46px; margin:0 0 18px; font:400 17px/1.6 'Roboto',sans-serif; color:#000}
ol.steps li::before{content:counter(st); position:absolute; left:0; top:0; width:30px; height:30px; border-radius:999px; background:#069B3D; color:#fff; font:700 15px/30px 'IBM Plex Sans',sans-serif; text-align:center}
ol.steps li b{font-weight:700}
ul.check{list-style:none; padding:0; margin:16px 0 0; max-width:720px}
ul.check li{position:relative; padding:0 0 0 30px; margin:0 0 10px; font:400 17px/1.6 'Roboto',sans-serif; color:#000}
ul.check li::before{content:""; position:absolute; left:0; top:4px; width:18px; height:18px; border-radius:5px; background:#E7F5EC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23069B3D'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat}
@media(max-width:560px){ ol.steps li,ul.check li{font-size:15px} }

/* ---------- price table (kot domača) ---------- */
.stat-wrap{overflow-x:auto; margin:20px 0 0}
.stat-table{width:100%; border-collapse:collapse}
.stat-table th,.stat-table td{padding:15px 0; text-align:right; border-bottom:1px solid #E6E6E6; white-space:nowrap}
.stat-table th:not(:first-child),.stat-table td:not(:first-child){padding-left:16px}
.stat-table th:first-child,.stat-table td:first-child{text-align:left}
.stat-table thead th{padding:12px 0; font:500 12px/1 'Roboto',sans-serif; color:#666}
.stat-table td{font:400 16px/1.2 'IBM Plex Sans',sans-serif; color:#666; font-variant-numeric:tabular-nums}
.stat-table td:first-child{font:700 16px/1.2 'IBM Plex Sans',sans-serif; color:#000}
.stat-table td:first-child .desc{font:400 14px/1.2 'Roboto',sans-serif; color:#666; margin-left:5px}
.stat-table td:nth-child(3){color:#000}
.stat-table td.lo{font-weight:600; color:#069B3D}
.stat-table tbody tr:last-child td{border-bottom:0}
@media(max-width:560px){
  .stat-table th:nth-child(4),.stat-table td:nth-child(4){display:none}
  .stat-table th,.stat-table td{padding:13px 0; font-size:15px}
  .stat-table td:first-child{font-size:15px}
  .stat-table td:first-child .desc{display:block; margin-left:0; margin-top:2px; font-size:12px}
  .stat-table thead th{font-size:11px}
}

/* ---------- FAQ (kot domača) ---------- */
.faq{margin-top:20px; display:flex; flex-direction:column}
.faq details{border-top:1px solid #E6E6E6; padding:0}
.faq details:last-child{border-bottom:1px solid #E6E6E6}
.faq summary{list-style:none; cursor:pointer; padding:20px 0; font:600 17px/1.4 'IBM Plex Sans',sans-serif; color:#000; display:flex; justify-content:space-between; gap:20px; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"⌄"; color:#666; font-size:18px; transition:.2s}
.faq details[open] summary::after{transform:rotate(180deg); color:#000}
.faq details[open] summary{padding-bottom:12px}
.faq .a{padding:0 0 20px; font:400 15px/1.7 'Roboto',sans-serif; color:#666; max-width:640px}
@media(max-width:560px){ .faq summary{padding:16px 0; font-size:15px} .faq .a{font-size:14px} }

/* ---------- CTA pas -> kalkulator ---------- */
.cta-band{margin-top:24px; background:#0F1707; background:linear-gradient(160deg,#0f2a17,#06120b); border-radius:16px; padding:clamp(24px,4vw,40px); text-align:center; color:#fff}
.cta-band h2{font:700 clamp(21px,3vw,28px)/1.2 'IBM Plex Sans',sans-serif; margin:0 0 10px; color:#fff}
.cta-band p{font:400 15px/1.6 'Roboto',sans-serif; color:#cfe3d6; margin:0 auto 20px; max-width:52ch}
.cta-band .btn{display:inline-flex; align-items:center; gap:8px; height:52px; padding:0 28px; border-radius:12px; background:#069B3D; color:#fff; font:700 16px/1 'IBM Plex Sans',sans-serif; text-decoration:none; transition:.15s}
.cta-band .btn:hover{background:#fff; color:#0f2a17}

/* ---------- povezane strani ---------- */
.related{margin-top:24px}
.related h2{font:700 20px/1.25 'IBM Plex Sans',sans-serif; color:#000; margin:0 0 14px}
.related ul{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:10px}
.related a{display:block; border:1px solid #E6E6E6; border-radius:12px; padding:14px 16px; text-decoration:none; color:#000; font:600 15px/1.35 'IBM Plex Sans',sans-serif; transition:.15s}
.related a small{display:block; font:400 13px/1.4 'Roboto',sans-serif; color:#666; margin-top:3px; font-weight:400}
.related a:hover{border-color:#069B3D}
@media(max-width:560px){ .related ul{grid-template-columns:1fr} }

/* ---------- footer ---------- */
footer{text-align:center; color:#666; font-size:13px; padding:34px 0 44px; margin-top:32px; border-top:1px solid #E6E6E6; line-height:1.7}
footer a{color:#000; font-weight:600}