@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700&family=Archivo:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ==========================================================================
   DJECJA MOZGALICA — vizualni sloj
   Pisano od nule 7.9.2026. iz odobrenog koncepta v6 (izrez6/style.css).

   NACELA
   1. Koncept je specifikacija. Vrijednosti se prepisuju, ne izmisljaju.
   2. Ova datoteka se ucitava ZADNJA. style.css i media_queries.css se ne
      diraju — u njima je 73% strojarije CMS-a, ukljucujuci 80 pravila za
      widget pristupacnosti.
   3. Selektori su oni koje CMS stvarno ispisuje: .seg-* > article.
      print_content.php daje goli <article> bez klase.
   4. Sve sto mijenja raspored zaglavlja zatvoreno je u @media(min-width:801px)
      jer ispod toga radi slicknav (burger) iz originalnog CSS-a.
   5. NIKAD se ne oslanjati na inline stil iz JS-a — sigurnosna politika
      stranice blokira style-src bez unsafe-inline (izmjereno: postavljeno
      166px, izracunato 0px). Sve stanje ide preko klase ili atributa.
   6. .wrapper je display:table pa se siri do najsireg sadrzaja. Elementi
      koji mogu biti siri od prozora dobivaju apsolutnu sirinu vezanu uz
      prozor: min(1220px, calc(100vw - 52px)).
   ========================================================================== */

/* ============================================================ 1. TOKENI */

:root{
  --tinta:#1E2630;
  --tinta-80:rgba(30,38,48,.80);
  --tinta-60:rgba(30,38,48,.60);
  --papir:#FBF8F3;
  --bijela:#FFFFFF;
  --crvena:#C8574F;
  --crvena-tamna:#A8443D;
  --plava:#1F5F9E;
  --plava-tamna:#123A5C;
  --zuta:#FFC93C;
  --menta:#F6E4CF;
  --breskva:#FFCDA0;
  --lavanda:#D9D5F4;
  --nebo:#C4E3F2;
  --linija:rgba(30,38,48,.14);
  --linija-svijetla:rgba(255,255,255,.16);
  --sjena:0 18px 50px rgba(30,38,48,.10);
  --sjena-jaka:0 26px 70px rgba(30,38,48,.18);
  --r:18px;
  --maxw:1220px;
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-ui:'Archivo',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'Courier New',monospace;
}

/* ====================================================== 2. OSNOVNI SLOG
   style.css redak 32 postavlja Quicksand na popis elemenata. Isti popis,
   ista tezina selektora, kasnija datoteka — pobjedjuje. Mijenja se samo
   obitelj pisma; velicine ostaju CMS-ove osim tamo gdje segment kaze svoje. */

div, span, p, em, a, time, tr, th, td, dt, dd, label, input, select,
button, textarea, option, iframe, ul, li, font, h1, h2, h3, h4, h5, h6{
  font-family:var(--font-ui);
}
h1, h2, h3, h4, h5, h6{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.01em;
}
body{background:var(--papir);color:var(--tinta)}

/* ---------------------------------------------------------------------
   JEDNO PRAVILO ZA PISMO I OZNACAVANJE BOJE
   ---------------------------------------------------------------------
   Uzrok svih razlika u velicini slova: style.css redak 32 postavlja
   `div, span, p, em, a, ... { font-size:18px }`. Zato je span UNUTAR
   naslova ispadao 18px dok je naslov bio 28-42px — izmjereno na svih
   osam glava segmenata.

   Pravilo koje od sada vrijedi svugdje, bez iznimke:

     1. Sve unutar naslova NASLJEDUJE naslov — velicinu, obitelj, tezinu,
        prored, razmak. Nista unutar naslova ne smije imati svoju velicinu.
     2. Boja se oznacava ISKLJUCIVO klasama .crv (crvena) i .plv (plava).
        One mijenjaju SAMO boju i nista drugo.
     3. Na tamnoj podlozi iste klase dobivaju svijetle parnjake.

   Ako negdje treba druga velicina, ne radi se spanom nego vlastitim
   elementom izvan naslova. */

h1 *, h2 *, h3 *, h4 *, h5 *, h6 *{
  font-size:inherit;
  font-family:inherit;
  font-weight:inherit;
  line-height:inherit;
  letter-spacing:inherit;
  font-style:normal;
  text-transform:inherit;
}

.crv{color:var(--crvena)}
.plv{color:var(--plava)}
.sek-tamna .crv, .seg-neurofeedback .crv{color:#F0A79C}
.sek-tamna .plv, .seg-neurofeedback .plv{color:var(--nebo)}

:focus-visible{outline:3px solid var(--crvena);outline-offset:3px;border-radius:6px}

/* ============================================================ 3. ZRNO
   Koncept .zrno — tekstura preko uvoda i tamne trake. */

.zrno-sloj::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-repeat:repeat;background-size:460px 460px;opacity:.9;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='460' height='460'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='6'/><feColorMatrix values='0 0 0 0 0.14 0 0 0 0 0.12 0 0 0 0 0.18 0 0 0 0.035 0'/></filter><rect width='460' height='460' filter='url(%23n)'/></svg>");
}

/* ========================================================== 4. ZAGLAVLJE
   CMS: main.wrapper > header > a.logo + nav > ul.menu_slick
   Sve ispod 801px ostavljeno originalu i slicknav-u. */

@media only screen and (min-width:801px){

  .wrapper > header{
    width:auto;max-width:none;margin:0;
    padding:12px max(26px, calc((100% - 1220px) / 2));
    display:flex;align-items:center;gap:26px;flex-wrap:nowrap;
    position:sticky;top:0;z-index:900;
    background:rgba(251,248,243,.88);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--linija);
  }
  .wrapper > header:after{content:none;display:none}

  .wrapper > header > .logo{float:none;flex:0 0 auto;display:block;line-height:0;margin:0}
  .wrapper > header > .logo img{max-height:none;height:62px;width:auto;display:block}

  .wrapper > header > nav{float:none;width:auto;margin:0;padding:0;
    flex:1 1 auto;display:flex;justify-content:flex-end;min-width:0}

  /* --- prva razina --- */
  .wrapper > header nav ul.menu_slick{
    display:flex;align-items:center;gap:4px;
    list-style:none;margin:0;padding:0;flex-wrap:nowrap;
  }
  .wrapper > header nav ul.menu_slick > li{float:none;margin:0;position:relative}
  .wrapper > header nav ul.menu_slick > li > a{
    display:inline-flex;align-items:center;gap:6px;
    padding:10px 13px;margin:0;
    font-family:var(--font-ui);font-size:14.5px;font-weight:600;
    line-height:1.25;text-transform:none;
    color:var(--tinta);background:transparent;
    border-radius:999px;white-space:nowrap;
    transition:background .15s;
  }
  .wrapper > header nav ul.menu_slick > li > a:hover,
  .wrapper > header nav ul.menu_slick > li:hover > a{
    font-size:14.5px;color:var(--tinta);background:rgba(30,38,48,.06);
  }
  .wrapper > header nav ul.menu_slick > li > a.active{
    font-size:14.5px;color:var(--tinta);font-weight:600;background:var(--zuta);
  }
  .wrapper > header nav .fa-caret-down{font-size:11px;opacity:.5;margin-left:4px}
  .wrapper > header nav .menu_icon_style{height:18px;width:auto;vertical-align:-3px;margin-right:6px}

  /* --- padajuci panel --- */
  .wrapper > header nav ul.menu_slick > li > ul.submenu{
    width:auto;min-width:330px;max-width:380px;
    position:absolute;top:calc(100% + 10px);left:0;
    background:var(--bijela);
    border:1px solid var(--linija);border-radius:16px;
    box-shadow:var(--sjena-jaka);
    padding:20px;margin:0;list-style:none;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .18s,transform .18s,visibility .18s;
    z-index:950;
  }
  .wrapper > header nav ul.menu_slick > li:hover > ul.submenu,
  .wrapper > header nav ul.menu_slick > li:focus-within > ul.submenu{
    opacity:1;visibility:visible;transform:translateY(0);
  }
  /* zadnje stavke otvaraju ulijevo da ne izadju iz ekrana */
  .wrapper > header nav ul.menu_slick > li:nth-last-child(-n+4) > ul.submenu{left:auto;right:0}

  .wrapper > header nav ul.menu_slick ul.submenu li{
    width:auto;float:none;display:block;border:0;margin:0;position:relative;
  }
  .wrapper > header nav ul.menu_slick ul.submenu a{
    display:block;padding:9px 12px;border-radius:10px;
    font-size:14.5px;font-weight:600;line-height:1.35;text-transform:none;
    color:var(--tinta);background:transparent;
  }
  .wrapper > header nav ul.menu_slick ul.submenu a:hover{
    font-size:14.5px;background:rgba(30,38,48,.05);color:var(--tinta);
  }
  .wrapper > header nav ul.menu_slick ul.submenu a.selected{color:var(--crvena)}
  /* podnaslov stavke: koncept .panel .osoba span */
  .wrapper > header nav ul.menu_slick ul.submenu a span{
    display:block;font-family:var(--font-mono);font-size:11.5px;
    font-weight:400;color:var(--tinta-60);margin-top:2px;
  }

  /* treca razina: uvucena lista, ne bocni iskok */
  .wrapper > header nav ul.menu_slick ul.submenu ul,
  .wrapper > header nav ul.menu_slick > li:hover ul.submenu li ul{
    position:static;width:auto;top:auto;left:auto;
    opacity:1;visibility:visible;
    background:transparent;box-shadow:none;border:0;
    border-left:2px solid var(--linija);border-radius:0;
    list-style:none;margin:2px 0 6px;padding:0 0 0 12px;
  }
  .wrapper > header nav ul.menu_slick ul.submenu ul a{
    font-family:var(--font-mono);font-size:12.5px;font-weight:400;
    padding:6px 10px;color:var(--tinta-60);
  }
  .wrapper > header nav ul.menu_slick ul.submenu ul a:hover{font-size:12.5px;color:var(--crvena)}

  /* zadnja stavka izbornika kao gumb (koncept .nav-cta) */
  .wrapper > header nav ul.menu_slick > li:last-child > a{
    background:var(--bijela);
    box-shadow:inset 0 0 0 1.5px var(--linija);
    font-size:13.5px;padding:9px 16px;margin-left:6px;
  }
  .wrapper > header nav ul.menu_slick > li:last-child > a:hover{
    background:var(--tinta);color:#fff;font-size:13.5px;
  }
}

@media only screen and (min-width:801px) and (max-width:1180px){
  .wrapper > header{gap:14px;padding:10px 18px}
  .wrapper > header nav ul.menu_slick > li > a{padding:9px 9px;font-size:13.5px}
  .wrapper > header nav ul.menu_slick > li > a:hover,
  .wrapper > header nav ul.menu_slick > li:hover > a,
  .wrapper > header nav ul.menu_slick > li > a.active{font-size:13.5px}
  .wrapper > header > .logo img{height:50px}
}

/* =========================================================== 5. PODNOZJE
   Koncept footer.pod: podloga --tinta (ugljena), cetiri stupca,
   naslovi h4 mono verzal zuti, dno u tri dijela. */

.wrapper > footer{
  width:auto;max-width:none;margin:0;padding:64px 0 26px;
  display:block;background:var(--tinta);color:rgba(255,255,255,.72);
  font-size:14px;
}
.wrapper > footer .footer_top_cnt{
  width:auto;max-width:var(--maxw);margin:0 auto;
  padding:0 26px 24px;
  display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:34px;
  align-items:start;
}
.wrapper > footer .footer_top_cnt .footer_logo{display:block;width:auto;margin:0 0 16px;line-height:0}
.wrapper > footer .footer_top_cnt .footer_logo img{
  max-width:none;height:78px;width:auto;display:block;
  filter:brightness(0) invert(1);opacity:.95;
}
.wrapper > footer .footer_top_cnt section,
.wrapper > footer .footer_top_cnt section.footer_contact{
  display:block;width:auto;margin:0;padding:0;
}
.wrapper > footer .footer_top_cnt h1,
.wrapper > footer .footer_top_cnt h2,
.wrapper > footer .footer_top_cnt h3,
.wrapper > footer .footer_top_cnt h4{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--zuta);font-weight:500;margin:0 0 14px;
}
.wrapper > footer .footer_top_cnt p,
.wrapper > footer .footer_top_cnt em{
  font-size:12.3px;line-height:1.75;color:rgba(255,255,255,.55);
  font-weight:400;text-align:left;padding:0 0 8px;margin:0;
}
.wrapper > footer .footer_top_cnt ul{list-style:none;margin:0;padding:0}
.wrapper > footer .footer_top_cnt ul li{padding:4px 0;font-size:14px;border:0}
.wrapper > footer .footer_top_cnt ul a{color:rgba(255,255,255,.72);text-decoration:none;border:0}
.wrapper > footer .footer_top_cnt ul a:hover{color:#fff}
/* uvucena podstavka, koncept .pod-sub */
.wrapper > footer .footer_top_cnt ul li.pod-sub,
.wrapper > footer .footer_top_cnt ul ul li{
  padding-left:12px;font-family:var(--font-mono);font-size:12px;opacity:.8;
}

.wrapper > footer .footer_copyright{
  width:auto;max-width:var(--maxw);margin:0 auto;
  padding:22px 26px 0;
  border-top:1px solid var(--linija-svijetla);
  display:flex;flex-wrap:wrap;gap:14px;
  justify-content:space-between;align-items:center;
}
.wrapper > footer .footer_copyright p{
  margin:0;padding:0;font-family:var(--font-mono);font-size:11.5px;
  color:rgba(255,255,255,.5);text-align:left;
}
.wrapper > footer .footer_copyright p a{color:rgba(255,255,255,.7)}
.wrapper > footer .footer_copyright p a:hover{color:#fff}
.wrapper > footer .footer_copyright ul{margin:0;padding:0;list-style:none;display:flex;gap:10px}
.wrapper > footer .footer_copyright ul li{margin:0;border:0;padding:0}
.wrapper > footer .footer_copyright ul li a{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.1);color:#fff;font-size:13px;text-decoration:none;
  transition:background .15s;
}
.wrapper > footer .footer_copyright ul li a:hover{background:var(--crvena)}
.wrapper > footer .footer_copyright ul li img{opacity:.9;max-width:18px}

@media only screen and (max-width:1040px){
  .wrapper > footer .footer_top_cnt{grid-template-columns:1fr 1fr}
}
@media only screen and (max-width:720px){
  .wrapper > footer{padding:44px 0 22px}
  .wrapper > footer .footer_top_cnt{grid-template-columns:1fr;gap:26px;padding:0 18px 20px}
  .wrapper > footer .footer_copyright{padding:20px 18px 0;justify-content:flex-start}
}

/* ========================================================= 6. SEGMENTI
   Predlozak omotava svaku zonu u <section class="seg seg-IME">.
   Prvi <article> u zoni je glava segmenta, ostali su kartice.

   Glava (koncept .sek-glava):
     <em>NADNASLOV</em>        -> polje "uvodni tekst" bloka
     <h2>Naslov <span class="crv">drugi dio</span></h2>  -> sadrzaj, title_type 0
     <p>uvodni odlomak</p>
   print_content.php ispisuje <em> IZA naslova, pa je glava stupac i <em>
   se podize na prvo mjesto. */

.seg{
  width:auto;max-width:none;margin:0;
  padding:82px max(26px, calc((100% - 1220px) / 2));
  display:block;position:relative;
}
.seg > *{max-width:none}

/* podloge, naizmjenicno kao u konceptu */
.seg-uvod,
.seg-struke,
.seg-lokacije,
.seg-edukacije,
.seg-recenzije,
.seg-pravni{background:var(--papir)}
.seg-suradnja,
.seg-podrucja,
.seg-tim,
.seg-cjenik,
.seg-faq,
.seg-obrazac{background:var(--bijela)}

/* --- glava segmenta --- */
.seg > article:first-child:not(:only-child){
  display:flex;flex-direction:column;
  max-width:720px;margin:0 0 38px;
}
.seg > article:first-child h2{
  font-size:clamp(28px,3.3vw,42px);letter-spacing:-.015em;margin:0 0 12px;
}
.seg > article:first-child > p{font-size:17px;line-height:1.62;color:var(--tinta-80);margin:0}


/* ---------------------------------------------------------------------
   JEDNO PRAVILO ZA NADNASLOV
   ---------------------------------------------------------------------
   Koncept izrez6/style.css, redci 46-48:

     .eyebrow{font-family:mono; font-size:11px; letter-spacing:.18em;
              text-transform:uppercase; color:crvena; margin:0 0 14px;
              display:flex; align-items:center; gap:10px}
     .eyebrow::before{width:26px; height:3px; background:zuta;
                      border-radius:2px; flex:0 0 auto}
     .eyebrow.tiho{color:tinta-60}

   U CMS-u se nadnaslov pojavljuje u TRI oblika, i zato je prije izgledao
   razlicito na razlicitim mjestima:
     a) <em>  — polje "uvodni tekst" bloka, u glavi segmenta
     b) <p>   — prvi odlomak u uvodu (zona 10)
     c) <em>  — u medjunaslovu usluga (sedmi blok zone 12)

   Sva tri su ovdje pokrivena jednim pravilom. Tezina i boja su PRIPISANE,
   ne naslijedjene — inace ih pokupi style.css redak 32
   (`div, span, p, em, ... { font-size:18px; color:rgba(0,0,0,.80);
   font-weight:500 }`) i nadnaslov ispadne crn i deblji.

   Dvije varijante, kao u konceptu:
     crvena  — svugdje
     .tiho   — siva, SAMO u "Za strucnjake"
     zuta    — na tamnoj podlozi (neurofeedback)
   --------------------------------------------------------------------- */

.seg > article:first-child > em,
.seg-podrucja > article:nth-child(7) > em,
.seg-uvod article > p:first-of-type{
  order:-1;
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 14px;
  padding:0;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:400;
  font-style:normal;
  line-height:1.4;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--crvena);
}
.seg > article:first-child > em::before,
.seg-podrucja > article:nth-child(7) > em::before,
.seg-uvod article > p:first-of-type::before{
  content:"";
  width:26px;
  height:3px;
  background:var(--zuta);
  border-radius:2px;
  flex:0 0 auto;
}
/* nista unutar nadnaslova ne smije imati svoju tezinu ni velicinu */
.seg > article:first-child > em *,
.seg-podrucja > article:nth-child(7) > em *,
.seg-uvod article > p:first-of-type *{
  font:inherit;
  color:inherit;
  letter-spacing:inherit;
}

/* varijanta "tiho" — siva, u konceptu samo u "Za strucnjake" */
.seg-edukacije > article:first-child > em{color:var(--tinta-60)}

/* na tamnoj podlozi nadnaslov je zut */
.seg-neurofeedback > article:first-child > em{color:var(--zuta)}

/* --- zajednicki slog u segmentima --- */
.seg h3{font-size:19px;line-height:1.2;margin:0 0 8px;color:var(--tinta)}
.seg p{font-size:14.5px;line-height:1.62;color:var(--tinta-80);margin:0 0 14px}
.seg ul{list-style:none;margin:0;padding:0}
.seg a{color:inherit;text-decoration:none}

/* --- oznaka struke (koncept .strucnjak-oznaka) --- */
.strucnjak-oznaka{
  display:inline-block;align-self:flex-start;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:400;
  color:var(--plava);background:rgba(31,95,158,.09);
  padding:5px 10px;border-radius:999px;margin:0 0 10px;
}

/* --- kartica (koncept .prog) --- */
.seg .kartica,
.seg-struke > article:not(:first-child),
.seg-podrucja > article:not(:first-child),
.seg-suradnja > article:not(:first-child),
.seg-tim > article:not(:first-child),
.seg-cjenik > article:not(:first-child),
.seg-edukacije > article:not(:first-child){
  background:var(--bijela);
  border:0;border-radius:var(--r);
  box-shadow:var(--sjena);
  padding:24px;
  display:flex;flex-direction:column;height:100%;
}
/* oznaka struke uvijek prva, naslov drugi */
.seg article .strucnjak-oznaka{order:-1}
.seg article > h3{order:0}

/* --- popis usluga u kartici: sve stavke iste, strelica na svakoj --- */
.seg-struke > article:not(:first-child) ul,
.seg-podrucja > article:not(:first-child) ul{
  margin:auto 0 0;padding:14px 0 0;border-top:1px solid var(--linija);
}
.seg-struke > article:not(:first-child) li,
.seg-podrucja > article:not(:first-child) li{
  font-family:var(--font-mono);font-size:12.5px;font-weight:400;
  line-height:1.5;color:var(--tinta-80);
  padding:4px 0 4px 18px;position:relative;
}
.seg-struke > article:not(:first-child) li::before,
.seg-podrucja > article:not(:first-child) li::before{
  content:"\2192";position:absolute;left:0;top:4px;
  color:var(--crvena);font-size:11px;
}
.seg-struke > article:not(:first-child) li a,
.seg-podrucja > article:not(:first-child) li a{color:var(--tinta-80);font-weight:400}
.seg-struke > article:not(:first-child) li a:hover,
.seg-podrucja > article:not(:first-child) li a:hover{color:var(--crvena)}
.seg-struke > article:not(:first-child) li b,
.seg-struke > article:not(:first-child) li strong,
.seg-podrucja > article:not(:first-child) li b,
.seg-podrucja > article:not(:first-child) li strong{font-weight:400}

/* --- gumbi (koncept .btn) --- */
.seg-uvod article > p:nth-of-type(3) a,
.seg-neurofeedback article > p:last-child a,
.seg-edukacije > article:not(:first-child) > p:last-child a{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-ui);font-weight:600;font-size:15px;
  padding:14px 26px;border-radius:999px;text-decoration:none;border:0;
  background:var(--crvena);color:#fff;
  box-shadow:0 8px 20px rgba(200,87,79,.20);
  transition:transform .16s,background .16s;
}
.seg-uvod article > p:nth-of-type(3) a:hover,
.seg-neurofeedback article > p:last-child a:hover,
.seg-edukacije > article:not(:first-child) > p:last-child a:hover{
  background:var(--crvena-tamna);color:#fff;transform:translateY(-2px);
}
.seg-uvod article > p:nth-of-type(3) a:nth-child(n+2){
  background:transparent;color:var(--tinta);box-shadow:inset 0 0 0 1.5px var(--linija);
}
.seg-uvod article > p:nth-of-type(3) a:nth-child(n+2):hover{
  background:transparent;color:var(--tinta);box-shadow:inset 0 0 0 1.5px var(--tinta);
}

/* ------------------------------------------------- 6.1 UVOD (z10 + z21)
   Koncept .hero: fotografija pozadinski sloj, tekst lijevo, Vodic desno. */

.seg-uvod{
  padding-top:64px;padding-bottom:78px;
  position:relative;overflow:hidden;
  min-height:600px;display:flex;align-items:center;
}
.seg-uvod > .slider_content{
  position:absolute;inset:0;z-index:0;
  width:auto;margin:0;padding:0;display:block;overflow:hidden;
  background:linear-gradient(120deg,var(--nebo),var(--lavanda) 60%,var(--breskva));
}
.seg-uvod > .slider_content .bx-wrapper,
.seg-uvod > .slider_content .bx-viewport,
.seg-uvod > .slider_content .bxslider{
  height:100% !important;max-width:none !important;margin:0 !important;
}
.seg-uvod > .slider_content .bx-viewport{border:0;box-shadow:none;left:0;background:none}
.seg-uvod > .slider_content .bxslider{width:100% !important;position:relative !important}
.seg-uvod > .slider_content .bxslider > li{
  position:absolute !important;top:0 !important;left:0 !important;
  right:0 !important;bottom:0 !important;width:auto !important;height:auto !important;
  display:none !important;
}
.seg-uvod > .slider_content .bxslider > li:first-child{display:block !important;opacity:1 !important}
.seg-uvod > .slider_content img{
  width:100% !important;height:100% !important;
  object-fit:cover;object-position:center 28%;margin:0;padding:0;
}
.seg-uvod > .slider_content .bx-controls,
.seg-uvod > .slider_content .bx-pager{display:none !important}
.seg-uvod > .slider_content::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(103deg,
    rgba(251,248,243,.96) 0%,rgba(251,248,243,.90) 36%,
    rgba(251,248,243,.52) 58%,rgba(251,248,243,.10) 100%);
}
.seg-uvod > .seg-uvod-lijevo,
.seg-uvod > .seg-uvod-desno{position:relative;z-index:2}
.seg-uvod > .seg-uvod-lijevo{flex:1 1 auto}
.seg-uvod:not(:has(.seg-uvod-desno article)) .seg-uvod-lijevo{max-width:820px}
.seg-uvod:has(.seg-uvod-desno article){
  display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center;
}

.seg-uvod article{display:flex;flex-direction:column}
.seg-uvod h1{
  font-size:clamp(38px,4.9vw,62px);letter-spacing:-.02em;
  margin:0 0 18px;padding:0;order:0;
}
.seg-uvod article > p:nth-of-type(2){font-size:18.5px;line-height:1.62;color:var(--tinta-80);max-width:52ch;margin:0 0 26px}
.seg-uvod article > p:nth-of-type(3){display:flex;flex-wrap:wrap;gap:12px;margin:0 0 26px;font-size:0}
.seg-uvod article > ul{display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0}
.seg-uvod article > ul li{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.05em;
  padding:8px 13px;border-radius:999px;background:var(--bijela);
  box-shadow:inset 0 0 0 1px var(--linija);color:var(--tinta-80);
}
.seg-uvod article > ul li b{font-weight:500;color:var(--tinta)}
.seg-uvod .seg-uvod-desno article{
  background:var(--bijela);border:0;border-radius:26px;
  box-shadow:var(--sjena-jaka);padding:26px;
}

/* ------------------------------------------- 6.2 STRUKE (z11) i USLUGE (z12)
   Koncept .programi-grid: tri stupca, gornja crta 5px u boji po redu.
   Zona 12 ima DVIJE mreze — pet kartica, medjunaslov, tri kartice procjena. */

.seg-struke,
.seg-podrucja{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.seg-struke > article:first-child,
.seg-podrucja > article:first-child{grid-column:1 / -1}

.seg-struke > article:not(:first-child),
.seg-podrucja > article:not(:first-child){border-top:5px solid var(--menta)}
.seg-struke > article:nth-child(3){border-top-color:var(--plava)}
.seg-struke > article:nth-child(4){border-top-color:var(--crvena)}
.seg-podrucja > article:nth-child(3){border-top-color:var(--plava)}
.seg-podrucja > article:nth-child(4){border-top-color:var(--crvena)}
.seg-podrucja > article:nth-child(5){border-top-color:var(--lavanda)}
.seg-podrucja > article:nth-child(6){border-top-color:var(--zuta)}

/* medjunaslov: sedmi blok, puna sirina, bez kartice */
.seg-podrucja > article:nth-child(7){
  grid-column:1 / -1;background:transparent;box-shadow:none;border:0;
  padding:44px 0 6px;max-width:70ch;height:auto;display:block;
}
.seg-podrucja > article:nth-child(7) h3{font-size:24px;margin:0 0 6px}
.seg-podrucja > article:nth-child(7) p{font-size:15px;line-height:1.65;max-width:70ch;margin:0}

/* tri kartice procjena: druga mreza, svjetloplave, plava crta */
.seg-podrucja > article:nth-child(n+8){
  background:#F7FAFC;border-top:5px solid var(--plava);
}
.seg-podrucja > article:nth-child(n+8) h3{font-size:18px}
.seg-podrucja > article:nth-child(n+8) p{font-size:13.5px;line-height:1.6}

/* ------------------------------------------------- 6.3 SURADNJA (z22)
   Koncept .proces / .korak — cetiri kartice, broj 01-04 iz brojaca. */

.seg-suradnja{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  align-items:stretch;counter-reset:korak;
}
.seg-suradnja > article:first-child{grid-column:1 / -1}
.seg-suradnja > article:not(:first-child){padding:26px 22px}
.seg-suradnja > article:not(:first-child)::before{
  counter-increment:korak;content:"0" counter(korak);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;
  color:var(--crvena);display:block;margin:0 0 12px;
}
.seg-suradnja > article:not(:first-child) h3{font-size:17px;margin:0 0 8px}
.seg-suradnja > article:not(:first-child) p{font-size:14px;margin:0}

/* -------------------------------------------- 6.4 NEUROFEEDBACK (z13)
   Koncept .sek.tamna.plava + .nf-grid: sve lijevo, fotografija desno. */

.seg-neurofeedback{
  background:var(--plava-tamna);color:rgba(255,255,255,.80);
  display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:start;
  position:relative;
}
.seg-neurofeedback > *{position:relative;z-index:2}
.seg-neurofeedback h2,
.seg-neurofeedback h3,
.seg-neurofeedback h4{color:#fff}
.seg-neurofeedback p,
.seg-neurofeedback li{color:rgba(255,255,255,.80)}
.seg-neurofeedback > article:first-child h2{font-size:clamp(28px,3.3vw,40px)}
.seg-neurofeedback > article:first-child > p{color:rgba(255,255,255,.78);font-size:17px}

/* sve bez slike u lijevi stupac */
.seg-neurofeedback > article:not(:has(figure)){
  grid-column:1;background:transparent;box-shadow:none;border:0;padding:0;
  max-width:none;margin:0 0 6px;height:auto;
}
/* popis sa zutim tockama */
.seg-neurofeedback > article:nth-child(2) li{
  padding:9px 0 9px 30px;position:relative;font-size:15px;
}
.seg-neurofeedback > article:nth-child(2) li::before{
  content:"";position:absolute;left:0;top:17px;
  width:14px;height:14px;border-radius:50%;background:var(--zuta);
}
/* cijene 2x2 */
.seg-neurofeedback > article:nth-child(3) ul{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--linija-svijetla);border-radius:16px;overflow:hidden;margin:0 0 24px;
}
.seg-neurofeedback > article:nth-child(3) li{
  background:var(--plava-tamna);padding:14px 16px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.6);
  display:flex;flex-direction:column;gap:4px;
}
.seg-neurofeedback > article:nth-child(3) li b{
  font-family:var(--font-display);font-size:19px;font-weight:600;
  color:var(--zuta);text-transform:none;letter-spacing:0;
}
/* gumb zuti */
.seg-neurofeedback article > p:last-child a{
  background:var(--zuta);color:var(--tinta);box-shadow:none;
}
.seg-neurofeedback article > p:last-child a:hover{
  background:var(--zuta);color:var(--tinta);transform:translateY(-2px);
}
/* fotografija desno preko cijele visine */
.seg-neurofeedback > article:has(figure){
  grid-column:2;grid-row:1 / -1;align-self:stretch;
  background:transparent;box-shadow:none;border:0;padding:0;
}
.seg-neurofeedback > article:has(figure) figure{
  margin:0;width:100%;aspect-ratio:4 / 3;border-radius:22px;overflow:hidden;
  background:linear-gradient(135deg,var(--nebo),var(--lavanda));
}
.seg-neurofeedback > article:has(figure) figure img{width:100%;height:100%;object-fit:cover;display:block}
.seg-neurofeedback figcaption{display:none}

/* ------------------------------------------------------- 6.5 TIM (z14)
   Koncept .osoba-k: fotografija prva u kvadratu, pa ime, uloga, opis. */

.seg-tim{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.seg-tim > article:first-child{grid-column:1 / -1}
.seg-tim > article:not(:first-child){
  padding:0;overflow:hidden;transition:transform .18s;
}
.seg-tim > article:not(:first-child):hover{transform:translateY(-4px)}
.seg-tim > article:not(:first-child) figure{
  order:-1;margin:0;width:100%;aspect-ratio:1 / 1;overflow:hidden;
  background:linear-gradient(135deg,var(--breskva),var(--lavanda));
}
.seg-tim > article:not(:first-child) figure img{
  width:100% !important;height:100% !important;max-width:none;
  object-fit:cover;object-position:center 20%;display:block;margin:0;
}
.seg-tim > article:not(:first-child) figcaption{display:none}
.seg-tim > article:not(:first-child) > h3{order:1;font-size:18px;margin:18px 20px 4px}
.seg-tim > article:not(:first-child) > p:first-of-type{
  order:2;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.05em;
  color:var(--plava);margin:0 20px 10px;
}
.seg-tim > article:not(:first-child) > p:first-of-type b{font-weight:400}
.seg-tim > article:not(:first-child) > p:nth-of-type(2){
  order:3;font-size:13.5px;color:var(--tinta-80);margin:0 20px 22px;
}
/* osoba bez fotografije: ploca s prijelazom boje */
.seg-tim > article:not(:first-child):not(:has(figure))::before{
  content:"";order:-1;display:block;width:100%;aspect-ratio:1 / 1;
  background:linear-gradient(135deg,var(--breskva),var(--lavanda));
}

/* ------------------------------------------------ 6.6 RECENZIJE (z8)
   Koncept .rec-traka / .rec. Markup slaze dm-skin.js iz sadrzaja u bazi. */

.seg-recenzije{overflow:hidden}
/* Izvorni ispis recenzija mora IZAci IZ TOKA. Izmjereno: .bx-wrapper je
   ostajao visok 300px i pravio 338px praznine izmedju naslova i kartica,
   jer je dm-skin oznaku stavio na .bxslider_reviews — bxSlider jos nije
   bio omotao sadrzaj kad je skripta krenula. Zato se gadjaju OBA omotaca,
   neovisno o tome koji je JS stigao oznaciti. */
.seg-recenzije .rec-izvor,
.seg-recenzije .bx-wrapper{
  position:absolute !important;
  width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  margin:0;padding:0;
}
.seg-recenzije .bx-controls,
.seg-recenzije .bx-pager{display:none !important}
.seg-recenzije > article.rec-glava{
  position:static;width:auto;height:auto;overflow:visible;
  clip:auto;clip-path:none;white-space:normal;
  max-width:720px;margin:0 0 38px;display:flex;flex-direction:column;
  background:transparent;box-shadow:none;border:0;padding:0;
}
.rec-traka{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.rec{
  background:var(--bijela);border-radius:var(--r);padding:24px;
  box-shadow:var(--sjena);position:relative;
  display:flex;flex-direction:column;margin:0;
}
.rec::before{
  content:"\201D";position:absolute;top:6px;right:20px;
  font-family:var(--font-display);font-size:74px;line-height:1;color:var(--zuta);
}
.rec p{font-size:14.5px;line-height:1.62;color:var(--tinta-80);position:relative;z-index:1;margin:0 0 14px}
.rec .tko{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--plava);margin-top:auto;
}
.rec-nav{display:flex;gap:10px;margin-top:26px;align-items:center}
.rec-nav button{
  width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:var(--bijela);box-shadow:inset 0 0 0 1.5px var(--linija);
  font-size:16px;color:var(--tinta);display:grid;place-items:center;
  transition:background .15s,color .15s;
}
.rec-nav button:hover{background:var(--tinta);color:#fff}
.rec-nav .brojac{font-family:var(--font-mono);font-size:12px;color:var(--tinta-60);margin-left:6px}

/* -------------------------------------------------- 6.7 CJENIK (z15)
   Koncept .cjenik-grid u dva stupca (v5 dorada), iznos Fraunces 18px. */

.seg-cjenik{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;align-items:stretch}
.seg-cjenik > article:first-child{grid-column:1 / -1}
.seg-cjenik > article:not(:first-child) h3{font-size:18px;margin:0 0 14px}
.seg-cjenik > article:not(:first-child) li{
  display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:9px 0;border-bottom:1px dashed var(--linija);
  font-size:14px;color:var(--tinta);
}
.seg-cjenik > article:not(:first-child) li:last-child{border-bottom:0}
.seg-cjenik > article:not(:first-child) li a{color:var(--tinta)}
.seg-cjenik > article:not(:first-child) li a:hover{color:var(--crvena)}
.seg-cjenik > article:not(:first-child) li b{
  font-family:var(--font-display);font-size:18px;font-weight:600;
  white-space:nowrap;color:var(--tinta);
}
.seg-cjenik > article:not(:first-child) li small{
  display:block;font-family:var(--font-mono);font-size:11px;color:var(--tinta-60);
}
.seg-cjenik > article:last-child{
  grid-column:1 / -1;background:transparent;box-shadow:none;border:0;padding:0;height:auto;
}
.seg-cjenik > article:last-child p{font-family:var(--font-mono);font-size:12px;color:var(--tinta-60);margin:0}
.seg-cjenik > article:last-child a{color:var(--crvena);font-weight:500}

/* ------------------------------------------- 6.8 CESTA PITANJA (z16)
   Koncept .faq-grid: lijevo glava i bocna kartica, desno harmonika.
   Otvaranje ide preko atributa hidden — inline stil iz JS-a ne prolazi. */

.seg-faq .faq-grid{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:46px;align-items:start;
  max-width:var(--maxw);margin:0 auto;
}
.seg-faq .faq-grid h2{font-size:clamp(28px,3.3vw,40px);margin-bottom:14px}
.seg-faq .faq-grid > div:first-child > p{font-size:17px;color:var(--tinta-80)}
.faq-lista{border-top:1px solid var(--linija)}
.faq-stavka{border-bottom:1px solid var(--linija)}
.faq-stavka button{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  padding:20px 44px 20px 0;position:relative;
  font-family:var(--font-display);font-size:19px;font-weight:600;
  color:var(--tinta);line-height:1.3;
}
.faq-stavka button::after{
  content:"";position:absolute;right:8px;top:26px;width:12px;height:12px;
  border-right:2px solid var(--crvena);border-bottom:2px solid var(--crvena);
  transform:rotate(45deg);transition:transform .2s;
}
.faq-stavka button[aria-expanded="true"]::after{transform:rotate(-135deg)}
.faq-odgovor[hidden]{display:none}
.faq-odgovor .unutra{padding:0 40px 22px 0}
.faq-odgovor .unutra p{font-size:15px;color:var(--tinta-80);margin:0 0 12px}
.faq-odgovor .unutra p:last-child{margin-bottom:0}
.faq-odgovor a{color:var(--crvena);font-weight:600}
.faq-bok{background:var(--bijela);border-radius:22px;padding:28px;box-shadow:var(--sjena);margin-top:26px}
.faq-bok h3{font-size:21px;margin:0 0 10px}
.faq-bok p{font-size:14.5px;color:var(--tinta-80)}
.faq-bok .kont{margin-top:18px;display:grid;gap:10px}
.faq-bok .kont a{
  display:flex;align-items:center;gap:12px;text-decoration:none;
  font-weight:600;font-size:15px;padding:13px 16px;border-radius:14px;
  background:var(--papir);color:var(--tinta);
}
.faq-bok .kont a:hover{background:var(--nebo)}
.faq-bok .kont span{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tinta-60);display:block;
}

/* ------------------------------------------------ 6.9 LOKACIJE (z17)
   Koncept .lok: lijeva crta 5px u boji, kvart mono iznad adrese. */

.seg-lokacije{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.seg-lokacije > article:first-child{grid-column:1 / -1}
.seg-lokacije > article:not(:first-child):not(:last-child){
  background:var(--bijela);border:0;border-radius:var(--r);
  box-shadow:var(--sjena);padding:24px;
  border-left:5px solid var(--crvena);
  display:flex;flex-direction:column;height:100%;
}
.seg-lokacije > article:nth-child(3){border-left-color:var(--plava)}
.seg-lokacije > article:nth-child(4){border-left-color:var(--zuta)}
.seg-lokacije > article:not(:first-child) h3{
  font-family:var(--font-display);font-size:20px;font-weight:600;margin:0 0 6px;
}
.seg-lokacije > article:not(:first-child) .kvart{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta-60);margin:0 0 4px;display:block;
}
.seg-lokacije > article:not(:first-child):not(:last-child) p{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinta-60);margin:0;
}
.seg-lokacije > article:not(:first-child) a.karta{
  display:inline-block;margin-top:14px;font-size:13.5px;font-weight:600;color:var(--plava);
}
.seg-lokacije > article:last-child{
  grid-column:1 / -1;background:transparent;box-shadow:none;border:0;padding:0;height:auto;
}
.seg-lokacije > article:last-child ul{display:flex;flex-wrap:wrap;gap:10px 26px}
.seg-lokacije > article:last-child li{font-family:var(--font-mono);font-size:12px;color:var(--tinta-60)}
.seg-lokacije > article:last-child a{color:var(--plava);font-weight:500}

/* ------------------------------------------- 6.10 OBRAZAC (z18) */

.seg-obrazac > article:only-child{max-width:900px;margin:0}
.seg-obrazac > article > p:first-of-type{font-size:17px;color:var(--tinta-80)}
.seg-obrazac > article p,
.seg-obrazac > article li{font-size:15px;line-height:1.65;color:var(--tinta-80);max-width:78ch}
.seg-obrazac > article h3{font-size:19px;margin:22px 0 6px}
.seg-obrazac .polje{margin-bottom:14px}
.seg-obrazac .polje label{
  display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tinta-60);margin-bottom:6px;
}
.seg-obrazac input, .seg-obrazac select, .seg-obrazac textarea{
  width:100%;font-family:var(--font-ui);font-size:15px;color:var(--tinta);
  background:var(--papir);border:1.5px solid var(--linija);border-radius:12px;padding:12px 14px;
}
.seg-obrazac textarea{min-height:104px;resize:vertical}
.seg-obrazac input:focus, .seg-obrazac select:focus, .seg-obrazac textarea:focus{
  outline:0;border-color:var(--tinta);background:#fff;
}

/* ----------------------------------------------- 6.11 EDUKACIJE (z19) */

.seg-edukacije{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.seg-edukacije > article:first-child{grid-column:1 / -1}
/* nadnaslov ovog segmenta je "tiho" — siv, ne crven */
.seg-edukacije > article:not(:first-child){border-top:5px solid var(--zuta);padding:22px 22px 24px}
.seg-edukacije > article:nth-child(3){border-top-color:var(--menta)}
.seg-edukacije > article:nth-child(4){border-top-color:var(--nebo)}
.seg-edukacije > article:not(:first-child) h3{font-size:21px;margin:0 0 10px}
.seg-edukacije > article:not(:first-child) p{font-size:14.5px;flex:1;margin:0}
.seg-edukacije > article:not(:first-child) > p:last-child{flex:0;margin-top:16px}
.seg-edukacije > article:not(:first-child) > p:last-child a{
  background:var(--tinta);box-shadow:none;font-size:13.5px;padding:9px 15px;
}
.seg-edukacije > article:not(:first-child) > p:last-child a:hover{background:var(--crvena)}

/* ------------------------------------------ 6.12 PRAVNI PODACI (z20) */

.seg-pravni{padding-top:40px;padding-bottom:56px}
.seg-pravni h2{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tinta-60);font-weight:500;margin:0 0 14px;
}
.seg-pravni li{font-size:12.3px;line-height:1.75;color:var(--tinta-60);padding:3px 0}

/* ============================================================ 7. SIRINE
   Prijelomi iz koncepta: 1040 i 720. */

@media only screen and (max-width:1040px){
  .seg-uvod:has(.seg-uvod-desno article){grid-template-columns:1fr;gap:38px}
  .seg-neurofeedback{grid-template-columns:1fr;gap:30px}
  .seg-neurofeedback > article:has(figure){grid-column:1;grid-row:auto}
  .seg-faq .faq-grid{grid-template-columns:1fr;gap:30px}
  .seg-struke,.seg-podrucja,.seg-tim,.seg-cjenik,.seg-lokacije,
  .seg-edukacije,.seg-suradnja,.rec-traka{grid-template-columns:repeat(2,1fr)}
}

@media only screen and (max-width:720px){
  .seg{padding:58px 18px}
  .seg-uvod{padding:34px 18px 48px;min-height:0}
  .seg-uvod > .slider_content::after{
    background:linear-gradient(180deg,rgba(251,248,243,.86) 0%,
      rgba(251,248,243,.95) 34%,rgba(251,248,243,.98) 100%);
  }
  .seg-uvod > .slider_content img{object-position:center 22%}
  .seg-uvod article > p:nth-of-type(3) a{width:100%;justify-content:center}
  .seg-struke,.seg-podrucja,.seg-tim,.seg-cjenik,.seg-lokacije,
  .seg-edukacije,.seg-suradnja,.rec-traka{grid-template-columns:1fr}
  .seg-neurofeedback > article:nth-child(3) ul{grid-template-columns:1fr}
}

/* ============================================ 8. STARE SEKCIJE, SKRIVENE
   Zone 3-8 su preseljene ili neobjavljene; omotaci ostaju u predlosku sa
   svojim razmacima. Vraca se brisanjem ovog bloka. */

.main_container .featured_programs_cnt,
.main_container .contact_us_featured,
.main_container .other_programs_cnt,
.main_container .about_featured_cnt,
.main_container .numbers_featured_cnt{display:none}
.main_container{padding:0;margin:0;width:auto;max-width:none}