:root{
  --bg:#0b0e13;
  --panel:#141a21;
  --panel-2:#1c232c;
  --gold:#c6a04a;
  --gold-2:#e3c579;
  --text:#eef0f3;
  --muted:#9aa3ad;
  --line:rgba(255,255,255,.09);
  --shadow:0 18px 50px rgba(0,0,0,.6);
  --radius:16px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--text);overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}
button{font-family:inherit}

/* ---------- Brand ---------- */
.brand{display:flex;align-items:center;gap:12px}
.brand-name{font-weight:800;letter-spacing:2px;font-size:15px;line-height:1}
.brand-name span{color:var(--gold);margin-left:5px}
.brand.small .brand-name{font-size:13px}
.brand-tag{color:var(--gold);font-size:11px;letter-spacing:4px;text-transform:uppercase}
.brand-emblem{width:150px;max-width:42vw;height:auto;display:block;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.5))}
.brand-icon{height:34px;width:auto;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.cover-brand{flex-direction:column;gap:14px}
.cover-wordmark{font-weight:800;letter-spacing:5px;font-size:clamp(20px,4.6vw,30px);
  line-height:1.1;color:var(--text);text-align:center}
.cover-wordmark span{display:block;color:var(--gold);letter-spacing:7px;font-size:.62em;
  margin-top:6px}

/* ---------- Cover ---------- */
.cover{position:fixed;inset:0;z-index:40;display:grid;place-items:center;
  text-align:center;padding:24px;transition:opacity .7s ease}
.cover-bg{position:absolute;inset:0;
  background:url("../panoramas/living-room.jpg") center/cover no-repeat;
  filter:blur(22px) brightness(.5) saturate(1.1);transform:scale(1.15);
  animation:kenburns 24s ease-in-out infinite alternate}
.cover-scrim{position:absolute;inset:0;
  background:
    radial-gradient(1000px 520px at 50% 8%,rgba(198,160,74,.22),transparent 60%),
    linear-gradient(180deg,rgba(10,13,18,.72),rgba(8,11,15,.94))}
.cover-inner{position:relative;max-width:860px;animation:rise .9s ease both}
.cover .brand{justify-content:center;margin-bottom:26px}
.cover-h1{font-size:clamp(26px,5vw,44px);font-weight:800;letter-spacing:.5px;
  line-height:1.05}
.cover-sub{color:var(--muted);margin-top:10px;font-size:13.5px;letter-spacing:2.5px;
  text-transform:uppercase}

/* ---------- Property picker ---------- */
.prop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px}
.prop-card{position:relative;cursor:pointer;border:1px solid var(--line);border-radius:16px;
  overflow:hidden;background:var(--panel);text-align:left;color:var(--text);padding:0;
  display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.prop-card:hover{transform:translateY(-6px);border-color:var(--gold);
  box-shadow:0 20px 46px rgba(198,160,74,.28)}
.pc-img{display:block;width:100%;aspect-ratio:4/3;background-size:cover;
  background-position:center;filter:brightness(.82);
  transition:filter .18s ease,transform .4s ease}
.prop-card:hover .pc-img{filter:brightness(1);transform:scale(1.04)}
.pc-body{position:relative;padding:13px 14px 8px;flex:1 1 auto}
.pc-seg{display:inline-block;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
  font-weight:700;color:#0d1117;padding:3px 9px;border-radius:20px;margin-bottom:9px;
  background:linear-gradient(135deg,var(--gold-2),var(--gold))}
.pc-name{display:block;font-size:15px;font-weight:700;line-height:1.25}
.pc-meta{display:block;color:var(--muted);font-size:12px;margin-top:5px;letter-spacing:.3px}
.pc-meta strong{color:var(--gold-2);font-weight:700}
.pc-go{display:flex;align-items:center;gap:6px;padding:0 14px 15px;font-size:11.5px;
  font-weight:700;letter-spacing:.6px;color:var(--gold);text-transform:uppercase}
.cover-hint{margin-top:26px;color:var(--muted);font-size:12.5px;letter-spacing:.4px}

/* ---------- Viewer ---------- */
#panorama{position:fixed;inset:0;z-index:1;background:#05070a}
.vignette{position:fixed;inset:0;z-index:2;pointer-events:none;
  box-shadow:inset 0 0 220px 60px rgba(0,0,0,.55)}

/* ---------- Top bar ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;
  gap:16px;padding:14px 20px;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,10,14,.92),rgba(7,10,14,0))}
.topbar .brand,.topbar .top-actions{pointer-events:auto}
.scene-meta{margin-left:auto;text-align:center;pointer-events:none;line-height:1.15}
.scene-title{font-weight:700;letter-spacing:.4px;font-size:16px}
.scene-progress{font-size:11px;color:var(--gold);letter-spacing:2px;margin-top:2px}
.top-actions{margin-left:auto;display:flex;gap:9px}
.icon-btn{width:42px;height:42px;border-radius:11px;cursor:pointer;
  border:1px solid var(--line);background:rgba(20,26,33,.7);color:var(--text);
  font-size:18px;line-height:1;display:grid;place-items:center;backdrop-filter:blur(8px);
  transition:background .15s,border-color .15s,color .15s,transform .1s}
.icon-btn:hover{background:var(--gold);color:#0d1117;border-color:var(--gold)}
.icon-btn.active{background:var(--gold);color:#0d1117;border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(198,160,74,.2)}
.icon-btn:active{transform:scale(.94)}

/* ---------- Bottom dock ---------- */
.dock{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:20;
  display:flex;align-items:center;gap:10px;max-width:96vw}
.nav-arrow{flex:0 0 auto;width:46px;height:46px;border-radius:50%;cursor:pointer;
  border:1px solid var(--line);background:rgba(13,17,23,.78);color:var(--text);
  font-size:24px;line-height:1;display:grid;place-items:center;backdrop-filter:blur(10px);
  box-shadow:var(--shadow);transition:background .15s,color .15s,transform .1s}
.nav-arrow:hover{background:var(--gold);color:#0d1117}
.nav-arrow:active{transform:scale(.92)}
.thumbs{display:flex;gap:9px;padding:9px;border-radius:16px;
  background:rgba(13,17,23,.72);border:1px solid var(--line);backdrop-filter:blur(12px);
  box-shadow:var(--shadow);overflow-x:auto;scrollbar-width:none}
.thumbs::-webkit-scrollbar{display:none}
.thumb{position:relative;width:100px;height:64px;border-radius:11px;overflow:hidden;
  cursor:pointer;flex:0 0 auto;border:2px solid transparent;
  transition:border-color .15s,transform .15s}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.72)}
.thumb span{position:absolute;left:0;right:0;bottom:0;padding:4px 7px;font-size:10.5px;
  font-weight:600;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent);letter-spacing:.2px}
.thumb:hover{transform:translateY(-3px)}
.thumb:hover img{filter:brightness(.9)}
.thumb.active{border-color:var(--gold)}
.thumb.active img{filter:brightness(1.05)}

/* ---------- Floor plan ---------- */
.floorplan{position:fixed;right:18px;bottom:96px;z-index:20;width:270px;
  background:rgba(13,17,23,.82);border:1px solid var(--line);border-radius:14px;
  backdrop-filter:blur(12px);box-shadow:var(--shadow);overflow:hidden}
.fp-head{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;
  font-size:11px;letter-spacing:2.5px;color:var(--muted);border-bottom:1px solid var(--line);
  text-transform:uppercase}
.fp-toggle{background:none;border:none;color:var(--muted);cursor:pointer;font-size:18px;line-height:1}
.fp-body{padding:12px}
.floorplan.collapsed .fp-body{display:none}
#fpSvg{width:100%;height:auto;display:block}
.fp-wall{fill:rgba(198,160,74,.05);stroke:var(--gold);stroke-width:3}
.fp-div{stroke:rgba(255,255,255,.22);stroke-width:2}
.fp-door{stroke:rgba(13,17,23,.9);stroke-width:4}
.fp-label{fill:var(--muted);font-size:11px;text-anchor:middle;font-family:inherit;
  letter-spacing:.4px}
.fp-marker{cursor:pointer}
.fp-marker circle.dot{fill:var(--gold);stroke:#0d1117;stroke-width:1.5;transition:r .15s}
.fp-marker.active circle.dot{fill:var(--gold-2);r:7}
.fp-marker .pulse{fill:var(--gold);opacity:0}
.fp-marker.active .pulse{opacity:.4;animation:pulse 2s infinite ease-out}
.fp-marker:hover circle.dot{r:7.5}

/* ---------- Info panel ---------- */
.info-panel{position:fixed;top:0;right:0;height:100%;width:372px;max-width:92vw;z-index:30;
  background:var(--panel);border-left:1px solid var(--line);box-shadow:var(--shadow);
  padding:60px 28px 28px;overflow-y:auto;transform:translateX(105%);
  transition:transform .38s cubic-bezier(.4,0,.2,1)}
.info-panel.open{transform:translateX(0)}
.info-close{position:absolute;top:14px;right:18px;background:none;border:none;
  color:var(--muted);font-size:30px;cursor:pointer;line-height:1}
.info-badge{display:inline-block;font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:#0d1117;background:linear-gradient(135deg,var(--gold-2),var(--gold));
  padding:4px 12px;border-radius:20px;font-weight:700}
.info-panel h2{font-size:25px;font-weight:800;margin-top:14px}
.info-loc{color:var(--gold);margin-top:5px;letter-spacing:.4px;font-size:14px}
.info-price{font-size:30px;font-weight:800;color:var(--gold-2);margin-top:16px}
.info-specs{list-style:none;margin:20px 0;border-top:1px solid var(--line)}
.info-specs li{display:flex;justify-content:space-between;padding:12px 2px;
  border-bottom:1px solid var(--line);font-size:14px}
.info-specs li span{color:var(--muted)}
.info-specs li strong{color:var(--text)}
.info-desc{color:var(--muted);font-size:13.5px;line-height:1.7}
.info-desc strong{color:var(--text)}
.btn-cta{display:block;text-align:center;text-decoration:none;margin-top:14px;padding:14px;
  border-radius:12px;font-weight:700;color:#0d1117;
  background:linear-gradient(135deg,var(--gold-2),var(--gold));transition:transform .15s}
.btn-cta:hover{transform:translateY(-2px)}
.btn-cta.ghost{background:transparent;color:var(--gold);border:1px solid var(--gold)}
.info-foot{margin-top:26px;color:var(--muted);font-size:12px;line-height:1.8;
  border-top:1px solid var(--line);padding-top:18px}
.info-foot strong{color:var(--gold)}
.info-foot .credit{color:#6b737c;font-size:11px}

/* ---------- Custom nav hotspot ---------- */
.hs-nav{width:48px;height:48px;transform:translate(-50%,-50%);cursor:pointer;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle,rgba(227,197,121,.96),rgba(198,160,74,.5));
  box-shadow:0 0 0 6px rgba(198,160,74,.18),0 6px 16px rgba(0,0,0,.5);
  animation:hs 2.2s infinite ease-out}
.hs-nav::after{content:"";width:15px;height:15px;border-right:3px solid #0d1117;
  border-bottom:3px solid #0d1117;transform:rotate(-45deg);margin-left:-4px}
.hs-nav:hover{filter:brightness(1.12)}
.hs-tip{position:absolute;bottom:122%;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:#0d1117;color:var(--text);padding:5px 11px;border-radius:8px;font-size:12px;
  border:1px solid var(--gold);opacity:0;transition:opacity .15s;pointer-events:none}
.hs-nav:hover .hs-tip{opacity:1}

/* ---------- Loader ---------- */
.loader{position:fixed;inset:0;z-index:35;display:grid;place-items:center;
  background:rgba(5,7,10,.55);backdrop-filter:blur(2px)}
.spinner{width:46px;height:46px;border-radius:50%;
  border:4px solid rgba(198,160,74,.25);border-top-color:var(--gold);
  animation:spin 1s linear infinite}

/* ---------- Animations ---------- */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes kenburns{from{transform:scale(1.15) translate(0,0)}
  to{transform:scale(1.28) translate(-2%,-2%)}}
@keyframes hs{0%{box-shadow:0 0 0 6px rgba(198,160,74,.18),0 6px 16px rgba(0,0,0,.5)}
  70%{box-shadow:0 0 0 22px rgba(198,160,74,0),0 6px 16px rgba(0,0,0,.5)}
  100%{box-shadow:0 0 0 6px rgba(198,160,74,0),0 6px 16px rgba(0,0,0,.5)}}
@keyframes pulse{0%{r:6;opacity:.45}100%{r:18;opacity:0}}

/* Hide Pannellum default chrome */
.pnlm-panorama-info,.pnlm-load-button,.pnlm-orientation-button{display:none !important}

/* ---------- Responsive ---------- */
@media (max-width:640px){
  .floorplan{width:150px;right:10px;bottom:150px}
  .fp-label{font-size:8.5px}
  .scene-meta{margin:0 auto}
  .scene-title{font-size:14px}
  .brand.small .brand-name{display:none}
  .dock{bottom:14px;gap:7px;width:96vw}
  .nav-arrow{width:40px;height:40px;font-size:20px}
  .thumb{width:78px;height:50px}
  .brand-tag{letter-spacing:3px}
  .prop-grid{grid-template-columns:repeat(2,1fr);gap:11px;margin-top:22px}
  .pc-body{padding:10px 11px 13px}
  .pc-name{font-size:13.5px}
  .cover-inner{max-width:100%}
}
@media (max-width:380px){
  .prop-grid{grid-template-columns:1fr}
}