:root {
            --primary-blue: #002f34;
            --jd-orange: #ff6b00;
            --call-green: #28a745;
            --call-red: #dc3545;
        }

        body { font-family: 'Roboto', sans-serif; background-color: #f8f9fa; }

        /* Header & Nav */
        .navbar { background: white; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        .nav-phone { color: var(--call-red); font-weight: bold; font-size: 1.2rem; }

        /* Search Section */
        .hero-section {
            background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1581094288338-2314dddb7bc3?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
            background-size: cover; background-position: center;
            padding: 80px 0; color: white; text-align: center;
        }

        .search-container {
            background: white; padding: 20px; border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2); max-width: 900px; margin: 0 auto;
        }

        /* Listing Cards */
        .listing-card {
            background: white; border: 1px solid #ddd; border-radius: 8px;
            transition: 0.3s; margin-bottom: 20px; overflow: hidden;
        }
        .listing-card:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.1); transform: translateY(-3px); }
        .rating-badge { background: #388e3c; color: white; padding: 2px 8px; border-radius: 4px; font-size: 0.9rem; }
        .verified-tick { color: #007bff; margin-left: 5px; }

        /* CTA Buttons */
        .btn-call { 
            background-color: var(--call-green); color: white; font-weight: bold; 
            border-radius: 50px; padding: 10px 20px; border: none;
        }
        .btn-call:hover { background-color: #218838; color: white; }
        
        .btn-enquiry {
            background-color: var(--call-red); color: white; font-weight: bold;
            border-radius: 50px; padding: 10px 20px; border: none;
        }

        /* Sticky Mobile Footer Call Button */
        .mobile-call-bar {
            position: fixed; bottom: 0; width: 100%; background: white;
            display: none; padding: 10px; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); z-index: 1000;
        }

        @media (max-width: 768px) {
            .mobile-call-bar { display: flex; justify-content: center; }
            .hero-section { padding: 40px 0; }
        }

        .category-icon { font-size: 2rem; color: var(--primary-blue); margin-bottom: 10px; }
        .category-box { 
            background: white; padding: 20px; border-radius: 10px; 
            text-align: center; cursor: pointer; transition: 0.3s;
            border: 1px solid #eee;
        }
        .category-box:hover { border-color: var(--jd-orange); }