/* ============================================================
   RM ALKON STAHL — dizajn sistem
   Boje preuzete iz postojećeg brenda (navy #0A1839, plava #006DA3).
   ============================================================ */

/* --- Tokeni --------------------------------------------------- */
:root{
  --ink:#070D1D;
  --ink-2:#0A1839;
  --ink-panel:#0E1B3A;
  --blue:#006DA3;
  --blue-lift:#1B8FCB;
  --steel:#A7BFC7;
  --steel-dim:#6E8592;
  --paper:#FCFBFB;
  --paper-2:#EFF2F5;

  --line:rgba(167,191,199,.18);
  --line-strong:rgba(167,191,199,.34);

  --f-display:'Sora',system-ui,sans-serif;
  --f-body:'Inter',system-ui,sans-serif;
  --f-data:'JetBrains Mono',ui-monospace,monospace;

  --step--1:clamp(.78rem,.76rem + .1vw,.84rem);
  --step-0:clamp(.95rem,.92rem + .16vw,1.05rem);
  --step-1:clamp(1.15rem,1.08rem + .34vw,1.4rem);
  --step-2:clamp(1.45rem,1.3rem + .72vw,2rem);
  --step-3:clamp(1.9rem,1.6rem + 1.5vw,3rem);
  --step-4:clamp(2.5rem,1.9rem + 3vw,4.75rem);
  --step-5:clamp(3rem,2rem + 5.2vw,7rem);

  --pad:clamp(1.15rem,4vw,2.5rem);
  --gap:clamp(1.5rem,3.4vw,3.5rem);
  --sec:clamp(4rem,9vw,8.5rem);
  --max:78rem;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* Visina fiksnog zaglavlja. Sve što mora da ga izbegne (razmak iznad
     banera, scroll-padding za sidra) računa se IZ ove vrednosti, da se
     ne bi po fajlu razbacivali brojevi koji se raziđu pri izmeni. */
  --hdr-h:4.6rem;
}

/* --- Reset ---------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
/* scroll-padding-top se izvodi iz visine zaglavlja, ne iz fiksnog broja —
   tako skok na sidro uvek završi ispod trake, i kad se traka promeni. */
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr-h) + 1.9rem)}
body{
  font-family:var(--f-body); font-size:var(--step-0); line-height:1.65;
  color:var(--paper); background:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block; max-width:100%; height:auto}
button,input,select,textarea{font:inherit; color:inherit}
a{color:inherit; text-decoration:none}
ul,ol{list-style:none; padding:0}
:focus-visible{outline:2px solid var(--blue-lift); outline-offset:3px; border-radius:2px}

/* --- Pomoćno -------------------------------------------------- */
.wrap{width:min(100% - var(--pad)*2,var(--max)); margin-inline:auto}
.wrap-wide{width:min(100% - var(--pad)*2,92rem); margin-inline:auto}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--pad);top:-4rem;z-index:200;background:var(--blue);color:#fff;padding:.7rem 1.1rem;border-radius:4px;transition:top .2s}
.skip:focus{top:1rem}

/* --- Tipografija ---------------------------------------------- */
.eyebrow{
  font-family:var(--f-data); font-size:var(--step--1); letter-spacing:.16em;
  text-transform:uppercase; color:var(--blue-lift); font-weight:500;
  display:flex; align-items:center; gap:.7rem;
}
.eyebrow::before{content:''; width:1.6rem; height:1px; background:currentColor; flex:none}
.h-xl{font-family:var(--f-display); font-size:var(--step-5); line-height:.94; font-weight:700; letter-spacing:-.035em}
.h-lg{font-family:var(--f-display); font-size:var(--step-4); line-height:1.02; font-weight:700; letter-spacing:-.03em}
.h-md{font-family:var(--f-display); font-size:var(--step-3); line-height:1.1;  font-weight:600; letter-spacing:-.022em}
.h-sm{font-family:var(--f-display); font-size:var(--step-2); line-height:1.2;  font-weight:600; letter-spacing:-.018em}
.h-xs{font-family:var(--f-display); font-size:var(--step-1); line-height:1.3;  font-weight:600; letter-spacing:-.01em}
.lede{font-size:var(--step-1); line-height:1.55; color:var(--steel); font-weight:300}
.muted{color:var(--steel-dim)}
.mono{font-family:var(--f-data); font-variant-ligatures:none}
.prose p+p{margin-top:1.05em}
.prose p{color:var(--steel); max-width:62ch}

/* --- Dugmad --------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:3rem; padding:.85rem 1.6rem; border:1px solid transparent; border-radius:2px;
  font-family:var(--f-display); font-size:var(--step-0); font-weight:600; letter-spacing:-.01em;
  cursor:pointer; position:relative; overflow:hidden;
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--blue); color:#fff}
.btn--primary:hover{background:var(--blue-lift)}
.btn--ghost{border-color:var(--line-strong); color:var(--paper); background:transparent}
.btn--ghost:hover{border-color:var(--blue-lift); background:rgba(0,109,163,.12)}
.btn--onlight{background:var(--ink-2); color:#fff}
.btn--onlight:hover{background:var(--blue)}
.btn svg{width:1.1em; height:1.1em; flex:none}

/* --- Zaglavlje ------------------------------------------------ */
/* Traka je bila providna 82%, pa se tekst koji prolazi ispod nje video
   kroz nju — to je nalaz U-02 iz revizije („tekst prolazi ispod fiksne
   trake”). Otkako baneri imaju fotografiju, svetli delovi slike su to
   činili očiglednim. Neprozirnost je podignuta na 96%: zamućenje i dalje
   daje utisak stakla, ali ispod se više ništa ne čita. */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:rgba(7,13,29,.96); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:transform .4s var(--ease),background .3s;
}
.hdr[data-hidden="true"]{transform:translateY(-100%)}
.hdr__in{display:flex; align-items:center; gap:clamp(1rem,2.2vw,2.5rem); min-height:var(--hdr-h)}
.brand{display:flex; align-items:center; gap:.75rem; flex:none; padding:.5rem 0}
.brand svg{height:1.7rem; width:auto}
.brand .logo__figure,.brand .logo__text{fill:var(--paper); transition:fill .3s}
.brand:hover .logo__figure{fill:var(--blue-lift)}
.nav{margin-left:auto; display:flex; align-items:center; gap:.15rem}
.nav__a{
  /* Bočni padding se skuplja na uskom desktopu (1024–1200px), gde sedam
     stavki + CTA jedva staje. white-space:nowrap sprečava da se duže
     oznake ("Nerđajući čelici") prelome u dva reda. */
  --nav-px:clamp(.45rem,.9vw,.9rem);
  position:relative; padding:.85rem var(--nav-px); min-height:2.9rem; display:inline-flex; align-items:center;
  white-space:nowrap;
  font-size:var(--step--1); font-weight:500; letter-spacing:.01em; color:var(--steel);
  transition:color .2s;
}
.nav__a:hover,.nav__a[aria-current="page"]{color:var(--paper)}
.nav__a::after{
  content:''; position:absolute; left:var(--nav-px); right:var(--nav-px); bottom:.55rem; height:1px;
  background:var(--blue-lift); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.nav__a:hover::after,.nav__a[aria-current="page"]::after{transform:scaleX(1)}
/* --- Prebacivanje jezika -------------------------------------- */
/* min-width unapred drži mesto koje će JS popuniti iz window.JEZICI,
   pa ubacivanje kontrole ne pomera navigaciju. */
.jez{display:inline-flex; align-items:center; flex:none; min-width:6.6rem}
.jez__s{
  display:inline-flex; align-items:center; gap:.3rem; min-height:44px; padding:.3rem .4rem;
  font-family:var(--f-data); font-size:.72rem; font-weight:500; letter-spacing:.1em;
  color:var(--steel-dim); white-space:nowrap; transition:color .2s;
}
.jez__s[aria-current="true"]{color:var(--paper)}
a.jez__s:hover{color:var(--paper)}
.jez__s + .jez__s{margin-left:.3rem; padding-left:.55rem; border-left:1px solid var(--line)}
/* Nedostupan jezik: bez pokazivača ruke, bez fokusa, ali sa jasnom oznakom. */
.jez__s--najava{cursor:default}
.jez__najava{
  font-style:normal; font-size:.55rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--blue-lift); border:1px solid var(--line-strong); border-radius:2px;
  padding:.1rem .25rem; line-height:1;
}

/* 2.75rem = 44px — donja granica dodirne mete, ne smanjivati. */
.hdr .btn{margin-left:.6rem; min-height:2.75rem; padding:.55rem clamp(.75rem,1.1vw,1.15rem); font-size:var(--step--1); white-space:nowrap}
.burger{
  display:none; margin-left:auto; width:3rem; height:3rem; align-items:center; justify-content:center;
  background:none; border:1px solid var(--line-strong); border-radius:2px; cursor:pointer;
}
.burger span{display:block; width:1.15rem; height:1.5px; background:var(--paper); position:relative; transition:background .2s}
.burger span::before,.burger span::after{content:''; position:absolute; left:0; width:100%; height:1.5px; background:var(--paper); transition:transform .3s var(--ease)}
.burger span::before{top:-.36rem} .burger span::after{top:.36rem}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(.36rem) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-.36rem) rotate(-45deg)}

/* --- Preloader ------------------------------------------------ */
.pre{
  position:fixed; inset:0; z-index:9999; background:var(--ink);
  /* Flex, ne grid: grid je ovde razvlačio tri implicitna reda preko cele
     visine viewporta (place-items ne postavlja align-content), pa su se
     elementi razmicali srazmerno visini ekrana. */
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  /* Optičko centriranje — pomera klaster naviše za pola ove vrednosti. */
  padding-bottom:min(9vh,5rem);
  transition:opacity .5s var(--ease),visibility .5s;
}
.pre[data-done="true"]{opacity:0; visibility:hidden; pointer-events:none}
.pre__mark{width:clamp(3.5rem,9vw,5.5rem); height:auto}
.pre__mark path{
  fill:none; stroke:var(--blue-lift); stroke-width:.9;
  stroke-dasharray:var(--len,200); stroke-dashoffset:var(--len,200);
  animation:draw 1.15s var(--ease) forwards;
}
.pre__mark path:nth-child(2){animation-delay:.14s}
.pre__mark path:nth-child(3){animation-delay:.28s}
@keyframes draw{to{stroke-dashoffset:0; fill:var(--blue-lift)}}
/* Razmaci se zadaju pojedinačno (ne preko gap) jer nisu jednaki:
   marka -> traka je nešto veći od traka -> brojač. */
.pre__bar{width:min(15rem,42vw); height:1px; background:var(--line-strong); overflow:hidden; margin-top:1rem}
.pre__bar i{display:block; height:100%; width:0; background:var(--blue-lift); transition:width .2s linear}
.pre__num{font-family:var(--f-data); font-size:var(--step--1); color:var(--steel-dim); letter-spacing:.14em; margin-top:.6rem}

/* Telefoni — manja marka i još zbijeniji klaster. */
@media(max-width:29.99rem){
  .pre{padding-bottom:min(6vh,2.5rem)}
  .pre__mark{width:2.9rem}
  .pre__bar{width:min(11rem,54vw); margin-top:.7rem}
  .pre__num{margin-top:.4rem}
}

/* --- Hero ----------------------------------------------------- */
.hero{
  position:relative; overflow:hidden;
  padding-top:9rem; padding-bottom:var(--sec);
  height:100vh;   /* rezerva za starije pregledače */
  height:100svh;  /* stvarna vrednost — 100vh na mobilnom uračunava traku adrese */
  display:flex; flex-direction:column; justify-content:center;
}
/* Plava mreža ostaje, ali kao tekstura preko fotografije, ne kao takmac. */
.hero::before{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.45;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:clamp(3rem,7vw,6rem) clamp(3rem,7vw,6rem);
  mask-image:radial-gradient(ellipse 80% 60% at 30% 40%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 30% 40%,#000 20%,transparent 78%);
}

/* --- Hero galerija -------------------------------------------- */
.hero__media{position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--ink)}
.hero__slide{position:absolute; inset:0; opacity:0; transition:opacity .9s cubic-bezier(.16,1,.3,1)}
.hero__slide[data-active="true"]{opacity:1}
.hero__slide picture,.hero__slide img{display:block; width:100%; height:100%}
.hero__slide img{object-fit:cover; object-position:center}
/* Slojeviti preliv: navy osnova + usmereni preliv, najgušći levo iza naslova.
   Namerno brend-navy (--ink / --ink-2), nikako neutralna crna. */
.hero__ov{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(7,13,29,.93) 0%, rgba(7,13,29,.87) 28%,
      rgba(10,24,57,.62) 56%, rgba(10,24,57,.4) 80%, rgba(10,24,57,.3) 100%),
    linear-gradient(180deg,
      rgba(7,13,29,.6) 0%, rgba(7,13,29,.18) 36%,
      rgba(7,13,29,.3) 72%, rgba(7,13,29,.6) 100%);
}
/* Ispod 62rem tekst se prostire celom širinom, pa usmereni preliv (svetliji
   desno) više nema smisla — tamo bi lede pao na ~2,3:1. Na telefonu je preliv
   ravnomeran: čitljivost je preča od vidljivosti fotografije. */
@media(max-width:61.99rem){
  .hero__ov{
    background:linear-gradient(180deg,
      rgba(7,13,29,.9) 0%, rgba(7,13,29,.82) 32%,
      rgba(7,13,29,.84) 70%, rgba(7,13,29,.92) 100%);
  }
}
@media(prefers-reduced-motion:reduce){
  .hero__slide{transition:none}
}

/* --- Hero indikatori ------------------------------------------ */
.hero__dots-wrap{position:absolute; left:0; right:0; bottom:clamp(.75rem,2.6vh,2rem); z-index:3}
.hero__dots{display:flex; align-items:center; gap:.1rem; margin-left:-.7rem}
.hero__dot{
  /* Vidljiva tačka je mala, ali dodirna meta mora biti 44×44 px. */
  width:44px; height:44px; padding:0; flex:none;
  background:none; border:0; cursor:pointer;
  display:grid; place-items:center;
}
.hero__dot::after{
  content:''; width:.5rem; height:.5rem; border-radius:50%;
  background:var(--steel-dim); transition:background .3s var(--ease),transform .3s var(--ease);
}
.hero__dot:hover::after{background:var(--steel)}
.hero__dot[aria-current="true"]::after{background:var(--blue-lift); transform:scale(1.5)}
@media(prefers-reduced-motion:reduce){.hero__dot::after{transition:none}}

.hero__grid{position:relative; z-index:3; display:grid; gap:var(--gap); align-items:center; grid-template-columns:1fr}
@media(min-width:62rem){.hero__grid{grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,5rem)}}
/* Ispod 62rem hero se slaže u jednu kolonu. Naslov + lede + dva dugmeta +
   rešavač tada ne staju u jedan ekran telefona, pa hero sme da naraste —
   odsecanje rešavača nije opcija. Na desktopu ostaje tačno 100svh. */
@media(max-width:61.99rem){
  .hero{height:auto; min-height:100svh; padding-top:6.5rem; padding-bottom:4.5rem}
  .hero .res__out{max-height:11rem}
}
.hero h1{margin:1.4rem 0 0}
.hero h1 .ln{display:block; overflow:hidden}
.hero h1 .ln>span{display:block; transform:translateY(105%); animation:rise .9s var(--ease) forwards}
.hero h1 .ln:nth-child(2)>span{animation-delay:.09s}
.hero h1 .ln:nth-child(3)>span{animation-delay:.18s}
@keyframes rise{to{transform:translateY(0)}}
.hero__blue{color:var(--blue-lift)}
.hero__lede{margin-top:1.5rem; max-width:44ch}
.hero__cta{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.2rem}

/* --- Traka činjenica ------------------------------------------ */
.facts{border-block:1px solid var(--line); background:rgba(14,27,58,.35)}
.facts__in{display:grid; grid-template-columns:repeat(2,1fr)}
@media(min-width:48rem){.facts__in{grid-template-columns:repeat(4,1fr)}}
.fact{padding:clamp(1.3rem,3vw,2.1rem) 0; border-right:1px solid var(--line)}
.fact:last-child{border-right:0}
@media(max-width:47.99rem){.fact:nth-child(2n){border-right:0} .fact:nth-child(-n+2){border-bottom:1px solid var(--line)}}
.fact b{display:block; font-family:var(--f-display); font-size:var(--step-2); font-weight:700; letter-spacing:-.02em; color:var(--paper)}
.fact span{display:block; font-family:var(--f-data); font-size:var(--step--1); color:var(--steel-dim); margin-top:.3rem; letter-spacing:.06em}

/* --- Sekcije -------------------------------------------------- */
.sec{padding-block:var(--sec); position:relative}
.sec--light{background:var(--paper); color:var(--ink)}
.sec--light .lede,.sec--light .prose p{color:#4A5A66}
.sec--light .h-lg,.sec--light .h-md,.sec--light .h-sm,.sec--light .h-xs{color:var(--ink-2)}
.sec--panel{background:var(--ink-panel)}
.sec__head{max-width:56rem; margin-bottom:clamp(2.2rem,5vw,4rem)}
.sec__head h2{margin-top:1.1rem}
.sec__head p{margin-top:1.1rem}

/* --- Fotografije u sekcijama ---------------------------------- */
/* Široka traka (~21:9). Isti navy preliv kao hero, samo slabiji —
   ovde preko slike ne stoji tekst, preliv samo drži temperaturu brenda. */
.traka{
  position:relative; margin:0 0 clamp(2rem,4vw,3rem);
  border:1px solid var(--line); border-radius:3px; overflow:hidden;
  aspect-ratio:21/9;
}
.traka picture,.traka img{display:block; width:100%; height:100%}
.traka img{object-fit:cover; object-position:center 60%}
.traka__ov{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(7,13,29,.72) 0%, rgba(10,24,57,.4) 46%, rgba(10,24,57,.3) 100%),
    linear-gradient(180deg, rgba(7,13,29,.5) 0%, rgba(7,13,29,.18) 40%, rgba(7,13,29,.6) 100%);
}
@media(max-width:47.99rem){ .traka{aspect-ratio:16/9} }

/* Tekst i fotografija jedno pored drugog. Isti obrazac koristi „O nama”
   na početnoj (.onama) i proza na unutrašnjim stranama (.tekst-foto) —
   pravila su zajednička da se raspored ne bi razišao između njih. */
.onama,.tekst-foto{display:grid; gap:var(--gap); align-items:start}
.onama__foto,.tekst-foto__foto{
  margin:0; border:1px solid var(--line); border-radius:3px; overflow:hidden;
  aspect-ratio:4/5;
}
.onama__foto picture,.onama__foto img,
.tekst-foto__foto picture,.tekst-foto__foto img{display:block; width:100%; height:100%}
.onama__foto img,.tekst-foto__foto img{object-fit:cover; object-position:center}
@media(min-width:62rem){
  .onama,.tekst-foto{grid-template-columns:1fr .62fr; gap:clamp(2rem,4.5vw,4rem)}
  /* Fotografija je prva u DOM-u zbog redosleda na telefonu; na desktopu je
     `order` vraća u desnu kolonu, poravnatu sa prvim pasusom. */
  .onama__foto,.tekst-foto__foto{order:2; position:sticky; top:calc(var(--hdr-h) + 2.4rem)}
  .onama__tekst,.tekst-foto__tekst{order:1}
}

/* Program — proza i fotografija naizmenično levo/desno. */
.pf{display:grid; gap:var(--gap); align-items:start; margin-bottom:clamp(1.6rem,4vw,2.6rem)}
.pf__foto{
  margin:0; border:1px solid var(--line); border-radius:3px; overflow:hidden;
  aspect-ratio:3/2;
}
.pf__foto picture,.pf__foto img{display:block; width:100%; height:100%}
.pf__foto img{object-fit:cover; object-position:center}
@media(min-width:62rem){
  .pf{grid-template-columns:1fr .8fr; gap:clamp(2rem,4vw,3.5rem)}
  .pf[data-obrnuto="true"] .pf__tekst{order:2}
  .pf[data-obrnuto="true"] .pf__foto{order:1}
}

/* Pumpe — traka u zaglavlju kategorije. */
.pk__foto{
  margin:0 0 clamp(1.6rem,3.5vw,2.4rem);
  border:1px solid var(--line); border-radius:3px; overflow:hidden;
  aspect-ratio:21/9;
}
.pk__foto picture,.pk__foto img{display:block; width:100%; height:100%}
.pk__foto img{object-fit:cover; object-position:center 55%}
@media(max-width:47.99rem){ .pk__foto{aspect-ratio:16/9} }

/* --- Rešavač kvaliteta (potpis) ------------------------------- */
.res{
  position:relative; border:1px solid var(--line-strong); border-radius:3px;
  background:linear-gradient(160deg,rgba(14,27,58,.9),rgba(7,13,29,.75));
  padding:clamp(1.1rem,2.6vw,1.7rem);
}
/* U herou panel stoji preko fotografije — otuda staklo: veća neprozirnost
   podloge i blago zamućenje, da lista rezultata ostane čitljiva. */
.hero .res{
  background:linear-gradient(160deg,rgba(14,27,58,.94),rgba(7,13,29,.88));
  backdrop-filter:blur(10px) saturate(115%);
  -webkit-backdrop-filter:blur(10px) saturate(115%);
  box-shadow:0 1px 40px rgba(7,13,29,.55);
}
.res__top{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.9rem}
.res__label{font-family:var(--f-data); font-size:var(--step--1); letter-spacing:.13em; text-transform:uppercase; color:var(--steel-dim)}
.res__count{font-family:var(--f-data); font-size:var(--step--1); color:var(--blue-lift)}
.res__field{position:relative; display:flex; align-items:center}
.res__field svg{position:absolute; left:.95rem; width:1.05rem; height:1.05rem; color:var(--steel-dim); pointer-events:none}
.res__input{
  width:100%; min-height:3.4rem; padding:.8rem 1rem .8rem 2.7rem;
  background:rgba(7,13,29,.65); border:1px solid var(--line-strong); border-radius:2px;
  font-family:var(--f-data); font-size:var(--step-0); color:var(--paper); letter-spacing:.02em;
}
.res__input::placeholder{color:var(--steel-dim); letter-spacing:0}
.res__input:focus{border-color:var(--blue-lift); outline:none; background:rgba(7,13,29,.9)}
.res__chips{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.8rem}
.chip{
  padding:.42rem .8rem; min-height:2.1rem; display:inline-flex; align-items:center;
  border:1px solid var(--line-strong); border-radius:99px; background:transparent;
  font-family:var(--f-data); font-size:.72rem; letter-spacing:.06em; color:var(--steel);
  cursor:pointer; transition:all .2s var(--ease);
}
.chip:hover{border-color:var(--blue-lift); color:var(--paper)}
.chip[aria-pressed="true"]{background:var(--blue); border-color:var(--blue); color:#fff}
.res__out{margin-top:1rem; max-height:19rem; overflow-y:auto; scrollbar-width:thin}
.res__empty{padding:1.6rem .2rem; color:var(--steel-dim); font-size:var(--step--1)}
.gr{
  display:grid; grid-template-columns:auto 1fr; gap:.2rem .9rem; align-items:baseline;
  padding:.75rem .2rem; border-bottom:1px solid var(--line);
}
.gr:last-child{border-bottom:0}
.gr__wnr{font-family:var(--f-data); font-size:var(--step-0); font-weight:600; color:var(--blue-lift); letter-spacing:.02em}
.gr__din{font-family:var(--f-data); font-size:var(--step--1); color:var(--paper)}
.gr__alt{grid-column:2; display:flex; flex-wrap:wrap; gap:.3rem .8rem; font-family:var(--f-data); font-size:.72rem; color:var(--steel-dim)}
.gr__alt b{color:var(--steel); font-weight:500}
.gr__forms{grid-column:1/-1; display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.45rem}
.tag{
  font-family:var(--f-data); font-size:.64rem; letter-spacing:.09em; padding:.2rem .45rem;
  border:1px solid var(--line-strong); border-radius:2px; color:var(--steel-dim);
}
.tag--stock{border-color:rgba(0,109,163,.55); color:var(--blue-lift)}

/* --- Kartice programa ----------------------------------------- */
/* NAPOMENA: .cards još koristi staru tehniku (pozadina kontejnera prosijava
   kroz gap:1px). Trenutno kartice popunjavaju redove do kraja — 6 u tri
   kolone, 4 u dve — pa praznih ćelija nema i problem se ne vidi. Čim se
   doda kartica koja ostavi nepopunjeno mesto, pojaviće se svetlosivi
   pravougaonik, isto kao ranije na preuzmi.html. Popravka je ista kao kod
   .dl (senke na .card umesto pozadine na .cards) i opisana je u IZVESTAJ.md;
   nije primenjena sada jer bi pomerila dve kartice za 1px bez ikakve
   trenutne koristi. */
.cards{display:grid; gap:1px; background:var(--line); border:1px solid var(--line)}
@media(min-width:40rem){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:64rem){.cards--3{grid-template-columns:repeat(3,1fr)}}
.card{
  position:relative; background:var(--ink); padding:clamp(1.5rem,3.4vw,2.4rem);
  display:flex; flex-direction:column; gap:.8rem; min-height:100%;
  transition:background .3s var(--ease);
}
.card:hover{background:var(--ink-panel)}
.card__n{font-family:var(--f-data); font-size:var(--step--1); color:var(--blue-lift); letter-spacing:.1em}
.card__t{font-family:var(--f-display); font-size:var(--step-1); font-weight:600; letter-spacing:-.015em}
.card__d{font-size:var(--step--1); color:var(--steel-dim); line-height:1.6}
.card__go{margin-top:auto; padding-top:1rem; display:inline-flex; align-items:center; gap:.5rem; font-family:var(--f-data); font-size:var(--step--1); color:var(--steel); transition:gap .25s var(--ease),color .25s}
.card:hover .card__go{gap:.85rem; color:var(--blue-lift)}
.card__link{position:absolute; inset:0}

/* --- Tabele --------------------------------------------------- */
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:3px; -webkit-overflow-scrolling:touch}
.sec--light .tbl-wrap{border-color:rgba(10,24,57,.14)}
table{width:100%; border-collapse:collapse; font-family:var(--f-data); font-size:var(--step--1)}
caption{text-align:left; padding:.9rem 1rem; font-family:var(--f-display); font-weight:600; font-size:var(--step-0); letter-spacing:-.01em; border-bottom:1px solid var(--line)}
.sec--light caption{border-color:rgba(10,24,57,.14); color:var(--ink-2)}
th,td{padding:.72rem 1rem; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; vertical-align:top}
.sec--light th,.sec--light td{border-color:rgba(10,24,57,.1)}
thead th{
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
  color:var(--steel-dim); background:rgba(14,27,58,.5); position:sticky; top:0;
}
.sec--light thead th{background:var(--paper-2); color:#5A6B78}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(0,109,163,.07)}
td:first-child{color:var(--blue-lift); font-weight:600}
.sec--light td:first-child{color:var(--blue)}
.tbl-hint{margin-top:.6rem; font-family:var(--f-data); font-size:.7rem; color:var(--steel-dim); letter-spacing:.05em}

/* --- Pumpe ---------------------------------------------------- */
/* Modeli su ranije bili jedan uski niz preko cele visine strane — 31 model
   u koloni, sa praznim marginama sa obe strane. Sada je mreža kartica.
   Prave ivice + običan gap, namerno: tehnika sa prosijavanjem pozadine
   kroz gap:1px ostavlja obojenu prazninu kada poslednji red nije pun. */
.pumpe-mreza{
  display:grid; grid-template-columns:1fr; gap:clamp(.7rem,1.5vw,1.05rem);
  margin-top:clamp(1.3rem,3vw,2rem);
}
@media(min-width:40rem){ .pumpe-mreza{grid-template-columns:repeat(2,1fr)} }
@media(min-width:72rem){ .pumpe-mreza{grid-template-columns:repeat(3,1fr)} }

.pump{
  display:flex; flex-direction:column; min-width:0;
  background:var(--ink-panel); border:1px solid var(--line); border-radius:3px;
  padding:clamp(1.05rem,2.3vw,1.45rem);
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.pump:hover{background:#12224A; border-color:var(--line-strong)}
.pump__serija{font-family:var(--f-data); font-size:var(--step--1); color:var(--blue-lift); letter-spacing:.05em}
.pump__naziv{font-family:var(--f-display); font-size:var(--step-1); font-weight:600; margin-top:.3rem; letter-spacing:-.015em; line-height:1.25}
/* margin-top:auto gura specifikaciju na dno kartice, pa su blokovi
   poravnati po redu i kada jedan model ima četiri, a drugi pet stavki. */
.pump__spec{
  display:grid; grid-template-columns:auto 1fr; gap:.42rem 1rem; align-items:baseline;
  margin-top:auto; padding-top:1.05rem; border-top:1px solid var(--line);
}
.pump__spec dt{
  font-family:var(--f-data); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--steel-dim); white-space:nowrap;
}
.pump__spec dd{
  font-family:var(--f-data); font-size:var(--step--1); color:var(--paper);
  text-align:right; min-width:0; overflow-wrap:anywhere;
}

/* --- Preuzimanja ---------------------------------------------- */
/* Hairline linije se prave PRAVIM ivicama, a ne prosijavanjem pozadine
   kontejnera kroz gap:1px. Stara tehnika je bojila i prazne ćelije: kada
   grupa ima neparan broj dokumenata, poslednje mesto u redu ostajalo je
   kao svetlosivi pravougaonik (bilo ih je tri na ovoj strani).
   Sada kontejner nosi gornju i levu ivicu, a svaka stavka desnu i donju —
   pun red izgleda identično kao pre, a prazno mesto se prosto ne crta. */
.dl{display:grid; gap:1px; border-top:1px solid var(--line); border-left:1px solid var(--line)}
@media(min-width:52rem){.dl{grid-template-columns:repeat(2,1fr)}}
.dl__a{
  display:flex; align-items:center; gap:.9rem; padding:1rem 1.2rem; min-height:3.5rem;
  background:var(--ink); font-size:var(--step--1); color:var(--steel);
  /* Linije crta SAMA stavka, u razmak od 1px pored sebe. Prazna ćelija
     nema stavku, pa nema ni linije — i ništa se ne oboji. box-shadow ne
     ulazi u raspored, pa je korak reda ostao isti do piksela.
     Treća senka pokriva ugao koji prve dve promaše. */
  box-shadow:1px 0 0 var(--line), 0 1px 0 var(--line), 1px 1px 0 var(--line);
  transition:background .25s,color .25s;
}
.dl__a:hover{background:var(--ink-panel); color:var(--paper)}
.dl__a svg{width:1.05rem; height:1.05rem; color:var(--blue-lift); flex:none}
.dl__a i{margin-left:auto; font-family:var(--f-data); font-size:.66rem; letter-spacing:.1em; color:var(--steel-dim); font-style:normal}

/* --- Mape ----------------------------------------------------- */
.mape{display:grid; gap:var(--gap)}
@media(min-width:62rem){ .mape{grid-template-columns:repeat(2,1fr); gap:clamp(1.5rem,3vw,2.4rem)} }
.mapa{
  margin:0; background:var(--ink-panel);
  border:1px solid var(--line); border-radius:3px; overflow:hidden;
}
/* Fiksan odnos stranica — okvir zauzme svoj prostor pre nego što se mapa
   učita, pa lenjo učitavanje ne pomera ništa ispod sebe. */
.mapa__okvir{aspect-ratio:4/3; background:var(--ink); border-bottom:1px solid var(--line); overflow:hidden}
.mapa__okvir picture,.mapa__okvir img{display:block; width:100%; height:100%}
.mapa__okvir img{object-fit:cover}
.mapa__opis{padding:clamp(1rem,2.4vw,1.4rem)}
.mapa__adr{
  margin-top:.6rem; font-family:var(--f-data); font-size:var(--step--1);
  line-height:1.8; color:var(--steel);
}
.mapa__veza{
  display:inline-flex; align-items:center; gap:.4rem; min-height:44px; margin-top:.35rem;
  font-size:var(--step--1); font-weight:500; color:var(--blue-lift);
}
.mapa__veza:hover{text-decoration:underline}

/* --- Forma ---------------------------------------------------- */
.form{display:grid; gap:1.1rem}
@media(min-width:40rem){.form__row{display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem}}
.field{display:grid; gap:.4rem}
.field label{font-family:var(--f-data); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--steel-dim)}
.field label .req{color:var(--blue-lift)}
.field input,.field select,.field textarea{
  width:100%; min-height:3.1rem; padding:.8rem 1rem;
  background:rgba(7,13,29,.55); border:1px solid var(--line-strong); border-radius:2px;
  color:var(--paper); font-size:var(--step-0); transition:border-color .2s,background .2s;
}
.field textarea{min-height:8rem; resize:vertical; line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue-lift); outline:none; background:rgba(7,13,29,.85)}
.field input:user-invalid,.field textarea:user-invalid{border-color:#C4574B}
.field select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6' fill='none'%3E%3Cpath d='M4 5.5 0 1.4 1.4 0 4 2.6 6.6 0 8 1.4z' fill='%23A7BFC7'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; background-size:.65rem; padding-right:2.5rem}
.field select option{background:var(--ink-2); color:var(--paper)}
.consent{display:flex; gap:.75rem; align-items:flex-start; font-size:var(--step--1); color:var(--steel-dim); line-height:1.55}
.consent input{width:1.15rem; height:1.15rem; min-height:0; flex:none; margin-top:.16rem; accent-color:var(--blue)}
.consent a{color:var(--steel); text-decoration:underline; text-underline-offset:3px}
.hp{position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden}
.form__note{font-family:var(--f-data); font-size:.72rem; color:var(--steel-dim); letter-spacing:.04em}
.form__msg{padding:.9rem 1.1rem; border-radius:2px; font-size:var(--step--1); display:none}
.form__msg[data-show="true"]{display:block}
.form__msg--ok{background:rgba(0,109,163,.16); border:1px solid rgba(0,109,163,.5); color:var(--paper)}
.form__msg--err{background:rgba(196,87,75,.14); border:1px solid rgba(196,87,75,.5); color:#F3C9C3}

/* --- Zaglavlje strane ----------------------------------------- */
.phead{position:relative; padding-top:10rem; padding-bottom:clamp(2.5rem,6vw,4.5rem); border-bottom:1px solid var(--line)}
.phead::before{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:clamp(3rem,7vw,6rem) 100%;
  mask-image:linear-gradient(to bottom,#000,transparent);
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent);
}
.phead>*{position:relative; z-index:3}

/* --- Baner na unutrašnjim stranama ---------------------------- */
/* Namerno NIJE pune visine — to je rezervisano za hero na početnoj.
   Ponavljanje punog ekrana na svakoj strani usporilo bi kretanje kroz sajt. */
.phead--foto{
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:38svh;                     /* mobilni */
  /* Razmak iznad = visina zaglavlja + vazduh. Izvedeno iz --hdr-h,
     pa se ne lomi ako se traka promeni na nekom drugom preseku. */
  padding-top:calc(var(--hdr-h) + clamp(2.75rem,5vw,4.4rem));
}
@media(min-width:62rem){ .phead--foto{min-height:45svh} }
/* Preko fotografije --steel-dim pada na ~3,9:1. Mrvica je sitan tekst,
   pa joj treba svetliji ton — merenjem potvrđeno preko svih banera. */
.phead--foto .crumb{color:var(--steel)}
.phead__media{position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--ink)}
.phead__media picture,.phead__media img{display:block; width:100%; height:100%}
.phead__media img{object-fit:cover; object-position:center}
/* Isti sistem preliva kao hero, samo nešto niži — tekst je ovde kraći. */
.phead__ov{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(7,13,29,.92) 0%, rgba(7,13,29,.86) 32%,
      rgba(10,24,57,.6) 62%, rgba(10,24,57,.42) 100%),
    linear-gradient(180deg,
      rgba(7,13,29,.72) 0%, rgba(7,13,29,.3) 45%, rgba(7,13,29,.55) 100%);
}
/* Isti razlog kao kod heroja: na telefonu tekst ide celom širinom,
   pa preliv mora biti ravnomeran, inače lede padne ispod 4,5:1. */
@media(max-width:61.99rem){
  .phead__ov{
    background:linear-gradient(180deg,
      rgba(7,13,29,.88) 0%, rgba(7,13,29,.8) 40%, rgba(7,13,29,.88) 100%);
  }
}
.phead__in{position:relative; z-index:3}
.crumb{font-family:var(--f-data); font-size:var(--step--1); color:var(--steel-dim); letter-spacing:.06em}
.crumb a:hover{color:var(--blue-lift)}
.phead h1{margin-top:1rem}

/* --- Donji uglovi: asistent i povratak na vrh ------------------
   Zajednički jezik za oba: navy podloga, hairline ivica, radijus 3px.
   z-index 90 — ispod zaglavlja (100), da ga panel nikad ne prekrije.

   Napomena o obliku: zadatak pominje „kružni” pokretač, ali dizajn
   sistem traži radijus 2–3px i izričito odbacuje izgled nalepljenog
   chat balončića. Zato je pokretač pilula sa ikonom i natpisom —
   sledi se pravilo dizajn sistema, ne oblik.                        */
.asi,.vrh{position:fixed; bottom:clamp(.75rem,2vw,1.5rem); z-index:90}
.asi{left:clamp(.75rem,2vw,1.5rem)}
.vrh{right:clamp(.75rem,2vw,1.5rem)}

.asi__toggle,.vrh{
  background:var(--ink-2); color:var(--paper);
  border:1px solid var(--line-strong); border-radius:3px;
  box-shadow:0 6px 26px rgba(7,13,29,.55); cursor:pointer;
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.asi__toggle:hover,.vrh:hover{background:var(--blue); border-color:var(--blue-lift)}

.asi__toggle{
  display:inline-flex; align-items:center; gap:.5rem;
  min-height:44px; padding:.55rem .95rem;
  font-family:var(--f-body); font-size:var(--step--1); font-weight:500; letter-spacing:.01em;
}
.asi__toggle svg{width:1.05rem; height:1.05rem; flex:none}
.asi[data-open="true"] .asi__toggle{background:var(--blue); border-color:var(--blue-lift)}

.asi__panel{
  position:absolute; left:0; bottom:calc(100% + .6rem);
  width:min(340px,calc(100vw - 1.5rem));
  max-height:70svh; overflow-y:auto; scrollbar-width:thin;
  background:var(--ink-2); border:1px solid var(--line-strong); border-radius:3px;
  box-shadow:0 18px 54px rgba(7,13,29,.7);
  padding:clamp(.9rem,2.5vw,1.15rem);
}
.asi__head{display:flex; align-items:center; justify-content:space-between; gap:.75rem}
.asi__naslov{font-family:var(--f-data); font-size:var(--step--1); letter-spacing:.13em; text-transform:uppercase; color:var(--steel-dim)}
.asi__x{
  width:44px; height:44px; margin:-.55rem -.55rem -.55rem 0; flex:none;
  display:grid; place-items:center;
  background:none; border:0; color:var(--steel); cursor:pointer; border-radius:2px;
}
.asi__x:hover{color:var(--paper)}
.asi__x svg{width:1.1rem; height:1.1rem}
/* Prvi red u panelu — otvoreno kaže na šta asistent ume da odgovori. */
.asi__uvod{
  margin-top:.5rem; padding-bottom:.75rem; border-bottom:1px solid var(--line);
  font-size:var(--step--1); line-height:1.6; color:var(--steel);
}
.asi__lista{display:grid; gap:.35rem; margin-top:.75rem}
.asi__q{
  width:100%; min-height:44px; text-align:left; padding:.6rem .75rem;
  background:rgba(7,13,29,.55); border:1px solid var(--line); border-radius:2px;
  color:var(--steel); font-family:var(--f-body); font-size:var(--step--1); line-height:1.5;
  cursor:pointer; transition:color .2s,border-color .2s,background .2s;
}
.asi__q:hover{color:var(--paper); border-color:var(--blue-lift); background:rgba(0,109,163,.14)}
.asi__odg{margin-top:.85rem}
.asi__odg:focus{outline:none}
.asi__odg:focus-visible{outline:2px solid var(--blue-lift); outline-offset:3px; border-radius:2px}
.asi__pitanje{font-family:var(--f-display); font-weight:600; font-size:var(--step-0); color:var(--paper); line-height:1.4}
.asi__tekst{margin-top:.55rem; font-size:var(--step--1); line-height:1.7; color:var(--steel)}
.asi__tekst .mono{color:var(--paper)}
.asi__veza{
  display:inline-flex; align-items:center; gap:.35rem; min-height:44px; margin-top:.5rem;
  font-size:var(--step--1); font-weight:500; color:var(--blue-lift);
}
.asi__veza:hover{text-decoration:underline}
.asi__nazad{
  display:block; width:100%; min-height:44px; margin-top:.5rem; padding:.55rem .75rem;
  background:none; border:1px solid var(--line); border-radius:2px;
  color:var(--steel-dim); font-family:var(--f-body); font-size:var(--step--1); cursor:pointer;
  transition:color .2s,border-color .2s;
}
.asi__nazad:hover{color:var(--paper); border-color:var(--line-strong)}

.vrh{
  width:44px; height:44px; display:grid; place-items:center;
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease),background .25s var(--ease),border-color .25s var(--ease);
}
.vrh[data-vidljiv="true"]{opacity:1; transform:none; pointer-events:auto}
.vrh svg{width:1.15rem; height:1.15rem}
@media(prefers-reduced-motion:reduce){
  .vrh{transition:opacity .01ms,background .25s var(--ease); transform:none}
}

/* --- Podnožje ------------------------------------------------- */
.ftr{background:var(--ink); border-top:1px solid var(--line); padding-block:clamp(3rem,6vw,5rem) 0}
.ftr__grid{display:grid; gap:var(--gap)}
@media(min-width:48rem){.ftr__grid{grid-template-columns:1.4fr 1fr 1.3fr}}
.ftr__brand svg{height:1.8rem; width:auto}
.ftr__brand .logo__figure,.ftr__brand .logo__text{fill:var(--paper)}
.ftr__tag{margin-top:1.1rem; font-size:var(--step--1); color:var(--steel-dim); max-width:34ch; line-height:1.65}
.ftr__h{font-family:var(--f-data); font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--steel-dim); margin-bottom:1.1rem}
.ftr__list li+li{margin-top:.1rem}
.ftr__list a{display:inline-flex; align-items:center; min-height:2.4rem; font-size:var(--step--1); color:var(--steel); transition:color .2s}
.ftr__list a:hover{color:var(--blue-lift)}
.ftr__loc+.ftr__loc{margin-top:1.4rem; padding-top:1.4rem; border-top:1px solid var(--line)}
.ftr__loc b{display:block; font-family:var(--f-display); font-size:var(--step-0); font-weight:600; color:var(--paper); margin-bottom:.4rem}
.ftr__loc p,.ftr__loc a{font-size:var(--step--1); color:var(--steel-dim); line-height:1.7}
.ftr__loc a{display:inline-flex; align-items:center; min-height:2.3rem; transition:color .2s}
.ftr__loc a:hover{color:var(--blue-lift)}
.ftr__bar{
  margin-top:clamp(2.5rem,5vw,4rem); padding-block:1.4rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; align-items:center; justify-content:space-between;
  font-family:var(--f-data); font-size:.72rem; color:var(--steel-dim); letter-spacing:.04em;
}

/* --- Otkrivanje pri skrolu ------------------------------------ */
.rv{opacity:0; transform:translateY(1.6rem); transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv[data-in="true"]{opacity:1; transform:none}
.rv-d1{transition-delay:.08s} .rv-d2{transition-delay:.16s} .rv-d3{transition-delay:.24s}

/* --- Mobilna navigacija ---------------------------------------
   Prag je podignut sa 63.99rem na 71.99rem kada je dodata kontrola za
   jezik: sedam stavki + SR/EN + CTA više ne staju u jedan red između
   1024 i 1150 px (izmereno: manjak 65 px na 1024). Umesto stiskanja
   teksta, u tom opsegu se prikazuje meni na dugme.                  */
@media(max-width:71.99rem){
  .burger{display:inline-flex}
  .nav{
    position:fixed; inset:4.6rem 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--ink); border-bottom:1px solid var(--line); padding:.5rem var(--pad) 1.5rem;
    max-height:calc(100dvh - 4.6rem); overflow-y:auto;
    transform:translateY(-102%); visibility:hidden; transition:transform .38s var(--ease),visibility .38s;
  }
  .nav[data-open="true"]{transform:translateY(0); visibility:visible}
  .nav__a{padding:1rem .2rem; min-height:3.2rem; font-size:var(--step-0); border-bottom:1px solid var(--line)}
  .nav__a::after{display:none}
  /* U mobilnom panelu kontrola stoji uz levu ivicu, ne razvučena. */
  .jez{align-self:flex-start; margin-top:.9rem; min-width:0}
  .hdr .btn{margin:1.1rem 0 0; width:100%; min-height:3.1rem}
}

/* --- Umanjeno kretanje ---------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rv{opacity:1; transform:none}
  .hero h1 .ln>span{transform:none; animation:none}
  .pre__mark path{stroke-dashoffset:0; fill:var(--blue-lift); animation:none}
}

/* --- Štampa --------------------------------------------------- */
@media print{
  .hdr,.pre,.ftr__bar,.btn,.burger{display:none!important}
  body{background:#fff; color:#000}
  .sec{padding-block:1.5rem}
}

/* --- Kontakt raspored ------------------------------------------ */
@media(min-width:56rem){
  .kontakt-grid{grid-template-columns:1.25fr .75fr; align-items:start}
}