:root{
  --lime:#ABD94C;
  --forest:#007830;
  --tamna:#06371D;
  --papir:#F7FAF2;
  --tekst:#22352A;
  --linija:rgba(0,120,48,.14);
  --font-d:'Fraunces',serif;
  --font-b:'Manrope',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-b);color:var(--tekst);background:var(--papir);line-height:1.65;font-size:16px}
::selection{background:var(--lime);color:var(--tamna)}
img{max-width:100%}

/* ---------- NAV ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:16px 5vw;transition:background .35s,box-shadow .35s}
nav.scrolled,nav.svetli{background:rgba(247,250,242,.94);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--linija)}
.logo{display:inline-flex;align-items:center;gap:2px;text-decoration:none;font-family:var(--font-b);font-weight:800;font-size:1.3rem;letter-spacing:.02em}
.logo .l-ekos{color:var(--lime)}
.logo .l-up{color:#fff;transition:color .35s}
nav.scrolled .logo .l-up,nav.svetli .logo .l-up{color:var(--forest)}
.logo svg{width:52px;height:26px;margin:0 4px}
.nav-links{display:flex;gap:34px;list-style:none;align-items:center}
.nav-links a{color:rgba(255,255,255,.88);text-decoration:none;font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;transition:color .25s}
nav.scrolled .nav-links a,nav.svetli .nav-links a{color:var(--tekst)}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--lime)}
nav.scrolled .nav-links a:hover,nav.svetli .nav-links a:hover{color:var(--forest)}
.nav-links a.aktivna{color:var(--lime)}
nav.scrolled .nav-links a.aktivna,nav.svetli .nav-links a.aktivna{color:var(--forest);border-bottom:2px solid var(--lime)}
a:focus-visible,button:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:2px}

/* hamburger */
.hamb{display:none;background:none;border:none;cursor:pointer;width:44px;height:44px;position:relative;z-index:60}
.hamb span{display:block;width:26px;height:2.5px;background:#fff;margin:6px auto;border-radius:2px;transition:transform .3s,opacity .3s,background .3s}
nav.scrolled .hamb span,nav.svetli .hamb span,nav.otvoren .hamb span{background:var(--forest)}
nav.otvoren .hamb span:nth-child(1){transform:translateY(8.5px) rotate(45deg)}
nav.otvoren .hamb span:nth-child(2){opacity:0}
nav.otvoren .hamb span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)}
@media(max-width:860px){
  .hamb{display:block}
  .nav-links{position:fixed;inset:0;background:var(--papir);flex-direction:column;justify-content:center;gap:30px;
    transform:translateX(100%);transition:transform .35s ease;z-index:55}
  nav.otvoren .nav-links{transform:none}
  .nav-links a{color:var(--forest)!important;font-size:1.05rem}
}

/* ---------- HERO (početna, 3D) ---------- */
header.hero{position:relative;height:100svh;min-height:640px;background:linear-gradient(180deg,#052A16 0%,var(--tamna) 100%);overflow:hidden;display:flex;align-items:flex-end}
#teren{position:absolute;inset:0;width:100%;height:100%}
.hero-veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,55,29,.9) 0%,rgba(6,55,29,.1) 45%,rgba(6,55,29,.4) 100%);pointer-events:none}
.hero-inner{position:relative;z-index:2;padding:0 5vw 11vh;max-width:1200px;width:100%;margin:0 auto}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--lime);display:inline-flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--lime)}
h1{font-family:var(--font-d);font-weight:500;font-size:clamp(2.3rem,6vw,4.4rem);line-height:1.06;color:#fff;margin:20px 0 22px;max-width:16ch}
h1 em{font-style:italic;color:var(--lime)}
.hero-sub{color:rgba(255,255,255,.82);max-width:47ch;font-size:1.05rem}
.hero-cta{margin-top:34px;display:flex;gap:16px;flex-wrap:wrap}
.btn{display:inline-block;padding:15px 30px;border-radius:100px;font-weight:800;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:transform .25s,background .25s,color .25s;border:1px solid transparent;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn-lime{background:var(--lime);color:var(--tamna)}
.btn-lime:hover{background:#bfe66a}
.btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.btn-ghost:hover{border-color:#fff}
.hero-kota{position:absolute;right:5vw;bottom:11vh;z-index:2;text-align:right;color:rgba(255,255,255,.5);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;line-height:2}
@media(max-width:760px){.hero-kota{display:none}}
.hero-swoosh{position:absolute;left:0;right:0;bottom:-2px;z-index:3;display:block;width:100%;height:90px}
.hero-swoosh .sw-fill{fill:var(--papir)}
.sw-line{stroke:var(--lime);stroke-width:3;fill:none;stroke-dasharray:1600;stroke-dashoffset:1600;animation:draw 2.4s ease-out .3s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- PODNASLOVNI HERO (podstranice) ---------- */
header.pod{position:relative;background:linear-gradient(180deg,#052A16 0%,var(--tamna) 100%);padding:150px 5vw 40px;overflow:hidden}
header.pod .wrap{position:relative;z-index:2}
header.pod .hero-swoosh{position:relative;margin:40px calc(-5vw) -42px;height:70px}
.mrvice{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:6px}
.mrvice a{color:var(--lime);text-decoration:none}

/* ---------- SEKCIJE ---------- */
section{padding:100px 5vw;position:relative}
.wrap{max-width:1200px;margin:0 auto}
.plan-bg{background-image:repeating-linear-gradient(0deg,transparent,transparent 47px,var(--linija) 48px),repeating-linear-gradient(90deg,transparent,transparent 47px,var(--linija) 48px);background-size:48px 48px}
h2{font-family:var(--font-d);font-weight:500;font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.12;color:var(--forest);margin:16px 0 18px;max-width:22ch}
.sec-eyebrow{color:var(--forest)}
.sec-eyebrow::before{background:var(--forest)}
.lead{max-width:62ch;font-size:1.05rem}

/* faze / kartice */
.faze{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:64px}
@media(max-width:920px){.faze{grid-template-columns:1fr}}
.faza{background:#fff;border:1px solid var(--linija);border-radius:18px;padding:38px 32px;position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s;display:block;text-decoration:none;color:inherit}
.faza::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:linear-gradient(90deg,var(--forest),var(--lime));transform:scaleX(0);transform-origin:left;transition:transform .5s ease}
.faza:hover{transform:translateY(-6px);box-shadow:0 24px 48px -24px rgba(0,120,48,.35)}
.faza:hover::after{transform:scaleX(1)}
.faza-br{font-family:var(--font-d);font-size:.95rem;color:var(--forest);letter-spacing:.1em;font-weight:600}
.faza h3{font-family:var(--font-d);font-weight:600;font-size:1.45rem;color:var(--forest);margin:10px 0 14px}
.faza p{font-size:.95rem;color:#3d4f43}
.faza ul{margin:16px 0 0;padding:0;list-style:none;font-size:.9rem;color:#3d4f43}
.faza li{padding:9px 0 9px 26px;border-top:1px dashed var(--linija);position:relative}
.faza li::before{content:"";position:absolute;left:2px;top:16px;width:10px;height:10px;border:2px solid var(--lime);border-radius:50%}
.faza .dalje{display:inline-block;margin-top:18px;font-weight:800;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--forest)}
.ikona{width:54px;height:54px;margin-bottom:16px;display:block}
.ik-olovka .crta{stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset 1.2s ease}
.faza:hover .ik-olovka .crta{stroke-dashoffset:0}
.ik-list .listic{transform-origin:27px 46px;transform:scale(.2);opacity:0;transition:transform .8s cubic-bezier(.2,1.4,.4,1),opacity .4s}
.faza:hover .ik-list .listic{transform:scale(1);opacity:1}
.ik-kap .kap{opacity:0;transition:opacity .3s,transform .9s ease}
.faza:hover .ik-kap .kap{opacity:1;transform:translateY(14px)}

/* detaljne stavke usluga na podstranicama */
.usl-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:56px}
@media(max-width:860px){.usl-grid{grid-template-columns:1fr}}
.usl{background:#fff;border:1px solid var(--linija);border-radius:14px;padding:30px}
.usl h3{font-family:var(--font-d);color:var(--forest);font-weight:600;font-size:1.2rem;margin-bottom:10px}
.usl p{font-size:.95rem;color:#3d4f43}

/* marquee */
.klijenti{background:#fff;border-top:1px solid var(--linija);border-bottom:1px solid var(--linija);padding:70px 0}
.klijenti .naslov{max-width:1200px;margin:0 auto 40px;padding:0 5vw}
.marquee{overflow:hidden;position:relative;margin-top:8px}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,#fff,transparent)}
.marquee::after{right:0;background:linear-gradient(-90deg,#fff,transparent)}
.track{display:flex;align-items:center;gap:64px;width:max-content;animation:mq 70s linear infinite;padding:14px 0}
.track.obratno{animation:mq2 80s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.track img{height:52px;width:auto;max-width:150px;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .3s,opacity .3s}
.track img:hover{filter:none;opacity:1}
@keyframes mq{to{transform:translateX(-50%)}}
@keyframes mq2{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* traka brojeva */
.traka{background:var(--forest);color:#fff}
.traka .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;text-align:center}
@media(max-width:760px){.traka .wrap{grid-template-columns:repeat(2,1fr)}}
.stat b{font-family:var(--font-d);font-weight:500;font-size:clamp(2rem,4vw,3rem);display:block;color:var(--lime)}
.stat span{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85}

/* proces */
.proces{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;margin-top:50px}
@media(max-width:920px){.proces{grid-template-columns:1fr}}
.korak{display:flex;gap:22px;padding:22px 0;border-top:1px solid var(--linija)}
.korak:last-child{border-bottom:1px solid var(--linija)}
.korak .kbr{font-family:var(--font-d);color:var(--forest);font-size:1.1rem;min-width:44px;font-weight:600}
.korak h4{font-family:var(--font-d);font-weight:600;color:var(--forest);font-size:1.1rem;margin-bottom:6px}
.korak p{font-size:.92rem;color:#3d4f43}
.citat{font-family:var(--font-d);font-size:1.35rem;color:var(--forest);line-height:1.5}

/* FAQ */
.faq{max-width:820px;margin:56px auto 0}
.faq details{background:#fff;border:1px solid var(--linija);border-radius:12px;margin-bottom:14px;overflow:hidden}
.faq summary{cursor:pointer;padding:20px 24px;font-weight:700;color:var(--forest);list-style:none;position:relative;padding-right:56px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:24px;top:50%;transform:translateY(-50%);font-size:1.4rem;color:var(--lime);transition:transform .3s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq .odg{padding:0 24px 20px;font-size:.95rem;color:#3d4f43}

/* CTA traka na podstranicama */
.cta-traka{background:var(--tamna);text-align:center}
.cta-traka h2{color:#fff;margin-left:auto;margin-right:auto}
.cta-traka .eyebrow{color:var(--lime)}
.cta-traka .eyebrow::before{background:var(--lime)}

/* kontakt sastavnica */
.sastavnica{background:#fff;border:1.5px solid var(--forest);border-radius:4px;max-width:1200px;margin:56px auto 0;display:grid;grid-template-columns:1.2fr 1fr}
@media(max-width:920px){.sastavnica{grid-template-columns:1fr}}
.sast-l{padding:44px;border-right:1.5px solid var(--forest)}
@media(max-width:920px){.sast-l{border-right:none;border-bottom:1.5px solid var(--forest)}}
@media(max-width:560px){.sast-l,.sast-d{padding:28px 22px}}
.sast-red{display:grid;grid-template-columns:130px 1fr;border-bottom:1px solid var(--linija);padding:13px 0;font-size:.95rem}
@media(max-width:560px){.sast-red{grid-template-columns:1fr;gap:2px}}
.sast-red:last-child{border-bottom:none}
.sast-red span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--forest);font-weight:800;padding-top:3px}
.sast-red a{color:var(--forest);font-weight:700;text-decoration:none}
.sast-red a:hover{color:var(--lime)}
.sast-d{padding:44px;background:var(--papir)}
.sast-d label{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--forest);font-weight:800;margin:18px 0 6px}
.sast-d label:first-child{margin-top:0}
.sast-d input,.sast-d textarea{width:100%;border:none;border-bottom:1.5px solid var(--forest);background:transparent;padding:8px 2px;font-family:var(--font-b);font-size:1rem;color:var(--tekst)}
.sast-d input:focus,.sast-d textarea:focus{outline:none;border-bottom-color:var(--lime)}
.sast-d button{margin-top:28px;border:none}

footer{background:var(--tamna);color:rgba(255,255,255,.65);padding:44px 5vw;font-size:.85rem}
footer .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
footer a{color:var(--lime);text-decoration:none}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .track,.track.obratno{animation:none}
  .sw-line{animation:none;stroke-dashoffset:0}
  html{scroll-behavior:auto}
}

/* ---------- DEKORATIVNE ANIMACIJE PO USLUZI (podstranice) ---------- */
.dek{position:absolute;right:5vw;top:120px;width:min(320px,28vw);z-index:1;pointer-events:none}
@media(max-width:860px){.dek{width:180px;opacity:.35;top:auto;bottom:80px}}

/* Projektovanje: kontur-linije plana se iscrtavaju, pa "dišu" */
.dek-plan path{fill:none;stroke:#ABD94C;stroke-width:2;stroke-linecap:round;
  stroke-dasharray:600;stroke-dashoffset:600;animation:crtaj 2.6s ease-out forwards}
.dek-plan path:nth-child(2){animation-delay:.4s;stroke:rgba(171,217,76,.6)}
.dek-plan path:nth-child(3){animation-delay:.8s;stroke:rgba(171,217,76,.35)}
.dek-plan .tacka{fill:#ABD94C;opacity:0;animation:pojava .5s ease 2.2s forwards}
@keyframes crtaj{to{stroke-dashoffset:0}}
@keyframes pojava{to{opacity:1}}

/* Izvođenje: listovi izrastaju iz zemlje, pa se lagano njišu na vetru */
.dek-rast .stablo{stroke:#ABD94C;stroke-width:3;stroke-linecap:round;fill:none;
  stroke-dasharray:200;stroke-dashoffset:200;animation:crtaj 1.6s ease-out forwards}
.dek-rast .list{fill:#ABD94C;transform-origin:var(--ox) var(--oy);transform:scale(0);
  animation:izrasti .9s cubic-bezier(.2,1.4,.4,1) forwards, njihanje 4s ease-in-out 2.2s infinite}
.dek-rast .list.tamni{fill:#4CAF6E}
.dek-rast .list:nth-of-type(2){animation-delay:.9s,2.4s}
.dek-rast .list:nth-of-type(3){animation-delay:1.2s,2.6s}
.dek-rast .list:nth-of-type(4){animation-delay:1.5s,2.8s}
.dek-rast .zemlja{stroke:#ABD94C;stroke-width:3;stroke-linecap:round;opacity:.5}
@keyframes izrasti{to{transform:scale(1)}}
@keyframes njihanje{0%,100%{rotate:0deg}50%{rotate:3deg}}

/* Održavanje: prskalica — mlazevi u luku i kapi koje padaju u travu */
.dek-voda .mlaz{fill:none;stroke:rgba(171,217,76,.65);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:6 10;animation:mlaz 1.6s linear infinite}
.dek-voda .mlaz:nth-child(2){animation-delay:.3s}
.dek-voda .mlaz:nth-child(3){animation-delay:.6s}
.dek-voda .kap{fill:#ABD94C;animation:kapanje 1.8s ease-in infinite}
.dek-voda .kap:nth-of-type(2){animation-delay:.6s}
.dek-voda .kap:nth-of-type(3){animation-delay:1.1s}
.dek-voda .trava{stroke:#ABD94C;stroke-width:2.5;stroke-linecap:round;opacity:.6}
.dek-voda .telo{fill:#ABD94C}
@keyframes mlaz{to{stroke-dashoffset:-32}}
@keyframes kapanje{0%{transform:translateY(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(58px);opacity:0}}

/* Kontakt: pečat "PRIMLJENO" se utiskuje na sastavnicu */
.pecat{position:absolute;right:36px;top:28px;width:110px;height:110px;border:3px solid rgba(0,120,48,.55);
  border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;
  color:rgba(0,120,48,.55);font-weight:800;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  transform:rotate(-12deg) scale(2.4);opacity:0;animation:utisni .5s cubic-bezier(.6,0,.4,1) 1s forwards;line-height:1.5}
@keyframes utisni{to{transform:rotate(-12deg) scale(1);opacity:1}}
@media(max-width:560px){.pecat{display:none}}

@media(prefers-reduced-motion:reduce){
  .dek-plan path,.dek-rast .stablo{animation:none;stroke-dashoffset:0}
  .dek-plan .tacka{animation:none;opacity:1}
  .dek-rast .list{animation:none;transform:scale(1)}
  .dek-voda .mlaz,.dek-voda .kap{animation:none}
  .pecat{animation:none;opacity:1;transform:rotate(-12deg)}
}