/* =====================================================
   BADABROKER: COMPLETE BACKGROUND LAYER (CSS only, no images)
   Part 1: your original backgrounds. Part 2: upgrades + fixes.
   Load AFTER your layout CSS.
===================================================== */
:root{--black:#070706;--black-soft:#11110e;--gold:#c9a45c;--gold-light:#ead49a;--cream:#f5f0e5;--white:#fff}

body{margin:0;font-family:"DM Sans",Arial,sans-serif;color:#171714;
background:radial-gradient(circle at 10% 10%,rgba(201,164,92,.12),transparent 25%),radial-gradient(circle at 90% 30%,rgba(201,164,92,.08),transparent 30%),#f5f0e5}

.hero{position:relative;min-height:100vh;overflow:hidden;display:flex;align-items:center;color:#fff;
background:radial-gradient(circle at 15% 20%,rgba(201,164,92,.20),transparent 28%),radial-gradient(circle at 85% 75%,rgba(201,164,92,.15),transparent 30%),radial-gradient(circle at 50% 100%,rgba(255,255,255,.04),transparent 35%),linear-gradient(135deg,#050504 0%,#0d0d0a 35%,#18160f 65%,#080807 100%)}
.hero::before{content:"";position:absolute;width:650px;height:650px;top:-250px;right:-180px;border-radius:50%;background:radial-gradient(circle,rgba(201,164,92,.28) 0%,rgba(201,164,92,.10) 30%,transparent 70%);filter:blur(10px);pointer-events:none}
.hero::after{content:"";position:absolute;width:450px;height:450px;bottom:-220px;left:-100px;border-radius:50%;background:radial-gradient(circle,rgba(201,164,92,.18),transparent 70%);filter:blur(20px);pointer-events:none}
.hero-content{position:relative;z-index:5}
.hero .container::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:80px 80px;pointer-events:none}
.hero h1{position:relative;z-index:5;font-family:"Playfair Display",Georgia,serif;font-size:clamp(55px,8vw,105px);line-height:.95;letter-spacing:-4px;margin:20px 0;color:#fff;text-shadow:0 5px 35px rgba(0,0,0,.7)}
.hero h1 span{color:var(--gold-light);font-style:italic}
.hero-text::before{content:"";display:block;width:75px;height:2px;margin-bottom:25px;background:linear-gradient(90deg,var(--gold),transparent)}

.hero-search{position:relative;background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);border-radius:4px;overflow:hidden}
.hero-search::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}

.trust-bar{position:relative;background:radial-gradient(circle at 20% 50%,rgba(201,164,92,.12),transparent 25%),linear-gradient(90deg,#090908,#14130e,#090908);border-top:1px solid rgba(201,164,92,.15);border-bottom:1px solid rgba(201,164,92,.15)}

.intro{position:relative;overflow:hidden;background:radial-gradient(circle at 0% 0%,rgba(201,164,92,.18),transparent 30%),radial-gradient(circle at 100% 100%,rgba(201,164,92,.10),transparent 30%),linear-gradient(135deg,#faf7ef,#eee7d9)}
.intro::before{content:"BADA BROKER";position:absolute;left:-30px;bottom:-35px;font-family:"Playfair Display",Georgia,serif;font-size:clamp(70px,12vw,180px);font-weight:bold;color:rgba(0,0,0,.025);white-space:nowrap;pointer-events:none}

.properties{position:relative;background:radial-gradient(circle at 90% 10%,rgba(201,164,92,.12),transparent 25%),#fff}
.property-card{position:relative;background:linear-gradient(145deg,#fff,#f4efe4);border:1px solid rgba(0,0,0,.08);box-shadow:0 20px 50px rgba(0,0,0,.06);transition:transform .35s ease,box-shadow .35s ease}
.property-card:hover{transform:translateY(-10px);box-shadow:0 30px 70px rgba(0,0,0,.13)}
.property-image{position:relative;background:radial-gradient(circle at 30% 30%,rgba(201,164,92,.35),transparent 25%),radial-gradient(circle at 80% 70%,rgba(255,255,255,.08),transparent 25%),linear-gradient(135deg,#171712,#3b3527)}

.about{position:relative;overflow:hidden;background:radial-gradient(circle at 15% 20%,rgba(201,164,92,.20),transparent 25%),radial-gradient(circle at 85% 80%,rgba(201,164,92,.14),transparent 30%),linear-gradient(135deg,#050504,#12110d 50%,#070706)}
.about::before{content:"";position:absolute;width:700px;height:700px;right:-350px;top:-100px;border-radius:50%;border:1px solid rgba(201,164,92,.14);box-shadow:0 0 0 50px rgba(201,164,92,.025),0 0 0 100px rgba(201,164,92,.015)}

.process{background:radial-gradient(circle at 50% 0%,rgba(201,164,92,.15),transparent 30%),linear-gradient(180deg,#f7f3ea,#ebe4d6)}
.faq{position:relative;background:radial-gradient(circle at 100% 50%,rgba(201,164,92,.12),transparent 30%),#faf8f2}

.cta{position:relative;overflow:hidden;text-align:center;color:#fff;background:radial-gradient(circle at 50% 0%,rgba(201,164,92,.28),transparent 35%),radial-gradient(circle at 10% 100%,rgba(201,164,92,.15),transparent 30%),linear-gradient(135deg,#050504,#1a1710,#070706)}
.cta::before{content:"";position:absolute;width:700px;height:700px;top:-450px;left:50%;transform:translateX(-50%);border-radius:50%;border:1px solid rgba(201,164,92,.20);box-shadow:0 0 0 60px rgba(201,164,92,.025),0 0 0 120px rgba(201,164,92,.015)}

.contact{position:relative;background:radial-gradient(circle at 0% 50%,rgba(201,164,92,.15),transparent 30%),linear-gradient(135deg,#f8f4ea,#ece5d6)}
.contact-form{position:relative;background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(245,239,226,.95));border:1px solid rgba(201,164,92,.25);box-shadow:0 30px 70px rgba(0,0,0,.08)}

.footer{position:relative;overflow:hidden;background:radial-gradient(circle at 80% 0%,rgba(201,164,92,.15),transparent 30%),linear-gradient(135deg,#050504,#11100c,#050504)}
.footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}

.whatsapp{background:linear-gradient(135deg,#20c96b,#119447);box-shadow:0 10px 35px rgba(17,148,71,.35)}
.section-label,.eyebrow,.property-type{color:var(--gold)}

@media(max-width:700px){
.hero{background:radial-gradient(circle at 50% 10%,rgba(201,164,92,.18),transparent 35%),linear-gradient(160deg,#050504,#15130e,#070706)}
.hero::before{width:400px;height:400px;right:-220px;top:-100px}
.hero h1{font-size:56px}}

/* ===================== PART 2: UPGRADES + FIXES ===================== */

:root {
    --gold-dark: #8a6a2a; /* readable gold for light sections */
}

/* FIX: fixed backgrounds are janky/ignored on iPhones, and sections
   cover the body anyway */
body {

}

/* FIX: you load Playfair Display but the CSS used Georgia */
.hero h1,
.intro::before {
    font-family: "Playfair Display", Georgia, serif;
}

/* NEW: gold city skyline at the bottom of the hero (pure CSS/SVG, no image file).
   Uses your existing empty <div class="hero-overlay"> */
.hero-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 24vh;
    z-index: 1;
    pointer-events: none;
    opacity: 0.11;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cg fill='%23c9a45c'%3E%3Crect x='0' y='120' width='60' height='80'/%3E%3Crect x='70' y='70' width='50' height='130'/%3E%3Crect x='130' y='100' width='70' height='100'/%3E%3Crect x='210' y='40' width='55' height='160'/%3E%3Crect x='275' y='90' width='60' height='110'/%3E%3Crect x='345' y='130' width='80' height='70'/%3E%3Crect x='435' y='60' width='50' height='140'/%3E%3Crect x='495' y='100' width='70' height='100'/%3E%3Crect x='575' y='20' width='60' height='180'/%3E%3Crect x='645' y='85' width='55' height='115'/%3E%3Crect x='710' y='125' width='75' height='75'/%3E%3Crect x='795' y='55' width='55' height='145'/%3E%3Crect x='860' y='95' width='65' height='105'/%3E%3Crect x='935' y='35' width='50' height='165'/%3E%3Crect x='995' y='110' width='70' height='90'/%3E%3Crect x='1075' y='70' width='55' height='130'/%3E%3Crect x='1140' y='120' width='60' height='80'/%3E%3C/g%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
    -webkit-mask-image: linear-gradient(to top, #000 30%, transparent);
    mask-image: linear-gradient(to top, #000 30%, transparent);
}

/* OPTIONAL: real photo behind the hero. Add images/hero.jpg (under 300 KB),
   then uncomment:
.hero {
    background:
        linear-gradient(rgba(5,5,4,.78), rgba(5,5,4,.88)),
        url("../images/hero.jpg") center / cover no-repeat;
}
*/

/* NEW: soft dot texture on light sections for depth */
.intro,
.process,
.contact {
    background-image:
        radial-gradient(rgba(138,106,42,0.10) 1px, transparent 1px),
        radial-gradient(circle at 0% 0%, rgba(201,164,92,0.18), transparent 30%),
        linear-gradient(135deg, #faf7ef, #eee7d9);
    background-size: 28px 28px, auto, auto;
}

/* NEW: smooth fade between dark and light sections */
.trust-bar + .intro::after,
.cta + .contact::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 80px;
    background: linear-gradient(rgba(7,7,6,0.10), transparent);
    pointer-events: none;
}

/* FIX: gold (#c9a45c) on cream fails contrast (~2:1). Darker gold on light sections */
.intro .section-label,
.process .section-label,
.properties .section-label,
.faq .section-label,
.contact .section-label,
.property-type {
    color: var(--gold-dark);
}

/* FIX: JS inline styles were blocking the card hover lift and slowing it.
   Reveal is now class-based (see script patch). */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease, box-shadow .35s ease;
}
.reveal.visible {
    opacity: 1;
    transform: none;
}
.property-card.visible:hover {
    transform: translateY(-10px);
}

/* FIX: missing property photos show a broken-image icon; hide it so the
   gradient placeholder shows instead */
.property-image img {
    background: transparent;
    color: transparent;
}

/* PERF: blur and backdrop-filter are heavy on budget Android phones */
@media (max-width: 700px) {
    .hero::before,
    .hero::after { filter: none; }
    .hero-search {
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }
    .hero-overlay { height: 16vh; }
    .hero h1 { letter-spacing: -2px; } /* -4px hurts readability on small screens */
}

/* ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {
    .reveal, .property-card { transition: none; }
    .reveal { opacity: 1; transform: none; }
}

/* Needed by the filter script */
.property-card[hidden]{display:none!important}

/* MAP SECTION */
.map-section{position:relative;background:radial-gradient(circle at 100% 0%,rgba(201,164,92,.15),transparent 30%),linear-gradient(135deg,#faf7ef,#eee7d9)}
.map-section .section-label{color:var(--gold-dark)}
.map-wrap{margin:30px 0;border:1px solid rgba(201,164,92,.35);border-radius:4px;overflow:hidden;box-shadow:0 25px 60px rgba(0,0,0,.12)}
.map-wrap iframe{display:block;width:100%;height:420px;border:0}
@media(max-width:700px){.map-wrap iframe{height:300px}}

/* Big "Contact for Details" in place of price */
.contact-price strong{display:block;font-family:"Playfair Display",Georgia,serif;font-size:clamp(20px,2.2vw,26px);font-weight:700;line-height:1.15;color:#171714}

/* FLOATING CALL + WHATSAPP BUTTONS (side by side) */
.float-actions{position:fixed;right:20px;bottom:20px;z-index:999;display:flex;align-items:center;gap:12px}
.float-actions .whatsapp{position:static;margin:0}
.call-float{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#11110e;background:linear-gradient(135deg,#ead49a,#c9a45c);box-shadow:0 10px 35px rgba(201,164,92,.4);transition:transform .25s ease}
.call-float:hover{transform:translateY(-3px)}
@media(max-width:700px){.float-actions{right:14px;bottom:14px;gap:10px}.call-float{width:52px;height:52px}}

/* About image label: fit the longer THEBADABROKER text */
.about-image-card{max-width:calc(100% - 30px)}
.about-image-card strong{font-size:clamp(18px,1.8vw,24px);white-space:nowrap}