/* ==========================================================================
   FOOD.com × Bizerba landing — main.css
   Sustav preuzet s bomag.o-k-teh.hr: bijela stranica, sivi zaobljeni paneli,
   bijele kartice, pill gumbi, sadržaj centriran na mobitelu. Boje: FOOD.com.
   Dio između "critical:start" i "critical:end" kopiran je inline u <head>
   datoteke index.html. Kad mijenjate taj dio, ažurirajte oboje (vidi README).
   ========================================================================== */

/* critical:start */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/montserrat-latin.woff2) format("woff2");unicode-range:U+0020-007E,U+00A0,U+00A9,U+00AB,U+00B0,U+00B7,U+00BB,U+00BD,U+00D7,U+2013-2014,U+2018-201A,U+201C-201E,U+2026,U+20AC}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/montserrat-latin-ext.woff2) format("woff2");unicode-range:U+0106-0107,U+010C-010D,U+0110-0111,U+0160-0161,U+017D-017E}
/* Fallback usklađen s metrikom Montserrata da zamjena fonta ne pomiče layout */
@font-face{font-family:"Montserrat Fallback";src:local("Arial");size-adjust:113%;ascent-override:85.7%;descent-override:22.2%;line-gap-override:0%}

:root{
  --black:#0B0B0B;
  --green:#23A319;
  --green-dark:#1B8013;
  --green-deep:#14660E;
  --ink:#1F2328;
  --text:#333333;
  --muted:#5B6470;
  --bg:#FFFFFF;
  --grey:#F4F6F5;
  --tint:#E4F3E2;
  --line:#D5DAD7;
  --field:#87918C;
  --error:#B42318;
  --radius:24px;
  --radius-btn:999px;
  --wrap:1360px;
  --gutter:16px;
  --section:clamp(64px,7vw,96px);
  --hdr:64px;
  --focus:#0B0B0B;
  --font:"Montserrat","Montserrat Fallback",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
@media (min-width:640px){:root{--hdr:76px}}
@media (min-width:720px){:root{--gutter:24px}}
@media (min-width:960px){:root{--hdr:84px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:16px}
body{margin:0;font-family:var(--font);font-size:1rem;line-height:1.6;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,p,ul,ol,dl,dd,figure,fieldset{margin:0}
ul,ol{padding:0;list-style:none}
fieldset{border:0;padding:0;min-width:0}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
a,button,label,summary,input,select{touch-action:manipulation}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.hdr,.hero,.ftr{--focus:#FFFFFF}

.wrap{width:100%;max-width:calc(var(--wrap) + 2 * var(--gutter));margin-inline:auto;padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.skip{position:absolute;left:12px;top:-80px;z-index:200;padding:12px 18px;border-radius:var(--radius-btn);background:#fff;color:var(--black);font-weight:600;text-decoration:none}
.skip:focus{top:8px;outline-color:var(--green)}

/* Gumbi: pill */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 30px;border:1.5px solid transparent;border-radius:var(--radius-btn);font-weight:600;font-size:.9375rem;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s,transform .1s}
.btn:active{transform:scale(.98)}
.btn--primary{background:var(--green-dark);color:#fff}
.btn--primary:hover{background:var(--green-deep)}
.btn--ghost{border-color:rgba(255,255,255,.6);color:#fff}
.btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn--sm{min-height:44px;padding:0 24px;font-size:.875rem}
.btn--lg{gap:8px;min-height:54px;padding:0 10px;font-size:.9375rem;white-space:nowrap}

/* Header: proziran, leži na fotografiji heroja i odlazi sa skrolanjem.
   Logo uz lijevi rub, navigacija uz desni; ispod 1024px gumb izbornika. */
.hdr{position:relative;z-index:100;height:var(--hdr);background:var(--black);color:#fff}
.hdr--over{position:absolute;top:0;left:0;right:0;background:none}
.hdr__in{position:relative;display:flex;align-items:center;gap:12px;max-width:none;height:100%;padding-inline:clamp(16px,3.4vw,80px)}
.brand{display:block;flex:none}
.brand img{width:auto;height:calc(var(--hdr) * .5)}
.brand__tag{display:none;min-width:0;max-width:190px;margin-left:6px;padding-left:18px;border-left:1px solid rgba(255,255,255,.3);font-size:.75rem;font-weight:600;line-height:1.35;color:rgba(255,255,255,.88)}
.nav{display:none}
.hdr__tel{display:inline-flex;flex:none;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;margin-left:auto;font-weight:600;text-decoration:none;white-space:nowrap}
.hdr__tel .icon{color:var(--green)}
.hdr__tel span{display:none}
.hdr__cta{display:none;flex:none;white-space:nowrap}
.hdr__burger{display:grid;flex:none;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--green-dark);color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.25);cursor:pointer}
.hdr__burger .icon{width:22px;height:22px}
.hdr__burger .icon--close{display:none}
.hdr__burger[aria-expanded="true"] .icon--menu{display:none}
.hdr__burger[aria-expanded="true"] .icon--close{display:block}
@media (min-width:769px){
  .brand__tag{display:block}
  .hdr__tel{padding-inline:8px}
  .hdr__tel span{display:inline}
  .hdr__cta{display:inline-flex}
}
@media (min-width:1024px){
  .hdr__in{gap:0}
  .nav{display:flex;flex:none;gap:clamp(2px,1vw,18px);margin-left:auto}
  .nav a{padding:10px;border-radius:8px;font-size:.9688rem;font-weight:600;white-space:nowrap;text-decoration:none;color:#fff}
  .nav a:hover{color:var(--green)}
  .hdr__tel,.hdr__cta{margin-left:clamp(8px,1.2vw,20px)}
  .hdr__burger{display:none}
}
@media (min-width:1024px) and (max-width:1179px){
  .hdr__tel{padding-inline:0}
  .hdr__tel span{display:none}
}
@media (min-width:1024px) and (max-width:1319px){.brand__tag{display:none}}

/* Hero: fotografija je pozadina heroja.
   Mobitel (<640): visina gotovo cijelog ekrana; naslov i gumbi centrirani na crnoj podlozi na vrhu, fotografija
   (okomiti izrez) izranja ispod njih i ide do dna, a tri prednosti leže preko njezina donjeg dijela.
   Od 640px: fotografija preko cijelog heroja i iza headera; tekst lijevo, prednosti u redu na dnu. */
.hero{position:relative;overflow:hidden;background:var(--black);color:#fff}
.hero__main>.wrap{position:relative;z-index:1}
.hero__copy{padding:calc(var(--hdr) + 26px) 0 0;text-align:center}
.hero__title{font-size:clamp(1.875rem,.5rem + 7.4vw,3rem);font-weight:700;line-height:1.08;letter-spacing:-.025em;text-wrap:balance;overflow-wrap:break-word}
.hero__title::before{content:"";display:block;width:44px;height:4px;margin:0 auto 18px;border-radius:2px;background:var(--green)}
/* istaknuta riječ u naslovu (ime marke) u zelenoj boji logotipa; sjena odvaja naslov od fotografije */
.hero__title .hl{color:var(--green)}
.hero__title{text-shadow:0 2px 22px rgba(0,0,0,.5)}
.hero__cta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:24px}
.hero__media{position:absolute;inset:calc(var(--hdr) + 112px) 0 0;overflow:hidden;background:var(--black)}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
/* mobitel: fotografija počinje iza naslova i blagim prijelazom izranja iz crne podloge; dno je zatamnjeno za prednosti */
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--black) 0,rgba(11,11,11,.78) 12%,rgba(11,11,11,.5) 26%,rgba(11,11,11,.14) 44%,rgba(11,11,11,.1) 62%,rgba(11,11,11,.74) 84%,rgba(11,11,11,.95) 100%)}
/* Tri prednosti: samo ikona i tekst, bez pločica, na tamnom prijelazu pri dnu fotografije.
   Mobitel: tri stupca. Od 640px: red poravnat s mrežom stranice. */
.chips{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding-block:18px 24px}
.chips li{display:flex;flex-direction:column;align-items:center;gap:8px;padding-inline:6px;font-size:.8125rem;font-weight:700;line-height:1.25;text-align:center;text-wrap:balance}
.chips__ico{display:grid;flex:none;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--green-dark);color:#fff}
.chips__ico .icon{width:17px;height:17px;stroke-width:2.3}
@media (max-width:639px){
  /* visina ovisi o širini ekrana, ne o visini: fotografija se ne smije mijenjati kad se pri skrolanju
     sakrije adresna traka preglednika */
  .hero{display:flex;flex-direction:column;min-height:clamp(620px,178vw,780px)}
  .hero__main{flex:1}
  .chips{width:100%}
}
@media (max-width:359px){.hero__cta{grid-template-columns:1fr}}
@media (min-width:400px){.btn--lg{padding-inline:14px;font-size:1rem}}
@media (min-width:640px){
  .hero__media{inset:0;background:#1a1a1a}
  .hero__media img{object-position:50% 50%}
  /* tamni prijelazi: slijeva za naslov, na vrhu za navigaciju, na dnu za red s prednostima */
  .hero__media::after{background:linear-gradient(90deg,rgba(11,11,11,.9) 0,rgba(11,11,11,.74) 32%,rgba(11,11,11,.2) 60%,rgba(11,11,11,0) 76%),linear-gradient(180deg,rgba(11,11,11,.78) 0,rgba(11,11,11,.5) var(--hdr),rgba(11,11,11,0) calc(var(--hdr) + 110px)),linear-gradient(0deg,rgba(11,11,11,.86) 0,rgba(11,11,11,.6) 90px,rgba(11,11,11,0) 220px)}
  .hero__copy{max-width:min(58%,680px);padding:calc(var(--hdr) + clamp(44px,7vw,116px)) 0 clamp(52px,7vw,112px);text-align:left}
  .hero__title{font-size:clamp(2.125rem,1rem + 3vw,4rem);line-height:1.04}
  .hero__title::before{width:56px;margin:0 0 22px}
  .hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(28px,3vw,40px)}
  .btn--lg{gap:10px;min-height:58px;padding:0 34px;font-size:1.0625rem}
  /* poravnato s mrežom stranice: prva stavka počinje na lijevom rubu sadržaja (ispod naslova),
     zadnja završava na desnom rubu, srednja je točno u sredini */
  .chips{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px 24px;padding-block:clamp(16px,2vw,26px) clamp(24px,3vw,44px)}
  .chips li{flex-direction:row;justify-self:start;gap:12px;padding-inline:0;font-size:.9375rem;text-align:left}
  .chips li:nth-child(2){justify-self:center}
  .chips li:last-child{justify-self:end}
  .chips__ico{width:38px;height:38px}
  .chips__ico .icon{width:19px;height:19px}
}
@media (min-width:1024px){
  .btn--lg{min-height:62px;padding:0 42px;font-size:1.125rem}
  .chips li{gap:14px;font-size:clamp(1rem,.8rem + .3vw,1.125rem)}
  .chips__ico{width:40px;height:40px}
  .chips__ico .icon{width:20px;height:20px}
}

/* Oznake nepopunjenih podataka (vidi README) */
.ph{padding:1px 6px;border:1px dashed #B97A00;border-radius:4px;background:#FFF3D1;color:#6B4200;font-size:.875em;font-weight:600;overflow-wrap:anywhere}
/* critical:end */

/* ==========================================================================
   Ispod prijeloma
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

h2{font-size:clamp(1.625rem,1.25rem + 1.6vw,2.5rem);font-weight:700;line-height:1.15;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
h3{font-size:1.125rem;font-weight:700;line-height:1.3;color:var(--ink)}

.sec{padding-top:var(--section)}
.h2--center{text-align:center}
.sec__lead{margin-top:14px;max-width:36em;font-size:clamp(1rem,.95rem + .3vw,1.125rem);line-height:1.65}
.panel{padding:clamp(24px,4vw,56px);border-radius:var(--radius);background:var(--grey)}

.btn--outline{border-color:var(--green-dark);color:var(--green-dark);background:transparent}
.btn--outline:hover{background:var(--green-dark);color:#fff}
.btn--block{width:100%}
.link{color:var(--green-dark);font-weight:600;text-underline-offset:3px}
.link:hover{color:var(--green-deep)}

/* Reference: logotipi u boji, u pločicama, pomiču se u beskonačnoj petlji.
   main.js udvostručuje popis i dodaje .is-marquee; bez toga (i uz reduced motion) red se pomiče ručno.
   Glatkoća: animira se samo transform na vlastitom sloju, a rubovi blijede preko pseudo-elemenata. */
.refs{padding-top:clamp(28px,4vw,48px)}
.refs__title{font-size:1.25rem;letter-spacing:-.01em;text-align:center}
.refs__viewport{position:relative;display:flex;overflow-x:auto;margin-top:18px;padding-block:2px}
.refs__track{display:flex;flex:none;gap:12px;padding-right:12px}
.refs__track li{display:flex;flex:none;align-items:center;justify-content:center;width:150px;height:76px;padding:12px 16px;border-radius:16px;background:var(--grey)}
.refs__track img{width:100%;max-width:130px;height:100%;object-fit:contain}
.is-marquee{overflow:hidden}
.is-marquee::before,.is-marquee::after{content:"";position:absolute;top:0;bottom:0;z-index:1;width:56px;pointer-events:none}
.is-marquee::before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.is-marquee::after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}
.is-marquee .refs__track{animation:marquee 50s linear infinite;will-change:transform;backface-visibility:hidden}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-100%,0,0)}}
@media (min-width:768px){
  .refs__title{font-size:1.5rem}
  .refs__viewport{margin-top:24px}
  .refs__track{gap:16px;padding-right:16px}
  .refs__track li{width:184px;height:92px;padding:14px 18px;border-radius:20px}
  .refs__track img{max-width:150px}
  .is-marquee::before,.is-marquee::after{width:96px}
}
@media (prefers-reduced-motion:reduce){
  .is-marquee{overflow-x:auto}
  .is-marquee::before,.is-marquee::after{display:none}
  .is-marquee .refs__track{animation:none}
  .is-marquee .refs__track[aria-hidden]{display:none}
}

/* Oprema: kao na BOMAG landingu, ali mekše. Cijela kartica je siva i zaobljena,
   slika leži izravno na njoj (bez bijelog okvira), ispod su naziv, opis, modeli i gumb. */
.cards{display:grid;gap:12px;margin-top:clamp(24px,3.4vw,44px)}
.card{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--radius);background:var(--grey)}
.card picture{display:block;padding:14px 20px 0}
/* fotografije proizvoda imaju bijelu pozadinu; multiply je stapa sa sivom karticom */
.card__img{width:100%;aspect-ratio:2/1;object-fit:contain;mix-blend-mode:multiply}
.card__body{display:flex;flex:1;flex-direction:column;align-items:center;padding:6px 20px 22px;text-align:center}
.card__title{font-size:1.25rem;line-height:1.25;letter-spacing:-.01em}
.card__desc{margin-top:8px;font-size:1rem;line-height:1.55;color:var(--text)}
/* slijed teksta: naziv, opis običnim riječima, sitni redak s modelima, gumb */
.card__models{margin-top:12px;font-size:.8125rem;font-weight:500;line-height:1.5;color:var(--muted);text-wrap:balance}
.card__models span{white-space:nowrap}
.card__models b{font-weight:700;color:var(--ink)}
.card .btn{align-self:center;margin-top:16px}
.card.is-selected{box-shadow:inset 0 0 0 2px var(--green-dark)}
/* "Ne znate što vam treba?": crna kartica preko cijelog reda (da se ne stapa sa sivima), sve centrirano:
   ikona, naslov, rečenica i dva gumba (upit i poziv). */
.card--help{--focus:#fff;grid-column:1/-1;background:var(--black);color:#fff}
.card--help .card__body{align-items:center;padding:clamp(32px,4.2vw,60px) 24px;text-align:center}
.help__ico{display:grid;place-items:center;width:60px;height:60px;margin-bottom:18px;border-radius:50%;background:var(--green-dark);color:#fff}
.help__ico .icon{width:28px;height:28px}
.card--help .card__title{font-size:clamp(1.5rem,1.15rem + 1.3vw,2.25rem);letter-spacing:-.02em;line-height:1.15;color:#fff}
.card--help .card__desc{margin-top:12px;max-width:34em;font-size:clamp(1rem,.95rem + .3vw,1.125rem);line-height:1.6;color:rgba(255,255,255,.84)}
.help__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px}
.help__cta .btn{min-height:52px;margin-top:0;padding-inline:32px;font-size:1rem}
.help__cta .btn--outline{border-color:rgba(255,255,255,.6);color:#fff}
.help__cta .btn--outline:hover{border-color:#fff;background:rgba(255,255,255,.1)}
@media (min-width:720px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .card__body{padding:10px 28px 30px}
  .card picture{padding:20px 28px 0}
  .card__img{aspect-ratio:16/10}
  .card__title{font-size:1.375rem}
  .card .btn{margin-top:auto}
  .card__models{margin-bottom:22px}
  .card__desc{font-size:1.0625rem}
}
@media (min-width:1040px){.cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}

/* Servis: bez okvira. Fotografija lijevo (pola širine), desno naslov, četiri kratke prednosti s kvačicom,
   gumb i telefon. Na mobitelu: naslov, fotografija, prednosti, gumb. */
.split{display:grid;gap:26px}
.split picture{display:block;width:100%}
.split__img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.ticks{display:grid;gap:14px;margin-top:28px}
.ticks li{display:flex;align-items:center;gap:12px;font-weight:600;line-height:1.3;color:var(--ink)}
.ticks .icon{width:26px;height:26px;padding:7px;border-radius:50%;background:var(--green-dark);color:#fff;stroke-width:3.4}
.srv__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:36px}
.srv__tel{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:1.1875rem;font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap}
.srv__tel:hover{text-decoration:underline;text-underline-offset:3px}
.srv__tel .icon{color:var(--green-dark)}
@media (min-width:640px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:center}}
@media (min-width:960px){
  .split{gap:clamp(48px,6vw,96px)}
  /* veći razmaci unutar bloka: naslov sjeda više, gumbi niže, a blok ostaje poravnat sa sredinom fotografije */
  .ticks{gap:16px;margin-top:40px}
  .ticks li{font-size:1.125rem}
  .srv__cta{margin-top:52px}
}

/* Iskustva klijenata: vodoravni popis, tri kartice na ekranu, pomak po jednu (scroll-snap + strelice).
   Kartice idu preko cijele širine sekcije; dvije strelice stoje ispod kartica, u sredini, na svim širinama. */
.rev{display:grid;grid-template-areas:"t t" "l l" "p n";grid-template-columns:1fr 1fr;align-items:center;gap:clamp(18px,3vw,36px) 12px}
.rev h2{grid-area:t}
.rev__btn{display:grid;place-items:center;width:48px;height:48px;padding:0;border:1.5px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);cursor:pointer;transition:border-color .15s,color .15s}
.rev__btn:hover{border-color:var(--green-dark);color:var(--green-dark)}
.rev__btn--prev{grid-area:p;justify-self:end}
.rev__btn--prev .icon{transform:scaleX(-1)}
.rev__btn--next{grid-area:n;justify-self:start}
.rev__track{grid-area:l;display:flex;gap:12px;min-width:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--radius)}
.rev__track::-webkit-scrollbar{display:none}
.rev__card{display:flex;flex:0 0 100%;flex-direction:column;gap:14px;padding:clamp(24px,2.4vw,32px);border-radius:var(--radius);background:var(--grey);scroll-snap-align:start;scroll-snap-stop:always}
.rev__stars{font-size:1.25rem;line-height:1;letter-spacing:3px;color:#F5A800}
.rev__text{flex:1;line-height:1.6}
.rev__who{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--ink)}
.rev__av{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--green-dark);color:#fff;font-size:.9375rem}
@media (prefers-reduced-motion:no-preference){.rev__track{scroll-behavior:smooth}}
@media (min-width:640px){
  .rev__track{gap:20px}
  .rev__card{flex-basis:calc((100% - 20px)/2)}
}
@media (min-width:1040px){.rev__card{flex-basis:calc((100% - 40px)/3)}}

.fin{text-align:center}
/* Završni CTA */
.fin h2{max-width:18em;margin-inline:auto}
.fin__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(22px,2.6vw,32px)}
.fin__cta .btn{padding-inline:clamp(24px,3vw,42px)}

/* Pitanja: bez podloge. Naslov centriran, ispod uži stupac redaka odvojenih tankom linijom. */
.faq{text-align:center}
.faq__list{max-width:880px;margin:clamp(22px,3vw,40px) auto 0;border-top:1px solid var(--line);text-align:left}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 2px;border-radius:8px;font-weight:700;font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.35;color:var(--ink);cursor:pointer;list-style:none;transition:color .15s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--green-dark)}
.faq summary .icon{width:32px;height:32px;padding:7px;border-radius:50%;background:var(--green-dark);color:#fff;stroke-width:2.8;transition:transform .2s}
.faq details[open] summary .icon{transform:rotate(45deg)}
.faq details p{max-width:44em;padding:0 48px 22px 2px;line-height:1.6}
@media (min-width:960px){.faq summary{padding-block:24px}.faq details p{padding-bottom:26px}}
@media (prefers-reduced-motion:reduce){.faq summary,.faq summary .icon{transition:none}}

/* Upit: sivi panel; uvod i kontakt kartice lijevo, bijeli obrazac desno.
   Ispod 960px prekidač "Pošalji upit / Nazovite nas" prikazuje jedno ili drugo (CSS :has). */
#upit{padding-bottom:16px}
.enq{display:grid;gap:20px}
.enq__switch{display:none}
.contacts__title{font-size:1.375rem;letter-spacing:-.01em}
.contacts__sub{margin-top:6px;font-size:.9688rem;color:var(--muted)}
.ccards{display:grid;gap:12px;margin-top:20px}
.ccard{display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px 16px;align-items:center;padding:18px 20px;border-radius:18px;background:#fff}
.ccard__ico{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--tint);color:var(--green-dark)}
.ccard__ico .icon{width:22px;height:22px}
.ccard__who{font-size:1.125rem;line-height:1.4;color:var(--ink)}
.ccard__addr{display:block;font-size:.875rem;font-weight:400;color:var(--muted);text-decoration:none}
.ccard__links{grid-column:2;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 18px}
.ccard__links a{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.ccard__links .icon{width:17px;height:17px;color:var(--green-dark)}
.ccard__links a:hover,.ccard__addr:hover{text-decoration:underline;text-underline-offset:3px}
.ccard__tel{font-size:1.1875rem;font-weight:700;line-height:1.6;color:var(--green-dark)}
.ccard__mail{font-size:.9375rem;line-height:1.6;overflow-wrap:anywhere}
@media (min-width:560px){
  .ccard{grid-template-columns:48px minmax(0,1fr) auto}
  .ccard__links{grid-column:3;flex-direction:column;align-items:flex-end;gap:0;text-align:right}
}
@media (max-width:959px){
  @supports selector(:has(*)){
    .enq__switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:var(--radius-btn);background:#fff}
    .enq__switch label{position:relative;display:block;cursor:pointer}
    .enq__switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
    .enq__switch span{display:grid;place-items:center;min-height:46px;padding:0 8px;text-align:center;line-height:1.15;border-radius:var(--radius-btn);font-size:.9375rem;font-weight:600;color:var(--green-dark);transition:background-color .15s,color .15s}
    .enq__switch input:checked+span{background:var(--green-dark);color:#fff}
    .enq__switch input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
    .enq:has(#enq-call:checked) .form,.enq:not(:has(#enq-call:checked)) .contacts{display:none}
    .contacts__title{display:none}
    .contacts__sub{margin-top:0}
  }
}
@media (min-width:960px){
  .enq{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;grid-template-areas:"intro form" "direct form";gap:32px 64px;align-items:start}
  .enq__intro{grid-area:intro}
  .enq .form{grid-area:form}
  .contacts{grid-area:direct;align-self:start}
}

/* Obrazac: bijeli panel, malo polja, zaobljena polja s tankim rubom */
.form{padding:clamp(20px,3.5vw,40px);border-radius:20px;background:#fff}
.form__grid{display:grid;gap:18px}
.field{display:grid;align-content:start;gap:6px;min-width:0}
.field label{font-size:.875rem;font-weight:600;color:var(--ink)}
.opt{font-weight:400;color:var(--muted)}
.field :is(input[type="text"],input[type="tel"],input[type="email"],select,textarea){width:100%;min-height:52px;padding:12px 16px;border:1.5px solid var(--field);border-radius:14px;background-color:#fff;font-size:1rem;line-height:1.4;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.field textarea{min-height:96px;resize:none;line-height:1.5}
.field select{appearance:none;-webkit-appearance:none;padding-right:44px;text-overflow:ellipsis;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231B8013' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.field input::placeholder,.field textarea::placeholder{color:#6A737D;opacity:1}
.field :is(input[type="text"],input[type="tel"],input[type="email"],select,textarea):focus{outline:none;border-color:var(--green-dark);box-shadow:0 0 0 3px rgba(27,128,19,.18)}
.field :is(input[type="text"],input[type="tel"],input[type="email"])[aria-invalid="true"]{border-color:var(--error);box-shadow:0 0 0 3px rgba(180,35,24,.12)}
.err{font-size:.8125rem;font-weight:600;color:var(--error)}
.hint{margin-top:-8px;font-size:.8125rem;color:var(--muted)}
.check{display:flex;align-items:flex-start;gap:10px;min-height:44px;padding-block:10px;font-size:.9375rem;font-weight:400;line-height:1.5;color:var(--text);cursor:pointer}
.field .check{font-size:.9375rem;font-weight:400;color:var(--text)}
.check input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--green-dark)}
.hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form__alert{padding:12px 14px;border:1.5px solid var(--error);border-radius:12px;background:#FEF3F2;color:#7A271A;font-weight:600}
.form__submit{margin-top:2px}
.form__submit .btn{min-height:54px;font-size:1rem}
.btn[disabled]{opacity:.7;cursor:progress;transform:none}
.spinner{display:none;width:18px;height:18px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%}
.is-sending .spinner{display:block}
.is-flash{animation:flash 1.4s ease-out}
@keyframes flash{0%,35%{box-shadow:0 0 0 4px rgba(35,163,25,.5)}100%{box-shadow:0 0 0 4px rgba(35,163,25,0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:no-preference){.is-sending .spinner{animation:spin .8s linear infinite}}
@media (prefers-reduced-motion:reduce){.is-flash{animation:none;box-shadow:0 0 0 3px var(--green)}.btn{transition:none}.btn:active{transform:none}}
@media (min-width:640px){
  .form__grid--2,.form__grid--32{grid-template-columns:1fr 1fr;column-gap:28px}
}

/* Footer: nizak crni pojas u širini sadržaja stranice. Logo uz lijevi rub, lokacija točno u sredini,
   kontakt uz desni rub (isti telefon i e-mail kao u headeru). Naslovi "Lokacija" i "Kontakt" su u istoj visini.
   Ispod 900px sve ide jedno ispod drugog, centrirano. */
.ftr{margin-top:clamp(40px,5vw,72px);padding:clamp(32px,3.6vw,48px) 0 calc(clamp(32px,3.6vw,48px) + env(safe-area-inset-bottom));background:var(--black);color:rgba(255,255,255,.7);text-align:center}
.ftr a{color:#fff;text-decoration:none}
.ftr a:hover,.ftr__btn:hover{text-decoration:underline;text-underline-offset:3px}
.ftr__in{display:grid;justify-items:center;gap:26px;max-width:calc(var(--wrap) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.ftr__logo img{width:auto;height:46px}
.ftr__col{display:grid;justify-items:center;align-content:start;gap:2px}
.ftr h2{margin-bottom:6px;font-size:1rem;font-weight:700;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:#fff}
.ftr .icon{width:18px;height:18px;color:var(--green)}
.ftr__item{display:inline-flex;align-items:center;gap:10px;min-height:32px;font-weight:600;white-space:nowrap}
/* .ftr__bottom je jedini redak footera na podstranicama (stranica zahvale, /politika-privatnosti/) */
.ftr__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 22px;font-size:.8125rem;color:rgba(255,255,255,.58)}
.ftr .ftr__bottom a,.ftr__btn{display:inline-flex;align-items:center;min-height:36px;padding:0;border:0;background:none;color:rgba(255,255,255,.58);cursor:pointer}
@media (min-width:900px){
  .ftr__in{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:24px}
  .ftr__logo{justify-self:start;align-self:center}
  /* naslov i redci su centrirani unutar svog bloka; blok kontakta ostaje uz desni rub */
  .ftr__col--contact{justify-self:end}
}
/* Ispod 900px: sve centrirano, jedno ispod drugog, s ikonama i više zraka između redaka */
@media (max-width:899px){
  .ftr{padding-top:40px}
  .ftr__in{gap:30px}
  .ftr__logo img{height:42px}
  .ftr__col{gap:4px}
  .ftr h2{margin-bottom:8px;font-size:.8125rem;letter-spacing:.14em;color:rgba(255,255,255,.6)}
  .ftr__item{min-height:40px}
}
@media (max-width:768px){.has-sticky .ftr{padding-bottom:calc(88px + env(safe-area-inset-bottom))}}

/* Mobilna traka s gumbima: crna, pojavi se kad gumbi iz heroja odu iz vidnog polja */
.sticky{display:none}
@media (max-width:768px){
  .sticky{position:fixed;left:0;right:0;bottom:0;z-index:80;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(11,11,11,.97);box-shadow:0 -1px 0 rgba(255,255,255,.12);transition:transform .2s,visibility .2s}
  .sticky .btn{gap:8px;min-height:48px;padding-inline:10px}
  .sticky .btn .icon{width:18px;height:18px}
  .sticky.is-hidden,.cc-open .sticky,.nav-open .sticky{transform:translateY(110%);visibility:hidden}
  html:has(.has-sticky){scroll-padding-bottom:calc(88px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){.sticky{transition:none}}

/* Izbornik (ispod 1024px): bijela kartica ispod headera */
.mnav{position:absolute;top:calc(var(--hdr) - 4px);left:12px;right:12px;z-index:110;display:grid;padding:8px;border-radius:20px;background:#fff;color:var(--ink);box-shadow:0 18px 40px rgba(0,0,0,.3);--focus:#0B0B0B}
.mnav nav{display:grid;text-align:center}
.mnav nav a{padding:14px 16px;border-radius:12px;font-size:1.0625rem;font-weight:600;text-decoration:none}
.mnav nav a:hover{background:var(--grey)}
.mnav .btn{min-height:52px;margin:8px 8px 0;font-size:1rem}
.mnav .btn--ghost{margin-bottom:6px;border-color:var(--green-dark);color:var(--green-dark)}
@media (min-width:1024px){.mnav{display:none}}

/* Cookie banner */
.cc{position:fixed;left:12px;right:12px;bottom:12px;z-index:150;max-width:560px;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow-y:auto;padding:20px;border-radius:20px;background:#fff;color:var(--text);box-shadow:0 10px 40px rgba(0,0,0,.28);font-size:.9375rem}
.cc h2{font-size:1.0625rem;letter-spacing:0}
.cc p{margin-top:8px}
.cc__opts{display:grid;gap:2px;margin-top:12px;padding-top:8px;border-top:1px solid var(--line)}
.cc__opts small{display:block;color:var(--muted)}
.cc__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.cc__actions .btn{flex:1 1 150px;padding-inline:16px}
.cc .btn--line{border-color:var(--ink);color:var(--ink);background:transparent}
.cc .btn--line:hover{background:var(--ink);color:#fff}
.cc__more{flex:1 1 100%;min-height:44px;padding:0;border:0;background:none;color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (min-width:640px){.cc{left:20px;right:auto;bottom:20px}}

/* Jednostavne podstranice (stranica zahvale, /politika-privatnosti/) */
.page{min-height:calc(100vh - var(--hdr) - 220px);min-height:calc(100dvh - var(--hdr) - 220px);padding-block:56px 72px}
.page h1{font-size:2rem;font-weight:700;line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
.page p{max-width:38em;margin-top:16px;font-size:1.0625rem}
.page__mark{display:flex;align-items:center;justify-content:center;width:56px;height:56px;margin-bottom:24px;border-radius:50%;background:var(--green-dark);color:#fff}
.page__mark .icon{width:28px;height:28px;stroke-width:2.6}
.page__urgent{padding:18px 22px;border-radius:18px;background:var(--grey)}
.page__urgent a{font-weight:700;white-space:nowrap}
.page__links{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:32px}
.page~.ftr{margin-top:0}
/* stranica zahvale: samo potvrda i dva gumba, u sredini ekrana */
.page--thanks{display:grid;place-items:center;min-height:max(380px,calc(100vh - var(--hdr) - 200px));min-height:max(380px,calc(100dvh - var(--hdr) - 200px));text-align:center}
.page--thanks .page__mark{margin-inline:auto}
.page--thanks h1{text-wrap:balance}
.page__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px}
.page__cta .btn{min-height:54px;font-size:1rem}
@media (max-width:519px){.page__cta{display:grid;max-width:320px;margin-inline:auto}}
@media (min-width:768px){.page{padding-block:88px 104px}.page h1{font-size:2.75rem}}

/* ==========================================================================
   MOBITEL (<640px): sadržaj centriran. Polja obrasca ostaju poravnata lijevo.
   ========================================================================== */
@media (max-width:639px){
  .sec h2,.sec__lead,.card,.contacts{text-align:center}
  .rev__card{align-items:center;text-align:center}
  /* servis: sivi blok, sve centrirano: naslov, ispod fotografija, prednosti (blok u sredini, kvačice jedna
     ispod druge) te gumb i telefon u istom redu */
  .split{gap:0;padding:28px 16px 26px;border-radius:var(--radius);background:var(--grey)}
  .split__text{display:contents}
  .split__text>h2{order:1}
  .split picture{order:2;margin-top:20px}
  .split__img{border-radius:16px}
  .ticks{order:3;width:fit-content;margin:22px auto 0}
  .srv__cta{order:4}
  .srv__cta{flex-direction:column;justify-content:center;gap:2px;margin-top:22px}
  /* pitanja: bez podloge, redci odvojeni tankom linijom kao na većim ekranima; manji tekst i manja ikona */
  .faq summary{gap:14px;padding:18px 2px;font-size:1rem;font-weight:600}
  .faq summary .icon{width:28px;height:28px;padding:6px}
  .faq details p{padding:0 42px 18px 2px;font-size:.9375rem}
  .sec__lead{margin-inline:auto;text-wrap:balance}
  .enq{padding:24px 12px 12px}
  .form{padding:20px 16px}
  .ccard{grid-template-columns:minmax(0,1fr);justify-items:center;padding:22px 20px;text-align:center}
  .ccard__links{grid-column:1;flex-direction:column;align-items:center;gap:0}
  /* gumbi u paru su jednako široki; gumb na kartici opreme je viši, za prst */
  .card:not(.card--help) .btn{min-height:48px;padding-inline:28px;font-size:.9375rem}
  .card--help .card__body{padding-inline:16px}
  .help__cta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%}
  .help__cta .btn{gap:8px;padding-inline:8px;font-size:.9375rem}
  .fin__cta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .fin__cta .btn{min-height:54px;padding-inline:8px}
  a,button,summary,label{-webkit-tap-highlight-color:transparent}
}
/* uži mobiteli: gumbi završnog poziva bez ikona, da tekst stane u jedan red */
@media (max-width:399px){.fin__cta .icon{display:none}}
@media (max-width:359px){.fin__cta,.help__cta{grid-template-columns:1fr}.sticky .btn{padding-inline:6px;font-size:.875rem}.sticky .btn .icon{display:none}}