/* ==================================================================
   LUXURY CARS — dizajn sistem
   Sekcije su zaobljeni "vesseli" uvučeni u stranicu; header je kapsula
   koja pluta iznad sadržaja. Zlatni gradient je jedini akcent.

     Archivo (expanded)  naslovi
     Onest               čitanje
     Martian Mono        izmjerene vrijednosti: cijene, km, telefoni

   Pravilo za sve animacije: OSNOVNI stil je završno stanje, a početno
   stanje živi u keyframe-u / :not(.is-in). Ako animacija nikad ne krene
   (JS isključen, tab u pozadini), stranica je kompletna.
   ================================================================== */

:root{
  --bg:#ffffff;
  --mist:#f2f4f7;
  --mist-2:#e7ebf0;
  --ink:#0b1220;
  --ink-2:#111a2c;
  --ink-3:#1c273b;
  --body:#465163;
  --muted:#5b6676;
  --line:#e3e7ed;
  --line-2:#cdd5df;
  --gold:#d8b64a;
  --gold-2:#bf972a;
  --gold-3:#98741b;
  --gold-text:#8a6a16;
  --gold-soft:#f7f0db;
  --gold-light:#efd88f;
  --grad-gold:linear-gradient(135deg,#e0c35c 0%,#c49d2f 48%,#98741b 100%);
  --grad-gold-text:linear-gradient(100deg,#f6e3a1 0%,#d8b64a 45%,#c49d2f 100%);
  --amber:#e0a11c;
  --success:#15803d;
  --danger:#c62828;

  --f-display:'Archivo','Arial Black',system-ui,sans-serif;
  --f-sans:'Onest',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-mono:'Martian Mono',ui-monospace,Menlo,Consolas,monospace;

  --ease-glide:cubic-bezier(.45,.05,.25,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --ease-quart:cubic-bezier(.25,1,.5,1);

  --gut:clamp(8px,1.1vw,16px);
  --r-v:clamp(22px,2.6vw,40px);
  --nav-top:calc(var(--gut) + 10px);
  --nav-bar:60px;
  --nav-h:calc(var(--nav-top) + var(--nav-bar) + 14px);

  --shadow-card:0 1px 2px rgb(11 18 32/.04),0 14px 34px -18px rgb(11 18 32/.22);
  --shadow-lift:0 2px 6px rgb(11 18 32/.05),0 34px 64px -30px rgb(11 18 32/.42);

  interpolate-size:allow-keywords;
}
@media (min-width:1024px){
  :root{ --nav-top:calc(var(--gut) + 16px); --nav-bar:66px; }
}

/* ------------------------------------------------------------------ */
/* Reset / base                                                        */
/* ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
ul,ol{list-style:none;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--bg);scroll-padding-top:var(--nav-h);overflow-x:hidden}
@supports (overflow:clip){ html{overflow-x:clip} }
body{
  font-family:var(--f-sans);font-size:1rem;line-height:1.66;color:var(--body);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{
  font-family:var(--f-display);color:var(--ink);font-weight:760;font-stretch:108%;
  line-height:1.05;letter-spacing:-.014em;text-wrap:balance;
}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
img,svg,video,iframe{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
figure{margin:0}
::selection{background:var(--gold);color:var(--ink)}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--gold-2);outline-offset:3px;border-radius:10px}
.on-dark :where(a,button,summary):focus-visible{outline-color:var(--gold-light)}

.ic{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.125em}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.tnum{font-variant-numeric:tabular-nums}
.mono{font-family:var(--f-mono);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.gold{color:var(--gold-text)}
.skip{position:fixed;left:16px;top:-80px;z-index:100;padding:12px 18px;border-radius:99px;background:var(--ink);color:#fff;font-weight:600;transition:top .3s}
.skip:focus{top:16px}

/* ------------------------------------------------------------------ */
/* Layout                                                              */
/* ------------------------------------------------------------------ */
.shell{width:100%;max-width:80rem;margin-inline:auto;padding-inline:1.25rem}
@media (min-width:640px){ .shell{padding-inline:2rem} }
@media (min-width:1280px){ .shell{padding-inline:2.75rem} }
.shell-md{max-width:66rem}

.band{padding-block:clamp(4.5rem,2.6rem + 5.6vw,8rem)}
.band-top{padding-top:clamp(2rem,1.4rem + 2vw,3.5rem)}

/* Vessel: zaobljena sekcija uvučena od ivice ekrana.
   overflow:clip (ne hidden) — ne pravi scroll kontejner, pa sticky radi. */
.vessel{position:relative;isolation:isolate;overflow:hidden;margin:var(--gut);border-radius:var(--r-v)}
@supports (overflow:clip){ .vessel{overflow:clip} }
.v-mist{background:var(--mist)}
.v-ink{background:var(--ink)}
.on-dark{color:rgb(255 255 255/.78)}
.on-dark :is(h1,h2,h3,h4){color:#fff}

.vbg{position:absolute;inset:0;z-index:-3;overflow:hidden}
.vbg img{width:100%;height:100%;object-fit:cover}
.vscrim{position:absolute;inset:0;z-index:-2}
.grain{
  position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.2;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ */
/* Type                                                                */
/* ------------------------------------------------------------------ */
.t-hero{font-size:clamp(2.3rem,8.2cqi,4.7rem);line-height:1;font-weight:820;font-stretch:104%;letter-spacing:-.022em}
.t-h1{font-size:clamp(2.1rem,1.15rem + 3.1vw,4rem);line-height:1.02;font-weight:800;font-stretch:106%;letter-spacing:-.02em}
.t-h2{font-size:clamp(1.8rem,1.15rem + 2.2vw,3.05rem);line-height:1.05;font-weight:780;font-stretch:106%;letter-spacing:-.018em}
@media (min-width:640px){
  .t-hero{font-stretch:116%}
  .t-h1{font-stretch:114%}
  .t-h2{font-stretch:112%}
}
.t-lead{font-size:clamp(1.04rem,.98rem + .3vw,1.2rem);line-height:1.6}
.hl{font-style:normal;background:var(--grad-gold-text);-webkit-background-clip:text;background-clip:text;color:transparent}

.kicker{display:inline-flex;align-items:center;gap:12px;font-size:.74rem;font-weight:650;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.kicker::before{content:'';flex:none;width:24px;height:2px;border-radius:2px;background:var(--grad-gold)}
.on-dark .kicker{color:rgb(255 255 255/.86)}

.sh{max-width:46rem}
.sh .t-h2{margin-top:16px}
.sh-p{margin-top:16px;max-width:38rem;font-size:1.04rem}
.sh-c{margin:0 auto 52px;text-align:center;display:flex;flex-direction:column;align-items:center}
.sh-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:44px}

/* Riječ u maski: prostor za kvačice (Č, Š) gore i descendere (g, j) dolje. */
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding:.12em 0 .22em;margin:-.12em 0 -.22em}
.wi{display:inline-block}

/* ------------------------------------------------------------------ */
/* Buttons — pilule. Hover: tamna (ili bijela) boja se "nalije" odozdo. */
/* ------------------------------------------------------------------ */
.btn{
  position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:54px;padding:0 26px;border-radius:999px;border:1.5px solid transparent;background:none;
  font-size:.95rem;font-weight:620;line-height:1.2;letter-spacing:-.005em;white-space:nowrap;cursor:pointer;
  transition:color .7s var(--ease-glide),border-color .7s var(--ease-glide),box-shadow .7s var(--ease-glide),transform .5s var(--ease-glide);
}
.btn::before{content:'';position:absolute;inset:-2px;z-index:-1;border-radius:inherit;transform:translate3d(0,102%,0);transition:transform .8s var(--ease-glide)}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn:active{transform:translateY(1px) scale(.99)}
.btn .ic{width:18px;height:18px}
.btn-gold{color:#fff;background:var(--grad-gold);text-shadow:0 1px 1px rgb(0 0 0/.16);box-shadow:0 14px 30px -16px rgb(152 116 27/.9)}
.btn-gold::before{background:var(--ink)}
.on-dark .btn-gold::before{background:#fff}
.on-dark .btn-gold:is(:hover,:focus-visible){color:var(--ink);text-shadow:none}
.btn-line{color:var(--ink);border-color:var(--line-2)}
.btn-line::before{background:var(--ink)}
.btn-line:is(:hover,:focus-visible){color:#fff;border-color:var(--ink)}
.btn-glass,.on-dark .btn-line{color:#fff;border-color:rgb(255 255 255/.36);background:rgb(255 255 255/.06)}
.btn-glass::before,.on-dark .btn-line::before{background:#fff}
.btn-glass:is(:hover,:focus-visible),.on-dark .btn-line:is(:hover,:focus-visible){color:var(--ink);border-color:#fff}
.btn-block{width:100%}

.arw{position:relative;display:block;flex:none;width:16px;height:1.6px;background:currentColor;transition:width .7s var(--ease-glide)}
.arw::after{content:'';position:absolute;right:0;top:-3.2px;width:8px;height:8px;border-top:1.6px solid currentColor;border-right:1.6px solid currentColor;transform:rotate(45deg)}
.btn:hover .arw{width:26px}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;background:#fff;font-size:.74rem;font-weight:650;line-height:1.2;white-space:nowrap}
.badge::before{content:'';width:6px;height:6px;border-radius:99px;background:currentColor}
.badge-success{color:var(--success)}
.badge-accent{color:#a16207}
.badge-danger{color:var(--danger)}
.badge-muted{color:var(--muted)}
.badge-arrive{color:var(--ink)}
.badge-arrive::before{background:var(--gold-2);box-shadow:0 0 0 0 rgb(191 151 42/.5)}
.pill{display:inline-flex;align-items:center;padding:6px 12px;border-radius:99px;background:var(--amber);color:var(--ink);font-size:.7rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.manu-initial{display:inline-grid;place-items:center;flex:none;border-radius:50%;background:var(--gold-soft);color:var(--gold-text);font-weight:750;font-family:var(--f-sans)}

/* ------------------------------------------------------------------ */
/* HEADER — plutajuća kapsula                                          */
/* ------------------------------------------------------------------ */
.nav{position:fixed;inset:0 0 auto;z-index:50;padding-top:var(--nav-top);pointer-events:none;transition:padding-top .8s var(--ease-glide)}
.nav-wrap{width:100%;max-width:80rem;margin-inline:auto;padding-inline:calc(var(--gut) + 6px)}
@media (min-width:640px){ .nav-wrap{padding-inline:2rem} }
@media (min-width:1280px){ .nav-wrap{padding-inline:2.75rem} }
.nav-bar{
  pointer-events:auto;position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;
  height:var(--nav-bar);max-width:80rem;margin-inline:auto;padding:0 7px 0 12px;border-radius:999px;
  background:rgb(11 18 32/.95);border:1px solid rgb(255 255 255/.09);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.06),0 22px 44px -22px rgb(0 0 0/.6);
  transition:max-width .9s var(--ease-glide),height .7s var(--ease-glide);
}
@media (min-width:1024px){ .nav-bar{padding:0 8px 0 16px} }
.nav[data-compact]{padding-top:10px}
.nav[data-compact] .nav-bar{height:calc(var(--nav-bar) - 6px)}
@media (min-width:1280px){ .nav[data-compact] .nav-bar{max-width:68rem} }

.nav-progress{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.nav-progress span{display:none;position:absolute;left:26px;right:26px;bottom:0;height:2px;border-radius:2px;background:var(--grad-gold);transform-origin:0 50%}

.nav-logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-logo img{height:40px;width:auto;filter:drop-shadow(0 2px 6px rgb(0 0 0/.4))}
.nav-word{font-family:var(--f-display);font-stretch:125%;font-weight:700;font-size:.9rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;white-space:nowrap}
.nav-word b{margin-left:.45em;font-weight:700;background:var(--grad-gold-text);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width:389px){ .nav-word{display:none} }

.nav-links{position:relative;display:none;align-items:center;gap:2px;margin-inline:auto}
@media (min-width:1024px){ .nav-links{display:flex} }
.nav-link{position:relative;z-index:1;display:inline-flex;align-items:center;height:44px;padding:0 18px;border-radius:999px;font-size:.88rem;font-weight:550;color:rgb(255 255 255/.7);transition:color .6s var(--ease-glide)}
.nav-link:hover,.nav-link[aria-current]{color:#fff}
.nav-link[aria-current]::after{content:'';position:absolute;left:50%;bottom:6px;width:4px;height:4px;margin-left:-2px;border-radius:9px;background:var(--gold)}
.nav-ind{position:absolute;left:0;top:50%;height:44px;width:var(--w,0px);border-radius:999px;background:rgb(255 255 255/.09);box-shadow:inset 0 0 0 1px rgb(255 255 255/.06);opacity:var(--o,0);transform:translate3d(var(--x,0px),-50%,0);transition:transform .75s var(--ease-glide),width .75s var(--ease-glide),opacity .5s var(--ease-glide);pointer-events:none}
html:not(.js) .nav-link[aria-current]{background:rgb(255 255 255/.09)}

.nav-end{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nav-phone{display:none;align-items:center;gap:10px;height:46px;padding:0 14px 0 6px;border-radius:999px;color:#fff;font-size:.78rem;transition:background-color .6s var(--ease-glide)}
.nav-phone:hover{background:rgb(255 255 255/.07)}
.nav-phone-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:99px;background:rgb(216 182 74/.16);color:var(--gold-light)}
@media (min-width:1280px){ .nav-phone{display:inline-flex} }
.nav-cta{
  position:relative;isolation:isolate;overflow:hidden;display:none;align-items:center;gap:10px;height:46px;padding:0 6px 0 20px;border-radius:999px;
  background:var(--grad-gold);color:#fff;font-size:.9rem;font-weight:620;text-shadow:0 1px 1px rgb(0 0 0/.15);
  box-shadow:0 10px 22px -12px rgb(191 151 42/.8);transition:color .6s var(--ease-glide);
}
.nav-cta::before{content:'';position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:#fff;transform:translate3d(0,102%,0);transition:transform .75s var(--ease-glide)}
.nav-cta:is(:hover,:focus-visible){color:var(--ink);text-shadow:none}
.nav-cta:is(:hover,:focus-visible)::before{transform:none}
.nav-cta .chip{display:grid;place-items:center;width:34px;height:34px;border-radius:99px;background:rgb(255 255 255/.22);transition:transform .75s var(--ease-glide),background-color .6s,color .6s}
.nav-cta:is(:hover,:focus-visible) .chip{transform:rotate(45deg);background:var(--ink);color:#fff}
@media (min-width:560px){ .nav-cta{display:inline-flex} }
.nav-burger{position:relative;display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:99px;background:rgb(255 255 255/.09);cursor:pointer;transition:background-color .5s}
.nav-burger:hover{background:rgb(255 255 255/.16)}
.nav-burger span{position:absolute;left:14px;right:14px;height:1.6px;border-radius:2px;background:#fff;transition:transform .55s var(--ease-glide)}
.nav-burger span:first-child{transform:translateY(-4px)}
.nav-burger span:last-child{transform:translateY(4px)}
.nav-burger[aria-expanded="true"] span:first-child{transform:rotate(45deg)}
.nav-burger[aria-expanded="true"] span:last-child{transform:rotate(-45deg)}
@media (min-width:1024px){ .nav-burger{display:none} }

/* Drawer */
.drawer{position:fixed;inset:0;z-index:70}
.drawer[hidden]{display:none}
.drawer-bg{position:absolute;inset:0;background:rgb(5 9 17/.62);opacity:0;transition:opacity .5s var(--ease-glide)}
.drawer-panel{
  position:absolute;top:8px;right:8px;bottom:8px;width:min(25rem,calc(100vw - 16px));display:flex;flex-direction:column;gap:22px;
  padding:12px 16px 20px;border-radius:28px;background:var(--ink);color:#fff;overflow-y:auto;overscroll-behavior:contain;
  box-shadow:0 30px 80px -20px rgb(0 0 0/.7);transform:translate3d(calc(100% + 16px),0,0);transition:transform .6s var(--ease-expo);
}
.drawer[data-open] .drawer-bg{opacity:1}
.drawer[data-open] .drawer-panel{transform:none}
.drawer-top{display:flex;align-items:center;justify-content:space-between;min-height:58px;padding-left:4px}
.drawer-x{display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:99px;background:rgb(255 255 255/.09);color:#fff;cursor:pointer}
.drawer-x .ic{width:20px;height:20px}
.drawer-links{display:grid;gap:4px}
.drawer-links a{
  display:flex;align-items:center;justify-content:space-between;min-height:66px;padding:0 10px 0 18px;border-radius:20px;
  font-family:var(--f-display);font-stretch:116%;font-weight:750;font-size:1.6rem;letter-spacing:-.015em;color:#fff;
  opacity:0;transform:translate3d(26px,0,0);
  transition:opacity .5s var(--ease-quart),transform .75s var(--ease-expo),background-color .4s;
  transition-delay:calc(110ms + var(--i,0) * 60ms);
}
.drawer[data-open] .drawer-links a{opacity:1;transform:none}
.drawer-links a:hover{background:rgb(255 255 255/.06)}
.drawer-links a[aria-current]{background:rgb(255 255 255/.07)}
.drawer-links a[aria-current] .drawer-arw{background:var(--grad-gold);border-color:transparent}
.drawer-arw{display:grid;place-items:center;width:42px;height:42px;border-radius:99px;border:1px solid rgb(255 255 255/.18);font-size:1rem}
.drawer-info{margin-top:auto;display:grid;gap:12px;padding:18px;border-radius:20px;background:rgb(255 255 255/.05);font-size:.92rem;color:rgb(255 255 255/.78)}
.drawer-info a,.drawer-info p{display:flex;gap:12px;align-items:flex-start}
.drawer-info .ic{color:var(--gold);margin-top:.25em}

/* ------------------------------------------------------------------ */
/* HERO                                                                */
/* ------------------------------------------------------------------ */
.hero{position:relative;isolation:isolate;overflow:hidden;display:flex;margin:var(--gut);border-radius:var(--r-v);background:var(--ink);color:#fff;min-height:calc(100vh - var(--gut) * 2)}
@supports (height:100svh){ .hero{min-height:calc(100svh - var(--gut) * 2)} }
.hero-media{position:absolute;inset:0;z-index:-3;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero-scrim{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgb(11 18 32/.74) 0%,rgb(11 18 32/.7) 45%,rgb(11 18 32/.9) 100%)}
@media (min-width:1024px){
  .hero-scrim{background:
    linear-gradient(90deg,rgb(11 18 32/.92) 0%,rgb(11 18 32/.78) 42%,rgb(11 18 32/.42) 72%,rgb(11 18 32/.3) 100%),
    linear-gradient(0deg,rgb(11 18 32/.7) 0%,transparent 42%,transparent 72%,rgb(11 18 32/.5) 100%)}
}
.hero-inner{position:relative;display:grid;gap:44px;align-items:center;width:100%;padding-top:calc(var(--nav-h) + 26px);padding-bottom:64px}
@media (min-width:1024px){
  .hero-inner{padding-bottom:92px}
  .hero-inner.has-special{grid-template-columns:minmax(0,1fr) minmax(0,24rem);gap:64px}
}
.hero-copy{container-type:inline-size}
.hero h1{color:#fff}
@media (max-width:639px){ .hero h1{font-stretch:100%} }
.hero-lead{margin-top:24px;max-width:35rem;color:rgb(255 255 255/.86)}
.hero-actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}
.hero-stats{margin-top:44px;display:flex;flex-wrap:wrap}
.hero-stats>div{padding:2px 26px;border-left:1px solid rgb(255 255 255/.16)}
.hero-stats>div:first-child{padding-left:0;border-left:0}
.hero-stats dt{font-family:var(--f-display);font-weight:820;font-stretch:112%;font-size:clamp(1.8rem,1.3rem + 1.4vw,2.5rem);line-height:1;color:#fff;letter-spacing:-.02em}
.hero-stats dd{margin:8px 0 0;font-size:.82rem;color:rgb(255 255 255/.68)}
@media (max-width:560px){
  .hero-actions .btn{flex:1 1 100%}
  .hero-stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;margin-top:36px}
  .hero-stats>div{padding:2px 14px}
  .hero-stats dt{font-size:1.6rem}
  .hero-stats dd{font-size:.76rem}
}
.hero-brands{margin-top:38px;max-width:34rem}
.hero-brands-l{font-size:.7rem;font-weight:650;letter-spacing:.16em;text-transform:uppercase;color:rgb(255 255 255/.56)}
.brand-marquee{margin-top:14px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.brand-track{display:flex;align-items:center;width:max-content}
.brand-track img{height:30px;width:auto;flex:none;margin-right:40px;filter:brightness(0) invert(1);opacity:.78}
.hero-cue{display:none}
@media (min-width:1024px) and (min-height:760px){
  .hero-cue{display:block;position:absolute;left:50%;bottom:24px;width:26px;height:42px;margin-left:-13px;border-radius:99px;border:1.5px solid rgb(255 255 255/.32)}
  .hero-cue span{position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;border-radius:3px;background:var(--gold)}
}

/* Posebna ponuda — kartica s rotirajućim zlatnim rubom */
@property --spin{syntax:'<angle>';inherits:false;initial-value:0deg}
.hero-side{perspective:1100px}
.special{
  position:relative;display:block;padding:8px;border-radius:30px;color:var(--ink);border:1.5px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    conic-gradient(from var(--spin),rgb(255 255 255/.4) 0%,#f6e3a1 12%,#c49d2f 22%,rgb(255 255 255/.4) 36%,rgb(255 255 255/.4) 100%) border-box;
  box-shadow:0 44px 90px -40px rgb(0 0 0/.85);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .9s var(--ease-glide);
}
.special-media{position:relative;aspect-ratio:16/10;border-radius:22px;overflow:hidden;background:var(--mist-2)}
.special-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease-glide)}
.special:hover .special-media img{transform:scale(1.07)}
.special-media .pill{position:absolute;left:12px;top:12px}
.special-body{padding:18px 14px 10px}
.special .special-title{margin-top:8px;font-size:1.3rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}

/* ------------------------------------------------------------------ */
/* Kartica vozila                                                      */
/* ------------------------------------------------------------------ */
.grid-cars{display:grid;gap:20px}
@media (min-width:640px){ .grid-cars{grid-template-columns:1fr 1fr} }
@media (min-width:1024px){ .grid-cars{grid-template-columns:1fr 1fr 1fr;gap:24px} }
.vc{min-width:0}
.vc-link{display:flex;flex-direction:column;height:100%;padding:8px;border-radius:28px;background:#fff;border:1px solid var(--line);transition:transform .9s var(--ease-glide),box-shadow .9s var(--ease-glide),border-color .9s var(--ease-glide)}
.vc-link:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);border-color:transparent}
.vc-media{position:relative;aspect-ratio:16/11;overflow:hidden;border-radius:21px;background:var(--mist-2);isolation:isolate}
.vc-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease-glide)}
.vc-link:hover .vc-media img{transform:scale(1.08)}
.vc-tags{position:absolute;inset:12px 12px auto;z-index:1;display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.vc-eta{position:absolute;left:12px;bottom:12px;right:12px;z-index:1;display:inline-flex;align-items:center;gap:8px;width:max-content;max-width:calc(100% - 24px);padding:8px 13px;border-radius:99px;background:rgb(11 18 32/.84);color:rgb(255 255 255/.86);font-size:.76rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc-eta .ic{color:var(--gold);width:14px;height:14px}
.vc-eta b{color:#fff;font-weight:650}
.vc-body{display:flex;flex-direction:column;flex:1;padding:18px 14px 10px}
.vc-make{display:flex;align-items:center;gap:8px;font-size:.72rem;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text)}
.vc .vc-title{margin-top:8px;font-size:1.2rem;line-height:1.2;font-stretch:104%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.vc-link{color:var(--body)} /* kartica je bijela i na tamnim sekcijama */
.vc-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:14px 0 16px}
.vc-specs li{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 11px;border-radius:12px;background:var(--mist);font-size:.82rem;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc-specs .ic{width:14px;height:14px;color:var(--gold-2)}
.vc-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.vc-price s{display:block;font-family:var(--f-mono);font-size:.74rem;color:var(--muted);letter-spacing:-.04em}
.vc-price strong{display:block;font-family:var(--f-mono);font-size:1.12rem;font-weight:600;color:var(--ink);letter-spacing:-.06em;white-space:nowrap}
.vc-go{display:inline-flex;align-items:center;gap:10px;font-size:.86rem;font-weight:620;color:var(--ink);white-space:nowrap}
.vc-go-c{display:grid;place-items:center;width:40px;height:40px;border-radius:99px;border:1px solid var(--line-2);transition:background .8s var(--ease-glide),border-color .8s var(--ease-glide),color .8s var(--ease-glide),transform .8s var(--ease-glide)}
.vc-link:hover .vc-go-c,.special:hover .vc-go-c{background:var(--grad-gold);border-color:transparent;color:#fff;transform:rotate(45deg)}
.empty{padding:56px 24px;border-radius:28px;background:var(--mist);text-align:center;color:var(--muted)}
.empty a{color:var(--gold-text);font-weight:620}

/* ------------------------------------------------------------------ */
/* Traka (ticker)                                                      */
/* ------------------------------------------------------------------ */
.ticker-band{overflow:hidden;padding-block:clamp(.5rem,1.5vw,1.25rem) clamp(2.5rem,1.5rem + 3vw,4.5rem);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ticker{display:flex;align-items:center;width:max-content}
.tk{padding-inline:.38em;font-family:var(--f-display);font-weight:850;font-stretch:125%;font-size:clamp(2rem,1.1rem + 4vw,4.6rem);line-height:1.15;letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap;color:var(--ink)}
.tk-o{color:transparent;-webkit-text-stroke:1.4px var(--gold-2)}
.tk-star{display:inline-grid;place-items:center;color:var(--gold-2);font-size:clamp(1.1rem,.8rem + 1.2vw,1.9rem)}
.tk-star .ic{fill:currentColor}

/* ------------------------------------------------------------------ */
/* Prednosti (foto vessel)                                             */
/* ------------------------------------------------------------------ */
.why-scrim{background:linear-gradient(90deg,rgb(11 18 32/.95) 0%,rgb(11 18 32/.86) 50%,rgb(11 18 32/.72) 100%),linear-gradient(0deg,rgb(11 18 32/.55),transparent 55%)}
.why-grid{display:grid;gap:48px;align-items:center}
@media (min-width:1024px){ .why-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:88px} }
.why-intro .t-h2{margin-top:16px}
.why-p{margin-top:20px;max-width:30rem;color:rgb(255 255 255/.76)}
.why-intro .btn{margin-top:32px}
.why-list{border-bottom:1px solid rgb(255 255 255/.14)}
.why-row{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;padding:26px 0;border-top:1px solid rgb(255 255 255/.14)}
.why-row::after{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--grad-gold);transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease-glide)}
.why-row:hover::after{transform:scaleX(1)}
.why-num{padding-top:.42em;font-size:.8rem;color:var(--gold-light)}
.why-txt{transition:transform .9s var(--ease-glide)}
.why-row:hover .why-txt{transform:translateX(8px)}
.why-txt h3{font-size:clamp(1.15rem,1rem + .5vw,1.4rem)}
.why-txt p{margin-top:6px;max-width:34rem;color:rgb(255 255 255/.7)}

/* ------------------------------------------------------------------ */
/* Koraci                                                              */
/* ------------------------------------------------------------------ */
.steps{position:relative;display:grid;gap:20px}
@media (min-width:768px){ .steps{grid-template-columns:repeat(3,1fr);gap:24px;padding-top:44px} }
.steps-line{display:none}
@media (min-width:768px){
  .steps-line{display:block;position:absolute;left:0;right:0;top:14px;height:2px;border-radius:2px;transform-origin:left;background:linear-gradient(90deg,var(--gold-2),var(--gold) 55%,rgb(191 151 42/.14))}
  .step::before{content:'';position:absolute;top:-36px;left:51px;width:14px;height:14px;border-radius:99px;background:var(--mist);border:3px solid var(--gold-2);box-shadow:0 0 0 5px var(--mist)}
}
.step{position:relative;padding:30px 28px 32px;border-radius:28px;background:#fff;border:1px solid var(--line);transition:transform .9s var(--ease-glide),box-shadow .9s var(--ease-glide),border-color .9s var(--ease-glide)}
.step:hover{transform:translateY(-8px);box-shadow:var(--shadow-lift);border-color:transparent}
.step-top{display:flex;align-items:center;justify-content:space-between}
.step-ic{display:grid;place-items:center;width:60px;height:60px;border-radius:20px;background:var(--grad-gold);color:#fff;box-shadow:0 14px 28px -14px rgb(191 151 42/.95);transition:transform .9s var(--ease-glide)}
.step-ic .ic{width:26px;height:26px}
.step:hover .step-ic{transform:rotate(-8deg) scale(1.06)}
.step-num{font-family:var(--f-display);font-weight:850;font-stretch:125%;font-size:3.4rem;line-height:1;color:transparent;-webkit-text-stroke:1.3px var(--line-2);transition:-webkit-text-stroke-color .9s var(--ease-glide)}
.step:hover .step-num{-webkit-text-stroke-color:var(--gold-2)}
.step h3{margin-top:26px;font-size:1.3rem}
.step p{margin-top:10px}

/* ------------------------------------------------------------------ */
/* Split (slika + tekst)                                               */
/* ------------------------------------------------------------------ */
.split{display:grid;gap:44px;align-items:center}
@media (min-width:1024px){ .split{grid-template-columns:1fr 1fr;gap:80px} }
.split-img{position:relative}
.split-in{aspect-ratio:4/3.3;border-radius:28px;overflow:hidden;background:var(--mist-2)}
.split-tall .split-in{aspect-ratio:4/4.4}
.split-in img{width:100%;height:100%;object-fit:cover;transition:transform 2s var(--ease-glide)}
.split-img:hover .split-in img{transform:scale(1.05)}
.split-tag{position:absolute;left:18px;bottom:18px;display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border-radius:99px;background:#fff;color:var(--ink);font-size:.88rem;font-weight:620;box-shadow:var(--shadow-card)}
.split-dot{width:8px;height:8px;border-radius:99px;background:var(--success);box-shadow:0 0 0 4px rgb(21 128 61/.16)}
.split-copy .t-h2{margin-top:16px}
.split-copy>.btn{margin-top:32px}
.check-list{margin-top:26px;display:grid;gap:10px}
.check-list li{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:18px;background:var(--mist);color:var(--ink);font-weight:520}
.ci{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:99px;background:var(--grad-gold);color:#fff}
.ci .ic{width:15px;height:15px}

/* ------------------------------------------------------------------ */
/* Vozila u dolasku                                                    */
/* ------------------------------------------------------------------ */
.arrive{padding-block:clamp(3.75rem,2rem + 5vw,7rem)}
.arrive .vbg img{object-position:center 62%}
.arrive-scrim{background:linear-gradient(90deg,rgb(11 18 32/.95) 0%,rgb(11 18 32/.84) 45%,rgb(11 18 32/.55) 100%)}
.arrive-in{display:flex;flex-direction:column;align-items:flex-start;gap:30px}
@media (min-width:1024px){ .arrive-in{flex-direction:row;align-items:center;justify-content:space-between} }
.arrive .t-h2{margin-top:16px}
.arrive-p{margin-top:14px;max-width:34rem;color:rgb(255 255 255/.8)}
/* S karticama: cijela sekcija je tamna, fotografija kamiona samo kao atmosfera */
.arrive.arrive-list{padding-block:clamp(4.5rem,2.6rem + 5.6vw,8rem)}
.arrive-list-scrim{background:linear-gradient(180deg,rgb(11 18 32/.9) 0%,rgb(11 18 32/.84) 38%,rgb(11 18 32/.95) 100%),linear-gradient(90deg,rgb(11 18 32/.5),transparent 70%)}
.arrive-list .vc-link{border-color:transparent}
.arrive-list .vc-link:hover{box-shadow:0 30px 60px -28px rgb(0 0 0/.75)}

/* ------------------------------------------------------------------ */
/* Iskustva kupaca                                                     */
/* ------------------------------------------------------------------ */
.tgrid{display:grid;gap:20px}
@media (min-width:768px){ .tgrid{grid-template-columns:repeat(3,1fr);gap:24px} }
.tcard{position:relative;display:flex;flex-direction:column;padding:30px 28px;border-radius:28px;background:var(--mist);overflow:hidden;transition:transform .9s var(--ease-glide),background-color .9s var(--ease-glide)}
.tcard:hover{transform:translateY(-6px);background:var(--mist-2)}
.tq{position:absolute;right:20px;top:-14px;font-family:var(--f-display);font-weight:900;font-size:8rem;line-height:1;color:var(--gold);opacity:.24;pointer-events:none}
.tstars{display:flex;gap:3px;color:var(--gold-2)}
.tstars .ic{width:16px;height:16px;fill:currentColor}
.tcard blockquote{flex:1;margin:18px 0 0;font-size:1.04rem;line-height:1.6;color:var(--ink)}
.tcard figcaption{margin-top:24px;display:flex;align-items:center;gap:12px;font-size:.92rem;font-weight:620;color:var(--ink)}
.tav{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:99px;background:var(--ink);color:var(--gold-light);font-family:var(--f-display);font-weight:800}

/* ------------------------------------------------------------------ */
/* FAQ                                                                 */
/* ------------------------------------------------------------------ */
.faq-grid{display:grid;gap:36px}
@media (min-width:1024px){
  .faq-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:80px;align-items:start}
  .faq-head{position:sticky;top:calc(var(--nav-h) + 24px)}
}
.faq-head .t-h2{margin-top:16px}
.faq{display:grid;gap:10px}
.faq details{border-radius:22px;background:#fff;transition:box-shadow .6s var(--ease-glide)}
.faq details[open]{box-shadow:var(--shadow-card)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 20px 20px 24px;list-style:none;cursor:pointer;font-weight:620;font-size:1.02rem;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq-pm{position:relative;flex:none;width:38px;height:38px;border-radius:99px;background:var(--mist);transition:background-color .6s var(--ease-glide),transform .6s var(--ease-glide)}
.faq-pm::before,.faq-pm::after{content:'';position:absolute;left:50%;top:50%;width:13px;height:1.6px;margin:-.8px 0 0 -6.5px;border-radius:2px;background:var(--ink);transition:transform .6s var(--ease-glide),background-color .6s}
.faq-pm::after{transform:rotate(90deg)}
.faq details[open] .faq-pm{background:var(--ink);transform:rotate(180deg)}
.faq details[open] .faq-pm::before,.faq details[open] .faq-pm::after{background:var(--gold-light)}
.faq details[open] .faq-pm::after{transform:rotate(0)}
.faq-a p{padding:0 24px 24px;max-width:60ch}
.faq details::details-content{block-size:0;overflow-y:clip;transition:block-size .6s var(--ease-glide),content-visibility .6s allow-discrete}
.faq details[open]::details-content{block-size:auto}

/* ------------------------------------------------------------------ */
/* Kontakt kartica + forme                                             */
/* ------------------------------------------------------------------ */
.cc{display:grid;border-radius:30px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-card)}
@media (min-width:900px){ .cc{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)} }
.cc-side{position:relative;isolation:isolate;overflow:hidden;padding:36px 30px;background:var(--ink)}
.cc-side::after{content:'';position:absolute;right:-35%;top:-35%;z-index:-2;width:85%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgb(216 182 74/.3),transparent)}
@media (min-width:640px){ .cc-side{padding:44px 40px} }
.cc-title{margin-top:16px;font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
.cc-sub{margin-top:10px;font-size:.95rem;color:rgb(255 255 255/.72)}
.cc-list{margin-top:30px;display:grid;gap:18px}
.cc-list li{display:flex;align-items:flex-start;gap:14px;font-size:.95rem}
.cc-ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:14px;background:rgb(255 255 255/.07);color:var(--gold-light)}
.cc-list b{display:block;margin-bottom:2px;font-size:.84rem;font-weight:620;color:#fff}
.cc-list a{color:#fff}
.cc-form{padding:30px 22px}
@media (min-width:640px){ .cc-form{padding:44px 40px} }
.cc-send{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:6px}
.note{max-width:24rem;font-size:.8rem;line-height:1.5;color:var(--muted)}

.form-grid{display:grid;column-gap:16px}
@media (min-width:640px){ .form-grid.c2{grid-template-columns:1fr 1fr} }
.field{display:block;margin-bottom:16px}
.field-l{display:block;margin-bottom:7px;font-size:.8rem;font-weight:620;color:var(--ink)}
.input{display:block;width:100%;min-height:52px;padding:12px 16px;border:1px solid var(--line-2);border-radius:14px;background:#fff;color:var(--ink);font-size:.97rem;line-height:1.4;transition:border-color .4s var(--ease-glide),box-shadow .4s var(--ease-glide)}
.input::placeholder{color:#6c7787}
.input:hover{border-color:#b4bfcb}
.input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgb(216 182 74/.3)}
textarea.input{min-height:132px;resize:vertical;line-height:1.55}
select.input{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%230b1220' stroke-width='1.6'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 17px center}
.alert{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px;padding:14px 16px;border-radius:16px;font-size:.92rem;line-height:1.5}
.alert-ok{background:rgb(21 128 61/.09);color:#14532d}
.alert-err{background:rgb(198 40 40/.08);color:var(--danger)}
.alert-ic{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:99px;background:var(--success);color:#fff}

/* Mapa */
.map{height:clamp(340px,46vw,540px);background:var(--mist)}
.map iframe{width:100%;height:100%;border:0;filter:grayscale(.55) contrast(1.04);transition:filter 1.2s var(--ease-glide)}
.map:hover iframe{filter:none}

/* ------------------------------------------------------------------ */
/* FOOTER                                                              */
/* ------------------------------------------------------------------ */
.ftr{padding-top:clamp(3.5rem,2rem + 4vw,5.5rem);color:rgb(255 255 255/.72)}
.ftr-grid{display:grid;gap:40px}
@media (min-width:640px){ .ftr-grid{grid-template-columns:1fr 1fr} }
@media (min-width:1024px){ .ftr-grid{grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:48px} }
.ftr-brand p{margin-top:18px;max-width:22rem;font-size:.94rem}
.ftr h3{margin-bottom:18px;font-family:var(--f-sans);font-size:.74rem;font-weight:650;letter-spacing:.16em;text-transform:uppercase;color:rgb(255 255 255/.5)}
.ftr ul{display:grid;gap:11px;font-size:.95rem}
.ftr ul a{color:rgb(255 255 255/.84);background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:color .5s,background-size .8s var(--ease-glide)}
.ftr ul a:hover{color:#fff;background-size:100% 1px}
.ftr-contact li{display:flex;align-items:flex-start;gap:10px}
.ftr-contact .ic{margin-top:.28em;color:var(--gold)}
.ftr-soc{margin-top:22px;display:flex;gap:10px}
.ftr-soc a{display:grid;place-items:center;width:46px;height:46px;border-radius:99px;border:1px solid rgb(255 255 255/.16);color:#fff;transition:background-color .6s var(--ease-glide),border-color .6s,transform .6s var(--ease-glide)}
.ftr-soc a:hover{background:var(--gold-2);border-color:var(--gold-2);transform:translateY(-3px)}
.ftr-bot{display:flex;flex-direction:column;gap:6px;margin-top:56px;padding-top:24px;border-top:1px solid rgb(255 255 255/.1);font-size:.84rem;color:rgb(255 255 255/.52)}
@media (min-width:640px){ .ftr-bot{flex-direction:row;justify-content:space-between} }
.ftr-mark{margin-top:20px;overflow:hidden;pointer-events:none;user-select:none}
.ftr-mark span{display:block;font-family:var(--f-display);font-weight:900;font-stretch:125%;font-size:clamp(2.2rem,9.6vw,10.5rem);line-height:.86;letter-spacing:-.035em;text-transform:uppercase;text-align:center;white-space:nowrap;background:linear-gradient(180deg,rgb(216 182 74/.6) 0%,rgb(216 182 74/.04) 88%);-webkit-background-clip:text;background-clip:text;color:transparent;transform:translateY(12%)}

.to-top{position:fixed;right:calc(var(--gut) + 14px);bottom:calc(var(--gut) + 14px);z-index:40;display:grid;place-items:center;width:52px;height:52px;border-radius:99px;background:var(--ink);color:var(--gold-light);box-shadow:0 14px 30px -12px rgb(0 0 0/.55);opacity:0;transform:translate3d(0,16px,0) scale(.9);pointer-events:none;transition:opacity .6s var(--ease-glide),transform .6s var(--ease-glide),background-color .5s,color .5s}
.to-top .ic{width:20px;height:20px;transform:rotate(-45deg)}
.to-top[data-show]{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--gold-2);color:#fff}

/* ------------------------------------------------------------------ */
/* Hero podstranica                                                    */
/* ------------------------------------------------------------------ */
.phero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;margin:var(--gut);border-radius:var(--r-v);background:var(--ink);color:#fff;min-height:clamp(440px,74vh,760px)}
@supports (height:100svh){ .phero{min-height:clamp(440px,74svh,760px)} }
.phero-scrim{background:linear-gradient(0deg,rgb(11 18 32/.94) 0%,rgb(11 18 32/.66) 52%,rgb(11 18 32/.54) 100%)}
@media (min-width:1024px){
  .phero-scrim{background:
    linear-gradient(90deg,rgb(11 18 32/.88) 0%,rgb(11 18 32/.62) 55%,rgb(11 18 32/.32) 100%),
    linear-gradient(0deg,rgb(11 18 32/.78) 0%,transparent 58%)}
}
.phero-in{width:100%;padding-top:calc(var(--nav-h) + 40px);padding-bottom:clamp(44px,6vw,84px)}
.phero h1{margin-top:20px;max-width:15em}
.phero-p{margin-top:18px;max-width:36rem;color:rgb(255 255 255/.86)}

/* ------------------------------------------------------------------ */
/* Vozila — filteri, rezultati, paginacija                             */
/* ------------------------------------------------------------------ */
.filters{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px;border-radius:30px;background:var(--mist)}
@media (min-width:768px){ .filters{grid-template-columns:repeat(4,minmax(0,1fr))} }
.filters .input{border-color:transparent;border-radius:999px;min-height:50px}
.filters .input:hover{border-color:var(--line-2)}
.filters .input:focus{border-color:var(--ink)}
.f-search{grid-column:1/-1;position:relative;display:block}
.f-search>.ic{position:absolute;left:18px;top:50%;width:18px;height:18px;margin-top:-9px;color:var(--muted);pointer-events:none}
.f-search .input{padding-left:46px}
.f-go{grid-column:1/-1;min-height:50px}
@media (min-width:768px){ .f-go{grid-column:auto} }
.results-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:30px 0 24px}
.results-n{font-size:1.1rem;font-weight:600;color:var(--ink)}
.results-reset{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:99px;background:var(--mist);font-size:.86rem;font-weight:620;color:var(--ink);transition:background-color .5s}
.results-reset:hover{background:var(--mist-2)}
.results-links{display:flex;flex-wrap:wrap;gap:8px}
.results-arrive{background:var(--ink);color:#fff}
.results-arrive:hover{background:var(--ink-3)}
.results-arrive .ic{color:var(--gold-light)}
.dot-pulse{width:8px;height:8px;border-radius:99px;background:var(--gold)}
.pager{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:48px}
.pager a,.pager span{display:inline-grid;place-items:center;min-width:46px;height:46px;padding:0 6px;border-radius:99px;background:var(--mist);font-family:var(--f-mono);font-size:.84rem;color:var(--ink);transition:background-color .5s}
.pager a:hover{background:var(--mist-2)}
.pager .cur{background:var(--grad-gold);color:#fff}

/* ------------------------------------------------------------------ */
/* Detalj vozila                                                       */
/* ------------------------------------------------------------------ */
.detail{padding-top:calc(var(--nav-h) + 14px);padding-bottom:clamp(4rem,3rem + 3vw,6rem)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.86rem;color:var(--muted)}
.crumbs a{transition:color .4s}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current]{color:var(--ink);font-weight:550}
.crumbs .ic{width:14px;height:14px}
.detail-grid{display:grid;gap:28px;margin-top:22px}
@media (min-width:1024px){ .detail-grid{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:40px;align-items:start} }
.gal-main{position:relative;aspect-ratio:16/10.5;overflow:hidden;border-radius:28px;background:var(--mist-2)}
.gal-main img{width:100%;height:100%;object-fit:cover;transition:opacity .26s var(--ease-glide)}
.gal-main img.is-swap{opacity:0}
.gal-count{position:absolute;left:16px;bottom:16px;padding:7px 12px;border-radius:99px;background:rgb(11 18 32/.74);color:#fff;font-size:.74rem}
.gal-nav{position:absolute;top:50%;display:grid;place-items:center;width:48px;height:48px;margin-top:-24px;border:0;border-radius:99px;background:#fff;color:var(--ink);box-shadow:var(--shadow-card);cursor:pointer;opacity:0;transition:opacity .5s var(--ease-glide),transform .5s var(--ease-glide)}
.gal-nav .ic{width:20px;height:20px}
.gal-prev{left:14px}
.gal-prev .ic{transform:rotate(180deg)}
.gal-next{right:14px}
.gal-main:hover .gal-nav,.gal-nav:focus-visible{opacity:1}
.gal-nav:hover{transform:scale(1.06)}
@media (hover:none){ .gal-nav{opacity:1} }
.gal-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px}
.gal-thumbs button{position:relative;padding:0;border:0;border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:var(--mist);cursor:pointer;opacity:.62;transition:opacity .5s var(--ease-glide)}
.gal-thumbs button::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px var(--gold-2);opacity:0;transition:opacity .5s}
.gal-thumbs button:hover,.gal-thumbs button.active{opacity:1}
.gal-thumbs button.active::after{opacity:1}
.gal-thumbs img{width:100%;height:100%;object-fit:cover}
.info{padding:26px;border-radius:28px;background:var(--mist)}
@media (min-width:1024px){ .info{position:sticky;top:calc(var(--nav-h) + 12px);padding:30px} }
.info-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.info-title{margin-top:12px;font-size:clamp(1.6rem,1.1rem + 1.4vw,2.3rem)}
.info-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:18px}
.info-price strong{font-size:clamp(1.7rem,1.3rem + 1.2vw,2.3rem);font-weight:600;letter-spacing:-.07em;color:var(--gold-text)}
.info-price s{font-size:.92rem;color:var(--muted)}
.info-eta{display:flex;align-items:center;gap:12px;margin-top:18px;padding:12px 14px;border-radius:18px;background:var(--ink);color:rgb(255 255 255/.8);font-size:.88rem;line-height:1.4}
.info-eta b{display:block;color:#fff;font-weight:650}
.info-eta-ic{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:12px;background:rgb(216 182 74/.16);color:var(--gold-light)}
.spec-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:22px}
.spec-tiles>div{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:center;padding:12px;border-radius:18px;background:#fff}
.st-ic{grid-row:span 2;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--gold-soft);color:var(--gold-text)}
.spec-tiles dt{font-size:.74rem;color:var(--muted)}
.spec-tiles dd{margin:0;font-size:.92rem;font-weight:650;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.info-cta{display:grid;gap:10px;margin-top:22px}
.detail-more{margin-top:56px}
.dblock+.dblock{margin-top:48px}
.dh{font-size:clamp(1.35rem,1.1rem + .8vw,1.75rem)}
.desc{margin-top:16px;max-width:65ch;white-space:pre-line}
.spec-list{display:grid;column-gap:36px;margin-top:18px}
@media (min-width:640px){ .spec-list{grid-template-columns:1fr 1fr} }
.spec-list .r{display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.spec-list dt{color:var(--muted)}
.spec-list dd{margin:0;font-weight:620;color:var(--ink);text-align:right}
.equip{display:grid;gap:14px;margin-top:18px}
@media (min-width:640px){ .equip{grid-template-columns:1fr 1fr} }
.equip-g{padding:22px;border-radius:22px;background:var(--mist)}
.equip h4{font-family:var(--f-sans);font-size:.74rem;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text)}
.equip ul{display:grid;gap:8px;margin-top:12px}
.equip li{display:flex;align-items:center;gap:10px;font-size:.94rem;color:var(--ink)}
.equip li .ic{width:16px;height:16px;color:var(--success)}
.lead-card{padding:26px;border-radius:28px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-card)}
@media (min-width:1024px){ .lead-card{position:sticky;top:calc(var(--nav-h) + 12px);padding:30px} }
.lead-card .muted{margin:6px 0 18px}
.similar{margin-top:clamp(4rem,3rem + 3vw,6rem)}
.similar .grid-cars{margin-top:32px}

/* ------------------------------------------------------------------ */
/* O nama                                                              */
/* ------------------------------------------------------------------ */
.prose p{margin-top:16px}
.prose .t-h2{margin-top:16px}
.stat-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:clamp(3rem,2rem + 3vw,5rem)}
@media (max-width:420px){ .stat-box{padding:22px 16px !important} .stat-box .n{font-size:1.85rem !important} }
@media (min-width:900px){ .stat-row{grid-template-columns:repeat(4,1fr);gap:16px} }
.stat-box{padding:28px 24px;border-radius:26px;background:var(--mist);transition:transform .9s var(--ease-glide),background-color .9s var(--ease-glide)}
.stat-box:hover{transform:translateY(-6px);background:var(--ink)}
.stat-box .n{font-family:var(--f-display);font-weight:850;font-stretch:116%;font-size:clamp(2.1rem,1.5rem + 2vw,3.3rem);line-height:1;letter-spacing:-.03em;color:var(--ink);transition:color .9s var(--ease-glide)}
.stat-box .l{margin-top:10px;font-size:.88rem;color:var(--muted);transition:color .9s var(--ease-glide)}
.stat-box:hover .n{color:var(--gold-light)}
.stat-box:hover .l{color:rgb(255 255 255/.72)}

/* ------------------------------------------------------------------ */
/* SEO: linija u H1, sekcija o auto salonu, prazna stanja              */
/* ------------------------------------------------------------------ */
.hero-kick{display:block;margin-bottom:18px;font-family:var(--f-sans);font-size:.78rem;font-weight:650;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;font-stretch:100%;color:var(--gold-light)}
.seo-grid{display:grid;gap:28px}
@media (min-width:1024px){ .seo-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:80px;align-items:start} }
.seo-copy p{max-width:62ch}
.seo-copy p+p{margin-top:16px}
.seo-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.seo-brands-l{margin-top:32px;font-size:.74rem;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.seo-brands{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.seo-brands a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:99px;background:var(--mist);color:var(--ink);font-size:.88rem;font-weight:560;transition:background-color .6s var(--ease-glide)}
.seo-brands a:hover{background:var(--mist-2)}
.seo-brands .mono{font-size:.72rem;color:var(--muted)}
.grid-cars>.empty{grid-column:1/-1}
.on-dark .empty{background:rgb(255 255 255/.06);color:rgb(255 255 255/.75)}
.on-dark .empty a{color:var(--gold-light)}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ==================================================================
   MOTION
   ================================================================== */

/* Ulazak pri skrolanju (JS dodaje .is-in). Skriveno samo pod html.js. */
html.js [data-anim]{--d:0ms}
html.js [data-anim="rise"]{transition:opacity .9s var(--ease-quart) var(--d),transform 1.1s var(--ease-expo) var(--d)}
html.js [data-anim="rise"]:not(.is-in){opacity:0;transform:translate3d(0,30px,0)}
html.js [data-anim="words"] .wi{transition:transform 1.05s var(--ease-expo) calc(var(--d) + var(--wd,0ms))}
html.js [data-anim="words"]:not(.is-in) .wi{transform:translate3d(0,calc(100% + .3em),0)}
html.js [data-anim="wipe"]>*{transition:clip-path 1.5s var(--ease-expo) var(--d)}
html.js [data-anim="wipe"]:not(.is-in)>*{clip-path:inset(0 0 0 100%)}
html.js [data-anim="wipe"] img{transition:transform 2s var(--ease-quart) var(--d)}
html.js [data-anim="wipe"]:not(.is-in) img{transform:scale(1.18)}

@media (prefers-reduced-motion:no-preference){
  /* Prvi ekran — samo CSS, od prvog frejma (ne čeka JS). */
  .photo-fill{animation:lc-fill 1.4s var(--ease-expo) both}
  .intro-words .wi{animation:lc-word 1.05s var(--ease-expo) calc(120ms + var(--wd,0ms)) both}
  [data-intro]{animation:lc-rise .95s var(--ease-quart) var(--d,0ms) both}
  .special{animation:lc-spin 7s linear infinite}
  .brand-track{animation:lc-tick 26s linear infinite}
  .ticker{animation:lc-tick 44s linear infinite}
  .ticker-band:hover .ticker{animation-play-state:paused}
  .hero-cue span{animation:lc-cue 2.2s var(--ease-glide) infinite}
  .split-dot{animation:lc-pulse 2.4s var(--ease-glide) infinite}
  .badge-arrive::before,.dot-pulse{animation:lc-gold 2.2s var(--ease-glide) infinite}
}
@keyframes lc-fill{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes lc-word{from{transform:translate3d(0,calc(100% + .3em),0)}}
@keyframes lc-rise{from{opacity:0;transform:translate3d(0,22px,0)}}
@keyframes lc-spin{to{--spin:360deg}}
@keyframes lc-tick{to{transform:translate3d(-50%,0,0)}}
@keyframes lc-cue{0%{transform:translateY(0);opacity:0}25%{opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}}
@keyframes lc-gold{0%{box-shadow:0 0 0 0 rgb(191 151 42/.55)}70%{box-shadow:0 0 0 7px rgb(191 151 42/0)}100%{box-shadow:0 0 0 0 rgb(191 151 42/0)}}
@keyframes lc-pulse{0%,100%{box-shadow:0 0 0 4px rgb(21 128 61/.16)}50%{box-shadow:0 0 0 8px rgb(21 128 61/.05)}}

/* Scroll-driven sloj: browser ga vrti na compositoru, bez scroll listenera.
   Osnovni stil = završno stanje, početak je u keyframe-u. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    [data-scroll="progress"]{display:block !important;animation:lc-prog linear both;animation-timeline:scroll(root block)}
    [data-scroll="push"] img{animation:lc-push linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    [data-scroll="hero-media"]{animation:lc-hm linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    [data-scroll="hero-exit"]{animation:lc-hx linear both;animation-timeline:view();animation-range:exit 0% exit 75%}
    [data-scroll="draw-x"]{animation:lc-dx linear both;animation-timeline:view();animation-range:entry 30% cover 55%}
  }
}
@keyframes lc-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes lc-push{from{transform:scale(1.18)}to{transform:scale(1.02)}}
@keyframes lc-hm{to{transform:scale(1.1)}}
@keyframes lc-hx{to{opacity:0;transform:translate3d(0,-10%,0)}}
@keyframes lc-dx{from{transform:scaleX(0)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  html.js [data-anim],html.js [data-anim] .wi,html.js [data-anim="wipe"]>*,html.js [data-anim="wipe"] img{opacity:1 !important;transform:none !important;clip-path:none !important}
  .brand-track{flex-wrap:wrap;row-gap:14px;width:auto}
  .brand-track img[aria-hidden]{display:none}
}

@media print{
  .nav,.drawer,.to-top,.ticker-band,.map{display:none !important}
  .vessel,.hero,.phero{margin:0;border-radius:0}
}