@charset "UTF-8";
/* ==========================================================================
   ELMISS line d.o.o. — "ELMISS Classic Premium"
   Jedinstveni stylesheet. Mobile-first. Vanilla CSS.
   Sadržaj:
    01 Tokeni
    02 Reset i osnove
    03 Tipografija
    04 Layout (container, sekcije, grid)
    05 Dugmad i linkovi
    06 Utility traka
    07 Header, mega-meni, mobilni drawer
    08 Hero (split)
    09 Traka segmenata
    10 Traka poverenja
    11 Media / placeholder blokovi
    12 Kartice (kategorija, proizvod, referenca, vest)
    13 Split sekcije, koraci, brojke
    14 Tabela specifikacija
    15 Katalog (rail, pretraga, mreža)
    16 Stranica proizvoda
    17 Forme (kontakt / RFQ)
    18 FAQ / akordeon
    19 CTA traka i footer
    20 Plutajuće akcije (desno dole)
    21 AI asistent (levo dole)
    22 Reveal animacije
    23 Pomoćne klase i print
   ========================================================================== */

/* ---------- 01 TOKENI ---------------------------------------------------- */
:root{
  /* Podloga */
  --bg:#FFFFFF;
  --bg-alt:#F4F6F7;
  --bg-dark:#15191C;        /* SAMO CTA traka + footer */

  /* Tekst */
  --text:#15191C;
  --text-body:#414A52;
  --text-muted:#727C85;
  --text-invert:#F2F4F5;

  /* Linije */
  --line:#E4E8EB;
  --line-strong:#C8D0D6;

  /* Brend (iz logotipa) */
  --elmiss-red:#DD1D24;
  --elmiss-red-700:#B4141A;
  --elmiss-red-050:#FDECEC;

  /* Forma */
  --radius-lg:20px;
  --radius:12px;
  --radius-btn:999px;

  /* Elevacija */
  --shadow-sm:0 1px 2px rgba(21,25,28,.06);
  --shadow-md:0 6px 24px rgba(21,25,28,.08);
  --shadow-lg:0 18px 48px rgba(21,25,28,.14);

  /* Layout */
  --container:1240px;
  --gutter:clamp(1rem,4vw,2.5rem);
  --header-h:64px;

  /* Motion */
  --ease:cubic-bezier(.2,.8,.2,1);
  --dur:280ms;

  /* Z-index skala */
  --z-reveal:1;
  --z-sticky:40;
  --z-float:60;
  --z-panel:80;
  --z-drawer:100;
}

@media (min-width:1024px){
  :root{ --header-h:76px; }
}

/* ---------- 02 RESET I OSNOVE ------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

/* `hidden` mora da pobedi klase koje postavljaju display (.grid, .chip, .form…) */
[hidden]{ display:none !important; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 24px);
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text-body);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:1.0625rem;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

body.is-locked{ overflow:hidden; }

img,svg,video{ max-width:100%; display:block; }
img{ height:auto; }

a{ color:inherit; }

button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; padding:0; cursor:pointer; }

:where(a,button,input,select,textarea,summary,[tabindex]):focus{ outline:none; }
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--elmiss-red);
  outline-offset:2px;
  border-radius:4px;
}

::selection{ background:var(--elmiss-red); color:#fff; }

hr{ border:0; border-top:1px solid var(--line); margin:0; }

/* Skip link — pojavljuje se ISKLJUČIVO na tastaturni fokus (`:focus-visible`).
   Sa običnim `:focus` iskakao je i posle programskog fokusa (npr. „Nazad na vrh"). */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--elmiss-red); color:#fff;
  padding:.75rem 1.25rem; border-radius:0 0 var(--radius) 0;
  font-weight:600; text-decoration:none;
}
.skip-link:focus-visible{ left:0; }

/* Glavni sadržaj prima fokus programski (posle „Nazad na vrh") —
   bez vidljivog prstena, jer nije kontrola. */
#main:focus,
#main:focus-visible{ outline:none; }

/* ---------- 03 TIPOGRAFIJA ---------------------------------------------- */
h1,h2,h3,h4{
  margin:0 0 .6em;
  color:var(--text);
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.01em;
  text-wrap:balance;
}

h1,.h1{ font-size:clamp(2.1rem,3.6vw,3.1rem); line-height:1.15; }
h2,.h2{ font-size:clamp(1.7rem,2.8vw,2.3rem); line-height:1.2; }
h3,.h3{ font-size:1.15rem; line-height:1.35; }
h4{ font-size:1rem; }

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.lead{
  font-size:clamp(1.0625rem,1.4vw,1.1875rem);
  color:var(--text-body);
  max-width:62ch;
}

.prose{ max-width:65ch; }
.prose h3{ margin-top:1.8em; }
.prose ul{ margin:0 0 1.2em; padding-left:1.15rem; }
.prose li{ margin-bottom:.4em; }
.prose li::marker{ color:var(--elmiss-red); }

/* Mikro-labela — jedan od glavnih nosilaca crvene */
.micro{
  display:block;
  font-size:.75rem;
  font-weight:600;
  line-height:1.4;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--elmiss-red);
  margin:0 0 .75rem;
}
.micro--muted{ color:var(--text-muted); }

.meta{ font-size:.875rem; color:var(--text-muted); }

/* Sekcijsko zaglavlje: mikro-labela → H2 → uvod */
.section-head{ max-width:60ch; margin-bottom:clamp(1.75rem,3.5vw,2.75rem); }
.section-head h2{ margin-bottom:.5rem; }
.section-head p{ color:var(--text-body); }

.section-head--split{ max-width:none; display:grid; gap:1rem; }
@media (min-width:900px){
  .section-head--split{ grid-template-columns:minmax(0,1fr) auto; align-items:end; }
}

/* Numerali (tabele, specifikacije) */
.tnum{ font-variant-numeric:tabular-nums; }

/* ---------- 04 LAYOUT ---------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container--narrow{ max-width:860px; }

.section{ padding-block:clamp(3.25rem,7vw,6rem); }
.section--tight{ padding-block:clamp(2.25rem,4.5vw,3.5rem); }
.section--line{ border-top:1px solid var(--line); }

/* Sekcija na tonu — prelaz iz bele podloge nosi meku vlas-liniju koja se
   gubi ka ivicama i jedan vrlo tih odjek luka, da nizanje sekcija deluje
   komponovano, a ne naslagano. */
.section--alt{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--bg-alt);
}
.section--alt::before{
  content:"";
  position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg,rgba(200,208,214,0) 0%,var(--line-strong) 24%,var(--line-strong) 76%,rgba(200,208,214,0) 100%);
}
.section--alt::after{
  content:"";
  position:absolute;
  right:-14vw; top:-16vw;
  width:36vw; height:36vw;
  min-width:280px; min-height:280px;
  border-radius:50%;
  border:1.1vw solid var(--elmiss-red);
  opacity:.032;
  z-index:-1;
  pointer-events:none;
}
.section--alt > .container{ position:relative; }

.grid{ display:grid; gap:clamp(1rem,2.2vw,1.5rem); }
.grid-2{ grid-template-columns:1fr; }
.grid-3{ grid-template-columns:1fr; }
.grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }

@media (min-width:640px){
  .grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1000px){
  .grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

.stack-sm > * + *{ margin-top:.75rem; }
.stack > * + *{ margin-top:1.25rem; }

/* Svetlo zaglavlje unutrašnjih stranica — nosi istu dekoraciju lukova
   (`.hero-arcs`), pa mu treba stacking context i nešto više vazduha. */
.page-head{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  padding-block:clamp(2.75rem,5.5vw,4.25rem);
}
.page-head > .container{ position:relative; }
/* 404 nema breadcrumb ni intro — zaglavlje i sekcija su isti blok. */
.page-head--404{ border-bottom:0; }
.page-head h1{ margin-bottom:.5rem; }
.page-head p{ color:var(--text-body); max-width:62ch; }

/* Breadcrumb */
.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem;
  font-size:.8125rem; color:var(--text-muted);
  margin:0 0 1rem; padding:0; list-style:none;
}
.crumbs li{ display:flex; align-items:center; gap:.4rem; }
.crumbs li + li::before{ content:"/"; color:var(--line-strong); }
.crumbs a{ text-decoration:none; color:var(--text-muted); transition:color 160ms var(--ease); }
.crumbs a:hover{ color:var(--elmiss-red); }
.crumbs [aria-current]{ color:var(--text); }

/* ---------- 05 DUGMAD I LINKOVI ----------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:46px;
  padding:13px 26px;
  border-radius:var(--radius-btn);
  font-size:.9375rem; font-weight:600; line-height:1;
  text-decoration:none; text-align:center;
  cursor:pointer;
  border:1px solid transparent;
  transition:background-color 200ms var(--ease), color 200ms var(--ease),
             border-color 200ms var(--ease), box-shadow 200ms var(--ease),
             transform 120ms var(--ease);
}

/* Jedinstveno stanje pritiska na svim dugmadima */
.btn:active{ transform:scale(.98); }

.btn--primary{ background:var(--elmiss-red); color:#fff; }
/* Mek crveni odsjaj — jedini „glow" na sajtu, rezervisan za primarni CTA. */
.btn--primary:hover{
  background:var(--elmiss-red-700);
  box-shadow:0 6px 20px rgba(221,29,36,.28);
}

.btn--secondary{ background:#fff; color:var(--text); border-color:var(--line-strong); }
.btn--secondary:hover{ background:var(--bg-alt); border-color:var(--line-strong); box-shadow:var(--shadow-sm); }

.btn--ghost{ background:transparent; color:var(--text-invert); border-color:rgba(255,255,255,.28); }
.btn--ghost:hover{ background:rgba(255,255,255,.1); }

.btn--sm{ min-height:40px; padding:10px 20px; font-size:.875rem; }
.btn--block{ width:100%; }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.45; pointer-events:none; }

.btn-row{ display:flex; flex-wrap:wrap; gap:.75rem; }

/* Tekstualni link sa strelicom */
.arrow-link{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.9375rem; font-weight:600; color:var(--text);
  text-decoration:none;
  transition:color 200ms var(--ease);
}
.arrow-link::after{
  content:"→";
  display:inline-block;
  transition:transform 200ms var(--ease);
}
.arrow-link:hover{ color:var(--elmiss-red); }
.arrow-link:hover::after{ transform:translateX(4px); }
.arrow-link--red{ color:var(--elmiss-red); }

/* Chip / oznaka */
.chip{
  display:inline-block;
  padding:.3rem .7rem;
  border-radius:var(--radius-btn);
  background:var(--elmiss-red-050);
  color:var(--elmiss-red-700);
  font-size:.75rem; font-weight:600; line-height:1.3;
  letter-spacing:.02em;
}
.chip--neutral{ background:var(--bg-alt); color:var(--text-body); border:1px solid var(--line); }
/* U flex/grid telima kartica pilula se meri po tekstu, a ne po širini
   kartice — bez ovoga se rastegne u traku (npr. u karticama referenci). */
.chip{ align-self:flex-start; }

/* ---------- 06 UTILITY TRAKA -------------------------------------------- */
.utility{
  background:var(--bg-alt);
  border-bottom:1px solid var(--line);
  font-size:.8125rem;
  color:var(--text-muted);
}
.utility__inner{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:32px;
  padding-block:.25rem;
}
.utility__list{
  display:flex; align-items:center; gap:1.25rem;
  margin:0; padding:0; list-style:none;
  overflow:hidden;
}
.utility__list li{ display:flex; align-items:center; gap:.4rem; white-space:nowrap; }
/* Na uskim ekranima ostaje samo telefon — mejl i radno vreme su u footeru. */
.utility__list li:nth-child(n+2){ display:none; }
.utility a{ text-decoration:none; transition:color 160ms var(--ease); }
.utility a:hover{ color:var(--elmiss-red); }
.utility svg{ width:14px; height:14px; flex:none; color:var(--text-muted); }

.lang{ display:flex; align-items:center; gap:.35rem; flex:none; }
.lang a{ padding:.15rem .1rem; font-weight:600; color:var(--text-muted); }
.lang [aria-current="true"]{ color:var(--text); }
.lang span{ color:var(--line-strong); }

@media (min-width:560px){
  .utility__list li:nth-child(2){ display:flex; }
}
@media (min-width:768px){
  .utility__list li:nth-child(n+2){ display:flex; }
}

/* Tanka traka napretka čitanja — jedini stalni crveni element na vrhu. */
.scroll-progress{
  position:fixed; left:0; top:0;
  z-index:calc(var(--z-drawer) + 10);
  width:100%; height:3px;
  transform:scaleX(var(--progress,0));
  transform-origin:left center;
  background:linear-gradient(90deg,var(--elmiss-red) 0%,var(--elmiss-red-700) 100%);
  pointer-events:none;
  will-change:transform;
}

/* ---------- 07 HEADER ---------------------------------------------------- */
.header{
  position:sticky; top:0; z-index:var(--z-sticky);
  background:var(--bg);
  border-bottom:1px solid var(--line);
  transition:box-shadow 200ms var(--ease);
}
.header.is-scrolled{ box-shadow:var(--shadow-sm); }

.header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:var(--header-h);
  transition:min-height 240ms var(--ease);
}
/* Blago skupljanje pri skrolovanju — samo visina i veličina logotipa,
   bez pomeranja navigacije koje bi ometalo cilj klika. */
.header.is-scrolled .header__inner{ min-height:calc(var(--header-h) - 8px); }

.brand{ display:inline-flex; align-items:center; flex:none; text-decoration:none; }
.brand img{ width:auto; height:34px; transition:height 240ms var(--ease); }
@media (min-width:1024px){
  .brand img{ height:40px; }
  .header.is-scrolled .brand img{ height:34px; }
}

.header__actions{ display:flex; align-items:center; gap:.5rem; }
.header__cta{ display:none; }
@media (min-width:1080px){ .header__cta{ display:inline-flex; } }

/* Hamburger */
.burger{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  color:var(--text);
  transition:background-color 160ms var(--ease), border-color 160ms var(--ease);
}
.burger:hover{ background:var(--bg-alt); border-color:var(--line-strong); }
.burger svg{ width:22px; height:22px; }
@media (min-width:1080px){ .burger{ display:none; } }

/* --- Desktop navigacija --- */
.nav{ display:none; }
@media (min-width:1080px){
  .nav{ display:block; margin-left:auto; margin-right:1rem; }
  .nav__list{
    display:flex; align-items:center; gap:.25rem;
    margin:0; padding:0; list-style:none;
  }
  .nav__link,
  .nav__toggle{
    display:inline-flex; align-items:center; gap:.35rem;
    padding:.65rem .75rem;
    border-radius:8px;
    font-size:.9375rem; font-weight:500; color:var(--text);
    text-decoration:none;
    white-space:nowrap;
    transition:color 180ms var(--ease);
  }
  .nav__link::after,
  .nav__toggle::after{
    content:""; position:absolute; left:.75rem; right:.75rem; bottom:.35rem;
    height:2px; background:var(--elmiss-red);
    transform:scaleX(0); transform-origin:left;
    transition:transform 200ms var(--ease);
  }
  .nav__item{ position:relative; }
  .nav__link,.nav__toggle{ position:relative; }
  .nav__link:hover,.nav__toggle:hover,
  .nav__item.is-open > .nav__toggle{ color:var(--elmiss-red); }
  .nav__link:hover::after,
  .nav__toggle:hover::after,
  .nav__item.is-open > .nav__toggle::after,
  .nav__link[aria-current="page"]::after,
  .nav__toggle[data-current="true"]::after{ transform:scaleX(1); }
  .nav__link[aria-current="page"],
  .nav__toggle[data-current="true"]{ color:var(--text); font-weight:600; }
  /* Podvlaka aktivne stranice se iscrtava, ne pojavljuje naglo. */
  .nav__link[aria-current="page"]::after,
  .nav__toggle[data-current="true"]::after{ animation:nav-underline 420ms var(--ease) 180ms both; }
  @keyframes nav-underline{
    from{ transform:scaleX(0); }
    to{ transform:scaleX(1); }
  }
  .nav__caret{ width:12px; height:12px; transition:transform 200ms var(--ease); }
  .nav__item.is-open .nav__caret{ transform:rotate(180deg); }
}

/* --- Mega meni --- */
.mega{
  position:absolute; top:calc(100% + .35rem); left:50%;
  transform:translate(-50%,6px);
  min-width:min(620px,80vw);
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  padding:1.5rem;
  opacity:0; visibility:hidden; pointer-events:none;
  z-index:var(--z-panel);
  transition:opacity 200ms var(--ease), transform 200ms var(--ease), visibility 200ms;
}
.nav__item.is-open > .mega{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); }
.mega--sm{ min-width:min(320px,80vw); left:0; transform:translate(0,6px); }
.nav__item.is-open > .mega--sm{ transform:translate(0,0); }

.mega__grid{ display:grid; gap:1.5rem 2rem; grid-template-columns:repeat(2,minmax(0,1fr)); }
.mega--sm .mega__grid{ grid-template-columns:1fr; gap:.25rem; }
.mega__col h3{
  font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.09em;
  color:var(--text-muted); margin-bottom:.75rem;
}
.mega__list{ margin:0; padding:0; list-style:none; }
.mega__list a{
  display:block;
  padding:.5rem .65rem;
  margin-left:-.65rem;
  border-radius:8px;
  font-size:.9375rem; font-weight:500; color:var(--text);
  text-decoration:none;
  transition:background-color 160ms var(--ease), color 160ms var(--ease);
}
.mega__list a:hover{ background:var(--bg-alt); color:var(--elmiss-red); }
.mega__list small{ display:block; font-size:.8125rem; font-weight:400; color:var(--text-muted); }
.mega__foot{
  display:flex; flex-wrap:wrap; gap:1.25rem;
  margin-top:1.25rem; padding-top:1rem;
  border-top:1px solid var(--line);
}

/* Rezervna navigacija kada je JavaScript isključen (drawer tada ne radi). */
.nav-fallback{
  background:var(--bg-alt);
  border-bottom:1px solid var(--line);
  font-size:.875rem;
}
.nav-fallback__inner{
  display:flex; gap:1.25rem;
  padding-block:.7rem;
  overflow-x:auto;
  scrollbar-width:none;
}
.nav-fallback__inner::-webkit-scrollbar{ display:none; }
.nav-fallback a{ white-space:nowrap; font-weight:600; color:var(--text); text-decoration:none; }
.nav-fallback a:hover{ color:var(--elmiss-red); }
@media (min-width:1080px){ .nav-fallback{ display:none; } }

/* --- Mobilni drawer --- */
.drawer{
  position:fixed; inset:0; z-index:var(--z-drawer);
  background:#fff;
  display:flex; flex-direction:column;
  transform:translateX(100%);
  visibility:hidden;
  transition:transform 300ms var(--ease), visibility 300ms;
  overscroll-behavior:contain;
}
.drawer.is-open{ transform:translateX(0); visibility:visible; }
@media (min-width:1080px){ .drawer{ display:none; } }

.drawer__top{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:var(--header-h);
  padding-inline:var(--gutter);
  border-bottom:1px solid var(--line);
  flex:none;
}
.drawer__close{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--radius);
  border:1px solid var(--line); color:var(--text);
}
.drawer__close:hover{ background:var(--bg-alt); }
.drawer__close svg{ width:20px; height:20px; }

.drawer__body{
  flex:1 1 auto; overflow-y:auto;
  padding:1.25rem var(--gutter) 2rem;
  -webkit-overflow-scrolling:touch;
}
.drawer__nav{ margin:0; padding:0; list-style:none; }
.drawer__nav > li{ border-bottom:1px solid var(--line); }
.drawer__nav > li > a,
.drawer__acc-btn{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  width:100%;
  padding:1rem 0;
  font-size:1.0625rem; font-weight:600; color:var(--text);
  text-decoration:none; text-align:left;
}
.drawer__acc-btn svg{ width:16px; height:16px; flex:none; color:var(--text-muted); transition:transform 200ms var(--ease); }
.drawer__acc-btn[aria-expanded="true"]{ color:var(--elmiss-red); }
.drawer__acc-btn[aria-expanded="true"] svg{ transform:rotate(180deg); color:var(--elmiss-red); }
.drawer__panel{ display:none; padding-bottom:.75rem; }
.drawer__panel.is-open{ display:block; }
.drawer__panel ul{ margin:0 0 .5rem; padding:0; list-style:none; }
.drawer__panel a{
  display:block; padding:.6rem 0 .6rem .9rem;
  border-left:2px solid var(--line);
  font-size:.9375rem; color:var(--text-body); text-decoration:none;
}
.drawer__panel a:hover{ color:var(--elmiss-red); border-left-color:var(--elmiss-red); }
.drawer__panel h4{
  margin:.75rem 0 .35rem;
  font-size:.75rem; text-transform:uppercase; letter-spacing:.09em; color:var(--text-muted); font-weight:600;
}
.drawer__foot{ margin-top:1.75rem; display:grid; gap:.75rem; }
.drawer__contact{
  margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--line);
  font-size:.9375rem; color:var(--text-muted);
}
.drawer__contact a{ color:var(--text); text-decoration:none; font-weight:500; display:block; padding:.2rem 0; }

/* ---------- 08 HERO ------------------------------------------------------ */

/* --- Dekorativni crveni lukovi (levo + desno) ----------------------------
   Jedna komponenta za sve stranice: `.hero-arcs` u hero-u, ista klasa uz
   `.page-head` na unutrašnjim stranicama (tamo se automatski smanjuje).
   Čisto dekorativno: aria-hidden, bez pokazivačkih događaja, ispod teksta. */
.hero-arcs{
  position:absolute; inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
}
.hero-arcs svg{
  position:absolute; top:0;
  height:100%;
  width:clamp(260px,44%,640px);
  /* `translate` je zasebno svojstvo — parallax iz JS-a ne kvari `transform`
     koji koristi ulazna animacija. */
  animation:arc-in 1200ms var(--ease) 120ms both;
  will-change:transform;
}
.hero-arcs__l{ left:0;  translate:0 var(--arc-l,0px); }
.hero-arcs__r{ right:0; translate:0 var(--arc-r,0px); }
@keyframes arc-in{
  from{ opacity:0; transform:scale(1.07); }
  to{ opacity:1; transform:none; }
}

/* Manje i tiše u kratkim zaglavljima unutrašnjih stranica */
.page-head .hero-arcs{ opacity:.8; }
.page-head .hero-arcs svg{ width:clamp(200px,32%,440px); }

/* Prvi ekran početne strane: hero + traka segmenata zajedno čine tačno
   jednu visinu prozora, a traka naleže na njegovu donju ivicu.
   `min-height` (a ne `height`) — na vrlo niskim ekranima sadržaj radije
   poraste nego da bude odsečen. `--chrome-h` je zbir utility trake i
   header-a; JS ga izmeri tačno, a ove vrednosti su ispravna procena
   i kada JavaScript nije dostupan. */
:root{ --chrome-h:105px; }
@media (min-width:1024px){ :root{ --chrome-h:118px; } }

.hero-shell{
  display:flex;
  flex-direction:column;
  min-height:calc(100vh - var(--chrome-h));
  min-height:calc(100dvh - var(--chrome-h));
  min-height:calc(100svh - var(--chrome-h));
}
.hero-shell > .hero{ flex:1 1 auto; display:flex; align-items:center; min-height:0; }
.hero-shell > .segments{ flex:none; }
.hero-shell > .hero > .container{ width:100%; }

.hero{
  position:relative;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  isolation:isolate;
}

/* Meko polje iza leve kolone + jedan veliki crveni luk koji izlazi iz kadra.
   Sve je krajnje diskretno (≤6% neprozirnosti) — podloga ostaje svetla. */
.hero__bg{
  position:absolute; inset:0; z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(115% 85% at 0% 0%, rgba(228,232,235,.55) 0%, rgba(228,232,235,0) 58%),
    linear-gradient(128deg, var(--bg-alt) 0%, rgba(244,246,247,.45) 26%, rgba(255,255,255,0) 52%);
}
.hero__bg::before{
  content:"";
  position:absolute;
  left:-16vw; top:-26vw;
  width:52vw; height:52vw;
  min-width:380px; min-height:380px;
  border-radius:50%;
  border:1.4vw solid var(--elmiss-red);
  opacity:.055;
}
.hero__bg::after{
  content:"";
  position:absolute;
  left:-8vw; bottom:-18vw;
  width:26vw; height:26vw;
  min-width:200px; min-height:200px;
  border-radius:50%;
  background:var(--elmiss-red);
  opacity:.035;
}

.hero__inner{
  position:relative;
  display:grid;
  gap:clamp(1.5rem,3vw,2.75rem);
  padding-block:clamp(1.5rem,3vw,2.5rem) clamp(2.5rem,4vw,3rem);
}

/* Na mobilnom: fotografija gore, tekst dole */
.hero__media{ order:-1; position:relative; margin-bottom:1.75rem; }
.hero__figure{
  position:relative;
  aspect-ratio:4/3;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--bg-alt);
  box-shadow:var(--shadow-md);
}
/* Tanak unutrašnji prsten — daje fotografiji „uramljen" utisak. */
.hero__figure::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(21,25,28,.05);
  pointer-events:none;
  z-index:2;
}

/* Preklapajuća kartica sa standardom izrade — element koji hero čini
   „dizajniranim", a ne praznim. */
.hero__badge{
  position:absolute;
  left:14px; bottom:-24px;
  z-index:3;
  max-width:min(320px,86%);
  padding:.9rem 1.1rem;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
}
.hero__badge .micro{ margin-bottom:.4rem; }
.hero__badge p{
  margin:0;
  font-size:.875rem; line-height:1.5; color:var(--text-body);
}
.hero__badge strong{ color:var(--text); font-weight:600; }
@media (min-width:900px){
  .hero__badge{ left:-28px; bottom:-26px; }
}
.hero__figure img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1);
  transition:opacity 450ms var(--ease);
}
/* Spor Ken Burns tokom trajanja slajda — fotografija „diše", bez skretanja pažnje. */
.hero__figure img.is-active{
  opacity:1;
  animation:ken-burns 6.6s linear both;
}
.hero.is-paused .hero__figure img.is-active{ animation-play-state:paused; }
@keyframes ken-burns{
  from{ transform:scale(1); }
  to{ transform:scale(1.04); }
}

.hero__copy{ display:flex; flex-direction:column; justify-content:center; }

/* Slajdovi se slažu u istu ćeliju mreže i pretapaju istom brzinom kao
   fotografija — tako tekst i slika nikada ne kasne jedno za drugim. */
.hero__slides{ display:grid; }
.hero__slide{
  grid-area:1 / 1;
  opacity:0;
  visibility:hidden;
  transition:opacity 450ms var(--ease), visibility 450ms;
}
.hero__slide.is-active{ opacity:1; visibility:visible; }
.hero__slide h1,
.hero__slide .h1{ margin-bottom:.75rem; }
.hero__slide p{ color:var(--text-body); max-width:52ch; margin-bottom:1.5rem; }

/* Stepenasto uzdizanje sadržaja pri svakoj promeni slajda. */
.hero__slide.is-active > *{ animation:hero-rise 460ms var(--ease) both; }
.hero__slide.is-active > *:nth-child(1){ animation-delay:0ms; }
.hero__slide.is-active > *:nth-child(2){ animation-delay:70ms; }
.hero__slide.is-active > *:nth-child(3){ animation-delay:140ms; }
.hero__slide.is-active > *:nth-child(4){ animation-delay:210ms; }
@keyframes hero-rise{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:none; }
}

/* Tanka traka poverenja ispod CTA dugmadi */
.hero__trust{
  display:flex; flex-wrap:wrap;
  gap:.5rem 1.15rem;
  margin:1.75rem 0 0;
  padding:1.15rem 0 0;
  list-style:none;
  border-top:1px solid var(--line);
}
.hero__trust li{
  display:flex; align-items:center; gap:.45rem;
  font-size:.8125rem; color:var(--text-muted);
  white-space:nowrap;
}
.hero__trust svg{ width:15px; height:15px; flex:none; color:var(--elmiss-red); }
/* Vlas-linije razdvajanja tek kada red sigurno stane u jednu liniju —
   inače bi se posle preloma pojavila „viseća" crta na početku novog reda. */
@media (min-width:560px){
  .hero__trust li + li{ padding-left:1.15rem; border-left:1px solid var(--line); }
}

/* Indikatori slajdova sa trakom napretka */
.hero__dots{ display:flex; gap:.5rem; margin-top:1.5rem; }
.hero__dot{
  position:relative;
  width:32px; height:22px;
  display:inline-flex; align-items:center;
  cursor:pointer;
  transition:width 320ms var(--ease);
}
.hero__dot[aria-current="true"]{ width:56px; }
.hero__dot::before{
  content:""; display:block;
  width:100%; height:3px; border-radius:999px;
  background:var(--line-strong);
  transition:background-color 240ms var(--ease);
}
.hero__dot:hover::before{ background:var(--text-muted); }
.hero__dot::after{
  content:"";
  position:absolute; left:0; top:50%;
  width:100%; height:3px; border-radius:999px;
  background:var(--elmiss-red);
  transform:translateY(-50%) scaleX(0);
  transform-origin:left center;
}
.hero__dot[aria-current="true"]::after{
  animation:dot-progress 6s linear both;
}
.hero.is-paused .hero__dot[aria-current="true"]::after{ animation-play-state:paused; }
@keyframes dot-progress{
  from{ transform:translateY(-50%) scaleX(0); }
  to{ transform:translateY(-50%) scaleX(1); }
}

/* Na uskim ekranima fotografija se skuplja da bi ceo hero (uključujući CTA
   dugmad i traku poverenja) stao u jedan ekran — radije niža slika nego
   odsečen tekst. */
@media (max-width:899px){
  .hero-shell .hero__inner{
    gap:1rem;
    padding-block:clamp(.75rem,2.4svh,1.5rem) clamp(1.25rem,3svh,2rem);
  }
  /* Fotografija popunjava sav slobodan prostor prvog ekrana umesto da stoji
     na fiksnoj visini — na telefonima i tabletima praznina iznad slike je
     time pretvorena u samu sliku. Tekst zadržava svoju prirodnu visinu
     (red `auto`), pa ništa ne može biti odsečeno. */
  .hero-shell > .hero{ align-items:stretch; }
  .hero-shell .hero__inner{ grid-template-rows:minmax(0,1fr) auto; }
  .hero-shell .hero__media{
    min-height:0;
    /* Gornja granica se meri na `hero__media`, a ne na `hero__figure`, da bi
       kartica „Standard izrade" ostala prilepljena uz donju ivicu slike. */
    max-height:min(52svh,560px);
  }
  .hero-shell .hero__figure{ aspect-ratio:auto; height:100%; min-height:100px; }
  /* Kartica standarda visi niže preko donje ivice fotografije, pa je na
     niskoj slici pokriva znatno manje. Donja margina pravi joj mesto. */
  .hero-shell .hero__media{ margin-bottom:2.4rem; }
  .hero-shell .hero__badge{ left:12px; bottom:-30px; max-width:min(300px,80%); padding:.7rem .9rem; }
  .hero-shell .hero__slide p{ margin-bottom:1.25rem; }
  .hero-shell .hero__dots{ margin-top:1rem; }
  .hero-shell .hero__trust{ margin-top:1.15rem; padding-top:.85rem; }

  /* Traka segmenata je sada prilepljena uz donju ivicu prvog ekrana, pa
     njen sadržaj mora da krene iza plutajućih dugmadi (asistent levo,
     telefon/WhatsApp desno) — inače ih ona prolazi ispod. */
  .hero-shell .segments > .container{
    padding-left:calc(var(--gutter) + 52px);
    padding-right:calc(var(--gutter) + 52px);
  }
}

/* Najuži ekrani: kartica standarda ostaje u jednom kratkom redu, a tekst
   hero-a se malo sabija — svaki ušteđeni piksel ide fotografiji, jer je
   ona na telefonu red `1fr` i preuzima sav oslobođen prostor. */
@media (max-width:560px){
  .hero__badge-more{ display:none; }
  .hero-shell .hero__slide h1,
  .hero-shell .hero__slide .h1{ font-size:1.95rem; margin-bottom:.5rem; }
  .hero-shell .hero__slide p{ font-size:1rem; line-height:1.55; margin-bottom:1rem; }
  .hero-shell .hero__dots{ margin-top:.85rem; }
}

/* Vrlo nizak ekran: naslov i slika idu stepenicu niže umesto da bilo šta
   bude odsečeno ili sklonjeno. */
@media (max-width:899px) and (max-height:780px){
  .hero-shell .hero__slide h1,
  .hero-shell .hero__slide .h1{ font-size:1.75rem; }
  .hero-shell .hero__slide p{ font-size:.9375rem; }
  .hero-shell .hero__inner{ padding-block:.5rem 1rem; }
  .hero-shell .hero__media{ margin-bottom:2.1rem; }
}

@media (min-width:900px){
  .hero__inner{
    grid-template-columns:45fr 55fr;
    align-items:center;
    padding-block:clamp(2rem,4vw,3.25rem);
  }
  .hero__media{ order:0; margin-bottom:0; }
  .hero__figure{ aspect-ratio:4/3.05; height:100%; min-height:min(46svh,470px); }
}

/* ---------- 09 TRAKA SEGMENATA (Lainox obrazac) -------------------------- */
.segments{
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.segments__scroll{
  display:flex;
  gap:.25rem;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  scroll-snap-type:x proximity;
}
.segments__scroll::-webkit-scrollbar{ display:none; }
.segments__link{
  position:relative;
  flex:none;
  padding:1rem .9rem;
  font-size:.875rem; font-weight:600; color:var(--text-body);
  text-decoration:none; white-space:nowrap;
  scroll-snap-align:start;
  transition:color 180ms var(--ease);
}
.segments__link::after{
  content:""; position:absolute; left:.9rem; right:.9rem; bottom:0;
  height:2px; background:var(--elmiss-red);
  transform:scaleX(0); transform-origin:center;
  transition:transform 220ms var(--ease);
}
.segments__link:hover,
.segments__link.is-active{ color:var(--elmiss-red); }
.segments__link:hover::after,
.segments__link.is-active::after{ transform:scaleX(1); }

@media (min-width:1080px){
  .segments__scroll{ justify-content:space-between; gap:0; }
  .segments__link{ padding-inline:1.1rem; font-size:.9375rem; }
}

/* ---------- 10 TRAKA POVERENJA ------------------------------------------ */
.trust{ background:var(--bg-alt); }
.trust__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.trust__item{
  background:var(--bg-alt);
  padding:1.25rem 1rem;
  display:flex; flex-direction:column; align-items:flex-start; gap:.5rem;
}
.trust__item svg{ width:22px; height:22px; color:var(--elmiss-red); flex:none; }
.trust__item strong{ display:block; font-size:.9375rem; font-weight:600; color:var(--text); }
.trust__item span{ font-size:.8125rem; color:var(--text-muted); }
@media (min-width:900px){
  .trust__grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .trust__item{ padding:1.5rem 1.5rem; }
}

/* ---------- 11 MEDIA / PLACEHOLDER BLOKOVI ------------------------------ */
.media{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--bg-alt);
}
.media--card{ border-radius:0; }
/* Popunjava se ISKLJUČIVO medij (slika/video), nikako i overlay elementi
   poput oznake serije — inače bi pilula sa `border-radius:999px` dobila
   100% × 100% i legla preko fotografije kao veliki beli krug. */
.media > img,
.media > picture,
.media > video{ width:100%; height:100%; }
.media img{ object-fit:cover; transition:transform 500ms var(--ease); }
.media--4x3{ aspect-ratio:4/3; }
.media--16x9{ aspect-ratio:16/9; }
.media--1x1{ aspect-ratio:1/1; }
.media--3x2{ aspect-ratio:3/2; }

/* Suptilan prsten preko fotografija — spreči da svetla slika „iscuri"
   u belu podlogu bez ivice. */
.media::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(21,25,28,.05);
  pointer-events:none;
}
/* Unutar kartice ivicu već daje sama kartica — bez duple linije. */
.media--card::after{ display:none; }

/* ---------- 12 KARTICE --------------------------------------------------- */
/* Jedinstveno ponašanje na hover za SVE tipove kartica: senka + ivica
   (240ms), zumiranje fotografije 1.03 (500ms), crveni naslov (200ms) i
   strelica koja klizne 4px. Strelica je često `<span>` unutar kartice, pa
   sopstveni `:hover` na njoj nikada ne bi okinuo. */
.cat-card:hover .arrow-link,
.p-card:hover .arrow-link,
.ref-card:hover .arrow-link,
.news-card:hover .arrow-link{ color:var(--elmiss-red); }
.cat-card:hover .arrow-link::after,
.p-card:hover .arrow-link::after,
.ref-card:hover .arrow-link::after,
.news-card:hover .arrow-link::after{ transform:translateX(4px); }

/* Kartica kategorije / segmenta */
.cat-card{
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  text-decoration:none;
  transition:box-shadow 240ms var(--ease), border-color 240ms var(--ease), transform 240ms var(--ease);
}
.cat-card:hover{ box-shadow:var(--shadow-md); border-color:var(--line-strong); }
.cat-card:hover .media img{ transform:scale(1.03); }
.cat-card__body{ padding:1.15rem 1.25rem 1.35rem; display:flex; flex-direction:column; flex:1; }
.cat-card__body h3{ margin-bottom:.35rem; transition:color 200ms var(--ease); }
.cat-card:hover .cat-card__body h3{ color:var(--elmiss-red); }
.cat-card__body p{ font-size:.9375rem; color:var(--text-muted); margin-bottom:1rem; }
.cat-card__body .arrow-link{ margin-top:auto; }

/* Kartica proizvoda */
.p-card{
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  text-decoration:none;
  transition:box-shadow 240ms var(--ease), border-color 240ms var(--ease);
}
.p-card:hover{ box-shadow:var(--shadow-md); border-color:var(--line-strong); }
.p-card__media{
  position:relative;
  aspect-ratio:4/3;
  background:var(--bg-alt);
  overflow:hidden;
}
/* Samo slika popunjava okvir — oznaka serije ostaje pilula u uglu. */
.p-card__media > img{ width:100%; height:100%; transition:transform 500ms var(--ease); }
.p-card:hover .p-card__media > img{ transform:scale(1.03); }
.p-card__media img{ object-fit:cover; }
.p-card__badge{
  position:absolute; top:.7rem; right:.7rem;
  padding:.2rem .55rem;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  font-size:.6875rem; font-weight:600; color:var(--text-muted);
  letter-spacing:.03em;
  z-index:2;
}
.p-card__body{ padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; flex:1; }
.p-card__body .micro{ margin-bottom:.4rem; }
.p-card__name{
  font-size:1.0625rem; font-weight:600; line-height:1.3; color:var(--text);
  margin:0 0 .2rem;
  transition:color 200ms var(--ease);
}
.p-card:hover .p-card__name{ color:var(--elmiss-red); }
.p-card__model{ font-size:.8125rem; color:var(--text-muted); margin:0 0 .6rem; font-variant-numeric:tabular-nums; }
.p-card__spec{
  font-size:.875rem; color:var(--text-body);
  margin:0 0 1rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.p-card__body .arrow-link{ margin-top:auto; font-size:.875rem; }

/* Medijski blok koji otvara lightbox (referenca, vest) — semantički <button>,
   vizuelno identičan običnom medijskom bloku. */
.lb-trigger{
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:var(--bg-alt);
  cursor:zoom-in;
  text-align:left;
}
.lb-trigger:focus-visible{ outline:2px solid var(--elmiss-red); outline-offset:-2px; }

/* Kartica reference (Electrolux obrazac) */
.ref-card{
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  text-decoration:none;
  transition:box-shadow 240ms var(--ease), border-color 240ms var(--ease);
}
.ref-card:hover{ box-shadow:var(--shadow-md); border-color:var(--line-strong); }
.ref-card__media{ position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--bg-alt); }
.ref-card__media > img{ transition:transform 500ms var(--ease); width:100%; height:100%; object-fit:cover; }
.ref-card:hover .ref-card__media > img{ transform:scale(1.03); }
.ref-card__body{ padding:1.15rem 1.25rem 1.35rem; display:flex; flex-direction:column; flex:1; gap:.5rem; }
.ref-card__loc{ font-size:.8125rem; color:var(--text-muted); }
.ref-card__body h3{ margin:0; transition:color 200ms var(--ease); }
.ref-card:hover .ref-card__body h3{ color:var(--elmiss-red); }
.ref-card__body p{ font-size:.9375rem; color:var(--text-muted); margin:0; }
.ref-card__body .arrow-link{ margin-top:auto; padding-top:.35rem; font-size:.875rem; }

/* Kartica vesti */
.news-card{
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  text-decoration:none;
  transition:box-shadow 240ms var(--ease), border-color 240ms var(--ease);
}
.news-card:hover{ box-shadow:var(--shadow-md); border-color:var(--line-strong); }
.news-card__media{ aspect-ratio:16/9; overflow:hidden; background:var(--bg-alt); }
.news-card__media > img{ width:100%; height:100%; object-fit:cover; transition:transform 500ms var(--ease); }
.news-card:hover .news-card__media > img{ transform:scale(1.03); }
.news-card__body{ padding:1.15rem 1.25rem 1.35rem; flex:1; display:flex; flex-direction:column; }
.news-card time{ font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
.news-card h3{ margin:.5rem 0 .4rem; transition:color 200ms var(--ease); }
.news-card:hover h3{ color:var(--elmiss-red); }
.news-card p{ font-size:.9375rem; color:var(--text-muted); margin:0 0 1rem; }
.news-card .arrow-link{ margin-top:auto; font-size:.875rem; }

/* ---------- 13 SPLIT SEKCIJE, KORACI, BROJKE ---------------------------- */
.split{ display:grid; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
/* `min-width:0` sprečava da široko dete (tabela, mapa) razvuče kolonu mreže. */
.split__media,
.split__body{ min-width:0; }
/* Kolone poravnate uz vrh — koristi se tamo gde su bitno različite visine
   (kontakt: podaci + mapa naspram forme). */
.split--top{ align-items:start; }
@media (min-width:900px){
  .split{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .split--reverse .split__media{ order:2; }
  .split--wide-media{ grid-template-columns:1.15fr 1fr; }
}
.split__media{ position:relative; }
.split__body h2{ margin-bottom:.75rem; }

/* Numerisani koraci "Ključ u ruke" */
.steps{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
@media (min-width:640px){ .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1000px){ .steps{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.step{ background:#fff; padding:1.5rem 1.35rem; }
.step__num{
  display:block;
  font-size:1.5rem; font-weight:700; line-height:1;
  color:var(--elmiss-red);
  font-variant-numeric:tabular-nums;
  margin-bottom:.85rem;
}
.step h3{ margin-bottom:.4rem; }
.step p{ font-size:.9375rem; color:var(--text-muted); margin:0; }

/* Proizvodne mogućnosti / usluge — mala lista sa ikonom */
.feature-list{ margin:0; padding:0; list-style:none; display:grid; gap:.9rem; }
.feature-list li{ display:flex; gap:.75rem; align-items:flex-start; font-size:.9375rem; }
.feature-list svg{ width:18px; height:18px; flex:none; margin-top:.25rem; color:var(--elmiss-red); }
.feature-list a{
  color:var(--text); font-weight:500; text-decoration:none;
  transition:color 180ms var(--ease);
}
.feature-list a:hover{ color:var(--elmiss-red); }

/* Brojke */
.stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
@media (min-width:900px){ .stats{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.stat{ background:#fff; padding:1.75rem 1.35rem; text-align:left; }
.stat__val{
  display:block;
  font-size:clamp(2rem,4vw,2.75rem); font-weight:700; line-height:1;
  color:var(--elmiss-red);
  font-variant-numeric:tabular-nums;
  margin-bottom:.5rem;
}
.stat__lbl{ font-size:.9375rem; color:var(--text-body); }

/* Sertifikati */
.certs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
@media (min-width:768px){ .certs{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.cert{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem;
  min-height:120px; padding:1.25rem 1rem;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  text-align:center;
}
.cert svg{ width:28px; height:28px; color:var(--elmiss-red); }
.cert strong{ font-size:.9375rem; font-weight:600; color:var(--text); }
.cert span{ font-size:.75rem; color:var(--text-muted); }

/* ---------- 14 TABELA SPECIFIKACIJA ------------------------------------- */
.table-wrap{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:#fff;
}
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-wrap::after{
  content:"";
  position:absolute; top:0; right:0; bottom:0; width:36px;
  background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,.95));
  pointer-events:none;
}
@media (min-width:900px){ .table-wrap::after{ display:none; } }

table.spec{
  width:100%;
  border-collapse:collapse;
  font-size:.9375rem;
  min-width:520px;
}
table.spec th,
table.spec td{
  padding:.8rem 1rem;
  text-align:left;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
table.spec thead th{
  background:var(--bg-alt);
  font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.07em;
  color:var(--text-muted);
}
table.spec tbody tr:nth-child(even){ background:var(--bg-alt); }
table.spec tbody tr:last-child td{ border-bottom:0; }
table.spec td:first-child{ font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; }
table.spec td{ font-variant-numeric:tabular-nums; }

/* Kompaktna uporedna tabela (serije 700/900) */
table.compare{ width:100%; border-collapse:collapse; font-size:.9375rem; }
table.compare th,table.compare td{ padding:.7rem .85rem; text-align:left; border-bottom:1px solid var(--line); }
table.compare thead th{ font-size:.75rem; text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted); font-weight:600; }
table.compare tbody th{ font-weight:600; color:var(--text); }
table.compare tbody tr:last-child td,table.compare tbody tr:last-child th{ border-bottom:0; }

/* ---------- 15 KATALOG --------------------------------------------------- */
.catalog{ display:grid; gap:clamp(1.5rem,3vw,2.5rem); align-items:start; }
@media (min-width:1000px){
  .catalog{ grid-template-columns:264px minmax(0,1fr); }
}

/* Leva kolona kategorija (Contessa obrazac) */
.rail{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  overflow:hidden;
}
@media (min-width:1000px){
  .rail{ position:sticky; top:calc(var(--header-h) + 20px); }
}
.rail__head{
  padding:.85rem 1.1rem;
  background:var(--bg-alt);
  border-bottom:1px solid var(--line);
  font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.09em;
  color:var(--text-muted);
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  width:100%;
}
.rail__head svg{ width:16px; height:16px; transition:transform 200ms var(--ease); }
.rail__toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
@media (min-width:1000px){ .rail__toggle{ pointer-events:none; } .rail__toggle svg{ display:none; } }

.rail__body{ padding:.5rem; }
@media (max-width:999px){
  .rail__body{ display:none; }
  .rail__body.is-open{ display:block; }
}
.rail__list{ margin:0; padding:0; list-style:none; }
.rail__group{
  padding:.85rem .6rem .35rem;
  font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.09em;
  color:var(--text-muted);
}
.rail__link{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  width:100%;
  padding:.6rem .65rem;
  border-radius:8px;
  font-size:.9375rem; font-weight:500; color:var(--text-body);
  text-decoration:none; text-align:left;
  transition:background-color 160ms var(--ease), color 160ms var(--ease);
}
.rail__link:hover{ background:var(--bg-alt); color:var(--text); }
.rail__link.is-active{ background:var(--elmiss-red-050); color:var(--elmiss-red-700); font-weight:600; }
.rail__count{ font-size:.75rem; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.rail__link.is-active .rail__count{ color:var(--elmiss-red-700); }
.rail__sub{ margin:.15rem 0 .35rem; padding:0 0 0 .65rem; list-style:none; border-left:1px solid var(--line); }
.rail__sub a,
.rail__sub button{
  display:block; width:100%; padding:.4rem .65rem; border-radius:8px;
  font-size:.875rem; color:var(--text-muted); text-decoration:none; text-align:left;
  transition:color 160ms var(--ease);
}
.rail__sub a:hover,
.rail__sub button:hover{ color:var(--elmiss-red); }
.rail__sub a.is-active,
.rail__sub button.is-active{ color:var(--elmiss-red); font-weight:600; }

/* Pretraga */
.searchbar{ position:relative; margin-bottom:1.25rem; }
.searchbar svg{
  position:absolute; left:.15rem; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:var(--text-muted); pointer-events:none;
}
.searchbar input{
  width:100%;
  padding:.85rem .85rem .85rem 1.85rem;
  border:0; border-bottom:1px solid var(--line-strong);
  background:transparent;
  font-size:1.0625rem; color:var(--text);
  border-radius:0;
  transition:border-color 200ms var(--ease);
}
.searchbar input::placeholder{ color:var(--text-muted); }
.searchbar input:focus{ border-bottom-color:var(--elmiss-red); outline:none; }
.searchbar input:focus-visible{ outline:none; }
.searchbar__clear{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:36px; height:36px; display:none; align-items:center; justify-content:center;
  color:var(--text-muted); border-radius:999px;
}
.searchbar__clear.is-visible{ display:inline-flex; }
.searchbar__clear:hover{ color:var(--elmiss-red); background:var(--bg-alt); }
.searchbar__clear svg{ position:static; transform:none; width:16px; height:16px; }

/* Alatna traka rezultata */
.toolbar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem;
  margin-bottom:1.25rem;
}
.toolbar__count{ font-size:.875rem; color:var(--text-muted); }
.toolbar__count strong{ color:var(--text); font-variant-numeric:tabular-nums; }
.sortbox{ display:flex; align-items:center; gap:.5rem; font-size:.875rem; color:var(--text-muted); }
.sortbox select{
  padding:.5rem 2rem .5rem .75rem;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-btn);
  background:#fff url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23727C85' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right .75rem center;
  -webkit-appearance:none; appearance:none;
  font-size:.875rem; color:var(--text); cursor:pointer;
}

/* Podkategorijski čipovi */
.subchips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.25rem; }
.subchips button{
  padding:.45rem .9rem;
  border-radius:var(--radius-btn);
  border:1px solid var(--line-strong);
  background:#fff;
  font-size:.8125rem; font-weight:500; color:var(--text-body);
  transition:all 180ms var(--ease);
}
.subchips button:hover{ border-color:var(--text-muted); }
.subchips button.is-active{ background:var(--elmiss-red); border-color:var(--elmiss-red); color:#fff; font-weight:600; }

/* Aktivni filteri */
.active-filters{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-bottom:1rem; }
.filter-tag{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .5rem .35rem .75rem;
  border-radius:var(--radius-btn);
  background:var(--bg-alt); border:1px solid var(--line);
  font-size:.8125rem; color:var(--text-body);
}
.filter-tag button{ display:inline-flex; width:20px; height:20px; align-items:center; justify-content:center; border-radius:999px; color:var(--text-muted); }
.filter-tag button:hover{ background:var(--line); color:var(--elmiss-red); }
.filter-tag svg{ width:12px; height:12px; }

/* Prazno stanje */
.empty{
  border:1px dashed var(--line-strong);
  border-radius:var(--radius);
  padding:clamp(2rem,5vw,3.5rem) 1.5rem;
  text-align:center;
  background:var(--bg-alt);
}
.empty svg{ width:36px; height:36px; color:var(--line-strong); margin:0 auto 1rem; }
.empty h3{ margin-bottom:.35rem; }
.empty p{ color:var(--text-muted); margin-bottom:1.25rem; }

.noscript-note{
  padding:1rem 1.25rem;
  border:1px solid var(--line-strong);
  border-left:3px solid var(--elmiss-red);
  border-radius:var(--radius);
  background:var(--bg-alt);
  font-size:.9375rem;
  margin-bottom:1.5rem;
}

/* ---------- 16 STRANICA PROIZVODA --------------------------------------- */
.pdp{ display:grid; gap:clamp(1.75rem,4vw,3rem); align-items:start; }
@media (min-width:900px){ .pdp{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); } }

.gallery__main{
  position:relative;
  aspect-ratio:4/3;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--bg-alt);
}
.gallery__main > img{ width:100%; height:100%; transition:transform 500ms var(--ease); }
.gallery__main img{ object-fit:cover; }
.gallery__main:hover > img{ transform:scale(1.03); }

/* Glavna slika otvara lightbox — kursor i diskretan znak lupe to najavljuju. */
.gallery__main--zoomable{ cursor:zoom-in; }
.gallery__zoom{
  position:absolute; right:.85rem; bottom:.85rem;
  width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  color:var(--text);
  opacity:0; transform:translateY(6px);
  transition:opacity 200ms var(--ease), transform 200ms var(--ease), color 200ms var(--ease);
  pointer-events:none;
  z-index:2;
}
.gallery__zoom svg{ width:19px; height:19px; }
.gallery__main--zoomable:hover .gallery__zoom,
.gallery__main--zoomable:focus-visible .gallery__zoom{ opacity:1; transform:none; color:var(--elmiss-red); }
/* Na dodirnim ekranima nema hovera — znak je stalno vidljiv. */
@media (hover:none){
  .gallery__zoom{ opacity:1; transform:none; }
}
.gallery__thumbs{ display:flex; gap:.6rem; margin-top:.75rem; flex-wrap:wrap; }
.gallery__thumb{
  width:76px; height:60px;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  background:var(--bg-alt);
  padding:0;
  transition:border-color 180ms var(--ease);
}
.gallery__thumb > img{ width:100%; height:100%; }
.gallery__thumb img{ object-fit:cover; }
.gallery__thumb:hover{ border-color:var(--line-strong); }
.gallery__thumb[aria-current="true"]{ border-color:var(--elmiss-red); box-shadow:0 0 0 1px var(--elmiss-red); }

.pdp__info h1{ margin-bottom:.4rem; }
.pdp__model{ font-size:.9375rem; color:var(--text-muted); margin-bottom:1.1rem; font-variant-numeric:tabular-nums; }
.pdp__short{ color:var(--text-body); margin-bottom:1.5rem; }

.keyspecs{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden;
  margin-bottom:1.5rem;
}
.keyspec{ background:#fff; padding:.9rem 1rem; }
.keyspec dt{ font-size:.6875rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin-bottom:.25rem; }
.keyspec dd{ margin:0; font-size:.9375rem; font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; }

.pdp__note{
  margin-top:1.25rem; padding-top:1.25rem;
  border-top:1px solid var(--line);
  font-size:.875rem; color:var(--text-muted);
}
.pdp__note a{ color:var(--text); font-weight:600; text-decoration:none; }
.pdp__note a:hover{ color:var(--elmiss-red); }

/* ---------- 17 FORME ----------------------------------------------------- */
.form{ display:grid; gap:1.1rem; }
.field{ display:grid; gap:.35rem; }
.field label{ font-size:.875rem; font-weight:600; color:var(--text); }
.field .req{ color:var(--elmiss-red); }
.field input,
.field select,
.field textarea{
  width:100%;
  min-height:48px;
  padding:.7rem .9rem;
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  background:#fff;
  font-size:1rem; color:var(--text);
  transition:border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.field textarea{ min-height:130px; resize:vertical; line-height:1.6; }
.field select{
  -webkit-appearance:none; appearance:none;
  background:#fff url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23727C85' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 1rem center;
  padding-right:2.5rem;
  cursor:pointer;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--elmiss-red);
  box-shadow:0 0 0 3px var(--elmiss-red-050);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible{ outline:none; }
.field .help{ font-size:.8125rem; color:var(--text-muted); }
.field .error{
  display:none;
  align-items:center; gap:.35rem;
  font-size:.8125rem; font-weight:500; color:var(--elmiss-red-700);
}
.field .error svg{ width:14px; height:14px; flex:none; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea{ border-color:var(--elmiss-red); }
.field.has-error .error{ display:flex; }

.field-row{ display:grid; gap:1.1rem; }
@media (min-width:600px){ .field-row{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.checkfield{ display:flex; flex-wrap:wrap; gap:.7rem; align-items:flex-start; }
.checkfield .error{ width:100%; }
.checkfield input[type="checkbox"]{
  width:24px; height:24px; min-height:0; flex:none; margin-top:.1rem;
  accent-color:var(--elmiss-red);
  cursor:pointer;
}
/* Ceo tekst uz polje je kliktabilan (label[for]) — dodirna meta je znatno
   veća od samog kvadratića i prelazi 44px po visini. */
.checkfield label{
  font-size:.875rem; font-weight:400; color:var(--text-body); line-height:1.55;
  min-height:44px;
  display:flex; align-items:center;
  cursor:pointer;
  flex:1 1 260px;
}
.checkfield.has-error label{ color:var(--elmiss-red-700); }

.form-status{ display:none; }
.form-status.is-visible{ display:block; }
.form-success{
  padding:1.5rem;
  border:1px solid var(--line);
  border-left:3px solid var(--elmiss-red);
  border-radius:var(--radius);
  background:var(--bg-alt);
}
.form-success h3{ display:flex; align-items:center; gap:.6rem; margin-bottom:.5rem; }
.form-success svg{ width:22px; height:22px; color:var(--elmiss-red); flex:none; }

.error-summary{
  display:none;
  padding:1rem 1.25rem;
  border:1px solid var(--elmiss-red);
  border-radius:var(--radius);
  background:var(--elmiss-red-050);
  font-size:.9375rem;
}
.error-summary.is-visible{ display:block; }
.error-summary ul{ margin:.5rem 0 0; padding-left:1.1rem; }
.error-summary a{ color:var(--elmiss-red-700); }

/* Kontakt blok */
.contact-list{ margin:0; padding:0; list-style:none; display:grid; gap:1.25rem; }
.contact-list li{ display:flex; gap:.85rem; align-items:flex-start; }
.contact-list svg{ width:20px; height:20px; flex:none; margin-top:.2rem; color:var(--elmiss-red); }
.contact-list dt,
.contact-list strong{ display:block; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); font-weight:600; margin-bottom:.15rem; }
/* Svaki kontakt (telefon, mejl) ide u zaseban red. */
.contact-list a{
  display:block;
  padding:.1rem 0;
  color:var(--text); text-decoration:none; font-weight:500;
  transition:color 180ms var(--ease);
}
.contact-list a:hover{ color:var(--elmiss-red); }

/* Visina se zadaje eksplicitno. `aspect-ratio` uz `min-height` davao je
   elementu sopstvenu širinu (380 × 16/11 = 553px) i razvlačio kolonu mreže
   preko širine ekrana na mobilnom. */
.map-frame{
  position:relative;
  width:100%;
  height:clamp(380px, 34vw, 460px);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--bg-alt);
}
.map-note{
  display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .75rem;
  margin-top:.75rem;
  font-size:.875rem; color:var(--text-muted);
}
.map-note svg{ width:16px; height:16px; flex:none; color:var(--elmiss-red); }
.map-note a{ color:var(--text); font-weight:600; text-decoration:none; }
.map-note a:hover{ color:var(--elmiss-red); }
.map-frame iframe{
  position:relative; z-index:1;
  width:100%; height:100%; border:0; display:block;
}
/* Vidljivo ispod mape — ostaje kao sadržaj ako se mapa ne učita
   (blokirani kolačići, offline, restriktivna mrežna politika). */
.map-fallback{
  position:absolute; inset:0; z-index:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; padding:1.5rem;
  text-align:center; text-decoration:none;
  color:var(--text-body);
}
.map-fallback svg{ width:26px; height:26px; color:var(--elmiss-red); }
.map-fallback strong{ color:var(--text); font-weight:600; }
.map-fallback span{ font-size:.875rem; color:var(--text-muted); }

/* ---------- 18 FAQ / AKORDEON -------------------------------------------- */
.faq{ border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  width:100%;
  padding:1.15rem 0;
  font-size:1.0625rem; font-weight:600; color:var(--text); text-align:left;
}
.faq__q svg{ width:18px; height:18px; flex:none; color:var(--text-muted); transition:transform 220ms var(--ease); }
.faq__q[aria-expanded="true"]{ color:var(--elmiss-red); }
.faq__q[aria-expanded="true"] svg{ transform:rotate(45deg); color:var(--elmiss-red); }
/* Odgovori su podrazumevano otvoreni; JS ih sklapa tek kada preuzme kontrolu,
   tako da su bez JavaScript-a sva pitanja i odgovori vidljivi. */
.faq__a{ display:block; padding-bottom:1.25rem; color:var(--text-body); max-width:70ch; }
.faq--js .faq__a{ display:none; }
.faq--js .faq__a.is-open{ display:block; }

/* ---------- 19 CTA TRAKA I FOOTER ---------------------------------------- */
/* Jedina tamna sekcija u toku stranice */
.cta-band{ background:var(--bg-dark); color:var(--text-invert); }
.cta-band__inner{
  display:grid; gap:1.5rem;
  padding-block:clamp(2.5rem,5.5vw,4rem);
  align-items:center;
}
@media (min-width:900px){
  .cta-band__inner{ grid-template-columns:minmax(0,1fr) auto; gap:3rem; }
}
.cta-band h2{ color:#fff; margin-bottom:.5rem; }
.cta-band p{ color:rgba(242,244,245,.72); max-width:52ch; margin:0; }
.cta-band__actions{ display:flex; flex-wrap:wrap; gap:.75rem; }
.cta-band .micro{ color:#F1888C; }

.footer{ background:var(--bg-dark); color:rgba(242,244,245,.72); font-size:.9375rem; }
.footer a{ color:rgba(242,244,245,.72); text-decoration:none; transition:color 180ms var(--ease); }
.footer a:hover{ color:#fff; }
.footer__top{
  display:grid; gap:2rem;
  padding-block:clamp(2.5rem,5vw,3.75rem);
  border-top:1px solid rgba(255,255,255,.08);
}
@media (min-width:700px){ .footer__top{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1000px){ .footer__top{ grid-template-columns:1.3fr repeat(4,minmax(0,1fr)); gap:2.5rem; } }

.footer__brand img{ height:38px; width:auto; margin-bottom:1rem; }
.footer__brand p{ font-size:.9375rem; max-width:34ch; margin:0; }
.footer__col h3{
  font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.09em;
  color:#fff; margin-bottom:1rem;
}
.footer__col ul{ margin:0; padding:0; list-style:none; display:grid; gap:.55rem; }
.footer__col address{ font-style:normal; display:grid; gap:.55rem; }
.footer__bottom{
  display:flex; flex-wrap:wrap; gap:.5rem 1.25rem;
  justify-content:space-between; align-items:center;
  padding-block:1.25rem;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:.8125rem;
  color:rgba(242,244,245,.55);
}
.footer__legal{ display:flex; flex-wrap:wrap; gap:.4rem .75rem; }
.footer__legal span{ opacity:.4; }

/* Prostor da plutajuća dugmad ne prekriju poslednji red footera na mobilnom */
@media (max-width:767px){
  .footer__bottom{ padding-bottom:5rem; }
}

/* ---------- 20 PLUTAJUĆE AKCIJE (desno dole) ----------------------------- */
.floats{
  position:fixed;
  right:12px;
  bottom:calc(12px + env(safe-area-inset-bottom,0px));
  z-index:var(--z-float);
  display:flex; flex-direction:column; gap:.5rem;
}
@media (min-width:768px){ .floats{ right:20px; bottom:calc(20px + env(safe-area-inset-bottom,0px)); } }

.float-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  color:var(--text);
  box-shadow:var(--shadow-md);
  text-decoration:none;
  transition:color 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease);
}
.float-btn:hover{ color:var(--elmiss-red); border-color:var(--elmiss-red); }
.float-btn:active{ transform:scale(.94); }
.float-btn svg{ width:20px; height:20px; }
.float-btn--top{ opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity 220ms var(--ease), transform 220ms var(--ease), visibility 220ms, color 180ms var(--ease), border-color 180ms var(--ease); }
.float-btn--top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }

/* ---------- 21 AI ASISTENT (levo dole) ----------------------------------- */
.assistant{
  position:fixed;
  left:12px;
  bottom:calc(12px + env(safe-area-inset-bottom,0px));
  z-index:var(--z-float);
}
@media (min-width:768px){ .assistant{ left:20px; bottom:calc(20px + env(safe-area-inset-bottom,0px)); } }

.assistant__launcher{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-md);
  color:var(--text);
  transition:color 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease);
}
.assistant__launcher:hover{ color:var(--elmiss-red); border-color:var(--elmiss-red); }
.assistant__launcher:active{ transform:scale(.94); }
.assistant__launcher svg{ width:24px; height:24px; }
.assistant.is-open .assistant__launcher{ color:var(--elmiss-red); border-color:var(--elmiss-red); }

/* Diskretan jednokratni puls pri prvom učitavanju */
.assistant__launcher.pulse-once::after{
  content:"";
  position:absolute; inset:-1px;
  border-radius:999px;
  border:1px solid var(--elmiss-red);
  animation:pulse-ring 2.2s var(--ease) 2;
  pointer-events:none;
}
.assistant__launcher{ position:relative; }
@keyframes pulse-ring{
  0%{ opacity:.7; transform:scale(1); }
  70%{ opacity:0; transform:scale(1.45); }
  100%{ opacity:0; transform:scale(1.45); }
}

.assistant__panel{
  position:absolute;
  left:0; bottom:calc(100% + .6rem);
  width:min(360px,calc(100vw - 24px));
  height:min(520px,calc(100vh - 140px));
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  opacity:0; visibility:hidden; transform:translateY(10px) scale(.985);
  transform-origin:bottom left;
  transition:opacity 240ms var(--ease), transform 240ms var(--ease), visibility 240ms;
}
.assistant.is-open .assistant__panel{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }

@media (max-width:560px){
  .assistant__panel{
    position:fixed;
    left:8px; right:8px; bottom:76px;
    width:auto;
    height:min(72vh,520px);
  }
}

.assistant__head{
  flex:none;
  padding:.9rem 1rem;
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  position:relative;
}
.assistant__head::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--elmiss-red);
}
.assistant__head img{ height:24px; width:auto; }
.assistant__head-txt{ display:flex; flex-direction:column; line-height:1.25; }
.assistant__head-txt strong{ font-size:.875rem; color:var(--text); }
.assistant__head-txt span{ font-size:.6875rem; color:var(--text-muted); }
.assistant__close{
  width:34px; height:34px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--text-muted);
}
.assistant__close:hover{ background:var(--bg-alt); color:var(--elmiss-red); }
.assistant__close svg{ width:16px; height:16px; }

.assistant__log{
  flex:1 1 auto;
  overflow-y:auto;
  padding:1rem;
  display:flex; flex-direction:column; gap:.7rem;
  background:var(--bg-alt);
  -webkit-overflow-scrolling:touch;
}
.msg{
  max-width:85%;
  padding:.65rem .85rem;
  border-radius:14px;
  font-size:.875rem; line-height:1.55;
}
.msg--bot{ align-self:flex-start; background:#fff; border:1px solid var(--line); color:var(--text-body); border-bottom-left-radius:4px; }
.msg--user{ align-self:flex-end; background:var(--elmiss-red); color:#fff; border-bottom-right-radius:4px; }
.msg a{ color:var(--elmiss-red); font-weight:600; }
.msg--user a{ color:#fff; }

.typing{ display:inline-flex; gap:.25rem; align-items:center; padding:.75rem .85rem; }
.typing span{
  width:6px; height:6px; border-radius:999px; background:var(--line-strong);
  animation:typing-bounce 1.2s infinite ease-in-out;
}
.typing span:nth-child(2){ animation-delay:.15s; }
.typing span:nth-child(3){ animation-delay:.3s; }
@keyframes typing-bounce{
  0%,60%,100%{ transform:translateY(0); opacity:.55; }
  30%{ transform:translateY(-4px); opacity:1; }
}

.assistant__quick{
  flex:none;
  display:flex; gap:.4rem;
  padding:.6rem .75rem;
  background:#fff;
  border-top:1px solid var(--line);
  overflow-x:auto;
  scrollbar-width:none;
}
.assistant__quick::-webkit-scrollbar{ display:none; }
.assistant__quick button{
  flex:none;
  padding:.4rem .75rem;
  border:1px solid var(--line-strong);
  border-radius:999px;
  font-size:.8125rem; font-weight:500; color:var(--text-body);
  white-space:nowrap;
  transition:all 160ms var(--ease);
}
.assistant__quick button:hover{ border-color:var(--elmiss-red); color:var(--elmiss-red); }

.assistant__form{
  flex:none;
  display:flex; gap:.5rem; align-items:center;
  padding:.65rem .75rem calc(.65rem + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line);
  background:#fff;
}
.assistant__form input{
  flex:1 1 auto;
  min-width:0;
  padding:.6rem .85rem;
  border:1px solid var(--line-strong);
  border-radius:999px;
  font-size:.875rem;
  background:#fff;
}
.assistant__form input:focus{ outline:none; border-color:var(--elmiss-red); }
.assistant__send{
  flex:none;
  width:38px; height:38px;
  border-radius:999px;
  background:var(--elmiss-red); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background-color 180ms var(--ease);
}
.assistant__send:hover{ background:var(--elmiss-red-700); }
.assistant__send svg{ width:16px; height:16px; }

/* ---------- 21b LIGHTBOX (galerija slika) --------------------------------- */
.lb{
  position:fixed; inset:0;
  z-index:var(--z-drawer);
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  transition:opacity 180ms var(--ease);
}
.lb.is-open{ opacity:1; transition-duration:260ms; }

.lb__backdrop{
  position:absolute; inset:0;
  background:rgba(15,18,20,.88);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  cursor:zoom-out;
}

.lb__ui{
  position:relative;
  z-index:1;
  width:100%; height:100%;
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding:.75rem;
  gap:.5rem;
}

.lb__bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.25rem .25rem .25rem .75rem;
}
.lb__count{
  font-size:.8125rem; font-weight:600; letter-spacing:.06em;
  color:rgba(242,244,245,.75);
}

.lb__btn,
.lb__nav{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:#fff;
  transition:background-color 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
}
.lb__btn:hover,
.lb__nav:hover{ background:var(--elmiss-red); border-color:var(--elmiss-red); }
.lb__btn:active,
.lb__nav:active{ transform:scale(.94); }
.lb__btn svg,
.lb__nav svg{ width:20px; height:20px; }
.lb__btn:focus-visible,
.lb__nav:focus-visible,
.lb__thumb:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

.lb__nav{
  position:absolute; top:50%;
  transform:translateY(-50%);
  z-index:2;
}
.lb__nav--prev{ left:.75rem; }
.lb__nav--next{ right:.75rem; }
.lb__nav:active{ transform:translateY(-50%) scale(.94); }

.lb__stage{
  margin:0;
  min-height:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.85rem;
  padding-inline:3.5rem;
}
/* Otvaranje je nešto duže od zatvaranja — izlaz mora da deluje odzivno. */
.lb__stage.is-in{ animation:lb-in 320ms var(--ease) both; }
@keyframes lb-in{
  from{ opacity:0; transform:scale(.94) translateY(8px); }
  to{ opacity:1; transform:none; }
}
.lb__img{
  max-width:100%;
  max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  border-radius:var(--radius);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  background:var(--bg-alt);
}
.lb__cap{
  font-size:.875rem;
  color:rgba(242,244,245,.82);
  text-align:center;
  max-width:60ch;
}

.lb__thumbs{
  display:flex; gap:.5rem;
  justify-content:center;
  overflow-x:auto;
  padding:.25rem;
  scrollbar-width:none;
}
.lb__thumbs::-webkit-scrollbar{ display:none; }
.lb__thumb{
  flex:none;
  width:72px; height:52px;
  border-radius:8px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.2);
  opacity:.5;
  transition:opacity 200ms var(--ease), border-color 200ms var(--ease),
             box-shadow 200ms var(--ease), transform 200ms var(--ease);
}
.lb__thumb img{ width:100%; height:100%; object-fit:cover; }
.lb__thumb:hover{ opacity:.9; transform:translateY(-2px); }
.lb__thumb[aria-selected="true"]{
  opacity:1;
  border-color:var(--elmiss-red);
  box-shadow:0 0 0 2px var(--elmiss-red), 0 6px 16px rgba(0,0,0,.35);
}

@media (max-width:640px){
  .lb__stage{ padding-inline:0; }
  .lb__nav{ top:auto; bottom:.5rem; transform:none; }
  .lb__nav:active{ transform:scale(.94); }
  .lb__nav--prev{ left:1rem; }
  .lb__nav--next{ right:1rem; }
  .lb__thumbs{ justify-content:flex-start; }
}

/* ---------- 22 REVEAL ANIMACIJE ------------------------------------------
   Skriveno početno stanje važi SAMO uz html.reveal-on koji JS dodaje.
   Bez JS-a (ili uz prefers-reduced-motion) sve je vidljivo od starta.      */
html.reveal-on .reveal{
  opacity:0;
  transform:translateY(12px);
}
html.reveal-on .reveal.is-in{
  opacity:1;
  transform:none;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* Stepenasti ulazak unutar jedne mreže. `--stagger` postavlja JS na osnovu
   redosleda kartice u svom kontejneru; `data-delay` je stariji, statički
   put i i dalje radi. */
html.reveal-on .reveal.is-in{ transition-delay:calc(var(--stagger,0) * 70ms); }
html.reveal-on .reveal[data-delay="1"].is-in{ transition-delay:70ms; }
html.reveal-on .reveal[data-delay="2"].is-in{ transition-delay:140ms; }
html.reveal-on .reveal[data-delay="3"].is-in{ transition-delay:210ms; }
html.reveal-on .reveal[data-delay="4"].is-in{ transition-delay:280ms; }

/* Zaglavlje sekcije kreće malo ranije od sadržaja koji uvodi. */
html.reveal-on .reveal--head{ transform:translateY(8px); }
html.reveal-on .reveal--head.is-in{ transition-delay:0ms; }

/* --- Postepeno pojavljivanje fotografija dok se učitavaju ----------------
   Klasu `img-fade` dodaje JS; bez njega su slike vidljive od prvog frejma. */
html.img-fade img[data-fade]{ opacity:0; }
html.img-fade img[data-fade].is-loaded{
  opacity:1;
  transition:opacity 420ms var(--ease);
}

/* ---------- 23 POMOĆNE KLASE --------------------------------------------- */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.hidden{ display:none !important; }
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.mt-2{ margin-top:1.25rem; }
.mt-3{ margin-top:2rem; }
.mb-0{ margin-bottom:0; }
.divider{ height:1px; background:var(--line); border:0; }

/* Poštovanje korisničke postavke za smanjeno kretanje */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .hero__figure img{ transition:none; }
  /* Ken Burns i traka napretka se potpuno gase, a ne samo ubrzavaju. */
  .hero__figure img.is-active{ animation:none; transform:none; }
  .hero__dot::after{ animation:none !important; }
  .hero__dot[aria-current="true"]::after{ transform:translateY(-50%) scaleX(1); }
  .hero__slide.is-active > *{ animation:none; }
  .lb__stage{ animation:none !important; }
  /* Lukovi ostaju vidljivi, ali bez ulaska i bez parallax pomeraja. */
  .hero-arcs svg{ animation:none !important; opacity:1; transform:none; }
  .hero-arcs__l,
  .hero-arcs__r{ translate:none; }
  .btn:active{ transform:none; }
  .lb__thumb:hover{ transform:none; }
  html.img-fade img[data-fade]{ opacity:1; }
}

@media print{
  .utility,.header,.drawer,.floats,.assistant,.cta-band,.segments,
  .scroll-progress,.hero-arcs{ display:none !important; }
  body{ color:#000; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.8em; }
}