:root{--ink:#202124;--muted:#6f7276;--orange:#ef7f1a;--orange-d:#d96808;--white:#fff;--soft:#f4f5f6;--line:#e4e6e8;--radius:28px;--wa:#22b75c;--viber:#7360f2;--ease:cubic-bezier(.23,1,.32,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font-family:Arial,"Helvetica Neue",sans-serif;font-size:17.5px;line-height:1.55}
a{color:inherit;text-decoration:none}a:hover{color:var(--orange-d)}button{font:inherit}
h1,h2,h3{margin:0;letter-spacing:-.02em}
.wrap{max-width:1240px;margin:0 auto;padding:0 5vw}
.narrow{max-width:840px}
.eyebrow,p.eyebrow{color:var(--orange);font-weight:800;font-size:14px;letter-spacing:.14em;text-transform:uppercase;margin:0}
.lead{color:var(--muted);font-size:19px;line-height:1.72}
.crumbs a{color:rgba(255,255,255,.75)}
.btn.p{background:var(--orange);color:#fff}.btn.p:hover{background:var(--orange-d);color:#fff;transform:translateY(-2px)}
.btn.o{background:#fff;color:var(--orange-d);border:1.5px solid var(--line)}.btn.o:hover{border-color:var(--orange);color:var(--orange-d)}
.faq-item{border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-bottom:12px;background:#fff}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 26px;background:none;border:0;cursor:pointer;text-align:left;font-size:18px;font-weight:700;color:var(--ink)}
.faq-sign{color:var(--orange);font-size:26px;line-height:1;flex:0 0 auto}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s cubic-bezier(.23,1,.32,1)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{margin:0;padding:0 26px 24px;color:var(--muted);line-height:1.7}
footer a{color:#cdc7bf}footer a:hover{color:var(--orange)}
@media(prefers-reduced-motion:reduce){*{transition-duration:.12s!important}}
.cta-band h2{color:#fff}
.badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:8px 16px;font-size:14px;font-weight:700;color:#fff}

/* ── Dodatno za produkciju (nije u prototipu) ─────────────────────── */
[hidden]{display:none!important}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--orange);color:#fff;padding:12px 20px;border-radius:0 0 12px 0;font-weight:750}
.skip-link:focus{left:0}
:where(a,button,summary,[tabindex]):focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}
/* Slike nose width/height atribute zbog CLS-a. Ako stil postavi samo
   sirinu, visina se mora racunati iz omjera, inace se slika razvuce. */
img{max-width:100%;height:auto}
.brand-lockup{display:flex;align-items:center;gap:11px}
.brand-mark{height:38px;width:auto;display:block}
.brand-word{font-weight:850;letter-spacing:4px;font-size:22px;color:var(--ink)}
.mobile-menu .mobile-cta{color:var(--orange-d);font-weight:750;border-bottom:0}
body.menu-open{overflow:hidden}

/* ── Mobilna upotrebljivost ────────────────────────────────────────
   Dodirni ciljevi ispod 44px se tesko pogadjaju prstom. Vizuelna
   velicina ostaje ista, siri se samo povrsina na koju se moze kliknuti. */
@media(max-width:900px){
  .menu-button{min-width:44px;min-height:44px;align-items:center;justify-content:center}
  .mobile-menu a{min-height:48px;display:flex;align-items:center}
  .foot-col a{min-height:40px;display:flex;align-items:center}
  .text-link{min-height:44px;display:inline-flex;align-items:center}
  .foot-bar-in a{min-height:40px;display:inline-flex;align-items:center}
  /* tacke karusela: vizuelno ostaju 15px, dodirna zona postaje 43px */
  .slider-controls .dot{position:relative}
  .slider-controls .dot::after{content:"";position:absolute;inset:-14px}
  /* nista ispod 12px, na malom ekranu postaje necitko */
  .site-footer small,.foot-bar-in{font-size:13px}
}

/* ── Sekcije i dugmad ──────────────────────────────────────────────
   Ova pravila su u prototipu bila samo na tri stranice pa nisu presla
   prag dijeljenja, a koriste ih 404, /nasi-radovi i /recenzije. */
.sec{padding:88px 0}
.sec h2{font-size:clamp(28px,3.4vw,44px);line-height:1.08}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:12px;font-weight:750;padding:15px 26px;font-size:16.5px;transition:transform .16s var(--ease),background .18s ease}
.btn.p:hover{background:var(--orange-d);color:#fff;transform:translateY(-2px)}
.btn.o:hover{border-color:var(--orange);color:var(--orange-d)}
@media(max-width:720px){.sec{padding:58px 0}}

.site-header{height:88px;display:flex;align-items:center;gap:24px;padding:0 4vw;position:fixed;left:0;right:0;top:0;border-bottom:1px solid var(--line);z-index:50;transition:box-shadow .3s ease}
.site-header.scrolled{box-shadow:0 8px 24px -16px rgba(20,22,24,.45)}
.brand{flex:0 0 auto}
.desktop-nav{display:flex;gap:34px;margin:auto;font-weight:650;font-size:19px}
.desktop-nav a{padding:34px 0;position:relative;color:var(--ink)}
.desktop-nav a:after{content:"";position:absolute;left:50%;right:50%;bottom:22px;height:2px;background:var(--orange);transition:.2s}
.desktop-nav a:hover:after{left:0;right:0}
.header-cta{display:inline-flex;align-items:center;gap:10px;border-radius:12px;font-weight:750;background:var(--orange);color:#fff;padding:15px 23px;transition:transform .16s cubic-bezier(.23,1,.32,1),background .18s ease}
.header-cta:hover{background:var(--orange-d);color:#fff;transform:translateY(-2px)}
.menu-button{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;margin-left:auto}
.menu-button span{width:26px;height:3px;border-radius:2px;background:var(--ink)}
.nav-mega{position:relative;display:inline-flex;align-items:center}
.nav-usluge{display:inline-flex;align-items:center;gap:6px}
.nav-chev{transition:transform .22s ease}.nav-mega:hover .nav-chev{transform:rotate(180deg)}
.mega-panel{position:absolute;left:50%;top:100%;transform:translate(-50%,8px);margin-top:6px;width:440px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 50px -28px rgba(1,6,46,.28);padding:10px;opacity:0;visibility:hidden;transition:.2s;z-index:60}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.mega-foot{margin-top:6px;padding-top:10px;border-top:1px solid var(--line);display:flex}
.mega-foot .mega-link{width:100%;color:#ef7f1a;font-weight:700}
.nav-mega:hover .mega-panel,.mega-panel:hover{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mega-link{display:block;padding:11px 15px;border-radius:9px;font-size:15px;font-weight:500}
.mega-link:hover{background:var(--soft);color:var(--orange-d)}
.menu-scrim{position:fixed;inset:0;background:rgba(20,16,11,.4);z-index:70}
.mobile-menu{position:fixed;top:0;right:0;bottom:0;width:min(80vw,320px);background:#fff;z-index:80;display:flex;flex-direction:column;gap:6px;padding:80px 26px;box-shadow:-20px 0 60px -30px rgba(0,0,0,.5)}
.mobile-menu a{padding:14px 4px;border-bottom:1px solid var(--line);font-weight:650;font-size:19px}
.mobile-menu button{position:absolute;top:22px;right:24px;font-size:30px;background:none;border:0;cursor:pointer;color:var(--ink)}
@media(max-width:1080px){.desktop-nav,.header-cta{display:none}.menu-button{display:flex}}

/* Naziv stavke u navigaciji se nikad ne smije prelomiti na dva reda. */
.desktop-nav a,.header-cta{white-space:nowrap}

/* ── Header ────────────────────────────────────────────────────────
   Puna bijela traka, bez prozirnosti i bez backdrop-filtera. Zamucenje
   na fiksnom elementu je ostavljalo svijetlu dlaku po ivicama, jer
   preglednik uzorkuje pola piksela izvan okvira. Puna boja to uklanja
   u korijenu. Pozadina i blur se skidaju iz CSS-a stranica u buildu. */
.site-header{background:#fff}
.site-header.scrolled{background:#fff}
/* Skok na sidro (#galerija i sl.) inace zavrsi ispod fiksnog headera. */
[id]{scroll-margin-top:104px}
@media(max-width:900px){[id]{scroll-margin-top:86px}}

/* ── Footer ───────────────────────────────────────────────────────── */
.site-footer{background:#171310;color:#a49c92;font-size:15px}
.site-footer .brand-word{color:#fff}
.foot-grid{max-width:1200px;margin:0 auto;padding:64px 5vw 30px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px}
.foot-about{margin:16px 0 0;max-width:320px;line-height:1.7}
.foot-col{display:flex;flex-direction:column;gap:11px}
.foot-col strong{color:#fff;text-transform:uppercase;letter-spacing:.05em;font-size:14px}
.foot-bar{border-top:1px solid rgba(255,255,255,.1)}
.foot-bar-in{max-width:1200px;margin:0 auto;padding:22px 5vw;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;color:#7d766c;font-size:13.5px}
/* Lijepljena WhatsApp traka na mobitelu prekriva dno stranice. */
@media(max-width:900px){.site-footer{padding-bottom:88px}}
@media(max-width:980px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:600px){.foot-grid{grid-template-columns:1fr;padding-top:48px}.foot-kw{display:none}}