/* ============================================================================
   FLEKOUT — futer

   Tamna traka iste boje kao traka usluga (#17252e), pa se sajt zatvara istim
   tonom kojim usluge govore. Veliki znak FLEKOUT na dnu je ista maska kao u
   heroju (logotip kao prozor), samo mirna: tek za nijansu svetliji od podloge.
   Ikonice su Phosphor "light", jedna porodica i jedna debljina linije.
============================================================================ */
.site-foot{--foot-text:#d7e1e6;--foot-muted:#91a6b4;--foot-line:#2c4250;
  background:var(--night);color:var(--foot-text);padding:96px 6vw 28px;overflow:hidden}
.foot-inner{max-width:1560px;margin:0 auto}
.foot-top{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px clamp(32px,6vw,110px);align-items:start}

.foot-brand h2{margin:0;color:#fff;font-size:clamp(30px,3.2vw,44px);font-weight:500;letter-spacing:-.045em;line-height:1.05}
.foot-brand p{margin:14px 0 30px;max-width:40ch;font-size:16px;line-height:1.65;color:var(--foot-muted)}
.foot-cta{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:34px;min-height:52px;padding:14px 32px;color:#fff;font-size:15px;font-weight:600;transition:transform .2s}
.foot-cta:before{content:"";position:absolute;inset:0;z-index:-1;background:var(--blue-ink);transition:background .2s;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 100%,16px 100%)}
.foot-cta{gap:12px;font-variant-numeric:tabular-nums}
.foot-cta-icon{width:22px;height:22px}
.foot-cta:hover:before{background:#0b6a9e}
.foot-cta:active{transform:translateY(1px)}

.foot-contact{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.foot-contact li{display:flex;gap:16px;align-items:center;padding:20px 0;border-top:1px solid var(--foot-line);min-width:0}
.foot-contact li:nth-last-child(-n+2){border-bottom:1px solid var(--foot-line)}
.foot-icon{flex:none;display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--foot-line);color:var(--foot-text);transition:border-color .25s,color .25s}
.foot-icon svg{width:22px;height:22px}
.foot-contact li:hover .foot-icon{border-color:var(--blue);color:#fff}
.foot-contact li>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.foot-label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--foot-muted)}
.foot-contact a,.foot-value{color:#fff;font-size:16px;font-weight:500;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.foot-contact a{width:fit-content;text-underline-offset:5px;text-decoration-thickness:1px}
.foot-contact a:hover{text-decoration:underline;text-decoration-color:var(--blue)}

/* znak: logotip kao maska, boja za nijansu svetlija od podloge */
.foot-mark{margin:88px 0 0;aspect-ratio:2048/449;max-width:100%;background:#1d303c;
  -webkit-mask:url(logo-white.svg) center/contain no-repeat;mask:url(logo-white.svg) center/contain no-repeat}

.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 24px;margin-top:28px;padding-top:20px;border-top:1px solid var(--foot-line);font-size:13px;color:var(--foot-muted)}
.foot-bottom a{color:var(--foot-text);transition:color .2s}
.foot-bottom a:hover{color:#fff}
.foot-bottom .foot-pib{margin-left:10px;color:#8a9ca8}
.foot-bottom .foot-credit{color:var(--foot-muted);font-weight:500;letter-spacing:.01em}
.foot-bottom .foot-credit:hover{color:#fff}
.site-foot a:focus-visible{outline:2px solid var(--blue);outline-offset:4px}

@media(max-width:900px){
  .foot-top{grid-template-columns:1fr}
}
@media(max-width:560px){
  .site-foot{padding:64px 6vw 24px}
  .foot-contact{grid-template-columns:1fr}
  .foot-contact li:nth-last-child(2){border-bottom:0}
  .foot-mark{margin-top:56px}
  /* telefon: © i politika u svojim redovima, potpis levo i "Nazad na vrh"
     desno u poslednjem redu (desno je palac) */
  .foot-bottom{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 16px}
  .foot-bottom>span:first-child,.foot-bottom a[href="politika-privatnosti.html"]{grid-column:1 / -1}
  .foot-bottom a[href="#pocetak"]{justify-self:end}
}
@media(prefers-reduced-motion:reduce){.foot-cta,.foot-cta span,.foot-icon{transition:none}}