:root{
    --primary:#0D3B66;
    --secondary:#1D4E89;
    --accent:#FFD166;
    --accent-deep:#EFBF3F;
    --ink:#172033;
    --text:#334155;
    --muted:#64748B;
    --soft:#F5F8FC;
    --line:#E4EAF2;
    --white:#FFFFFF;
    --success:#198754;
    --shadow-sm:0 8px 24px rgba(15,23,42,.06);
    --shadow-md:0 18px 45px rgba(15,23,42,.10);
    --radius:20px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:'Poppins',sans-serif;background:#081D35;color:var(--text);line-height:1.65}
a{text-decoration:none}
img{max-width:100%}

/* NAVBAR */
.navbar{
    position:fixed;top:0;left:0;width:100%;z-index:9999;
    padding:11px 0;background:rgba(8,36,64,.78);backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.09);
    transition:.25s ease;
}
.navbar.scrolled{background:rgba(255,255,255,.97);box-shadow:0 8px 30px rgba(15,23,42,.08);border-color:var(--line)}
.navbar-brand{display:flex;align-items:center;gap:11px;color:#fff;font-weight:800;font-size:17px;letter-spacing:.1px}
.navbar-brand:hover{color:#fff}
.navbar.scrolled .navbar-brand{color:#fff}
.brand-logo{width:48px;height:48px;object-fit:contain;border-radius:50%;background:#fff;padding:2px;box-shadow:0 4px 15px rgba(0,0,0,.12)}
.nav-link{color:rgba(255,255,255,.9)!important;font-weight:600;font-size:13px;margin-left:9px;padding:9px 10px!important;border-radius:9px;transition:.2s}
.navbar.scrolled .nav-link{color:#475569!important}
.nav-link:hover{color:var(--accent)!important;background:rgba(255,255,255,.07)}
.navbar.scrolled .nav-link:hover{background:#F1F5F9;color:var(--primary)!important}
.navbar-toggler{border:0;background:#fff!important;border-radius:10px;padding:7px 9px}
.navbar-toggler:focus{box-shadow:none}
.nav-cta{background:var(--accent);color:var(--primary)!important;padding:10px 16px!important;margin-left:12px;border-radius:10px;font-weight:800!important}
.nav-cta:hover{background:#FFE08A!important;color:var(--primary)!important;transform:translateY(-1px)}

/* HERO */
.hero{
    min-height:650px;position:relative;display:flex;align-items:center;
    background:url("/assets/images/building.jpg") center/cover no-repeat;
    padding:140px 15px 115px;overflow:hidden;
}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(5,25,45,.93) 0%,rgba(13,59,102,.82) 52%,rgba(13,59,102,.55) 100%)}
.hero::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-190px;bottom:-270px;background:rgba(255,209,102,.10);filter:blur(1px)}
.hero-content{position:relative;z-index:2;color:#fff;width:100%;max-width:1180px;margin:auto;text-align:left}
.hero-eyebrow{display:inline-flex!important;align-items:center;gap:8px;padding:7px 12px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.08);color:var(--accent)!important;font-size:11px!important;font-weight:800!important;letter-spacing:1.5px!important;margin-bottom:18px!important}
.hero h1{max-width:790px;font-size:58px;font-weight:800;line-height:1.08;letter-spacing:-1.7px;margin-bottom:18px}
.hero p{max-width:690px;font-size:18px;color:rgba(255,255,255,.82);margin-bottom:28px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:32px}
.hero-primary,.hero-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 20px;border-radius:11px;font-size:13px;font-weight:800;transition:.2s}
.hero-primary{background:var(--accent);color:var(--primary)}
.hero-primary:hover{background:#FFE18D;color:var(--primary);transform:translateY(-2px)}
.hero-secondary{border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff}
.hero-secondary:hover{background:#fff;color:var(--primary);transform:translateY(-2px)}
.hero-trust{display:flex;flex-wrap:wrap;gap:20px;color:rgba(255,255,255,.78);font-size:12px;font-weight:600}
.hero-trust span{display:inline-flex;align-items:center;gap:7px}.hero-trust i{color:var(--accent)}

/* FILTER */
.filter-wrapper{position:relative;z-index:10;margin-top:-60px;padding:0 15px}
.filter-box{max-width:1180px;margin:auto;background:#fff;border:1px solid rgba(226,232,240,.85);border-radius:24px;padding:28px;box-shadow:0 22px 60px rgba(15,23,42,.14)}
.filter-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:22px}
.filter-heading h3{color:var(--primary);font-size:21px;font-weight:800;margin-bottom:4px}
.filter-heading p{color:var(--muted);font-size:12px;margin:0}
.filter-heading-badge{font-size:10px;font-weight:800;color:#1E40AF;background:#EFF6FF;border:1px solid #DBEAFE;border-radius:999px;padding:7px 10px;white-space:nowrap}
.form-label{font-size:11px;font-weight:700;color:#475569;margin-bottom:7px}
.form-control,.form-select{min-height:48px;border:1px solid #DCE4EE;border-radius:11px;font-size:13px;color:#334155;box-shadow:none;background-color:#fff}
.form-control:focus,.form-select:focus{border-color:#4D77A7;box-shadow:0 0 0 3px rgba(29,78,137,.09)}
.search-btn{min-height:48px;border:0;border-radius:11px;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;font-weight:800;font-size:13px;transition:.2s;box-shadow:0 8px 20px rgba(13,59,102,.18)}
.search-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(13,59,102,.25);color:#fff}
.reset-btn{min-height:48px;border-radius:11px;font-weight:700;font-size:13px}

/* LISTINGS */
.results-section{padding:65px 0 28px}
.results-header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:27px}
.results-header h2{color:var(--primary);font-size:29px;font-weight:800;margin:0;letter-spacing:-.4px}
.results-count{color:var(--muted);font-size:12px;margin-top:4px}
.results-header .form-select{min-height:40px;font-size:12px;border-radius:9px}
.property-card{height:100%;border:1px solid #E8EDF4;border-radius:19px;overflow:hidden;background:#fff;box-shadow:var(--shadow-sm);transition:.3s ease;display:flex;flex-direction:column}
.property-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:#D4DEEA}
.property-image-wrapper{position:relative;overflow:hidden;background:#EEF2F7}
.property-card img{width:100%;height:245px;object-fit:cover;transition:.55s}
.property-card:hover img{transform:scale(1.045)}
.property-label,.featured-label{position:absolute;top:14px;padding:7px 11px;border-radius:999px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;box-shadow:0 5px 15px rgba(0,0,0,.12)}
.property-label{left:14px;background:#EAF8EF;color:#137044;border:1px solid #CBEBD8}
.featured-label{right:14px;background:var(--accent);color:#6B4C00}
.property-card .card-body{padding:20px;display:flex;flex-direction:column;flex:1}
.property-title{color:var(--primary);font-size:17px;font-weight:800;line-height:1.42;margin-bottom:8px;min-height:48px}
.property-price{color:#1D5FA7;font-size:22px;font-weight:800;margin-bottom:8px;letter-spacing:-.35px}
.property-location{color:var(--muted);font-size:12px;line-height:1.6;margin-bottom:13px;min-height:38px}
.property-info{display:flex;flex-wrap:wrap;gap:7px;border-top:1px solid #EEF2F6;padding-top:13px;margin-top:auto}
.info-item{font-size:10px;background:#F5F8FB;padding:6px 9px;border-radius:7px;color:#526173;font-weight:600}.info-item i{color:#2A69AD;margin-right:4px}
.card-actions{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:16px}
.view-btn{width:100%;margin-top:0;padding:10px 12px;border-radius:9px;background:var(--primary);color:#fff;font-size:12px;font-weight:700;border:0;transition:.2s}
.view-btn:hover{background:var(--secondary);color:#fff;transform:translateY(-1px)}
.inquire-btn{display:flex;align-items:center;justify-content:center;width:42px;border-radius:9px;background:#EAF8EF;color:#16834F;border:1px solid #D5F0DF;transition:.2s}
.inquire-btn:hover{background:#198754;color:#fff;transform:translateY(-1px)}

.section-heading{text-align:center;margin:62px 0 30px}.section-title{color:var(--primary);font-size:30px;font-weight:800;letter-spacing:-.4px}.section-subtitle{color:var(--muted);font-size:13px;margin-top:6px}
.no-results{background:#fff;border:1px solid var(--line);border-radius:20px;padding:55px 20px;text-align:center;box-shadow:var(--shadow-sm)}
.no-results i{font-size:44px;color:#AAB8C8;margin-bottom:14px}.no-results h4{color:var(--primary);font-weight:800}.no-results p{color:var(--muted);font-size:13px}

/* WHY US */
.why-section{background:linear-gradient(135deg,#0A3358,#1D4E89);color:#fff;padding:75px 0;margin-top:65px;position:relative;overflow:hidden}
.why-section::before{content:"";position:absolute;width:380px;height:380px;border-radius:50%;right:-130px;top:-190px;background:rgba(255,255,255,.05)}
.why-section h2{font-weight:800;letter-spacing:-.4px}.why-card{height:100%;padding:24px 18px;border-radius:17px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10)}
.why-card i{color:var(--accent);font-size:31px;margin-bottom:15px}.why-card h5{font-weight:800;margin-bottom:8px}.why-card p{color:rgba(255,255,255,.75);font-size:12px;margin:0}

/* CONTACT CTA */
.contact-cta{padding:70px 15px;background:#F7F9FC}
.contact-cta-card{max-width:1180px;margin:auto;background:#fff;border:1px solid var(--line);border-radius:24px;padding:34px;display:flex;align-items:center;justify-content:space-between;gap:24px;box-shadow:var(--shadow-sm)}
.contact-cta h3{color:var(--primary);font-weight:800;font-size:25px;margin-bottom:7px}.contact-cta p{margin:0;color:var(--muted);font-size:13px;max-width:650px}
.contact-actions{display:flex;gap:10px;flex-wrap:wrap}.contact-action{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 16px;border-radius:10px;font-size:12px;font-weight:800}.contact-action.primary{background:var(--primary);color:#fff}.contact-action.primary:hover{background:var(--secondary);color:#fff}.contact-action.whatsapp{background:#EAF8EF;color:#16834F}.contact-action.whatsapp:hover{background:#198754;color:#fff}

/* FOOTER */
footer{background:#071F35;color:#fff;padding:48px 0 22px}.footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:14px}.footer-logo{width:60px;height:60px;object-fit:contain;border-radius:50%;background:#fff;padding:3px}.footer-brand strong{font-size:17px}.footer-copy{color:rgba(255,255,255,.64);font-size:12px;max-width:360px}.footer-heading{font-size:12px;font-weight:800;color:#fff;margin-bottom:14px;text-transform:uppercase;letter-spacing:.7px}.footer-links{list-style:none;padding:0;margin:0}.footer-links li{margin-bottom:8px}.footer-links a,.footer-contact{color:rgba(255,255,255,.68);font-size:12px}.footer-links a:hover{color:var(--accent)}.footer-contact i{width:21px;color:var(--accent)}.footer-bottom{border-top:1px solid rgba(255,255,255,.09);margin-top:32px;padding-top:18px;color:rgba(255,255,255,.48);font-size:10px;text-align:center}

/* HELP */
.floating-help{position:fixed;right:20px;bottom:20px;z-index:99999}.help-btn{width:56px;height:56px;border:0;border-radius:50%;background:linear-gradient(135deg,var(--primary),#2D6BAB);color:#fff;font-size:20px;box-shadow:0 12px 30px rgba(13,59,102,.32);transition:.2s}.help-btn:hover{transform:scale(1.05)}
.help-card{position:absolute;right:0;bottom:70px;width:320px;background:rgba(255,255,255,.98);backdrop-filter:blur(15px);border:1px solid var(--line);border-radius:17px;padding:20px;box-shadow:0 20px 50px rgba(0,0,0,.18);display:none}.help-card.show{display:block;animation:fadeUp .25s ease}.help-card h5{color:var(--primary);font-weight:800;font-size:15px}.help-card p{color:var(--muted);font-size:11px}.help-card i{color:#2366AA;width:22px}.help-card a{color:#1D5FA7}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}




/* =========================================================
   CUSTOMER EXPERIENCE / MOTION SYSTEM
   ========================================================= */

:root{
    --motion-ease:cubic-bezier(.22,1,.36,1);
}

/* Hero entrance */
.hero-content{
    isolation:isolate;
}

.hero-eyebrow{
    animation:
        heroReveal .75s var(--motion-ease) .08s both;
}

.hero h1{
    animation:
        heroReveal .85s var(--motion-ease) .18s both;
}

.hero p{
    animation:
        heroReveal .85s var(--motion-ease) .30s both;
}

.hero-actions{
    animation:
        heroReveal .85s var(--motion-ease) .42s both;
}

.hero-trust{
    animation:
        heroReveal .85s var(--motion-ease) .54s both;
}

@keyframes heroReveal{
    from{
        opacity:0;
        transform:translateY(24px);
        filter:blur(7px);
    }
    to{
        opacity:1;
        transform:translateY(0);
        filter:blur(0);
    }
}

/* Premium button sweep */
.hero-primary,
.search-btn,
.view-btn,
.contact-action.primary{
    position:relative;
    overflow:hidden;
    isolation:isolate;
}

.hero-primary::after,
.search-btn::after,
.view-btn::after,
.contact-action.primary::after{
    content:"";
    position:absolute;
    top:-80%;
    left:-55%;
    width:42%;
    height:260%;
    z-index:-1;
    transform:rotate(24deg);
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.30),
        transparent
    );
    transition:left .7s var(--motion-ease);
}

.hero-primary:hover::after,
.search-btn:hover::after,
.view-btn:hover::after,
.contact-action.primary:hover::after{
    left:120%;
}

/* =========================================================
   HERO PROPERTY SCENE
   ========================================================= */

.hero-property-scene{
    position:absolute;
    z-index:1;
    top:103px;
    right:max(18px,calc((100vw - 1180px)/2));
    width:430px;
    height:430px;
    pointer-events:none;
    opacity:.92;
    transform:
        translate3d(
            calc(var(--hero-x,0px) * .28),
            calc(var(--hero-y,0px) * .28),
            0
        );
    transition:transform .22s ease-out;
}

.hero-orbit{
    position:absolute;
    inset:29px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.17);
    box-shadow:
        inset 0 0 55px rgba(37,99,235,.05),
        0 0 38px rgba(255,255,255,.03);
    animation:heroOrbit 28s linear infinite;
}

.hero-orbit.orbit-two{
    inset:78px;
    border-style:dashed;
    border-color:rgba(255,209,102,.25);
    animation:heroOrbitReverse 36s linear infinite;
}

.hero-orbit::before,
.hero-orbit::after{
    content:"";
    position:absolute;
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 20px rgba(255,209,102,.86);
}

.hero-orbit::before{
    top:23px;
    left:86px;
}

.hero-orbit::after{
    right:43px;
    bottom:42px;
    width:7px;
    height:7px;
    background:#93C5FD;
    box-shadow:0 0 18px rgba(147,197,253,.82);
}

.orbit-two::before{
    top:56px;
    left:3px;
    width:7px;
    height:7px;
    background:#86EFAC;
    box-shadow:0 0 18px rgba(134,239,172,.72);
}

.orbit-two::after{
    right:8px;
    bottom:65px;
    width:7px;
    height:7px;
    background:#C4B5FD;
    box-shadow:0 0 18px rgba(196,181,253,.75);
}

@keyframes heroOrbit{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
}

@keyframes heroOrbitReverse{
    from{transform:rotate(360deg)}
    to{transform:rotate(0deg)}
}

.hero-property-icon{
    position:absolute;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:center;
    width:52px;
    height:52px;
    border-radius:17px;
    border:1px solid rgba(255,255,255,.17);
    background:rgba(255,255,255,.09);
    backdrop-filter:blur(11px);
    -webkit-backdrop-filter:blur(11px);
    box-shadow:0 15px 32px rgba(0,0,0,.18);
    font-size:18px;
}

.hero-property-icon.house{
    top:38px;
    right:69px;
    color:var(--accent);
    animation:propertyFloatOne 5.8s ease-in-out infinite;
}

.hero-property-icon.pin{
    left:8px;
    top:173px;
    color:#93C5FD;
    animation:propertyFloatTwo 6.8s ease-in-out infinite;
}

.hero-property-icon.key{
    right:10px;
    bottom:108px;
    color:#FDE68A;
    animation:propertyFloatThree 6.2s ease-in-out infinite;
}

.hero-property-icon.city{
    left:70px;
    bottom:42px;
    color:#C4B5FD;
    animation:propertyFloatFour 7.2s ease-in-out infinite;
}

@keyframes propertyFloatOne{
    0%,100%{transform:translate(0,0) rotate(-3deg)}
    50%{transform:translate(-8px,10px) rotate(5deg)}
}
@keyframes propertyFloatTwo{
    0%,100%{transform:translate(0,0)}
    50%{transform:translate(11px,-12px)}
}
@keyframes propertyFloatThree{
    0%,100%{transform:translate(0,0) rotate(2deg)}
    50%{transform:translate(-9px,-9px) rotate(-5deg)}
}
@keyframes propertyFloatFour{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-13px)}
}

/* Stylized city silhouette */
.hero-skyline{
    position:absolute;
    left:50%;
    bottom:54px;
    width:270px;
    height:136px;
    transform:translateX(-50%);
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:7px;
    opacity:.55;
}

.hero-building{
    position:relative;
    width:38px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:7px 7px 2px 2px;
    background:linear-gradient(
        180deg,
        rgba(255,255,255,.13),
        rgba(13,59,102,.24)
    );
    overflow:hidden;
}

.hero-building::before{
    content:"";
    position:absolute;
    inset:10px 7px;
    background:
        radial-gradient(
            circle,
            rgba(255,209,102,.76) 0 1.6px,
            transparent 2.2px
        )
        0 0 / 12px 16px;
    opacity:.52;
}

.hero-building.b1{height:58px}
.hero-building.b2{height:91px;width:44px}
.hero-building.b3{height:73px}
.hero-building.b4{height:115px;width:49px}
.hero-building.b5{height:82px;width:42px}

/* Scroll reveal. JS adds the class, so content remains visible if JS is off. */
.reveal-ready{
    opacity:0;
    transform:translateY(28px);
    transition:
        opacity .72s var(--motion-ease),
        transform .72s var(--motion-ease);
    transition-delay:var(--reveal-delay,0ms);
}

.reveal-ready.reveal-visible{
    opacity:1;
    transform:translateY(0);
}

/* Property cards: premium desktop tilt + light sweep */
.property-card{
    --tilt-x:0deg;
    --tilt-y:0deg;
    --card-lift:0px;
    position:relative;
    transform:
        perspective(1000px)
        rotateX(var(--tilt-x))
        rotateY(var(--tilt-y))
        translateY(var(--card-lift));
    transform-style:preserve-3d;
    will-change:transform;
}

.property-card:hover{
    --card-lift:-7px;
    transform:
        perspective(1000px)
        rotateX(var(--tilt-x))
        rotateY(var(--tilt-y))
        translateY(var(--card-lift));
}

.property-card::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:4;
    pointer-events:none;
    border-radius:inherit;
    opacity:0;
    background:
        radial-gradient(
            circle at var(--shine-x,50%) var(--shine-y,25%),
            rgba(255,255,255,.28),
            transparent 35%
        );
    transition:opacity .22s ease;
}

.property-card:hover::after{
    opacity:.55;
}

.property-card .property-image-wrapper,
.property-card .card-body{
    position:relative;
    z-index:2;
}

/* Property image gets an elegant dark-to-clear sweep */
.property-image-wrapper::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(
        125deg,
        rgba(255,255,255,.16),
        transparent 28%,
        transparent 70%,
        rgba(13,59,102,.08)
    );
    transform:translateX(-110%);
    transition:transform .75s var(--motion-ease);
}

.property-card:hover .property-image-wrapper::after{
    transform:translateX(0);
}

/* Why-us cards feel alive without being playful */
.why-card{
    transition:
        transform .3s var(--motion-ease),
        background .3s ease,
        border-color .3s ease;
}

.why-card:hover{
    transform:translateY(-6px);
    background:rgba(255,255,255,.09);
    border-color:rgba(255,209,102,.28);
}

.why-card i{
    transition:
        transform .45s var(--motion-ease),
        filter .3s ease;
}

.why-card:hover i{
    transform:translateY(-4px) rotate(-5deg) scale(1.08);
    filter:drop-shadow(0 8px 14px rgba(255,209,102,.22));
}

/* Search panel breathes in after hero */
.filter-box{
    animation:
        filterArrival
        .85s
        var(--motion-ease)
        .62s
        both;
}

@keyframes filterArrival{
    from{
        opacity:0;
        transform:translateY(30px) scale(.985);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

/* Floating help draws attention once, not continuously distracting */
.help-btn{
    animation:
        helpAttention
        5.5s
        ease-in-out
        2.5s
        infinite;
}

@keyframes helpAttention{
    0%,82%,100%{
        transform:translateY(0) scale(1);
        box-shadow:0 12px 30px rgba(13,59,102,.32);
    }
    88%{
        transform:translateY(-4px) scale(1.04);
        box-shadow:
            0 15px 34px rgba(13,59,102,.36),
            0 0 0 8px rgba(37,99,235,.08);
    }
    94%{
        transform:translateY(0) scale(1);
    }
}

/* Mobile keeps motion visible but lightweight */
@media(max-width:991px){
    .hero-property-scene{
        top:auto;
        right:18px;
        bottom:58px;
        width:315px;
        height:315px;
        opacity:.56;
    }

    .hero-orbit{
        inset:18px;
    }

    .hero-orbit.orbit-two{
        inset:62px;
    }

    .hero-skyline{
        width:205px;
        height:105px;
        bottom:35px;
    }

    .hero-building{
        width:29px;
    }

    .hero-building.b1{height:42px}
    .hero-building.b2{height:68px;width:34px}
    .hero-building.b3{height:54px}
    .hero-building.b4{height:84px;width:37px}
    .hero-building.b5{height:61px;width:32px}

    .hero-property-icon{
        width:42px;
        height:42px;
        border-radius:14px;
        font-size:14px;
    }

    .hero-property-icon.house{
        top:25px;
        right:49px;
    }

    .hero-property-icon.pin{
        top:125px;
    }

    .hero-property-icon.key{
        bottom:79px;
    }

    .hero-property-icon.city{
        left:48px;
        bottom:30px;
    }
}

@media(max-width:768px){
    .hero{
        min-height:620px;
    }

    .hero-content{
        padding-bottom:115px;
    }

    .hero-property-scene{
        left:50%;
        right:auto;
        bottom:35px;
        width:300px;
        height:210px;
        transform:translateX(-50%);
        opacity:.52;
    }

    .hero-orbit{
        left:8px;
        right:8px;
        top:-38px;
        bottom:-62px;
        border-radius:50%;
    }

    .hero-orbit.orbit-two{
        left:45px;
        right:45px;
        top:-10px;
        bottom:-35px;
    }

    .hero-skyline{
        bottom:0;
        width:210px;
        height:90px;
        opacity:.74;
    }

    .hero-property-icon.house{
        top:-24px;
        right:40px;
    }

    .hero-property-icon.pin{
        left:5px;
        top:52px;
    }

    .hero-property-icon.key{
        right:6px;
        bottom:36px;
    }

    .hero-property-icon.city{
        left:42px;
        bottom:11px;
    }

    /* Touch screens get scale/lift, not 3D pointer tilt */
    .property-card,
    .property-card:hover{
        --tilt-x:0deg!important;
        --tilt-y:0deg!important;
    }
}

@media(max-width:420px){
    .hero{
        min-height:645px;
    }

    .hero-content{
        padding-bottom:120px;
    }

    .hero-property-scene{
        width:270px;
    }
}

/* Accessibility: all decorative motion becomes static */
@media(prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto;
    }

    .hero-eyebrow,
    .hero h1,
    .hero p,
    .hero-actions,
    .hero-trust,
    .filter-box,
    .hero-orbit,
    .hero-property-icon,
    .help-btn{
        animation:none!important;
    }

    .reveal-ready{
        opacity:1!important;
        transform:none!important;
        transition:none!important;
    }

    .property-card,
    .property-card:hover,
    .why-card,
    .why-card:hover{
        transform:none!important;
        transition:none!important;
    }
}


/* =========================================================
   LIGHT / DARK THEME
   ========================================================= */
.theme-toggle{
    display:inline-flex;align-items:center;justify-content:center;gap:7px;
    min-width:42px;height:42px;padding:0 11px;margin-left:8px;border:1px solid rgba(255,255,255,.18);
    border-radius:11px;background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:13px;font-weight:700;
    cursor:pointer;transition:.2s ease;
}
.theme-toggle:hover{background:rgba(255,255,255,.16);color:var(--accent);transform:translateY(-1px)}
.theme-toggle:focus-visible{outline:3px solid rgba(255,209,102,.35);outline-offset:2px}
.navbar.scrolled .theme-toggle{background:#F8FAFC;border-color:#E2E8F0;color:var(--primary)}
.navbar.scrolled .theme-toggle:hover{background:#EEF2F7;color:var(--primary)}
.theme-label{display:none}

html[data-theme="dark"]{
    color-scheme:dark;
    --ink:#E8EEF7;
    --text:#D8E2EF;
    --muted:#9FB0C4;
    --soft:#111A26;
    --line:#283649;
    --white:#121C28;
    --shadow-sm:0 8px 24px rgba(0,0,0,.26);
    --shadow-md:0 18px 45px rgba(0,0,0,.38);
}
html[data-theme="dark"] body{background:#0B121B;color:var(--text)}
html[data-theme="dark"] .navbar.scrolled{background:rgba(10,18,28,.97);border-color:#273548;box-shadow:0 8px 30px rgba(0,0,0,.30)}
html[data-theme="dark"] .navbar.scrolled .navbar-brand{color:#F5F8FC}
html[data-theme="dark"] .navbar.scrolled .nav-link{color:#C8D5E4!important}
html[data-theme="dark"] .navbar.scrolled .nav-link:hover{background:#172435;color:var(--accent)!important}
html[data-theme="dark"] .navbar.scrolled .theme-toggle{background:#152130;border-color:#314158;color:#F4F7FB}
html[data-theme="dark"] .navbar.scrolled .theme-toggle:hover{background:#1D2D40;color:var(--accent)}
html[data-theme="dark"] .navbar-toggler{background:#E9EFF6!important}
html[data-theme="dark"] .navbar.scrolled .navbar-collapse{background:#101A26;border-color:#2A394D}

html[data-theme="dark"] .filter-wrapper,
html[data-theme="dark"] .results-section,
html[data-theme="dark"] .contact-cta{background:#0B121B}
html[data-theme="dark"] .filter-box,
html[data-theme="dark"] .property-card,
html[data-theme="dark"] .no-results,
html[data-theme="dark"] .contact-cta-card,
html[data-theme="dark"] .help-card{background:#121C28;border-color:#283649;color:#D8E2EF}
html[data-theme="dark"] .filter-heading h3,
html[data-theme="dark"] .results-header h2,
html[data-theme="dark"] .property-title,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .no-results h4,
html[data-theme="dark"] .contact-cta h3,
html[data-theme="dark"] .help-card h5{color:#EAF1FA}
html[data-theme="dark"] .filter-heading-badge{background:#122842;border-color:#24466C;color:#9AC7FF}
html[data-theme="dark"] .form-label{color:#C7D4E3}
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select{background-color:#0E1722;border-color:#304055;color:#E6EDF6}
html[data-theme="dark"] .form-control::placeholder{color:#718399}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus{background-color:#101A27;border-color:#5D8CC0;box-shadow:0 0 0 3px rgba(93,140,192,.15);color:#fff}
html[data-theme="dark"] .form-select option{background:#101A27;color:#E6EDF6}
html[data-theme="dark"] .reset-btn{background:#162231;border-color:#314158;color:#D8E2EF}
html[data-theme="dark"] .reset-btn:hover{background:#1D2C3D;color:#fff}
html[data-theme="dark"] .results-header .form-select{background-color:#121C28}
html[data-theme="dark"] .property-card:hover{border-color:#3A4B61}
html[data-theme="dark"] .property-image-wrapper{background:#172331}
html[data-theme="dark"] .property-price{color:#73B6FF}
html[data-theme="dark"] .property-info{border-top-color:#273548}
html[data-theme="dark"] .info-item{background:#172331;color:#BAC9DA}
html[data-theme="dark"] .info-item i{color:#79B9FF}
html[data-theme="dark"] .property-label{background:#163526;border-color:#28573E;color:#72D79C}
html[data-theme="dark"] .featured-label{color:#4A3400}
html[data-theme="dark"] .inquire-btn{background:#123021;border-color:#24523A;color:#65D492}
html[data-theme="dark"] .inquire-btn:hover{background:#198754;color:#fff}
html[data-theme="dark"] .why-section{background:linear-gradient(135deg,#071A2A,#123451)}
html[data-theme="dark"] .why-card{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.09)}
html[data-theme="dark"] .contact-action.whatsapp{background:#123021;color:#6ED69A}
html[data-theme="dark"] footer{background:#050C13}
html[data-theme="dark"] .help-card a{color:#78B8FF}
html[data-theme="dark"] .help-card hr{border-color:#304055}
html[data-theme="dark"] .help-card .text-muted{color:#8EA0B5!important}
html[data-theme="dark"] .text-muted{color:#91A3B8!important}
html[data-theme="dark"] .bg-white{background-color:#121C28!important}
html[data-theme="dark"] .border{border-color:#304055!important}

@media(max-width:991px){
    .navbar-collapse{background:rgba(8,36,64,.98);margin-top:10px;padding:13px;border-radius:14px;box-shadow:0 15px 30px rgba(0,0,0,.18)}
    .navbar.scrolled .navbar-collapse{background:#fff;border:1px solid var(--line)}
    .nav-link,.nav-cta{margin-left:0!important;margin-bottom:4px}.nav-cta{text-align:center;margin-top:4px}
    .theme-toggle{width:100%;height:44px;margin:4px 0 6px;justify-content:flex-start;padding:0 12px;background:rgba(255,255,255,.08)}
    .theme-label{display:inline}
    .hero{min-height:590px;padding-top:130px}.hero h1{font-size:48px}.filter-wrapper{margin-top:-48px}
}

@media(max-width:768px){
    .navbar{padding:8px 0}.brand-logo{width:41px;height:41px}.navbar-brand{font-size:14px}
    .hero{min-height:555px;padding:120px 15px 90px}.hero h1{font-size:37px;letter-spacing:-.8px}.hero p{font-size:14px}.hero-trust{gap:12px;font-size:10px}
    .hero-actions{display:grid;grid-template-columns:1fr}.hero-primary,.hero-secondary{width:100%}
    .filter-wrapper{margin-top:-40px;padding:0 10px}.filter-box{padding:18px;border-radius:19px}.filter-heading{display:block}.filter-heading-badge{display:inline-block;margin-top:8px}
    .results-section{padding-top:50px}.results-header{align-items:flex-start;flex-direction:column}.results-header h2{font-size:24px}.results-header>div:last-child{width:100%}.results-header .form-select{width:100%;min-width:0!important}
    .property-card img{height:230px}.section-title{font-size:25px}.why-section{padding:55px 0}.contact-cta{padding:50px 10px}.contact-cta-card{display:block;padding:24px}.contact-cta h3{font-size:21px}.contact-actions{display:grid;grid-template-columns:1fr;margin-top:20px}.contact-action{width:100%}
    .help-card{width:min(290px,calc(100vw - 30px));right:-5px}
}

@media(max-width:420px){.property-card img{height:215px}.hero h1{font-size:33px}.footer-brand strong{font-size:15px}}

/* =========================================================
   PAGINATION
   ========================================================= */
.listing-pagination{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-top:34px;
    padding:18px 20px;
    background:#fff;
    border:1px solid #E7ECF3;
    border-radius:16px;
    box-shadow:0 8px 25px rgba(15,23,42,.05);
}
.pagination-summary{
    color:#64748B;
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
}
.pagination-controls{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:7px;
}
.pagination-link{
    min-width:40px;
    height:40px;
    padding:0 12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    border:1px solid #DCE4EE;
    border-radius:10px;
    background:#fff;
    color:#334155;
    font-size:13px;
    font-weight:700;
    transition:.2s;
}
.pagination-link:hover{
    border-color:#1D4E89;
    background:#EFF6FF;
    color:#0D3B66;
    transform:translateY(-1px);
}
.pagination-link.active{
    background:#0D3B66;
    border-color:#0D3B66;
    color:#fff;
    box-shadow:0 6px 16px rgba(13,59,102,.18);
}
.pagination-link.disabled{
    opacity:.42;
    pointer-events:none;
}
.pagination-arrow{
    min-width:auto;
    padding:0 14px;
}
.pagination-ellipsis{
    min-width:26px;
    text-align:center;
    color:#94A3B8;
    font-weight:700;
}

html[data-theme="dark"] .listing-pagination{
    background:#121C28;
    border-color:#283649;
    box-shadow:0 8px 25px rgba(0,0,0,.16);
}
html[data-theme="dark"] .pagination-summary{
    color:#91A3B8;
}
html[data-theme="dark"] .pagination-link{
    background:#0E1722;
    border-color:#304055;
    color:#D8E2EF;
}
html[data-theme="dark"] .pagination-link:hover{
    background:#172435;
    border-color:#50749C;
    color:#fff;
}
html[data-theme="dark"] .pagination-link.active{
    background:#FFD166;
    border-color:#FFD166;
    color:#0D243B;
}
html[data-theme="dark"] .pagination-ellipsis{
    color:#718399;
}

@media(max-width:768px){
    .listing-pagination{
        flex-direction:column;
        align-items:stretch;
        padding:15px;
    }
    .pagination-summary{
        text-align:center;
    }
    .pagination-controls{
        justify-content:center;
    }
    .pagination-arrow span{
        display:none;
    }
    .pagination-arrow{
        width:40px;
        padding:0;
    }
}


/* Buyer lot-size options */
.lot-size-options{
    margin-top:13px;
    padding:11px 12px;
    border:1px solid #E4EAF2;
    border-radius:11px;
    background:#F8FAFD;
}
.lot-size-label{
    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:7px;
    color:#526173;
    font-size:9px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.45px;
}
.lot-size-label i{
    color:#2A69AD;
}
.lot-size-list{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}
.lot-size-chip{
    display:inline-flex;
    align-items:center;
    min-height:27px;
    padding:4px 8px;
    border-radius:30px;
    background:#EAF2FF;
    color:#174C82;
    font-size:9px;
    font-weight:800;
}
html[data-theme="dark"] .lot-size-options{
    background:#101A26;
    border-color:#29394D;
}
html[data-theme="dark"] .lot-size-label{
    color:#91A3B8;
}
html[data-theme="dark"] .lot-size-label i{
    color:#7FB4E5;
}
html[data-theme="dark"] .lot-size-chip{
    background:#172B40;
    color:#B8D9F5;
}



/* Customer homepage navbar: preserve the original fixed-on-scroll behavior.
   The extra .home-navbar class prevents CSS from other App Router pages from
   overriding this navbar after client-side navigation. */
.home-navbar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    width:100%!important;
    z-index:9999!important;
    padding:11px 0;
    background:rgba(8,36,64,.78);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(255,255,255,.09);
    transition:.25s ease;
}
.home-navbar.scrolled{
    background:rgba(8,29,53,.98);
    box-shadow:0 8px 30px rgba(0,0,0,.20);
    border-color:rgba(255,255,255,.09);
}
/* The brand must remain white at all times, including anchor/scroll restoration. */
.home-navbar .navbar-brand,
.home-navbar .navbar-brand span,
.home-navbar.scrolled .navbar-brand,
.home-navbar.scrolled .navbar-brand span{color:#FFFFFF!important}
.home-navbar.scrolled .nav-link{color:rgba(255,255,255,.90)!important}
.home-navbar.scrolled .nav-link:hover{background:rgba(255,255,255,.10);color:#FFFFFF!important}
.home-navbar.scrolled .theme-toggle{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#FFFFFF}
.home-navbar.scrolled .theme-toggle:hover{background:rgba(255,255,255,.14);color:var(--accent)}
html[data-theme="dark"] .home-navbar.scrolled{background:rgba(8,29,53,.98);border-color:rgba(255,255,255,.09);box-shadow:0 8px 30px rgba(0,0,0,.30)}
html[data-theme="dark"] .home-navbar.scrolled .navbar-brand,
html[data-theme="dark"] .home-navbar.scrolled .navbar-brand span{color:#FFFFFF!important}
html[data-theme="dark"] .home-navbar.scrolled .nav-link{color:rgba(255,255,255,.90)!important}
html[data-theme="dark"] .home-navbar.scrolled .nav-link:hover{background:rgba(255,255,255,.10);color:var(--accent)!important}
html[data-theme="dark"] .home-navbar.scrolled .theme-toggle{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#FFFFFF}
@media(max-width:991px){
    .home-navbar.scrolled .navbar-collapse,
    html[data-theme="dark"] .home-navbar.scrolled .navbar-collapse{background:rgba(8,29,53,.98);border:1px solid rgba(255,255,255,.10)}
}
@media(max-width:768px){
    .home-navbar{padding:8px 0}
}

/* Next.js mobile navigation stability — visual styling stays original. */
.customer-navbar-collapse{visibility:visible!important}
@media(min-width:992px){
    .navbar-expand-lg .customer-navbar-collapse{display:flex!important;flex-basis:auto!important}
}
@media(max-width:991.98px){
    .customer-navbar-collapse{display:none!important}
    .customer-navbar-collapse.show{display:block!important}
}

/* Mobile presentation: keep the original PHP spacing. */
@media(max-width:768px){
    .navbar{
        background:rgba(8,36,64,.96);
    }
    .hero p{
        max-width:300px;
    }
}