:root { --primary:#0c2f86; --primary-dark:#0a1f63; --accent:#9aa3b5; --text:#1b1f30; --muted:#5f6475; --bg:#f5f7fb; --card:#fff; --stroke:#e3e7ef; --shadow:0 8px 24px rgba(0,0,0,0.08); }
    *{box-sizing:border-box;}
    body{margin:0;font-family:"Cairo",system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.7;}
    a{text-decoration:none;color:inherit;} img{max-width:100%;display:block;}
    .topbar{position:sticky;top:0;z-index:20;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,0.06);}
    nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 28px;max-width:1200px;margin:0 auto;}
    .brand{display:flex;align-items:center;gap:12px;font-weight:900;font-size:18px;letter-spacing:-0.3px;} .brand img{width:200px;}
    .menu{display:flex;gap:12px;flex-wrap:wrap;}
    .menu a{padding:8px 12px;border-radius:10px;color:#4a5163;font-weight:700;}
    .menu a.active{color:var(--primary);background:rgba(12,47,134,0.08);}
    .cta{display:inline-flex;align-items:center;gap:8px;border:none;padding:10px 16px;border-radius:12px;background:var(--primary);color:#fff;font-weight:800;cursor:pointer;box-shadow:var(--shadow);}
    .container{max-width:1200px;margin:0 auto;padding:0 20px;}
    .hero{background:linear-gradient(135deg,var(--primary-dark),var(--primary));color:#fff;padding:50px 0 40px;}
    h1{margin:10px 0 6px;font-size:clamp(28px,4vw + 4px,42px);line-height:1.2;} .lead{color:rgba(255,255,255,0.85);font-size:17px;}
    .section{padding:44px 0;} .section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
    h2{margin:0;font-size:24px;color:var(--text);} .underline{width:58px;height:4px;background:var(--accent);border-radius:10px;margin-top:6px;}
    .filters-card{
        background:#fff;
        border:1px solid var(--stroke);
        border-radius:16px;
        padding:16px;
        box-shadow:var(--shadow);
        margin:12px 0 18px;
    }
    .filters-grid{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
        gap:12px;
        align-items:end;
    }
    .filter-field label{
        display:block;
        margin-bottom:6px;
        font-weight:800;
        color:#0f1c42;
        font-size:13px;
    }
    .filter-input{
        display:flex;
        align-items:center;
        gap:8px;
        background:#f8fafc;
        border:1px solid var(--stroke);
        border-radius:12px;
        padding:10px 12px;
    }
    .filter-input i{
        color:var(--primary);
        font-size:18px;
    }
    .filter-input input,
    .filter-input select{
        width:100%;
        border:none;
        background:transparent;
        font-weight:700;
        color:#0f172a;
        font-size:13px;
        outline:none;
        appearance:none;
    }
    .filter-input select{padding-right:4px;}
    .filter-actions{
        display:flex;
        gap:10px;
        align-items:center;
        justify-content:flex-end;
    }
    .filter-actions .primary-btn,
    .filter-actions .ghost-btn{
        width:100%;
        height:46px;
    }
    .filter-reset{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        font-weight:800;
    }
    .ghost-btn{
        background:#f8fafc;
        color:#334155;
        border:1px solid #e2e8f0;
        border-radius:12px;
        padding:9px;
        font-weight:800;
        font-size:12px;
        cursor:pointer;
        text-align:center;
        transition:.25s ease;
    }
    .ghost-btn:hover{
        background:#e2e8f0;
    }
    .primary-btn{
        background:#0c2f86;
        color:#fff;
        border:none;
        border-radius:12px;
        padding:9px;
        font-weight:800;
        font-size:12px;
        cursor:pointer;
        box-shadow:0 4px 12px rgba(24,90,219,0.4);
        text-align:center;
        transition:.3s ease;
    }
    .primary-btn:hover{
        background:#0c2f86;
        transform:translateY(-2px);
        box-shadow:0 8px 20px rgba(12,47,134,0.5);
    }
    .properties-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:16px;}
    .card{background:var(--card);border-radius:14px;border:1px solid var(--stroke);box-shadow:var(--shadow);padding:0;overflow:hidden;}
    .card img{width:100%;height:160px;object-fit:cover;}
    .card-body{padding:12px 14px;}
    .pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:10px;background:#eef2fb;color:var(--primary);font-weight:700;font-size:13px;}
    .muted{color:var(--muted);} .chips{display:flex;gap:8px;flex-wrap:wrap;}
    .price{color:var(--primary);font-weight:900;font-size:18px;}
    .footer {
      margin-top: 40px;
      background: radial-gradient(120% 160% at 80% -10%, rgba(24,90,219,0.12), transparent 55%), linear-gradient(135deg, #050c23, #0a1538 55%, #040817);
      color: #dfe5f5;
      padding: 44px 0 40px;
      position: relative;
      overflow: hidden;
      border-top: 1px solid #13224a;
    }
    .footer::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(244,170,27,0.16), transparent 28%, transparent 72%, rgba(244,170,27,0.16));
      opacity: 0.4;
      pointer-events: none;
    }
    .footer .container { position: relative; z-index: 1; }
    .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px 16px; }
    .brand-stack { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
    .footer-logo {
      width: 70px;
      height: 70px;
      border-radius: 16px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
      display: grid;
      place-items: center;
      padding: 10px;
    }
    .footer-logo img { width: 100%; height: 100%; object-fit: contain; }
    .footer-brand { font-size: 18px; font-weight: 900; color: #fff; }
    .footer-tagline { color: #9eb1d6; font-weight: 600; margin-top: 4px; }
    .footer-ribbon {
      display: inline-flex;
      gap: 8px;
      align-items: center;
      padding: 8px 12px;
      border-radius: 14px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
      color: #dfe5f5;
      font-weight: 700;
      margin-top: 12px;
    }
    .footer-ribbon .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; }
    .footer-title { margin: 0 0 10px; color: #fff; font-size: 17px; }
    .footer-desc { margin: 0 0 10px; color: #9eb1d6; font-weight: 600; }
    .footer-links, .footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
    .footer-links a { color: #dfe5f5; font-weight: 700; }
    .footer-links a:hover, .footer-contact a:hover { color: var(--accent); }
    .footer-contact li { color: #c6d1e9; font-weight: 700; }
    .newsletter { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
    .newsletter input {
      flex: 1;
      min-width: 200px;
      padding: 12px;
      border-radius: 12px;
      border: 1px solid #1f2c54;
      background: rgba(12,18,40,0.7);
      color: #fff;
    }
    .newsletter button {
      border: none;
      border-radius: 12px;
      padding: 12px 16px;
      background: var(--accent);
      color: #0f1c42;
      font-weight: 900;
      cursor: pointer;
      box-shadow: 0 10px 24px rgba(244,170,27,0.25);
    }
    .footer-bottom {
      margin-top: 18px;
      padding-top: 14px;
      border-top: 1px solid #131f3f;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      color: #9eb1d6;
      font-weight: 700;
    }
    .social { display: inline-flex; gap: 8px; }
    .social a {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      background: rgba(255,255,255,0.06);
      color: #dfe5f5;
      font-weight: 800;
      border: 1px solid rgba(255,255,255,0.08);
    }
    @media(max-width:768px){nav{padding:12px 16px;} .hero{padding:40px 0 32px;}}