/* ==========================================================================
   Cume Taxi Velika Plana
   Dizajn: Figma "Radovi" / node 258:113  ->  statični HTML + CSS + JS
   Referentna širina dizajna: 1382px
   ========================================================================== */

/* ---------------------------------- FONT --------------------------------- */
@font-face{
  font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/plus-jakarta-sans-latin-ext-400-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:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/plus-jakarta-sans-latin-400-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;
}
@font-face{
  font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/plus-jakarta-sans-latin-ext-600-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:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/plus-jakarta-sans-latin-600-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;
}
@font-face{
  font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;
  src:url('assets/fonts/plus-jakarta-sans-latin-ext-800-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:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;
  src:url('assets/fonts/plus-jakarta-sans-latin-800-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;
}

/* --------------------------- DESIGN TOKENS (Figma) ----------------------- */
:root{
  /* Colors — iz Figma varijabli */
  --yellow:        #f9ba27;
  --text-title:    #131313;   /* Colors/Text/Text tittle */
  --text-body:     rgba(19,19,19,.6);  /* Colors/Text/Text Body */
  --black:         #000000;   /* Color Neutral/black */
  --white:         #ffffff;   /* Color Neutral/white */
  --card-bg:       #f3f3f3;
  --hairline:      rgba(255,255,255,.24);

  /* Type scale — dizajn px @1382 */
  --fs-eyebrow:  clamp(13px,   1.093vw, 15.11px);
  --fs-h1:       clamp(40px,   6.247vw, 86.34px);
  --fs-quote:    clamp(31px,   4.685vw, 64.75px);
  --fs-h2:       clamp(34px,   5.622vw, 77.71px);
  --fs-card-t:   clamp(21px,   1.874vw, 25.90px);
  --fs-body:     clamp(15.5px, 1.249vw, 17.27px);
  --fs-btn:      clamp(13.5px, 1.093vw, 15.11px);
  --fs-logo:     clamp(26px,   2.515vw, 34.76px);
  --fs-f-logo:   clamp(36px,   3.917vw, 54.14px);
  --fs-f-head:   clamp(26px,   2.460vw, 34.00px);

  /* Spacing */
  --gap-sm:  clamp(9px,  0.937vw, 12.95px);
  --gap-md:  clamp(24px, 2.421vw, 33.46px);
  --gap-lg:  clamp(30px, 3.124vw, 43.17px);
  --gap-xl:  clamp(44px, 5.622vw, 77.71px);
  --pad-x:   clamp(20px, 4.341vw, 60px);
  --card-p:  clamp(20px, 1.874vw, 25.90px);
  --btn-h:   clamp(44px, 3.466vw, 47.90px);
  --corner:  clamp(56px, 5.622vw, 77.71px);   /* žuti kvadrat na kartici */
}

/* ---------------------------------- BASE --------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-weight:600;
  color:var(--text-title);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,iframe{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,p{margin:0}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

.container{width:100%;max-width:1382px;margin-inline:auto;padding-inline:var(--pad-x)}
.ico{width:1em;height:1em;fill:currentColor}
.is-yellow{color:var(--yellow)}
.eyebrow{
  font-size:var(--fs-eyebrow);line-height:1.429;letter-spacing:-.03em;
  text-transform:uppercase;color:var(--text-title);
}
.eyebrow--yellow{color:var(--yellow)}

/* --- Nadnaslovi: linija se povuče, pa slova uklize (anime.js "ml14") ------
   Linija je 2px u boji teksta (currentColor), pa radi i na crnom i na belom.
   Donji padding pravi mesto za nju, a negativna margina ga poništi — tako
   raspored ostaje isti kao pre animacije.
   -------------------------------------------------------------------------- */
[data-eyebrow] .text-wrapper{
  position:relative;display:inline-block;
  padding:.1em .05em .5em 0;
  margin-bottom:-.5em;
}
[data-eyebrow] .line{
  position:absolute;left:0;bottom:.16em;
  height:2px;width:100%;
  background:currentColor;
  transform-origin:100% 100%;    /* crta se zdesna nalevo */
  opacity:0;
}
[data-eyebrow] .letter{ display:inline-block;line-height:1 }

[data-eyebrow].is-ready .line{
  animation:eyebrow-line 900ms cubic-bezier(.87,0,.13,1) both;   /* easeInOutExpo */
  animation-play-state:paused;
}
[data-eyebrow].is-ready .letter{
  animation:eyebrow-letter 800ms cubic-bezier(.16,1,.3,1) both;  /* easeOutExpo */
  animation-delay:var(--d,0ms);
  animation-play-state:paused;
}
[data-eyebrow].is-playing .line,
[data-eyebrow].is-playing .letter{ animation-play-state:running }

@keyframes eyebrow-line{
  from{ transform:scaleX(0); opacity:.5 }
  to  { transform:scaleX(1); opacity:1 }
}
@keyframes eyebrow-letter{
  from{ opacity:0; transform:translateX(.78em) scaleX(.3) }
  to  { opacity:1; transform:translateX(0)     scaleX(1) }
}

@media (prefers-reduced-motion:reduce){
  [data-eyebrow].is-ready .line{animation:none;opacity:1}
  [data-eyebrow].is-ready .letter{animation:none}
}

/* --------------------------------- BUTTON -------------------------------- */
.btn{
  display:inline-flex;align-items:stretch;
  height:var(--btn-h);flex:0 0 auto;width:max-content;
  transition:transform .18s ease, filter .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn__label{
  display:flex;align-items:center;justify-content:center;
  padding-inline:clamp(20px,2.499vw,34.54px);
  font-size:var(--fs-btn);font-weight:600;line-height:1.429;
  letter-spacing:-.03em;text-transform:uppercase;white-space:nowrap;
}
.btn__icon{
  display:flex;align-items:center;justify-content:center;
  width:var(--btn-h);aspect-ratio:1;flex:0 0 auto;
}
.ico--arrow{width:.475em;height:.475em;font-size:calc(var(--btn-h));transform:rotate(90deg)}
.btn__icon .ico--arrow{width:22.12px;height:22.12px;font-size:inherit}

/* varijante */
.btn--yellow   .btn__label{background:var(--yellow);color:var(--black)}
.btn--yellow   .btn__icon {background:var(--black); color:var(--white)}
.btn--dark     .btn__label{background:var(--text-title);color:var(--yellow)}
.btn--dark     .btn__icon {background:var(--yellow);   color:var(--black)}
.btn--onbanner .btn__label{background:var(--yellow);color:var(--black)}
.btn--onbanner .btn__icon {background:var(--white); color:var(--black)}

/* --- Hover na svim "Pozovi odmah" dugmadima ------------------------------
   Natpis se puni crnim sleva nadesno, slova postaju bela.
   Kvadrat sa strelicom se puni žutim zdesna nalevo, strelica postaje crna.

   Punjenje je urađeno preko background-image + background-size, ne preko
   pseudo-elementa — pozadinska slika se crta iznad boje pozadine a ispod
   teksta, pa nije potreban nijedan dodatni element ni z-index.

   Boje punjenja su varijable, pa svaka varijanta dugmeta može svoje:
     --fill-label   čime se puni natpis
     --fill-icon    čime se puni kvadrat sa strelicom
     --hover-text   boja slova na hoveru
     --hover-arrow  boja strelice na hoveru
   -------------------------------------------------------------------------- */
.btn{
  --fill-label:var(--black);
  --fill-icon:var(--yellow);
  --hover-text:var(--white);
  --hover-arrow:var(--black);
}
/* Baner: natpis se puni belim, slova ostaju crna. Kvadrat sa strelicom ide
   obrnuto — iz bele u žutu — da se zamena boja vidi i na toj strani.
   Mora posle .btn bloka: ista težina selektora, pa odlučuje redosled. */
.btn--onbanner{
  --fill-label:var(--white);
  --hover-text:var(--black);
}
.btn .btn__label,
.btn .btn__icon{
  background-repeat:no-repeat;
  background-size:0% 100%;
  transition:background-size .42s cubic-bezier(.65,0,.35,1), color .28s ease .06s;
}
.btn .btn__label{
  background-image:linear-gradient(var(--fill-label),var(--fill-label));
  background-position:left center;    /* raste sleva nadesno */
}
.btn .btn__icon{
  background-image:linear-gradient(var(--fill-icon),var(--fill-icon));
  background-position:right center;   /* raste zdesna nalevo */
}
.btn:hover .btn__label,  .btn:focus-visible .btn__label,
.btn:hover .btn__icon,   .btn:focus-visible .btn__icon{ background-size:100% 100% }

.btn:hover .btn__label, .btn:focus-visible .btn__label{ color:var(--hover-text) }
.btn:hover .btn__icon,  .btn:focus-visible .btn__icon { color:var(--hover-arrow) }

/* dugmad ne poskaču — imaju svoj efekat */
.btn:hover{transform:none}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  min-height:clamp(560px,52.6vw,727px);
  display:flex;flex-direction:column;
  overflow:hidden;
  background:var(--white);
}
/* --- Fotografija u hero-u -------------------------------------------------
   U dizajnu je fotografija PRESLIKANA (u ogledalu) u odnosu na original:
   zadnji deo auta ide ka gornjem desnom uglu, a ne ka levom. Otud --hero-flip:-1.

   Sve podešavanje ide preko varijabli ispod — menjaj njih, ne pravila:
     --hero-flip    1 = original, -1 = u ogledalu
     --hero-pos-x   koji deo slike je u kadru vodoravno — deluje samo kad je
                    kadar uži od slike (tablet/telefon); na desktopu nema efekta
     --hero-pos-y   koji deo slike je u kadru uspravno (manje = više neba)
     --hero-x/-y    pomeranje kadra (pozitivno x = udesno)
     --hero-rotate  nagib
     --hero-zoom    uvećanje; mora > 1 kad ima nagiba ili pomeranja,
                    inače se pojave prazni uglovi
   -------------------------------------------------------------------------- */
.hero__media{
  position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--white);
  --hero-flip:-1;
  --hero-pos-x:50%;
  --hero-pos-y:0%;
  --hero-x:33%;
  --hero-y:0%;
  --hero-rotate:0deg;
  --hero-zoom:1.18;
}
.hero__media picture{display:block;position:absolute;inset:0}
.hero__media img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  object-position:var(--hero-pos-x) var(--hero-pos-y);
  transform:
    translate(var(--hero-x),var(--hero-y))
    rotate(var(--hero-rotate))
    scale(calc(var(--hero-zoom) * var(--hero-flip)), var(--hero-zoom));
  transform-origin:center;
}
/* Šenčenje: belo sleva da crn naslov ostane čitljiv. Osa preliva je blago
   ukošena (100deg), kao u dizajnu — belo seže niže na levoj strani. */
.hero__media::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg,
      var(--white)            0%,
      rgba(255,255,255,.99)  22%,
      rgba(255,255,255,.92)  33%,
      rgba(255,255,255,.66)  45%,
      rgba(255,255,255,.24)  58%,
      rgba(255,255,255,0)    72%),
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 18%),
    linear-gradient(0deg,   var(--white) 0%, rgba(255,255,255,.50) 7%, rgba(255,255,255,0) 20%);
}
.hero__inner{
  position:relative;z-index:3;
  width:100%;max-width:1382px;margin-inline:auto;
  padding:clamp(22px,2.966vw,41px) var(--pad-x) clamp(24px,2.24vw,31px);
  display:flex;flex-direction:column;flex:1;
}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{
  font-size:var(--fs-logo);font-weight:600;line-height:1;
  letter-spacing:-.06em;text-transform:uppercase;color:var(--black);
}

/* naslovni blok */
.hero__content{
  margin-top:clamp(20px,1.881vw,26px);
  display:flex;flex-direction:column;gap:var(--gap-lg);
  max-width:945px;
}
.hero__title{
  font-size:var(--fs-h1);font-weight:600;line-height:1.26;
  letter-spacing:-.04em;color:var(--black);
}
.hero__title .is-yellow{display:block}
.hero__quote{
  font-size:var(--fs-quote);font-weight:400;line-height:1.26;
  letter-spacing:-.04em;color:var(--black);max-width:768px;
}
.hero__quote b{font-weight:800}
.hero__quote .q{font-weight:800}
.hero__quote .q-semi{font-weight:600}   /* " j" u "jeftinije" — kao u Figmi */
.hero__quote-indent{padding-left:2.2ch}

/* --- Animacija: slova iskaču jedno po jedno -------------------------------
   Elastično popuštanje je odrađeno preko linear() krive (ista ideja kao
   elasticity:600 u anime.js), bez ijedne biblioteke. Slova ubacuje main.js.
   -------------------------------------------------------------------------- */
:root{ --elastic:cubic-bezier(.22,1.42,.36,1) }
@supports (animation-timing-function:linear(0,1)){
  :root{
    --elastic:linear(
      0, 0.4195, 0.9127, 1.2393, 1.329, 1.2416, 1.0875, 0.9598, 0.902,
      0.9098, 0.9528, 0.9981, 1.0255, 1.0307, 1.0207, 1.006, 0.9948,
      0.9905, 0.992, 0.9963, 1.0004, 1.0026, 1.0028, 1.0017, 1.0004, 0.9994, 1
    );
  }
}
/* Naslov: slova se dižu odozdo uz pojavljivanje (anime.js "ml13").
   Deo "Cume Taxi" i deo "Velika Plana" idu jedan za drugim — redosled
   računa main.js i upisuje ga u --d na svakom slovu. */
/* .title-part ostaje običan inline span — da žuti deo i dalje pravi novi red */
.hero__title .letter{
  display:inline-block;
  line-height:1;
}
.hero__title.is-armed .letter{
  animation:title-rise 1.4s cubic-bezier(.16,1,.3,1) both;  /* easeOutExpo */
  animation-delay:var(--d,0ms);
}
@keyframes title-rise{
  from{ transform:translateY(.9em); opacity:0 }
  to  { transform:translateY(0);    opacity:1 }
}

/* Citat: slova elastično iskaču (anime.js "ml9"). */
.hero__quote .letter{
  display:inline-block;
  transform-origin:50% 100%;
}
/* Slova su inline-block, pa bi pregled mogao da prelomi red usred reči.
   Citat ionako ima svoj <br> — prelom prepuštamo njemu. */
.hero__quote{white-space:nowrap}
.hero__quote.is-armed .letter{
  animation:letter-pop .9s var(--elastic) both;
  animation-delay:var(--d,0ms);
}
@keyframes letter-pop{ from{transform:scale(0)} to{transform:scale(1)} }

/* Pasus na dnu hero-a: klasičan fade uz blago podizanje, ceo blok odjednom.
   Ide poslednji, kad naslov i citat završe. */
[data-fade].is-armed{
  animation:fade-up .9s cubic-bezier(.16,1,.3,1) both;
  animation-delay:var(--d,0ms);
}
@keyframes fade-up{
  from{ opacity:0; transform:translateY(1.1em) }
  to  { opacity:1; transform:translateY(0) }
}

/* Ako je korisnik isključio animacije u sistemu — tekst je odmah tu. */
@media (prefers-reduced-motion:reduce){
  .hero__title.is-armed .letter,
  .hero__quote.is-armed .letter,
  [data-fade].is-armed{animation:none}
}

/* dno hero-a */
.hero__foot{
  margin-top:auto;padding-top:clamp(26px,2.81vw,38.8px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
}
.hero__lead{
  font-size:var(--fs-body);line-height:1.5;letter-spacing:-.03em;
  color:var(--black);max-width:452px;
  margin-left:clamp(0px,2.11vw,29px);   /* uvlačenje iz dizajna */
}

/* ==========================================================================
   USLUGE
   ========================================================================== */
.services{padding-block:clamp(48px,1.562vw,21.6px) clamp(72px,9.147vw,126.4px);padding-top:clamp(40px,3.5vw,48px)}
.section-head{
  display:flex;flex-direction:column;align-items:center;gap:var(--gap-md);
  text-align:center;max-width:889px;margin-inline:auto;
  padding-inline:clamp(12px,2.499vw,34.54px);
}
.section-title{
  font-size:var(--fs-h2);font-weight:600;line-height:1.111;
  letter-spacing:-.04em;color:var(--text-title);
}
.section-title--caps{text-transform:capitalize}   /* "Udobno. Sigurno. Povoljno." */

/* --- Animacija: reč po reč, slova se uvrću odozdo -------------------------
   Slova ulaze rotirana 180° iz donjeg desnog ugla i uspravljaju se
   (isto kao "ml7" iz anime.js, ali bez biblioteke).
   Reč se ispiše, pola sekunde pauze, pa sledeća — raspored kašnjenja
   računa main.js i upisuje ga u --d na svakom slovu.

   Reč je inline-block sa overflow:hidden — tako slova "izranjaju" iza ivice
   umesto da lete preko ostatka naslova. Negativne margine ponište padding,
   pa raspored ostaje isti kao bez animacije.
   -------------------------------------------------------------------------- */
.section-title .word{
  display:inline-block;
  overflow:hidden;
  padding:.22em .09em .16em 0;
  margin:-.22em -.09em -.16em 0;
}
.section-title .letter{
  display:inline-block;
  transform-origin:0 100%;
  line-height:1;
}
.section-title.is-ready .letter{
  animation:word-in 750ms cubic-bezier(.16,1,.3,1) both;  /* easeOutExpo */
  animation-delay:var(--d,0ms);
  animation-play-state:paused;        /* čeka da sekcija uđe u ekran */
}
.section-title.is-playing .letter{ animation-play-state:running }

@keyframes word-in{
  from{ transform:translate(.55em,1.1em) rotate(180deg) }
  to  { transform:translate(0,0) rotate(0deg) }
}

@media (prefers-reduced-motion:reduce){
  .section-title.is-ready .letter{animation:none}
}

.cards{
  margin-top:var(--gap-xl);
  display:grid;grid-template-columns:repeat(3,minmax(0,344px));
  gap:var(--gap-xl) clamp(16px,1.874vw,25.90px);
  justify-content:center;
}
.card{
  position:relative;background:var(--card-bg);
  padding:var(--card-p);
  display:flex;flex-direction:column;gap:var(--gap-xl);
  min-height:clamp(230px,19.7vw,272.6px);
  transition:box-shadow .35s ease;
}
.card:hover{ box-shadow:0 18px 44px rgba(19,19,19,.16) }

.card__ico{
  width:clamp(45px,3.907vw,54px);height:clamp(45px,3.907vw,54px);
  color:var(--text-title);flex:0 0 auto;
  transition:transform .4s cubic-bezier(.34,1.28,.64,1);
}
.card:hover .card__ico{ transform:rotate(30deg) }

.card__text{display:flex;flex-direction:column;gap:var(--gap-sm);margin-top:auto}
.card__title{
  font-size:var(--fs-card-t);font-weight:600;line-height:1.333;
  letter-spacing:-.04em;color:var(--text-title);
  transition:letter-spacing .4s cubic-bezier(.65,0,.35,1);
}
/* Razmak između slova se širi. Gornja vrednost je birana tako da se ni
   najduži naslov ("Prevoz do aerodroma") ne prelomi ni na jednoj širini. */
.card:hover .card__title{ letter-spacing:.02em }
.card__desc{
  font-size:var(--fs-body);font-weight:600;line-height:1.5;
  letter-spacing:-.03em;color:var(--text-body);
}
.card__cta{
  position:absolute;top:0;right:0;
  width:var(--corner);height:var(--corner);
  display:flex;align-items:center;justify-content:center;
  background:var(--yellow);color:var(--black);
  transition:background .18s ease;
}
.card__cta .ico{width:clamp(19px,1.874vw,25.9px);height:clamp(19px,1.874vw,25.9px);transform:rotate(90deg)}
.card:hover .card__cta,
.card__cta:hover{background:#e5a916}

.services__cta{display:flex;justify-content:center;margin-top:var(--gap-xl)}

/* ==========================================================================
   BANNER "Što duže putuješ, manje plaćaš"
   ========================================================================== */
.banner{
  position:relative;overflow:hidden;background:var(--black);
  min-height:clamp(480px,46.5vw,642px);
  display:flex;align-items:center;
}
/* --- Fotografija u baneru --------------------------------------------------
   Mere su 1:1 iz Figme (frame 1384 x 642, node 2745:25758):
     fotografija   left 560px = 40.46%,  širina 963px = 69.58%,  visina 100%
     gradijent     left 425px = 30.71%,  širina 675px = 48.77%,  top -16px
   -------------------------------------------------------------------------- */
.banner__media{
  position:absolute;top:0;left:40.46%;width:69.58%;height:100%;z-index:0;
  overflow:hidden;
  --banner-pos-x:50%;
}
.banner__media picture{display:block;position:absolute;inset:0}
.banner__media img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--banner-pos-x) center;
}
/* Gradijent je razvučen do desne ivice (umesto Figminih 675px) da se ne vidi
   šav gde se element završava. Prelomne tačke su preračunate tako da crnilo
   prestaje na istom mestu kao u dizajnu: 30.262% od 675px -> 21.3% od 957px. */
.banner__scrim{
  position:absolute;top:-2.5%;left:30.71%;width:69.29%;height:105%;z-index:1;
  background:linear-gradient(120.84deg,#000 21.3%,rgba(0,0,0,0) 60.3%);
}
.banner__inner{
  position:relative;z-index:3;
  width:100%;max-width:1382px;margin-inline:auto;
  padding:clamp(40px,5.5vw,76px) var(--pad-x);
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--gap-lg);
  max-width:min(1382px,100%);
}
.banner__title{
  font-size:var(--fs-h1);font-weight:600;line-height:1.26;
  letter-spacing:-.04em;color:var(--white);max-width:945px;
}
.banner__lead{
  font-size:var(--fs-body);line-height:1.5;letter-spacing:-.03em;
  color:var(--white);max-width:452px;
}

/* --- Animacija naslova u baneru ------------------------------------------
   Prvi red  ("Što duže putuješ,") — slova se uvrću odozdo desno (ml7).
   Drugi red ("MANJE PLAĆAŠ")      — slova se okreću oko uspravne ose (ml10),
                                     uz isto elastično popuštanje kao citat.
   Redosled računa main.js i upisuje ga u --d na svakom slovu.
   -------------------------------------------------------------------------- */
.banner__title .letter{ display:inline-block; line-height:1 }

/* prvi red — kutija koja seče slova dok ulaze odozdo */
.banner__title .swing-line{
  display:inline-block;
  overflow:hidden;
  padding:.22em .09em .16em 0;
  margin:-.22em -.09em -.16em 0;
}
.banner__title .swing-line .letter{ transform-origin:0 100% }
.banner__title.is-armed .swing-line .letter{
  animation:banner-swing 750ms cubic-bezier(.16,1,.3,1) both;   /* easeOutExpo */
  animation-delay:var(--d,0ms);
}
@keyframes banner-swing{
  from{ transform:translate(.55em,1.1em) rotate(180deg) }
  to  { transform:translate(0,0) rotate(0deg) }
}

/* drugi red — okretanje traži perspektivu na roditelju */
.banner__title .is-yellow{ display:inline-block; perspective:900px }
.banner__title .is-yellow .letter{ transform-origin:0 0 }
.banner__title.is-armed .is-yellow .letter{
  animation:banner-flip 1300ms var(--elastic) both;
  animation-delay:var(--d,0ms);
}
/* opacity ide uz okretanje da slova ne stoje kao tanke crtice dok čekaju red */
@keyframes banner-flip{
  from{ transform:rotateY(-90deg); opacity:0 }
  to  { transform:rotateY(0deg);   opacity:1 }
}

@media (prefers-reduced-motion:reduce){
  .banner__title.is-armed .letter{animation:none}
}

/* ==========================================================================
   LOKACIJE
   ========================================================================== */
.locations{padding-bottom:clamp(64px,8.75vw,121px)}
.locations .section-head{padding-block:clamp(36px,4.06vw,56.12px)}

.locations__grid{
  margin-top:clamp(20px,2vw,28px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,3.77vw,52px);
  max-width:1296px;margin-inline:auto;
}
.loc{display:flex;flex-direction:column}
.loc__map{
  position:relative;width:100%;aspect-ratio:621/617;
  background:#e9e9e9;overflow:hidden;
}
.loc__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.loc__title{
  margin-top:clamp(24px,2.71vw,37.5px);
  font-size:var(--fs-card-t);font-weight:600;line-height:1.333;
  letter-spacing:-.04em;color:var(--text-title);
}

/* --- Naslovi koji izranjaju odozdo (anime.js "ml6") ----------------------
   Slova ulaze odozdo uz elastično popuštanje. Reč je inline-block sa
   overflow:hidden, pa slova izranjaju iza ivice reda.

   Gornji padding je veći od donjeg jer elastična kriva prebaci cilj i slovo
   nakratko ode IZNAD konačnog mesta — bez tog prostora bi se odseklo.
   Negativne margine ponište padding da raspored ostane isti.
   -------------------------------------------------------------------------- */
[data-rise] .word{
  display:inline-block;
  overflow:hidden;
  padding:.55em .09em .16em 0;
  margin:-.55em -.09em -.16em 0;
}
[data-rise] .letter{ display:inline-block; line-height:1 }
[data-rise].is-ready .letter{
  animation:rise-in 750ms var(--elastic) both;
  animation-delay:var(--d,0ms);
  animation-play-state:paused;       /* čeka da naslov uđe u ekran */
}
[data-rise].is-playing .letter{ animation-play-state:running }

@keyframes rise-in{
  from{ transform:translateY(1.1em) }
  to  { transform:translateY(0) }
}

@media (prefers-reduced-motion:reduce){
  [data-rise].is-ready .letter{animation:none}
}
.loc__meta{
  margin-top:var(--gap-sm);
  font-size:var(--fs-body);font-weight:600;line-height:1.5;
  letter-spacing:-.03em;color:var(--text-body);
}
.loc__meta a:hover{color:var(--text-title);text-decoration:underline}
.loc .btn{margin-top:clamp(24px,2.53vw,35px)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{background:var(--black);color:var(--white)}
.footer__inner{
  width:100%;max-width:1382px;margin-inline:auto;
  padding:clamp(56px,7.14vw,98.75px) clamp(20px,7.23vw,100px) clamp(56px,9.33vw,129px);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:clamp(36px,4vw,56px);
}
.footer__brand{max-width:452px;display:flex;flex-direction:column}
.footer__logo{
  font-size:var(--fs-f-logo);font-weight:600;line-height:1;
  letter-spacing:-.06em;text-transform:uppercase;
}
.footer__slogan{
  margin-top:clamp(24px,3.06vw,42px);
  font-size:var(--fs-f-head);font-weight:600;line-height:1.26;letter-spacing:-.03em;
}
.footer__desc{
  margin-top:clamp(20px,2.6vw,36px);
  font-size:var(--fs-body);font-weight:600;line-height:1.5;letter-spacing:-.03em;
}
.footer__contact{min-width:260px}
.footer__heading{
  font-size:var(--fs-f-head);font-weight:600;line-height:1.15;letter-spacing:-.03em;
}
.footer__list{
  margin-top:clamp(24px,3.4vw,47px);
  display:flex;flex-direction:column;gap:clamp(12px,.94vw,13px);
}
.footer__list li{display:flex;align-items:center;gap:clamp(12px,2.53vw,35px)}
.footer__ico{width:24px;height:24px;flex:0 0 auto}
.footer__list a{
  font-size:var(--fs-body);font-weight:600;line-height:1.5;letter-spacing:-.03em;
}
.footer__list a:hover{color:var(--yellow)}

/* ==========================================================================
   FAB — poziv jednim dodirom (samo mobilni)
   ========================================================================== */
.fab{
  display:none;
  position:fixed;left:16px;right:16px;bottom:16px;z-index:50;
  align-items:center;justify-content:center;gap:10px;
  height:56px;background:var(--yellow);color:var(--black);
  font-size:16px;font-weight:800;letter-spacing:-.02em;text-transform:uppercase;
  box-shadow:0 8px 28px rgba(0,0,0,.28);
}
.fab .ico{width:22px;height:22px}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* --- tablet --- */
@media (max-width:1023px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,44px) 20px}
  .hero__foot{flex-direction:column;align-items:flex-start;gap:22px}
  .hero__lead{margin-left:0}
  .hero__media{--hero-pos-x:66%;--hero-x:7%;--hero-y:1%;--hero-zoom:1.12}
  /* uže je -> fotografija u baneru se širi do desne ivice */
  .banner__media{left:34%;width:66%}
  .banner__scrim{
    left:24%;width:76%;
    background:linear-gradient(120.84deg,#000 18%,rgba(0,0,0,0) 58%);
  }
}

/* --- mobilni --- */
@media (max-width:767px){
  :root{--corner:56px}

  .hero{min-height:auto}
  /* uspravan ekran: fotografija ide iza celog teksta, pa je preliv odozgo naniže */
  .hero__media{--hero-pos-x:73%;--hero-pos-y:38%;--hero-x:0%;--hero-y:0%;--hero-rotate:0deg;--hero-zoom:1.04}
  .hero__media::after{
    background:
      linear-gradient(180deg,
        rgba(255,255,255,.94) 0%,
        rgba(255,255,255,.90) 40%,
        rgba(255,255,255,.93) 72%,
        var(--white)          100%);
  }
  .hero__inner{padding-bottom:32px}
  .hero__content{margin-top:32px;gap:22px}
  /* Slova naslova su inline-block, pa bi pregled lomio red usred reči
     ("Velika Pla-na"). Svaki red se drži u komadu, a žuti deo ide u svoj red. */
  .hero__title{line-height:1.2;white-space:nowrap}
  .hero__title .is-yellow{display:block}
  .hero__quote{line-height:1.22}
  .hero__quote-indent{padding-left:0}
  .hero__foot{padding-top:28px}
  .nav__cta{display:none}          /* zamenjuje ga fiksno dugme dole */

  .services{padding-block:44px 56px}
  .cards{grid-template-columns:minmax(0,1fr);gap:20px;margin-top:36px}
  .card{min-height:0;padding-right:calc(var(--card-p) + 24px)}
  .card__text{margin-top:0}
  .card{gap:36px}
  .services__cta{margin-top:36px}

  .banner{min-height:0}
  /* na telefonu fotografija ide preko cele širine, tekst preko nje */
  .banner__media{left:0;width:100%;--banner-pos-x:62%}
  .banner__scrim{
    top:0;left:0;width:100%;height:100%;
    background:linear-gradient(180deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.74) 50%,rgba(0,0,0,.88) 100%);
  }
  .banner__inner{padding-block:56px;gap:22px}

  .locations .section-head{padding-block:44px 0}
  .locations__grid{grid-template-columns:minmax(0,1fr);gap:44px;margin-top:32px}
  .loc__map{aspect-ratio:4/3}
  .locations{padding-bottom:56px}

  .footer__inner{flex-direction:column;padding-block:56px 96px;gap:36px}
  .footer__slogan{margin-top:24px}
  .footer__desc{margin-top:18px}
  .footer__list{margin-top:22px}

  .fab{display:flex}
  body{padding-bottom:0}
}

@media (max-width:400px){
  .btn__label{padding-inline:18px}
}

/* --- print --- */
@media print{
  .fab,.hero__media,.banner__media,.banner__scrim{display:none}
  .banner,.footer{background:#fff;color:#000}
  .loc__map{display:none}
}