*, *::before, *::after { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial;
      color: #0f172a; /* slate-900 */
      background: #f8fafc; /* slate-50 */
      overflow: hidden; /* mi kontroliramo pomak */
    }
    a { color: inherit; text-decoration: none; }

.logo {
height: 52px;
width: auto;}


    .loader {
      position: fixed; inset: 0; z-index: 9999;
      display: grid; place-items: center;
      background: #0b1020; color: white;
      transition: opacity .5s ease;
  width: auto;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.4)); /* lagani glow oko loga */
    }

 
    .loader.hidden { opacity: 0; pointer-events: none; }
    .spinner {
      width: 52px; height: 52px; border-radius: 999px;
      border: 4px solid rgba(255,255,255,.25);
      border-top-color: white;
      animation: spin 1s linear infinite; margin-top: 14px;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ===== Navbar ===== */
    .navbar {
      position: fixed; top: 0; left: 0; right: 0; height: 64px;
      display: flex; align-items: center;
      padding: 0 20px; z-index: 50;
      background: rgba(255,255,255,.6);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(15, 23, 42, .07);
    }
    .nav-inner { width: 100%; display: flex; align-items: center; justify-content: space-between; }
    .nav-left { display: flex; align-items: center; gap: 16px; }
    .nav-left a { padding: 10px 12px; border-radius: 10px; font-weight: 600; opacity: .8; }
    .nav-left a.active, .nav-left a:hover { background: rgba(15, 23, 42, .06); opacity: 1; }
    .nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
}

.hamburger span {
  width: 24px;
  height: 3px;
  background: #0f172a;
  border-radius: 2px;
}
/* Na mobitelima prikaži hamburger, sakrij meni */
@media (max-width: 768px) {
  .hamburger {
    display: flex;
     
  }

  .nav-left {
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: white;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    gap: 10px;
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
    border-bottom: 1px solid rgba(15, 23, 42, .07);
  }

  /* kad je aktivno */
  .nav-left.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}

/* Efekt "X" kad je otvoreno */
.hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translateY(7px);
}
.hamburger.open span:nth-child(2) {
  opacity: 0;
}
.hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translateY(-7px);
}



    /* ===== Viewport + traka ===== */
    .viewport { position: fixed; inset: 64px 0 0 0; overflow: hidden; }
    .slides {
      height: 100%;
      display: flex; flex-direction: row; align-items: stretch;
      will-change: transform;
      /* animacija je preko JS-a (lerp), ovdje bez CSS transition-a */
    }
    .slide {
      min-width: 100vw; height: 100%; position: relative; padding-top: 32px;
      display: grid; place-items: center; text-align: center;
    }
    .slide-inner { width: min(1100px, 90vw); }
    .tag { display: inline-block; padding: 6px 10px; border-radius: 999px; font-size: 12px; letter-spacing: .04em;
      color: #0b1020; background: #e2e8f0; margin-bottom: 16px; }/* Naslov – bez lomljenja, samo fade+lift cijelog elementa */
.title{
  font-size: clamp(28px, 6vw, 56px);
  line-height: 1.1;
  margin: 0 0 12px;
  text-wrap: balance;     /* ljepši prijelomi redaka */
  word-break: normal;
  hyphens: auto;
  opacity: 0;
  transform: translateY(12px);
  filter: blur(2px);
  will-change: transform, opacity;
}
.title.animate{
  animation: titleFadeUp .45s ease-out forwards;
}
@keyframes titleFadeUp{
  to { opacity: 1; transform: none; filter: blur(0); }
}

    .lead  { font-size: clamp(16px, 2.4vw, 20px); opacity: .75; margin: 0 0 28px; }
    .cta   { display: inline-block; padding: 12px 18px; border-radius: 14px; background: #0b1020; color: white; font-weight: 700; }

.slide--c { background: radial-gradient(60% 60% at 50% 40%, #e9f6ec 0%, #ffffff 80%); } /* soft green */
.slide--d { background: radial-gradient(60% 60% at 50% 40%, #e8ecf9 0%, #ffffff 80%); } /* muted blue */
.slide--e { background: radial-gradient(60% 60% at 50% 40%, #fdf6e5 0%, #ffffff 80%); } /* warm beige */


    @media (max-width: 640px) {
      .nav-left a { padding: 8px 10px; font-weight: 600; font-size: 14px; }
      .navbar { height: 56px; }
      .viewport { inset: 56px 0 0 0; }
    }

.hero-uniq--split {
  display: grid;
  gap: 28px;
  align-items: center;
}

@media (min-width: 900px) {
  .hero-uniq--split {
    grid-template-columns: 1.1fr 0.9fr; /* lijevo tekst, desno animacija */
  }
}

.hero-animation {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-animation dotlottie-wc {
  max-width: 100%;
  height: auto;
}


.slide--a {
  background: radial-gradient(60% 60% at 50% 40%, #fac886 0%, #ffffff 80%);
}

.hero-uniq { text-align: left; }
@media (min-width: 900px) {
  .hero-uniq { width: min(980px, 86vw); }
}
.hero-eyebrow {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(15, 23, 42, 0.05); /* lagani sivi ton */
  color: #0f172a;
  margin-bottom: 16px;
}

.hero-cta { display: flex; gap: 12px; align-items: center; margin-top: 6px; }

.btn {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 14px;
  background: #0f172a;
  color: white;
  font-weight: 700;
}
.btn:hover { filter: brightness(0.95); }

.btn--ghost {
  background: transparent;
  color: #0f172a;
  border: 1px solid rgba(15, 23, 42, 0.15);
}
.btn--ghost:hover { background: rgba(255,255,255,0.06); }


@keyframes cueFloat {
  0%,100% { transform: translateX(0); }
  50%     { transform: translateX(6px); }
}


/* Blagi pastel background ostaje */
.slide--b {
  background: radial-gradient(60% 60% at 50% 40%, #fce8e8 0%, #ffffff 80%);
}

/* Split layout */
.about-uniq--split {
  display: grid;
  gap: 28px;
}
@media (min-width: 900px) {
  .about-uniq--split {
    grid-template-columns: 1.1fr 1fr; /* tekst malo širi */
    align-items: center;
  }
}

.about-copy { text-align: left; }
.about-list { list-style: none; padding: 0; margin: 20px 0 28px; color: #374151; }
.about-list li { margin-bottom: 8px; }

.about-media {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(15,23,42,0.08);
}
.about-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* popuni okvir i odreži višak */
  transform: scale(1.02);
  transition: transform .6s ease;
}
.about-media:hover img { transform: scale(1.05); } /* suptilan hover */

.about-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* === ABOUT / MOBILE v2 — stabilan kadar + bolji fokus === */
.about-uniq--split > * { min-width: 0; } /* safety za grid */

@media (max-width: 900px){
  /* 1) Stabilan, malo viši kadar na mobitelu */
  .about-media{
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 5 / 4;        /* viši kadar (probaj 4/3 ili 16/10 po ukusu) */
  }

  /* 2) Slika popunjava okvir i fokus pomaknut niže */
  .about-media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 65%;   /* ↓ pomakni fokus (50% 70% = još niže) */
    transform: none;            /* bez scale na mobitelu */
  }
}

/* ultra uski ekrani: još mrvu viši kadar */
@media (max-width: 520px){
  .about-media{ aspect-ratio: 4 / 3; }
  .about-media img{ object-position: 50% 68%; }
}

/* fallback za stare preglednike bez aspect-ratio */
@supports not (aspect-ratio: 1 / 1){
  @media (max-width: 900px){
    .about-media{ position: relative; }
    .about-media::before{ content:""; display:block; padding-top: 80%; } /* ~5/4 */
    .about-media > img{
      position:absolute; inset:0; width:100%; height:100%;
      object-fit:cover; object-position:50% 65%; transform:none;
    }
  }
}

/* Blagi pastel background za usluge */
.slide--c {
  background: radial-gradient(60% 60% at 50% 40%, #e9f6ec 0%, #ffffff 80%);
}

.services-uniq { text-align: center; }

.services-grid {
  display: grid;
  gap: 20px;
  margin-top: 30px;
}
@media (min-width: 900px) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.service-item {
  background: rgba(255,255,255,0.6);
  padding: 20px;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(15,23,42,0.05);
  transition: transform .3s ease, box-shadow .3s ease;
}
.service-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(15,23,42,0.08);
}

.service-item img {
  height: 40px;
  margin-bottom: 12px;
  opacity: 0.8;
}

.service-item h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.service-item p {
  font-size: 14px;
  color: #374151;
}

.services-cta {
  margin-top: 26px;
}



/* Blagi pastel za projekte */
.slide--d {
  background: radial-gradient(60% 60% at 50% 40%, #e8ecf9 0%, #ffffff 80%);
}

.projects-uniq { text-align: center; }

.projects-grid {
  display: grid;
  gap: 20px;
  margin-top: 30px;
}
@media (min-width: 900px) {
  .projects-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.project-card {
  background: white;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(15,23,42,0.06);
  transition: transform .3s ease, box-shadow .3s ease;
  text-align: left;
}
.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(15,23,42,0.1);
}

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

.project-card h3 {
  font-size: 18px;
  margin: 12px 16px 4px;
}

.project-location {
  display: block;
  font-size: 14px;
  color: #6b7280;
  margin: 0 16px 16px;
}

.projects-cta {
  margin-top: 26px;
}
/* Lightbox */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.9);
  display: none;
  align-items: center; justify-content: center;
  z-index: 9999;
}
.lightbox.open { display: flex; }

.lightbox-img {
  max-width: 92vw; max-height: 84vh;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

.lightbox-header {
  position: absolute; top: 18px; left: 22px; right: 22px;
  display: flex; align-items: center; justify-content: space-between;
  color: white; font-weight: 600; letter-spacing: .02em;
}
.lightbox-close {
  border: 0; background: rgba(255,255,255,.1); color: #fff;
  padding: 8px 12px; border-radius: 10px; cursor: pointer;
}

.lightbox-nav {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: space-between;
  pointer-events: none;
}
.lb-btn {
  pointer-events: all;
  width: 56px; height: 56px; border-radius: 999px;
  border: 0; background: rgba(255,255,255,.12); color: #fff;
  cursor: pointer; margin: 0 14px; font-size: 20px;
}
.lb-btn:hover { background: rgba(255,255,255,.18); }

@media (max-width: 640px) {
  .lb-btn { width: 44px; height: 44px; font-size: 18px; }
  .lightbox-header { font-size: 14px; }
}


/* Blagi topli pastel za kontakt */
.slide--e {
  background: radial-gradient(60% 60% at 50% 40%, #fdf6e5 0%, #ffffff 80%);
}

.contact-uniq { text-align: left; }

.contact-grid {
  display: grid;
  gap: 28px;
  margin-top: 28px;
}
@media (min-width: 900px) {
  .contact-grid {
    grid-template-columns: 1.2fr 1fr;
  }
}

.contact-form .form-group {
  margin-bottom: 14px;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #0f172a;
}

.contact-info h3 {
  font-size: 16px;
  margin: 12px 0 4px;
}
.contact-info p {
  font-size: 14px;
  margin-bottom: 12px;
}
.contact-info a {
  color: #0f172a;
  text-decoration: none;
}
.contact-info a:hover {
  text-decoration: underline;
}
/* ====== Global: malo prilagodbe za manje ekrane ====== */
@media (max-width: 1200px) {
  .slide-inner { width: min(960px, 92vw); }
}

@media (max-width: 900px) {
  .title {
    font-size: clamp(28px, 7vw, 44px);
    line-height: 1.15;
    text-align: center;
  }
  .lead {
    text-align: center;
    font-size: clamp(15px, 4.5vw, 18px);
    margin-bottom: 20px;
  }
  .btn   { padding: 12px 16px; }
}

/* iOS/Android “sigurni” viewport – po želji, uključi: */
/* .viewport { height: calc(100svh - 56px); } */

/* ====== Navbar: kompaktno + horizontalni scroll linkova ====== */
@media (max-width: 640px) {
  .navbar { height: 56px; padding: 0 12px; }
  .viewport { inset: 56px 0 0 0; }

  .logo { height: 56px; } /* smanji mrvicu */
  .nav-left {
    gap: 8px;
    overflow-x: auto;          /* ako linkova ima puno */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-left::-webkit-scrollbar { display: none; }
  .nav-left a { padding: 8px 10px; font-size: 14px; }
}

/* ====== Hero (SLIDE A) ====== */
@media (max-width: 900px) {
  .hero-uniq { width: min(760px, 92vw); }
  .hero-cta { gap: 10px; flex-wrap: wrap; }
}

/* ====== O nama (split layout) ====== */
@media (max-width: 900px) {
  .about-uniq--split { grid-template-columns: 1fr; }
  .about-media { order: -1; } /* fotka iznad teksta na tabletu/mobu */
  .about-media img { aspect-ratio: 16 / 10; } /* širi kadar na manjim ekranima */
}

/* ====== Usluge (3 -> 2 -> 1 kolona) ====== */
@media (max-width: 1100px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .services-grid { grid-template-columns: 1fr; }
  .service-item { padding: 16px; }
  .service-item img { height: 32px; }
}

/* ====== Projekti (3 -> 2 -> 1) + dinamična visina slike ====== */
@media (max-width: 1100px) {
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .projects-grid { grid-template-columns: 1fr; }
  .project-card img { height: 180px; }
}

/* ====== Kontakt (2 -> 1) ====== */
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .contact-form input,
  .contact-form textarea { font-size: 16px; } /* sprječava iOS zoom na fokus */
  .btn { width: 100%; text-align: center; }   /* lakše pogoditi na mobitelu */
}



@media (max-width: 900px) {
  .slides {
    flex-direction: column;
    height: auto;
    transform: none !important;
  }
  .slide {
    min-width: 100%;
    height: auto;
    padding: 60px 0; /* malo zraka između sekcija */
  }
  .viewport {
    position: relative;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
  }
}
@media (max-width: 900px) {
  body {
    overflow: auto; /* ili overflow-y: auto; */
  }
}
/* ========= FINAL MOBILE OVERRIDES (<=900px) ========= */
@media (max-width: 900px) {
  /* 0) Globalno: omogući normalni scroll i smanji širinu teksta */
  body { overflow: auto; }
  .slide-inner { width: min(720px, 92vw); }

  /* 1) Viewport: ne koristi fixed inset; dodaj prostor za navbar */
  .viewport {
    position: relative;
    inset: 0;
    padding-top: 56px;     /* visina mobile navbara */
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
  }

  /* 2) Slajdovi idu ispod sebe i imaju više zraka */
  .slides { flex-direction: column; height: auto; transform: none !important; }
  .slide  { min-width: 100%; height: auto; padding: 48px 20px; }

  /* 3) Naslovi i paragrafi: veći, čišći, bez ružnog lomljenja */
  .title {
    font-size: clamp(28px, 7.2vw, 42px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-align: center;
    max-width: 22ch;         /* lijepa mjera naslova */
    margin-left: auto;
    margin-right: auto;
    text-wrap: balance;      /* moderni balans redaka (gdje je podržano) */
    word-break: normal;      /* ne cijepaj riječi nasilu */
    hyphens: auto;           /* radije pravilno prelomiti riječ s crticom */
  }
  .lead {
    text-align: center;
    font-size: clamp(15px, 4.5vw, 18px);
    max-width: 36ch;
    margin: 0 auto 22px;
  }

  /* 4) HERO (prvi slajd): tekst gore, animacija ispod, centrirano */
  .hero-uniq--split {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }
  .hero-text { order: 1; padding-top: 6px; }
  .hero-animation { order: 2; display: flex; justify-content: center; }
  .hero-cta { justify-content: center; flex-wrap: wrap; gap: 10px; }

  /* 5) CTA u stupac na manjim širinama */
  .btn { padding: 12px 16px; }
}

@media (max-width: 700px) {
  .hero-cta,
  .about-cta {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
}

/* 6) O NAMA (drugi slajd): fotka iznad, pravilne proporcije, bolji tekst */
@media (max-width: 900px) {
  .about-uniq--split { grid-template-columns: 1fr; }
  .about-media { order: -1; border-radius: 14px; overflow: hidden; }
  .about-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transform: none;        /* bez dodatnog scale-a na mobitelu */
  }
  .about-copy { text-align: center; }
  .about-list {
    text-align: left;
    display: inline-block;  /* lijepo poravnanje točkica ispod teksta */
    margin: 16px auto 0;
  }
}

/* 7) Navbar + hamburger: zadrži visinu navbara i pad viewport-a */
@media (max-width: 640px) {
  .navbar { height: 56px; padding: 0 12px; }
  .viewport { padding-top: 56px; } /* sigurnosno ako 640px breakpoint */
  .nav-left a { padding: 8px 10px; font-size: 14px; }
}

/* --- Scroll cue: bazni izgled --- */
.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  opacity: .7;
  font-size: 14px;
  animation: cueFloatX 2.2s ease-in-out infinite; /* desktop default */
}

/* Tekst po defaultu (desktop) */
.scroll-cue .cue-label::before {
  content: "skrolaj desno";
}

/* Strelica po defaultu (desktop) */
.scroll-cue svg {
  transform: none;
  transform-origin: 50% 50%;
  transition: transform .3s ease;
}

/* Keyframes */
@keyframes cueFloatX {
  0%,100% { transform: translateX(0); }
  50%     { transform: translateX(6px); }
}
@keyframes cueFloatY {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(6px); }
}

/* --- Mobile override (≤900px) --- */
@media (max-width: 900px) {
  .scroll-cue { 
    animation: cueFloatY 1.9s ease-in-out infinite;
    margin-top: 14px;
    opacity: .6;
    font-size: 13px;
  }
  .scroll-cue .cue-label::before {
    content: "skrolaj dolje";
  }
  .scroll-cue svg {
    transform: rotate(90deg); /* desno -> dolje */
  }
}
/* LOADER: veći logo + čišći look */
#loader img { 
  height: clamp(120px, 28vw, 220px) !important; 
  width: auto !important;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,.35));
}
#loader .spinner { margin-top: 16px; }
.kb-badge{
  position: fixed; right: 12px; bottom: 12px; z-index: 60;
  padding: 8px 10px; border-radius: 999px;
  background: rgba(15,23,42,.85); color:#fff; border:1px solid rgba(255,255,255,.12);
  font: 600 11px/1.1 system-ui; letter-spacing:.08em; text-transform:uppercase;
  backdrop-filter: blur(8px); opacity:.85; transition: transform .2s ease, opacity .2s ease;
}
.kb-badge:hover{ opacity:1; transform: translateY(-1px); }