/* Vika Pirnat — dodatki za spletno stran. Samo žetoni iz tokens.css; komponente so v bundle.css (kopija iz design sistema). */

html { scroll-padding-top: var(--space-4); }

/* Samo za bralnike zaslona */
.site-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Ime kot znak, povsod enako (glava, naslov na domači strani, noga): Bricolage Grotesque, veliki začetnici,
   na i-jih mirni, malo povečani zeleni piki z razmikom od črk */
.site-wm { font-family: "Bricolage Grotesque", var(--font-display); font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.site-wm__i { position: relative; display: inline-block; margin-inline: 0.035em; }
.site-wm__i::after { content: ""; position: absolute; left: 50%; top: -0.12em; width: 0.22em; height: 0.22em; margin-left: -0.11em; border-radius: 50%; background: var(--lime-line); }
.site-wm--sm { font-size: 17px; color: var(--ink); }
.site-wm--sm .site-wm__i::after { width: 4px; height: 4px; margin-left: -2px; top: -3px; }
.site-mark { display: inline-block; padding-block: 10px 4px; font-size: 28px; line-height: 1; color: var(--ink); text-decoration: none; }
.site-mark:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: var(--radius-s); }

/* Drobtinice */
.site-crumbs { padding-top: var(--space-4); }
.site-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; letter-spacing: 0.04em; color: var(--ink-dim); }
.site-crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--edge); }
.site-crumbs a { color: var(--ink-dim); text-decoration: none; }
.site-crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.site-crumbs [aria-current] { color: var(--ink); }

/* Nazaj in naprej na dnu podstrani */
.site-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); padding-block: var(--space-7) var(--space-6); }
.site-pager__link { display: grid; gap: 4px; justify-items: start; padding: var(--space-4) var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); color: var(--ink); text-decoration: none; transition: border-color .2s; }
.site-pager__link:hover { border-color: var(--edge); }
.site-pager__link--next { grid-column: 2; justify-items: end; text-align: right; }
.site-pager__k { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-dim); }
.site-pager__t { font-family: var(--font-display); font-size: 19px; line-height: 1.25; font-weight: 700; }
.site-footnav a { color: inherit; }

/* Blog */
.site-posts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.site-posts a { display: grid; gap: var(--space-1); padding-block: var(--space-5); border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.site-posts a:hover h2 { text-decoration: underline; text-underline-offset: 5px; }
.site-posts time { font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); }
.site-posts h2 { margin: 0; font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 28px); line-height: 1.2; font-weight: 700; }
.site-posts p { margin: 0; color: var(--ink-dim); }
.site-posts-empty { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; padding: 8px 14px; border: 1px dashed var(--edge); border-radius: 999px; font-family: var(--font-mono); font-size: 13px; color: var(--ink-dim); }
.site-post { max-width: var(--measure); padding-block: var(--space-7) var(--space-5); }
.site-post__head { display: grid; gap: var(--space-4); margin-bottom: var(--space-7); }
.site-post .vp-body h2 { margin: var(--space-7) 0 var(--space-3); font-family: var(--font-display); font-size: 26px; line-height: 1.2; font-weight: 700; color: var(--ink); }
.site-post .vp-body ul { padding-left: 1.2em; }
.site-post .vp-body li + li { margin-top: var(--space-2); }
.site-post .vp-body li::marker { color: var(--ink-dim); }
.site-refs { font-size: 14px; line-height: 1.55; color: var(--ink-dim); padding-left: 1.2em; }

/* Preskok na vsebino */
.site-skip { position: absolute; left: var(--space-4); top: -100px; z-index: 10; padding: 10px 14px; border-radius: var(--radius-m); background: var(--lime); color: var(--on-lime); font-weight: 600; text-decoration: none; }
.site-skip:focus { top: var(--space-3); }

/* Preklop jezika kot povezave (ločen URL za vsak jezik) */
.vp-lang a { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; padding: 5px 10px; border-radius: var(--radius-s); color: var(--ink-dim); text-decoration: none; }
.vp-lang a:hover { color: var(--ink); }
.vp-lang a[aria-current="true"] { background: var(--ink); color: var(--ground); }

/* Preklop teme v nogi */
/* Brez črte nad nogo: pas s kontaktom je čez celo širino, črta pa le v širini vsebine, zato je bila videti odrezana */
.vp-footer { align-items: center; border-top: 0; padding-top: var(--space-6); }
.site-theme { display: inline-flex; align-items: center; gap: var(--space-2); }

/* Oznaka »Kaj pove slika« ostane oznaka (v bundle.css jo povozi .vp-map__cap p) */
.vp-map__cap p.vp-eyebrow { font-size: 12px; }

/* Uvod brez slike */
.site-intro { padding-block: var(--space-7) var(--space-6); display: grid; gap: var(--space-5); max-width: var(--measure); }
.site-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.site-stack { display: grid; gap: var(--space-5); align-content: start; }
.site-more { margin: var(--space-6) 0 0; }

/* Ponudba */
.site-offer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.site-offer article { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); }
.site-offer h3 { margin: 0; }
.site-offer p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-dim); }
.site-offer ul { margin: 0; padding-left: 1.1em; display: grid; gap: var(--space-1); font-size: 16px; line-height: 1.5; color: var(--ink); }
.site-offer .vp-out { display: grid; gap: var(--space-1); padding-top: var(--space-3); border-top: 1px solid var(--line); font-size: 16px; line-height: 1.5; color: var(--ink); }

/* Case study: »Kaj to pomeni za vaš produkt« */
.site-takeaway { list-style: none; margin: 0; padding: var(--space-5) var(--space-6); display: grid; gap: var(--space-3); max-width: var(--measure); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); }
.site-takeaway li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-2); font-size: 17px; line-height: 1.55; color: var(--ink); }
.site-takeaway li::before { content: "→"; font-family: var(--font-mono); color: var(--lime-line); }

/* Seznam case studyjev */
.site-work { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.site-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: var(--space-6); align-items: center; padding: var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); }
.site-card:hover { border-color: var(--edge); }
.site-card__text { display: grid; gap: var(--space-3); justify-items: start; min-width: 0; }
.site-card__text p { margin: 0; }
.site-card h2 { margin: 0; font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.site-card h2 a { color: var(--ink); text-decoration: none; }
.site-card h2 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-l); }
.site-card h2 a:focus-visible { outline: none; }
.site-card:has(h2 a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.site-card__go { font-weight: 600; font-size: 15px; color: var(--link); text-decoration: underline; text-underline-offset: 5px; }
.site-card img { display: block; width: 100%; height: auto; border-radius: var(--radius-l); border: 1px solid var(--line); }
.site-card--soon { background: transparent; border-style: dashed; border-color: var(--edge); grid-template-columns: minmax(0, 1fr); }
.site-card--soon:hover { border-color: var(--edge); }
.site-card--soon h2 { color: var(--ink-dim); }

/* ---------- Domov = O meni ---------- */
.site-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: var(--space-8); align-items: center; padding-block: var(--space-8) var(--space-7); }
.site-hero__text { display: grid; gap: var(--space-5); justify-items: start; min-width: 0; }
.site-status { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; padding: 6px 12px 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-family: var(--font-mono); font-size: 12px; line-height: 1.4; letter-spacing: 0.02em; color: var(--ink); }
.site-dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lime-line); }
.site-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--lime-line); opacity: 0; animation: site-ping 2.4s ease-out infinite; }
@keyframes site-ping { 0% { transform: scale(0.6); opacity: 0.7; } 80%, 100% { transform: scale(1.6); opacity: 0; } }
.site-name { margin: 0; font-family: var(--font-display); font-size: clamp(52px, 8.4vw, 104px); line-height: 0.95; font-weight: 700; letter-spacing: -0.045em; color: var(--ink); text-wrap: balance; }
.site-role { display: block; margin-top: var(--space-4); font-size: clamp(20px, 2.4vw, 28px); line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; color: var(--lime-line); }
.site-photo { position: relative; margin: 0; width: 100%; max-width: 380px; justify-self: end; }
.site-photo::before { content: ""; position: absolute; inset: 0; transform: translate(14px, 14px); border: 1.5px solid var(--lime-line); border-radius: var(--radius-xl); }
.site-photo img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-xl); background: var(--raised); }
.site-photo__tag { position: absolute; z-index: 1; padding: 6px 12px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; line-height: 1.3; color: var(--ink); white-space: nowrap; box-shadow: 0 6px 18px rgb(0 0 0 / 0.18); }
.site-photo__tag--a { top: 9%; left: -28px; }
.site-photo__tag--b { top: 48%; right: -14px; }
.site-photo__tag--c { bottom: 8%; left: -16px; border-color: var(--lime-line); }
html.js .site-photo__tag { animation: site-float-in 0.7s cubic-bezier(.2,.7,.2,1) both; }
html.js .site-photo__tag--b { animation-delay: 0.15s; }
html.js .site-photo__tag--c { animation-delay: 0.3s; }
@keyframes site-float-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.site-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.site-stat { display: grid; gap: var(--space-1); align-content: start; padding: var(--space-6) var(--space-5) var(--space-6) 0; min-width: 0; }
.site-stat + .site-stat { padding-left: var(--space-5); border-left: 1px solid var(--line); }
.site-stat p { margin: 0; }
.site-stat__n { font-family: var(--font-display); font-size: clamp(40px, 5.4vw, 64px); line-height: 1; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.site-stat__l { font-size: 16px; line-height: 1.45; color: var(--ink); }
.site-stat__src { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-dim); }

.site-path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-5); }
.site-path li { position: relative; display: grid; gap: var(--space-1); align-content: start; padding-top: var(--space-5); border-top: 2px solid var(--line); min-width: 0; }
.site-path li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--ground); border: 2px solid var(--edge); }
.site-path li:nth-child(-n+2) { border-top-color: var(--lime-line); }
.site-path li:nth-child(-n+2)::before { background: var(--lime-line); border-color: var(--lime-line); }
.site-path__when { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-dim); }
.site-path b { font-family: var(--font-display); font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--ink); }
.site-path__org { font-size: 15px; font-weight: 600; color: var(--lime-line); }
.site-path p { margin: var(--space-2) 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-dim); }

.site-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 260px); gap: var(--space-7); align-items: center; padding: var(--space-7); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); }
.site-feature__text { display: grid; gap: var(--space-5); min-width: 0; }
.site-feature__lede { margin: 0; max-width: 46ch; font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 24px); line-height: 1.4; font-weight: 500; color: var(--ink); }
.site-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.site-facts li { display: grid; gap: 2px; padding-top: var(--space-3); border-top: 1px solid var(--line); }
.site-facts b { font-family: var(--font-display); font-size: 24px; line-height: 1.15; font-weight: 700; color: var(--lime-line); white-space: nowrap; }
.site-facts span { font-size: 14px; line-height: 1.45; color: var(--ink-dim); }
.site-feature .vp-phone { justify-self: center; }

.site-principles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); counter-reset: p; }
.site-principles li { counter-increment: p; display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); transition: border-color .2s, transform .2s; }
.site-principles li:hover { border-color: var(--edge); transform: translateY(-2px); }
.site-principles li::before { content: "0" counter(p); font-family: var(--font-mono); font-size: 12px; color: var(--lime-line); }
.site-principles h3 { margin: 0; font-family: var(--font-display); font-size: 19px; line-height: 1.3; font-weight: 700; color: var(--ink); }
.site-principles p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-dim); }

.site-skills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-7); }
.site-skills > div { display: grid; gap: var(--space-3); align-content: start; }
.site-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.site-chips li { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; line-height: 1.3; color: var(--ink); background: var(--surface); }
.site-chips--ai li { border-color: var(--lime-line); background: var(--lime-soft); }

/* ---------- Kako razmišljam: seznam konceptov, ki se odpre na klik ---------- */
.site-think { display: grid; gap: var(--space-6); }
.site-stage { display: none; }
@media (min-width: 900px) {
  html.js .site-think { grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); gap: var(--space-7); align-items: start; }
  html.js .site-stage { display: block; position: sticky; top: var(--space-5); }
  html.js .site-stage .site-acc__panel { grid-template-columns: minmax(0, 1fr); padding: 0; animation: site-float-in .3s ease both; }
  html.js .site-acc__icon { display: none; }
  html.js .site-acc__item summary { padding-inline: var(--space-3) 0; border-left: 2px solid transparent; transition: border-color .2s; }
  html.js .site-acc__item[open] summary { border-left-color: var(--lime-line); }
}
.site-concepts { display: grid; }
.site-concepts__group { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); margin: var(--space-6) 0 var(--space-2); font-family: var(--font-text); font-size: 15px; line-height: 1.4; font-weight: 400; color: var(--ink-dim); }
.site-concepts__group:first-child { margin-top: 0; }
.site-concepts__group span { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lime-line); }
.site-acc { border-top: 1px solid var(--line); }
.site-acc__item { border-bottom: 1px solid var(--line); }
.site-acc__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; cursor: pointer; list-style: none; }
.site-acc__item summary::-webkit-details-marker { display: none; }
.site-acc__item summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-s); }
.site-acc__name { font-family: var(--font-display); font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--ink); transition: color .2s; }
.site-acc__item summary:hover .site-acc__name, .site-acc__item[open] .site-acc__name { color: var(--lime-line); }
.site-acc__icon { position: relative; flex: none; width: 28px; height: 28px; border: 1px solid var(--edge); border-radius: 50%; }
.site-acc__icon::before, .site-acc__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; margin: -0.75px 0 0 -5.5px; background: var(--ink); transition: transform .2s; }
.site-acc__icon::after { transform: rotate(90deg); }
.site-acc__item[open] .site-acc__icon { border-color: var(--lime-line); }
.site-acc__item[open] .site-acc__icon::after { transform: rotate(0deg); }
.site-acc__panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; padding: 0 0 var(--space-5); }
.site-acc__item[open] .site-acc__panel { animation: site-float-in .35s ease both; }
.site-acc__fig { max-width: 560px; margin: 0; padding: var(--space-4); background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-l); }
.site-acc__fig svg { display: block; width: 100%; height: auto; }
.site-acc__text { display: grid; gap: var(--space-2); align-content: start; font-size: 15px; line-height: 1.55; color: var(--ink-dim); min-width: 0; }
.site-acc__text p, .site-acc__text ul { margin: 0; }
.site-acc__text ul { padding-left: 1.1em; display: grid; gap: 4px; }
.site-acc__text b { color: var(--ink); font-weight: 600; }
.site-acc__one { font-family: var(--font-display); font-size: 18px; line-height: 1.35; font-weight: 600; color: var(--ink); text-wrap: balance; }
.site-concept__src { margin: var(--space-1) 0 0; font-size: 13px; color: var(--ink-dim); }
.site-concept__src a { color: var(--ink-dim); text-underline-offset: 3px; }
.site-concept__src a:hover { color: var(--ink); }
/* Diagrami: barve iz žetonov, besedilo nikoli pod črtami */
.site-dia text { font-family: var(--font-mono); font-size: 11px; fill: var(--ink-dim); }
.site-dia .d-small { font-size: 10px; fill: var(--ink); }
.site-dia .d-ink { fill: var(--ink); }
.site-dia .d-lime { fill: var(--lime-line); }
.site-dia .d-mag { fill: var(--magenta); }
.site-dia .d-head { font-family: var(--font-display); font-size: 13px; font-weight: 700; fill: var(--ink); }
.site-dia .d-line { stroke: var(--edge); fill: none; stroke-width: 1.5; }
.site-dia .d-lime-s { stroke: var(--lime-line); fill: none; stroke-width: 2; }
.site-dia .d-mag-s { stroke: var(--magenta); fill: none; stroke-width: 2; }
.site-dia .d-fl { fill: var(--lime-line); }
.site-dia .d-soft { fill: var(--lime-soft); }
.site-dia .d-surf { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.site-dia .d-dim { fill: var(--edge); }

/* ---------- Kako delam ---------- */
.site-services { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.site-services li { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); transition: border-color .2s; }
.site-services li:hover { border-color: var(--edge); }
.site-services__when { margin: 0 0 var(--space-1); padding-left: var(--space-3); border-left: 2px solid var(--lime-line); font-size: 15px; line-height: 1.45; font-style: italic; color: var(--ink-dim); }
.site-services h3 { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 1.25; font-weight: 700; color: var(--ink); }
.site-services p:not(.site-services__when) { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-dim); }
.site-follow { display: grid; gap: var(--space-3); margin-top: var(--space-6); }

/* ---------- Case study ---------- */
.vp-hero { padding-block: var(--space-6) var(--space-7); align-items: center; }
.site-balance { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.site-balance li { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5); background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--lime-line); border-radius: var(--radius-l); }
.site-balance h3 { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 1.25; font-weight: 700; color: var(--ink); }
.site-balance p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-dim); }

.site-shortcuts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.site-shortcuts li { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: var(--space-5); align-items: baseline; padding-block: var(--space-4); border-bottom: 1px solid var(--line); }
.site-shortcuts__no { margin: 0; font-family: var(--font-mono); font-size: 15px; line-height: 1.5; color: var(--ink-dim); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--magenta) 45%, transparent); text-decoration-thickness: 1px; }
.site-shortcuts__yes { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-dim); }
.site-shortcuts__yes b { font-weight: 600; color: var(--ink); }
.site-shortcuts__yes b::before { content: "→ "; color: var(--lime-line); }

/* Diagram poteka: ob prihodu v pogled se koraki prižgejo eden za drugim */
.site-flow { margin: var(--space-7) 0 0; padding: var(--space-6); display: grid; gap: var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); }
.site-flow__head { display: grid; gap: var(--space-1); }
.site-flow__title { margin: 0; font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 26px); line-height: 1.25; font-weight: 700; color: var(--ink); }
.site-flow__track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-4); }
.site-flow__track li { position: relative; display: grid; gap: 4px; align-content: start; padding-top: var(--space-6); min-width: 0; }
.site-flow__track li::before { content: ""; position: absolute; top: 0; left: 0; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; background: var(--lime-line); border: 2px solid var(--lime-line); transition: background .35s, border-color .35s; transition-delay: calc(var(--i, 0) * 260ms); }
.site-flow__track li::after { content: ""; position: absolute; top: 7px; left: 22px; width: calc(100% + var(--space-4) - 26px); height: 2px; background: linear-gradient(to right, var(--lime-line) 50%, var(--line) 50%) left / 200% 100% no-repeat; transition: background-position .3s linear; transition-delay: calc(var(--i, 0) * 260ms + 120ms); }
.site-flow__track li:last-child::after { display: none; }
.site-flow__key::before { box-shadow: 0 0 0 5px var(--lime-soft); }
.site-flow__when { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em; color: var(--ink-dim); }
.site-flow__track b { font-family: var(--font-display); font-size: 17px; line-height: 1.3; font-weight: 700; color: var(--ink); }
.site-flow__loopstep b::after { content: " ↻"; color: var(--lime-line); }
.site-flow__track span:not(.site-flow__when) { font-size: 14px; line-height: 1.5; color: var(--ink-dim); }
.site-flow__loop { display: grid; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px dashed var(--line); }
.site-flow__loop ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); }
.site-flow__loop ol::after { content: "↻"; font-size: 18px; line-height: 1; color: var(--lime-line); }
.site-flow__loop li { position: relative; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--lime-line); background: var(--lime-soft); font-size: 14px; line-height: 1.3; color: var(--ink); transition: border-color .35s, background .35s; transition-delay: calc(1.5s + var(--j, 0) * 200ms); }
.site-flow__loop li::after { content: "→"; position: absolute; right: calc(-1 * var(--space-6) + 6px); top: 50%; transform: translateY(-50%); color: var(--ink-dim); }
.site-flow__loop li:last-child::after { right: auto; left: calc(100% + 8px); content: ""; }
html.js .site-flow:not(.is-in) .site-flow__track li::before { background: var(--surface); border-color: var(--edge); }
html.js .site-flow:not(.is-in) .site-flow__track li::after { background-position: right; }
html.js .site-flow:not(.is-in) .site-flow__loop li { border-color: var(--line); background: var(--ground); }

/* Gumba za prenos aplikacije: Google Play deluje, App Store je v pripravi (utripa) */
.site-stores { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
/* Uradni gumb Google Play: nespremenjen; prozoren rob v sliki je del predpisanega praznega prostora */
.site-store-badge { display: inline-block; line-height: 0; border-radius: var(--radius-m); }
.site-store-badge img { display: block; width: auto; height: 72px; margin-block: -8px; }
/* Angleški gumb ima večji prozoren rob (41 px namesto 29 px), zato je slika večja, vidni gumb pa enako velik kot slovenski */
.site-store-badge--en img { height: 82px; margin-block: -13px; }
.site-store-badge:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.site-store { display: inline-grid; gap: 2px; min-width: 176px; padding: 10px 16px; border: 1px solid var(--edge); border-radius: var(--radius-m); color: var(--ink); text-decoration: none; transition: border-color .2s; }
a.site-store:hover { border-color: var(--ink); }
.site-store__k { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); }
.site-store__n { font-family: var(--font-display); font-size: 18px; line-height: 1.2; font-weight: 700; }
.site-store--soon { border-style: dashed; color: var(--ink-dim); cursor: default; }
.site-dot--soon { width: 7px; height: 7px; background: var(--magenta); }
.site-dot--soon::after { border-color: var(--magenta); }

/* Odprta za delo (kontakt) */
.site-open { margin: 0; padding: var(--space-3) var(--space-4); max-width: var(--measure); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--lime-line); border-radius: var(--radius-m); color: var(--ink); font-size: 16px; line-height: 1.5; }

/* Pojav ob drsenju (samo z JS; brez gibanja, če ga obiskovalec ne želi) */
html.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 90ms); }
html.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  html.js .site-photo__tag, .site-dot::after { animation: none; }
  .site-flow__track li::before, .site-flow__track li::after, .site-flow__loop li { transition: none; }
  .site-acc__item[open] .site-acc__panel, html.js .site-stage .site-acc__panel { animation: none; }
  .site-principles li:hover { transform: none; }
}

/* Kontaktna stran */
.site-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-7); padding-block: var(--space-7) var(--space-8); align-items: start; }

@media (max-width: 1060px) and (min-width: 821px) {
  .site-path { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-6); }
  .site-principles, .site-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Povezave v glavi gredo na telefonu v eno vrstico; fotografija je manjša, oznake skrite (ista dejstva so v poklicni poti) */
@media (max-width: 560px) {
  .site-photo { max-width: 190px; }
  .site-photo::before { transform: translate(10px, 10px); }
  .site-photo__tag { display: none; }
  .site-hero { gap: var(--space-6); }
}
@media (max-width: 480px) {
  .vp-header__nav { gap: 6px 12px; font-size: 12px; }
  .vp-header__nav a { padding-block: 6px; }
}

@media (max-width: 820px) {
  .site-intro { padding-block: var(--space-6) var(--space-5); }
  .site-offer { grid-template-columns: minmax(0, 1fr); }
  .site-card { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding: var(--space-5); }
  .site-card img { max-width: 160px; }
  .site-contact { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding-block: var(--space-6) var(--space-7); }
  .site-hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); padding-block: var(--space-6) var(--space-6); }
  .site-photo { order: -1; justify-self: start; max-width: 260px; margin-left: 4px; }
  .site-photo__tag--a { left: auto; right: -12px; top: 8%; }
  .site-photo__tag--b { right: -12px; }
  .site-photo__tag--c { left: auto; right: -12px; }
  .site-stats { grid-template-columns: minmax(0, 1fr); }
  .site-stat { padding: var(--space-5) 0; }
  .site-stat + .site-stat { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .site-path { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .site-path li { padding: 0 0 var(--space-6) var(--space-6); border-top: 0; border-left: 2px solid var(--line); }
  .site-path li:nth-child(-n+2) { border-left-color: var(--lime-line); }
  .site-path li::before { top: 0; left: -7px; }
  .site-path li:last-child { padding-bottom: 0; }
  .site-feature { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding: var(--space-5); }
  .site-facts { grid-template-columns: minmax(0, 1fr); }
  .site-principles, .site-skills, .site-services, .site-balance { grid-template-columns: minmax(0, 1fr); }
  .site-acc__panel { grid-template-columns: minmax(0, 1fr); }
  .site-shortcuts li { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .site-pager { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-6) var(--space-5); }
  .vp-hero { padding-block: var(--space-5) var(--space-6); }
  .site-pager__link--next { grid-column: auto; }
  .site-flow { padding: var(--space-5); }
  .site-flow__track { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .site-flow__track li { padding: 0 0 0 var(--space-6); }
  .site-flow__track li::before { top: 2px; }
  .site-flow__track li::after { top: 24px; left: 7px; width: 2px; height: calc(100% + var(--space-5) - 26px); background: linear-gradient(to bottom, var(--lime-line) 50%, var(--line) 50%) top / 100% 200% no-repeat; }
  html.js .site-flow:not(.is-in) .site-flow__track li::after { background-position: bottom; }
  .vp-contact { padding: var(--space-5); }
}