/* ========== Reset & Base ========== */
*,
*::before,
*::after {
  box-sizing: border-box
}

html,
body {
  height: 100%
}

html:focus-within {
  scroll-behavior: smooth
}

body {
  margin: 0;
  background: #fff;
  color: #0b0f12;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.5
}

img,
video {
  display: block;
  max-width: 100%
}

input,
button,
textarea,
select {
  font: inherit
}

/* Lokalni fontovi */
@font-face {
  font-family: "Kirana";
  src: url("/fonts/kirana.woff2") format("woff2"), url("/fonts/kirana.woff") format("woff");
  font-display: swap
}

@font-face {
  font-family: "Norwester";
  src: url("/fonts/norwester.woff2") format("woff2"), url("/fonts/norwester.woff") format("woff");
  font-display: swap;
  font-weight: 700
}

@font-face {
  font-family: "Avengenz";
  src: url("/fonts/Avengenz.woff2") format("woff2"), url("/fonts/Avengenz.woff") format("woff");
  font-display: swap;
  font-weight: 700
}

@font-face {
  font-family: "collegeb";
  src: url("/fonts/collegeb.woff2") format("woff2"), url("/fonts/collegeb.woff") format("woff");
  font-display: swap;
  font-weight: 700
}

@font-face {
  font-family: "leaguespartan-bold";
  src: url("/fonts/leaguespartan-bold.woff2") format("woff2"), url("/fonts/nleaguespartan-bold.woff") format("woff");
  font-display: swap;
  font-weight: 700
}

@font-face {
  font-family: "Quicksand_Bold";
  src: url("/fonts/Quicksand_Bold.woff2") format("woff2"), url("/fonts/Quicksand_Bold.woff") format("woff");
  font-display: swap;
  font-weight: 700
}

@font-face {
  font-family: "SLEDGE";
  src: url("/fonts/SLEDGE.woff2") format("woff2"), url("/fonts/SLEDGE.woff") format("woff");
  font-display: swap;
  font-weight: 700
}

@font-face {
  font-family: "ZTNature-Bold";
  src: url("/fonts/ZTNature-Bold.woff2") format("woff2"), url("/fonts/ZTNature-Bold.woff") format("woff");
  font-display: swap;
  font-weight: 700
}

@font-face {
  font-family: "Tak Cubit";
  src: url("/fonts/Tak Cubit.woff2") format("woff2"), url("/fonts/Tak Cubit.woff") format("woff");
  font-display: swap;
  font-weight: 700
}

@font-face {
  font-family: "Kothakoli";
  src: url("/fonts/Kothakoli.woff2") format("woff2"), url("/fonts/Kothakoli.woff") format("woff");
  font-display: swap;
  font-weight: 700
}

@font-face {
  font-family: "TitleRen";
  src: url("/fonts/TitleRen.woff2") format("woff2"), url("/fonts/TitleRen.woff") format("woff");
  font-display: swap;
  font-weight: 700
}

/* ========== Tokens ========== */
:root {
  --brand: #0b3bb3;
  --brand2: #1463ff;
  --text: #0b0f12;
  --muted: #5b6672;
  --glass: rgba(255, 255, 255, .66);
  --stroke: rgba(15, 23, 42, .08);

  /* NAV (big) */
  --nav-h: 96px;
  --logo-size: 64px;
  --brand-fs: 1.25rem;
  --link-py: .65rem;
  --link-px: 1.10rem;
  --link-fs: .98rem;

  /* Lerp meta (big↔small) */
  --nav-h-big: 96px;
  --nav-h-small: 68px;
  --logo-big: 64px;
  --logo-small: 46px;
  --brand-big: 1.25rem;
  --brand-small: .92rem;
  --link-py-big: .65rem;
  --link-py-small: .46rem;
  --link-px-big: 1.10rem;
  --link-px-small: .86rem;
  --link-fs-big: .98rem;
  --link-fs-small: .90rem;
}

.container {
  width: min(1200px, 92vw);
  margin-inline: auto
}

.containerless {
  width: 100%
}

.section {
  padding: clamp(2rem, 4vw, 4rem) 0
}

.skip-link {
  position: absolute;
  left: -9999px
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  background: #fff;
  padding: .5rem .75rem;
  border-radius: .5rem
}

/* ========== Header (Island)  ========== */
:root {
  --nav-h: 96px;
  --logo-s: 64px;
  --brand-f: 1.25rem;
  --link-py: .65rem;
  --link-px: 1.10rem;
  --link-fs: .98rem;
  --fade: var(--nav-fade, 0);
}

.site-header.island {
  --glass-alpha: calc(0.72 - 0.28 * var(--fade));
  --content-o: calc(1 - 0.08 * var(--fade));
  --radius: 24px;
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1180px, calc(100% - 24px));
  background: rgba(255, 255, 255, 0.096);
  -webkit-backdrop-filter: saturate(170%) blur(7px);
  backdrop-filter: saturate(170%) blur(7px);
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, calc(.08 + .02*var(--fade))), 0 1px 0 rgba(255, 255, 255, .55) inset;
  z-index: 50;
  transition: background .2s linear, box-shadow .2s linear;
}

.nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .9rem;
  min-height: var(--nav-h);
  padding-inline: 1rem
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: inherit;
  opacity: var(--content-o);
  transition: opacity .2s linear
}

.logo {
  width: var(--logo-s);
  height: var(--logo-s)
}

.logo-img {
  opacity: 86%;
  width: 100%;
  height: 100%;
}

.brand-name {
  font-family: "TitleRen", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 2.5rem;
  color: #161616ea;
}

.primary-nav {
  position: relative;
  justify-self: center;
  opacity: 90%;
  transition: opacity .2s linear
}

.nav-list {
  display: flex;
  gap: .9rem;
  list-style: none;
  margin: 0;
  padding: 0
}

.nav-link {
  font-family: 'ZTNature-Bold', 'Arial Narrow', Arial, sans-serif;
  display: inline-block;
  padding: var(--link-py) var(--link-px);
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
  text-transform: uppercase;
  font-weight: 800;
  font-size: var(--link-fs);
  border: 1px solid rgba(0, 0, 0, 0.308);
  background: rgba(255, 255, 255, 0.096);
  transition: box-shadow .18s ease, background .18s ease, transform .18s ease;
}

.nav-link:hover,
.nav-link:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(16, 24, 40, .10);
  background: #fff
}

.nav-ink {
  position: absolute;
  left: var(--ink-x, 0);
  bottom: 10px;
  height: 2px;
  width: var(--ink-w, 0);
  background: linear-gradient(90deg, #0a1b38, #092255);
  border-radius: 2px;
  opacity: var(--ink-o, 0);
  transition: opacity .18s ease;
  pointer-events: none;
}

.hamburger {
  display: none;
  border: 0;
  background: transparent;
  padding: .5rem;
  border-radius: 12px
}

.hamburger .bar {
  display: block;
  width: 34px;
  height: 4px;
  background: linear-gradient(180deg, rgba(12, 15, 20, .92), rgba(12, 15, 20, .7));
  margin: 5px 0;
  border-radius: 2px;
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), opacity .18s ease
}

.hamburger[aria-expanded="true"] .bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg)
}

.hamburger[aria-expanded="true"] .bar:nth-child(2) {
  opacity: 0
}

.hamburger[aria-expanded="true"] .bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg)
}

.mobile-menu {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background: rgba(255, 255, 255, 0.945);
  border-bottom: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 6px 30px rgba(16, 24, 40, .06);
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s ease
}

.mobile-menu[data-open="true"] {
  max-height: 70vh
}

.mobile-list {
  display: grid;
  gap: .25rem;
  list-style: none;
  margin: 0;
  padding: .75rem
}

.mobile-link {
  display: block;
  padding: .9rem 1rem;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  text-transform: uppercase;
  font-weight: 800
}

.mobile-link:hover,
.mobile-link:focus-visible {
  background: rgba(20, 99, 255, .06)
}


.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: clip;
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.hero-video .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  z-index: 0;
}

.hero-video .hero-desktop {
  display: block;
}

.hero-video .hero-mobile {
  display: none;
}

@media (max-width: 640px) {
  .hero-video .hero-desktop {
    display: none;
  }

  .hero-video .hero-mobile {
    display: block;
  }

  .hero-video .hero-mobile {
    transform: scale(1.06) translateZ(0);
    transform-origin: center center;
  }
}

@supports (-webkit-touch-callout: none) {
  @media (max-width: 640px) {
    .hero-video .hero-mobile {
      transform: scale(1.08) translateZ(0);
    }
  }
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .15) 40%, rgba(0, 0, 0, .45) 100%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  gap: .75rem;
  text-align: center;
  padding: 1rem;
  max-width: 68ch;
  margin: 0;
  color: #ffffffcb;
}

.hero-content h1 {
  font-family: "ZTNature-Bold", system-ui, sans-serif;
  font-size: clamp(1.8rem, 2.4rem + 1vw, 3rem);
  line-height: 1.15;
}

.hero-content p {
  font-family: "ZTNature-Bold", system-ui, sans-serif;
  font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
  opacity: .95;
  color: rgba(255, 255, 255, .92)
}


.hero-video .hero-desktop {
  display: block;
}

.hero-video .hero-mobile {
  display: none;
}

@media (max-width: 640px) {
  .hero-video .hero-desktop {
    display: none;
  }

  .hero-video .hero-mobile {
    display: block;
    transform: scale(1.06);
    transform-origin: center;
  }
}

.section-head h2 {
  font-family: "ZTNature-Bold", system-ui, sans-serif;
  color: #1a1818f1;
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  letter-spacing: .3px;
  margin: 0 0 .35rem;
}

.section-head p {
  font-family: "ZTNature-Bold", system-ui, sans-serif;
  color: var(--muted);
  margin: 0 0 1.25rem;
}

.cards.services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem
}

.service {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(16, 24, 40, .06);
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease
}

.service:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(16, 24, 40, 0.801)
}

.service-body {
  padding: .9rem 1rem 1.1rem
}

.service-title {
  font-family: "ZTNature-Bold", system-ui, sans-serif;
  color: #1b1a1ae5;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: .5px;
  margin: .4rem 0 .35rem;
  font-size: 1.02rem
}

.service-desc {
  font-family: "ZTNature-Bold", system-ui, sans-serif;
  margin: 0;
  color: #3f4852
}

/* ================== PROCES ================== */
.timeline {
  font-family: "ZTNature-Bold", system-ui, sans-serif;
  --line: rgba(15, 23, 42, .12);
  --pin: var(--brand2);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.2rem;
  position: relative;
  counter-reset: st;
}

.t-icon {
  --bg: linear-gradient(460deg, #051838f1, #1462ffdc);
  --ring: rgba(0, 0, 0, 0);
  width: 40px;
  height: 40px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--bg);
  box-shadow: 0 2px 12px var(--ring), inset 0 1px 0 rgba(255, 255, 255, .6);
  color: #fff;
  margin-bottom: .5rem;
  transform: translateY(6px);
  opacity: 0;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .5s ease;
}

.timeline.in .t-step .t-icon {
  transform: translateY(0);
  opacity: 1;
}

.t-step[data-variant="2"] .t-icon {
  --bg: linear-gradient(180deg, #00c6ff, #0072ff);
  --ring: rgba(0, 114, 255, .18);
}

.t-step[data-variant="3"] .t-icon {
  --bg: linear-gradient(180deg, #00d4a6, #00a37a);
  --ring: rgba(0, 163, 122, .18);
}

.t-step[data-variant="4"] .t-icon {
  --bg: linear-gradient(180deg, #ff8a00, #e52e71);
  --ring: rgba(229, 46, 113, .18);
}

@media (prefers-reduced-motion:reduce) {
  .t-icon {
    transition: none
  }
}


.t-step {
  position: relative;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 14px;
  padding: 1rem .95rem 1.05rem 1rem;
  box-shadow: 0 8px 26px rgba(16, 24, 40, .06);
  overflow: hidden;
  isolation: isolate;
  transform: translateY(8px);
  opacity: .0;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .5s ease;
}

.t-step::after {
  content: counter(st);
  counter-increment: st;
  position: absolute;
  top: .6rem;
  right: .7rem;
  font-weight: 900;
  color: #99a2ad;
  font-size: .95rem;
}

.t-pin {
  position: absolute;
  inset-inline: 0 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, #2a79ff, #1463ff);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}

.t-title {
  font-family: "ZTNature-Bolda", system-ui, sans-serif;
  margin: .3rem 0 .3rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.t-desc {
  margin: 0;
  color: #3f4852;
}

/* reveal state */
.timeline.in .t-step {
  transform: translateY(0);
  opacity: 1;
}

.timeline.in .t-step .t-pin {
  transform: scaleX(1);
}

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

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



/* ================== RADOVI  ================== */
.ba-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

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

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

.ba {
  --pos: 50;
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 8px 26px rgba(16, 24, 40, .06);
  background: #000;
}

.ba-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}

.ba-before {
  clip-path: polygon(0 0, calc(var(--pos) * 1%) 0, calc(var(--pos) * 1%) 100%, 0 100%);
}

.ba-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--pos) * 1%);
  transform: translateX(-50%);
  width: 2px;
  background: rgba(255, 255, 255, .8);
}

.ba-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .8);
}

.ba-cap {
  position: absolute;
  left: .6rem;
  bottom: .5rem;
  margin: 0;
  padding: .2rem .5rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font-size: .9rem;
  backdrop-filter: saturate(140%) blur(2px);
}

.ba-range {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: ew-resize;
}

@media (prefers-reduced-motion:reduce) {

  .t-step,
  .t-pin {
    transition: none
  }
}


/* ================== FAQ ================== */
.faq {
  display: grid;
  gap: .75rem
}

.faq-item {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(16, 24, 40, .06);
}

.faq-q {
  list-style: none;
  cursor: pointer;
  padding: 1rem 1rem 1rem 1.1rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .4px;
  position: relative;
  display: flex;
  align-items: center;
  gap: .6rem;
}

.faq-q::-webkit-details-marker {
  display: none
}

.faq-q::after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .22s ease;
  margin-left: auto;
  opacity: .8;
}

.faq-item[open] .faq-q::after {
  transform: rotate(135deg)
}


.faq-a {
  font-family: "ZTNature-Bold", system-ui, sans-serif;
  padding: 0 1rem 1rem 1.1rem;
  color: #3f4852
}

.faq-a>[itemprop="text"] {
  display: block
}

@media (prefers-reduced-motion:no-preference) {
  .faq-item .faq-a {
    animation: faqIn .24s ease both
  }

  @keyframes faqIn {
    from {
      opacity: 0;
      transform: translateY(-2px)
    }

    to {
      opacity: 1;
      transform: translateY(0)
    }
  }
}














/* === Kontakt forma  ======= */

.vprc-root {
  color-scheme: light;
  --vprc-text: #0b0f1a;
  --vprc-muted: rgba(15, 23, 42, .65);
  --vprc-stroke: rgba(15, 23, 42, .18);
  --vprc-brand: #0b3bb3;
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 28px);
  padding-top: clamp(18px, 5vw, 32px);
}

.vprc-head {
  margin: 0 0 18px 0;
}

.vprc-head h2 {
  margin: 0 0 6px 0;
  font-size: clamp(1.35rem, 1.2rem + 1vw, 1.9rem);
}

.vprc-head p {
  color: var(--vprc-muted);
  margin: 0;
}

.vprc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width:900px) {
  .vprc-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 22px;
    row-gap: 14px;
  }

  .vprc-full {
    grid-column: 1 / -1;
  }
}

.vprc-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vprc-label {
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--vprc-text);
}

.vprc-req {
  color: #c62828;
  font-weight: 800;
}

.vprc-field input,
.vprc-field textarea,
.vprc-field select {
  width: 100%;
  border: 1px solid var(--vprc-stroke);
  background: #fff;
  color: var(--vprc-text);
  border-radius: 10px;
  padding: .6rem .8rem;
  line-height: 1.35;
  box-shadow: 0 1px 1px rgba(15, 23, 42, .04);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}

.vprc-field textarea {
  min-height: 120px;
}

.vprc-field input:hover,
.vprc-field textarea:hover,
.vprc-field select:hover {
  border-color: rgba(15, 23, 42, .28);
}

.vprc-field input:focus,
.vprc-field textarea:focus,
.vprc-field select:focus {
  outline: 0;
  border-color: rgba(11, 59, 179, .5);
  box-shadow: 0 0 0 3px rgba(11, 59, 179, .12);
}

.vprc-msg {
  min-height: 1.1em;
  font-size: .92rem;
  color: #c62828;
}

.is-invalid {
  border-color: #c62828 !important;
  box-shadow: 0 0 0 3px rgba(198, 40, 40, .12) !important;
}

.vprc-check {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
}

.vprc-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: .2rem;
  accent-color: var(--vprc-brand);
}

.vprc-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.vprc-note {
  min-height: 1.2em;
  color: var(--vprc-muted);
}

.vprc-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .64rem .95rem;
  border-radius: 10px;
  background: var(--vprc-brand);
  color: #fff;
  border: 1px solid transparent;
  font-weight: 800;
  letter-spacing: .2px;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(11, 59, 179, .16);
  transition: transform .08s, box-shadow .2s;
}

.vprc-cta:hover {
  transform: translateY(-1px);
}

.vprc-cta:active {
  transform: none;
  box-shadow: 0 4px 12px rgba(11, 59, 179, .16);
}

.vprc-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.vprc-drop {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 108px;
  border-radius: 12px;
  cursor: pointer;
  border: 2px dotted rgba(15, 23, 42, .35);
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .04), 0 10px 22px rgba(15, 23, 42, .06);
}

.vprc-drop.vprc-drag {
  border-color: var(--vprc-brand);
  box-shadow: 0 0 0 3px rgba(11, 59, 179, .12) inset, 0 18px 36px rgba(11, 59, 179, .12);
}

.vprc-drop-inner {
  pointer-events: none;
  display: grid;
  gap: .2rem;
  padding: .7rem .9rem;
  border-radius: 10px;
  background: rgba(15, 23, 42, .04);
  border: 1px dashed rgba(15, 23, 42, .22);
}

.vprc-drop-inner strong {
  font-weight: 900;
  letter-spacing: .3px;
}

.vprc-drop input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.vprc-files-meta {
  margin-top: .45rem;
  color: var(--vprc-muted);
  font-size: .95rem;
}

.vprc-files {
  list-style: none;
  margin: .6rem 0 0;
  padding: 0;
  display: grid;
  gap: .32rem;
}

.vprc-files .file-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: #fff;
  border: 1px solid var(--vprc-stroke);
  border-radius: 9px;
  padding: .42rem .6rem;
  box-shadow: 0 1px 1px rgba(15, 23, 42, .04);
}

.vprc-files .file-name {
  font-weight: 800;
  font-size: .96rem;
}

.vprc-files .file-size {
  color: var(--vprc-muted);
  font-size: .92rem;
}

.vprc-files .file-remove {
  margin-left: auto;
  border: 0;
  border-radius: 8px;
  padding: .22rem .5rem;
  background: rgba(15, 23, 42, .08);
  cursor: pointer;
}

.vprc-files .file-remove:hover {
  background: rgba(20, 99, 255, .12);
}

.vprc-reveal {
  opacity: 1;
  transform: none;
}

.vprc-ready .vprc-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1);
  will-change: opacity, transform;
}

.vprc-reveal.vprc-in {
  opacity: 1;
  transform: none;
}

@media (max-width:640px) {
  .vprc-ready .vprc-reveal {
    transform: translateY(18px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vprc-ready .vprc-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (prefers-color-scheme: dark) {

  .vprc-root,
  .vprc-root * {
    color-scheme: light;
  }

  .vprc-field input,
  .vprc-field textarea,
  .vprc-field select {
    background: #fff;
    color: #0b0f1a;
  }
}


/* ================= Footer ================= */
.footer {
  padding: 0;
  border-top: 1px solid rgba(15, 23, 42, .08)
}

.footer-grid {
  display: grid;
  gap: 1.2rem;
  padding: 2rem 0;
  grid-template-columns: 2fr 1.2fr 1.6fr 1.2fr;
}

.foot-brand .foot-logo img {
  border-radius: 12px
}

.foot-name {
  font-weight: 900;
  margin: .4rem 0 .2rem
}

.foot-tag {
  margin: 0;
  color: #5b6672
}

.foot-nav h3,
.foot-contact h3,
.foot-legal h3 {
  margin: .2rem 0 .5rem;
  font-size: 1rem
}

.foot-nav ul,
.foot-legal ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .35rem
}

.foot-nav a,
.foot-legal a {
  text-decoration: none;
  color: inherit;
  opacity: .85
}

.foot-nav a:hover,
.foot-legal a:hover {
  opacity: 1
}

.foot-list {
  list-style: none;
  margin: 0 0 2.8rem 0;
  padding: 0;
  display: grid;
  gap: .25rem
}

.foot-social {
  display: flex;
  gap: 1rem;
  margin-top: .4rem
}

.soc {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 2px solid rgb(15, 23, 42);
  background: #fff;
  text-decoration: none;
  color: #0b0f12;
  transition: transform .18s, box-shadow .18s
}

.soc:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(16, 24, 40, .12)
}

.subfooter {
  font-size: 0.9rem;
  font-family: "ZTNature-Bold", system-ui, sans-serif;
  border-top: 1px solid rgba(15, 23, 42, .08);
  padding: 1rem 0;
  color: #5b6672;
  display: grid;
  place-items: center
}

.to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, .12);
  background: linear-gradient(180deg, #ffffff, #f5f8ff);
  color: #0b0f12;
  box-shadow: 0 10px 24px rgba(16, 24, 40, .12);
  display: grid;
  place-items: center;
  transition: transform .22s ease, opacity .18s ease;
}

.to-top[hidden] {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none
}

@media (max-width:1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem
  }
}

@media (max-width:640px) {
  .footer-grid {
    grid-template-columns: 1fr
  }
}








/* ===== Scroll reveal ===== */
.aos-root .aos-fade {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
  will-change: transform, opacity;
}

.aos-root.aos-in .aos-fade {
  opacity: 1;
  transform: none;
}

.aos-root .aos-stagger>* {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}

.aos-root.aos-in .aos-stagger>* {
  opacity: 1;
  transform: none;
}

.aos-root.aos-in .aos-stagger>* {
  transition-delay: calc(var(--i, 0) * 90ms);
}

@media (prefers-reduced-motion: reduce) {

  .aos-root .aos-fade,
  .aos-root .aos-stagger>* {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}








/* ===== HARD-LOCK LIGHT U DARK OS MODU ===== */
@media (prefers-color-scheme: dark) {

  html,
  body {
    background: #ffffff !important;
    color: #0b0f1a !important;
  }

  img,
  video,
  svg,
  canvas {
    filter: none !important;
  }

  .site-header,
  .site-header::before {
    background: rgba(255, 255, 255, 0) !important;
    backdrop-filter: blur(16px) !important;
  }

  .site-header .brand,
  .site-header .brand-name,
  .site-header .nav a,
  .site-header .soc {
    color: #0b0f1a !important;
  }

  .site-header .cta {
    background: #0b3bb3 !important;
    color: #ffffff !important;
    border-color: transparent !important;
  }

  .site-header svg path {
    fill: currentColor !important;
  }

  .hamburger {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .section,
  .card,
  .faq,
  .accordion,
  .gallery-grid,
  .process,
  .services {
    background: #ffffff !important;
    color: #0b0f1a !important;
  }

  .section-head h2,
  .section-head p,
  .section .label,
  .section .text {
    color: #0b0f1a !important;
  }

  .hero-overlay {
    background: linear-gradient(to bottom, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .15) 40%, rgba(0, 0, 0, .45) 100%) !important;
  }

  a {
    color: #1c1c1dda !important;
  }

  a:hover {
    opacity: .9;
  }

  input,
  textarea,
  select,
  button {
    background: #ffffff !important;
    color: #0b0f1a !important;
    border-color: rgba(15, 23, 42, .18) !important;
  }

  input::placeholder,
  textarea::placeholder {
    color: rgba(15, 23, 42, .55) !important;
  }

  input:-webkit-autofill,
  textarea:-webkit-autofill,
  select:-webkit-autofill {
    -webkit-text-fill-color: #0b0f1a !important;
    transition: background-color 9999s ease-out !important;
  }

  .cta,
  .btn-primary {
    background: #0b3bb3 !important;
    color: #ffffff !important;
    border-color: transparent !important;
  }

  .badge,
  .chip {
    background: rgba(15, 23, 42, .06) !important;
    color: #0b0f1a !important;
  }

  .site-footer {
    background: #0b0f1a !important;
    color: #e7e9ee !important;
  }

  .site-footer a,
  .site-footer .soc {
    color: #e7e9ee !important;
    opacity: .9;
  }

  .site-footer svg path {
    fill: currentColor !important;
  }

  * {
    scrollbar-color: auto !important;
  }
}







/* ===== GALERIJA ===== */
[data-header-spacer] {
  height: 0;
}

.site-header {
  z-index: 1000;
}

:target {
  scroll-margin-top: calc(var(--header-h, 0px) + 5px);
}


.gal-filters {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin: .5rem 0 1rem;
}

.chip {
  padding: .45rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, .12);
  background: #fff;
  font-weight: 800;
  text-transform: uppercase;
  font-size: .85rem;
  cursor: pointer;
  transition: box-shadow .18s ease, transform .18s ease, background .18s ease, color .18s ease;
}

.chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(16, 24, 40, .10)
}

.chip.active {
  background: #0b3bb3;
  color: #fff;
  border-color: transparent
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .75rem;
}

.g-card {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, .10);
  background: #fff;
  aspect-ratio: 16/9;
  display: block;
  box-shadow: 0 6px 16px rgba(16, 24, 40, .06);
}

.g-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.g-badge {
  position: absolute;
  top: .5rem;
  left: .5rem;
  z-index: 1;
  padding: .18rem .5rem;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .4px;
  font-size: .72rem;
  backdrop-filter: saturate(140%) blur(2px);
  color: #0b3bb3;
  background: rgba(20, 99, 255, .10);
  border: 1px solid rgba(20, 99, 255, .18);
}

.g-card:hover img {
  transform: scale(1.03);
  transition: transform .35s ease;
}

.lightbox {
  width: min(1100px, 96vw);
  max-height: 92vh;
  border: 0;
  border-radius: 16px;
  padding: 0;
  background: #000;
  color: #fff;
  position: relative;
}

.lightbox::backdrop {
  background: rgba(0, 0, 0, .65)
}

.lb-body {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 40vh;
  background: #000;
}

.lb-img {
  max-width: 100%;
  max-height: 92vh;
  width: auto;
  height: auto;
  display: block;
}

.lb-close,
.lb-prev,
.lb-next {
  position: absolute;
  z-index: 5;
  border: 0;
  background: rgba(0, 0, 0, .35);
  color: #fff;
  backdrop-filter: saturate(140%) blur(4px);
  width: 48px;
  height: 48px;
  border-radius: 999px;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 28px;
  line-height: 1;
  transition: transform .18s ease, background .18s ease;
}

.lb-close {
  right: .6rem;
  top: .6rem;
}

.lb-prev {
  left: .6rem;
  top: 50%;
  transform: translateY(-50%);
}

.lb-next {
  right: .6rem;
  top: 50%;
  transform: translateY(-50%);
}

.lb-close:hover,
.lb-prev:hover,
.lb-next:hover {
  background: rgba(255, 255, 255, .18);
  transform: translateY(-50%) scale(1.03)
}

.lb-close:hover {
  transform: none
}

@media (max-width:600px) {

  .lb-close,
  .lb-prev,
  .lb-next {
    width: 44px;
    height: 44px;
    font-size: 24px;
  }
}


/* ========== Responsive ========== */
@media (max-width:1024px) {
  .site-header.island {
    width: calc(100% - 16px);
    top: 12px;
    border-radius: 20px
  }

  .nav {
    grid-template-columns: auto 1fr auto
  }

  .primary-nav {
    display: none
  }

  .hamburger {
    display: inline-block;
    justify-self: end
  }

  .cards.services {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media (max-width:640px) {
  .cards.services {
    grid-template-columns: 1fr
  }
}