:root {
    --primary: #1a1a1a;
    --accent: #d4af37; /* Gold Tone */
    --bg: #ffffff;
    --text: #333333;
}

body {
    font-family: 'Inter', sans-serif;
    margin: 0; padding: 0;
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
}

.container { width: 90%; max-width: 800px; margin: auto; }

header { padding: 40px 0; text-align: center; border-bottom: 1px solid #eee; }
h1 { font-weight: 700; letter-spacing: -1px; margin-bottom: 5px; }
.tagline { font-weight: 300; font-style: italic; color: #666; }

.property-hero { padding: 30px 0 10px; }
.badge { display: inline-block; background: var(--primary); color: white; padding: 4px 12px; font-size: 12px; border-radius: 20px; margin-bottom: 10px; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0; }
.grid img { width: 100%; height: 200px; object-fit: cover; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: 0.3s; }
.grid img:hover { transform: scale(1.02); }

.price-box { background: #f9f9f9; padding: 20px; border-radius: 12px; text-align: center; margin: 30px 0; }
.price { display: block; font-size: 28px; font-weight: 700; color: var(--primary); }

.features { list-style: none; padding: 0; }
.features li { padding: 10px 0; border-bottom: 1px solid #eee; }

.cta { display: flex; gap: 10px; margin: 40px 0; }
.btn { flex: 1; text-align: center; padding: 15px; text-decoration: none; border-radius: 8px; font-weight: 500; transition: 0.3s; }
.btn { background: var(--primary); color: white; }
.btn.whatsapp { background: #25d366; }
.btn:hover { opacity: 0.8; }

footer { text-align: center; font-size: 12px; color: #999; padding: 40px 0; }

@media (max-width: 600px) {
    .grid { grid-template-columns: 1fr; }
    .cta { flex-direction: column; }
}