/* =====================================================================
   Ritter+ — slog spletne strani
   Barve, pisave in mere so zbrane v :root. Barva podjetja je turkizna
   --c-akcent (iz logotipa); za besedilo na svetli podlagi se uporablja
   temnejša --c-akcent-temen, ker svetla turkizna na beli ni berljiva.
   ===================================================================== */

/* Pisava naslovov: Barlow Semi Condensed 700 (licenca SIL OFL, pisave/OFL.txt),
   naložena s strani — enak videz na računalnikih, iPhonih in Androidih.
   latin-ext vsebuje č, š, ž; brskalnik naloži le del, ki ga potrebuje. */
@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../pisave/barlow-semi-condensed-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../pisave/barlow-semi-condensed-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --c-temna: #0d1010;
  --c-temna-2: #151a1a;
  --c-temna-3: #252b2b;
  --c-besedilo: #1a1f1f;
  --c-sivo: #55605e;
  --c-ozadje: #f2f4f3;
  --c-ozadje-2: #e5eae8;
  --c-belo: #ffffff;
  --c-crta: #d6dcda;
  --c-crta-mocna: #b9c3c0;
  --c-akcent: #05f2be;
  --c-akcent-hover: #50f6d2;
  --c-akcent-temen: #00735c;
  --c-akcent-svetel: #d7fbf1;
  --c-na-temni: #e8eeec;
  --c-na-temni-sivo: #9eaaa7;
  --c-napaka: #b42318;
  /* označba za podatke, ki jih je treba še vpisati (namenoma oranžna, da izstopa) */
  --c-ph: #b54708;
  --c-ph-ozadje: #fff1e0;
  --c-ph-crta: #f08c00;
  /* obroba ob fokusu s tipkovnico: temna turkizna na svetlem, svetla na temnem */
  --c-fokus: var(--c-akcent-temen);
  /* barve logotipa */
  --logo-scit: var(--c-akcent);
  --logo-crte: var(--c-temna);
  --logo-plus: var(--c-akcent);

  --pisava-naslovi: "Barlow Semi Condensed", "Bahnschrift", "Arial Narrow", sans-serif;
  --pisava: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

  --sirina: 1200px;
  --rob: clamp(16px, 4vw, 40px);
  --zaobljeno: 6px;
  --zaobljeno-v: 12px;
  --senca: 0 1px 2px rgba(27, 31, 34, .06), 0 8px 24px rgba(27, 31, 34, .08);
  --senca-v: 0 2px 4px rgba(27, 31, 34, .06), 0 18px 40px rgba(27, 31, 34, .14);
  --glava-visina: 72px;

  color-scheme: light;
}

/* ---------- osnova ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--glava-visina) + 12px);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--pisava);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--c-besedilo);
  background: var(--c-ozadje);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.meni-odprt { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  font-family: var(--pisava-naslovi);
  font-variation-settings: "wdth" 88;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.01em;
  color: inherit;
  text-wrap: balance;
}

h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }

.vrh, .glava, .uvod, .sekcija--temna, .kontakt__kartica, .noga, .akcije-mobil, .pregled { --c-fokus: var(--c-akcent); }

:focus-visible {
  outline: 3px solid var(--c-fokus);
  outline-offset: 3px;
  border-radius: 2px;
}

.ovoj {
  width: min(100% - 2 * var(--rob), var(--sirina));
  margin-inline: auto;
}

.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.preskok {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--c-akcent);
  color: var(--c-temna);
  font-weight: 700;
  border-radius: var(--zaobljeno);
  text-decoration: none;
}
.preskok:focus { top: 12px; }

.ikona {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Označba za podatke, ki jih morate še vpisati (glej NAVODILA.txt). */
.ph {
  padding: 0 4px;
  border-radius: 2px;
  border-bottom: 2px dashed var(--c-ph-crta);
  background: var(--c-ph-ozadje);
  color: var(--c-ph);
  font-weight: 600;
}

/* ---------- gumbi ---------- */

.gumb {
  --g-ozadje: var(--c-akcent);
  --g-barva: var(--c-temna);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  border: 2px solid var(--g-ozadje);
  border-radius: var(--zaobljeno);
  background: var(--g-ozadje);
  color: var(--g-barva);
  font: 700 1rem/1.1 var(--pisava);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, transform .15s;
}
.gumb:hover { --g-ozadje: var(--c-akcent-hover); }
.gumb:active { transform: translateY(1px); }
.gumb .ikona { width: 20px; height: 20px; stroke-width: 2; }
.gumb[disabled] { opacity: .6; cursor: progress; }

.gumb--temen { --g-ozadje: var(--c-temna); --g-barva: #fff; }
.gumb--temen:hover { --g-ozadje: #000; }

.gumb--obroba {
  background: transparent;
  border-color: currentColor;
  color: var(--c-temna);
}
.gumb--obroba:hover { background: rgba(27, 31, 34, .06); }

.gumb--majhen { min-height: 42px; padding: 9px 18px; font-size: .95rem; }

/* ---------- zgornji pas ---------- */

.vrh {
  background: #000;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  color: var(--c-na-temni-sivo);
  font-size: .875rem;
}
.vrh .ovoj {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 40px;
}
.vrh__levo { display: flex; gap: 28px; }
.vrh a, .vrh span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.vrh a:hover { color: #fff; }
.vrh .ikona { width: 16px; height: 16px; color: var(--c-akcent); }

@media (max-width: 860px) {
  .vrh { display: none; }
}

/* ---------- glava ---------- */

.glava {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(13, 16, 16, .94);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  color: var(--c-na-temni);
  transition: border-color .2s, box-shadow .2s;
}
.glava.je-pomaknjena {
  border-bottom-color: rgba(255, 255, 255, .1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}
.glava .gumb--obroba { color: #fff; border-color: rgba(255, 255, 255, .35); }
.glava .gumb--obroba:hover { background: rgba(255, 255, 255, .08); border-color: #fff; }
.glava .ovoj {
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--glava-visina);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  color: #fff;
  text-decoration: none;
}
/* ščit 100 x 116, napis 929 x 121 (razmerji iz slike/logo-*.svg) */
.logo__znak { width: 37px; height: 43px; }
.logo__besedilo { display: flex; flex-direction: column; line-height: 1; }
.logo__napis { width: 146px; height: 19px; }
/* podnapis ZAKLJUČNA GRADBENA DELA je v krivuljah (simbol logo-opis), širok kot napis;
   višina vključuje strešico nad Č (2,05 px nad velikimi črkami), razmik do velikih črk je 8 px */
.logo__opis {
  width: 146px;
  height: 8.56px;
  margin-top: 5.95px;
  color: var(--c-na-temni-sivo);
}

.meni { margin-left: auto; }
.meni ul { display: flex; gap: 2px; }
.meni a {
  position: relative;
  display: block;
  padding: 10px 12px;
  border-radius: var(--zaobljeno);
  font-weight: 600;
  font-size: .96rem;
  color: var(--c-na-temni-sivo);
  text-decoration: none;
  transition: color .15s;
}
.meni a:hover { color: #fff; }
.meni a::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 4px;
  height: 2px;
  background: var(--c-akcent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s;
}
.meni a:hover::after,
.meni a[aria-current="true"]::after { transform: scaleX(1); }
.meni a[aria-current="true"] { color: #fff; }
.meni__cta { display: none; }

.glava__cta { flex-shrink: 0; }

.gumb-meni {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, .25);
  border-radius: var(--zaobljeno);
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.gumb-meni:hover { border-color: rgba(255, 255, 255, .6); }
.gumb-meni .ikona { width: 24px; height: 24px; }
.gumb-meni__zapri { display: none; }
.gumb-meni[aria-expanded="true"] .gumb-meni__odpri { display: none; }
.gumb-meni[aria-expanded="true"] .gumb-meni__zapri { display: block; }

@media (max-width: 1080px) {
  .gumb-meni { display: inline-flex; }
  .glava__cta { margin-left: auto; }

  .meni {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    height: calc(100vh - var(--glava-visina));
    height: calc(100dvh - var(--glava-visina));
    margin: 0;
    padding: 8px var(--rob) 120px;
    overflow-y: auto;
    background: var(--c-temna);
    border-top: 1px solid rgba(255, 255, 255, .08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s, transform .2s, visibility 0s .2s;
  }
  .meni-odprt .meni {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .2s, transform .2s;
  }
  .meni ul { flex-direction: column; gap: 0; }
  .meni a {
    padding: 16px 4px;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    color: #fff;
    font-family: var(--pisava-naslovi);
    font-variation-settings: "wdth" 88;
    font-size: 1.4rem;
    font-weight: 700;
  }
  .meni a::after { display: none; }
  .meni__cta { display: block; margin-top: 24px; }
  .meni__cta a.gumb {
    display: flex;
    width: 100%;
    border-bottom: 2px solid var(--g-ozadje);
    border-radius: var(--zaobljeno);
    padding: 14px 22px;
    font-family: var(--pisava);
    font-size: 1.05rem;
  }
}

@media (max-width: 640px) {
  .glava__cta { display: none; }
  .gumb-meni { margin-left: auto; }
}

/* ---------- uvod (hero) ---------- */

.uvod {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--c-temna);
  color: var(--c-na-temni);
}
.uvod::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 75% at 72% 35%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 75% at 72% 35%, #000 25%, transparent 78%);
}
.uvod::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 760px; height: 760px;
  right: -220px; top: -300px;
  background: radial-gradient(circle, rgba(5, 242, 190, .16), transparent 62%);
}
.uvod .ovoj {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
  padding-block: clamp(56px, 9vw, 116px);
}

.nadnaslov {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-akcent-temen);
}
.nadnaslov::before {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
}
.uvod .nadnaslov,
.sekcija--temna .nadnaslov { color: var(--c-akcent); }

.uvod h1 {
  margin-bottom: 24px;
  font-size: clamp(2.5rem, 5.6vw, 4.4rem);
  font-variation-settings: "wdth" 80;
  line-height: 1;
  color: #fff;
}
.uvod h1 em { font-style: normal; color: var(--c-akcent); }

.uvod__uvodnik {
  max-width: 56ch;
  margin-bottom: 32px;
  font-size: clamp(1.06rem, 1.6vw, 1.22rem);
  color: var(--c-na-temni-sivo);
}
.uvod__gumbi {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 36px;
}
.uvod .gumb--obroba { color: #fff; border-color: rgba(255, 255, 255, .35); }
.uvod .gumb--obroba:hover { background: rgba(255, 255, 255, .08); border-color: #fff; }

.kljukice {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  font-size: .95rem;
}
.kljukice li { display: flex; align-items: center; gap: 8px; }
.kljukice .ikona { width: 18px; height: 18px; color: var(--c-akcent); stroke-width: 2.4; }

/* kartica "ena ekipa" */
.veriga {
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--zaobljeno-v);
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  box-shadow: 0 30px 60px rgba(0, 0, 0, .32);
}
.veriga__glava {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.veriga__naslov {
  margin: 0;
  font-family: var(--pisava-naslovi);
  font-variation-settings: "wdth" 88;
  font-weight: 700;
  font-size: 1.35rem;
  color: #fff;
}
.veriga__oznaka {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-na-temni-sivo);
}
.veriga ol { position: relative; }
.veriga ol::before {
  content: "";
  position: absolute;
  left: 21px; top: 34px; bottom: 34px;
  border-left: 2px dashed rgba(5, 242, 190, .45);
}
.veriga li {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: center;
  padding: 12px 0;
}
.veriga__st {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 2px solid var(--c-akcent);
  border-radius: 50%;
  background: var(--c-temna);
  font-family: var(--pisava-naslovi);
  font-weight: 700;
  color: #fff;
}
.veriga li strong {
  display: block;
  font-family: var(--pisava-naslovi);
  font-variation-settings: "wdth" 88;
  font-size: 1.15rem;
  color: #fff;
}
.veriga__opis { font-size: .92rem; color: var(--c-na-temni-sivo); }
.veriga__noga {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .92rem;
  color: var(--c-na-temni);
}
.veriga__noga .ikona { width: 20px; height: 20px; color: var(--c-akcent); }

.opozorilo {
  height: 10px;
  background: repeating-linear-gradient(-45deg, var(--c-akcent) 0 16px, var(--c-temna) 16px 32px);
}

@media (max-width: 960px) {
  .uvod .ovoj { grid-template-columns: 1fr; }
}

/* ---------- sekcije ---------- */

.sekcija { padding-block: clamp(64px, 9vw, 120px); }
.sekcija--bela { background: var(--c-belo); }
.sekcija--temna { background: var(--c-temna); color: var(--c-na-temni); }
.sekcija--temna h2 { color: #fff; }

.sekcija__glava {
  max-width: 720px;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.sekcija__glava p { margin: 0; font-size: 1.125rem; color: var(--c-sivo); }
.sekcija--temna .sekcija__glava p { color: var(--c-na-temni-sivo); }
.sekcija__glava--sredina { margin-inline: auto; text-align: center; }

/* ---------- storitve ---------- */

.storitve {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.storitev {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px;
  overflow: hidden;
  border: 1px solid var(--c-crta);
  border-radius: var(--zaobljeno-v);
  background: var(--c-belo);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.storitev::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: var(--c-akcent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s;
}
.storitev:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: var(--senca-v);
}
.storitev:hover::before { transform: scaleX(1); z-index: 1; }
/* slika storitve (številka, ikona in naslov so v sliki; h3 je za bralnike zaslona in Google) */
.storitev__slika {
  display: block;
  width: calc(100% + 56px);
  max-width: none;
  height: auto;
  margin: -28px -28px 24px;
  background: var(--c-temna);
}
.storitev h3 { margin-bottom: 10px; font-size: 1.5rem; }
.storitev > p { margin-bottom: 18px; color: var(--c-sivo); }

.seznam { display: grid; gap: 8px; margin-bottom: 24px; }
.seznam li { display: flex; align-items: flex-start; gap: 10px; font-size: .97rem; }
.seznam .ikona {
  width: 18px; height: 18px;
  margin-top: 3px;
  color: var(--c-akcent-temen);
  stroke-width: 2.4;
}

.storitev__povezava {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--c-crta);
  font-weight: 700;
  color: var(--c-temna);
  text-decoration: none;
}
.storitev__povezava .ikona {
  width: 18px; height: 18px;
  color: var(--c-akcent-temen);
  stroke-width: 2.2;
  transition: transform .2s;
}
.storitev__povezava:hover { color: var(--c-akcent-temen); }
.storitev__povezava:hover .ikona { transform: translateX(4px); }

@media (max-width: 1000px) {
  .storitve { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .storitve { grid-template-columns: 1fr; }
}

/* ---------- zakaj ---------- */

.zakaj {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(36px, 6vw, 80px);
  align-items: start;
}
.zakaj__uvod p { font-size: 1.125rem; color: var(--c-na-temni-sivo); margin-bottom: 28px; }
.zakaj__gumbi { display: flex; flex-wrap: wrap; gap: 12px; }
.zakaj .gumb--obroba { color: #fff; border-color: rgba(255, 255, 255, .35); }
.zakaj .gumb--obroba:hover { background: rgba(255, 255, 255, .08); border-color: #fff; }

.zakaj__seznam {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--c-temna-3);
  border-radius: var(--zaobljeno-v);
  background: var(--c-temna-3);
}
.zakaj__tocka { padding: 28px; background: var(--c-temna); }
.zakaj__tocka .ikona { width: 32px; height: 32px; margin-bottom: 16px; color: var(--c-akcent); }
.zakaj__tocka h3 { margin-bottom: 8px; font-size: 1.25rem; color: #fff; }
.zakaj__tocka p { margin: 0; font-size: .97rem; color: var(--c-na-temni-sivo); }

@media (max-width: 900px) {
  .zakaj { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .zakaj__seznam { grid-template-columns: 1fr; }
}

/* ---------- postopek ---------- */

.koraki {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  counter-reset: korak;
}
.korak { position: relative; padding-top: 76px; }
.korak::before {
  counter-increment: korak;
  content: "0" counter(korak);
  position: absolute;
  top: 0; left: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--c-temna);
  font-family: var(--pisava-naslovi);
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
}
.korak:last-child::before { background: var(--c-akcent); color: var(--c-temna); }
.korak::after {
  content: "";
  position: absolute;
  top: 27px; left: 68px; right: -12px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--c-crta-mocna) 0 8px, transparent 8px 14px);
}
.korak:last-child::after { display: none; }
.korak h3 { margin-bottom: 8px; font-size: 1.3rem; }
.korak p { margin: 0; font-size: .97rem; color: var(--c-sivo); }

@media (max-width: 900px) {
  .koraki { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; }
  .korak:nth-child(2)::after { display: none; }
}
@media (max-width: 560px) {
  .koraki { grid-template-columns: 1fr; row-gap: 32px; }
  .korak { min-height: 56px; padding: 4px 0 0 76px; }
  .korak::after,
  .korak:nth-child(2)::after {
    display: block;
    top: 64px; bottom: -28px; left: 27px; right: auto;
    width: 2px; height: auto;
    background: repeating-linear-gradient(180deg, var(--c-crta-mocna) 0 8px, transparent 8px 14px);
  }
  .korak:last-child::after { display: none; }
}

/* ---------- reference: pred / po ---------- */

.reference {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  margin-bottom: clamp(64px, 8vw, 96px);
}
.reference__besedilo p { color: var(--c-sivo); font-size: 1.08rem; }

.pred-po {
  --pozicija: 50%;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--zaobljeno-v);
  background: var(--c-ozadje-2);
  box-shadow: var(--senca-v);
  -webkit-user-select: none;
  user-select: none;
}
.pred-po__slika {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.pred-po__pred { clip-path: inset(0 calc(100% - var(--pozicija)) 0 0); }
.pred-po input {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  touch-action: pan-y;
}
.pred-po__rocaj {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pozicija);
  z-index: 2;
  width: 3px;
  margin-left: -1.5px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
  pointer-events: none;
}
.pred-po__krog {
  position: absolute;
  top: 50%; left: 50%;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: #fff;
  color: var(--c-temna);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}
.pred-po__krog .ikona { stroke-width: 2.2; }
.pred-po input:focus-visible ~ .pred-po__rocaj .pred-po__krog {
  outline: 3px solid var(--c-akcent);
  outline-offset: 3px;
}
.pred-po__oznaka {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 2;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(27, 31, 34, .78);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  pointer-events: none;
}
.pred-po__oznaka--po { left: auto; right: 16px; background: var(--c-akcent); color: var(--c-temna); }

@media (max-width: 900px) {
  .reference { grid-template-columns: 1fr; }
}

/* ---------- galerija ---------- */

.galerija__glava {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
.galerija__glava h3 { margin: 0; font-size: 1.75rem; }

.filtri { display: flex; flex-wrap: wrap; gap: 8px; }
.filtri button {
  min-height: 40px;
  padding: 9px 16px;
  border: 1.5px solid var(--c-crta-mocna);
  border-radius: 999px;
  background: transparent;
  color: var(--c-besedilo);
  font: 600 .92rem/1 var(--pisava);
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.filtri button:hover { border-color: var(--c-temna); }
.filtri button[aria-pressed="true"] {
  border-color: var(--c-temna);
  background: var(--c-temna);
  color: #fff;
}

.galerija {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.galerija li[hidden] { display: none; }
.galerija__slika {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--zaobljeno);
  background: var(--c-temna);
  cursor: zoom-in;
}
.galerija__slika img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.galerija__slika:hover img { transform: scale(1.04); }
.galerija__napis {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 36px 14px 12px;
  background: linear-gradient(rgba(16, 18, 20, 0), rgba(16, 18, 20, .7) 40%, rgba(16, 18, 20, .92));
  color: #fff;
  font: 600 .92rem/1.3 var(--pisava);
  text-align: left;
}
.galerija__napis small {
  display: block;
  margin-bottom: 2px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-akcent);
}

@media (max-width: 1000px) {
  .galerija { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .galerija { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .galerija__napis { padding: 24px 10px 8px; font-size: .82rem; }
}

/* ---------- pregled fotografij (lightbox) ---------- */

.pregled {
  width: min(1100px, 94vw);
  max-width: none;
  max-height: 96vh;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  overflow: visible;
}
.pregled::backdrop { background: rgba(12, 14, 16, .9); }
.pregled__vrh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.pregled__stevec { font-size: .9rem; color: var(--c-na-temni-sivo); }
.pregled__okvir { position: relative; }
.pregled__okvir img {
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--zaobljeno);
  background: #111;
}
.pregled__napis { margin: 12px 0 0; font-weight: 600; }
.pregled button {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--c-temna);
  cursor: pointer;
}
.pregled button:hover { background: #fff; }
.pregled__gumb {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.pregled__gumb--nazaj { left: 12px; }
.pregled__gumb--naprej { right: 12px; }
.pregled button .ikona { stroke-width: 2.2; }

/* ---------- o nas ---------- */

.o-nas {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(36px, 6vw, 80px);
  align-items: start;
}
.o-nas__besedilo p { font-size: 1.1rem; }
.o-nas__besedilo p.o-nas__poudarek {
  margin-top: 28px;
  padding-left: 20px;
  border-left: 4px solid var(--c-akcent);
  font-family: var(--pisava-naslovi);
  font-variation-settings: "wdth" 88;
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.3;
  color: var(--c-temna);
}

.dejstva {
  padding: 28px;
  border: 1px solid var(--c-crta);
  border-radius: var(--zaobljeno-v);
  background: var(--c-ozadje);
}
.dejstva h3 { margin-bottom: 8px; font-size: 1.25rem; }
.dejstva dl { margin: 0 0 24px; }
.dejstva dl div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-crta);
}
.dejstva dt {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-sivo);
  padding-top: 2px;
}
.dejstva dd { margin: 0; }
.dejstva .gumb { width: 100%; }

@media (max-width: 900px) {
  .o-nas { grid-template-columns: 1fr; }
}

/* ---------- vprašanja ---------- */

.vprasanja {
  display: grid;
  gap: 12px;
  max-width: 860px;
  margin-inline: auto;
}
.vprasanje {
  border: 1px solid var(--c-crta);
  border-radius: var(--zaobljeno-v);
  background: var(--c-belo);
  transition: border-color .2s, box-shadow .2s;
}
.vprasanje[open] { border-color: var(--c-crta-mocna); box-shadow: var(--senca); }
.vprasanje summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  list-style: none;
  cursor: pointer;
  font-family: var(--pisava-naslovi);
  font-variation-settings: "wdth" 88;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--c-temna);
}
.vprasanje summary::-webkit-details-marker { display: none; }
.vprasanje summary:focus-visible { outline-offset: -3px; border-radius: var(--zaobljeno-v); }
.vprasanje__znak {
  position: relative;
  flex: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--c-ozadje-2);
  transition: background-color .2s;
}
.vprasanje__znak::before,
.vprasanje__znak::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 2px;
  margin: -1px 0 0 -6px;
  background: var(--c-temna);
  transition: transform .25s;
}
.vprasanje__znak::after { transform: rotate(90deg); }
.vprasanje[open] .vprasanje__znak { background: var(--c-akcent); }
.vprasanje[open] .vprasanje__znak::after { transform: rotate(0deg); }
.vprasanje__odgovor { padding: 0 24px 22px; color: var(--c-sivo); }
.vprasanje__odgovor p:last-child { margin: 0; }

/* ---------- kontakt ---------- */

.kontakt {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 24px;
  align-items: start;
}

.kontakt__kartica {
  position: relative;
  overflow: hidden;
  padding: 32px 32px 40px;
  border-radius: var(--zaobljeno-v);
  background: var(--c-temna);
  color: var(--c-na-temni);
}
.kontakt__kartica::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 8px;
  background: repeating-linear-gradient(-45deg, var(--c-akcent) 0 14px, var(--c-temna) 14px 28px);
}
.kontakt__kartica h3 { font-size: 1.4rem; color: #fff; }
.kontakt__seznam { display: grid; gap: 20px; margin: 24px 0 28px; }
.kontakt__seznam li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: center;
}
.kontakt__ikona {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--zaobljeno);
  background: rgba(5, 242, 190, .12);
  color: var(--c-akcent);
}
.kontakt__ikona .ikona { width: 22px; height: 22px; }
.kontakt__oznaka {
  display: block;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-na-temni-sivo);
}
.kontakt__vrednost {
  font-weight: 600;
  font-size: 1.05rem;
  color: #fff;
  text-decoration: none;
}
a.kontakt__vrednost:hover { color: var(--c-akcent); }
.kontakt__opomba {
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--c-temna-3);
  font-size: .92rem;
  color: var(--c-na-temni-sivo);
}

.obrazec,
.uspeh {
  padding: clamp(22px, 4vw, 36px);
  border: 1px solid var(--c-crta);
  border-radius: var(--zaobljeno-v);
  background: var(--c-belo);
  box-shadow: var(--senca);
}
.obrazec__vrsta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}
.polje {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}
.polje > label,
.polje > legend { padding: 0; font-weight: 600; font-size: .95rem; color: var(--c-temna); }
.obvezno { color: var(--c-akcent-temen); }
.polje input:not([type="checkbox"]),
.polje select,
.polje textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1.5px solid var(--c-crta-mocna);
  border-radius: var(--zaobljeno);
  background: var(--c-belo);
  color: var(--c-besedilo);
  font: inherit;
  font-size: 1rem;
  transition: border-color .15s, box-shadow .15s;
}
.polje textarea { min-height: 140px; resize: vertical; }
.polje input:not([type="checkbox"]):hover,
.polje select:hover,
.polje textarea:hover { border-color: #93a09c; }
.polje input:not([type="checkbox"]):focus,
.polje select:focus,
.polje textarea:focus {
  outline: none;
  border-color: var(--c-akcent-temen);
  box-shadow: 0 0 0 4px rgba(5, 242, 190, .3);
}
.polje [aria-invalid="true"] { border-color: var(--c-napaka); }
.napaka { margin: 0; font-size: .88rem; font-weight: 600; color: var(--c-napaka); }
.napaka:empty { display: none; }

.cipi { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.cip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border: 1.5px solid var(--c-crta-mocna);
  border-radius: 999px;
  font-size: .93rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: border-color .15s, background-color .15s;
}
.cip:hover { border-color: #93a09c; }
.cip input {
  flex: none;
  width: 18px; height: 18px;
  margin: 0;
  border: 1.5px solid var(--c-crta-mocna);
  border-radius: 4px;
  background: #fff center / 14px no-repeat;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.cip input:checked {
  border-color: var(--c-akcent-temen);
  background-color: var(--c-akcent-temen);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.cip input:focus-visible { outline: 3px solid var(--c-fokus); outline-offset: 2px; }
.cip:has(input:checked) { border-color: var(--c-akcent-temen); background: var(--c-akcent-svetel); }
.cip.utrip { animation: utrip 1.2s ease; }
@keyframes utrip {
  0%, 100% { box-shadow: 0 0 0 0 rgba(5, 242, 190, 0); }
  30% { box-shadow: 0 0 0 6px rgba(5, 242, 190, .5); }
}

.soglasje {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: .93rem;
  color: var(--c-sivo);
  cursor: pointer;
}
.soglasje input {
  flex: none;
  width: 20px; height: 20px;
  margin: 2px 0 0;
  accent-color: var(--c-akcent-temen);
}
.soglasje a { color: var(--c-akcent-temen); font-weight: 600; }
.polje--soglasje { margin-bottom: 0; }

.obrazec__noga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--c-crta);
}
.obrazec__noga small { color: var(--c-sivo); font-size: .88rem; }
.obrazec__napaka-posiljanja { margin: 12px 0 0; }

/* past za spam-robote: polje, ki ga človek ne vidi */
.medo { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.uspeh { text-align: center; padding-block: 48px; }
.uspeh__ikona {
  display: grid;
  place-items: center;
  width: 72px; height: 72px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--c-akcent-svetel);
  color: var(--c-akcent-temen);
}
.uspeh__ikona .ikona { width: 36px; height: 36px; stroke-width: 2.4; }
.uspeh h3 { font-size: 1.6rem; }
.uspeh h3:focus { outline: none; }
.uspeh p { max-width: 46ch; margin-inline: auto; color: var(--c-sivo); }
.uspeh .gumb { margin-top: 8px; }

@media (max-width: 900px) {
  .kontakt { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .obrazec__vrsta { grid-template-columns: 1fr; }
  .obrazec__noga .gumb { width: 100%; }
}

/* ---------- noga ---------- */

.noga {
  padding-top: 64px;
  background: #070909;
  color: var(--c-na-temni-sivo);
  font-size: .95rem;
}
.noga__mreza {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 48px;
}
.noga .logo { margin-bottom: 18px; }
.noga__opis { max-width: 34ch; }
.noga h4 {
  margin-bottom: 16px;
  font-family: var(--pisava);
  font-variation-settings: normal;
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
}
.noga ul { display: grid; gap: 10px; }
.noga a { text-decoration: none; }
.noga a:hover { color: #fff; }
.noga__spodaj {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  padding-block: 20px;
  border-top: 1px solid var(--c-temna-3);
  font-size: .85rem;
}
.noga__spodaj p { margin: 0; }

@media (max-width: 900px) {
  .noga__mreza { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .noga__mreza { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- spodnji pas z gumboma (telefon) ---------- */

.akcije-mobil { display: none; }

@media (max-width: 760px) {
  .akcije-mobil {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: rgba(13, 16, 16, .96);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .2);
  }
  .akcije-mobil .gumb { padding: 10px; }
  .akcije-mobil .gumb--temen { --g-ozadje: #fff; --g-barva: var(--c-temna); }
  .akcije-mobil .gumb--temen:hover { --g-ozadje: var(--c-na-temni); }
  body { padding-bottom: 72px; }
}

/* ---------- podstran (zasebnost) ---------- */

.besedilo-stran { max-width: 760px; }
.besedilo-stran h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 12px; }
.besedilo-stran h2 { font-size: 1.5rem; margin-top: 40px; }
.besedilo-stran ul { list-style: disc; padding-left: 1.3em; margin-bottom: 1em; }
.besedilo-stran li { margin-bottom: 6px; }
.besedilo-stran a { color: var(--c-akcent-temen); font-weight: 600; }
.besedilo-stran__datum { color: var(--c-sivo); }

/* ---------- pojavljanje ob drsenju ---------- */

.js [data-pokazi] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: calc(var(--zamik, 0) * 90ms);
}
.js [data-pokazi].je-vidno { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-pokazi] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- tisk ---------- */

@media print {
  .vrh, .glava, .akcije-mobil, .opozorilo, .pred-po input, .filtri, .obrazec { display: none !important; }
  .sekcija--temna, .uvod, .noga, .kontakt__kartica { background: #fff !important; color: #000 !important; }
  .js [data-pokazi] { opacity: 1 !important; transform: none !important; }
}