/* Nova Premium — visual language taken from the existing site (dark + gold #f4d17a,
   loader ring, scroll bar, orbs, shine, pill buttons, 24px radii, glow borders).
   Substance underneath is new: real vectors, real areas, WebGL. */

:root{
  --gold:#f4d17a; --gold-dim:rgba(244,209,122,.25); --gold-soft:rgba(244,209,122,.11);
  --bg:#060606; --ink:#fff; --muted:#ddd; --muted-2:#aaa;
  --ease:cubic-bezier(.2,.8,.2,1);
  /* Inner padding of the floating cards. The photos bleed to the card edge by
     pulling themselves out with a negative margin of exactly this size, so the
     two must stay tied together — hence a variable rather than a literal 30px. */
  --card-pad:clamp(17px,4.6vw,30px);
  /* iPhone notch, home indicator, Android gesture bar. 0px everywhere else. */
  --safe-t:env(safe-area-inset-top,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{font-family:"Inter",Arial,sans-serif; background:var(--bg); color:var(--ink); overflow-x:hidden}
::selection{background:var(--gold); color:#111}
img{display:block; max-width:100%}
code{font-family:ui-monospace,Menlo,monospace; font-size:.9em; color:var(--gold)}

#scrollProgress{position:fixed; top:0; left:0; height:5px; width:0; z-index:10000;
  background:linear-gradient(90deg,#7a5515,var(--gold),#fff2b8); box-shadow:0 0 18px rgba(244,209,122,.8)}

#loader{position:fixed; inset:0; z-index:9999; background:radial-gradient(circle,#1c1c1c,#050505 66%);
  display:flex; align-items:center; justify-content:center; transition:opacity .8s ease, visibility .8s ease}
#loader.hide{opacity:0; visibility:hidden}
.loader-logo{text-align:center; color:var(--gold); letter-spacing:4px; animation:loaderZoom 1.5s infinite ease-in-out}
.loader-logo strong{display:block; font-size:34px; margin-bottom:8px; text-shadow:0 0 24px rgba(244,209,122,.6)}
.loader-logo span{font-size:11px; letter-spacing:3px; color:#9a8b62}
.loader-ring{width:92px; height:92px; border-radius:50%; margin:0 auto 24px; border:2px solid rgba(244,209,122,.15);
  border-top-color:var(--gold); animation:spin 1s linear infinite; box-shadow:0 0 35px rgba(244,209,122,.22)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes loaderZoom{0%,100%{opacity:.65; transform:scale(.98)}50%{opacity:1; transform:scale(1.04)}}

.cursor{position:fixed; left:0; top:0; z-index:95; pointer-events:none; opacity:0; transition:opacity .4s}
.cursor.on{opacity:1}
.cur-dot,.cur-ring{position:absolute; border-radius:50%; transform:translate(-50%,-50%)}
.cur-dot{width:5px; height:5px; background:var(--gold)}
.cur-ring{width:36px; height:36px; border:1px solid rgba(244,209,122,.55);
  transition:width .45s var(--ease), height .45s var(--ease), background .45s var(--ease)}
body.hot .cur-ring{width:70px; height:70px; background:rgba(244,209,122,.10)}
@media (hover:none){.cursor{display:none}}

/* ── ŽIVA POZADINA — one camera, four seasons, fixed behind the whole page ── */
.bg{position:fixed; inset:0; z-index:-2; background:#060606}
.bg #gl{position:absolute; inset:0; width:100%; height:100%; display:none}
.bg #gl.live{display:block}
.bg-imgs{position:absolute; inset:0}
.bg-imgs img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0;
  transition:opacity 1.2s var(--ease)}
.bg-imgs img.on{opacity:1}
.bg #gl.live ~ .bg-imgs{display:none}
/* the drive-through frame sequence renders here; .vidmode fades it over the stills */
.bg .bgseq{position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .45s linear}
.bg.vidmode .bgseq{opacity:1}
.bg-veil{position:absolute; inset:0; background:rgba(6,6,6,.55); transition:background .6s linear}
.bg.vidmode ~ * .bg-veil{}
.bg.vidmode .bg-veil{background:rgba(6,6,6,.22)}

.hud{position:fixed; right:26px; top:50%; transform:translateY(-50%); z-index:40;
  display:flex; flex-direction:column; align-items:center; gap:14px; pointer-events:none}
.hud-label{writing-mode:vertical-rl; font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); text-shadow:0 2px 12px rgba(0,0,0,.8)}
.hud-dots{list-style:none; display:grid; gap:10px}
.hud-dots li{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.3); transition:.5s var(--ease)}
.hud-dots li.on{background:var(--gold); transform:scale(1.7); box-shadow:0 0 12px rgba(244,209,122,.8)}
@media (max-width:900px){.hud{display:none}}

/* ── HERO ─────────────────────────────────────── */
/* svh = the viewport WITHOUT the mobile URL bar. Plain vh is the tall variant on
   iOS and Android, so a 100vh hero has its bottom edge hidden behind the browser
   chrome until the user scrolls. vh stays as the fallback for older engines. */
.hero{min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:space-between;
  padding:calc(28px + var(--safe-t)) 7% 28px; position:relative; overflow:hidden}
.hero-shade{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 20% 20%,rgba(244,209,122,.22),transparent 24%),
             linear-gradient(to bottom,rgba(0,0,0,.28),rgba(0,0,0,.92))}
.hero::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.1) 42%,transparent 56%);
  transform:translateX(-120%); animation:shine 6s ease-in-out infinite}
@keyframes shine{0%,55%{transform:translateX(-120%)}80%,100%{transform:translateX(120%)}}
.gold-orb{position:absolute; z-index:1; border-radius:50%; background:rgba(244,209,122,.13); filter:blur(2px);
  animation:float 7s ease-in-out infinite; pointer-events:none}
.orb1{width:130px; height:130px; right:8%; top:23%}
.orb2{width:75px; height:75px; left:9%; bottom:16%; animation-delay:1.8s}
.orb3{width:45px; height:45px; right:28%; bottom:24%; animation-delay:3s}
@keyframes float{0%,100%{transform:translateY(0) scale(1); opacity:.35}50%{transform:translateY(-28px) scale(1.08); opacity:.78}}

header{position:sticky; top:14px; z-index:50; display:flex; align-items:center; justify-content:space-between;
  gap:20px; background:rgba(7,7,7,.62); backdrop-filter:blur(15px); border:1px solid rgba(244,209,122,.23);
  border-radius:24px; padding:12px 18px; box-shadow:0 20px 60px rgba(0,0,0,.35); animation:dropDown .8s ease both}
@keyframes dropDown{from{opacity:0; transform:translateY(-25px)}to{opacity:1; transform:none}}
.logo-box{display:flex; align-items:center; gap:14px}
.mark{width:56px; height:56px; border-radius:14px; display:grid; place-items:center; font-weight:700; letter-spacing:1px;
  color:#111; background:linear-gradient(145deg,var(--gold),#c9a94f); box-shadow:0 0 26px rgba(244,209,122,.28); transition:.35s}
.logo-box:hover .mark{transform:rotate(-3deg) scale(1.04)}
.brand h2{color:var(--gold); letter-spacing:2px; font-size:20px}
.brand p{color:#ddd; font-size:11px; letter-spacing:3px}
nav a{color:#fff; text-decoration:none; margin-left:22px; font-size:15px; opacity:.9; position:relative; transition:.25s}
nav a::after{content:""; position:absolute; left:0; bottom:-7px; width:0; height:2px; background:var(--gold); transition:.25s}
nav a:hover{color:var(--gold)} nav a:hover::after{width:100%}

.hero-content{position:relative; z-index:2; max-width:820px; padding-bottom:80px}
.tag{color:var(--gold); letter-spacing:4px; font-size:13px; margin-bottom:18px; text-transform:uppercase;
  animation:fadeUp .65s ease .2s both}
h1{font-size:clamp(40px,7vw,84px); line-height:1.02; margin-bottom:22px; font-weight:300;
  animation:fadeUp .75s ease .38s both; text-shadow:0 18px 60px rgba(0,0,0,.45)}
.hero-lede{font-size:18px; line-height:1.7; color:#eee; max-width:640px; margin-bottom:34px;
  animation:fadeUp .75s ease .58s both; font-weight:300}
.buttons{display:flex; gap:14px; flex-wrap:wrap; animation:fadeUp .75s ease .78s both}
@keyframes fadeUp{from{opacity:0; transform:translateY(34px)}to{opacity:1; transform:none}}

.btn{padding:15px 26px; border-radius:999px; text-decoration:none; font-weight:600; font-size:15px;
  display:inline-block; border:none; cursor:pointer; transition:.28s ease; position:relative; overflow:hidden}
.btn::before{content:""; position:absolute; inset:0; transform:translateX(-120%); transition:.55s;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.38),transparent)}
.btn:hover::before{transform:translateX(120%)}
.btn.gold{background:var(--gold); color:#111; box-shadow:0 0 28px rgba(244,209,122,.18)}
.btn.dark{border:1px solid var(--gold); color:var(--gold); background:rgba(0,0,0,.15)}
.btn.sm{padding:11px 20px; font-size:13px}
.btn:hover{transform:translateY(-4px) scale(1.02); box-shadow:0 14px 34px rgba(244,209,122,.25)}

.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px; max-width:720px;
  animation:fadeUp .75s ease .95s both}
.stat{background:rgba(0,0,0,.48); border:1px solid var(--gold-dim); border-radius:20px; padding:18px;
  backdrop-filter:blur(8px); transition:.28s}
.stat:hover{transform:translateY(-7px); background:var(--gold-soft)}
.stat strong{display:block; color:var(--gold); font-size:30px; margin-bottom:5px; font-variant-numeric:tabular-nums}
.stat span{color:#ddd; font-size:13px}

.quick-card{position:absolute; right:7%; bottom:70px; z-index:2; width:300px; padding:24px; border-radius:28px;
  background:rgba(10,10,10,.68); border:1px solid rgba(244,209,122,.28); backdrop-filter:blur(16px);
  box-shadow:0 24px 80px rgba(0,0,0,.45); animation:fadeUp .8s ease 1.15s both}
.quick-card small{color:var(--gold); letter-spacing:2px; font-size:11px}
.quick-card h3{margin:10px 0; font-size:22px; font-weight:600}
.quick-card p{color:#ddd; line-height:1.6; font-size:14px}

/* ── sections ─────────────────────────────────── */
section{padding:88px 7%; position:relative}
.section-title{font-size:clamp(30px,4.4vw,42px); margin-bottom:18px; color:var(--gold); font-weight:400}
.section-title::after{content:""; display:block; width:80px; height:3px; background:var(--gold); margin-top:14px;
  box-shadow:0 0 18px rgba(244,209,122,.65)}
.lead{color:var(--muted); font-size:17px; line-height:1.8; max-width:70ch; margin-top:18px; font-weight:300}
.reveal{opacity:0; transform:translateY(60px) scale(.98); transition:1s var(--ease)}
.reveal.active{opacity:1; transform:none}

/* ── šetnja: scroll-scrubbed walk-in ──────────── */
.walk{height:1150vh; padding:0; position:relative}
.walk-stage{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; background:transparent; pointer-events:none}
.walk-stage noscript img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.walk-veil{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.22),transparent 30%,transparent 55%,rgba(0,0,0,.62))}
.stops{position:absolute; inset:0}
.stop{position:absolute; top:50%; opacity:0;
  --stop-base:-50%; --stop-shift:34px;
  transform:translateY(var(--stop-base)) translateY(var(--stop-shift));
  width:min(430px, 86vw); padding:var(--card-pad); border-radius:28px; pointer-events:none;
  background:rgba(10,10,10,.66); border:1px solid rgba(244,209,122,.30); backdrop-filter:blur(16px);
  box-shadow:0 24px 80px rgba(0,0,0,.5); will-change:opacity,transform}
.stop.left{left:7%} .stop.right{right:7%}
.stop.live{pointer-events:auto}
.stop small{color:var(--gold); letter-spacing:2px; font-size:11px; text-transform:uppercase}
.stop h3{margin:10px 0 8px; font-size:26px; font-weight:600; color:#fff}
.stop p{color:#ddd; line-height:1.65; font-size:15px}
.stop .chips{display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 0}
.stop .chips span{background:var(--gold-soft); border:1px solid var(--gold-dim); border-radius:999px;
  padding:6px 13px; font-size:12.5px; color:#eee}
.stop .btn{margin-top:18px}
.stop-btns{display:flex; gap:10px; flex-wrap:wrap}
.stop-btns .btn{margin-top:18px}
@media (max-width:700px){.stop{top:auto; bottom:9vh; --stop-base:0%}
  .stop.left,.stop.right{left:50%; right:auto; margin-left:calc(min(430px,86vw)/-2)}}

.walk-bar{position:absolute; left:7%; right:7%; bottom:6vh; height:2px; background:rgba(255,255,255,.16); z-index:2}
.walk-bar span{display:block; height:100%; width:0; background:var(--gold); box-shadow:0 0 14px rgba(244,209,122,.8)}

/* ── arhitektonski prikaz ─────────────────────── */
.arch{background:rgba(10,10,10,.90)}
.arch-tools{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin:34px 0 26px}
.pills{display:inline-flex; gap:8px; flex-wrap:wrap}
.pills button{background:rgba(0,0,0,.4); border:1px solid var(--gold-dim); color:#ddd; cursor:pointer;
  font:inherit; font-size:14px; padding:11px 20px; border-radius:999px; transition:.28s}
.pills button:hover{border-color:rgba(244,209,122,.6); color:#fff}
.pills button.on{background:var(--gold); color:#111; border-color:var(--gold); font-weight:600;
  box-shadow:0 0 22px rgba(244,209,122,.25)}
.total{margin-left:auto; color:var(--muted-2); font-size:14px}
.total b{color:var(--gold); font-size:22px}

.arch-grid{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:26px; align-items:start; margin-top:12px}
.scene{position:relative; border-radius:26px; overflow:hidden; padding:clamp(14px,2.4vw,34px);
  background:linear-gradient(145deg,#f7f5ef,#e9e5da); border:1px solid var(--gold-dim);
  box-shadow:0 25px 70px rgba(0,0,0,.45)}
.floor{position:relative; display:none}
.floor[data-on]{display:block}
.floor svg{width:100%; height:auto; display:block}
.floor [id^="boja"]{opacity:0; transition:opacity 1.4s var(--ease)}
.floor [id^="tekst"]{opacity:0; transition:opacity 1.2s var(--ease) .25s}
.floor.washed [id^="boja"]{opacity:1}
.floor.done [id^="tekst"]{opacity:1}

.spots{position:absolute; inset:0}
.spot{position:absolute; cursor:pointer; padding:0; border:1px solid transparent; background:transparent;
  border-radius:6px; transition:background .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease)}
.spot:hover,.spot.on{background:rgba(244,209,122,.30); border-color:#b8923d; box-shadow:0 0 26px rgba(244,209,122,.45)}
.spot i{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.94); padding:5px 11px;
  white-space:nowrap; border-radius:999px; background:#0b0b0b; color:var(--gold); border:1px solid var(--gold-dim);
  font-style:normal; font-size:11px; letter-spacing:.08em; text-transform:uppercase; opacity:0; pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease)}
.spot:hover i,.spot.on i{opacity:1; transform:translate(-50%,-50%) scale(1)}

.read{position:sticky; top:26px; background:linear-gradient(145deg,#161616,#0f0f0f); border:1px solid var(--gold-dim);
  border-radius:26px; padding:28px; min-height:250px; box-shadow:0 22px 60px rgba(0,0,0,.32)}
.read .hint{color:var(--muted-2); font-size:15px; line-height:1.7}
.read h3{color:var(--gold); font-size:22px; margin-bottom:4px; font-weight:600}
.read .big{display:block; font-size:44px; color:#fff; margin:6px 0 18px; font-variant-numeric:tabular-nums; font-weight:300}
.read dl{display:grid; grid-template-columns:auto 1fr; gap:9px 14px; font-size:14px}
.read dt{color:var(--muted-2)} .read dd{text-align:right; color:#eee; font-variant-numeric:tabular-nums}
.read .note{margin-top:18px; padding:13px 15px; border-radius:14px; background:var(--gold-soft);
  border:1px solid var(--gold-dim); font-size:13px; line-height:1.65; color:#e8e2d2}

/* ── verzije ──────────────────────────────────── */
.verzije{background:rgba(9,9,9,.90)}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; margin-top:38px}
.card{position:relative; overflow:hidden; padding:var(--card-pad); border-radius:24px;
  background:linear-gradient(145deg,#161616,#0f0f0f); border:1px solid var(--gold-dim); transition:.3s ease}
.card::before{content:""; position:absolute; width:130px; height:130px; right:-45px; top:-45px;
  background:rgba(244,209,122,.12); border-radius:50%; transition:.35s}
.card:hover{transform:translateY(-10px); border-color:rgba(244,209,122,.65); box-shadow:0 20px 45px rgba(0,0,0,.35)}
.card:hover::before{transform:scale(1.8)}
.card .badge{position:absolute; right:18px; top:18px; z-index:1; padding:6px 13px; border-radius:999px;
  background:var(--gold); color:#111; font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  box-shadow:0 0 20px rgba(244,209,122,.35)}
.card h3{position:relative; color:var(--gold); font-size:22px; margin-bottom:12px; font-weight:600; padding-right:60px}
.card .num{position:relative; display:block; font-size:34px; color:#fff; font-weight:300; margin-bottom:6px}
.card p{position:relative; color:#d5d5d5; line-height:1.7; font-size:14px}
.card ul{position:relative; list-style:none; margin-top:16px; display:grid; gap:8px}
.card li{background:var(--gold-soft); border-radius:12px; padding:9px 13px; font-size:13px; color:#eee; transition:.25s}
.card li:hover{background:rgba(244,209,122,.18); transform:translateX(4px)}

/* ── galerija ─────────────────────────────────── */
.galerija{background:rgba(10,10,10,.90)}
.gal{margin-top:34px; overflow-x:auto; cursor:grab; scrollbar-width:none; -ms-overflow-style:none}
.gal::-webkit-scrollbar{display:none}
.gal.grabbing{cursor:grabbing}
.gal-row{display:flex; gap:18px; width:max-content; padding-bottom:6px}
.gal-row figure{flex:0 0 auto; width:clamp(250px,32vw,440px); position:relative; border-radius:26px; overflow:hidden;
  border:1px solid var(--gold-dim); transition:.35s}
.gal-row figure:hover{transform:scale(1.02); box-shadow:0 22px 55px rgba(0,0,0,.45); border-color:rgba(244,209,122,.6)}
.gal-row img{width:100%; aspect-ratio:3/2; object-fit:cover; transition:.55s}
.gal-row figure:hover img{transform:scale(1.05)}
.gal-row figcaption{position:absolute; left:16px; bottom:16px; background:rgba(0,0,0,.62); color:var(--gold);
  padding:8px 14px; border-radius:999px; border:1px solid var(--gold-dim); backdrop-filter:blur(8px); font-size:13px}

/* ── pročelje ─────────────────────────────────── */
.procelje{background:radial-gradient(circle at top,rgba(244,209,122,.12),transparent 45%),#080808}
.procelje .pills{margin:26px 0 28px}
.fac{position:relative; border-radius:26px; overflow:hidden; border:1px solid var(--gold-dim);
  background:#e9e5da; box-shadow:0 25px 70px rgba(0,0,0,.45)}
.fac img{width:100%; transition:filter 1.4s var(--ease)}
.fac .glow{position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity 1.4s var(--ease);
  background:radial-gradient(ellipse at 50% 60%,rgba(255,196,96,.55),transparent 48%); mix-blend-mode:screen}
.fac[data-day="jutro"] img{filter:brightness(.95) saturate(.84) hue-rotate(-6deg)}
.fac[data-day="vecer"] img{filter:brightness(.76) saturate(1.24) sepia(.22) hue-rotate(-14deg)}
.fac[data-day="noc"] img{filter:brightness(.30) saturate(.66) contrast(1.2) hue-rotate(196deg)}
.fac[data-day="vecer"] .glow{opacity:.6}
.fac[data-day="noc"] .glow{opacity:1}

/* ── chat / info-pult ─────────────────────────── */
.chat{position:fixed; right:24px; bottom:100px; z-index:96; display:flex; flex-direction:column;
  width:min(420px, calc(100vw - 32px)); height:min(560px, 74svh);
  background:rgba(10,10,10,.94); border:1px solid rgba(244,209,122,.32); border-radius:24px;
  backdrop-filter:blur(16px); box-shadow:0 30px 90px rgba(0,0,0,.6); overflow:hidden;
  animation:fadeUp .35s ease both}
.chat[hidden]{display:none}
.chat-head{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px; border-bottom:1px solid rgba(244,209,122,.18)}
.chat-head strong{color:var(--gold); letter-spacing:.5px}
.chat-head small{display:block; color:var(--muted-2); font-size:11.5px; margin-top:2px}
.chat-head button{background:none; border:0; color:#fff; font-size:26px; cursor:pointer; line-height:1; padding:2px 6px}
.chat-head button:hover{color:var(--gold)}
.chat-log{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px}
.msg{max-width:86%; padding:11px 14px; border-radius:16px; font-size:14.5px; line-height:1.55; white-space:pre-wrap}
.msg.user{align-self:flex-end; background:var(--gold); color:#111; border-bottom-right-radius:5px}
.msg.bot{align-self:flex-start; background:#1a1a1a; border:1px solid rgba(244,209,122,.16);
  color:#eee; border-bottom-left-radius:5px}
.msg.tool{align-self:flex-start; color:var(--gold); font-size:12.5px; padding:2px 6px; opacity:.85}
.msg.tool::before{content:"\2699  "}

/* Ana is working — shown the moment the question is sent, replaced by the first
   word of the answer. Without it the visitor stares at nothing for seconds and
   assumes the thing is broken. */
.msg.typing{align-self:flex-start; display:flex; align-items:center; gap:9px;
  background:#1a1a1a; border:1px solid rgba(244,209,122,.16); color:var(--muted-2);
  border-radius:16px; border-bottom-left-radius:5px; padding:12px 15px; font-size:13px}
.msg.typing i{display:flex; gap:4px; font-style:normal}
.msg.typing i span{width:6px; height:6px; border-radius:50%; background:var(--gold);
  opacity:.35; animation:tipka 1.25s infinite ease-in-out}
.msg.typing i span:nth-child(2){animation-delay:.18s}
.msg.typing i span:nth-child(3){animation-delay:.36s}
@keyframes tipka{0%,70%,100%{opacity:.3; transform:translateY(0)}
                 35%{opacity:1; transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.msg.typing i span{animation:none; opacity:.7}}
.msg.err{align-self:flex-start; background:rgba(180,40,40,.16); border:1px solid rgba(220,80,80,.4); color:#ffd9d9}
.chat-form{display:flex; gap:10px; padding:14px; border-top:1px solid rgba(244,209,122,.18)}
.chat-form input{flex:1; background:#090909; border:1px solid rgba(244,209,122,.26); border-radius:999px;
  color:#fff; padding:12px 18px; font:inherit; font-size:14.5px; outline:none; transition:.25s}
.chat-form input:focus{border-color:var(--gold); box-shadow:0 0 0 4px rgba(244,209,122,.13)}
.chat-form .btn{white-space:nowrap}
.chat-form .btn:disabled{opacity:.5; cursor:default; transform:none}
@media (max-width:700px){.chat{right:16px; bottom:92px}}

footer{background:rgba(6,6,6,.92); padding:28px 7%; text-align:center; color:var(--muted-2); border-top:1px solid rgba(255,255,255,.1); font-size:14px}
/* small maker's mark, deliberately quieter than the client's own name above it */
.powered{display:inline-flex; align-items:center; gap:6px; margin-top:14px; padding:4px 11px 4px 8px;
  border:1px solid rgba(255,255,255,.09); border-radius:999px; text-decoration:none;
  color:var(--muted-2); font-size:8.5px; letter-spacing:.13em; text-transform:uppercase;
  opacity:.5; transition:.28s var(--ease)}
.powered img{height:15px; width:auto; border-radius:4px}
.powered b{font-size:10px; letter-spacing:.03em; text-transform:none; font-weight:600; color:#b9a4dd}
.powered:hover{opacity:1; border-color:rgba(160,110,220,.4); color:#ddd}
.powered:hover b{color:#e2d4ff}

/* legally required links — must be reachable from every page, so: the footer */
.pravno{display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin-top:14px}
.pravno a{color:var(--muted-2); font-size:13px; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.18); padding-bottom:2px; transition:.25s}
.pravno a:hover{color:var(--gold); border-color:var(--gold-dim)}

/* ── contact block: until the client sends real details, the info desk is it ── */
.kontakt{padding:0 0 30px; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:24px}
.kontakt h2{color:var(--gold); font-size:clamp(20px,4vw,26px); font-weight:400; margin-bottom:12px}
.kontakt p{color:var(--muted); font-size:clamp(14px,3.6vw,15.5px); line-height:1.7;
  max-width:56ch; margin:0 auto; font-weight:300}
.kontakt-akcije{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:20px}
.kontakt-tvrtka{margin-top:20px !important; color:var(--muted-2) !important; font-size:12.5px !important;
  letter-spacing:.1em; text-transform:uppercase}

/* ── Ana's nudge next to the chat button ─────────── */
.chat-teaser{position:fixed; right:calc(24px + var(--safe-r)); bottom:calc(98px + var(--safe-b)); z-index:91;
  display:flex; align-items:flex-start; gap:8px; max-width:min(272px, calc(100vw - 48px));
  padding:13px 14px; border-radius:18px 18px 6px 18px;
  background:rgba(12,12,12,.95); border:1px solid rgba(244,209,122,.38);
  box-shadow:0 18px 50px rgba(0,0,0,.55); backdrop-filter:blur(12px);
  opacity:0; transform:translateY(10px) scale(.96); pointer-events:none;
  transition:opacity .4s var(--ease), transform .4s var(--ease)}
.chat-teaser[hidden]{display:none}
.chat-teaser.on{opacity:1; transform:none; pointer-events:auto}
.chat-teaser p{color:#eee; font-size:13.5px; line-height:1.5; margin:0}
.chat-teaser button{flex:none; background:none; border:0; color:var(--muted-2); font-size:17px;
  line-height:1; cursor:pointer; padding:0 2px; margin-top:-1px}
.chat-teaser button:hover{color:var(--gold)}
/* the tail, pointing down at the button */
.chat-teaser::after{content:""; position:absolute; right:26px; bottom:-7px; width:13px; height:13px;
  background:rgba(12,12,12,.95); border-right:1px solid rgba(244,209,122,.38);
  border-bottom:1px solid rgba(244,209,122,.38); transform:rotate(45deg)}
body.win-open .chat-teaser{display:none}
@media (max-width:700px){
  .chat-teaser{right:calc(16px + var(--safe-r)); bottom:calc(84px + var(--safe-b));
    max-width:min(258px, calc(100vw - 32px))}
  .chat-teaser::after{right:22px}
}
.chat-float{position:fixed; right:24px; bottom:24px; z-index:90; width:62px; height:62px; border-radius:50%;
  background:var(--gold); color:#111; display:flex; align-items:center; justify-content:center; text-decoration:none;
  font-size:24px; box-shadow:0 0 28px rgba(244,209,122,.4); animation:chatPulse 2s infinite; transition:.25s}
.chat-float:hover{transform:scale(1.08) translateY(-4px)}
@keyframes chatPulse{0%,100%{box-shadow:0 0 0 0 rgba(244,209,122,.42)}50%{box-shadow:0 0 0 16px rgba(244,209,122,0)}}

@media (max-width:960px){
  .arch-grid{grid-template-columns:1fr}
  .read{position:static}
  .total{margin-left:0; width:100%}
  .quick-card{display:none}
  nav{display:none}
  .pin{height:420vh}
}
@media (max-width:768px){
  .hero{padding:20px 6%}
  .stats{grid-template-columns:1fr}
  .buttons{flex-direction:column}
  .btn{width:100%; text-align:center}
  section{padding:60px 6%}
}
@media (prefers-reduced-motion:reduce){
  .hero::before,.gold-orb,.chat-float,.loader-ring,.loader-logo{animation:none}
  .reveal{opacity:1; transform:none}
  .floor [id^="boja"],.floor [id^="tekst"]{opacity:1}
  *{transition-duration:.01ms !important}
}

/* -- info windows: full-screen overlays opened from the drive stops -- */
.win{position:fixed; inset:0; z-index:200; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:rgba(4,4,4,.62); animation:winIn .45s ease both}
.win[hidden]{display:none}
@keyframes winIn{from{opacity:0} to{opacity:1}}
/* season imagery behind the window; a looping seasons video drops in here later */
.win-bg{position:fixed; inset:0; z-index:-1; background-size:cover; background-position:center;
  filter:blur(9px) brightness(.38) saturate(.9); transform:scale(1.06)}
.win-bg video{width:100%; height:100%; object-fit:cover}
.win-bar{position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:16px;
  padding:14px clamp(16px,4vw,40px); padding-top:calc(14px + var(--safe-t));
  padding-left:calc(clamp(16px,4vw,40px) + var(--safe-l));
  padding-right:calc(clamp(16px,4vw,40px) + var(--safe-r));
  background:rgba(6,6,6,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(244,209,122,.2)}
.win-bar span{color:var(--gold); font-size:13px; letter-spacing:.22em; text-transform:uppercase}
.win-back{background:var(--gold); color:#111; border:0; border-radius:999px; cursor:pointer;
  font:inherit; font-size:14px; font-weight:600; padding:10px 20px; transition:.25s;
  box-shadow:0 0 22px rgba(244,209,122,.25)}
.win-back:hover{transform:translateY(-2px); box-shadow:0 10px 30px rgba(244,209,122,.3)}
.win-body{min-height:100vh; min-height:100svh; padding-bottom:var(--safe-b)}
.win-body section{background:transparent !important}
body.win-open{overflow:hidden}
body.win-open .chat-float,body.win-open .hud{display:none}

/* -- grouped gallery: one block per version, images below each other -- */
#galBlocks{display:grid; gap:clamp(40px,6vh,70px); margin-top:38px}
.gv{border:1px solid var(--gold-dim); border-radius:26px; overflow:hidden;
  background:linear-gradient(160deg, rgba(22,22,22,.85), rgba(14,14,14,.85))}
.gv-head{display:flex; gap:18px; align-items:flex-start; padding:26px 26px 6px}
.gv-num{flex:none; width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  font-size:26px; font-weight:700; color:#111; background:linear-gradient(145deg,var(--gold),#c9a94f);
  box-shadow:0 0 24px rgba(244,209,122,.25)}
.gv-head h3{color:var(--gold); font-size:24px; margin-bottom:6px}
.gv-head p{color:#ccc; font-size:14.5px; line-height:1.65; max-width:70ch}
.gv-stan{width:calc(100% - 52px); margin:16px 26px 4px; border-collapse:collapse; font-size:14px}
.gv-stan th{color:var(--muted-2); text-align:left; font-weight:500; font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; padding:8px 10px;
  border-bottom:1px solid rgba(244,209,122,.22)}
.gv-stan td{padding:9px 10px; color:#e6e6e6; border-bottom:1px solid rgba(255,255,255,.06)}
.gv-stan tr:last-child td{border-bottom:0}
.gv-stan td.m2{color:var(--gold); font-variant-numeric:tabular-nums; font-weight:600}
.gv-stan tbody tr{transition:background .2s}
.gv-stan tbody tr:hover{background:var(--gold-soft)}
.gv-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
  gap:14px; padding:18px 26px 26px}
.gv-grid figure{position:relative; border-radius:16px; overflow:hidden;
  border:1px solid rgba(244,209,122,.14); transition:.3s}
.gv-grid figure:hover{transform:translateY(-4px); border-color:rgba(244,209,122,.5);
  box-shadow:0 16px 40px rgba(0,0,0,.45)}
.gv-grid img{width:100%; aspect-ratio:16/10; object-fit:cover; transition:.5s}
.gv-grid figure:hover img{transform:scale(1.04)}
.gv-grid figcaption{position:absolute; left:10px; bottom:10px; padding:6px 12px; border-radius:999px;
  background:rgba(0,0,0,.62); color:var(--gold); font-size:12px; border:1px solid rgba(244,209,122,.25);
  backdrop-filter:blur(8px)}
@media (max-width:640px){
  .gv-head{padding:18px 16px 2px}
  .gv-stan{width:calc(100% - 32px); margin:12px 16px 0}
  .gv-grid{padding:14px 16px 18px; grid-template-columns:1fr}
}

/* -- stop card thumbnail -- */
.stop-img{width:calc(100% + var(--card-pad) * 2); max-width:none;
  margin:calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 16px;
  aspect-ratio:16/8; object-fit:cover;
  border-radius:27px 27px 0 0; border-bottom:1px solid rgba(244,209,122,.25)}

/* -- technical drawings inside gallery blocks -- */
.gv-sub{margin:22px 26px 0; color:var(--gold); font-size:12px; letter-spacing:.18em; text-transform:uppercase}
.gv-nacrti{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));
  gap:12px; padding:12px 26px 26px}
.gv-nacrti a{display:block; background:#f6f4ee; border-radius:12px; overflow:hidden;
  border:1px solid rgba(244,209,122,.16); transition:.3s}
.gv-nacrti a:hover{transform:translateY(-3px); border-color:rgba(244,209,122,.5);
  box-shadow:0 14px 34px rgba(0,0,0,.4)}
.gv-nacrti img{width:100%; height:auto; display:block}
@media (max-width:640px){.gv-nacrti{padding:10px 16px 18px; grid-template-columns:1fr}
  .gv-sub{margin:18px 16px 0}}

/* -- clickable version cards + contact CTAs -- */
.card[data-detalj]{cursor:pointer}
.card-more{position:relative; display:inline-block; margin-top:16px; color:var(--gold);
  font-size:13px; letter-spacing:.08em; transition:.25s}
.card:hover .card-more{transform:translateX(5px)}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px}
.gv-head .btn{margin-top:14px}
/* chat must sit above the info windows so contact buttons work inside them */
.chat{z-index:320}
body.win-open .chat-float{display:flex}
#detaljBody{padding:20px clamp(16px,4vw,40px) 60px}
/* full version content below the interactive plan */
#prikazExtra{margin-top:clamp(30px,5vh,54px)}
#prikazExtra .gv-head{padding-top:24px}

/* -- photo on the version cards -- */
/* max-width:none overrides the global img rule — without it the photo is capped
   at the content box and never reaches the card edge it is bleeding towards. */
.card-img{width:calc(100% + var(--card-pad) * 2); max-width:none;
  margin:calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 18px;
  aspect-ratio:16/9; object-fit:cover;
  border-radius:23px 23px 0 0; border-bottom:1px solid var(--gold-dim); transition:.45s}
.card:hover .card-img{transform:scale(1.03)}
.card{isolation:isolate}
.card .badge{top:14px; right:14px}
.card::before{z-index:1}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE PASS — iOS and Android, phone through tablet.
   Deliberately last in the file: these rules have to win over the desktop ones
   above without inflating selector specificity. Ordered widest to narrowest.
   ══════════════════════════════════════════════════════════════════════════ */

/* -- touch devices ------------------------------------------------------- */
@media (hover:none){
  /* A :hover transform on a touch screen fires on tap and then stays — the card
     remains lifted, the button keeps floating. Neutralise them all. */
  .btn:hover,.card:hover,.stat:hover,.win-back:hover,.chat-float:hover,
  .gal-row figure:hover,.gv-grid figure:hover,.gv-nacrti a:hover,
  .card li:hover,.logo-box:hover .mark,.card:hover .card-img,
  .card:hover::before,.card:hover .card-more,
  .gal-row figure:hover img,.gv-grid figure:hover img{transform:none}
  /* Cheaper compositing while scrolling on mid-range Android. */
  .stop,.quick-card,header,.chat{backdrop-filter:blur(9px)}
}
a,button,input,.spot,.stop,.card{-webkit-tap-highlight-color:rgba(244,209,122,.16)}
button,.btn,.spot,nav a{touch-action:manipulation}

/* Any touch device, phone or tablet, portrait or landscape — the width-based
   breakpoints below miss an iPad and a phone held sideways. */
@media (pointer:coarse){
  /* Under 16px iOS zooms the page the moment the field takes focus, and never
     zooms back out. Applies to the tablet and landscape cases too. */
  .chat-form input{font-size:16px}
  /* Apple asks for 44px of tappable height, Android for 48dp. */
  nav a,.pills button,.win-back,.btn,.chat-head button,.card-more,.powered{min-height:44px}
  nav a,.pills button,.win-back,.btn{display:inline-flex; align-items:center; justify-content:center}
  .chat-head button{min-width:44px}
  .btn.sm{padding-top:11px; padding-bottom:11px}
}

/* -- fluid type: a scale instead of fixed pixel sizes -------------------- */
/* Each clamp keeps the original value as its maximum, so nothing changes on a
   desktop; only narrow screens scale down. */
.loader-logo strong{font-size:clamp(22px,7vw,34px)}
.stat strong{font-size:clamp(21px,6.4vw,30px)}
.stop h3{font-size:clamp(19px,5.2vw,26px)}
.card h3{font-size:clamp(17px,4.6vw,22px)}
.card .num{font-size:clamp(25px,7vw,34px)}
.read .big{font-size:clamp(30px,9vw,44px)}
.read h3{font-size:clamp(18px,5vw,22px)}
.gv-head h3{font-size:clamp(18px,5vw,24px)}
.quick-card h3{font-size:clamp(18px,5vw,22px)}
.hero-lede{font-size:clamp(15px,4vw,18px)}
.lead{font-size:clamp(15px,3.8vw,17px)}

/* -- tablets ------------------------------------------------------------- */
@media (max-width:900px){
  .cards{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:16px}
  .gal-row figure{width:min(78vw,340px)}
  .arch-tools{gap:12px; margin:24px 0 18px}
  .read{padding:20px; min-height:0}
}

/* -- phones -------------------------------------------------------------- */
@media (max-width:700px){
  /* Header: the three section links used to be display:none below 960px, which
     left Tlocrti / Verzije / Galerija unreachable on a phone. They come back as
     a scrollable pill row on their own line. */
  header{flex-wrap:wrap; row-gap:10px; padding:10px 12px; border-radius:20px}
  .logo-box{gap:10px}
  .mark{width:42px; height:42px; border-radius:11px; font-size:14px}
  .brand h2{font-size:15px; letter-spacing:1.5px}
  .brand p{font-size:9px; letter-spacing:2px}
  nav{display:flex; width:100%; gap:8px; overflow-x:auto;
    scrollbar-width:none; -webkit-overflow-scrolling:touch}
  nav::-webkit-scrollbar{display:none}
  nav a{margin-left:0; flex:0 0 auto; font-size:13px; padding:8px 14px; border-radius:999px;
    border:1px solid var(--gold-dim); background:rgba(0,0,0,.3)}
  nav a::after{display:none}

  /* space-between lets the two children collide once the text is taller than the
     screen — the header ended up sitting on top of the first line. An auto top
     margin does the same job but collapses to 0 instead of overlapping. */
  /* Bottom padding keeps the floating chat button off the last row of tiles. */
  .hero{padding-left:5%; padding-right:5%; padding-bottom:calc(74px + var(--safe-b));
    justify-content:flex-start; gap:clamp(14px,3.4vh,30px)}
  .hero-content{padding-bottom:0; margin-top:auto}
  .tag{letter-spacing:2.5px; font-size:11.5px; margin-bottom:12px}
  .hero-lede{margin-bottom:22px; line-height:1.6}

  /* Two full-width buttons stacked and three full-width tiles below them pushed
     the hero ~160px past the bottom of an iPhone SE. Side by side they fit. */
  .buttons,.cta-row{flex-direction:row; gap:10px}
  .buttons .btn,.cta-row .btn{flex:1 1 0; width:auto; padding:14px 12px; font-size:14px}
  .stats{grid-template-columns:repeat(3,1fr); gap:8px; margin-top:20px}
  .stat{padding:10px 8px; border-radius:14px}
  .stat strong{font-size:clamp(16px,4.6vw,22px); margin-bottom:2px}
  .stat span{font-size:10.5px; line-height:1.25; display:block}

  /* The drive: a third less scrolling, and a stop card that can never grow
     taller than the screen it sits on. */
  .walk{height:820vh}
  .stop{width:min(430px,92vw); bottom:calc(7vh + var(--safe-b)); border-radius:22px;
    max-height:74svh; overflow-y:auto; -webkit-overflow-scrolling:touch}
  .stop.left,.stop.right{margin-left:calc(min(430px,92vw)/-2)}
  .stop-img{aspect-ratio:16/7; border-radius:21px 21px 0 0}
  .stop p{font-size:14px; line-height:1.55}
  .stop .chips span{font-size:11.5px; padding:5px 11px}
  .stop-btns{gap:8px}
  /* Full-width buttons would stack and push the card past the screen edge. */
  .stop-btns .btn{width:auto; flex:1 1 auto; margin-top:14px; padding:12px 16px; font-size:13.5px}

  .card{border-radius:20px}
  .card p{font-size:13.5px; line-height:1.6}
  .card ul{margin-top:12px; gap:6px}
  .card li{padding:8px 11px; font-size:12.5px; border-radius:10px}
  /* A wider crop on a narrow screen: same photo, ~60px less card height, so the
     next card peeks in and the list reads as a list instead of full-screen slabs. */
  .card-img{aspect-ratio:2/1; margin-bottom:14px; border-radius:19px 19px 0 0}
  .card .badge{font-size:10px; padding:5px 10px}

  .gv-head{gap:12px}
  .gv-num{width:40px; height:40px; font-size:20px; border-radius:11px}
  .gv-stan{font-size:12.5px}
  .gv-stan th{font-size:10px; padding:7px 6px}
  .gv-stan td{padding:8px 6px}

  .scene{border-radius:20px}
  .win-bar span{font-size:11px; letter-spacing:.16em}
  .win-back{padding:9px 16px; font-size:13px}

  /* Info-pult as a bottom sheet — a floating panel does not fit next to the
     keyboard on a phone. */
  .chat{left:0; right:0; bottom:0; top:auto; width:100%;
    height:min(88svh, 100svh - 8px); border-radius:22px 22px 0 0;
    padding-bottom:var(--safe-b)}
  .msg{max-width:92%; font-size:14px}
  /* Anything under 16px makes iOS zoom the whole page when the field is focused
     and it never zooms back out. */
  .chat-form input{font-size:16px}
  .chat-float{right:calc(16px + var(--safe-r)); bottom:calc(16px + var(--safe-b));
    width:56px; height:56px; font-size:22px}
  body:has(.chat:not([hidden])) .chat-float{display:none}

  footer{padding:22px 6% calc(22px + var(--safe-b)); font-size:12.5px}
}

/* -- small phones (iPhone SE, older Android) ----------------------------- */
@media (max-width:380px){
  .hero{padding-left:4.5%; padding-right:4.5%}
  h1{font-size:clamp(29px,8.6vw,40px)}
  .btn{padding:13px 18px; font-size:14px}
  .brand p{display:none}
  .tag{font-size:11px; letter-spacing:2.5px}
}

/* -- phone held sideways: height is the scarce axis, not width ----------- */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto; padding-top:calc(16px + var(--safe-t)); padding-bottom:22px}
  .hero-content{padding-bottom:18px}
  .stats{grid-template-columns:repeat(3,1fr); margin-top:16px}
  .stop{max-height:82svh; bottom:calc(4vh + var(--safe-b))}
  .chat{height:min(94svh, 100svh - 6px)}
  section{padding-top:44px; padding-bottom:44px}
}