:root {
    --primary: #c49a3d;
    --dark: #0a0a0b;
    --light: #ffffff;
    --gray: #f8f9fa;
    --text-muted: #666;
    --shadow: 0 15px 35px rgba(0,0,0,0.1);
}

body { font-family: 'Montserrat', sans-serif; margin: 0; color: var(--dark); line-height: 1.6; background: var(--light); scroll-behavior: smooth; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 25px; }
h1, h2, h3 { font-family: 'Playfair Display', serif; margin-bottom: 20px; }
.center { text-align: center; }
.shadow { box-shadow: var(--shadow); }

/* Buttons */
.btn-primary { background: var(--primary); color: white; padding: 18px 40px; text-decoration: none; border-radius: 4px; font-weight: 700; display: inline-block; border: none; cursor: pointer; transition: 0.3s; }
.btn-primary:hover { background: #ab8533; transform: translateY(-2px); }
.btn-primary.full { width: 100%; box-sizing: border-box; }
.btn-secondary { border: 1px solid white; color: white; padding: 17px 40px; text-decoration: none; border-radius: 4px; display: inline-block; margin-left: 15px; font-weight: 600; transition: 0.3s; }
.btn-secondary:hover { background: white; color: var(--dark); }

/* Sections */
section { padding: 100px 0; }
.section-title { font-size: 2.8rem; font-weight: 900; position: relative; }
.section-title::after { content: ''; display: block; width: 60px; height: 3px; background: var(--primary); margin-top: 15px; }
.section-title.center::after { margin: 15px auto; }

/* Hero */
.hero { height: 95vh; background: url('assets/villa-3d-2.jpg') center/cover no-repeat fixed; display: flex; align-items: center; justify-content: center; position: relative; color: white; }
.hero-overlay { position: absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.8)); }
.hero-content { z-index: 2; text-align: center; }
.hero h1 { font-size: 4rem; font-weight: 900; line-height: 1.1; }
.hero h1 span { color: var(--primary); font-style: italic; }
.subtitle { font-size: 1.3rem; max-width: 900px; margin: 0 auto 40px; font-weight: 300; }

/* Specs Card Grid */
.specs-section { background: var(--dark); color: white; padding: 80px 0; }
.specs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.spec-card { text-align: center; padding: 30px; border: 1px solid rgba(196,154,61,0.3); border-radius: 4px; }
.spec-card .label { display: block; color: var(--primary); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
.spec-card .value { font-size: 1.5rem; font-weight: 700; font-family: 'Playfair Display', serif; display: block; }
.spec-card .sub { font-size: 0.85rem; color: #888; font-weight: 300; }

/* Grids */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }

/* Location */
.check-list { list-style: none; padding: 0; }
.check-list li { margin-bottom: 20px; padding-left: 30px; position: relative; font-size: 1.1rem; }
.check-list li::before { content: '✓'; position: absolute; left: 0; color: var(--primary); font-weight: bold; }
.map-link { color: var(--primary); font-weight: bold; text-decoration: none; border-bottom: 1px solid; }
.video-container { border-radius: 12px; overflow: hidden; }
.caption { font-size: 0.85rem; color: var(--text-muted); margin-top: 10px; }

/* Feature Cards */
.feature-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.f-img { height: 230px; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; position: relative; }
.f-img::after { content: ''; position: absolute; width:100%; height:100%; background: rgba(0,0,0,0.2); }
.play-icon { z-index: 2; width: 50px; height: 50px; background: var(--primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; font-weight: bold; }
.f-text { padding: 25px; }
.f-text h3 { font-size: 1.3rem; margin-bottom: 10px; }
.f-text p { font-size: 0.9rem; color: var(--text-muted); }

/* Concept Cards */
.concept-card { position: relative; border-radius: 12px; overflow: hidden; cursor: pointer; }
.concept-card img { width: 100%; height: 450px; object-fit: cover; transition: 0.5s; }
.concept-card:hover img { transform: scale(1.05); }
.c-overlay { position: absolute; bottom:0; left:0; width:100%; padding: 40px; background: linear-gradient(transparent, rgba(0,0,0,0.9)); color: white; }

/* Photos */
.gallery-section { background: #f4f4f4; }
.thumb { width: 100%; height: 250px; object-fit: cover; border-radius: 4px; cursor: pointer; transition: 0.3s; }
.thumb:hover { filter: brightness(0.8); }

/* Form */
.form-section { background: url('https://images.unsplash.com/photo-1510414842594-a61c69b5ae57?auto=format&fit=crop&w=1500&q=80') center/cover fixed; position: relative; }
.form-section::before { content: ''; position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.6); }
.form-wrapper { max-width: 550px; margin: 0 auto; background: white; padding: 50px; border-radius: 8px; position: relative; z-index: 2; }
.form-group { margin-bottom: 20px; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 15px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; font-family: inherit; font-size: 1rem; }
.form-group textarea { height: 100px; }

/* Modal */
.modal { display: none; position: fixed; z-index: 10000; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.9); align-items: center; justify-content: center; }
.modal-content { background: white; padding: 40px; border-radius: 12px; max-width: 800px; width: 90%; position: relative; }
.close-modal { position: absolute; top:15px; right: 20px; font-size: 30px; cursor: pointer; color: #999; }
.calc-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; margin-top: 30px; }
.calc-results { background: var(--gray); padding: 35px; border-radius: 8px; border-left: 5px solid var(--primary); }
.calc-results strong { font-size: 1.8rem; color: var(--primary); }
.calc-note { font-size: 0.8rem; color: #999; margin-top: 20px; font-style: italic; }

/* Lightbox */
.lightbox { display: none; position: fixed; z-index: 20000; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.95); align-items: center; justify-content: center; }
.lightbox-content { max-width: 90%; max-height: 85%; }
.close { position: absolute; top:30px; right:50px; color:white; font-size:50px; cursor:pointer; }

/* Animations */
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
.pulse { animation: pulse 2s infinite; }
.fade-in { animation: fadeIn 1.5s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

footer { padding: 40px 0; text-align: center; background: #000; color: #555; }

@media (max-width: 900px) {
    .specs-grid { grid-template-columns: 1fr 1fr; }
    .grid-2, .grid-3, .grid-4, .calc-grid { grid-template-columns: 1fr; }
    .hero h1 { font-size: 2.8rem; }
    .btn-secondary { margin-left: 0; margin-top: 15px; width: 100%; box-sizing: border-box; text-align: center; }
}