:root{
  --brand:#0d6efd;
  --text:#111;
  --muted:#6c757d;
  --bg:#f8f9fa;
}
html,body{scroll-behavior:smooth}
body{font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';}
.navbar-brand strong{letter-spacing:.5px}
.hero{
  background: radial-gradient(1200px 500px at 20% 20%, #f0f3f6 0%, #fff 40%, #f8f9fa 100%);
  position:relative; overflow:hidden;
}
.hero-graphic{
  position:absolute; right:-5%; bottom:-10%;
  max-width:58vw; opacity:.95; pointer-events:none; filter: drop-shadow(0 10px 40px rgba(0,0,0,.3));
}
.hero h1{font-weight:800; letter-spacing:.2px}
.section-title{font-weight:700}
.icon-badge{
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:14px; background:#e9ecef; margin-right:.6rem; flex:0 0 44px;
}
.feature{background:#fff; border:1px solid #eef0f2; border-radius:16px; padding:1.25rem}
.kpi{background:#fff;border:1px solid #eef0f2;border-radius:14px;padding:1rem; text-align:center}
.kpi .num{font-weight:800; font-size:1.75rem}
footer{background:#0f1113;color:#cfd3d8}
footer a{color:#cfd3d8;text-decoration:none}
/* Gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.gallery-grid figure{background:#fff;border:1px solid #eef0f2;border-radius:16px;overflow:hidden;margin:0}
.gallery-grid img{width:100%;height:auto;display:block}
/* Process steps */
.process-steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px}
.step{background:#fff;border:1px solid #eef0f2;border-radius:14px;padding:1rem}
.step span.badge{font-size:.85rem}
/* Contact */
.contact-card{background:#fff;border:1px solid #eef0f2;border-radius:16px;padding:1.25rem}
/* Responsive tweaks */
@media (max-width: 992px){
  .hero-graphic{position:relative; right:auto; bottom:auto; max-width:85vw; margin:1rem auto 0; display:block}
}


.hero-logo-small{ width:160px; height:auto; filter: drop-shadow(0 6px 18px rgba(0,0,0,.18)); border-radius:12px }
@media (max-width: 576px){ .hero-logo-small{ width:120px } }


.hero-title img.hero-logo-inline{
  width:88px; height:auto; border-radius:12px;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.18));
}
@media (max-width:576px){
  .hero-title img.hero-logo-inline{ width:64px }
}

.navbar-logo{ height:32px; width:auto; display:block }

/* =========================
   HERO
   ========================= */
.hero {
  position: relative;
  overflow: hidden;
}

/* Picture blok – puni širinu bez praznog prostora oko slike */
.hero .hero-media {
  display: block;
  line-height: 0;
  margin: 0 0 1rem 0; /* mali razmak od teksta */
}

/* Slika kao cover, bez deformacije */
.hero .hero-media img {
  width: 100%;
  height: clamp(40vh, 58vh, 72vh); /* ugodna visina na mobitelu */
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Na većim ekranima malo viša, ali i dalje bez pretjerivanja */
@media (min-width: 992px) {
  .hero .hero-media img {
    height: clamp(45vh, 62vh, 78vh);
  }
}

/* Inline logo uz naslov – konzistentna visina */
.hero .hero-logo-inline {
  height: 44px;
  width: auto;
}

@media (min-width: 992px) {
  .hero .hero-logo-inline {
    height: 52px;
  }
}

/* HERO naslov s “metal/engraved” dojmom */
.hero-title h1{
  font-family: "Imprint MT Shadow", "Cinzel", Georgia, serif;
  font-weight: 700;                 /* koristi se za Cinzel; Imprint je 400 */
  letter-spacing: .04em;
  text-transform: uppercase;

  /* suptilni “chrome/emboss” osjećaj i čitljivost na slici */
  text-shadow: 0 2px 6px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.05);
}


/* Opcionalno: ako želiš suptilan tamni “film” preko slike radi čitljivosti teksta 
   (uključi samo ako tekst preklapa sliku) */
/*
.hero .hero-media {
  position: relative;
}
.hero .hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.15));
  pointer-events: none;
}
*/


/* Fullscreen hero */
.hero.hero-full{
  position: relative;
  min-height: 100svh;            /* 100% ekrana, i na mobitelu (safe viewport) */
  overflow: hidden;
  color: #fff;
}

/* Ako želiš točno "ispod" sticky navbara, odkomentiraj i postavi visinu navbara */
/*
:root { --nav-h: 64px; }
.hero.hero-full { min-height: calc(100svh - var(--nav-h)); }
*/

.hero .hero-media{
  position: absolute;
  inset: 0;
  z-index: 0;
  line-height: 0;
}
.hero .hero-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;     /* slika pokriva cijeli ekran */
  object-position: center;
  display: block;
}

/* suptilni gradijent radi čitljivosti teksta */
.hero .hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.6) 100%);
  z-index: 1;
}

/* Naslov (ako koristiš Imprint MT Shadow, ostavi taj font; inače fallback) */
.hero-heading{
  font-family: "Imprint MT Shadow", "Cinzel", Georgia, serif;
  letter-spacing: .04em;
  text-shadow: 0 3px 10px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.06);
}

@media (max-width: 991.98px){
  .hero-heading{ font-size: clamp(1.9rem, 4.8vw, 2.5rem); }
}


/* Fullscreen hero */
.hero.hero-full{
  position: relative;
  min-height: 100svh;            /* 100% ekrana, i na mobitelu (safe viewport) */
  overflow: hidden;
  color: #fff;
}

/* Ako želiš točno "ispod" sticky navbara, odkomentiraj i postavi visinu navbara */
/*
:root { --nav-h: 64px; }
.hero.hero-full { min-height: calc(100svh - var(--nav-h)); }
*/

.hero .hero-media{
  position: absolute;
  inset: 0;
  z-index: 0;
  line-height: 0;
}
.hero .hero-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;     /* slika pokriva cijeli ekran */
  object-position: center;
  display: block;
}

/* suptilni gradijent radi čitljivosti teksta */
.hero .hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.6) 100%);
  z-index: 1;
}

/* Naslov (ako koristiš Imprint MT Shadow, ostavi taj font; inače fallback) */
.hero-heading{
  font-family: "Imprint MT Shadow", "Cinzel", Georgia, serif;
  letter-spacing: .04em;
  text-shadow: 0 3px 10px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.06);
}

@media (max-width: 991.98px){
  .hero-heading{ font-size: clamp(1.9rem, 4.8vw, 2.5rem); }
}

/* === Full-screen HERO bez bijelog razmaka iznad footera === */
:root{
  --nav-h: 64px;  /* prilagodi stvarnoj visini navbar-a */
}

/* Ukloni bilo kakve margine koje mogu stvoriti "bijelu crticu" */
header.hero { margin: 0 !important; }
footer      { margin-top: 0 !important; border-top: 0 !important; }

/* Ako se svejedno vidi tanki pojas, neka pozadina stranice bude tamna (maskira gap) */
body { background-color: #0b0d0e; }

/* Fullscreen hero: računamo visinu tako da uz sticky nav popunimo ekran do dna */
.hero.hero-full{
  position: relative;
  min-height: calc(100vh - var(--nav-h)); /* desktop */
  min-height: calc(100svh - var(--nav-h)); /* modern mobile */
  overflow: hidden;
  color: #fff;
}

/* Slika preko cijelog headera */
.hero .hero-media{
  position: absolute;
  inset: 0;
  z-index: 0;
  line-height: 0;
}
.hero .hero-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Tamni film radi kontrasta teksta */
.hero .hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.62) 100%);
  z-index: 1;
}

/* Centriranje sadržaja unutar hero-a (i lijepi razmjeri na svim ekranima) */
.hero .hero-heading{
  font-family: "Imprint MT Shadow","Cinzel",Georgia,serif;
  letter-spacing: .04em;
  text-shadow: 0 3px 10px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.06);
}
.hero .hero-subtitle{
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
  max-width: 56rem;
}

/* Staklasta značka "Kromirana ruka" */
.badge-glass{
  background: rgba(0,0,0,.35);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(4px);
}

/* Responsivnost naslova */
@media (max-width: 991.98px){
  .hero .hero-heading{ font-size: clamp(2rem, 6vw, 2.6rem); }
}
@media (min-width: 992px){
  .hero .hero-heading{ font-size: clamp(2.8rem, 5vw, 4rem); }
}

/* === Full-screen HERO bez bijelog razmaka iznad footera === */
:root{
  --nav-h: 64px;  /* prilagodi stvarnoj visini navbar-a */
}

/* Ukloni bilo kakve margine koje mogu stvoriti "bijelu crticu" */
header.hero { margin: 0 !important; }
footer      { margin-top: 0 !important; border-top: 0 !important; }

/* Ako se svejedno vidi tanki pojas, neka pozadina stranice bude tamna (maskira gap) */
body { background-color: #0b0d0e; }

/* Fullscreen hero: računamo visinu tako da uz sticky nav popunimo ekran do dna */
.hero.hero-full{
  position: relative;
  min-height: calc(100vh - var(--nav-h)); /* desktop */
  min-height: calc(100svh - var(--nav-h)); /* modern mobile */
  overflow: hidden;
  color: #fff;
}

/* Slika preko cijelog headera */
.hero .hero-media{
  position: absolute;
  inset: 0;
  z-index: 0;
  line-height: 0;
}
.hero .hero-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Tamni film radi kontrasta teksta */
.hero .hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.62) 100%);
  z-index: 1;
}

/* Centriranje sadržaja unutar hero-a (i lijepi razmjeri na svim ekranima) */
.hero .hero-heading{
  font-family: "Imprint MT Shadow","Cinzel",Georgia,serif;
  letter-spacing: .04em;
  text-shadow: 0 3px 10px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.06);
}
.hero .hero-subtitle{
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
  max-width: 56rem;
}

/* Staklasta značka "Kromirana ruka" */
.badge-glass{
  background: rgba(0,0,0,.35);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(4px);
}

/* Responsivnost naslova */
@media (max-width: 991.98px){
  .hero .hero-heading{ font-size: clamp(2rem, 6vw, 2.6rem); }
}
@media (min-width: 992px){
  .hero .hero-heading{ font-size: clamp(2.8rem, 5vw, 4rem); }
}


/* === TVRDI CENTER unutar hero-a === */

/* Ako nemaš varijablu, uzmi 70px kao default visinu sticky navbara */
:root { --nav-h: 70px; }

.hero.hero-full{
  position: relative;
  min-height: 100svh;            /* cijeli ekran */
  overflow: hidden;
}

/* Slika i overlay neka ostanu kako jesu (cover) */

/* Sadržaj centriramo unutar područja: od dna do ispod navbara */
.hero-center,         /* ako koristiš ovu klasu */
.hero .hero-content { /* ili ovu, što već imaš u HTML-u */
  position: absolute;
  top: var(--nav-h, 70px);
  right: 0;
  bottom: 0;
  left: 0;

  display: grid;              /* KEY: savršen centar */
  place-items: center;        /* vertikalno + horizontalno */

  padding: 0 1rem;            /* malo bočnog zraka */
}

/* Neutraliziraj vertikalne paddinge ako su ostali iz Bootstrap utility klasa */
.hero-center [class*="py-"],
.hero .hero-content [class*="py-"]{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* H1 i tekst neka nemaju dodatnih gornjih margina */
.hero-heading { margin-top: 0 !important; }
.hero-subtitle{ margin-top: .5rem; }

/* (neobavezno) Ako i dalje vidiš tanku crticu iznad footera */
footer { margin-top: 0 !important; border-top: 0 !important; }
body   { background-color: #0b0d0e; }


/* Prozirni “glass” panel ispod teksta u hero-u */
.hero-panel{
  background: rgba(0,0,0,.38);                   /* prozirno tamno */
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  padding: clamp(12px, 2.5vw, 28px) clamp(16px, 3vw, 36px);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  max-width: min(100%, 980px);
  margin-inline: auto;                            /* centriraj panel */
}
@supports (backdrop-filter: blur(6px)){
  .hero-panel{ backdrop-filter: blur(6px); }      /* staklasti efekt gdje je podržan */
}

/* Ako želiš malo jači kontrast naslova unutar panela */
.hero-panel .hero-heading{ text-shadow: 0 3px 10px rgba(0,0,0,.55); }
.hero-panel .hero-subtitle{ text-shadow: 0 2px 8px rgba(0,0,0,.45); }


/* Tamne sekcije su .py-5, a svijetle .py-5.bg-light */
.py-5:not(.bg-light) {
  color: #fff;
}

/* Naslovi, tekstovi, sitni print */
.py-5:not(.bg-light) h1,
.py-5:not(.bg-light) h2,
.py-5:not(.bg-light) h3,
.py-5:not(.bg-light) h4,
.py-5:not(.bg-light) p,
.py-5:not(.bg-light) li,
.py-5:not(.bg-light) small {
  color: #fff !important;
}

/* Linkovi na tamnom */
.py-5:not(.bg-light) a:not(.btn) {
  color: #fff;
  text-decoration-color: rgba(255,255,255,.6);
}
.py-5:not(.bg-light) a:not(.btn):hover {
  text-decoration-color: #fff;
}

/* Komponente koje ostaju svijetle unutar tamne sekcije */
.py-5:not(.bg-light) .card,
.py-5:not(.bg-light) .bg-white,
.py-5:not(.bg-light) .alert,
.py-5:not(.bg-light) .list-group {
  color: #0f172a !important;
  background-color: #fff;
}

/* Tanki detalji na tamnom */
.py-5:not(.bg-light) .text-muted { color: rgba(255,255,255,.75) !important; }
.py-5:not(.bg-light) hr { border-color: rgba(255,255,255,.2); }







/* 1) Tamne sekcije = bijeli tekst (ostaje kako je) */
.py-5:not(.bg-light) { color: #fff; }
.py-5:not(.bg-light) h1,
.py-5:not(.bg-light) h2,
.py-5:not(.bg-light) h3,
.py-5:not(.bg-light) h4,
.py-5:not(.bg-light) p,
.py-5:not(.bg-light) li,
.py-5:not(.bg-light) small { color: #fff !important; }

/* 2) FIX: svijetle kutije u tamnoj sekciji (feature kartice) trebaju tamni tekst */
.py-5:not(.bg-light) .feature {
  background: #fff;
  color: #0f172a !important;      /* glavni tekst – taman */
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 16px;
  padding: 1rem 1.25rem;
}
.py-5:not(.bg-light) .feature strong { color: #0f172a !important; }
.py-5:not(.bg-light) .feature .text-muted { color: #4b5563 !important; }
.py-5:not(.bg-light) .feature a { color: #0f172a; }

/* 3) Ikonica bedž unutar feature ↴ malo jači kontrast */
.py-5:not(.bg-light) .feature .icon-badge{
  background: #eef2f7;
  border: 1px solid rgba(15,23,42,.12);
}
.py-5:not(.bg-light) .feature .icon-badge .bi{ color:#0f172a; }

/* 4) Svijetle komponente (npr. alert) u tamnoj sekciji zadrže tamni tekst */
.py-5:not(.bg-light) .alert,
.py-5:not(.bg-light) .bg-white { color:#0f172a !important; }

/* Tamne sekcije = bijeli bazni tekst, ali bez nasilnog !important */
.py-5:not(.bg-light) { color:#fff; }
.py-5:not(.bg-light) h1,
.py-5:not(.bg-light) h2,
.py-5:not(.bg-light) h3,
.py-5:not(.bg-light) h4 { color:#fff; }

/* Linkovi na tamnom */
.py-5:not(.bg-light) a:not(.btn) {
  color:#fff;
  text-decoration-color:rgba(255,255,255,.6);
}
.py-5:not(.bg-light) a:not(.btn):hover { text-decoration-color:#fff; }

/* RESETAJ svijetle (bijele) površine unutar tamne sekcije – vrati im tamni tekst */
.py-5:not(.bg-light) .card,
.py-5:not(.bg-light) .card *,
.py-5:not(.bg-light) .alert,
.py-5:not(.bg-light) .alert *,
.py-5:not(.bg-light) .accordion,
.py-5:not(.bg-light) .accordion *,
.py-5:not(.bg-light) .cta-card,
.py-5:not(.bg-light) .cta-card *,
.py-5:not(.bg-light) .step,
.py-5:not(.bg-light) .step *,
.py-5:not(.bg-light) .chip,
.py-5:not(.bg-light) .chip *,
.py-5:not(.bg-light) .kpi-badge,
.py-5:not(.bg-light) .kpi-badge *,
.py-5:not(.bg-light) .bg-white {
  color: var(--bs-body-color) !important;   /* Bootstrap body text */
}

/* Sekundarni tekst u svijetlim boxevima neka bude Bootstrap siva */
.py-5:not(.bg-light) .card .text-secondary,
.py-5:not(.bg-light) .alert .text-secondary,
.py-5:not(.bg-light) .accordion .text-secondary,
.py-5:not(.bg-light) .cta-card .text-secondary,
.py-5:not(.bg-light) .step .text-secondary,
.py-5:not(.bg-light) .chip .text-secondary {
  color:#6c757d !important;
}

/* KONTAKT: svijetle kutije unutar tamne sekcije neka imaju TAMNI tekst */
.py-5:not(.bg-light) .contact-card {
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:1rem;
  padding:1.25rem;
  color: var(--bs-body-color); /* vrati default boju teksta */
}
.py-5:not(.bg-light) .contact-card * { 
  color: var(--bs-body-color) !important; 
}

/* Forme – jasno vidljiv tekst i placeholderi */
.py-5:not(.bg-light) .form-label { color: var(--bs-body-color) !important; }
.py-5:not(.bg-light) .form-control {
  background:#fff;
  color: var(--bs-body-color);
}
.py-5:not(.bg-light) .form-control::placeholder { color:#6c757d; opacity:.95; }

/* Linkovi unutar svijetlih kartica */
.py-5:not(.bg-light) .contact-card a {
  color: var(--bs-body-color);
  text-decoration-color: rgba(0,0,0,.35);
}
.py-5:not(.bg-light) .contact-card a:hover { text-decoration-color: var(--bs-body-color); }



/* ===== HERO FIX (2025-11-09) ============================================ */
/* Stabilna visina hero-a (desktop+mob), bez "bijele crte" ispod */
.hero-full {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 75vh;         /* fallback */
  margin-bottom: 0;         /* makni eventualni razmak ispod */
}
@supports (height: 1svh) {
  .hero-full { min-height: 75svh; }  /* točniji viewport na mobitelima */
}

/* Pozadinska slika kao sloj ispod sadržaja */
.hero-media {
  position: absolute;
  inset: 0;
  display: block;
  line-height: 0;           /* uklanja inline "gap" oko <picture> */
  z-index: 0;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;        /* slika pokriva, bez rastezanja */
}

/* Lagani overlay radi kontrasta teksta */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
  pointer-events: none;
}

/* Sadržaj preko slike */
.hero-panel {
  position: relative;
  z-index: 2;
}

/* Vertikalno centriranje sadržaja u hero-u */
.hero-center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: inherit;
}

/* Tipografija i finese */
.hero-heading {
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.hero-subtitle {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.30);
}

/* Logo u hero-u: dinamika širine po uređaju */
.hero-logo-hero {
  max-width: clamp(72px, 14vw, 120px);
  height: auto;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.25));
}

/* Sitni reseti koji ponekad uzrokuju "crticu" ispod hero-a */
header.hero { margin-bottom: 0; }
.hero + * { margin-top: 0; }

/* Opcionalno: kad je ekran vrlo nizak, smanji razmak iznutra */
@media (max-height: 600px) {
  .hero-heading { font-size: clamp(1.5rem, 4vw, 2.25rem); }
  .hero-subtitle { font-size: clamp(1rem, 2.6vw, 1.125rem); }
}



/* === HERO: panel samo ispod teksta (Edge/Windows friendly) === */
.hero-card{
  display:inline-block;
  padding:clamp(16px,2.6vw,28px) clamp(18px,3.2vw,36px);
  background:rgba(0,0,0,.42);
  border:0; outline:0;
  border-radius:18px;
  box-shadow:none;
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  background-clip:padding-box; /* sprječava "hairline" rubove */
}

/* Ako želiš malo svjetliji globalni overlay: */
/* .hero-overlay{ background:rgba(0,0,0,.30); } */

.hero-logo-hero{ max-width:clamp(72px,14vw,120px); height:auto; }







/* === FIX: bez crta između hero i footera === */

/* makni bilo kakav border/sjenu što hero može crtati pri dnu */
header.hero {
  margin-bottom: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background-color: transparent; /* sigurnost */
}
header.hero::before,
header.hero::after { content: none !important; }

/* makni top-border/sjenu iz footera */
footer {
  margin-top: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
}

/* nema „seama“ zbog inline-gapa/zaokruživanja piksela */
.hero-media { line-height: 0; }
.hero-bg { display: block; }

/* ako još vidiš 1px „seam“ na nekim DPI-ima, ovime ga maskiraš */
.hero { background-color: #0f0f0f; }        /* ista tamna kao footer */