:root {
          --accent: #06b0a2;
          --accent2: #3893d3;
          --accent-glow: rgba(6,176,162,0.35);
        }

        [data-theme="dark"] {
          --bg: #0a0e14;
          --bg2: #0f1520;
          --bg3: #151d2b;
          --glass: rgba(15,21,32,0.7);
          --glass2: rgba(255,255,255,0.04);
          --glass-border: rgba(255,255,255,0.08);
          --text: #e8edf5;
          --text-muted: #7a8599;
          --text-sub: #b0bac9;
          --nav-bg: rgba(10,14,20,0.85);
          --card-bg: rgba(15,21,32,0.8);
          --footer-bg: #060911;
          --shadow: rgba(0,0,0,0.5);
        }

        [data-theme="light"] {
          --bg: #f0f4f8;
          --bg2: #e4eaf2;
          --bg3: #dce4ef;
          --glass: rgba(255,255,255,0.72);
          --glass2: rgba(0,0,0,0.03);
          --glass-border: rgba(0,0,0,0.1);
          --text: #1a2233;
          --text-muted: #6b7a94;
          --text-sub: #3d4f68;
          --nav-bg: rgba(240,244,248,0.88);
          --card-bg: rgba(255,255,255,0.85);
          --footer-bg: #1a2233;
          --shadow: rgba(0,0,0,0.15);
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        html { scroll-behavior: smooth; }

        body {
          font-family: 'DM Sans', sans-serif;
          background: var(--bg);
          color: var(--text);
          transition: background 0.4s, color 0.4s;
          overflow-x: hidden;
        }

        /* ─── HERO BG ─── */
        .hero-bg {
          position: fixed;
          inset: 0;
          z-index: 0;
          background:
            radial-gradient(ellipse 80% 60% at 20% 30%, rgba(6,176,162,0.18) 0%, transparent 60%),
            radial-gradient(ellipse 70% 50% at 80% 70%, rgba(56,147,211,0.15) 0%, transparent 60%),
            url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=1800&auto=format&fit=crop&q=80') center/cover no-repeat;
          transition: opacity 0.4s;
        }

        [data-theme="dark"] .hero-bg::after {
          content: '';
          position: absolute;
          inset: 0;
          background: rgba(10,14,20,0.78);
        }

        [data-theme="light"] .hero-bg::after {
          content: '';
          position: absolute;
          inset: 0;
          background: rgba(240,244,248,0.62);
        }

        /* ─── NAV ─── */
        nav {
          position: fixed;
          top: 0; left: 0; right: 0;
          z-index: 100;
          background: var(--nav-bg);
          backdrop-filter: blur(20px);
          -webkit-backdrop-filter: blur(20px);
          border-bottom: 1px solid var(--glass-border);
          transition: background 0.4s, border-color 0.4s;
        }

        .nav-inner {
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 30px;
          height: 72px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

        .nav-logo {
          display: flex;
          align-items: center;
          gap: 12px;
          text-decoration: none;
        }

        .nav-logo img {
          width: 40px;
          height: 40px;
          object-fit: contain;
          border-radius: 10px;
        }

        .nav-logo span {
          font-family: 'Syne', sans-serif;
          font-weight: 800;
          font-size: 1.4rem;
          background: linear-gradient(135deg, var(--accent), var(--accent2));
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          letter-spacing: -0.02em;
        }

        .nav-links {
          display: flex;
          align-items: center;
          gap: 8px;
          list-style: none;
        }

        .nav-links a {
          display: block;
          padding: 8px 16px;
          text-decoration: none;
          font-size: 0.9rem;
          font-weight: 500;
          color: var(--text-sub);
          border-radius: 8px;
          transition: all 0.25s;
          letter-spacing: 0.01em;
        }

        .nav-links a:hover {
          color: var(--accent);
          background: var(--glass2);
        }

        .nav-right {
          display: flex;
          align-items: center;
          gap: 12px;
        }

        /* Theme toggle */
        .theme-toggle {
          position: relative;
          width: 52px;
          height: 28px;
          cursor: pointer;
        }

        .theme-toggle input { display: none; }

        .theme-track {
          position: absolute;
          inset: 0;
          border-radius: 14px;
          background: var(--glass2);
          border: 1px solid var(--glass-border);
          transition: all 0.3s;
          display: flex;
          align-items: center;
          padding: 3px;
        }

        .theme-thumb {
          width: 22px;
          height: 22px;
          border-radius: 11px;
          background: linear-gradient(135deg, var(--accent), var(--accent2));
          transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          box-shadow: 0 2px 8px var(--accent-glow);
        }

        [data-theme="light"] .theme-thumb {
          transform: translateX(24px);
        }

        .nav-cta {
          padding: 9px 20px;
          background: linear-gradient(135deg, var(--accent), var(--accent2));
          color: #fff;
          text-decoration: none;
          border-radius: 10px;
          font-size: 0.88rem;
          font-weight: 600;
          transition: all 0.3s;
          box-shadow: 0 4px 15px var(--accent-glow);
          white-space: nowrap;
        }

        .nav-cta:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 25px var(--accent-glow);
        }

        /* Mobile menu */
        .hamburger {
          display: none;
          flex-direction: column;
          gap: 5px;
          cursor: pointer;
          padding: 5px;
        }

        .hamburger span {
          width: 24px;
          height: 2px;
          background: var(--text);
          border-radius: 2px;
          transition: all 0.3s;
        }

        /* ─── HERO SECTION ─── */
        main { position: relative; z-index: 1; }

        .hero {
          min-height: 100vh;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          padding: 100px 30px 80px;
        }

        .hero-badge {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 6px 16px;
          background: var(--glass2);
          border: 1px solid var(--glass-border);
          border-radius: 50px;
          font-size: 0.82rem;
          color: var(--accent);
          font-weight: 500;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          margin-bottom: 28px;
          backdrop-filter: blur(10px);
        }

        .hero-badge::before {
          content: '';
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: var(--accent);
          box-shadow: 0 0 8px var(--accent);
          animation: pulse 2s infinite;
        }

        @keyframes pulse {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.4; }
        }

        .hero h1 {
          font-family: 'Syne', sans-serif;
          font-size: clamp(2.8rem, 7vw, 5.5rem);
          font-weight: 800;
          line-height: 1.05;
          letter-spacing: -0.03em;
          max-width: 800px;
          margin-bottom: 24px;
        }

        .hero h1 .grad {
          background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .hero-sub {
          font-size: 1.15rem;
          color: var(--text-sub);
          max-width: 520px;
          line-height: 1.7;
          margin-bottom: 44px;
          font-weight: 300;
        }

        .hero-actions {
          display: flex;
          gap: 14px;
          flex-wrap: wrap;
          justify-content: center;
        }

        .btn-primary {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          padding: 16px 32px;
          background: linear-gradient(135deg, var(--accent), var(--accent2));
          color: #fff;
          text-decoration: none;
          border-radius: 14px;
          font-weight: 600;
          font-size: 1rem;
          transition: all 0.3s;
          box-shadow: 0 8px 30px var(--accent-glow);
        }

        .btn-primary:hover {
          transform: translateY(-3px);
          box-shadow: 0 15px 40px var(--accent-glow);
        }

        .btn-ghost {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          padding: 15px 30px;
          border: 1.5px solid var(--glass-border);
          color: var(--text);
          text-decoration: none;
          border-radius: 14px;
          font-weight: 500;
          font-size: 1rem;
          transition: all 0.3s;
          backdrop-filter: blur(10px);
          background: var(--glass2);
        }

        .btn-ghost:hover {
          border-color: var(--accent);
          color: var(--accent);
          transform: translateY(-3px);
        }

        /* Play Store button */
        .btn-playstore {
          display: inline-flex;
          align-items: center;
          gap: 12px;
          padding: 14px 28px;
          background: var(--card-bg);
          border: 1px solid var(--glass-border);
          border-radius: 14px;
          text-decoration: none;
          color: var(--text);
          backdrop-filter: blur(12px);
          transition: all 0.3s;
          box-shadow: 0 4px 20px var(--shadow);
        }

        .btn-playstore:hover {
          transform: translateY(-3px);
          border-color: var(--accent);
          box-shadow: 0 10px 30px var(--accent-glow);
        }

        .btn-playstore .ps-icon {
          width: 32px;
          height: 32px;
        }

        .btn-playstore .ps-text {
          text-align: left;
        }

        .btn-playstore .ps-text small {
          display: block;
          font-size: 0.7rem;
          color: var(--text-muted);
          text-transform: uppercase;
          letter-spacing: 0.05em;
        }

        .btn-playstore .ps-text strong {
          display: block;
          font-size: 1rem;
          font-weight: 600;
        }

        /* Stats bar */
        .hero-stats {
          display: flex;
          gap: 50px;
          margin-top: 70px;
          padding-top: 40px;
          border-top: 1px solid var(--glass-border);
        }

        .stat {
          text-align: center;
        }

        .stat-num {
          font-family: 'Syne', sans-serif;
          font-size: 2rem;
          font-weight: 800;
          background: linear-gradient(135deg, var(--accent), var(--accent2));
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .stat-label {
          font-size: 0.82rem;
          color: var(--text-muted);
          text-transform: uppercase;
          letter-spacing: 0.08em;
          margin-top: 4px;
        }

        /* ─── SECTION WRAPPER ─── */
        .section {
          position: relative;
          z-index: 1;
          padding: 100px 30px;
          max-width: 1200px;
          margin: 0 auto;
        }

        .section-bg {
          position: relative;
          z-index: 1;
        }

        .section-bg::before {
          content: '';
          position: absolute;
          inset: 0;
          background: var(--bg);
          z-index: -1;
        }

        .section-header {
          text-align: center;
          margin-bottom: 60px;
        }

        .section-tag {
          display: inline-block;
          font-size: 0.75rem;
          font-weight: 600;
          letter-spacing: 0.15em;
          text-transform: uppercase;
          color: var(--accent);
          margin-bottom: 14px;
        }

        .section-title {
          font-family: 'Syne', sans-serif;
          font-size: clamp(1.8rem, 4vw, 2.8rem);
          font-weight: 800;
          letter-spacing: -0.02em;
          line-height: 1.15;
          margin-bottom: 16px;
        }

        .section-desc {
          color: var(--text-sub);
          max-width: 500px;
          margin: 0 auto;
          line-height: 1.7;
          font-weight: 300;
        }

        /* ─── STORIES SLIDER ─── */
        .stories-section {
          background: var(--bg2);
          padding: 100px 0;
        }

        .stories-inner {
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 30px;
        }

        .slider-wrap {
          position: relative;
          overflow: hidden;
          border-radius: 24px;
        }

        .slider-track {
          display: flex;
          transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
        }

        .slide {
          min-width: 100%;
          position: relative;
          height: 520px;
          border-radius: 24px;
          overflow: hidden;
        }

        .slide img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 6s ease;
        }

        .slide:hover img {
          transform: scale(1.05);
        }

        .slide-overlay {
          position: absolute;
          inset: 0;
          background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 60%);
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          padding: 40px;
        }

        .slide-tag {
          display: inline-block;
          padding: 4px 12px;
          background: var(--accent);
          color: #fff;
          border-radius: 6px;
          font-size: 0.75rem;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 0.08em;
          margin-bottom: 14px;
          width: fit-content;
        }

        .slide-title {
          font-family: 'Syne', sans-serif;
          font-size: 1.8rem;
          font-weight: 700;
          color: #fff;
          margin-bottom: 10px;
          line-height: 1.2;
        }

        .slide-desc {
          color: rgba(255,255,255,0.75);
          font-size: 0.95rem;
          line-height: 1.6;
          max-width: 500px;
        }

        .slider-controls {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 14px;
          margin-top: 30px;
        }

        .slider-btn {
          width: 44px;
          height: 44px;
          border-radius: 50%;
          background: var(--card-bg);
          border: 1px solid var(--glass-border);
          color: var(--text);
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1.1rem;
          transition: all 0.25s;
          backdrop-filter: blur(10px);
        }

        .slider-btn:hover {
          background: var(--accent);
          color: #fff;
          border-color: var(--accent);
          transform: scale(1.1);
        }

        .slider-dots {
          display: flex;
          gap: 8px;
        }

        .dot {
          width: 8px;
          height: 8px;
          border-radius: 4px;
          background: var(--glass-border);
          cursor: pointer;
          transition: all 0.3s;
        }

        .dot.active {
          width: 24px;
          background: var(--accent);
        }

        /* ─── FEATURES ─── */
        .features-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
          gap: 24px;
        }

        .feat-card {
          background: var(--card-bg);
          border: 1px solid var(--glass-border);
          border-radius: 20px;
          padding: 32px;
          backdrop-filter: blur(16px);
          transition: all 0.3s;
          position: relative;
          overflow: hidden;
        }

        .feat-card::before {
          content: '';
          position: absolute;
          top: 0; left: 0; right: 0;
          height: 2px;
          background: linear-gradient(90deg, var(--accent), var(--accent2));
          transform: scaleX(0);
          transition: transform 0.3s;
        }

        .feat-card:hover::before {
          transform: scaleX(1);
        }

        .feat-card:hover {
          transform: translateY(-6px);
          box-shadow: 0 20px 50px var(--shadow);
          border-color: rgba(6,176,162,0.3);
        }

        .feat-icon {
          width: 52px;
          height: 52px;
          border-radius: 14px;
          background: linear-gradient(135deg, var(--accent), var(--accent2));
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1.5rem;
          margin-bottom: 20px;
          box-shadow: 0 8px 20px var(--accent-glow);
        }

        .feat-card h3 {
          font-family: 'Syne', sans-serif;
          font-size: 1.15rem;
          font-weight: 700;
          margin-bottom: 10px;
          letter-spacing: -0.01em;
        }

        .feat-card p {
          color: var(--text-sub);
          font-size: 0.92rem;
          line-height: 1.65;
        }

        /* ─── APP DOWNLOAD ─── */
        .app-section {
          background: var(--bg3);
          padding: 100px 30px;
        }

        .app-inner {
          max-width: 1200px;
          margin: 0 auto;
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 80px;
          align-items: center;
        }

        .app-content .section-tag { display: block; text-align: left; }
        .app-content .section-title { text-align: left; margin-bottom: 16px; }
        .app-content .section-desc { margin: 0 0 36px; text-align: left; max-width: 100%; }

        .app-features {
          display: flex;
          flex-direction: column;
          gap: 16px;
          margin-bottom: 36px;
        }

        .app-feat {
          display: flex;
          align-items: center;
          gap: 12px;
          font-size: 0.95rem;
          color: var(--text-sub);
        }

        .app-feat::before {
          content: '✓';
          width: 22px;
          height: 22px;
          border-radius: 50%;
          background: rgba(6,176,162,0.15);
          color: var(--accent);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 0.75rem;
          font-weight: 700;
          flex-shrink: 0;
        }

        .app-mockup {
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .phone-frame {
          width: 280px;
          height: 560px;
          border-radius: 44px;
          background: var(--card-bg);
          border: 2px solid var(--glass-border);
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          overflow: hidden;
          box-shadow: 0 40px 80px var(--shadow), inset 0 0 60px var(--glass2);
        }

        .phone-frame::before {
          content: '';
          position: absolute;
          top: 18px;
          width: 100px;
          height: 28px;
          background: var(--bg);
          border-radius: 14px;
          z-index: 2;
        }

        .phone-screen {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 42px;
        }

        .phone-glow {
          position: absolute;
          width: 200px;
          height: 200px;
          border-radius: 50%;
          background: radial-gradient(circle, var(--accent-glow), transparent 70%);
          bottom: -50px;
          left: 50%;
          transform: translateX(-50%);
        }

        /* ─── CONTACT ─── */
        .contact-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 60px;
          align-items: start;
        }

        .contact-info h3 {
          font-family: 'Syne', sans-serif;
          font-size: 1.4rem;
          font-weight: 700;
          margin-bottom: 8px;
        }

        .contact-info p {
          color: var(--text-sub);
          line-height: 1.7;
          margin-bottom: 32px;
          font-size: 0.95rem;
        }

        .contact-items {
          display: flex;
          flex-direction: column;
          gap: 16px;
        }

        .contact-item {
          display: flex;
          align-items: flex-start;
          gap: 14px;
        }

        .contact-icon {
          width: 44px;
          height: 44px;
          border-radius: 12px;
          background: var(--glass2);
          border: 1px solid var(--glass-border);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1.1rem;
          flex-shrink: 0;
        }

        .contact-detail {
          display: flex;
          flex-direction: column;
          gap: 2px;
        }

        .contact-detail small {
          font-size: 0.75rem;
          color: var(--text-muted);
          text-transform: uppercase;
          letter-spacing: 0.08em;
        }

        .contact-detail a, .contact-detail span {
          color: var(--text);
          text-decoration: none;
          font-size: 0.95rem;
          font-weight: 500;
          transition: color 0.2s;
        }

        .contact-detail a:hover { color: var(--accent); }

        .wa-btn {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          margin-top: 24px;
          padding: 14px 26px;
          background: #25D366;
          color: #fff;
          text-decoration: none;
          border-radius: 12px;
          font-weight: 600;
          font-size: 0.95rem;
          transition: all 0.3s;
          box-shadow: 0 6px 20px rgba(37,211,102,0.3);
        }

        .wa-btn:hover {
          transform: translateY(-3px);
          box-shadow: 0 12px 30px rgba(37,211,102,0.4);
        }

        .contact-form {
          background: var(--card-bg);
          border: 1px solid var(--glass-border);
          border-radius: 24px;
          padding: 36px;
          backdrop-filter: blur(16px);
        }

        .contact-form h3 {
          font-family: 'Syne', sans-serif;
          font-size: 1.2rem;
          font-weight: 700;
          margin-bottom: 24px;
        }

        .form-group {
          margin-bottom: 18px;
        }

        .form-group label {
          display: block;
          font-size: 0.82rem;
          color: var(--text-muted);
          text-transform: uppercase;
          letter-spacing: 0.08em;
          margin-bottom: 8px;
        }

        .form-group input,
        .form-group textarea {
          width: 100%;
          padding: 12px 16px;
          background: var(--glass2);
          border: 1px solid var(--glass-border);
          border-radius: 10px;
          color: var(--text);
          font-family: 'DM Sans', sans-serif;
          font-size: 0.95rem;
          transition: border-color 0.2s;
          outline: none;
        }

        .form-group input:focus,
        .form-group textarea:focus {
          border-color: var(--accent);
          box-shadow: 0 0 0 3px var(--accent-glow);
        }

        .form-group textarea { resize: vertical; min-height: 100px; }

        .form-submit {
          width: 100%;
          padding: 14px;
          background: linear-gradient(135deg, var(--accent), var(--accent2));
          color: #fff;
          border: none;
          border-radius: 12px;
          font-family: 'DM Sans', sans-serif;
          font-size: 1rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.3s;
          box-shadow: 0 6px 20px var(--accent-glow);
        }

        .form-submit:hover {
          transform: translateY(-2px);
          box-shadow: 0 10px 28px var(--accent-glow);
        }

        /* ─── FOOTER ─── */
        footer {
          background: var(--footer-bg);
          border-top: 1px solid var(--glass-border);
          padding: 60px 30px 40px;
          position: relative;
          z-index: 1;
        }

        .footer-inner {
          max-width: 1200px;
          margin: 0 auto;
        }

        .footer-top {
          display: grid;
          grid-template-columns: 2fr 1fr 1fr 1fr;
          gap: 50px;
          margin-bottom: 50px;
        }

        .footer-brand .nav-logo {
          margin-bottom: 16px;
          display: inline-flex;
        }

        .footer-brand p {
          color: var(--text-muted);
          font-size: 0.9rem;
          line-height: 1.7;
          max-width: 280px;
        }

        .footer-col h4 {
          font-family: 'Syne', sans-serif;
          font-size: 0.88rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.1em;
          color: var(--text);
          margin-bottom: 18px;
        }

        .footer-col ul {
          list-style: none;
          display: flex;
          flex-direction: column;
          gap: 10px;
        }

        .footer-col ul a {
          color: var(--text-muted);
          text-decoration: none;
          font-size: 0.9rem;
          transition: color 0.2s;
        }

        .footer-col ul a:hover { color: var(--accent); }

        .footer-bottom {
          border-top: 1px solid var(--glass-border);
          padding-top: 28px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 20px;
          flex-wrap: wrap;
        }

        .footer-bottom p {
          font-size: 0.85rem;
          color: var(--text-muted);
        }

        .footer-bottom a {
          color: var(--accent);
          text-decoration: none;
        }

        .footer-bottom a:hover { text-decoration: underline; }

        .footer-socials {
          display: flex;
          gap: 10px;
        }

        .social-btn {
          width: 36px;
          height: 36px;
          border-radius: 8px;
          background: var(--glass2);
          border: 1px solid var(--glass-border);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 0.9rem;
          cursor: pointer;
          transition: all 0.25s;
          color: var(--text-muted);
          text-decoration: none;
        }

        .social-btn:hover {
          background: var(--accent);
          color: #fff;
          border-color: var(--accent);
          transform: translateY(-2px);
        }

        /* ─── BROWSE PROPERTIES ─── */
        .filter-bar {
          display: flex;
          flex-wrap: wrap;
          gap: 14px;
          align-items: flex-end;
          background: var(--card-bg);
          border: 1px solid var(--glass-border);
          border-radius: 20px;
          padding: 24px 28px;
          margin-bottom: 28px;
          backdrop-filter: blur(16px);
        }

        .filter-group {
          display: flex;
          flex-direction: column;
          gap: 6px;
          flex: 1;
          min-width: 150px;
        }

        .filter-label {
          font-size: 0.72rem;
          text-transform: uppercase;
          letter-spacing: 0.1em;
          color: var(--text-muted);
          font-weight: 600;
        }

        .filter-input {
          padding: 10px 14px;
          background: var(--glass2);
          border: 1px solid var(--glass-border);
          border-radius: 10px;
          color: var(--text);
          font-family: 'DM Sans', sans-serif;
          font-size: 0.92rem;
          outline: none;
          transition: border-color 0.2s, box-shadow 0.2s;
          appearance: none;
        }

        .filter-input:focus {
          border-color: var(--accent);
          box-shadow: 0 0 0 3px var(--accent-glow);
        }

        select.filter-input {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2306b0a2' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
          background-repeat: no-repeat;
          background-position: right 12px center;
          padding-right: 32px;
          cursor: pointer;
        }

        .filter-clear {
          padding: 10px 20px;
          background: transparent;
          border: 1.5px solid var(--glass-border);
          color: var(--text-muted);
          border-radius: 10px;
          font-family: 'DM Sans', sans-serif;
          font-size: 0.88rem;
          cursor: pointer;
          transition: all 0.2s;
          white-space: nowrap;
          align-self: flex-end;
        }

        .filter-clear:hover {
          border-color: #e05252;
          color: #e05252;
        }

        .results-meta {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 24px;
          font-size: 0.9rem;
          color: var(--text-muted);
        }

        .results-sort select {
          background: var(--glass2);
          border: 1px solid var(--glass-border);
          border-radius: 8px;
          color: var(--text);
          font-family: 'DM Sans', sans-serif;
          font-size: 0.85rem;
          padding: 6px 12px;
          outline: none;
          cursor: pointer;
        }

        .props-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
          gap: 22px;
        }

        /* Property Card */
        .prop-card {
          background: var(--card-bg);
          border: 1px solid var(--glass-border);
          border-radius: 20px;
          overflow: hidden;
          backdrop-filter: blur(16px);
          transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
          display: flex;
          flex-direction: column;
        }

        .prop-card:hover {
          transform: translateY(-8px);
          border-color: rgba(6,176,162,0.4);
          box-shadow: 0 20px 50px var(--shadow), 0 0 0 1px rgba(6,176,162,0.1);
        }

        .prop-img-wrap {
          position: relative;
          height: 190px;
          overflow: hidden;
          background: var(--bg3);
        }

        .prop-img-wrap img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.5s ease;
        }

        .prop-card:hover .prop-img-wrap img {
          transform: scale(1.06);
        }

        .prop-badge {
          position: absolute;
          top: 12px;
          left: 12px;
          padding: 4px 10px;
          border-radius: 6px;
          font-size: 0.72rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.06em;
        }

        .badge-rent { background: var(--accent); color: #fff; }
        .badge-sale { background: #e08a2b; color: #fff; }
        .badge-new {
          position: absolute;
          top: 12px;
          right: 12px;
          background: rgba(6,176,162,0.9);
          color: #fff;
          padding: 3px 8px;
          border-radius: 5px;
          font-size: 0.68rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.06em;
        }

        .prop-img-placeholder {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 3rem;
          background: linear-gradient(135deg, var(--bg2), var(--bg3));
        }

        .prop-body {
          padding: 20px;
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 8px;
        }

        .prop-price {
          font-family: 'Syne', sans-serif;
          font-size: 1.3rem;
          font-weight: 800;
          background: linear-gradient(135deg, var(--accent), var(--accent2));
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .prop-price span {
          font-size: 0.8rem;
          font-weight: 500;
          color: var(--text-muted);
          -webkit-text-fill-color: var(--text-muted);
        }

        .prop-type {
          display: inline-flex;
          align-items: center;
          gap: 4px;
          font-size: 0.8rem;
          color: var(--accent);
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 0.07em;
        }

        .prop-location {
          font-size: 0.88rem;
          color: var(--text-sub);
          display: flex;
          align-items: center;
          gap: 5px;
        }

        .prop-desc {
          font-size: 0.85rem;
          color: var(--text-muted);
          line-height: 1.55;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          flex: 1;
        }

        .prop-footer {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 14px 20px;
          border-top: 1px solid var(--glass-border);
          gap: 10px;
        }

        .prop-meta {
          display: flex;
          gap: 14px;
        }

        .prop-meta-item {
          font-size: 0.8rem;
          color: var(--text-muted);
          display: flex;
          align-items: center;
          gap: 4px;
        }

        .prop-view {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 7px 14px;
          background: linear-gradient(135deg, var(--accent), var(--accent2));
          color: #fff;
          text-decoration: none;
          border-radius: 8px;
          font-size: 0.8rem;
          font-weight: 600;
          transition: all 0.25s;
          white-space: nowrap;
        }

        .prop-view:hover {
          transform: scale(1.05);
          box-shadow: 0 4px 14px var(--accent-glow);
        }

        /* Skeleton */
        .prop-skeleton {
          background: var(--card-bg);
          border: 1px solid var(--glass-border);
          border-radius: 20px;
          overflow: hidden;
        }

        .skel-img {
          height: 190px;
          background: linear-gradient(90deg, var(--glass2) 25%, var(--glass-border) 50%, var(--glass2) 75%);
          background-size: 200% 100%;
          animation: shimmer 1.5s infinite;
        }

        .skel-body {
          padding: 20px;
          display: flex;
          flex-direction: column;
          gap: 12px;
        }

        .skel-line {
          height: 12px;
          border-radius: 6px;
          background: linear-gradient(90deg, var(--glass2) 25%, var(--glass-border) 50%, var(--glass2) 75%);
          background-size: 200% 100%;
          animation: shimmer 1.5s infinite;
        }

        .skel-title { height: 18px; width: 70%; }
        .skel-sub { width: 90%; }
        .skel-sub.short { width: 50%; }

        @keyframes shimmer {
          0% { background-position: 200% 0; }
          100% { background-position: -200% 0; }
        }

        /* Empty State */
        .props-empty {
          text-align: center;
          padding: 80px 20px;
        }

        .empty-icon {
          font-size: 4rem;
          margin-bottom: 20px;
          filter: grayscale(0.5);
        }

        .props-empty h3 {
          font-family: 'Syne', sans-serif;
          font-size: 1.5rem;
          margin-bottom: 10px;
        }

        .props-empty p {
          color: var(--text-muted);
        }

        /* Load More */
        #loadMoreBtn {
          padding: 14px 36px;
          border-radius: 12px;
        }

        @media (max-width: 700px) {
          .filter-bar { padding: 18px; }
          .filter-group { min-width: 130px; }
          .props-grid { grid-template-columns: 1fr; }
        }

        /* ─── BROWSE PROPERTIES ─── */
        @media (max-width: 900px) {
          .nav-links { display: none; }
          .nav-links.open {
            display: flex;
            flex-direction: column;
            position: absolute;
            top: 72px; left: 0; right: 0;
            background: var(--nav-bg);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--glass-border);
            padding: 16px 20px;
            gap: 4px;
          }
          .hamburger { display: flex; }
          .app-inner { grid-template-columns: 1fr; gap: 40px; }
          .app-mockup { order: -1; }
          .phone-frame { width: 220px; height: 440px; }
          .contact-grid { grid-template-columns: 1fr; gap: 40px; }
          .footer-top { grid-template-columns: 1fr 1fr; gap: 30px; }
          .footer-brand { grid-column: 1 / -1; }
          .hero-stats { gap: 28px; }
        }

        @media (max-width: 600px) {
          .hero h1 { font-size: 2.2rem; }
          .footer-top { grid-template-columns: 1fr; }
          .footer-bottom { flex-direction: column; text-align: center; }
        }

        /* Scroll reveal */
        .reveal {
          opacity: 0;
          transform: translateY(30px);
          transition: opacity 0.7s ease, transform 0.7s ease;
        }

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

        .reveal-delay-1 { transition-delay: 0.1s; }
        .reveal-delay-2 { transition-delay: 0.2s; }
        .reveal-delay-3 { transition-delay: 0.3s; }

        .props-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 24px;
            padding: 0 0 20px;
        }

        .prop-card {
            display: flex;
            flex-direction: column;
            background: var(--card-bg, #161b2e);
            border-radius: 16px;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.07);
            transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.4s ease;
            opacity: 0;
            transform: translateY(24px);
            height: 100%;
        }
        .prop-card.visible {
            opacity: 1;
            transform: translateY(0);
        }
        .prop-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 24px 48px rgba(0,0,0,0.35);
        }

        /* Image area — fixed height, no layout shift */
        .prop-img-wrap {
            position: relative;
            width: 100%;
            height: 210px;
            overflow: hidden;
            flex-shrink: 0;
            background: #0d1120;
        }
        .prop-img-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.45s ease;
        }
        .prop-card:hover .prop-img-wrap img {
            transform: scale(1.06);
        }
        .prop-img-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3.5rem;
            background: linear-gradient(135deg, #1a2133, #0f1a2e);
        }

        /* Badges */
        .prop-badge {
            position: absolute;
            top: 12px;
            left: 12px;
            padding: 4px 11px;
            border-radius: 20px;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            background: var(--accent, #4f8ef7);
            color: #fff;
            backdrop-filter: blur(4px);
        }
        .badge-new {
            position: absolute;
            top: 12px;
            right: 12px;
            padding: 4px 11px;
            border-radius: 20px;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            background: #16a34a;
            color: #fff;
        }

        /* Body — grows to fill card */
        .prop-body {
            padding: 16px 18px 12px;
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        .prop-price {
            font-size: 1.15rem;
            font-weight: 800;
            color: var(--accent, #4f8ef7);
            line-height: 1.2;
        }
        .prop-price span {
            font-size: 0.78rem;
            font-weight: 400;
            opacity: 0.65;
        }
        .prop-type {
            font-size: 0.82rem;
            font-weight: 600;
            opacity: 0.9;
            margin-top: 2px;
        }
        .prop-location {
            font-size: 0.81rem;
            opacity: 0.65;
        }
        .prop-desc {
            font-size: 0.81rem;
            opacity: 0.6;
            line-height: 1.55;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-top: 6px;
        }

        /* Footer — always at bottom */
        .prop-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 18px 16px;
            border-top: 1px solid rgba(255,255,255,0.07);
            flex-shrink: 0;
            gap: 8px;
        }
        .prop-meta {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            min-height: 22px;
        }
        .prop-meta-item {
            font-size: 0.78rem;
            opacity: 0.7;
            display: flex;
            align-items: center;
            gap: 3px;
        }
        .prop-view {
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--accent, #4f8ef7);
            text-decoration: none;
            padding: 7px 16px;
            border: 1.5px solid var(--accent, #4f8ef7);
            border-radius: 22px;
            transition: background 0.2s, color 0.2s;
            white-space: nowrap;
            flex-shrink: 0;
        }
        .prop-view:hover {
            background: var(--accent, #4f8ef7);
            color: #fff;
        }

        /* ══════════════════════════════════════
           SLIDER STYLES
        ══════════════════════════════════════ */
        .slider-wrap {
            border-radius: 20px;
            overflow: hidden;
        }
        .slider-track {
            display: flex;
            transition: transform 0.65s cubic-bezier(0.77,0,0.175,1);
        }
        .slide {
            min-width: 100%;
            position: relative;
            height: 460px;
            overflow: hidden;
            background: #0d1120;
        }
        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .slide-overlay {
            position: absolute;
            bottom: 0; left: 0; right: 0;
            padding: 44px 52px;
            background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.3) 60%, transparent 100%);
            color: #fff;
        }
        .slide-tag {
            display: inline-block;
            padding: 4px 13px;
            border-radius: 20px;
            font-size: 0.72rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            background: var(--accent, #4f8ef7);
            margin-bottom: 12px;
        }
        .slide-title {
            font-size: clamp(1.3rem, 3vw, 2rem);
            font-weight: 800;
            margin: 0 0 10px;
            line-height: 1.2;
        }
        .slide-desc {
            font-size: 0.95rem;
            opacity: 0.85;
            max-width: 540px;
            line-height: 1.55;
        }
        .slide-cta {
            display: inline-block;
            margin-top: 16px;
            padding: 9px 22px;
            background: var(--accent, #4f8ef7);
            color: #fff;
            border-radius: 22px;
            font-size: 0.85rem;
            font-weight: 700;
            text-decoration: none;
            transition: opacity 0.2s;
        }
        .slide-cta:hover { opacity: 0.85; }

        @media (max-width: 600px) {
            .slide { height: 320px; }
            .slide-overlay { padding: 24px 24px; }
        }


        /* ═══════════════════════════════════════
           STICKY NAV
        ═══════════════════════════════════════ */
        #navbar {
            position: fixed !important;
            top: 0; left: 0; right: 0;
            z-index: 1000;
            background: rgba(10, 12, 24, 0.88);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            border-bottom: 1px solid rgba(255,255,255,0.07);
            transition: background 0.3s, box-shadow 0.3s;
        }
        #navbar.scrolled { box-shadow: 0 4px 32px rgba(0,0,0,0.35); }
        [data-theme="light"] #navbar { background: rgba(255,255,255,0.92); border-bottom: 1px solid rgba(0,0,0,0.08); }
        main { padding-top: 68px; }

        /* ═══════════════════════════════════════
           MOBILE NAV MENU
        ═══════════════════════════════════════ */
        @media (max-width: 768px) {
            .nav-links {
                position: fixed !important;
                top: 64px; left: 0; right: 0;
                background: rgba(10,12,24,0.98);
                backdrop-filter: blur(20px);
                flex-direction: column !important;
                padding: 16px 24px 28px;
                gap: 0 !important;
                display: none !important;
                z-index: 999;
                border-bottom: 1px solid rgba(255,255,255,0.08);
                list-style: none; margin: 0;
            }
            .nav-links.open { display: flex !important; }
            .nav-links li a {
                display: block; padding: 14px 0; font-size: 1rem;
                border-bottom: 1px solid rgba(255,255,255,0.06);
            }
            .nav-links li:last-child a { border-bottom: none; }
            [data-theme="light"] .nav-links { background: rgba(255,255,255,0.98); }
            [data-theme="light"] .nav-links li a { border-bottom-color: rgba(0,0,0,0.06); }
            .hamburger { display: flex !important; }
        }
        @media (min-width: 769px) {
            .hamburger { display: none !important; }
            .nav-links { display: flex !important; }
        }

        /* ═══════════════════════════════════════
           PROPERTY CARDS
        ═══════════════════════════════════════ */
        .props-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
            gap: 24px; margin-top: 32px;
        }
        .prop-card {
            display: flex; flex-direction: column;
            border-radius: 16px; overflow: hidden;
            border: 1px solid rgba(255,255,255,0.07);
            background: var(--card-bg, #131826);
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.45s ease;
            opacity: 0; transform: translateY(22px);
        }
        .prop-card.visible { opacity: 1; transform: translateY(0); }
        .prop-card:hover { transform: translateY(-7px); box-shadow: 0 28px 56px rgba(0,0,0,0.4); }
        [data-theme="light"] .prop-card { background: #fff; border-color: rgba(0,0,0,0.08); }
        .prop-img-wrap {
            position: relative; width: 100%; height: 200px;
            overflow: hidden; flex-shrink: 0; background: #0d1120;
        }
        .prop-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease; }
        .prop-card:hover .prop-img-wrap img { transform: scale(1.06); }
        .prop-img-placeholder {
            width: 100%; height: 100%;
            display: flex; align-items: center; justify-content: center;
            font-size: 3rem; background: linear-gradient(135deg, #1a2133, #0f1a2e);
        }
        .prop-badge {
            position: absolute; top: 12px; left: 12px;
            padding: 4px 11px; border-radius: 20px;
            font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
            text-transform: uppercase; background: var(--accent, #4f8ef7); color: #fff;
        }
        .badge-new {
            position: absolute; top: 12px; right: 12px;
            padding: 4px 11px; border-radius: 20px;
            font-size: 0.7rem; font-weight: 700;
            text-transform: uppercase; background: #16a34a; color: #fff;
        }
        .prop-body { padding: 16px 18px 10px; flex: 1; display: flex; flex-direction: column; gap: 5px; }
        .prop-price { font-size: 1.15rem; font-weight: 800; color: var(--accent, #4f8ef7); }
        .prop-price span { font-size: 0.78rem; font-weight: 400; opacity: 0.6; }
        .prop-type { font-size: 0.82rem; font-weight: 600; opacity: 0.9; margin-top: 2px; }
        .prop-location { font-size: 0.81rem; opacity: 0.6; }
        .prop-desc {
            font-size: 0.8rem; opacity: 0.58; line-height: 1.55;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 5px;
        }
        .prop-footer {
            display: flex; align-items: center; justify-content: space-between;
            padding: 12px 18px 16px; gap: 8px;
            border-top: 1px solid rgba(255,255,255,0.07); flex-shrink: 0;
        }
        [data-theme="light"] .prop-footer { border-top-color: rgba(0,0,0,0.07); }
        .prop-meta { display: flex; gap: 10px; flex-wrap: wrap; min-height: 22px; }
        .prop-meta-item { font-size: 0.78rem; opacity: 0.7; }
        .prop-view {
            font-size: 0.8rem; font-weight: 700; color: var(--accent, #4f8ef7);
            text-decoration: none; padding: 7px 16px;
            border: 1.5px solid var(--accent, #4f8ef7); border-radius: 22px;
            transition: background 0.2s, color 0.2s; white-space: nowrap;
            background: none; cursor: pointer; font-family: inherit;
        }
        .prop-view:hover { background: var(--accent, #4f8ef7); color: #fff; }

        /* Skeleton */
        .prop-skeleton { border-radius: 16px; overflow: hidden; background: var(--card-bg,#131826); border: 1px solid rgba(255,255,255,0.07); }
        .skel-img { height: 200px; background: linear-gradient(90deg,#1a2133 25%,#1e2940 50%,#1a2133 75%); background-size:200% 100%; animation:skel 1.4s infinite; }
        .skel-body { padding: 16px 18px; display:flex; flex-direction:column; gap:10px; }
        .skel-line { border-radius:6px; background:linear-gradient(90deg,#1a2133 25%,#1e2940 50%,#1a2133 75%); background-size:200% 100%; animation:skel 1.4s infinite; }
        .skel-title { height:18px; width:75%; }
        .skel-sub   { height:13px; width:55%; }
        .skel-sub.short { width:40%; }
        @keyframes skel { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

        /* Empty & load more */
        .props-empty { text-align:center; padding:60px 20px; }
        .props-empty .empty-icon { font-size:3rem; margin-bottom:16px; }
        #loadMoreWrap { text-align:center; margin-top:44px; }

        /* Results meta */
        .results-meta { display:flex; align-items:center; gap:16px; font-size:0.88rem; opacity:0.7; margin-bottom:4px; flex-wrap:wrap; }
        .results-sort select {
            background:transparent; border:1px solid rgba(255,255,255,0.15);
            color:inherit; border-radius:8px; padding:4px 10px; font-size:0.85rem; cursor:pointer;
        }
        [data-theme="light"] .results-sort select { border-color:rgba(0,0,0,0.15); }

        /* Filter bar */
        .filter-bar {
            display:flex; flex-wrap:wrap; gap:12px;
            padding:20px; background:rgba(255,255,255,0.04);
            border-radius:14px; border:1px solid rgba(255,255,255,0.07); margin-bottom:24px;
        }
        [data-theme="light"] .filter-bar { background:rgba(0,0,0,0.03); border-color:rgba(0,0,0,0.08); }
        .filter-group { display:flex; flex-direction:column; gap:5px; flex:1; min-width:140px; }
        .filter-label { font-size:0.73rem; text-transform:uppercase; letter-spacing:0.06em; opacity:0.6; font-weight:600; }
        .filter-input {
            background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1);
            border-radius:10px; padding:9px 13px; color:inherit; font-size:0.88rem;
            font-family:inherit; outline:none; transition:border-color 0.2s;
        }
        .filter-input:focus { border-color:var(--accent,#4f8ef7); }
        [data-theme="light"] .filter-input { background:#fff; border-color:rgba(0,0,0,0.12); }
        .filter-clear {
            align-self:flex-end; padding:9px 18px; border-radius:10px;
            border:1px solid rgba(255,255,255,0.15); background:transparent;
            color:inherit; font-size:0.85rem; cursor:pointer; font-family:inherit;
            transition:background 0.2s;
        }
        .filter-clear:hover { background:rgba(255,255,255,0.08); }

        /* ═══════════════════════════════════════
           PROPERTY DETAIL MODAL
        ═══════════════════════════════════════ */
        .modal-overlay {
            position: fixed; inset: 0; z-index: 2000;
            background: rgba(0,0,0,0.78);
            backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
            display: flex; align-items: center; justify-content: center;
            padding: 16px;
            opacity: 0; pointer-events: none;
            transition: opacity 0.25s ease;
        }
        .modal-overlay.open { opacity: 1; pointer-events: all; }
        .modal-card {
            background: #13192e; border-radius: 20px;
            width: 100%; max-width: 680px; max-height: 90vh;
            overflow-y: auto; overflow-x: hidden;
            border: 1px solid rgba(255,255,255,0.1);
            box-shadow: 0 40px 80px rgba(0,0,0,0.6);
            transform: translateY(30px) scale(0.97); opacity: 0;
            transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s ease;
            scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent;
        }
        .modal-overlay.open .modal-card { transform: translateY(0) scale(1); opacity: 1; }
        [data-theme="light"] .modal-card { background: #fff; border-color: rgba(0,0,0,0.1); color: #111; }

        .modal-img-wrap {
            position: relative; width: 100%; height: 280px;
            overflow: hidden; flex-shrink: 0; background: #0d1120;
        }
        .modal-main-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
        .modal-img-placeholder {
            position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
            font-size:4rem; background:linear-gradient(135deg,#1a2133,#0f1a2e);
        }
        .modal-img-dots {
            position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
            display:flex; gap:6px; z-index:3;
        }
        .modal-img-dot {
            width:7px; height:7px; border-radius:50%;
            background:rgba(255,255,255,0.4); cursor:pointer;
            transition:background 0.2s, transform 0.2s;
        }
        .modal-img-dot.active { background:#fff; transform:scale(1.35); }
        .modal-img-nav {
            position:absolute; top:50%; transform:translateY(-50%);
            background:rgba(0,0,0,0.5); border:none; color:#fff;
            width:36px; height:36px; border-radius:50%; cursor:pointer;
            font-size:1.1rem; display:flex; align-items:center; justify-content:center;
            z-index:3; transition:background 0.2s;
        }
        .modal-img-nav:hover { background:rgba(0,0,0,0.8); }
        .modal-img-nav.prev { left:12px; }
        .modal-img-nav.next { right:12px; }
        .modal-close {
            position:absolute; top:14px; right:14px;
            background:rgba(0,0,0,0.6); border:none; color:#fff;
            width:36px; height:36px; border-radius:50%; cursor:pointer;
            font-size:1rem; display:flex; align-items:center; justify-content:center;
            z-index:4; transition:background 0.2s;
        }
        .modal-close:hover { background:rgba(0,0,0,0.9); }
        .modal-body { padding:24px 28px 28px; }
        .modal-badge-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
        .modal-badge {
            padding:4px 12px; border-radius:20px;
            font-size:0.7rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
        }
        .modal-badge.type { background:var(--accent,#4f8ef7); color:#fff; }
        .modal-badge.cat  { background:rgba(79,142,247,0.15); color:var(--accent,#4f8ef7); }
        .modal-badge.newb { background:#16a34a; color:#fff; }
        .modal-price { font-size:1.6rem; font-weight:800; color:var(--accent,#4f8ef7); margin-bottom:4px; }
        .modal-price span { font-size:1rem; font-weight:400; opacity:0.6; }
        .modal-location { font-size:0.9rem; opacity:0.65; margin-bottom:18px; }
        .modal-specs {
            display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr));
            gap:12px; margin-bottom:20px;
        }
        .modal-spec { background:rgba(255,255,255,0.05); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:4px; }
        [data-theme="light"] .modal-spec { background:rgba(0,0,0,0.04); }
        .modal-spec-label { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.05em; opacity:0.55; }
        .modal-spec-val { font-size:0.95rem; font-weight:700; }
        .modal-desc-title { font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; opacity:0.5; margin-bottom:8px; }
        .modal-desc { font-size:0.9rem; line-height:1.65; opacity:0.8; margin-bottom:24px; }
        .modal-actions { display:flex; gap:12px; flex-wrap:wrap; }
        .modal-btn-primary {
            flex:1; min-width:160px; padding:14px 20px; border-radius:12px;
            background:var(--accent,#4f8ef7); color:#fff; border:none;
            font-size:0.9rem; font-weight:700; cursor:pointer; text-decoration:none;
            text-align:center; font-family:inherit;
            transition:opacity 0.2s, transform 0.15s;
            display:flex; align-items:center; justify-content:center; gap:8px;
        }
        .modal-btn-primary:hover { opacity:0.87; transform:translateY(-2px); }
        .modal-btn-wa {
            flex:1; min-width:160px; padding:14px 20px; border-radius:12px;
            background:#16a34a; color:#fff; border:none;
            font-size:0.9rem; font-weight:700; cursor:pointer; text-decoration:none;
            text-align:center; font-family:inherit;
            transition:opacity 0.2s, transform 0.15s;
            display:flex; align-items:center; justify-content:center; gap:8px;
        }
        .modal-btn-wa:hover { opacity:0.87; transform:translateY(-2px); }

        /* ═══════════════════════════════════════
           SLIDER
        ═══════════════════════════════════════ */
        .slider-wrap { border-radius:20px; overflow:hidden; }
        .slider-track { display:flex; transition:transform 0.65s cubic-bezier(0.77,0,0.175,1); }
        .slide { min-width:100%; position:relative; height:460px; overflow:hidden; background:#0d1120; }
        .slide img { width:100%; height:100%; object-fit:cover; display:block; }
        .slide-overlay {
            position:absolute; bottom:0; left:0; right:0;
            padding:44px 52px;
            background:linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.3) 60%, transparent 100%);
            color:#fff;
        }
        .slide-tag { display:inline-block; padding:4px 13px; border-radius:20px; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; background:var(--accent,#4f8ef7); margin-bottom:12px; }
        .slide-title { font-size:clamp(1.3rem,3vw,2rem); font-weight:800; margin:0 0 10px; line-height:1.2; }
        .slide-desc { font-size:0.95rem; opacity:0.85; max-width:540px; line-height:1.55; }
        .slide-cta { display:inline-block; margin-top:16px; padding:9px 22px; background:var(--accent,#4f8ef7); color:#fff; border-radius:22px; font-size:0.85rem; font-weight:700; text-decoration:none; transition:opacity 0.2s; }
        .slide-cta:hover { opacity:0.85; }

        /* ═══════════════════════════════════════
           MOBILE RESPONSIVE
        ═══════════════════════════════════════ */
        @media (max-width: 768px) {
            .hero { padding: 80px 20px 40px; }
            .hero h1 { font-size: clamp(1.9rem, 8vw, 3rem); }
            .hero-actions { flex-direction: column; align-items: stretch; gap: 12px; }
            .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 16px; }
            .props-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
            .filter-bar { gap: 10px; padding: 14px; }
            .filter-group { min-width: 100%; flex: none; }
            .filter-clear { align-self: stretch; text-align: center; }
            .slide { height: 280px; }
            .slide-overlay { padding: 20px 20px 28px; }
            .slide-desc { display: none; }
            .modal-img-wrap { height: 220px; }
            .modal-body { padding: 18px 20px 24px; }
            .modal-price { font-size: 1.3rem; }
            .modal-specs { grid-template-columns: repeat(2, 1fr); }
            .modal-actions { flex-direction: column; }
            .modal-btn-primary, .modal-btn-wa { min-width: unset; flex: none; }
            .stories-section .stories-inner { padding: 0 16px; }
            .features-grid { grid-template-columns: 1fr; }
            .contact-grid { grid-template-columns: 1fr; }
            .app-inner { flex-direction: column; padding: 40px 20px; }
            .app-mockup { display: none; }
            .footer-top { grid-template-columns: 1fr 1fr; gap: 24px; }
            .footer-brand { grid-column: 1 / -1; }
        }
        @media (max-width: 480px) {
            .footer-top { grid-template-columns: 1fr; }
            .prop-img-wrap { height: 180px; }
            .modal-card { border-radius: 16px; }
            .modal-img-wrap { height: 190px; }
        }