/* ===== Solana City Realty — Sunset Luxe × Grand Exchange ===== */
:root{
  --bg:#0e0c12; --bg-2:#16131c; --surface:#1c1824; --line:#2a2533;
  --gold:#e8b54a; --gold-deep:#c9a06a; --pink:#ff5c8a;
  --text:#f3ece0; --muted:#b3a99c;
  --sunset:linear-gradient(90deg,#e8b54a,#ff5c8a);
  --pix:"Pixelify Sans","Courier New",monospace;
  --radius:12px; --maxw:1200px;
}
@font-face{font-family:"Pixelify Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("assets/fonts/pixelify-sans.woff2") format("woff2")}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.5}
.serif{font-family:"Times New Roman",Georgia,serif}
.pix{font-family:var(--pix)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.grad-text{background:var(--sunset);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Buttons — luxury */
.btn{display:inline-block;padding:13px 26px;border-radius:8px;font-size:13px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;cursor:pointer;border:none;text-align:center}
.btn-primary{background:var(--sunset);color:#1a1117}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn-primary:hover{filter:brightness(1.07)}
.btn-ghost:hover{border-color:var(--gold)}

/* Buttons — pixel / Grand Exchange */
.pix-btn{font-family:var(--pix);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:13px;
  color:#160f04;cursor:pointer;background:linear-gradient(#f2c862,#d49a30);border:2px solid #0c0810;border-radius:6px;
  padding:11px 18px;box-shadow:inset 1px 1px 0 rgba(255,255,255,.55),inset -2px -2px 0 rgba(0,0,0,.3)}
.pix-btn.stone{background:linear-gradient(#5a5360,#3c3645);color:#f3ece0}
.pix-btn:hover{filter:brightness(1.08)}

/* Bevel / slot / coin / orb */
.bevel{background:linear-gradient(#221c2a,#1a1622);border:2px solid #0c0810;border-radius:8px;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.08),inset -2px -2px 0 rgba(0,0,0,.55)}
.slot{background:#14101a;border:2px solid #0c0810;border-radius:6px;display:flex;align-items:center;justify-content:center;
  box-shadow:inset 2px 2px 6px rgba(0,0,0,.7),inset -1px -1px 0 rgba(255,255,255,.05)}
.coin{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;vertical-align:-5px;
  background:radial-gradient(circle at 35% 30%,#ffe39a,#d49a30);border:2px solid #0c0810;color:#160f04;font-size:12px}
.orb{width:54px;height:54px;border-radius:50%;border:2px solid #0c0810;position:relative;display:flex;align-items:center;justify-content:center;font-size:18px;
  background:radial-gradient(circle at 35% 30%,#ffe39a,#e8b54a 45%,#9c7a1e);
  box-shadow:inset -3px -3px 6px rgba(0,0,0,.45),inset 3px 3px 5px rgba(255,255,255,.25)}
.orb.pinkish{background:radial-gradient(circle at 35% 30%,#ffd0e0,#ff5c8a 45%,#a01e4a)}
.orb .num{position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);background:#0c0810;border:1px solid #3a3340;
  color:#ffe39a;font-family:var(--pix);font-weight:700;font-size:11px;padding:1px 7px;border-radius:9px}

/* Nav */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:24px;padding:14px 24px;
  border-bottom:1px solid var(--line);background:rgba(14,12,18,.88);backdrop-filter:blur(8px);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.16em;font-size:14px}
.nav-links{display:flex;gap:20px;margin-left:8px;flex-wrap:wrap}
.nav-links a{color:var(--muted);font-size:12.5px;letter-spacing:.13em;text-transform:uppercase}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.icon{width:18px;height:18px;stroke:var(--muted);fill:none;stroke-width:1.6;cursor:pointer}
.icon:hover{stroke:var(--text)}
.wallet{font-family:var(--pix);background:var(--sunset);color:#1a1117;border:none;font-weight:700;
  padding:9px 18px;border-radius:30px;font-size:12.5px;cursor:pointer;white-space:nowrap}
.soon{font-size:9px;opacity:.7;text-transform:uppercase;letter-spacing:.1em;vertical-align:super}

/* Footer */
.foot{border-top:1px solid var(--line);margin-top:80px;padding:40px 24px;color:var(--muted);font-size:13px}
.foot-inner{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.foot a:hover{color:var(--text)}
.foot-disclaimer{width:100%;font-size:11px;opacity:.7;margin-top:8px;line-height:1.5}

/* Toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--surface);
  border:1px solid var(--line);color:var(--text);padding:12px 20px;border-radius:30px;font-size:13px;font-family:var(--pix);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:100;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Hero */
.hero{position:relative;min-height:78vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:60px 20px 40px;overflow:hidden}
.hero-glow{position:absolute;left:50%;bottom:-30%;transform:translateX(-50%);width:1100px;height:760px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,92,138,.30),rgba(232,181,74,.14) 45%,transparent 72%);pointer-events:none}
.crest{position:relative;width:118px;height:140px;margin-bottom:18px}
.wordmark{position:relative;font-size:clamp(34px,7vw,76px);letter-spacing:.06em;margin:0;line-height:1;font-weight:600}
.subwordmark{position:relative;letter-spacing:.62em;font-size:clamp(10px,1.6vw,15px);color:var(--gold-deep);margin:14px 0 0;padding-left:.62em}
.tagline{position:relative;max-width:620px;color:var(--muted);font-size:15px;margin:22px auto 0}
.hero-cta{position:relative;display:flex;gap:14px;margin-top:30px;flex-wrap:wrap;justify-content:center}
.hero-stats{position:relative;display:flex;gap:34px;margin-top:42px;flex-wrap:wrap;justify-content:center}
.orb-wrap{text-align:center}
.orb-lbl{font-size:9px;color:var(--muted);margin-top:14px;letter-spacing:.12em}

/* Sections */
.section{padding:48px 24px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.section-title{font-size:24px;font-weight:700;margin:0 0 22px}
.see-all{color:var(--gold);font-size:13px;font-family:var(--pix)}

/* Cards (featured + browse) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .15s,border-color .15s}
.card:hover{transform:translateY(-4px);border-color:var(--gold)}
.card-media{position:relative;aspect-ratio:4/3;overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover}
.tile-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.tile-slot{width:64px;height:64px}
.badge{position:absolute;top:10px;left:10px;font-family:var(--pix);background:rgba(14,12,18,.85);border:1px solid var(--line);
  color:var(--text);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:6px}
.price-chip{position:absolute;bottom:10px;left:10px;font-family:var(--pix);background:var(--sunset);color:#1a1117;
  font-weight:700;font-size:12px;padding:4px 10px;border-radius:6px}
.card-body{padding:14px 16px}
.card-title{font-size:15px;font-weight:700;margin:0 0 4px;font-family:Georgia,serif}
.card-loc{color:var(--muted);font-size:12.5px;font-family:var(--pix)}
.card-specs{color:var(--muted);font-size:12px;margin-top:8px;display:flex;gap:12px;flex-wrap:wrap;font-family:var(--pix)}

/* Category tiles */
.cat-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.cat-tile{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2);
  padding:18px;display:flex;align-items:center;gap:14px;font-weight:700;letter-spacing:.04em}
.cat-tile::before{content:"";position:absolute;inset:0;background:var(--sunset);opacity:.08;transition:opacity .15s}
.cat-tile:hover::before{opacity:.18}
.cat-ico{position:relative;width:54px;height:54px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.cat-ico svg{width:42px;height:42px}
.cat-tile span{position:relative}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.step{padding:22px}
.step-n{font-family:var(--pix);font-size:15px;color:var(--gold)}
.step h3{margin:8px 0 6px;font-size:17px}
.step p{color:var(--muted);font-size:13.5px;margin:0}
.step em{color:var(--gold-deep);font-style:normal}

/* Map — landing decorative */
.map-section{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center}
@media(max-width:720px){.map-section{grid-template-columns:1fr;justify-items:center;text-align:center}}
.map-frame{position:relative;width:260px;height:260px;border:5px solid #6b5a2a;border-radius:10px;overflow:hidden;
  box-shadow:inset 0 0 0 2px #0c0810,0 0 0 2px #0c0810}
.map-frame svg{width:100%;height:100%;display:block}
.map-ui{position:absolute;background:linear-gradient(#3a3445,#251f2e);border:2px solid #0c0810;border-radius:4px;color:#f3ece0;
  font-family:var(--pix);font-weight:700;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:14px}
.map-copy h2{font-size:24px;margin:0 0 10px}
.map-copy p{color:var(--muted);margin:0 0 18px;max-width:420px}

/* Closing */
.closing{text-align:center}
.closing-sub{color:var(--muted);margin:0 0 22px}

/* Filter bar */
.filterbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:26px}
.field{font-family:var(--pix);background:var(--bg-2);border:1px solid var(--line);color:var(--text);border-radius:8px;
  padding:10px 12px;font-size:13px;min-width:150px}
.field:focus{outline:none;border-color:var(--gold)}
.result-count{color:var(--muted);font-size:13px;margin-left:auto;font-family:var(--pix)}
.empty{color:var(--muted);text-align:center;padding:40px}

/* Detail */
.detail{display:grid;grid-template-columns:1.3fr 1fr;gap:34px;align-items:start}
@media(max-width:820px){.detail{grid-template-columns:1fr}}
.gallery .main-media{aspect-ratio:16/10;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.gallery .main-media img{width:100%;height:100%;object-fit:cover}
.gallery .main-media .tile-ph{width:100%;height:100%}
.thumbs{display:flex;gap:10px;margin-top:10px}
.thumbs button{width:84px;aspect-ratio:4/3;border-radius:8px;overflow:hidden;border:1px solid var(--line);cursor:pointer;padding:0;background:none}
.thumbs button.active{border-color:var(--gold)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.badge-inline{font-family:var(--pix);display:inline-block;background:var(--bg-2);border:1px solid var(--line);color:var(--muted);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:6px}
.detail-title{font-size:30px;margin:14px 0 4px;font-family:Georgia,serif}
.detail-loc{color:var(--muted);font-family:var(--pix)}
.detail-price{font-size:30px;font-weight:700;margin:20px 0;font-family:Georgia,serif}
.spec-row{display:flex;gap:26px;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:16px 0;margin:18px 0;color:var(--muted);font-size:14px;font-family:var(--pix)}
.spec-row b{display:block;color:var(--text);font-size:18px}
.detail-desc{color:var(--muted);line-height:1.7}
.buy-box{margin-top:24px;padding:18px}
.buy-box .ge-label{font-family:var(--pix);color:var(--gold);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
.buy-row{display:flex;gap:12px;flex-wrap:wrap}
.seller-note{color:var(--muted);font-size:12px;margin-top:14px;font-family:var(--pix)}
.notfound{text-align:center;padding:80px 20px;color:var(--muted)}

/* List form */
.listform{display:flex;flex-direction:column;gap:16px;margin-top:24px}
.listform label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);font-family:var(--pix)}
.form-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.listform textarea.field{resize:vertical;font-family:var(--pix)}
.hint{font-size:11px;color:var(--gold-deep)}
.listform .pix-btn{align-self:flex-start;margin-top:6px}
.form-success{padding:30px;margin-top:24px;text-align:center}
.form-success h2{margin:0 0 8px}
.form-success p{color:var(--muted)}
.form-success em{color:var(--gold-deep);font-style:normal}

/* Map page */
.map-layout{display:grid;grid-template-columns:auto minmax(260px,1fr);gap:28px;align-items:start;margin-top:20px}
@media(max-width:1040px){.map-layout{grid-template-columns:1fr}}
.map-stage{display:flex;justify-content:center}
.map-frame-lg{width:min(720px,92vw);height:auto;aspect-ratio:680/470}
.map-svg{position:absolute;inset:0}
.map-svg svg{width:100%;height:100%;display:block}
.map-svg .lbl{font-family:var(--pix);font-size:12px;font-weight:500;fill:#243018;paint-order:stroke;stroke:#f3ecd9;stroke-width:3px;stroke-linejoin:round}
.map-svg .lblw{font-family:var(--pix);font-size:11px;font-weight:500;fill:#dff1f4;paint-order:stroke;stroke:#10333f;stroke-width:3px;stroke-linejoin:round}
.map-svg .cap{font-family:var(--pix);font-size:11px;fill:#e9e0c8}
.map-marquee{position:relative}
.map-marquee::before{content:"";position:absolute;left:50%;top:42%;width:780px;height:540px;max-width:96vw;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,92,138,.16),rgba(232,181,74,.08) 50%,transparent 72%);pointer-events:none;z-index:0}
.map-marquee>*{position:relative;z-index:1}
.map-pins{position:absolute;inset:0;z-index:3}
.pin{position:absolute;width:24px;height:32px;transform:translate(-50%,-100%);background:none;border:none;padding:0;cursor:pointer}
.pin-svg{display:block;filter:drop-shadow(0 2px 2px rgba(0,0,0,.55));transition:transform .12s}
.pin:hover{z-index:6}
.pin:hover .pin-svg,.pin.active .pin-svg{transform:scale(1.14);transform-origin:50% 100%}
.pin-count{position:absolute;top:-3px;right:-4px;background:#0c0810;color:#ffe39a;font-family:var(--pix);font-size:9px;border:1px solid #3a3340;border-radius:8px;padding:0 4px;line-height:1.5}
.pin-label{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:var(--pix);font-size:10px;color:#fff;background:rgba(12,8,16,.92);border:1px solid var(--line);padding:2px 7px;border-radius:5px;opacity:0;pointer-events:none;transition:opacity .12s}
.pin:hover .pin-label,.pin.active .pin-label{opacity:1}
.pin-feat::before{content:"";position:absolute;left:50%;bottom:11px;width:24px;height:24px;margin-left:-12px;border-radius:50%;border:2px solid #e8b54a;opacity:.5;animation:pinpulse 2.2s ease-out infinite;pointer-events:none}
@keyframes pinpulse{0%{transform:scale(.6);opacity:.6}100%{transform:scale(1.5);opacity:0}}
.map-panel{padding:18px;min-height:220px}
.map-panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px}
.map-panel-head h2{margin:0;font-size:20px}
.map-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-bottom:16px}
.hood-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.hood-chip{font-family:var(--pix);background:var(--bg-2);border:1px solid var(--line);color:var(--muted);border-radius:20px;padding:7px 13px;font-size:12px;cursor:pointer}
.hood-chip:hover{color:var(--text);border-color:var(--gold)}
.hood-chip.active{background:var(--sunset);color:#1a1117;border-color:transparent}