@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-weight:800;font-display:swap;src:url(fonts/barlow-condensed-latin-ext-800-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow Condensed";font-weight:800;font-display:swap;src:url(fonts/barlow-condensed-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(fonts/inter-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(fonts/inter-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-weight:600;font-display:swap;src:url(fonts/inter-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-weight:600;font-display:swap;src:url(fonts/inter-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --paper:#f4f1ea; --paper2:#ebe6db; --ink:#16191d; --graf:#20252b; --graf2:#2b3138; --muted:#5d6670;
  --line:#d9d3c5; --amber:#ffc21a; --amber-d:#e0a400; --red:#d8412f; --green:#2f8f5b; --white:#fff;
  --disp:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --body:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --r:14px; --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.65 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--disp);font-weight:800;line-height:1.02;letter-spacing:.005em;margin:0;text-transform:uppercase}
h1{font-size:clamp(42px,5.6vw,74px)}
h2{font-size:clamp(34px,4.6vw,58px)}
h3{font-size:26px;line-height:1.1}
p{margin:0 0 1em}
.eyebrow{font:600 13px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:10px;margin-bottom:18px}
.eyebrow:before{content:"";width:28px;height:3px;background:var(--amber)}
.sr{position:absolute;left:-9999px}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px}

/* gumbi */
.btn{display:inline-flex;align-items:center;gap:10px;font:600 16px/1 var(--body);padding:17px 26px;border-radius:10px;border:2px solid var(--ink);background:var(--amber);color:var(--ink);text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:0 4px 0 var(--ink)}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.btn.sec{background:transparent;box-shadow:none}
.btn.sec:hover{background:var(--ink);color:var(--paper);box-shadow:none}
.btn[disabled]{opacity:.6;cursor:wait}

/* zaglavlje */
header.top{position:sticky;top:0;z-index:50;background:rgba(244,241,234,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.logo svg{width:38px;height:38px;flex:none}
.logo b{font:800 27px/1 var(--disp);text-transform:uppercase;letter-spacing:.02em;display:block}
.logo small{display:block;font:600 11px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.logo small i{font-style:normal;color:var(--ink);background:var(--amber);padding:2px 5px;border-radius:3px}
nav.glavni{display:flex;gap:26px;align-items:center}
nav.glavni a{text-decoration:none;font:600 15px var(--body);color:var(--graf)}
nav.glavni a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:3px;text-underline-offset:6px}
nav.glavni .btn{padding:11px 18px;font-size:14px;box-shadow:0 3px 0 var(--ink)}
.burger{display:none;background:none;border:2px solid var(--ink);border-radius:8px;width:44px;height:44px;cursor:pointer;font-size:0}
.burger:before{content:"";display:block;margin:auto;width:20px;height:2px;background:var(--ink);box-shadow:0 -6px 0 var(--ink),0 6px 0 var(--ink)}

/* hero */
.hero{position:relative;background:var(--paper);padding:40px 0 0;overflow:hidden}
.hero .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.hero h1 em{font-style:normal;background:linear-gradient(transparent 62%,var(--amber) 62%);padding:0 .06em}
.hero p.lead{font-size:19px;color:var(--graf2);max-width:36em;margin:20px 0 26px}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.hero .sitno{margin-top:22px;font-size:14px;color:var(--muted);display:flex;gap:18px;flex-wrap:wrap}
.hero .sitno span:before{content:"✓";color:var(--green);font-weight:700;margin-right:7px}

/* nalog kartica u heroju */
.nalog{background:var(--white);border:2px solid var(--ink);border-radius:var(--r);box-shadow:8px 8px 0 var(--ink);padding:22px;position:relative;transform:rotate(1.2deg);transition:transform .3s}
.nalog:hover{transform:rotate(0)}
.nalog .gl{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:14px}
.nalog .br{font:700 12px var(--body);letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.nalog .gl h3{font-size:30px}
.reg{font:800 15px var(--disp);letter-spacing:.08em;border:2px solid var(--ink);border-radius:5px;padding:3px 9px 2px;background:#fff;box-shadow:inset 8px 0 0 #1b4aa8;padding-left:16px;white-space:nowrap}
.koraci{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:14px 0 18px}
.koraci button{font:600 11.5px/1.2 var(--body);padding:9px 4px;border:2px solid var(--line);background:var(--paper);border-radius:8px;cursor:pointer;color:var(--muted);transition:.25s}
.koraci button.on{background:var(--amber);border-color:var(--ink);color:var(--ink)}
.koraci button.done{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.stavke{width:100%;border-collapse:collapse;font-size:14.5px}
.stavke td{padding:7px 0;border-bottom:1px dashed var(--line)}
.stavke td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.stavke tr.novo{animation:ulaz .5s both}
.ukupno{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;font:800 24px var(--disp);text-transform:uppercase}
.ukupno span:last-child{font-size:32px}
.zig{position:absolute;right:-14px;bottom:-16px;background:var(--green);color:#fff;font:700 12px var(--body);letter-spacing:.06em;padding:8px 12px;border-radius:8px;transform:rotate(-4deg) scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1);border:2px solid var(--ink)}
.zig.on{transform:rotate(-4deg) scale(1)}
@keyframes ulaz{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

/* scena s cestom */
.scena{position:relative;margin-top:32px;height:360px;--nebo1:#bfe3f2;--nebo2:#f4f1ea;--grad:#cfc8b8;--grad2:#b9b19f;--asfalt:#2a2f36;--sunce:#ffc21a}
.scena.noc{--nebo1:#10172a;--nebo2:#2a3556;--grad:#1c2438;--grad2:#161d2f;--asfalt:#15181d;--sunce:#e9ecf5}
.scena .nebo{position:absolute;inset:0;background:linear-gradient(var(--nebo1),var(--nebo2));transition:background .8s}
.scena .sun{position:absolute;right:11%;top:34px;width:62px;height:62px;border-radius:50%;background:var(--sunce);box-shadow:0 0 0 12px rgba(255,194,26,.18);transition:.8s}
.scena.noc .sun{box-shadow:0 0 30px 8px rgba(233,236,245,.25)}
.scena .oblak{position:absolute;height:22px;width:92px;background:#fff;border-radius:22px;opacity:.85;animation:oblak linear infinite}
.scena .oblak:before,.scena .oblak:after{content:"";position:absolute;background:#fff;border-radius:50%}
.scena .oblak:before{width:38px;height:38px;left:14px;top:-18px}
.scena .oblak:after{width:30px;height:30px;left:46px;top:-12px}
.scena.noc .oblak{opacity:.08}
@keyframes oblak{from{transform:translateX(-160px)}to{transform:translateX(1500px)}}
.zgrade{position:absolute;left:0;right:0;bottom:112px;height:130px;display:block;width:100%}
.zgrade .z1{fill:var(--grad)}.zgrade .z2{fill:var(--grad2)}
.zgrade .prozor{fill:#fff;opacity:.0;transition:opacity .8s}
.scena.noc .prozor{opacity:.75;fill:#ffd96b}
.servis{position:absolute;left:5%;bottom:100px;width:300px;z-index:3}
.servis .natpis{font:800 22px var(--disp);letter-spacing:.06em;fill:var(--ink);text-transform:uppercase}
.cesta{position:absolute;left:0;right:0;bottom:0;height:112px;background:var(--asfalt);z-index:1;transition:background .8s;border-top:6px solid #6e7680}
.cesta:before{content:"";position:absolute;left:0;right:0;top:54px;height:5px;background:repeating-linear-gradient(90deg,#f4f1ea 0 46px,transparent 46px 96px);animation:crta 1.2s linear infinite;opacity:.9}
@keyframes crta{to{background-position-x:-96px}}
.vozilo{position:absolute;z-index:4;cursor:pointer;will-change:transform;animation:vozi linear infinite;animation-delay:var(--d,0s);animation-duration:var(--t,14s);-webkit-tap-highlight-color:transparent;border:0;background:none;padding:0}
.vozilo svg{display:block;width:100%;height:auto;overflow:visible}
.vozilo.l1{bottom:58px;width:190px}.vozilo.l2{bottom:6px;width:190px}
.vozilo.mot{width:120px}
.vozilo.kam{width:235px}
.vozilo.nazad{animation-name:voziNazad}
.vozilo.nazad svg{transform:scaleX(-1)}
@keyframes vozi{from{left:-240px}to{left:calc(100% + 40px)}}
@keyframes voziNazad{from{left:calc(100% + 40px)}to{left:-240px}}
.kotac{transform-box:fill-box;transform-origin:center;animation:okret .55s linear infinite}
@keyframes okret{to{transform:rotate(360deg)}}
.vozilo .tijelo{animation:tresnja .7s ease-in-out infinite alternate}
@keyframes tresnja{from{transform:translateY(0)}to{transform:translateY(-1.5px)}}
.vozilo.skok{animation-play-state:running}
.vozilo.skok .tijelo{animation:skok .55s ease-out 1}
@keyframes skok{0%{transform:none}35%{transform:translateY(-26px) rotate(-4deg)}100%{transform:none}}
.svjetlo{opacity:0;transition:opacity .6s}
.scena.noc .svjetlo{opacity:1}
.bip{position:absolute;z-index:6;background:#fff;border:2px solid var(--ink);border-radius:10px;padding:5px 11px;font:800 20px var(--disp);text-transform:uppercase;pointer-events:none;animation:bip 1s ease-out forwards;white-space:nowrap}
.bip:after{content:"";position:absolute;left:14px;bottom:-9px;width:12px;height:12px;background:#fff;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg)}
@keyframes bip{0%{opacity:0;transform:translateY(8px) scale(.6)}20%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
.noc-gumb{position:absolute;right:20px;top:18px;z-index:7;background:var(--ink);color:var(--paper);border:0;border-radius:99px;padding:9px 15px 9px 13px;font:600 13px var(--body);cursor:pointer;display:flex;gap:8px;align-items:center}
.noc-gumb:hover{background:var(--graf2)}
.hint{position:absolute;left:24px;bottom:122px;z-index:6;font:600 12px var(--body);letter-spacing:.08em;text-transform:uppercase;background:var(--paper);padding:5px 10px;border-radius:6px;border:1px solid var(--line);opacity:.95}

/* traka */
.traka{background:var(--ink);color:var(--paper);overflow:hidden;padding:15px 0;border-top:1px solid #000}
.traka .vrti{display:flex;gap:46px;width:max-content;animation:traka 40s linear infinite;font:700 20px var(--disp);letter-spacing:.08em;text-transform:uppercase}
.traka .vrti span{display:inline-flex;align-items:center;gap:46px;white-space:nowrap}
.traka .vrti span:after{content:"✦";color:var(--amber);font-size:14px}
@keyframes traka{to{transform:translateX(-50%)}}

section{padding:96px 0}
.sek-tamna{background:var(--graf);color:var(--paper)}
.sek-tamna .eyebrow{color:#aab2bb}
.sek-tamna p{color:#cfd5db}
.sek-zuta{background:var(--amber)}
.sek-zuta .eyebrow:before{background:var(--ink)}
.naslov{max-width:760px;margin-bottom:48px}
.naslov p{font-size:19px;color:var(--muted);margin-top:18px}
.sek-tamna .naslov p{color:#b4bcc5}

/* dan u servisu */
.dan{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:stretch}
.dan .tabs{display:flex;flex-direction:column;gap:10px}
.dan .tabs button{text-align:left;background:var(--graf2);border:2px solid transparent;border-radius:12px;padding:16px 18px;color:#cfd5db;font:600 17px var(--body);cursor:pointer;display:flex;gap:14px;align-items:center;transition:.2s}
.dan .tabs button b{font:800 22px var(--disp);width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#3a424b;color:var(--paper);flex:none}
.dan .tabs button.on{border-color:var(--amber);background:#343b43;color:#fff}
.dan .tabs button.on b{background:var(--amber);color:var(--ink)}
.dan .panel{background:var(--paper);color:var(--ink);border-radius:var(--r);padding:34px;min-height:340px;position:relative;overflow:hidden}
.dan .panel h3{font-size:38px;margin-bottom:12px}
.dan .panel p{color:var(--graf2)}
.dan .panel .anim{animation:ulaz .45s both}
.dan .panel ul{padding:0;margin:16px 0 0;list-style:none;display:grid;gap:9px}
.dan .panel li{padding-left:28px;position:relative;font-size:16px}
.dan .panel li:before{content:"";position:absolute;left:0;top:7px;width:14px;height:8px;border-left:3px solid var(--green);border-bottom:3px solid var(--green);transform:rotate(-45deg)}
.dan .panel .velik{position:absolute;right:-6px;bottom:-30px;font:800 190px/1 var(--disp);color:rgba(22,25,29,.05);pointer-events:none}

/* funkcije */
.fn{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.fn article{background:var(--white);border:2px solid var(--ink);border-radius:var(--r);padding:24px;transition:transform .2s,box-shadow .2s;position:relative}
.fn article:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--ink)}
.fn svg{width:44px;height:44px;margin-bottom:16px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fn svg .ak{stroke:var(--amber-d)}
.fn h3{margin-bottom:8px}
.fn p{font-size:15.5px;color:var(--muted);margin:0}

/* cijene */
.cijene{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:start}
.kalk{background:var(--white);border:2px solid var(--ink);border-radius:var(--r);padding:30px;box-shadow:8px 8px 0 var(--ink)}
.kalk h3{margin-bottom:6px;font-size:32px}
.kalk .iznos{font:800 76px/1 var(--disp);margin:14px 0 2px;display:flex;align-items:baseline;gap:8px}
.kalk .iznos small{font:600 16px var(--body);color:var(--muted)}
.kalk .raz{font-size:15px;color:var(--muted);min-height:24px}
.kalk input[type=range]{width:100%;accent-color:var(--ink);height:34px;margin:12px 0 4px}
.kalk .oznake{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.kalk .mehanicari{display:flex;gap:6px;flex-wrap:wrap;margin:16px 0;min-height:44px}
.kalk .mehanicari svg{width:30px;height:38px;animation:ulaz .3s both}
.prebac{display:inline-flex;background:var(--paper2);border-radius:99px;padding:4px;margin-bottom:6px}
.prebac button{border:0;background:none;padding:9px 18px;border-radius:99px;font:600 14px var(--body);cursor:pointer;color:var(--muted)}
.prebac button.on{background:var(--ink);color:var(--paper)}
.cl{list-style:none;padding:0;margin:0;display:grid;gap:13px}
.cl li{padding-left:34px;position:relative}
.cl li:before{content:"";position:absolute;left:3px;top:7px;width:16px;height:9px;border-left:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(-45deg)}
.cl strong{display:block}
.dodatno{margin-top:22px;border:2px dashed var(--ink);border-radius:12px;padding:16px 18px;background:rgba(255,255,255,.5);font-weight:600}
.dodatno b{font:800 28px var(--disp)}
.sitnotisak{font-size:13.5px;color:var(--muted);margin-top:16px}

/* koraci */
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:k}
.tri article{counter-increment:k;position:relative;padding-top:78px}
.tri article:before{content:counter(k);position:absolute;left:0;top:0;font:800 110px/0.8 var(--disp);color:var(--ink);-webkit-text-stroke:0}
.tri article:after{content:"";position:absolute;left:62px;top:36px;height:3px;right:-14px;background:repeating-linear-gradient(90deg,var(--ink) 0 8px,transparent 8px 16px)}
.tri article:last-child:after{display:none}
.tri h3{margin-bottom:8px}
.tri p{color:var(--graf2);margin:0}

/* forma */
.proba{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.proba aside h2{margin-bottom:20px}
.proba aside ul{margin:26px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.proba aside li{display:flex;gap:12px;align-items:flex-start}
.proba aside li:before{content:"✓";flex:none;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--amber);display:grid;place-items:center;font-size:13px;font-weight:700;margin-top:3px}
form.kartica{background:var(--paper);color:var(--ink);border-radius:var(--r);padding:32px;border:2px solid var(--ink);box-shadow:8px 8px 0 rgba(0,0,0,.35)}
form.kartica fieldset{border:0;padding:0;margin:0 0 20px}
form.kartica legend{font:800 20px var(--disp);text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;padding:0}
.polja{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.polja .puno{grid-column:1/-1}
label.p{display:block;font:600 13.5px var(--body)}
label.p span{display:block;margin-bottom:5px}
label.p input,label.p select{width:100%;font:400 16px var(--body);padding:13px 14px;border:2px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);transition:border-color .15s}
label.p input:focus,label.p select:focus{border-color:var(--ink);outline:none}
form.provjereno label.p input:invalid:not(:focus){border-color:var(--red)}
label.p small{display:block;color:var(--muted);font-weight:400;margin-top:4px;font-size:12.5px}
.privola{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin:6px 0 20px}
.privola input{width:20px;height:20px;margin-top:3px;accent-color:var(--ink);flex:none}
.hp{position:absolute;left:-9999px;opacity:0}
#poruka{margin-top:16px;padding:14px 16px;border-radius:10px;font-weight:600;display:none}
#poruka.greska{display:block;background:#fbe5e1;color:#8a2417;border:2px solid #d8412f}
.uspjeh{display:none;text-align:center;padding:34px 10px}
.uspjeh svg{width:92px;margin:0 auto 14px;display:block}
.uspjeh h3{font-size:40px;margin-bottom:10px}
form.gotovo .polja,form.gotovo fieldset,form.gotovo .privola,form.gotovo button[type=submit],form.gotovo #procjena{display:none}
form.gotovo .uspjeh{display:block}
#procjena{font-size:14px;color:var(--muted);margin:-8px 0 16px}

/* blog kartice */
.blog3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.kart{display:flex;flex-direction:column;background:var(--white);border:2px solid var(--ink);border-radius:var(--r);overflow:hidden;text-decoration:none;transition:transform .2s,box-shadow .2s}
.kart:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--ink)}
.kart .sl{aspect-ratio:16/9;background:var(--amber);border-bottom:2px solid var(--ink);display:block;width:100%;object-fit:cover}
.kart .tx{padding:20px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.kart h3{font-size:27px}
.kart p{font-size:15px;color:var(--muted);margin:0}
.kart .meta{font:600 12.5px var(--body);color:var(--muted);letter-spacing:.04em;margin-top:auto}

/* faq */
.faq{max-width:860px}
.faq details{border-bottom:2px solid var(--ink);padding:4px 0}
.faq summary{cursor:pointer;list-style:none;font:800 26px/1.15 var(--disp);text-transform:uppercase;padding:18px 44px 18px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font:800 34px var(--disp);transition:transform .25s}
.faq details[open] summary:after{transform:translateY(-50%) rotate(45deg)}
.faq details p{padding:0 44px 20px 0;color:var(--graf2);margin:0}

/* podnožje */
footer{background:var(--ink);color:#c8cfd6;padding:64px 0 28px;font-size:15px}
footer .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
footer h4{font:800 18px var(--disp);text-transform:uppercase;letter-spacing:.08em;color:var(--paper);margin:0 0 14px}
footer a{color:#c8cfd6;text-decoration:none;display:block;padding:3px 0}
footer a:hover{color:var(--amber)}
footer .logo b{color:var(--paper)}footer .logo small{color:#98a2ad}
footer .logo small i{color:var(--ink)}
footer .dno{margin-top:44px;padding-top:22px;border-top:1px solid #333a42;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:#8d97a2}
footer .vz{color:var(--amber);font-weight:600}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}

/* blog stranice / dokumenti */
.clanak-glava{background:var(--paper2);padding:56px 0 40px;border-bottom:1px solid var(--line)}
.clanak-glava h1{font-size:clamp(36px,5.2vw,64px);max-width:20em}
.drobtine{font-size:14px;color:var(--muted);margin-bottom:18px}
.drobtine a{text-decoration:none;border-bottom:1px solid var(--line)}
.clanak-meta{margin-top:20px;color:var(--muted);font-size:14.5px;display:flex;gap:18px;flex-wrap:wrap}
.clanak{display:grid;grid-template-columns:minmax(0,720px) 280px;gap:64px;justify-content:center;padding:56px 24px 80px;max-width:1120px;margin:0 auto}
.tekst{font-size:18.5px;line-height:1.75}
.tekst h2{font-size:38px;margin:48px 0 14px}
.tekst h3{font-size:28px;margin:30px 0 10px}
.tekst a{color:var(--ink);text-decoration-color:var(--amber);text-decoration-thickness:3px;text-underline-offset:3px;font-weight:600}
.tekst ul,.tekst ol{padding-left:1.2em;margin:0 0 1.2em}
.tekst li{margin-bottom:.5em}
.tekst img{border-radius:12px;height:auto}
.tekst blockquote{margin:1.6em 0;padding:4px 0 4px 22px;border-left:5px solid var(--amber);font-size:1.12em;color:var(--graf2)}
.bok{position:sticky;top:96px;align-self:start;display:grid;gap:20px}
.sadrzaj-box{border:2px solid var(--ink);border-radius:12px;padding:18px 20px;background:#fff;font-size:15px}
.sadrzaj-box b{font:800 18px var(--disp);text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:8px}
.sadrzaj-box a{display:block;text-decoration:none;padding:5px 0;color:var(--graf2);line-height:1.35}
.sadrzaj-box a:hover{color:var(--ink);text-decoration:underline}
.cta-box{background:var(--amber);border:2px solid var(--ink);border-radius:12px;padding:20px}
.cta-box h3{font-size:28px;margin-bottom:8px}
.cta-box p{font-size:15px;margin-bottom:14px}
.cta-box .btn{padding:13px 18px;font-size:15px;width:100%;justify-content:center;background:var(--ink);color:var(--paper);box-shadow:0 4px 0 rgba(0,0,0,.35)}
.dokument{max-width:780px;margin:0 auto;padding:56px 24px 90px}
.dokument h1{font-size:clamp(40px,6vw,66px);margin-bottom:26px}
.dokument h2{font-size:30px;margin:34px 0 10px}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}.vozilo{animation:none!important;left:40%}.traka .vrti{animation:none}
}
@media (max-width:1020px){
  .hero .grid,.dan,.cijene,.proba{grid-template-columns:1fr}
  .fn{grid-template-columns:repeat(2,1fr)}
  .blog3{grid-template-columns:1fr}
  .tri{grid-template-columns:1fr}.tri article:after{display:none}
  .clanak{grid-template-columns:1fr}.bok{position:static}
  footer .grid{grid-template-columns:1fr 1fr}
  .nalog{transform:none}
}
@media (max-width:760px){
  body{font-size:16.5px}
  section{padding:64px 0}
  .burger{display:block}
  nav.glavni{position:absolute;left:0;right:0;top:68px;background:var(--paper);flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 22px;border-bottom:2px solid var(--ink);display:none}
  nav.glavni.otvoren{display:flex}
  nav.glavni a{padding:14px 0;border-bottom:1px solid var(--line)}
  nav.glavni .btn{margin-top:14px;justify-content:center}
  .fn{grid-template-columns:1fr}
  .polja{grid-template-columns:1fr}
  .scena{height:270px}.servis{width:210px;left:2%}.hint{display:none}
  .vozilo.l1,.vozilo.l2{width:128px}.vozilo.mot{width:84px}.vozilo.kam{width:160px}.vozilo.l1{bottom:50px}
  .koraci button{font-size:10.5px}
  footer .grid{grid-template-columns:1fr}
  form.kartica{padding:22px}
  .kalk .iznos{font-size:62px}
}