/* ============================================================================
   FLEKOUT — osnova: tokeni, header, hero

   Plava ima dve nijanse i one se ne mešaju:
   --blue      #168ccd  brend: linije, markeri, ivice, sečivo
   --blue-ink  #0f7ab5  podloga ispod BELOG teksta (4.7:1) — dugmad, aktivni izbori
============================================================================ */
/* Manrope (SIL OFL), hostovan lokalno: brže i bez slanja podataka Google-u.
   Varijabilni font, težine 200-800; latin + latin-ext (č ć š ž đ). */
@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;
  src:url(fonts/manrope-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;
  src:url(fonts/manrope-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--paper:#fff;--ink:#202326;--muted:#5f686d;--lead:#6b757b;--blue:#168ccd;--blue-ink:#0f7ab5;--night:#17252e}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:5px}
h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.skip{position:fixed;top:-100px;left:30px;background:#fff;padding:16px;z-index:30}
.skip:focus{top:90px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* --- header ----------------------------------------------------------------
   Rez 22px na 73px = 16.8°. Uvek providan sa zamućenjem, pa ga je lako čitati
   i preko videa i preko belog. Glavni poziv na akciju je dugme. */
.site-head{position:fixed;top:22px;left:4%;width:92%;height:73px;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:0 14px 0 42px;color:var(--ink);clip-path:polygon(0 0,calc(100% - 22px) 0,100% 100%,22px 100%);
  background:rgba(246,248,249,.62);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);transition:background-color .35s}
.site-head.is-solid{background:rgba(236,239,241,.66)}
.brand img{display:block;width:140px;height:auto}
nav{display:flex;align-items:center;gap:34px;font-size:14px;font-weight:600}
.nav-link{padding:6px 0;text-underline-offset:6px}
.nav-link:hover{text-decoration:underline}
.nav-cta{position:relative;isolation:isolate;display:inline-flex;align-items:center;height:48px;padding:0 30px;margin-left:6px;color:#fff;white-space:nowrap;transition:transform .2s}
.nav-cta:before{content:"";position:absolute;inset:0;z-index:-1;background:var(--blue-ink);transition:background .2s;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 100%,14px 100%)}
.nav-cta:hover:before{background:#0b6a9e}
.nav-cta:active{transform:translateY(1px)}
/* Dugme u headeru se ne duplira sa onim u heroju: dok je hero dugme na ekranu,
   ovo je sklonjeno (širina 0, van tab redosleda), a kad hero dugme ode iz
   kadra, uđe u header. Prelaz se uključuje tek posle prvog kadra (.cta-ready)
   da se pri učitavanju ništa ne pomera. Bez JS-a dugme je uvek tu. */
.nav-cta{max-width:260px}
.site-head.is-cta-hidden .nav-cta{max-width:0;padding-inline:0;margin-left:-34px;opacity:0;visibility:hidden;pointer-events:none}
.site-head.is-cta-hidden{padding-right:44px}
.site-head.cta-ready{transition:background-color .35s,padding .45s cubic-bezier(.2,.7,.2,1)}
.site-head.cta-ready .nav-cta{transition:max-width .45s cubic-bezier(.2,.7,.2,1),padding .45s cubic-bezier(.2,.7,.2,1),margin .45s cubic-bezier(.2,.7,.2,1),opacity .3s .12s,visibility 0s,transform .2s}
.site-head.cta-ready.is-cta-hidden .nav-cta{transition:max-width .4s cubic-bezier(.4,0,.2,1),padding .4s cubic-bezier(.4,0,.2,1),margin .4s cubic-bezier(.4,0,.2,1),opacity .15s,visibility 0s .4s,transform .2s}

/* --- hero ------------------------------------------------------------------
   Jedna poruka, jedna akcija. Levo na belom: "Bez fleke.", jedan red o usluzi
   i dugme. Desno: video u visokom kadru čija leva ivica ide pod 16.8° (porodica
   "ivica / maska"), sa plavim sečivom duž te ivice. Pri učitavanju kadar
   prebriše ekran zdesna. Nema teksta preko videa. --cut meri JS iz visine. */
.hero{--cut:260px;position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);height:100svh;min-height:620px;max-height:1080px;background:var(--paper);overflow:hidden}
.hero-text{position:relative;z-index:2;align-self:end;padding:0 0 clamp(48px,9vh,104px) calc(4vw + 42px);min-width:0}
.hero h1{margin:0;font-size:clamp(64px,9.6vw,168px);font-weight:500;line-height:.9;letter-spacing:-.065em;color:var(--ink)}
.hero-line{display:block}
.hero-lead{margin:clamp(22px,3.4vh,36px) 0 clamp(26px,4vh,40px);font-size:clamp(16px,1.25vw,19px);line-height:1.55;color:var(--muted);max-width:34ch}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px}
.hero-cta{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:30px;min-height:54px;padding:14px 34px;color:#fff;font-size:15px;font-weight:600;transition:transform .2s}
.hero-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%)}
.hero-cta:hover:before{background:#0b6a9e}
.hero-cta:active{transform:translateY(1px)}
.hero-link{font-size:15px;font-weight:600;padding:12px 0;text-decoration:underline;text-decoration-color:#b9c3c8;text-underline-offset:6px;font-variant-numeric:tabular-nums;transition:text-decoration-color .2s}
.hero-link:hover{text-decoration-color:var(--ink)}

/* kadar ide od vrha do dna i do desne ivice; levo je kos */
.hero-media{position:relative;margin-left:calc(-1 * var(--cut) * .55)}
.hero-frame,.hero-blade{position:absolute;inset:0}
/* --open: koliko je kadar još zatvoren (100% = zatvoren, 0% = otvoren).
   Kosa ivica i sečivo se pomeraju zajedno; video stoji u mestu. */
@property --open{syntax:"<percentage>";inherits:true;initial-value:0%}
.hero-frame{clip-path:polygon(calc(var(--cut) + var(--open)) 0,100% 0,100% 100%,var(--open) 100%)}
.hero-frame{overflow:hidden;background:#33454f}
.hero-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* sečivo: 5px plave duž kose ivice */
.hero-blade{background:var(--blue);pointer-events:none;
  clip-path:polygon(calc(var(--cut) + var(--open)) 0,calc(var(--cut) + var(--open) + 5px) 0,calc(var(--open) + 5px) 100%,var(--open) 100%)}
/* otvaranje pri učitavanju: sečivo pređe zdesna nalevo pod 16.8° i za sobom
   otvori video. Video i kadar se ne pomeraju. */
.hero.has-wipe{--open:100%}
.hero.has-wipe.is-clean{--open:0%;transition:--open 1.4s cubic-bezier(.65,0,.25,1) .1s}
.hero.has-wipe .hero-toggle{opacity:0;transition:opacity .4s ease 1.3s}
.hero.has-wipe.is-clean .hero-toggle{opacity:1}
.hero-toggle{position:absolute;right:4%;bottom:clamp(28px,5vh,48px);z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.7);background:rgba(23,37,46,.28);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s}
.hero-toggle:hover{background:rgba(23,37,46,.5)}
.hero-toggle svg{width:18px;height:18px}
.hero-toggle .icon-play,.hero-toggle.is-paused .icon-pause{display:none}
.hero-toggle.is-paused .icon-play{display:block}

.eyebrow{font-size:14px;font-weight:600;letter-spacing:.07em}

@media(max-width:1000px){.nav-wide{display:none}}
@media(max-width:800px){
  /* telefon: isti sklad kao na računaru (belo levo, video desno, kosa ivica
     između), samo složen u jedan ekran. Video ide preko celog heroja, a beli
     panel sa tekstom sedi dole levo; njegova desna ivica je kosa pod 16.8° i
     nosi plavo sečivo. Tekst i video se vide zajedno, bez skrolovanja.
     --pcut meri JS iz visine panela. */
  .hero{display:block;height:100svh;min-height:600px;max-height:none;--pcut:100px}
  .hero-media{position:absolute;inset:0;margin:0}
  .hero-frame{clip-path:polygon(var(--open) 0,100% 0,100% 100%,var(--open) 100%)}
  .hero-blade{display:none}
  .hero-text{position:absolute;left:0;right:0;bottom:0;z-index:2;isolation:isolate;
    padding:30px calc(var(--pcut) + 8px) calc(26px + env(safe-area-inset-bottom,0px)) calc(4vw + 22px);
    background:var(--blue);clip-path:polygon(0 0,100% 0,calc(100% - var(--pcut)) 100%,0 100%)}
  .hero-text:before{content:"";position:absolute;inset:0 5px 0 0;z-index:-1;background:var(--paper);
    clip-path:polygon(0 0,100% 0,calc(100% - var(--pcut) + 1.5px) 100%,0 100%)}
  .hero h1{font-size:clamp(54px,16.5vw,84px);line-height:.88}
  .hero-lead{font-size:15px;line-height:1.5;margin:14px 0 18px;max-width:30ch}
  .hero-actions{gap:8px 20px}
  .hero-cta{min-height:50px;padding:12px 26px;gap:22px}
  .hero-link{padding:8px 0}
  .hero-toggle{right:12px;bottom:calc(14px + env(safe-area-inset-bottom,0px));width:40px;height:40px}
}
@media(max-width:650px){
  .site-head{top:14px;height:62px;padding:0 8px 0 22px;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 100%,18px 100%)}
  .brand img{width:100px}
  nav{gap:16px}
  .nav-cta{height:42px;padding:0 20px;font-size:13px;margin-left:0}
  .nav-cta:before{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 100%,12px 100%)}
  .site-head.is-cta-hidden .nav-cta{margin-left:-16px}
  .site-head.is-cta-hidden{padding-right:8px}
}
@media(max-width:650px){.nav-mid{display:none}}
/* --- učitavanje -----------------------------------------------------------
   Beli ekran sa logom koji se puni plavom, uvek oko 2 s, a duže samo ako se
   hero video još učitava (vidi motion.js). Bez JS-a klasa .is-loading ne
   postoji. */
.loader{display:none}
.is-loading .loader,.loader.is-leaving{display:grid;place-items:center;position:fixed;inset:0;z-index:100;background:#fff}
.is-loading{overflow:hidden}
.loader.is-leaving{opacity:0;pointer-events:none;transition:opacity .45s ease}
.loader-logo{width:min(220px,52vw);aspect-ratio:1228/269;opacity:0;animation:loader-in .3s forwards;
  background:linear-gradient(90deg,var(--blue) var(--fill,0%),#dbe2e6 0);
  -webkit-mask:url(logo-black.svg) center/contain no-repeat;mask:url(logo-black.svg) center/contain no-repeat}
@keyframes loader-in{to{opacity:1}}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}.hero{--open:0%!important}}

/* --- plutajuće "Pozovi" na telefonu ---------------------------------------
   Telefon je glavni kanal za ovu vrstu usluge. Dugme se pojavi kad hero ode
   iz kadra, a skloni se dok su na ekranu usluge, forma ili futer (tu već
   postoje pozivi na akciju i ne sme da prekrije sadržaj). */
.call-fab{display:none}
@media(max-width:800px){
  .call-fab{position:fixed;z-index:20;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));isolation:isolate;
    display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:12px 26px 12px 24px;color:#fff;font-size:15px;font-weight:600;
    filter:drop-shadow(0 8px 18px rgba(15,40,56,.35));
    opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .25s,transform .25s}
  .call-fab:before{content:"";position:absolute;inset:0;z-index:-1;background:var(--blue-ink);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 100%,14px 100%)}
  .call-fab svg{width:22px;height:22px}
  .call-fab.is-visible{opacity:1;transform:none;pointer-events:auto}
}