/* Zajednicki stil za stranice u pripremi (o-nama, usluge, projekti, kontakt) */
:root{
  --ink:#0b0a09;
  --line:rgba(255,255,255,.14);
  --fg:#f4f1ee;
  --mut:rgba(244,241,238,.62);
  --sand:#cbbc9d;
  --sand-d:#ac9b79;
  --r:10px;
  --pad:clamp(24px,3.4vw,56px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  min-height:100vh;background:var(--ink);color:var(--fg);
  font:400 16px/1.5 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  padding:18px;display:flex;flex-direction:column;gap:18px;
}

/* zamucena podloga - ista kao na naslovnoj */
.bgfull{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.bgfull img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;transform:scale(1.06);opacity:.55}
.bgfull::after{content:"";position:absolute;inset:0;background:rgba(11,10,9,.42)}

/* ---------- glavna kartica ---------- */
.page{
  position:relative;flex:1;min-height:calc(100vh - 36px - 220px);
  border-radius:var(--r);background:#141211;border:1px solid rgba(255,255,255,.07);
  overflow:hidden;display:flex;flex-direction:column;
}
.nav{
  display:flex;align-items:center;gap:clamp(20px,4vw,64px);position:relative;
  /* visina trake je zakljucana, logo raste unutar nje */
  height:82px;padding:0 var(--pad);border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{height:48px;width:auto;display:block}
.menu{position:absolute;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:clamp(18px,2.4vw,38px)}
.menu a{position:relative;color:var(--fg);text-decoration:none;
  font-size:12.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  opacity:.72;padding:6px 0;transition:opacity .3s var(--ease)}
.menu a:hover,.menu a[aria-current]{opacity:1}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--sand);transform:scaleX(0);transform-origin:left;
  transition:transform .38s var(--ease)}
.menu a:hover::after,.menu a[aria-current]::after{transform:scaleX(1)}

.btn{
  --bg:#fff; --fg-c:#15120f; --bg-h:#efece8; --bd:transparent;
  flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;
  background:var(--bg);color:var(--fg-c);border:1px solid var(--bd);border-radius:var(--r);
  padding:12px 20px;font:500 13px Inter,sans-serif;letter-spacing:.005em;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.btn:hover{background:var(--bg-h);transform:translateY(-1px)}
.btn svg{width:11px;height:11px;flex:0 0 auto;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translate(2px,-2px)}
.btn--primary{--bg:var(--sand);--fg-c:#231f19;--bg-h:var(--sand-d)}
.btn--ghost{--bg:transparent;--fg-c:var(--fg);--bg-h:rgba(255,255,255,.12);
  --bd:rgba(255,255,255,.3)}
.btn--ghost:hover{--bd:rgba(255,255,255,.55)}
.btn--sm{padding:10px 17px;font-size:12.5px}
.nav .btn{margin-left:auto}

/* ---------- poruka ---------- */
.hold{flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(40px,6vh,90px) var(--pad);max-width:820px}
.eyebrow{display:block;font-size:11px;font-weight:500;letter-spacing:.19em;
  text-transform:uppercase;color:var(--sand);margin-bottom:18px}
.hold h1{font-family:Michroma,Inter,sans-serif;font-weight:400;
  font-size:clamp(24px,3.6vw,52px);line-height:1.24;letter-spacing:-.015em;
  margin-bottom:clamp(20px,3vh,32px)}
.hold p{color:var(--mut);font-size:15px;line-height:1.75;max-width:58ch}
.hold p+p{margin-top:14px}
.hold .acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,4vh,42px)}

/* ---------- footer ---------- */
.ftr{--fpad:clamp(30px,3.2vw,46px);
  border-radius:var(--r);padding:var(--fpad) var(--pad);
  background:#100e0d;border:1px solid rgba(255,255,255,.09);
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;
  gap:clamp(24px,3.5vw,60px);align-items:start}
.ftr h4{font:500 10.5px Inter,sans-serif;letter-spacing:.17em;text-transform:uppercase;
  color:var(--mut);margin-bottom:14px}
.ftr a{color:var(--fg);text-decoration:none;font-size:13.5px;line-height:2;
  display:block;width:fit-content;opacity:.86;transition:opacity .25s}
.ftr a:hover{opacity:1}
.ftr p,.ftr span{font-size:13px;line-height:1.65;color:var(--mut);display:block}
.ftr .flogo{height:52px;width:auto;display:block;margin-bottom:22px}
.ftr .fbrand p{max-width:330px}
.ftr .madeby{display:inline-flex;align-items:center;gap:11px;text-decoration:none;
  line-height:1;width:auto;opacity:.72;transition:opacity .25s}
.ftr .madeby:hover{opacity:1}
.ftr .madeby span{font-size:12px;line-height:1;color:var(--mut);white-space:nowrap}
.ftr .madeby img{height:18px;width:auto;display:block}
.fbar{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;
  gap:20px;margin-top:clamp(24px,3vw,40px);padding-top:var(--fpad);
  border-top:1px solid rgba(255,255,255,.09);font-size:12px;color:var(--mut)}

@media(max-width:900px){
  body{padding:10px;gap:10px}
  .menu{display:none}
  .ftr{grid-template-columns:1fr;gap:28px}
  .fbar{flex-direction:column;align-items:flex-start;gap:16px}
}


/* ---------- kontakt modal: prepisan iz ZAP-a (style.css 2163-2287) ---------- */
@font-face{
  font-family:'Sora';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('fonts/sora.woff2') format('woff2');
}

.omodal {
  position: fixed;
  inset: 0;
  z-index: 200;
  /* zatvoren modal se uopste ne renderuje, pa Sora (koju samo on
     koristi) ne ulazi u pocetno ucitavanje strane */
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--pad);
  background: rgba(10, 14, 22, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* JS prvo montira (display), pa u sledecem kadru pali is-open,
   da fade ostane */
.omodal.is-mounted { display: flex; }
.omodal.is-open { opacity: 1; pointer-events: auto; }

.omodal__card {
  position: relative;
  overflow: hidden;
  background: #2f3238;
  color: #f3f4f6;
  font-family: "Sora", sans-serif;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 2.4rem 2.4rem 2.1rem;
  max-width: 460px;
  width: 100%;
  text-align: center;
  transform: translateY(16px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

/* kanonska omni tekstura, kao na sajtu i u cjeniku */
.omodal__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("texture.jpg");
  /* ZAP je ovde imao background-attachment:fixed - tekstura u mjerilu celog
     ekrana. Na ovoj kartici je taj isecak ispao gotovo ravan, pa se na 0.12
     nije videlo nista. Vezano za karticu, zrno se vidi. */
  background-size: cover;
  background-position: center;
  opacity: 0.12;
  pointer-events: none;
}

.omodal__card > * { position: relative; }
.omodal.is-open .omodal__card { transform: none; }

.omodal__card > img { height: 30px; width: auto; margin: 0 auto 1.4rem; display: block; }

.omodal__card h3 {
  font-family: "Sora", sans-serif;
  font-weight: 700;
  letter-spacing: -0.5px;
  font-size: 1.45rem;
  color: #f3f4f6;
  margin-bottom: 0.35rem;
}

.omodal__card > p {
  color: #9ca3af;
  font-size: 0.92rem;
  line-height: 1.5;
  margin-bottom: 1.4rem;
}

.omodal__links a {
  display: block;
  padding: 0.85rem 1rem;
  margin-top: 0.65rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  color: #f3f4f6;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.omodal__links a:hover {
  background: rgba(45, 184, 122, 0.06);
  border-color: rgba(45, 184, 122, 0.3);
  color: #5de8a0;
}

.omodal__close {
  position: absolute;
  top: 0.6rem;
  right: 0.9rem;
  background: none;
  border: 0;
  color: #9ca3af;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}

.omodal__close:hover { color: #2db87a; }