/* ===================== INVICTUS AUTO — styles.css =====================
   Premium luxury automotive theme · deep black + gold
   ====================================================================== */

:root{
  --black:#000000; --bg:#000000;
  --surface-1:#15171f; --surface-2:#1b1e27; --surface-3:#22252f;
  --gold:#C8A36A; --gold-soft:#D9B978; --gold-bright:#E7D0A0; --gold-deep:#A8854D;
  /* heraldic azure — cool secondary accent that lifts the all-gold palette */
  --azure:#3E6FB0; --azure-bright:#79A8E2; --azure-deep:#21406E;
  --white:#FFFFFF; --mute:#D5D5D5;
  --line:rgba(200,163,106,0.25); --line-soft:rgba(255,255,255,0.08); --line-hair:rgba(255,255,255,0.06);
  --line-azure:rgba(74,124,196,0.28);
}
*{ -webkit-tap-highlight-color: transparent; }
html{ scroll-behavior:smooth; background:#14171f; }
body{
  font-family:Inter, system-ui, sans-serif; background:#15181f; color:#fff;
  background-image:
    radial-gradient(1100px 560px at 84% -10%, rgba(200,163,106,0.12), transparent 60%),
    radial-gradient(980px 720px at 0% 8%, rgba(74,124,196,0.16), transparent 60%),
    radial-gradient(1040px 780px at 68% 120%, rgba(74,124,196,0.12), transparent 62%),
    linear-gradient(180deg, #1c1f2a 0%, #15181f 50%, #191c27 100%);
  background-attachment:fixed;
}
/* lift the big near-black surfaces so the page reads less heavy */
.bg-ink{ background-color:#15181f !important; }
.bg-ink-900{ background-color:#1a1d28 !important; }
.font-display{ font-family:"Playfair Display", Georgia, serif; }
::selection{ background:rgba(200,163,106,0.3); color:#fff; }
body::-webkit-scrollbar{ width:11px; }
body::-webkit-scrollbar-track{ background:#000; }
body::-webkit-scrollbar-thumb{ background:#2a2a2e; border-radius:10px; border:3px solid #000; }
body::-webkit-scrollbar-thumb:hover{ background:var(--gold-deep); }

/* ---------- Scroll progress bar ---------- */
#progress{ position:fixed; top:0; left:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--azure),var(--azure-bright),var(--gold-bright),var(--gold));
  box-shadow:0 0 12px rgba(200,163,106,.55); z-index:60; transition:width .12s linear; }

.hairline{ height:1px; width:100%; background:linear-gradient(90deg,transparent,var(--line),transparent); }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal-left{ opacity:0; transform:translateX(-46px); transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
.reveal-left.in{ opacity:1; transform:none; }
.reveal-right{ opacity:0; transform:translateX(46px); transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
.reveal-right.in{ opacity:1; transform:none; }

/* ---------- Glass / luxury cards ---------- */
.lux-card{ position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
  border:1px solid var(--line); border-radius:22px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 24px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .45s cubic-bezier(.22,1,.36,1), border-color .45s ease, box-shadow .45s ease; }
.lux-card:hover{ transform:translateY(-6px); border-color:rgba(200,163,106,0.55);
  box-shadow:0 34px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(200,163,106,.12), -18px 18px 60px rgba(62,111,176,.16), inset 0 1px 0 rgba(255,255,255,.06); }
.lux-card.gilded::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(140deg, rgba(200,163,106,.6), transparent 38%, transparent 60%, rgba(74,124,196,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.panel{ background:linear-gradient(180deg,#0b0b0e,#060607); border:1px solid var(--line-hair); border-radius:26px; }

/* ---------- Form fields ---------- */
.fld{ width:100%; background:rgba(255,255,255,0.045); border:1px solid rgba(255,255,255,0.12); color:#fff;
  border-radius:12px; padding:.72rem .9rem; font-size:.875rem; line-height:1.2;
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease; }
.fld::placeholder{ color:rgba(255,255,255,.42); }
.fld:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(200,163,106,.16); background:rgba(255,255,255,0.07); }
select.fld{ -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23C8A36A' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right .8rem center; padding-right:2.2rem; }
select.fld option{ background:#101013; color:#fff; }
.fld-label{ font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.5); }
input[type=range]{ -webkit-appearance:none; appearance:none; height:4px; border-radius:999px; background:rgba(255,255,255,.14); outline:none; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; height:20px; width:20px; border-radius:50%;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold)); border:2px solid #1a1a1a; cursor:pointer;
  box-shadow:0 0 0 4px rgba(200,163,106,.18), 0 2px 8px rgba(0,0,0,.5); }
input[type=range]::-moz-range-thumb{ height:18px; width:18px; border-radius:50%; background:var(--gold); border:2px solid #1a1a1a; cursor:pointer; }
input[type=checkbox]{ accent-color:var(--gold); }

/* ---------- Buttons ---------- */
.btn-gold{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold)); color:#0a0a0a; font-weight:600; border-radius:12px;
  box-shadow:0 8px 26px rgba(200,163,106,.28), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .3s ease, box-shadow .3s ease, filter .3s ease; }
.btn-gold:hover{ transform:translateY(-2px); filter:brightness(1.04);
  box-shadow:0 0 0 1px rgba(231,208,160,.7), 0 14px 38px rgba(200,163,106,.5), inset 0 1px 0 rgba(255,255,255,.5); }
.btn-gold:active{ transform:translateY(0); }
.btn-outline{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border:1px solid var(--line); color:#fff; background:rgba(255,255,255,0.02); border-radius:12px; font-weight:600;
  transition:border-color .3s ease, color .3s ease, background .3s ease, transform .3s ease, box-shadow .3s ease; }
.btn-outline:hover{ border-color:var(--gold); color:var(--gold-bright); background:rgba(200,163,106,.06);
  transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,.5); }
.btn-sheen{ position:relative; overflow:hidden; }
.btn-sheen::after{ content:""; position:absolute; top:0; left:-130%; width:62%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent); transform:skewX(-20deg); transition:left .7s ease; }
.btn-sheen:hover::after{ left:150%; }
.phone-cta{ display:inline-flex; align-items:center; gap:.6rem; border:1px solid var(--line); border-radius:999px;
  padding:.6rem 1.15rem; color:#fff; font-weight:600; letter-spacing:.01em; background:rgba(255,255,255,0.02);
  transition:border-color .3s ease, color .3s ease, box-shadow .3s ease, background .3s ease; }
.phone-cta:hover{ border-color:var(--gold); color:var(--gold-bright); background:rgba(200,163,106,.07); box-shadow:0 0 24px rgba(200,163,106,.2); }
.phone-cta svg{ color:var(--gold); }

/* ---------- Header ---------- */
#navbar{ transition:background .4s ease, border-color .4s ease, box-shadow .4s ease, backdrop-filter .4s ease; }
#navbar.scrolled{ background:rgba(6,6,7,0.72); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line); box-shadow:0 14px 40px rgba(0,0,0,.5); }
.navlink{ position:relative; color:rgba(255,255,255,.82); transition:color .3s ease; }
.navlink:hover{ color:#fff; }
.navlink::after{ content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0;
  background:linear-gradient(90deg,var(--gold),var(--gold-bright)); transition:width .35s cubic-bezier(.22,1,.36,1); }
.navlink:hover::after{ width:100%; }
.lang-wrap{ border:1px solid var(--line-soft); border-radius:10px; overflow:hidden; }

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; background:#15181f; }
.hero-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:72% 50%; opacity:.55; }
.hero-veil-1{ position:absolute; inset:0; background:linear-gradient(90deg,#000 6%, rgba(0,0,0,.86) 34%, rgba(0,0,0,.35) 66%, rgba(0,0,0,.7) 100%); }
.hero-veil-2{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.85) 0%, transparent 30%, transparent 60%, #000 100%); }
.hero-spot{ position:absolute; right:2%; top:30%; width:680px; height:680px; max-width:90vw; border-radius:50%;
  background:radial-gradient(circle, rgba(200,163,106,.20), rgba(200,163,106,.05) 45%, transparent 68%); filter:blur(8px); pointer-events:none; }
.hero-knight{ position:absolute; right:-3%; top:50%; transform:translateY(-50%); width:min(40vw,440px); opacity:.06; pointer-events:none;
  filter:drop-shadow(0 24px 50px rgba(0,0,0,.6)); }
.hero-up{ opacity:0; transform:translateY(28px); }
.loaded .hero-up{ opacity:1; transform:none; transition:opacity 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1); }
.loaded .hero-up.d1{ transition-delay:.15s; }
.loaded .hero-up.d2{ transition-delay:.32s; }
.loaded .hero-up.d3{ transition-delay:.49s; }
.loaded .hero-up.d4{ transition-delay:.66s; }
.loaded .hero-up.d5{ transition-delay:.83s; }
.hero-glow{ position:absolute; width:520px; height:520px; border-radius:9999px;
  background:radial-gradient(circle, rgba(200,163,106,.16), transparent 65%); filter:blur(24px); pointer-events:none; }
.shimmer{ background:linear-gradient(100deg,var(--gold) 28%, #F6E8C0 50%, var(--gold) 72%);
  background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shimmer 7s linear infinite; }
@keyframes shimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }
.text-gold-grad{ background:linear-gradient(120deg,var(--gold-bright),var(--gold),var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- Feature strip / icons ---------- */
.feat-ico{ display:inline-flex; align-items:center; justify-content:center; height:52px; width:52px; border-radius:14px; color:var(--gold);
  background:radial-gradient(120% 120% at 28% 18%, rgba(200,163,106,.18), rgba(74,124,196,.08) 62%, rgba(255,255,255,.02)); border:1px solid var(--line);
  box-shadow:inset 0 0 18px rgba(74,124,196,.06); }
.trust-divider{ background:linear-gradient(180deg,transparent,var(--line),transparent); width:1px; }

/* ---------- Stat band ---------- */
.stat-num{ font-family:"Playfair Display",serif; font-weight:700; line-height:1.18; padding-bottom:.12em;
  background:linear-gradient(120deg,var(--gold-bright),var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- Inventory card image ---------- */
.car-img{ background:linear-gradient(135deg,#16161b,#08080a); }
.hide-scroll::-webkit-scrollbar{ display:none; }
.badge-year{ background:rgba(0,0,0,.6); border:1px solid var(--line-soft); color:#fff; backdrop-filter:blur(4px); }
.badge-body{ background:linear-gradient(180deg,var(--gold-soft),var(--gold)); color:#0a0a0a; }

/* ---------- Knight brand band ---------- */
.knight-band{ position:relative; overflow:hidden; background:radial-gradient(900px 500px at 50% 0%, rgba(200,163,106,.08), transparent 60%), radial-gradient(720px 520px at 10% 82%, rgba(74,124,196,.14), transparent 62%), #181b26; }
#knight{ position:absolute; right:-4%; top:50%; width:min(46vw,460px); margin-top:-23vw; opacity:.13;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.6)); will-change:transform; transform:translateZ(0); pointer-events:none; }
@media (min-width:1024px){ #knight{ margin-top:-230px; } }
.knight-float{ animation:floaty 7s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{ translate:0 0; } 50%{ translate:0 -14px; } }
.crest-ring{ transform-origin:center; animation:spin 26s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Map frame ---------- */
.map-frame{ border:1px solid var(--line); border-radius:18px; overflow:hidden; filter:grayscale(.2) contrast(1.03); transition:filter .4s ease; }
.map-frame:hover{ filter:none; }

/* ---------- Anti-spam honeypot (skriveno polje, ne prikazuje se korisniku) ---------- */
.hp-field{ position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; opacity:0; overflow:hidden; pointer-events:none; }

/* ---------- Chat ---------- */
.chat-launch{ box-shadow:0 10px 30px rgba(200,163,106,.35); }
.lux-sep{ height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); }

/* ---------- Services section ---------- */
.svc-title{ font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--gold); font-size:1rem; line-height:1.35; }
.svc-lead{ color:var(--mute); font-size:.9rem; }
.check-item{ display:flex; align-items:center; gap:.65rem; color:var(--mute); font-size:.92rem; padding:.18rem 0; }
.check-item .tick{ display:inline-flex; align-items:center; justify-content:center; height:21px; width:21px; border-radius:50%;
  border:1px solid var(--line); color:var(--gold); flex:0 0 auto; background:rgba(200,163,106,.07); }
.partner-row{ display:flex; flex-wrap:wrap; gap:1rem 1.6rem; align-items:center; }
.partner-fallback{ display:inline-flex; align-items:center; gap:.6rem; color:#fff; }
.partner-fallback .pf-name{ line-height:1.05; font-size:.95rem; letter-spacing:.01em; }
.partner-fallback .pf-name b{ font-weight:700; }
.partner-emblem{ color:var(--gold); flex:0 0 auto; }
.partner-img{ height:30px; width:auto; max-width:100%; display:block; opacity:.9; transition:opacity .3s ease; }
.lux-card:hover .partner-img{ opacity:1; }
.partner-img.badge{ height:58px; }

/* ---------- Trust row ---------- */
.trust-row{ display:grid; grid-template-columns:repeat(4,1fr); }
.trust-item{ padding:.25rem 1.6rem; }
.trust-item + .trust-item{ border-left:1px solid var(--line); }
.trust-title{ font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#fff; font-size:.92rem; }
@media (max-width:900px){
  .trust-row{ grid-template-columns:repeat(2,1fr); gap:2.2rem 0; }
  .trust-item{ border-left:none !important; }
  .trust-item:nth-child(2){ border-left:1px solid var(--line) !important; }
  .trust-item:nth-child(4){ border-left:1px solid var(--line) !important; }
}
@media (max-width:560px){
  .trust-row{ grid-template-columns:1fr; gap:1.6rem; }
  .trust-item{ border-left:none !important; text-align:center; }
}

/* ---------- Croatia dotted map ---------- */
.cro-map{ width:100%; height:auto; display:block; }
.cro-pin{ animation:pinPulse 3.2s ease-in-out infinite; transform-origin:center bottom; }
@keyframes pinPulse{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }

/* ---------- Footer tagline band ---------- */
.tag-band{ display:flex; align-items:center; gap:1.25rem; justify-content:center; }
.tag-rule{ height:1px; flex:1; max-width:170px; background:linear-gradient(90deg,transparent,var(--line)); }
.tag-rule.r{ background:linear-gradient(90deg,var(--line),transparent); }
.footer-tagline{ font-family:"Playfair Display",serif; letter-spacing:.12em; text-transform:uppercase; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hero-photo, .knight-float, .crest-ring, .shimmer, .animate-bounce, .cro-pin{ animation:none !important; }
  .lux-card:hover{ transform:none; }
  #knight{ opacity:.12; }
}

/* ---------- Small screens ---------- */
@media (max-width:640px){
  .hero-photo{ object-position:62% 50%; opacity:.4; }
  .hero-knight{ width:78vw; opacity:.05; right:-12%; }
  .lux-card{ border-radius:18px; }
  .footer-tagline{ letter-spacing:.06em; font-size:1.05rem; }
  .tag-rule{ max-width:40px; }
}

/* ================= COLOUR ENRICHMENT — azure accent layer =================
   Keeps the dark + gold identity, but adds a cool heraldic azure as a second
   light so the page reads with warm/cool depth instead of one flat black. */

/* cool glow bottom-left of hero to balance the warm gold spot on the right */
.hero::after{ content:""; position:absolute; left:-6%; bottom:-14%; width:640px; height:640px; max-width:94vw;
  border-radius:50%; z-index:0; pointer-events:none; filter:blur(10px);
  background:radial-gradient(circle, rgba(74,124,196,.26), rgba(74,124,196,.08) 46%, transparent 70%); }

/* per-section ambient washes — alternating warm / cool so sections feel distinct */
#usluge{ background-image:radial-gradient(900px 540px at 8% -6%, rgba(74,124,196,.10), transparent 60%); }
#vozila{ background-image:radial-gradient(820px 520px at 96% 4%, rgba(200,163,106,.07), transparent 60%); }
#brojke{ background-image:radial-gradient(1000px 420px at 50% 130%, rgba(74,124,196,.10), transparent 64%); }
#financiranje{ background-image:linear-gradient(180deg, rgba(74,124,196,.12), transparent 42%, rgba(74,124,196,.07)); }
#o-nama{ background-image:radial-gradient(820px 480px at 90% 110%, rgba(200,163,106,.06), transparent 62%); }
#kontakt{ background-image:
  radial-gradient(760px 440px at 92% 6%, rgba(200,163,106,.06), transparent 62%),
  radial-gradient(720px 480px at 4% 94%, rgba(74,124,196,.10), transparent 62%); }

/* azure utilities / accents */
.text-azure{ color:var(--azure-bright); }
.stat-num.alt{ background:linear-gradient(120deg,var(--azure-bright),var(--azure));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
/* give every 2nd inventory-style tick a cool ring for subtle rhythm inside cards */
#jamstvo .check-item .tick{ border-color:var(--line-azure); color:var(--azure-bright); background:rgba(74,124,196,.08); }