/* ============================================================
   DEKS — premium dark theme
   Paleta: crna pozadina (#0a0b0d), toplo bela (#f4f2ee) tekst,
   akcent "diht plava" (#3fb6e8) + bakarna (#c68a4e) kao podsetnik
   na bakar/mesing od kojih su se pravile prve lajsne.
   ============================================================ */

:root{
  --bg: #0a0b0d;
  --bg-2: #101215;
  --ink: #f4f2ee;
  --ink-dim: #9a9ea3;
  --accent: #3fb6e8;
  --accent-2: #c68a4e;
  --line: rgba(244,242,238,.10);
  --radius: 2px;
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
/* Suptilna pozadinska tekstura — asocijacija na profilisane aluminijumske lajsne, sporo se pomera */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:repeating-linear-gradient(135deg, rgba(63,182,232,.05) 0px, rgba(63,182,232,.05) 2px, transparent 2px, transparent 26px);
  background-size:220% 220%;
  animation:lajsna-drift 50s linear infinite;
}
@keyframes lajsna-drift{
  0%{background-position:0% 0%;}
  100%{background-position:220px 220px;}
}
#main, header.site-header, footer.site-footer, .topbar{position:relative; z-index:1;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; line-height:1.1; margin:0 0 .5em;}
p{margin:0 0 1em; color:var(--ink-dim);}
.container{max-width:1180px; margin:0 auto; padding:0 24px;}
.eyebrow{font-family:var(--font-mono); letter-spacing:.18em; text-transform:uppercase; font-size:.72rem; color:var(--accent);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
}

/* ---------- Topbar / Header ---------- */
.topbar{background:var(--bg-2); border-bottom:1px solid var(--line); font-size:.8rem; color:var(--ink-dim);}
.topbar .container{display:flex; justify-content:space-between; align-items:center; padding-top:8px; padding-bottom:8px;}
.topbar a{color:var(--ink-dim);}
.topbar .phones span{margin-left:16px;}

header.site-header{position:sticky; top:0; z-index:50; border-bottom:1px solid var(--line);}
header.site-header::before{content:""; position:absolute; inset:0; z-index:-1; background:rgba(10,11,13,.88); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);}
.site-header .container{display:flex; align-items:center; justify-content:space-between; padding-top:16px; padding-bottom:16px;}
.logo{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:1.5rem; letter-spacing:.02em;}
.logo img{height:38px; width:auto;}
.logo .mark{color:var(--accent);}

nav.main-nav ul{list-style:none; display:flex; gap:2px; margin:0; padding:0;}
nav.main-nav li{position:relative;}
nav.main-nav a{display:block; padding:10px 16px; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); transition:color .25s ease;}
nav.main-nav a:hover, nav.main-nav li.active > a{color:var(--accent);}
nav.main-nav .submenu{position:absolute; left:0; top:100%; min-width:200px; background:var(--bg-2); border:1px solid var(--line); padding:6px 0; opacity:0; visibility:hidden; transform:translateY(6px); transition:all .2s ease;}
nav.main-nav li:hover .submenu{opacity:1; visibility:visible; transform:translateY(0);}
nav.main-nav .submenu a{text-transform:none; letter-spacing:0; padding:9px 18px;}
.nav-toggle{display:none; background:none; border:0; color:var(--ink); font-size:1.6rem;}
.lang-switch{margin-left:18px;}
.lang-switch select{background:transparent; color:var(--ink-dim); border:1px solid var(--line); font-family:var(--font-mono); font-size:.7rem; padding:6px 8px; cursor:pointer; appearance:none; -webkit-appearance:none;}
.lang-switch select:hover, .lang-switch select:focus{color:var(--accent); border-color:var(--accent);}
.lang-switch select option{background:var(--bg-2); color:var(--ink);}
@media (max-width:900px){.lang-switch{margin-left:auto; margin-right:10px;}}

@media (max-width:900px){
  nav.main-nav{position:fixed; inset:0 0 0 auto; width:78%; max-width:320px; background:var(--bg-2); transform:translateX(100%); transition:transform .35s ease; padding:90px 24px 24px; overflow-y:auto;}
  nav.main-nav.open{transform:translateX(0);}
  nav.main-nav ul{flex-direction:column; gap:0;}
  nav.main-nav .submenu{position:static; opacity:1; visibility:visible; transform:none; border:0; padding-left:14px; display:none;}
  nav.main-nav li.open .submenu{display:block;}
  .nav-toggle{display:block;}
}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; min-height:78vh; display:flex; align-items:center; border-bottom:1px solid var(--line); background:var(--bg);}
.hero::before{content:"";position:absolute; inset:0; background:radial-gradient(ellipse at 20% 20%, rgba(63,182,232,.14), transparent 55%), radial-gradient(ellipse at 85% 80%, rgba(198,138,78,.10), transparent 50%);}
.hero-bg{position:absolute; inset:0; background-size:cover; background-position:center; opacity:.28; filter:grayscale(.25);}
.hero-content{position:relative; z-index:2; max-width:760px;}
.hero h1{font-size:clamp(2.1rem,5vw,3.6rem); margin-bottom:.35em;}
.hero .subtitle{font-size:1.15rem; color:var(--ink); opacity:.85; margin-bottom:1.6em;}
.btn{display:inline-flex; align-items:center; gap:8px; padding:14px 30px; border:1px solid var(--accent); color:var(--ink); font-family:var(--font-mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; transition:all .3s ease; background:transparent;}
.btn:hover{background:var(--accent); color:#03181f;}
.btn.solid{background:var(--accent); color:#03181f;}
.btn.solid:hover{background:#fff; border-color:#fff;}

/* Prozor koji zaustavlja promaju — vizuelna referenca na aluminijumsku lajsnu za dihtovanje.
   Animacija ide preko SVG <animate> (SMIL) unutar markup-a — pouzdanije na mobilnim pregledačima
   od CSS animacije transform/r na SVG elementima. */
.draft-lines{position:absolute; inset:0; pointer-events:none; z-index:1; opacity:.9; min-height:180px;}
.draft-lines svg{width:100%; height:100%; overflow:visible;}

.window-outer{fill:none; stroke:rgba(244,242,238,.28); stroke-width:2;}
.window-glass{fill:rgba(63,182,232,.10); stroke:rgba(63,182,232,.35); stroke-width:1;}
.window-mullion{stroke:rgba(244,242,238,.22); stroke-width:2;}
.window-seal{fill:var(--accent-2); opacity:.9;}

.draft-line{stroke:var(--accent); stroke-width:2.5; fill:none; stroke-dasharray:10 14; stroke-linecap:round; opacity:0;}
.deflect-burst{fill:var(--accent); opacity:0;}

/* Minimalistička "linija koja crta okvir" animacija — čista, potpuno neprovidna linija na neprovidnoj pozadini sekcije, bez providnih/washed-out efekata */
.corner-frame-anim{opacity:1; min-height:260px;}
.corner-path{fill:none; stroke:var(--ink); stroke-width:3; stroke-linecap:square; stroke-linejoin:miter;}
.corner-dot{fill:var(--accent);}

/* Mreža sa pulsirajućim tačkama — neutralna, univerzalna */
.grid-pulse-anim{opacity:1;}
.grid-dot{fill:var(--accent);}

/* CTA strip ispod hero-a */
.cta-strip{background:var(--accent); color:#03181f; text-align:center; padding:26px 0;}
.cta-strip .eyebrow2{font-family:var(--font-mono); letter-spacing:.16em; text-transform:uppercase; font-size:.85rem; margin-bottom:14px;}
.cta-strip .btn{border-color:#03181f; color:#03181f;}
.cta-strip .btn:hover{background:#03181f; color:var(--accent);}

/* ---------- Sekcije ---------- */
.section{padding:88px 0; border-bottom:1px solid var(--line);}
.section.tight{padding:56px 0;}
.page-title-band{position:relative; overflow:hidden; padding-bottom:56px; min-height:200px; display:flex; align-items:center; background:var(--bg);}
.page-title-band .container{width:100%;}
.page-title-band h1{position:relative; z-index:2;}
.page-title-band::after{
  content:""; position:absolute; left:50%; bottom:14px; width:120px; height:6px;
  background:linear-gradient(90deg, transparent, var(--accent-2), var(--accent), transparent);
  transform:translateX(-50%) scaleX(0); transform-origin:center;
  animation:lajsna-slide 1.4s cubic-bezier(.16,.8,.3,1) .3s forwards;
}
@keyframes lajsna-slide{
  0%{transform:translateX(-50%) scaleX(0); opacity:0;}
  60%{opacity:1;}
  100%{transform:translateX(-50%) scaleX(1); opacity:1;}
}
.section-title{text-align:center; max-width:680px; margin:0 auto 20px;}
.section-title h2{font-size:clamp(1.6rem,3vw,2.1rem);}
.section-rule{width:64px; height:2px; background:var(--accent); margin:0 auto 40px;}
.rich-text{max-width:820px; margin:0 auto; color:var(--ink-dim);}
.rich-text ul{padding-left:1.2em;}
.rich-text li{margin-bottom:.4em;}

/* Statistike sa "zaptivanje zatvoreno" motivom — čvrsti brojevi, mirna karta nakon animacije dolaska */
.stats-band{position:relative; background:var(--bg-2);}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);}
.stat-card{background:var(--bg); padding:44px 24px; text-align:center; opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.stat-card.in-view{opacity:1; transform:translateY(0);}
.stat-card .icon{width:34px; height:34px; margin:0 auto 16px; color:var(--accent);}
.stat-card .value{font-family:var(--font-display); font-size:2.4rem; color:var(--ink);}
.stat-card .label{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); margin-top:8px;}

/* Sertifikati */
.cert-list{max-width:760px; margin:0 auto; display:grid; gap:14px;}
.cert-item{border:1px solid var(--line); padding:18px 22px; font-size:.92rem; color:var(--ink-dim); position:relative; padding-left:44px;}
.cert-item::before{content:"✓"; position:absolute; left:16px; top:16px; color:var(--accent); font-family:var(--font-mono);}

/* Video */
.video-wrap{max-width:900px; margin:0 auto;}
.video-frame{position:relative; padding-top:56.25%; background:var(--bg-2); border:1px solid var(--line); overflow:hidden;}
.video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.video-frame .empty-note{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--ink-dim); font-family:var(--font-mono); font-size:.8rem; text-align:center; padding:20px;}

/* Galerija — podržava izbor formata po sekciji */
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:4px;}
.gallery-grid a{display:block; overflow:hidden; position:relative; aspect-ratio:1/1;}
.gallery-grid.ar-16-9 a{aspect-ratio:16/9;}
.gallery-grid.ar-9-16 a{aspect-ratio:9/16;}
.gallery-grid img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease, filter .5s ease; filter:grayscale(.35);}
.gallery-grid a:hover img{transform:scale(1.06); filter:grayscale(0);}
@media (max-width:760px){.gallery-grid{grid-template-columns:repeat(2,1fr);} .stats-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:760px){.gallery-grid.ar-9-16{grid-template-columns:repeat(3,1fr);}}

/* Video galerija — 16:9 / 1:1 / 9:16 (Reels/Shorts format) */
.video-gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.video-gallery-grid.ar-9-16{grid-template-columns:repeat(4,1fr); max-width:900px; margin:0 auto;}
.video-gallery-item iframe{width:100%; aspect-ratio:16/9; border:0; background:var(--bg-2); display:block;}
.video-gallery-grid.ar-1-1 .video-gallery-item iframe{aspect-ratio:1/1;}
.video-gallery-grid.ar-9-16 .video-gallery-item iframe{aspect-ratio:9/16;}
.video-gallery-caption{margin:8px 0 0; font-size:.82rem; color:var(--ink-dim); text-align:center;}

/* Slika + tekst — dve kolone, redosled se okreće za varijantu "slika desno" */
.imgtext-row{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
.imgtext-row.imgtext-right .imgtext-media{order:2;}
.imgtext-row.imgtext-right .imgtext-text{order:1;}
.imgtext-text{max-width:none;}
@media (max-width:760px){
  .imgtext-row{grid-template-columns:1fr; gap:24px;}
  .imgtext-row.imgtext-right .imgtext-media, .imgtext-row.imgtext-right .imgtext-text{order:0;}
}

/* Tanak plavi (akcentni) okvir oko slike, sa animacijom koja "kruži" oko slike —
   rotira se ceo gradijent iza slike preko transform:rotate (pouzdano na mobilnom,
   za razliku od animiranja boje/box-shadow) i providi kroz uzak razmak od par piksela. */
.imgtext-frame{position:relative; padding:4px; border-radius:6px; overflow:hidden; background:var(--bg-2);}
.imgtext-frame::before{
  content:""; position:absolute; inset:-50%;
  background:conic-gradient(from 0deg, transparent 0deg, var(--accent) 55deg, transparent 130deg, transparent 360deg);
  animation:imgtext-spin 3.5s linear infinite;
}
.imgtext-frame img{position:relative; display:block; width:100%; border-radius:3px;}
@keyframes imgtext-spin{ to{ transform:rotate(360deg); } }

/* Foto red — jedna do više slika, uvek centrirano (flex+justify-content:center
   automatski centrira grupu bez obzira da li ima 1, 2 ili više slika) */
.photo-row-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:28px;}
.photo-row-item{width:260px; max-width:100%;}
.photo-row-caption{margin:10px 0 0; font-size:.85rem; color:var(--ink-dim); text-align:center;}
@media (max-width:600px){.photo-row-item{width:100%; max-width:320px;}}
@media (max-width:900px){.video-gallery-grid{grid-template-columns:repeat(2,1fr);} .video-gallery-grid.ar-9-16{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.video-gallery-grid{grid-template-columns:1fr;} .video-gallery-grid.ar-9-16{grid-template-columns:repeat(2,1fr);}}

/* Slike sa natpisima — uniformna veličina bez obzira na originalne dimenzije */
.image-list-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.image-list-card{display:flex; flex-direction:column;}
.image-list-thumb{aspect-ratio:4/3; overflow:hidden; background:var(--bg-2); border:1px solid var(--line);}
.image-list-thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.image-list-card:hover .image-list-thumb img{transform:scale(1.05);}
.image-list-empty{width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--ink-dim); font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.06em;}
.image-list-caption{margin:10px 0 0; font-size:.85rem; color:var(--ink-dim); text-align:center;}
@media (max-width:900px){.image-list-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:600px){.image-list-grid{grid-template-columns:repeat(2,1fr); gap:16px;}}

/* Reveal on scroll za sekcije */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in-view{opacity:1; transform:translateY(0);}

/* Blog */
.post-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.post-card{border:1px solid var(--line); display:flex; flex-direction:column;}
.post-card img{aspect-ratio:16/10; object-fit:cover; filter:grayscale(.3);}
.post-card .body{padding:22px;}
.post-card h3{font-size:1.15rem;}
.post-card .date{font-family:var(--font-mono); font-size:.72rem; color:var(--accent); letter-spacing:.08em; text-transform:uppercase;}
@media (max-width:900px){.post-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.post-grid{grid-template-columns:1fr;}}

/* Kontakt */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px;}
.contact-info div{margin-bottom:18px; color:var(--ink-dim);}
.contact-info strong{color:var(--ink); display:block; font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:4px;}
form.contact-form input, form.contact-form textarea{width:100%; background:var(--bg-2); border:1px solid var(--line); color:var(--ink); padding:13px 14px; margin-bottom:12px; font-family:var(--font-body); font-size:.95rem;}
form.contact-form input:focus, form.contact-form textarea:focus{outline:2px solid var(--accent); outline-offset:1px;}
.honeypot{position:absolute; left:-9999px; opacity:0;}

/* ---------- Footer ---------- */
footer.site-footer{background:var(--bg-2); padding:64px 0 24px; border-top:1px solid var(--line);}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; margin-bottom:40px;}
.footer-grid h4{font-family:var(--font-mono); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:16px;}
.footer-grid ul{list-style:none; margin:0; padding:0;}
.footer-grid li{margin-bottom:9px;}
.footer-grid a{color:var(--ink-dim); transition:color .2s;}
.footer-grid a:hover{color:var(--accent);}
.social-row{display:flex; gap:12px; margin-top:6px;}
.social-row a{width:36px; height:36px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; border-radius:50%; transition:border-color .2s, color .2s;}
.social-row a:hover{border-color:var(--accent); color:var(--accent);}
.footer-bottom{border-top:1px solid var(--line); padding-top:20px; text-align:center; font-size:.78rem; color:var(--ink-dim);}
.footer-bottom a{color:var(--accent);}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr;} .contact-grid{grid-template-columns:1fr;}}

/* skip link a11y */
.skip-link{position:absolute; left:-9999px; top:0; background:var(--accent); color:#03181f; padding:10px 16px; z-index:100;}

/* Plutajuće dugme telefona sa glow efektom — boja podesiva iz panela preko --fp-color.
   Glow ide preko posebnog prstena koji se animira transform/opacity (ne box-shadow) —
   pouzdanije se renderuje na mobilnim pregledačima. */
.floating-phone{
  position:fixed; right:22px; bottom:22px; z-index:80;
  width:58px; height:58px; border-radius:50%;
  background:var(--fp-color, var(--accent));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  transition:transform .2s ease;
  overflow:visible;
}
.floating-phone:hover{transform:scale(1.08);}
.floating-phone-ring{
  position:absolute; inset:0; border-radius:50%;
  background:rgb(var(--fp-glow, 63,182,232));
  animation:fp-ring 2s ease-out infinite;
  pointer-events:none;
  z-index:0;
}
@keyframes fp-ring{
  0%{transform:scale(1); opacity:.55;}
  100%{transform:scale(1.9); opacity:0;}
}
.floating-phone svg{position:relative; z-index:1; width:26px; height:26px; flex-shrink:0; display:block;}
@media (max-width:600px){.floating-phone{right:16px; bottom:16px; width:52px; height:52px;} .floating-phone svg{width:23px; height:23px;}}
.skip-link:focus{left:16px; top:16px;}

/* focus vidljiv svuda */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}