/* ——————————————————————————————————————————————
   Jezik brošure „Brosura A4 Sharp.pdf" prenesen na sajt:
   velike obojene površine sa POCIJEPANIM ivicama, sadržaj na papirnim
   pločama sa pomjerenom sjenkom, pločice-etikete sa zasječenim uglom,
   trake (ribbons) i isprekidani „put". Boje su uzete iz brošure.
   —————————————————————————————————————————————— */

:root{
  --paper:#f5e6d7;          /* topli papir iz brošure */
  --white:#fff;
  --blue:#3953a4;
  --deep:#263a83;           /* tamnoplava etiketa */
  --ink:#1e2f63;
  --green:#18a249;
  --magenta:#b44e9d;
  --sky:#45a7de;
  --yellow:#faed0e;
  --pink:#efa6c9;
  --muted:#4f5666;
  --plate-shadow:rgba(30,47,99,.20);

  /* Pocijepane ivice — visina zuba je u px, širina u %, pa rade na svakoj širini. */
  --tear-a:polygon(0.0% 12px,6.67% 2px,13.33% 16px,20.0% 20px,26.67% 2px,33.33% 26px,40.0% 13px,46.67% 2px,53.33% 20px,60.0% 26px,66.67% 17px,73.33% 2px,80.0% 9px,86.67% 17px,93.33% 5px,100.0% 2px,100% 100%,0 100%);
  --tear-b:polygon(0.0% 2px,6.67% 17px,13.33% 2px,20.0% 2px,26.67% 16px,33.33% 6px,40.0% 2px,46.67% 26px,53.33% 2px,60.0% 2px,66.67% 26px,73.33% 6px,80.0% 2px,86.67% 2px,93.33% 23px,100.0% 2px,100.0% calc(100% - 17px),93.33% calc(100% - 2px),86.67% calc(100% - 9px),80.0% calc(100% - 13px),73.33% calc(100% - 20px),66.67% calc(100% - 23px),60.0% calc(100% - 2px),53.33% calc(100% - 26px),46.67% calc(100% - 10px),40.0% calc(100% - 2px),33.33% calc(100% - 18px),26.67% calc(100% - 26px),20.0% calc(100% - 26px),13.33% calc(100% - 2px),6.67% calc(100% - 23px),0.0% calc(100% - 26px));
  --tear-c:polygon(0.0% 19px,6.67% 26px,13.33% 21px,20.0% 2px,26.67% 26px,33.33% 2px,40.0% 26px,46.67% 2px,53.33% 22px,60.0% 6px,66.67% 26px,73.33% 10px,80.0% 5px,86.67% 2px,93.33% 2px,100.0% 12px,100.0% calc(100% - 14px),93.33% calc(100% - 26px),86.67% calc(100% - 2px),80.0% calc(100% - 26px),73.33% calc(100% - 26px),66.67% calc(100% - 7px),60.0% calc(100% - 5px),53.33% calc(100% - 26px),46.67% calc(100% - 26px),40.0% calc(100% - 26px),33.33% calc(100% - 26px),26.67% calc(100% - 26px),20.0% calc(100% - 15px),13.33% calc(100% - 26px),6.67% calc(100% - 2px),0.0% calc(100% - 2px));
}

body{background:var(--paper)}

/* ——— Obojene površine sa pocijepanim ivicama ——— */
.field{position:relative;color:var(--white);border-radius:0!important}
.field-blue{background:var(--blue)}
.field-green{background:var(--green)}
.field-magenta{background:var(--magenta)}
.tear-a{clip-path:var(--tear-a)}
.tear-b{clip-path:var(--tear-b)}
.tear-c{clip-path:var(--tear-c)}
.field h2,.field h2 em,.field h2 span{color:var(--white)}

/* Susjedne sekcije se preklapaju za visinu zuba da se ne vidi pukotina. */


/* ——— Etiketa sa zasječenim uglom (kao u brošuri) ——— */
.chip-label{
  display:inline-block;margin:0 0 26px;
  font-family:var(--display);font-weight:800;font-size:11px;letter-spacing:1.4px;
  text-transform:uppercase;padding:11px 22px 11px 16px;
  background:var(--deep);color:var(--white);
  clip-path:polygon(0 0,100% 0,100% 58%,calc(100% - 13px) 100%,0 100%);
}
.chip-label.light{background:var(--white);color:var(--deep)}
.chip-label.dark{background:var(--deep);color:var(--white)}

/* ——— Papirna ploča: nepravilni uglovi + pomjerena sjenka ——— */
.plate{
  background:var(--white);color:var(--ink);
  padding:34px 30px;
  clip-path:polygon(0 6px,14px 0,calc(100% - 22px) 3px,100% 14px,calc(100% - 4px) calc(100% - 18px),calc(100% - 20px) 100%,18px calc(100% - 4px),3px calc(100% - 16px));
  filter:drop-shadow(5px 7px 0 var(--plate-shadow));
}
.plate h3{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.14;
  font-size:clamp(21px,1.8vw,27px);margin-bottom:12px;color:var(--ink)}
.plate p{color:var(--muted);margin-bottom:12px}
.plate p:last-child{margin-bottom:0}

/* ——— Trake (ribbons) ——— */
.ribbons{list-style:none;margin:26px 0 22px;padding:0;display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.ribbons li{
  background:var(--green);color:var(--white);
  font-family:var(--display);font-weight:700;font-size:clamp(19px,1.5vw,22px);
  padding:11px 30px;
  clip-path:polygon(0 0,100% 0,calc(100% - 15px) 50%,100% 100%,0 100%,15px 50%);
}
.ribbons li:nth-child(2){background:var(--blue)}
.ribbons li:nth-child(3){background:var(--magenta)}
.ribbons li:nth-child(4){background:var(--sky);color:var(--ink)}
.ribbons li:nth-child(5){background:var(--deep)}
.ribbons.wide li{font-size:clamp(19px,1.6vw,24px);padding:13px 34px}

/* ——— Isprekidani „put" ——— */
.road{height:7px;margin:34px 0;
  background:repeating-linear-gradient(90deg,currentColor 0 44px,transparent 44px 76px);
  opacity:.85}
.field .road{color:var(--white)}

/* ——— „Šta je SHARP" ——— */
.intro{background:var(--paper)}
.spaja{margin-top:54px;max-width:760px;position:relative;z-index:2}
.spaja-uvod{font-family:var(--display);font-weight:800;font-size:clamp(18px,1.5vw,22px);color:var(--ink);margin:0}
.spaja-ishod{color:var(--muted);max-width:52ch;margin:16px 0 18px}

/* ——— „Kako izgleda SHARP avantura" (plava površina) ——— */
.journey{background:var(--blue)!important;padding-top:96px}
.journey h2 em{font-style:italic}
.journey-intro{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:34px;max-width:1100px}
.journey-intro p{color:#e6ecfb;margin:0;font-size:16px;line-height:1.65}
.journey .photo-caption,.journey .section-top{color:#dfe6f8}
.step.plate{background:var(--white);border:0;box-shadow:none;border-radius:0}
.step.plate p{color:var(--muted)}
.step.plate.active{background:var(--white);transform:none}
.step-label{color:var(--blue)}

/* ——— „Zašto nam vjeruju" (zelena površina) ——— */
.povjerenje{padding-top:96px;padding-bottom:225px}
.povjerenje h2{font-family:var(--display);font-weight:800;letter-spacing:-.04em;line-height:1.04;
  font-size:clamp(42px,4.4vw,68px);margin-bottom:18px}
.povjerenje-uvod{font-weight:700;font-size:clamp(19px,1.6vw,23px);line-height:1.45;max-width:58ch;color:var(--white);margin:0}
.dokaz-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:26px;align-items:start}
.dokaz-kolona{display:grid;gap:26px}
.dokaz-foto img{width:100%;height:auto;display:block;margin-top:18px}
.nagrada-mjesto{font-family:var(--display);font-weight:800;font-size:clamp(28px,2.6vw,38px);
  letter-spacing:-.04em;color:var(--blue);margin:18px 0 4px}
.nagrada-ime{font-family:var(--display);font-weight:700;font-size:18px;color:var(--ink);margin-bottom:2px}
.nagrada-org{font-size:14px;color:var(--muted)}
.podrska-uvod{font-family:var(--display);font-weight:800;color:var(--ink);margin-bottom:8px}
.podrska{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.podrska li{position:relative;padding-left:18px;color:var(--muted);font-size:15px}
.podrska li:before{content:'';position:absolute;left:0;top:8px;width:8px;height:8px;background:var(--green)}
.ekosistem-blok{margin-top:52px;max-width:1000px}
.ekosistem-blok h3{font-family:var(--display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(23px,2.1vw,31px);color:var(--white);margin-bottom:12px}
.ekosistem-blok>p{color:var(--white);font-weight:700;font-size:19px;max-width:62ch}
.ko-smo-mi{margin-top:40px;max-width:60ch;font-weight:700;font-size:clamp(19px,1.5vw,21px);color:var(--white)}
.ko-smo-mi b{display:block;font-weight:800}

/* ——— Nove teme ——— */
.teme{padding-bottom:225px}
.teme-grid{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center}
.teme h2{font-family:var(--display);font-weight:800;letter-spacing:-.04em;line-height:1.06;
  font-size:clamp(38px,4vw,62px)}
.teme h2 span{color:var(--blue)}
.teme p{color:var(--muted)}
.types-label{font-size:10px;letter-spacing:1.8px;font-weight:700;color:var(--muted);margin:46px 0 0}

/* ——— Za roditelje ——— */
.parents{background:var(--paper)}
.drugacije-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:46px;align-items:start;margin-top:44px}
.check-list,.star-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.check-list li,.star-list li{position:relative;padding-left:38px;font-family:var(--display);
  font-weight:700;font-size:clamp(16px,1.35vw,19px);line-height:1.35;color:var(--ink)}
.check-list li:before{content:'';position:absolute;left:0;top:1px;width:22px;height:22px;
  background:var(--magenta);
  clip-path:polygon(50% 0,100% 26%,100% 74%,50% 100%,0 74%,0 26%)}
.check-list li:after{content:'';position:absolute;left:6px;top:9px;width:10px;height:5px;
  border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg)}
.star-list li{font-weight:600;font-size:16px;color:var(--muted)}
.star-list li:before{content:'✳';position:absolute;left:0;top:-2px;color:var(--blue);font-size:19px}
.prakticno h3{margin-bottom:16px}
.rezultat{margin-top:60px;max-width:760px}
.rezultat-naslov{font-family:var(--display);font-weight:800;font-size:clamp(30px,2.8vw,42px);
  letter-spacing:-.04em;color:var(--green);margin-bottom:18px}
.rezultat-plocica{background:var(--yellow);color:var(--ink);display:inline-block;
  font-family:var(--display);font-weight:700;font-size:clamp(16px,1.4vw,20px);line-height:1.4;
  padding:16px 26px;margin:0 0 14px;
  clip-path:polygon(0 4px,10px 0,calc(100% - 14px) 2px,100% 12px,calc(100% - 6px) calc(100% - 12px),calc(100% - 18px) 100%,12px calc(100% - 3px),2px calc(100% - 14px));
  filter:drop-shadow(4px 6px 0 var(--plate-shadow))}
.rezultat-plocica.jedan{transform:rotate(-1.6deg)}
.rezultat-plocica.dva{transform:rotate(1.2deg)}

/* ——— Za partnere (magenta površina) ——— */
.partneri{padding-top:96px;padding-bottom:225px}
.partneri h2{font-family:var(--display);font-weight:800;letter-spacing:-.04em;line-height:1.04;
  font-size:clamp(40px,4.2vw,64px);margin-bottom:16px}
.partneri-uvod{font-weight:700;font-size:clamp(19px,1.6vw,23px);max-width:52ch;color:var(--white);margin:0 0 44px}
.partneri-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.partner h3.chip-label{margin-bottom:16px}
.partner ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.partner ul li{position:relative;padding-left:18px;color:var(--muted);font-size:15px;line-height:1.5}
.partner ul li:before{content:'';position:absolute;left:0;top:8px;width:7px;height:7px;background:var(--magenta)}

/* ——— Kontakt (plava površina) ——— */
.kontakt{padding-top:96px;padding-bottom:250px;overflow:hidden}
.kontakt h2{font-family:var(--display);font-weight:800;letter-spacing:-.04em;line-height:1.06;
  font-size:clamp(38px,4vw,62px);max-width:18ch;margin-bottom:16px}
.kontakt-uvod{font-weight:700;font-size:clamp(18px,1.5vw,22px);color:#e6ecfb;margin:0 0 34px}
.kontakt-lista{list-style:none;margin:0;padding:0;display:grid;gap:14px;max-width:560px}
.kontakt-lista li,.kontakt-lista a{font-family:var(--display);font-weight:700;
  font-size:clamp(16px,1.4vw,20px);color:var(--white);display:flex;align-items:baseline;gap:12px}
.kontakt-lista a{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px;
  text-decoration-color:rgba(255,255,255,.45)}
.kontakt-lista a:hover{text-decoration-color:var(--white)}
.kontakt-oznaka{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:#bcc8ec;
  min-width:74px;font-weight:800}
.scena{position:absolute;right:4%;bottom:74px;width:min(300px,34vw);pointer-events:none}
.scena img{width:100%;height:auto;display:block;filter:drop-shadow(4px 6px 0 rgba(0,0,0,.14))}
.road-bijeli{position:absolute;left:0;right:0;bottom:40px;margin:0}

/* ——— Podnožje ——— */
footer{background:var(--paper)}
.footer-slogan{color:var(--blue)}

/* ——— Uvod u slagalicu ——— */
.igra-uvod{max-width:56ch;color:var(--muted);margin:-8px 0 26px}

/* ——— Mjesta ukrasa po sekcijama (bez ovoga padnu preko naslova) ——— */
.decor-povjerenje{top:14px;right:5%;width:250px;height:150px}
.decor-roditelji{top:10px;right:7%;width:235px;height:145px}
.decor-partneri{top:12px;right:5%;width:250px;height:150px}
.decor-teme{top:8px;right:5%;width:250px;height:150px}
@media(max-width:760px){
  .decor-povjerenje,.decor-roditelji,.decor-partneri,.decor-teme{top:2px;right:2%;width:165px;height:100px}
}

/* ——— Likovi na novim sekcijama ——— */
.povjerenje,.partneri,.kontakt,.teme{position:relative}
.povjerenje>.character{left:9%;right:auto}
.kontakt>.character{left:10%;right:auto}

@media(max-width:1100px){
  .partneri-grid{grid-template-columns:1fr}
  .dokaz-grid{grid-template-columns:1fr}
  .journey-intro{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .chip-label{font-size:9px;padding:9px 18px 9px 13px;margin-bottom:20px}
  .plate{padding:24px 20px}
  .journey{padding-top:70px}
  .journey-intro{grid-template-columns:1fr;gap:14px;margin-top:26px}
  .journey-intro p{font-size:14px}
  .road{margin:26px 0;height:6px;
    background:repeating-linear-gradient(90deg,currentColor 0 26px,transparent 26px 46px)}
  .povjerenje,.partneri,.kontakt{padding-top:70px}
  .povjerenje h2{font-size:clamp(33px,8.5vw,48px)}
  .povjerenje-uvod,.partneri-uvod{font-size:19px}
  .kontakt-uvod{font-size:17px}
  .dokaz-grid,.dokaz-kolona{gap:18px}
  .ekosistem-blok{margin-top:38px}
  .teme-grid{grid-template-columns:1fr;gap:22px}
  .drugacije-grid{grid-template-columns:1fr;gap:30px;margin-top:32px}
  .check-list li,.star-list li{font-size:15px;padding-left:32px}
  .rezultat{margin-top:44px}
  .ribbons li{font-size:19px;padding:10px 24px}
  .ribbons.wide li{font-size:19px;padding:11px 26px}
  .kontakt h2{font-size:clamp(31px,8vw,46px)}
  .kontakt-lista li,.kontakt-lista a{font-size:15px;flex-direction:column;gap:2px}
  .kontakt-oznaka{min-width:0}
  .scena{width:150px;right:3%;bottom:64px}
  .spaja{margin-top:38px}
}
@media(prefers-reduced-motion:reduce){
  .rezultat-plocica{transform:none}
}

/* playful.css daje SVAKOM direktnom djetetu sekcije position:relative,
   pa apsolutno pozicionirani ukrasi moraju da se nametnu. */
.scena{position:absolute!important}
.road-bijeli{position:absolute!important}
.partner h3.chip-label{font-size:clamp(15px,1.35vw,20px);letter-spacing:.3px;padding:10px 26px 10px 18px}

/* ——— „Složi lika": drugi list papira, tamnija plava, pocijepan s obje strane ——— */
.builder{background:var(--deep)!important;clip-path:var(--tear-b);padding-top:104px;padding-bottom:104px}
.igra-uvod{color:#d6dffa;max-width:56ch;margin:-10px 0 30px}
.builder .chip-label{background:var(--white);color:var(--deep)}
@media(max-width:760px){.builder{padding-top:74px;padding-bottom:74px}}

/* Pločice ekosistema su bijele — tekst mora biti tamni, ne naslijeđeni bijeli. */
.eko-types li{color:var(--ink)}

/* ——— Kontrast (WCAG AA) ——— */
:root{--green-traka:#14913f;--green-tekst:#0f7a35}
.ribbons li{background:var(--green-traka)}
.ribbons li:nth-child(4){background:var(--sky);color:var(--ink)}
.rezultat-naslov{color:var(--green-tekst)}
p.chip-label{color:var(--white)}
p.chip-label.light,.builder p.chip-label{color:var(--deep)}
.kontakt-oznaka{color:#dbe3f7}
/* Sticky fotografija na telefonu je imala svijetlu podlogu ispod bijelog potpisa. */
.journey .journey-visual{background:var(--blue)}
.journey .photo-caption{color:#eef2fd}
/* Ime lika na obojenoj površini dobija svoju papirnu pločicu. */

.journey .photo-caption span{color:#fff;opacity:1;font-size:9px}
/* Donji klaster na zelenoj ide desno da ne pada preko Šarpice. */
.povjerenje .bottom-cluster{left:auto;right:6%}
/* Lik i njegov potpis ne smiju da upadnu u pocijepanu ivicu. */
.field>.character,.builder>.character{bottom:42px}

/* ═══════════ DUGMAD — oblik iz brošure: ravna boja, zasječen ugao, pomjerena sjenka ═══════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:space-between;gap:26px;
  font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.1px;line-height:1.15;
  min-height:54px;padding:16px 26px 16px 22px;border:0;border-radius:0;cursor:pointer;
  background:var(--deep);color:var(--white);text-align:left;
  clip-path:polygon(0 0,100% 0,100% 60%,calc(100% - 16px) 100%,0 100%);
  filter:drop-shadow(4px 6px 0 var(--plate-shadow));
  transition:transform .2s,background .2s,filter .2s;
}
.btn span{font-size:19px;line-height:1}
.btn:hover{transform:translateY(-2px);filter:drop-shadow(5px 8px 0 var(--plate-shadow))}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:5px;clip-path:none}
.btn-primary{background:var(--deep);color:var(--white)}
.btn-primary:hover{background:var(--blue)}
.btn-secondary{background:var(--white);color:var(--deep)}
.btn-secondary:hover{background:#fff}
.btn-light{background:var(--white);color:var(--deep)}
.btn-light:focus-visible{outline-color:var(--white)}
.btn-nav{background:var(--yellow);color:var(--ink);min-height:48px;padding:14px 22px 14px 18px;font-size:14px;gap:18px}
.btn-nav:hover{background:#ffe600}
.btn-red{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 18px}

/* Dugmad u slagalici i u herou dobijaju isti oblik. */
#assemble,#bring-alive,#build-undo,#build-reset{
  font-family:var(--display);font-weight:800;border:0;border-radius:0;
  clip-path:polygon(0 0,100% 0,100% 60%,calc(100% - 12px) 100%,0 100%);
  filter:drop-shadow(3px 4px 0 rgba(30,47,99,.18));min-height:44px}
#bring-alive{background:var(--yellow);color:var(--ink)}
#build-undo,#build-reset{background:var(--white);color:var(--deep);padding:11px 22px 11px 16px}
#assemble{background:var(--white);color:var(--deep);padding:12px 20px 12px 14px}
#assemble:before,#bring-alive:before{display:none}

/* Pozivi na akciju u obojenim sekcijama */
.journey-cta{margin-top:44px}
.partneri-cta{margin-top:38px}
.kontakt-cta{margin:0 0 26px}

/* ═══════════ Posljedice novih tekstova ═══════════ */
.hero h1{max-width:13ch}
.hero-description{font-family:var(--display);font-weight:700;font-size:clamp(16px,1.3vw,20px);
  line-height:1.45;color:var(--ink);max-width:40ch;margin-bottom:26px}
.hero-bottom p{font-weight:600}
.parents-title{margin-bottom:0}
.povjerenje-uvod p{font-weight:700;font-size:clamp(19px,1.55vw,22px);line-height:1.45;
  max-width:56ch;color:var(--white);margin:0 0 12px}
.povjerenje-uvod p:last-child{margin-bottom:0}
.dokaz-razvoj .podrska li{font-size:16px}
.kontakt-uvod b{display:block;font-weight:800}

@media(max-width:760px){
  .btn{width:100%;font-size:14px;min-height:52px;padding:15px 20px 15px 18px;gap:14px}
  .btn-red{flex-direction:column;gap:11px}
  .btn-nav{width:auto}
  .hero-description{font-size:15px;margin-bottom:20px;max-width:none}
  .hero h1{max-width:none}
  .journey-cta,.partneri-cta{margin-top:30px}
}
/* Naslov je sad slogan (dvije rečenice) — mora da se prelama, ne da bježi iz kolone. */
.hero h1{white-space:normal;font-size:clamp(40px,4.3vw,64px);line-height:1.05;
  letter-spacing:-.045em;max-width:15ch;margin-bottom:22px}
.hero h1>span{color:var(--blue)}
@media(max-width:760px){.hero h1{font-size:clamp(31px,8.4vw,46px);letter-spacing:-.03em;margin-bottom:14px}}
.hero h1 span br{display:inline}
@media(max-width:400px){.hero h1 span br{display:none}}
.spaja .btn{margin-top:16px}
/* Lena stoji uz auto, ne preko kontakata. */
.kontakt>.character{left:auto;right:27%}
@media(max-width:760px){.kontakt>.character{right:auto;left:6%}}

/* ——— Ispravke na telefonu ——— */
@media(max-width:760px){
  .btn-nav{display:none}          /* Kontakt je u mobilnom meniju */
  .hero{min-height:840px}
  .hero-lab{top:54%}
  .hero-scroll-note{margin-bottom:6px}
}
@media(max-width:360px){.hero-lab{top:57%}}
/* brand-finish.css gura background:transparent!important na dugmad slagalice */
#assemble{background:var(--white)!important;color:var(--deep)!important}
#bring-alive{background:var(--yellow)!important;color:var(--ink)!important}
@media(max-width:760px){
  .kontakt-lista li,.kontakt-lista a{display:block}
  .kontakt-oznaka{display:block;margin-bottom:2px}
}

/* ═══════════ Logotipi partnera / ekosistema ═══════════ */
.logo-ploca{margin-top:34px;padding:30px 26px}
.logo-mreza{list-style:none;margin:0;padding:0;display:grid;gap:10px 18px;
  grid-template-columns:repeat(5,1fr);--logo-h:46px}
.logo-mreza li{display:flex;align-items:center;justify-content:center;
  min-height:78px;padding:6px 8px;text-align:center}
.logo-mreza a{display:flex;align-items:center;justify-content:center;min-height:44px;width:100%}
.logo-mreza img.logo{
  height:calc(var(--logo-h) * var(--f,1));width:auto;max-width:100%;
  object-fit:contain;display:block;
  transition:transform .2s,filter .2s}
.logo-mreza a:hover img.logo{transform:translateY(-2px)}
.logo-mreza a:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
/* Ko nema zvaničan logo — pločica sa nazivom u istom ritmu. */
.logo-nema span,.logo-nema a{display:flex;align-items:center;justify-content:center;
  min-height:44px;font-family:var(--display);font-weight:700;font-size:14px;line-height:1.25;
  color:var(--ink);letter-spacing:-.1px}
.logo-nema a{text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:rgba(30,47,99,.3)}
.logo-nema a:hover{text-decoration-color:var(--blue)}

/* Manji red ispod „Projekat je podržan od strane" */
.logo-red{grid-template-columns:repeat(3,1fr);--logo-h:32px;gap:8px 12px;margin-top:6px}
.logo-red li{min-height:54px;padding:4px}
.logo-red .logo-nema span,.logo-red .logo-nema a{font-size:12.5px;min-height:40px}

@media(max-width:1100px){
  .logo-mreza{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  .logo-ploca{margin-top:26px;padding:22px 16px}
  .logo-mreza{grid-template-columns:repeat(2,1fr);gap:8px 12px;--logo-h:32px}
  .logo-mreza li{min-height:64px}
  .logo-nema span,.logo-nema a{font-size:12.5px}
  .logo-red{grid-template-columns:repeat(2,1fr);--logo-h:26px}
  .logo-red li{min-height:46px}
}

/* ═══════════════════════════════════════════════════════════════
   SREĐIVANJE (22.09): jedan dosljedan sistem prelaza.
   Pravilo: svaka obojena površina ima POCIJEPAN GORNJI rub i
   preklapa prethodnu za visinu zuba, pa se kroz zube vidi ono
   ISPOD (prethodna boja ili papir) — nikad pukotina.
   Donji rub se sijeku samo kad poslije dolazi papir.
   Zub je svuda isti: 2–14 px, isti ritam, isto poravnanje.
   ═══════════════════════════════════════════════════════════════ */
:root{--zub:14px;
  --rez-gore:polygon(0.0% 14px,5.0% 10px,10.0% 14px,15.0% 14px,20.0% 2px,25.0% 12px,30.0% 2px,35.0% 14px,40.0% 2px,45.0% 2px,50.0% 7px,55.0% 14px,60.0% 10px,65.0% 2px,70.0% 9px,75.0% 11px,80.0% 5px,85.0% 2px,90.0% 6px,95.0% 2px,100.0% 14px,100% 100%,0 100%);
  --rez-oba:polygon(0.0% 14px,5.0% 10px,10.0% 14px,15.0% 14px,20.0% 2px,25.0% 12px,30.0% 2px,35.0% 14px,40.0% 2px,45.0% 2px,50.0% 7px,55.0% 14px,60.0% 10px,65.0% 2px,70.0% 9px,75.0% 11px,80.0% 5px,85.0% 2px,90.0% 6px,95.0% 2px,100.0% 14px,100.0% calc(100% - 2px),95.0% calc(100% - 2px),90.0% calc(100% - 6px),85.0% calc(100% - 2px),80.0% calc(100% - 14px),75.0% calc(100% - 14px),70.0% calc(100% - 14px),65.0% calc(100% - 14px),60.0% calc(100% - 14px),55.0% calc(100% - 6px),50.0% calc(100% - 14px),45.0% calc(100% - 14px),40.0% calc(100% - 14px),35.0% calc(100% - 2px),30.0% calc(100% - 2px),25.0% calc(100% - 2px),20.0% calc(100% - 14px),15.0% calc(100% - 6px),10.0% calc(100% - 2px),5.0% calc(100% - 14px),0.0% calc(100% - 6px));
}
/* stari profili se gase */
.tear-a,.tear-b,.tear-c{clip-path:none}


main>section.cut-top{clip-path:var(--rez-gore);margin-top:calc(-1 * var(--zub))}
main>section.cut-top.cut-bottom{clip-path:var(--rez-oba)}
/* „Složi lika" je drugi list papira iste porodice */
main>section.builder{clip-path:var(--rez-gore);margin-top:calc(-1 * var(--zub))}

/* ——— Ujednačeni razmaci i poravnanje svih sekcija ——— */
main>section.section-pad,main>section.builder{
  padding-top:112px;padding-bottom:112px;padding-left:6%;padding-right:6%}
main>section.field{padding-top:calc(112px + var(--zub))}
/* sekcije sa maskotom dobijaju prostor za nju */
main>section.intro,main>section.journey,main>section.povjerenje,
main>section.teme,main>section.parents,main>section.partneri,main>section.kontakt{
  padding-bottom:210px}
main>section h2{margin-bottom:22px}
main>section .chip-label{margin-bottom:24px}
@media(min-width:1600px){
  main>section.section-pad,main>section.builder{
    padding-left:max(6%,calc((100vw - 1500px)/2));padding-right:max(6%,calc((100vw - 1500px)/2))}
}
@media(max-width:760px){
  main>section.section-pad,main>section.builder{
    padding-top:70px;padding-bottom:70px;padding-left:6%;padding-right:6%}
  main>section.field{padding-top:calc(70px + var(--zub))}
  main>section.intro,main>section.journey,main>section.povjerenje,
  main>section.teme,main>section.parents,main>section.partneri,main>section.kontakt{
    padding-bottom:165px}
  main>section h2{margin-bottom:16px}
}

/* ——— Maskote stoje slobodno: bez bijele kartice, bez sjenke, bez natpisa ——— */
.section-pad>.character{bottom:30px;width:175px}
.section-pad>.character img{background:none;padding:0;clip-path:none;filter:none;max-height:215px}
/* ime lika ostaje za citace ekrana, ali se ne prikazuje */
.section-pad>.character figcaption{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Sitnice poslije sređivanja */
main>section.povjerenje{padding-bottom:250px}
.teme h2{font-size:clamp(34px,3.4vw,52px)}
@media(max-width:760px){
  main>section.povjerenje{padding-bottom:190px}
  .teme h2{font-size:clamp(29px,7.6vw,42px)}
}

/* ——— Ministarstva: zajednički logo Vlade Crne Gore + naziv ispod (kako se i inače prikazuju) ——— */
.logo-mreza li{min-height:92px}
.logo-sa-nazivom a{flex-direction:column;gap:7px}
.logo-sa-nazivom span{font-family:var(--display);font-weight:700;font-size:11.5px;line-height:1.25;
  letter-spacing:-.1px;color:var(--ink);text-align:center;max-width:22ch}
.logo-red li{min-height:70px}
.logo-red .logo-sa-nazivom span{font-size:10px;max-width:20ch}
@media(max-width:760px){
  .logo-mreza li{min-height:80px}
  .logo-sa-nazivom span{font-size:10.5px}
  .logo-red li{min-height:62px}
}

/* ═══════════ Popravka zelene sekcije (22.09): ravnomjerne ploče + fotografija kao traka ═══════════ */
/* Bilo: velika ploča sa fotografijom lijevo i dvije male desno -> zelena rupa od ~115 px.
   Sad: tri jednake ploče u redu, pa fotografija kao zasebna traka pune širine. */
.dokaz-grid{grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.dokaz-grid>.plate{display:flex;flex-direction:column;height:100%}
.dokaz-grid>.plate{justify-content:flex-start}
.dokaz-razvoj .logo-red{margin:0}
.dokaz-slika{margin:24px 0 0;padding:14px}
.dokaz-slika img{width:100%;height:clamp(170px,22vw,320px);max-height:35vh;object-fit:cover;object-position:center 45%;display:block}
.logo-red{grid-template-columns:repeat(3,1fr);--logo-h:30px;gap:6px 10px}
.logo-red li{min-height:64px;padding:2px}

/* Sidra: naslov nikad ispod ljepljivog zaglavlja */
main>section[id]{scroll-margin-top:calc(var(--sticky-height, 72px) + 24px)}

@media(max-width:1100px){
  .dokaz-grid{grid-template-columns:1fr 1fr}
  .dokaz-grid>.plate:last-child{grid-column:1 / -1}
  .dokaz-slika img{height:clamp(170px,24vw,280px)}
}
@media(max-width:760px){
  .dokaz-grid{grid-template-columns:1fr;gap:18px}
  .dokaz-grid>.plate:last-child{grid-column:auto}
  .dokaz-slika{margin:18px 0 0;padding:10px}
  .dokaz-slika img{height:clamp(150px,42vw,210px);max-height:30vh}
  .logo-red{grid-template-columns:repeat(3,1fr);--logo-h:24px}
  .logo-red li{min-height:56px}
}

/* Potpis izradjivaca u futeru. */
.autor{font-size:11px;color:var(--muted);white-space:nowrap}
.autor b{color:var(--ink);font-weight:600}
.autor:hover b{color:var(--blue)}
@media(max-width:760px){.autor{grid-column:1/-1;text-align:center}}

/* ═══════════ „Šta je SHARP?" — dvije ravnomjerne kolone, bez praznine ═══════════ */
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:6%;align-items:start}
.intro-lijevo h2{margin-bottom:26px}
.intro-lijevo .intro-copy p:first-child{font-family:var(--display);font-weight:800;
  font-size:clamp(19px,1.6vw,24px);line-height:1.3;color:var(--ink);margin-bottom:16px}
.intro-lijevo .intro-copy p{color:var(--muted)}
.spaja{margin-top:0;max-width:none}
.spaja-uvod{margin-bottom:6px}
/* Trake stepenasto, kao u desnoj koloni brošure */
.ribbons.stepenasto li:nth-child(2){margin-left:22px}
.ribbons.stepenasto li:nth-child(3){margin-left:44px}
.ribbons.stepenasto li:nth-child(4){margin-left:66px}
.ribbons.stepenasto li:nth-child(5){margin-left:88px}
/* Lik u ovoj sekciji je krupniji i sjedi uz donju ivicu teksta */
.intro>.character{width:215px;right:9%;bottom:24px}
.intro>.character img{max-height:270px}

@media(max-width:900px){
  .intro-grid{grid-template-columns:1fr;gap:34px}
  .ribbons.stepenasto li:nth-child(2){margin-left:14px}
  .ribbons.stepenasto li:nth-child(3){margin-left:28px}
  .ribbons.stepenasto li:nth-child(4){margin-left:42px}
  .ribbons.stepenasto li:nth-child(5){margin-left:56px}
}
@media(max-width:760px){
  .section-pad>.character{width:108px;bottom:22px}
  .section-pad>.character img{max-height:140px}
  .intro>.character{width:122px;right:6%;bottom:18px}
  .intro>.character img{max-height:160px}
  .ribbons.stepenasto li:nth-child(n){margin-left:0}
}

/* Rečenica iz brošure ide ispod trakica, pa dugme */
.spaja .spaja-ishod{margin:18px 0 20px;max-width:46ch;color:var(--muted)}
/* Put na dnu sekcije — lik stoji na njemu (isti motiv kao u ostalim sekcijama) */
.intro{position:relative}
.intro-put{position:absolute!important;left:0;right:0;bottom:70px;margin:0;
  color:var(--blue);opacity:.55;z-index:0}
.intro>.character{left:9%;right:auto;bottom:66px;width:255px}
.intro>.character img{max-height:330px}
main>section.intro{padding-bottom:180px}
@media(max-width:760px){
  .intro-put{bottom:56px}
  .intro>.character{left:6%;right:auto;bottom:52px;width:132px}
  .intro>.character img{max-height:172px}
  main>section.intro{padding-bottom:150px}
}

/* Desna kolona „Šta je SHARP?" sjedi na papirnoj ploči — manje gole pozadine, isti jezik */
.spaja{background:var(--white);color:var(--ink);padding:34px 32px;
  clip-path:polygon(0 6px,14px 0,calc(100% - 22px) 3px,100% 14px,calc(100% - 4px) calc(100% - 18px),calc(100% - 20px) 100%,18px calc(100% - 4px),3px calc(100% - 16px));
  filter:drop-shadow(5px 7px 0 var(--plate-shadow))}
.spaja .spaja-ishod{margin:16px 0 18px}
main>section.intro{padding-top:92px}
.intro-lijevo h2{font-size:clamp(42px,4.6vw,72px)}
@media(max-width:900px){.spaja{padding:26px 22px}}
@media(max-width:760px){main>section.intro{padding-top:64px}}
/* Gušći vrh sekcije — manje gole pozadine u prvom ekranu */
main>section.intro{padding-top:70px}
.intro .chip-label{margin-bottom:18px}
.intro-lijevo h2{margin-bottom:20px}
@media(max-width:760px){main>section.intro{padding-top:56px}}
/* Na širokim ekranima sadržaj koristi više širine (manje golih bočnih traka) */
@media(min-width:1600px){
  main>section.section-pad,main>section.builder{
    padding-left:max(5%,calc((100vw - 1680px)/2));padding-right:max(5%,calc((100vw - 1680px)/2))}
}
.intro-grid{gap:5%}
.intro>.character{width:320px;bottom:62px;left:7%}
.intro>.character img{max-height:420px}
@media(max-width:1100px){.intro>.character{width:210px} .intro>.character img{max-height:270px}}
/* Lik ide IZA teksta, nikad preko njega */
.section-pad>.character{z-index:1}
.intro>.character{bottom:54px}