@font-face{font-family:"NSD";src:url(../fonts/nsd-l.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+2013,U+2018-201E,U+2026,U+20AC}
@font-face{font-family:"NSD";src:url(../fonts/nsd-le.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0106-0107,U+010C-010D,U+0110-0111,U+0160-0161,U+017D-017E}
@font-face{font-family:"NSD";src:url(../fonts/nsd-it-l.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+2013,U+2018-201E,U+2026,U+20AC}
@font-face{font-family:"NSD";src:url(../fonts/nsd-it-le.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap;unicode-range:U+0106-0107,U+010C-010D,U+0110-0111,U+0160-0161,U+017D-017E}
@font-face{font-family:"Hanken";src:url(../fonts/hanken-l.woff2) format("woff2");font-weight:300 700;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+2013,U+2018-201E,U+2026,U+20AC}
@font-face{font-family:"Hanken";src:url(../fonts/hanken-le.woff2) format("woff2");font-weight:300 700;font-display:swap;unicode-range:U+0106-0107,U+010C-010D,U+0110-0111,U+0160-0161,U+017D-017E}

:root{
  --noc:#1E1412;--cok:#2A1B18;--ink:#3A2420;--ink-2:#6A4D45;
  --puder:#F6EFEA;--puder-2:#EFE5DE;--puder-3:#E7D8CF;--kr:#F4EAE2;
  --bronza:#A2784A;--bronza-sv:#D3A66C;--bronza-t:#7A532F;--laser:#E2559A;
  --serif:"NSD",Georgia,serif;--sans:"Hanken",system-ui,sans-serif;
  --e:cubic-bezier(.2,0,0,1);--e-in:cubic-bezier(.05,.7,.1,1);
  /* koza koncepta (A svetla, B papir, C tamna) */
  --fg:var(--ink);--fg-2:var(--ink-2);--scrim:246,239,234;--line:rgba(122,83,47,.28);--acc:var(--bronza-t);--btn-fg:#FBF6F2;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--bg,#efe5de);color:var(--fg);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-kerning:normal;font-variant-numeric:lining-nums}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ol,ul,figure,blockquote{margin:0}
ol,ul{padding:0;list-style:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nw{white-space:nowrap}
:focus-visible{outline:2px solid var(--bronza);outline-offset:3px;border-radius:4px}

/* ---------- 3D sloj ---------- */
/* platno i poster: visina velikog ekrana (lvh), da se ne menja kad telefon sakrije traku sa adresom (inace trzaj i ponovno crtanje) */
.poster,.stage{position:fixed;top:0;left:0;width:100%;height:100vh;height:100lvh;z-index:0}
.poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage{display:block;opacity:0;transition:opacity .9s var(--e)}
.gl-ready .stage{opacity:1}
.film{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 90% at 50% 42%,rgba(0,0,0,0) 55%,rgba(40,22,16,.22) 100%)}
.film::after{content:"";position:absolute;inset:0;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.no3d .film{display:none}
.capture .stage,.capture *{transition:none!important;animation:none!important}

/* ---------- zaglavlje ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;gap:12px;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;color:var(--hdr-fg,var(--fg))}
.hdr::before{content:"";position:absolute;inset:0 0 -18px;background:linear-gradient(rgba(var(--scrim),.86),rgba(var(--scrim),0));pointer-events:none;z-index:-1}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand svg{width:30px;height:auto;color:var(--hdr-fg,var(--fg))}
.brand b{font:400 19px/1 var(--serif);letter-spacing:.02em}
.brand small{display:block;font:600 8.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--fg-2);margin-top:4px}
.hdr .sp{flex:1}
.hdr-cta{font:600 13px/1 var(--sans);letter-spacing:.02em;text-decoration:none;padding:10px 14px;border-radius:999px;background:var(--cok);color:var(--btn-fg)}

/* ---------- tekst preko 3D-a ---------- */
main{position:relative;z-index:10}
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:0 18px calc(22px + env(safe-area-inset-bottom))}
.hero::before{content:"";position:absolute;left:0;right:0;top:44svh;height:56svh;background:linear-gradient(rgba(var(--scrim),0),rgba(var(--scrim),.78) 38%,rgba(var(--scrim),.95));pointer-events:none;z-index:-1}
.kick{display:flex;align-items:center;gap:10px;font:600 11px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--acc)}
.kick .rule{flex:0 0 28px;height:1px;background:currentColor;opacity:.6}
.kick .num{font:400 15px/1 var(--serif);letter-spacing:.06em;text-transform:none}
h1,.h2{font-family:var(--serif);font-weight:300;letter-spacing:-.012em;color:var(--fg)}
h1{font-size:clamp(40px,11.4vw,76px);line-height:.98;margin:12px 0 14px}
h1 em,.h2 em{font-style:italic;font-weight:300}
.lead{font-size:16.5px;line-height:1.5;color:var(--fg-2);max-width:34em}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.btn{display:inline-flex;align-items:center;gap:10px;font:600 15px/1 var(--sans);text-decoration:none;padding:15px 20px;border-radius:999px;background:var(--cok);color:var(--btn-fg);box-shadow:0 10px 30px -14px rgba(30,20,18,.6)}
.btn svg{width:16px;height:16px}
.btn-ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--line)}
.plan{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
.plan-k{font:600 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-2);margin-bottom:10px}
.plan ol{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -18px;padding:0 18px}
.plan ol::-webkit-scrollbar{display:none}
.plan a{display:flex;align-items:baseline;gap:7px;white-space:nowrap;text-decoration:none;font:500 13.5px/1 var(--sans);padding:9px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line)}
.plan a i{font:400 14px/1 var(--serif);font-style:normal;color:var(--acc)}

.ch{position:relative;min-height:var(--gap,190svh);display:flex;flex-direction:column;justify-content:flex-end}
.panel{position:relative;padding:22px 18px calc(84px + env(safe-area-inset-bottom));}
.panel::before{content:"";position:absolute;left:0;right:0;bottom:0;top:-12svh;background:linear-gradient(rgba(var(--scrim),0),rgba(var(--scrim),.86) 14svh,rgba(var(--scrim),.96));pointer-events:none;z-index:-1}
.h2{font-size:clamp(30px,8.2vw,54px);line-height:1.02;margin:8px 0 10px}
.panel p{max-width:36em}
.panel p+p{margin-top:10px}
.price{margin-top:14px;border-top:1px solid var(--line)}
.price li:nth-child(2){--i:1}.price li:nth-child(3){--i:2}.price li:nth-child(4){--i:3}.price li:nth-child(5){--i:4}
.price li{--on:clamp(0,(var(--scan,1)*5 - var(--i,0))*1.4,1);display:grid;grid-template-columns:1fr auto;column-gap:14px;padding:8px 0;border-bottom:1px solid var(--line);opacity:calc(.34 + .66*var(--on))}
.price b{font-weight:600;font-size:15px}
.price .v{font:400 17px/1.2 var(--serif);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.price .v i{font:500 11px/1 var(--sans);font-style:normal;letter-spacing:.08em;color:var(--fg-2);margin-left:3px}
.price small{grid-column:1/-1;font-size:12.5px;line-height:1.35;color:var(--fg-2)}
.lnk{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font:600 14px/1 var(--sans);text-decoration:none;color:var(--acc);border-bottom:1px solid currentColor;padding-bottom:4px}
.quote{font:300 clamp(27px,7.4vw,44px)/1.14 var(--serif);letter-spacing:-.01em;color:var(--fg)}
.quote-by{margin-top:12px;font-size:13.5px;color:var(--fg-2)}
.stat{margin-top:16px;font-size:14px;color:var(--fg-2)}
.stat b{font:400 22px/1 var(--serif);color:var(--fg);margin-right:6px}
.meta{margin-top:12px;font-size:13.5px;color:var(--fg-2)}

/* ---------- kraj: termin i futer ---------- */
.endgap{height:95svh}.no3d .endgap{display:none}
.final .h2{font-size:clamp(36px,10vw,60px)}
.ftr{position:relative;z-index:10;padding:28px 18px calc(30px + env(safe-area-inset-bottom));background:var(--ftr-bg,var(--cok));color:var(--ftr-fg,#EFE5DE)}
.ftr a{color:inherit}

/* ---------- traka na dnu: poglavlje, napredak, plan ---------- */
.rooms{position:fixed;left:0;right:0;bottom:0;z-index:40;pointer-events:none}
.rooms-bar{position:relative;display:flex;align-items:center;gap:12px;margin:0 10px calc(10px + env(safe-area-inset-bottom));padding:10px 10px 10px 16px;border-radius:16px;background:var(--bar-bg,rgba(42,27,24,.94));color:#F4EAE2;transform:translateY(130%);transition:transform .5s var(--e);pointer-events:auto}
.rooms-on .rooms-bar,.rooms[data-open] .rooms-bar{transform:none}
.rooms-now{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.rooms-k{font:600 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--bronza-sv)}
.rooms-t{font:400 17px/1.1 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rooms-btn{display:flex;align-items:center;gap:8px;font:600 13px/1 var(--sans);color:var(--cok);background:#F4EAE2;border:0;border-radius:999px;padding:11px 14px}
.rooms-btn svg{width:16px;height:16px}
.rooms-btn .rb-c,.rooms[data-open] .rb-o{display:none}
.rooms[data-open] .rb-c{display:inline}
.rooms-p{position:absolute;left:16px;right:16px;top:0;height:2px;border-radius:2px;background:var(--bronza-sv);transform-origin:0 50%;transform:scaleX(0)}
.rooms-list{position:absolute;left:10px;right:10px;bottom:calc(76px + env(safe-area-inset-bottom));padding:8px;border-radius:18px;background:#F6EFEA;color:var(--cok);box-shadow:0 24px 60px -20px rgba(30,20,18,.55);opacity:0;transform:translateY(12px);transition:opacity .3s var(--e),transform .4s var(--e);pointer-events:none}
.rooms[data-open] .rooms-list{opacity:1;transform:none;pointer-events:auto}
.rooms-list a{display:flex;align-items:center;gap:14px;padding:13px 12px;border-radius:12px;text-decoration:none}
.rooms-list a[aria-current]{background:#EADBD0}
.rooms-list .rn{flex:0 0 34px;height:34px;display:grid;place-items:center;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(122,83,47,.35);font:400 15px/1 var(--serif);color:var(--bronza-t)}
.rooms-list .rt{display:flex;flex-direction:column;gap:3px;font:400 18px/1.1 var(--serif)}
.rooms-list small{font:500 12.5px/1.2 var(--sans);color:var(--ink-2)}
.rooms-list .rn svg{width:16px;height:16px}
.rooms-dim{position:fixed;inset:0;background:rgba(30,20,18,.32);opacity:0;transition:opacity .3s;pointer-events:none}
.rooms[data-open] .rooms-dim{opacity:1;pointer-events:auto}
.flying main .panel>*,.flying .hero>*{opacity:0;transition:opacity .25s}

.gl-ready .sd{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ftr-in{max-width:760px}
.ftr-brand{display:flex;align-items:center;gap:14px;font:400 22px/1.1 var(--serif)}
.ftr-brand small{display:block;font:500 13px/1.3 var(--sans);letter-spacing:.02em;opacity:.75;margin-top:4px}
.ftr-mono{width:46px;height:auto;color:currentColor}
.ftr-legal{margin-top:16px;font-size:12.5px;line-height:1.55;opacity:.72}
.maker{display:inline-flex;flex-direction:column;gap:4px;margin-top:18px;text-decoration:none}
.maker-k{font:600 9.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;opacity:.7}
.maker-n{font:400 18px/1.1 var(--serif)}
.maker-c{font:600 12.5px/1.2 var(--sans);color:var(--bronza-sv)}

/* bez 3D-a: kraci razmaci, slike umesto prostora */
.no3d .ch{min-height:auto;padding-top:40px}
.no3d .panel::before{top:-40px}

/* alat snimanja: tacka prsta i natpis (samo ?capture) */
.cap-dot{position:fixed;z-index:200;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(255,255,255,.34);box-shadow:0 0 0 1.5px rgba(255,255,255,.85),0 6px 18px rgba(0,0,0,.25);pointer-events:none;opacity:0}
.cap-note{position:fixed;z-index:200;left:50%;top:calc(64px + env(safe-area-inset-top));transform:translateX(-50%);max-width:86vw;padding:9px 14px;border-radius:12px;background:rgba(30,20,18,.84);color:#F6EFEA;font:500 13px/1.3 var(--sans);text-align:center;letter-spacing:.01em;pointer-events:none;opacity:0;white-space:nowrap}
.nohtml main,.nohtml .hdr,.nohtml .rooms,.nohtml .ftr{visibility:hidden}
.fpsm{position:fixed;left:8px;top:70px;z-index:9999;font:12px/1.3 ui-monospace,monospace;background:#000c;color:#fff;padding:4px 8px;border-radius:6px;pointer-events:none}

@media (min-width:900px){
  .hero{padding:0 6vw 7vh;max-width:none}
  .hero>*{max-width:640px}
  .panel{padding:40px 6vw 110px;max-width:760px}
  .rooms-bar{max-width:520px;margin-left:auto;margin-right:24px}
  .rooms-list{left:auto;right:24px;width:420px}
}
@media (prefers-reduced-motion:reduce){.stage{transition:none}.rooms-bar{transition:none}}

/* natpisi prezentacije (isti kao na snimku), samo uz 3D */
.pres{position:fixed;z-index:35;left:0;right:0;top:calc(64px + env(safe-area-inset-top));display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.pres span{max-width:min(88vw,380px);padding:9px 14px;border-radius:12px;background:rgba(30,20,18,.84);color:#F6EFEA;font:500 13px/1.3 var(--sans);text-align:center;letter-spacing:.01em;opacity:0;text-wrap:balance}
.pres .pres-c{font-variant-numeric:tabular-nums}
.pres span:empty{display:none}
.no3d .pres,html:not(.gl-ready) .pres{display:none}

/* A · Drugi sprat: svetao malter, cokoladni tekst, mesingana tablica na kraju */
.k-a{--bg:#E9DED6;--scrim:244,236,229;--fg:#2E1E1A;--fg-2:#6A4D45;--acc:#8A5E34;--line:rgba(122,83,47,.26)}
.k-a .hero h1{font-size:clamp(42px,12vw,78px)}
.k-a .hero h1 em{display:block;font-size:.62em;letter-spacing:-.005em;color:var(--fg-2)}
.k-a .ch{--gap:200svh}
.k-a .final .panel::before{background:linear-gradient(rgba(var(--scrim),0),rgba(var(--scrim),.84) 30%,rgba(var(--scrim),.97))}
/* futer: mesingana tablica pored vrata i mala plocica izrade */
.k-a .ftr{background:#2A1B18;color:#EFE5DE}
.k-a .ftr-in{position:relative;padding:22px 20px 20px;border-radius:6px;background:linear-gradient(135deg,#C9A06A,#A2784A 46%,#8A6038 70%,#B78B57);color:#2A1B18;box-shadow:inset 0 1px 0 rgba(255,240,215,.55),inset 0 -1px 0 rgba(60,35,20,.35),0 14px 30px -18px rgba(0,0,0,.7)}
.k-a .ftr-in::before,.k-a .ftr-in::after{content:"";position:absolute;top:10px;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#E8C99A,#6A4527 70%);box-shadow:0 1px 0 rgba(255,235,205,.4)}
.k-a .ftr-in::before{left:10px}.k-a .ftr-in::after{right:10px}
.k-a .ftr-brand{color:#2A1B18}
.k-a .ftr-legal{opacity:.82;color:#2A1B18}
.k-a .maker{margin-top:18px;padding:10px 14px;border-radius:4px;background:#2A1B18;color:#EFE5DE;box-shadow:inset 0 0 0 1px rgba(211,166,108,.45)}
.k-a .maker-c{color:#D3A66C}