:root {
  --bg:#0e0e0e;
  --panel:#171717;
  --soft:#1F1F1F;
  --text:#eaeaea;
  --muted:#a6a6a6;
  --gold:#c7a76b;
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif; }

a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

.nav { position:sticky; top:0; z-index:20; backdrop-filter: blur(8px); background: rgba(14,14,14,.75); border-bottom:1px solid #222; }
.nav .wrap { max-width:1100px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:16px; }
.nav img.logo { height:28px; width:auto; }
.nav .spacer { flex:1; }
.nav .link { color:#d8d8d8; padding:8px 10px; border-radius:8px; }
.nav .link:hover { background:#222; }

.hero { max-width:1100px; margin:0 auto; padding:36px 20px 8px; text-align:center; }
.hero img { width:220px; height:auto; margin:10px auto 18px; display:block; }
h1.title { font-size:40px; margin:0 0 8px; letter-spacing:.5px; }
p.subtitle { margin:0; color:var(--muted); }

.section { max-width:1100px; margin:0 auto; padding:26px 20px; }
.section h2 { font-size:28px; margin:0 0 14px; }
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap:14px; }
.card { background:var(--panel); border:1px solid #222; border-radius:14px; overflow:hidden; }
.card img { width:100%; height:180px; object-fit:cover; display:block; filter: contrast(1.02) saturate(1.02); }
.card .p { padding:10px 12px; color:#ddd; font-weight:600; }

.footer { border-top:1px solid #222; color:var(--muted); text-align:center; padding:30px 20px 60px; }

/* gallery */
.gallery-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:14px; }
.frame { background:var(--panel); border:1px solid #222; border-radius:16px; overflow:hidden; }
.frame img { width:100%; height:360px; object-fit:cover; opacity:0; transform: translateY(6px) scale(.98); transition: all .6s ease; }
.frame img.visible { opacity:1; transform: translateY(0) scale(1); }
.breadcrumb { margin:0 0 16px; }
.note { color:var(--muted); margin-top:6px; font-size:14px; }
.watermark { position:absolute; bottom:10px; right:12px; background:rgba(255,255,255,.12); color:#eee; padding:3px 6px; border-radius:6px; font-size:12px; }

/* about */
.about { display:grid; grid-template-columns: 1fr 1fr; gap:22px; align-items:center; }
.about img { width:100%; height:auto; border-radius:14px; border:1px solid #222; }
.about p { color:#d8d8d8; line-height:1.55; }

/* contact */
.form { background:var(--panel); border:1px solid #222; border-radius:14px; padding:18px; max-width:680px; }
label { display:block; margin:8px 0 6px; color:#ddd; }
input, textarea { width:100%; padding:12px 12px; border-radius:10px; border:1px solid #2a2a2a; background:#121212; color:#eee; outline:none; }
textarea { min-height:140px; resize:vertical; }
button { margin-top:12px; background:var(--gold); color:#111; font-weight:700; border:0; padding:12px 16px; border-radius:10px; cursor:pointer; }
button:hover { filter: brightness(1.05); }

.badge-row { display:flex; gap:10px; margin-top:10px; }
.badge { background:#1b1b1b; border:1px solid #252525; color:#d8d8d8; padding:8px 10px; border-radius:999px; font-size:14px; }

/* responsive */
@media (max-width: 760px){
  .about { grid-template-columns: 1fr; }
  .hero img { width:160px; }
  h1.title { font-size:32px; }
}


/* --- Added: Gold button + Social icons (RTB3 update) --- */
.btn-gold{
  display:inline-block;
  padding:.75rem 1.15rem;
  border:1px solid #b99550;
  border-radius:9999px;
  font-weight:600;
  text-decoration:none;
  color:#111;
  background:linear-gradient(180deg,#d8b368,#b99550);
  box-shadow:0 2px 10px rgba(185,149,80,.25);
  transition:transform .08s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn-gold:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(185,149,80,.35); }
.btn-gold:active{ transform:translateY(0); opacity:.92; }

.social-row{ display:flex; gap:.75rem; align-items:center; margin:.75rem 0 0; }
.social-icon{
  width:40px; height:40px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#222; border:1px solid #333;
}
.social-icon svg{ width:20px; height:20px; fill:#d8b368; }
.site-footer{ color:#aaa; font-size:.9rem; }