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

    :root {
      --bg:          #F5F7FA;
      --bg-2:        #EBF0F7;
      --bg-card:     #FFFFFF;
      --bg-card-hov: #F0F4FA;
      --border:      #D4DCE8;
      --border-2:    #B8C4D4;
      --txt-1:       #14243E;
      --txt-2:       #4A5C74;
      --txt-3:       #8A9AB0;
      --blue:        #14243E;
      --blue-lt:     #1E3254;
      --blue-bg:     rgba(20,36,62,.08);
      --blue-bdr:    rgba(20,36,62,.20);
      --teal:        #B8941A;
      --teal-bg:     rgba(184,148,26,.12);
      --coral:       #B8941A;
      --shadow-sm:   0 1px 3px rgba(20,36,62,.06), 0 2px 8px rgba(20,36,62,.04);
      --shadow-md:   0 4px 16px rgba(20,36,62,.08), 0 1px 4px rgba(20,36,62,.04);
      --shadow-lg:   0 8px 32px rgba(20,36,62,.10), 0 2px 8px rgba(20,36,62,.05);
      --r-sm:  8px;
      --r-md: 14px;
      --r-lg: 20px;
      --r-xl: 28px;
      --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
    }

    html { scroll-behavior: smooth; font-size: 16px; }
    body {
      font-family: var(--font);
      background: var(--bg);
      color: var(--txt-1);
      -webkit-font-smoothing: antialiased;
      line-height: 1.6;
      font-size: 1rem;
      /* Prevent iOS text size adjustment */
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }
    /* Tap targets minimum 44px + remove 300ms click delay */
    a, button, [role="button"], input, select, textarea {
      touch-action: manipulation;
    }
    .btn, .back-btn, .nav-dropdown-btn, .faq-q,
    .soc-link, .share-btn, .airbnb-pill, .ft-phone {
      min-height: 44px;
    }

    /* ── Typography ──────────────────────────────────── */
    h1 { font-size: clamp(2.4rem,5vw,4.2rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
    h2 { font-size: clamp(1.9rem,3.5vw,2.8rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
    h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: -.015em; }
    h4 { font-size: 1rem; font-weight: 600; }
    p  { color: var(--txt-2); line-height: 1.7; }

    /* ── Layout ──────────────────────────────────────── */
    .container  { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
    .section    { padding: 96px 0; }
    .section-alt { background: var(--bg-2); }

    .sec-head { text-align: center; margin-bottom: 56px; }
    .sec-head h2 { margin-bottom: 12px; }
    .sec-head p  { max-width: 500px; margin: 0 auto; }

    .label {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: .71rem; font-weight: 700; letter-spacing: .1em;
      text-transform: uppercase; color: var(--blue); margin-bottom: 14px;
    }
    .label::before {
      content: ''; width: 16px; height: 2px;
      background: var(--blue); border-radius: 2px; display: inline-block;
    }

    /* ── Buttons ─────────────────────────────────────── */
    .btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 12px 24px; border-radius: 980px;
      font-size: .88rem; font-weight: 600; font-family: var(--font);
      cursor: pointer; text-decoration: none; border: none;
    }
    .btn-coral   { background: var(--coral); color: #fff; box-shadow: 0 4px 14px rgba(184,148,26,.35); }
    .btn-coral:hover { background: #C9A830; }
    .btn-outline { background: transparent; color: var(--txt-1); border: 1.5px solid var(--border-2); }
    .btn-outline:hover { border-color: var(--blue); color: var(--blue); }
    .btn-ghost   { background: rgba(20,36,62,.07); color: var(--txt-1); }
    .btn-ghost:hover { background: rgba(20,36,62,.13); }

    /* ═══════════════════════════════════════════════════
       NAV
    ═══════════════════════════════════════════════════ */
    header[role="banner"] nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      height: 60px; display: flex; align-items: center; padding: 0 24px;
      background: rgba(245,247,250,.96);
      backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
      border-bottom: 1px solid var(--border);
      box-shadow: var(--shadow-sm);
    }
    .nav-inner {
      max-width: 1160px; width: 100%; margin: 0 auto;
      display: flex; align-items: center; justify-content: space-between;
    }
    .logo { display: flex; align-items: center; text-decoration: none; color: var(--txt-1); }
    .logo-img { height: 48px; width: auto; display: block; }

    /* Nav dropdown */
    .nav-dropdown { position: relative; }
    .nav-dropdown-btn {
      display: inline-flex; align-items: center; gap: 7px;
      font-family: inherit; font-size: .84rem; font-weight: 500; color: var(--txt-2);
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 99px; padding: 7px 16px; cursor: pointer;
      box-shadow: var(--shadow-sm);
    }
    .nav-dropdown-btn:hover { border-color: var(--border-2); color: var(--txt-1); }
    .nav-dropdown-btn svg { transition: transform .2s; }
    .nav-dropdown.open .nav-dropdown-btn svg { transform: rotate(180deg); }
    .nav-dropdown-menu {
      display: none; position: absolute; top: calc(100% + 10px); right: 0;
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--r-md); box-shadow: var(--shadow-lg);
      padding: 6px; min-width: 200px; z-index: 200;
      list-style: none; margin: 0;
    }
    .nav-dropdown.open .nav-dropdown-menu { display: block; }
    .nav-dropdown-menu li { display: block; }
    .nav-dropdown-menu li[role="separator"] { padding: 0; }
    .nav-dropdown-menu a {
      display: block; text-decoration: none; color: var(--txt-2);
      font-size: .86rem; font-weight: 500; padding: 9px 14px;
      border-radius: 8px;
    }
    .nav-dropdown-menu a:hover { background: var(--blue-bg); color: var(--blue); }
    .nav-dropdown-menu hr {
      border: none; border-top: 1px solid var(--border); margin: 5px 8px;
    }

    /* ═══════════════════════════════════════════════════
       HERO
    ═══════════════════════════════════════════════════ */
    .hero {
      min-height: 100vh; padding-top: 120px; padding-bottom: 80px;
      display: flex; align-items: center; position: relative; overflow: hidden;
    }
    .hero::before {
      content: ''; position: absolute;
      top: -100px; right: -200px;
      width: 700px; height: 700px;
      background: radial-gradient(ellipse at center, rgba(20,36,62,.10) 0%, transparent 65%);
      pointer-events: none;
    }
    .hero::after {
      content: ''; position: absolute;
      bottom: -100px; left: -100px;
      width: 500px; height: 500px;
      background: radial-gradient(ellipse at center, rgba(184,148,26,.07) 0%, transparent 65%);
      pointer-events: none;
    }
    .hero-inner {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 72px; align-items: center; position: relative;
    }

    .hero-badge {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--blue-bg); border: 1px solid var(--blue-bdr);
      border-radius: 980px; padding: 5px 14px 5px 8px;
      font-size: .78rem; font-weight: 500; color: var(--blue); margin-bottom: 22px;
    }
    .hero-badge i { width: 6px; height: 6px; background: var(--blue); border-radius: 50%; flex-shrink: 0; }

    .hero h1 { margin-bottom: 18px; }
    .hero h1 em { font-style: normal; color: var(--blue); }
    .hero-desc { font-size: 1.05rem; color: var(--txt-2); margin-bottom: 36px; max-width: 460px; }

    .pillars { display: flex; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
    .pillar  { display: flex; align-items: center; gap: 9px; font-size: .82rem; font-weight: 500; color: var(--txt-2); }
    .pillar-ico {
      width: 30px; height: 30px;
      background: var(--blue-bg); border: 1px solid var(--blue-bdr);
      border-radius: 8px; display: flex; align-items: center; justify-content: center;
      color: var(--blue); flex-shrink: 0;
    }
    .hero-btns { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

    /* ── Form card ──────────────────────────────────── */
    .form-card {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--r-xl); padding: 36px;
      box-shadow: var(--shadow-lg);
    }
    .form-card-title { font-size: 1.15rem; font-weight: 700; margin-bottom: 4px; }
    .form-card-sub   { font-size: .82rem; color: var(--txt-3); margin-bottom: 26px; }

    .fg { margin-bottom: 14px; }
    .fg label {
      display: block; font-size: .71rem; font-weight: 600;
      color: var(--txt-3); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 5px;
    }
    .fg input, .fg select {
      width: 100%; background: var(--bg-2); border: 1.5px solid var(--border);
      border-radius: var(--r-sm); padding: 10px 13px;
      font-family: var(--font); font-size: .88rem; color: var(--txt-1);
      outline: none; appearance: none; -webkit-appearance: none;
    }
    .fg input::placeholder { color: var(--txt-3); }
    .fg input:focus, .fg select:focus { border-color: var(--blue); background: var(--bg-card); box-shadow: 0 0 0 3px var(--blue-bg); }
    .fg select option { background: #FFFFFF; color: #14243E; }
    .fg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }

    .form-btn {
      width: 100%; padding: 13px;
      background: var(--coral); color: #fff;
      border: none; border-radius: var(--r-md);
      font-family: var(--font); font-size: .92rem; font-weight: 700;
      cursor: pointer; margin-top: 6px;
      box-shadow: 0 4px 14px rgba(184,148,26,.35);
    }
    .form-btn:hover { background: #C9A830; }
    .form-note { text-align: center; font-size: .74rem; color: var(--txt-3); margin-top: 10px; }

    .form-success { display: none; text-align: center; padding: 40px 16px; }
    .success-ico {
      width: 52px; height: 52px; background: var(--teal-bg);
      border-radius: 50%; display: flex; align-items: center; justify-content: center;
      margin: 0 auto 16px; color: var(--teal); font-size: 1.4rem;
    }
    .form-success h3 { margin-bottom: 8px; }
    .form-success p  { font-size: .85rem; }

    /* ═══════════════════════════════════════════════════
       STATS
    ═══════════════════════════════════════════════════ */
    .stats {
      background: var(--bg-2);
      border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    }
    .stats-grid {
      display: grid; grid-template-columns: repeat(4,1fr); padding: 40px 0;
    }
    .stat { text-align: center; padding: 0 24px; border-right: 1px solid var(--border); }
    .stat:last-child { border-right: none; }
    .stat-n { font-size: 2.2rem; font-weight: 800; letter-spacing: -.03em; color: var(--blue); }
    .stat-l { font-size: .76rem; color: var(--txt-3); margin-top: 3px; }

    /* ═══════════════════════════════════════════════════
       SERVICES
    ═══════════════════════════════════════════════════ */
    .svc-grid {
      display: grid; grid-template-columns: repeat(5,1fr);
      border: 1px solid var(--border); border-radius: var(--r-lg);
      overflow: hidden; box-shadow: var(--shadow-sm);
    }
    .svc-card {
      background: var(--bg-card); padding: 28px 22px;
      border-right: 1px solid var(--border);
    }
    .svc-card:last-child { border-right: none; }
    .svc-card:hover { background: var(--bg-card-hov); }
    .svc-ico {
      width: 44px; height: 44px;
      background: var(--blue-bg); border: 1px solid var(--blue-bdr);
      border-radius: 12px; display: flex; align-items: center; justify-content: center;
      color: var(--blue); margin-bottom: 16px;
    }
    .svc-card h3 { margin-bottom: 8px; font-size: .95rem; font-weight: 700; }
    .svc-card p  { font-size: .82rem; line-height: 1.6; }

    /* ═══════════════════════════════════════════════════
       HOW IT WORKS
    ═══════════════════════════════════════════════════ */
    .how-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
    .steps { display: flex; flex-direction: column; }
    .step {
      display: flex; gap: 18px; padding: 22px 0;
      border-bottom: 1px solid var(--border);
    }
    .step:first-child { padding-top: 0; }
    .step:last-child  { border-bottom: none; padding-bottom: 0; }
    .step-n {
      width: 34px; height: 34px; flex-shrink: 0; margin-top: 2px;
      background: var(--blue-bg); border: 1.5px solid var(--blue-bdr);
      border-radius: 50%; display: flex; align-items: center; justify-content: center;
      font-size: .78rem; font-weight: 700; color: var(--blue);
    }
    .step h4 { margin-bottom: 5px; }
    .step p  { font-size: .84rem; }

    .how-right { position: sticky; top: 90px; }
    .app-card {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--r-xl); padding: 38px;
      box-shadow: var(--shadow-md);
    }
    .app-card h3 { margin-bottom: 6px; }
    .app-card > p { font-size: .88rem; margin-bottom: 28px; }

    .feat { display: flex; align-items: center; gap: 11px; font-size: .84rem; color: var(--txt-2); }
    .feat-list { display: flex; flex-direction: column; gap: 14px; }
    .check {
      width: 20px; height: 20px; flex-shrink: 0;
      background: var(--teal-bg); border-radius: 50%;
      display: flex; align-items: center; justify-content: center; color: var(--teal);
    }

    /* ═══════════════════════════════════════════════════
       PRICING
    ═══════════════════════════════════════════════════ */
    .pricing-inner { display: grid; grid-template-columns: 1fr 1.35fr; gap: 60px; align-items: center; }
    .pricing-left h2 { margin-bottom: 14px; }
    .pricing-left p  { margin-bottom: 24px; }
    .pricing-feats   { display: flex; flex-direction: column; gap: 13px; margin-bottom: 32px; }

    .price-card {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--r-xl); overflow: hidden;
      box-shadow: var(--shadow-lg);
    }
    .price-top {
      background: linear-gradient(135deg, rgba(20,36,62,.10) 0%, rgba(184,148,26,.06) 100%);
      border-bottom: 1px solid var(--border); padding: 40px; text-align: center;
    }
    .price-eyebrow {
      font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
      color: var(--txt-3); margin-bottom: 12px;
    }
    .price-big { font-size: 5.5rem; font-weight: 800; letter-spacing: -.04em; color: var(--blue); line-height: 1; }
    .price-pct { font-size: 2.2rem; font-weight: 700; color: var(--blue); vertical-align: top; line-height: 1.4; }
    .price-sub { font-size: .84rem; color: var(--txt-3); margin-top: 10px; }

    .price-inc { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 30px 36px; }
    .inc-item  { display: flex; align-items: center; gap: 9px; font-size: .82rem; color: var(--txt-2); }
    .chk-sm {
      width: 18px; height: 18px; flex-shrink: 0;
      background: var(--teal-bg); border-radius: 50%;
      display: flex; align-items: center; justify-content: center; color: var(--teal);
    }
    .price-footer {
      border-top: 1px solid var(--border); padding: 20px 36px 32px;
      display: flex; flex-direction: column; align-items: center; gap: 14px;
    }
    .tags { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
    .tag {
      font-size: .72rem; font-weight: 500; padding: 4px 12px; border-radius: 980px;
      background: var(--bg-2); color: var(--txt-2); border: 1px solid var(--border);
    }
    .price-cta {
      width: 100%; max-width: 290px; padding: 14px;
      background: var(--coral); color: #fff;
      border: none; border-radius: var(--r-md);
      font-family: var(--font); font-size: .9rem; font-weight: 700; cursor: pointer;
      box-shadow: 0 4px 14px rgba(184,148,26,.35);
    }
    .price-cta:hover { background: #C9A830; }

    /* ═══════════════════════════════════════════════════
       PROPERTIES
    ═══════════════════════════════════════════════════ */
    .props-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
    .prop-card {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--r-lg); overflow: hidden;
      box-shadow: var(--shadow-sm);
    }
    .prop-card:hover { box-shadow: var(--shadow-md); }
    .prop-img { height: 200px; position: relative; overflow: hidden; }

    .g1 { background: linear-gradient(150deg, #0d1e2e 0%, #1a4a6e 100%); }
    .g2 { background: linear-gradient(150deg, #0e1f20 0%, #1a5a58 100%); }
    .g3 { background: linear-gradient(150deg, #1a1410 0%, #5a4030 100%); }
    .g4 { background: linear-gradient(150deg, #0e1820 0%, #1a3a5a 100%); }

    .prop-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to bottom, transparent 35%, rgba(0,0,0,.7) 100%);
      display: flex; align-items: flex-end; padding: 14px;
    }
    .prop-tag {
      display: flex; align-items: center; gap: 5px;
      font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.95);
      background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.1);
      backdrop-filter: blur(8px); padding: 4px 10px; border-radius: 980px;
    }
    .prop-art { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; opacity: .15; }
    .prop-info { padding: 18px; }
    .prop-info h4 { font-size: .93rem; margin-bottom: 5px; }
    .prop-info p  { font-size: .77rem; color: var(--txt-3); }
    .prop-meta { display: flex; gap: 12px; margin-top: 10px; font-size: .74rem; color: var(--txt-3); }
    .prop-meta span { display: flex; align-items: center; gap: 4px; }
    .prop-meta .hl  { color: var(--blue); font-weight: 600; }

    /* ═══════════════════════════════════════════════════
       TESTIMONIALS
    ═══════════════════════════════════════════════════ */
    /* ── Social Proof Banner ── */
    .trust-banner {
      position: relative; overflow: hidden;
      min-height: 420px; display: flex; align-items: center; justify-content: center;
      text-align: center; padding: 80px 24px;
    }
    .trust-banner::before {
      content: ''; position: absolute; inset: 0;
      background:
        linear-gradient(135deg, rgba(14,28,40,.75) 0%, rgba(26,50,70,.70) 100%),
        url('images/mdiq-from-above.jpg') center/cover no-repeat;
    }
    .trust-banner-inner { position: relative; z-index: 1; max-width: 780px; }
    .trust-banner h2 {
      font-size: clamp(2rem,5vw,3.6rem); font-weight: 800;
      color: #fff; line-height: 1.15; margin-bottom: 10px; letter-spacing: -.03em;
    }
    .trust-banner h2 span { color: #B8941A; }
    .trust-banner p { font-size: 1.05rem; color: rgba(255,255,255,.7); margin-bottom: 36px; }
    .airbnb-pill {
      display: inline-flex; align-items: center; gap: 14px;
      background: rgba(10,10,10,.7); border: 1.5px solid rgba(255,90,95,.35);
      backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
      border-radius: 99px; padding: 12px 24px 12px 16px;
      text-decoration: none; cursor: pointer;
      box-shadow: 0 0 0 3px rgba(255,90,95,.25);
      transition: border-color .2s, box-shadow .2s;
    }
    .airbnb-pill:hover { border-color: rgba(255,90,95,.7); box-shadow: 0 0 0 4px rgba(255,90,95,.4); }
    .airbnb-logo-wrap {
      width: 36px; height: 36px; border-radius: 50%; background: #FF5A5F;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .airbnb-pill-text { text-align: left; }
    .airbnb-score { font-size: 1.4rem; font-weight: 800; color: #fff; line-height: 1; }
    .airbnb-count { font-size: .72rem; color: rgba(255,255,255,.55); margin-top: 2px; }
    .share-row {
      display: flex; gap: 12px; justify-content: center; margin-top: 28px; flex-wrap: wrap;
    }
    .share-btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 10px 20px; border-radius: 99px;
      font-size: .82rem; font-weight: 600; text-decoration: none;
      transition: opacity .2s, transform .15s;
    }
    .share-btn:hover { opacity: .85; transform: translateY(-1px); }
    .share-wa  { background: #25D366; color: #fff; }
    .share-fb  { background: #1877F2; color: #fff; }
    .avatar {
      width: 38px; height: 38px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: .8rem; font-weight: 700; color: #fff; flex-shrink: 0;
    }
    .a-name { font-size: .84rem; font-weight: 600; color: var(--txt-1); }
    .a-loc  { font-size: .73rem; color: var(--txt-3); }

    /* ═══════════════════════════════════════════════════
       LISTINGS
    ═══════════════════════════════════════════════════ */
    .listing-filters {
      display: flex; align-items: center; gap: 8px;
      flex-wrap: wrap; margin-bottom: 36px;
    }
    .filter-btn {
      font-family: inherit; font-size: .8rem; font-weight: 600;
      padding: 7px 16px; border-radius: 99px; cursor: pointer;
      border: 1.5px solid var(--border); background: var(--bg-card);
      color: var(--txt-2); letter-spacing: .01em;
    }
    .filter-btn:hover  { border-color: var(--border-2); color: var(--txt-1); }
    .filter-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; }

    .listings-grid {
      display: grid; grid-template-columns: repeat(3,1fr); gap: 20px;
    }
    .listings-grid--single {
      grid-template-columns: minmax(0, 480px); justify-content: center;
    }
    .listing-card {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--r-lg); overflow: hidden;
      box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
    }
    .listing-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-2); }

    .listing-img {
      height: 210px; position: relative; overflow: hidden;
      display: flex; align-items: center; justify-content: center;
    }
    .listing-img--tall { height: 260px; background: #0e1f28; }
    .listing-img img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
    .icon-shrink0 { flex-shrink: 0; }
    .listing-img-art { font-size: 3.5rem; opacity: .18; }
    .listing-img-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.65) 100%);
    }
    .listing-badges {
      position: absolute; top: 12px; left: 12px; display: flex; gap: 6px;
    }
    .listing-badge {
      font-size: .66rem; font-weight: 700; letter-spacing: .04em;
      padding: 3px 9px; border-radius: 99px;
      background: rgba(255,255,255,.92); color: #14243E;
    }
    .listing-price-tag {
      position: absolute; bottom: 12px; right: 12px;
      background: rgba(0,0,0,.55); backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,.15);
      color: #fff; font-size: .8rem; font-weight: 700;
      padding: 4px 11px; border-radius: 99px;
    }
    .listing-price-tag span { font-size: .68rem; font-weight: 400; opacity: .8; }

    .listing-body { padding: 16px 18px 20px; flex: 1; display: flex; flex-direction: column; }
    .listing-city {
      font-size: .7rem; font-weight: 700; letter-spacing: .07em;
      text-transform: uppercase; color: var(--blue); margin-bottom: 5px;
    }
    .listing-card h3 { font-size: .95rem; font-weight: 700; margin-bottom: 6px; line-height: 1.35; }
    .listing-desc { font-size: .8rem; color: var(--txt-2); line-height: 1.6; flex: 1; }
    .listing-meta {
      display: flex; align-items: center; justify-content: space-between;
      margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
    }
    .listing-feats { display: flex; gap: 10px; }
    .listing-feat { font-size: .73rem; color: var(--txt-3); display: flex; align-items: center; gap: 4px; }
    .listing-rating { display: flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 700; color: var(--txt-1); }
    .listing-rating span { font-size: .7rem; color: var(--txt-3); font-weight: 400; }

    .listing-cta {
      display: flex; gap: 8px; margin-top: 14px;
    }
    .listing-cta a {
      flex: 1; text-align: center; text-decoration: none;
      font-size: .77rem; font-weight: 700; padding: 9px 8px;
      border-radius: var(--r-sm); border: 1.5px solid var(--border);
      color: var(--txt-2); background: var(--bg);
    }
    .listing-cta a:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-bg); }
    .listing-cta a.primary {
      background: var(--coral); border-color: var(--coral); color: #fff;
    }
    .listing-cta a.primary:hover { background: #C9A830; border-color: #C9A830; }

    @media (max-width: 1024px) { .listings-grid { grid-template-columns: repeat(2,1fr); } }
    @media (max-width: 520px)  { .listings-grid { grid-template-columns: 1fr; } }

    /* ═══════════════════════════════════════════════════
       FAQ
    ═══════════════════════════════════════════════════ */
    .faq-section { padding: 100px 0; background: var(--bg-2); }
    .faq-list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 4px; }
    .faq-item {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--r-md); overflow: hidden;
      box-shadow: var(--shadow-sm);
    }
    .faq-q {
      width: 100%; display: flex; align-items: center; justify-content: space-between;
      gap: 16px; padding: 22px 24px; background: none; border: none; cursor: pointer;
      text-align: left; font-family: inherit; font-size: 1rem; font-weight: 600;
      color: var(--txt-1); letter-spacing: -.01em;
    }
    .faq-q:hover { background: var(--bg-card-hov); }
    .faq-icon {
      flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
      background: var(--bg-2); border: 1px solid var(--border-2);
      display: flex; align-items: center; justify-content: center;
      color: var(--blue); transition: transform .2s, background .2s;
    }
    .faq-item.open .faq-icon { transform: rotate(45deg); background: var(--blue-bg); border-color: var(--blue-bdr); }
    .faq-a {
      max-height: 0; overflow: hidden;
      font-size: .93rem; color: var(--txt-2); line-height: 1.7;
      transition: max-height .3s ease, padding .3s ease;
      padding: 0 24px;
    }
    .faq-item.open .faq-a { max-height: 300px; padding: 0 24px 22px; }

    /* ═══════════════════════════════════════════════════
       FOOTER
    ═══════════════════════════════════════════════════ */
    footer {
      background: var(--bg-2);
      border-top: 1px solid var(--border);
      padding: 60px 0 30px;
    }
    .ft-grid {
      display: grid; grid-template-columns: 2fr 1fr 1fr;
      gap: 48px; margin-bottom: 48px;
    }
    .ft-brand p { font-size: .85rem; color: var(--txt-2); margin-top: 14px; max-width: 240px; }
    .ft-phone {
      display: inline-flex; align-items: center; gap: 7px;
      font-size: .84rem; font-weight: 600; color: var(--txt-2);
      text-decoration: none; margin-top: 14px;
    }
    .ft-phone:hover { color: var(--blue); }
    .ft-socials { display: flex; gap: 9px; margin-top: 16px; }
    .soc-link {
      width: 36px; height: 36px;
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 9px; display: flex; align-items: center; justify-content: center;
      text-decoration: none; color: var(--txt-2);
      box-shadow: var(--shadow-sm);
    }
    .soc-link:hover { border-color: var(--blue); color: var(--blue); }
    .ft-col-title {
      font-size: .72rem; font-weight: 700; letter-spacing: .06em;
      text-transform: uppercase; color: var(--txt-3); margin-bottom: 16px;
    }
    .ft-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .ft-links a { text-decoration: none; font-size: .85rem; color: var(--txt-2); }
    .ft-links a:hover { color: var(--txt-1); }
    .ft-bottom {
      border-top: 1px solid var(--border); padding-top: 24px;
      display: flex; align-items: center; justify-content: space-between;
      font-size: .75rem; color: var(--txt-3); flex-wrap: wrap; gap: 10px;
    }
    .ft-legal { display: flex; gap: 20px; flex-wrap: wrap; }
    .ft-legal a { text-decoration: none; color: var(--txt-3); }
    .ft-legal a:hover { color: var(--txt-2); }

    /* ═══════════════════════════════════════════════════
       SUB-PAGES (Blog / Équipe / À propos)
    ═══════════════════════════════════════════════════ */
    .subpage {
      display: none; min-height: 100vh; background: var(--bg);
    }
    .subpage.active { display: block; }

    /* Top bar with back button */
    .subpage-topbar {
      position: sticky; top: 0; z-index: 90;
      background: var(--bg-card); border-bottom: 1px solid var(--border);
      padding: 0 24px; height: 56px;
      display: flex; align-items: center;
      box-shadow: var(--shadow-sm);
    }
    .back-btn {
      display: inline-flex; align-items: center; gap: 8px;
      font-family: inherit; font-size: .82rem; font-weight: 600; letter-spacing: .02em;
      color: var(--txt-2); background: none; border: none; cursor: pointer; padding: 0;
    }
    .back-btn:hover { color: var(--blue); }
    .back-btn svg { transition: transform .15s; }
    .back-btn:hover svg { transform: translateX(-3px); }
    .subpage-topbar-title {
      margin-left: 16px; padding-left: 16px; border-left: 1px solid var(--border);
      font-size: .82rem; font-weight: 700; color: var(--txt-3);
      letter-spacing: .06em; text-transform: uppercase;
    }

    /* Hero banner */
    .subpage-hero {
      background: var(--bg-2); border-bottom: 1px solid var(--border);
      padding: 64px 24px 56px; text-align: center;
    }
    .subpage-hero .label { margin-bottom: 16px; }
    .subpage-hero h1 { margin-bottom: 14px; }
    .subpage-hero p {
      color: var(--txt-2); font-size: 1.05rem; line-height: 1.7;
      max-width: 520px; margin: 0 auto;
    }

    /* Content body */
    .subpage-body { padding: 64px 0 88px; }

    /* Blog cards */
    .blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
    .blog-card {
      background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
      overflow: hidden; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit;
      display: flex; flex-direction: column;
    }
    .blog-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-2); }
    .blog-img {
      height: 160px; background: var(--bg-2); flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 2.4rem; border-bottom: 1px solid var(--border);
    }
    .blog-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
    .blog-tag {
      font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
      color: var(--blue); margin-bottom: 8px;
    }
    .blog-card-title { font-size: .98rem; font-weight: 700; margin-bottom: 8px; line-height: 1.45; color: var(--txt-1); }
    .step-title { font-size: .92rem; font-weight: 700; display: block; margin-bottom: 5px; color: var(--txt-1); }
    .blog-card p { font-size: .84rem; color: var(--txt-2); line-height: 1.65; flex: 1; }
    .blog-meta { font-size: .73rem; color: var(--txt-3); margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }

    /* Team cards */
    .team-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
    .team-card {
      background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
      padding: 32px 24px 28px; text-align: center; box-shadow: var(--shadow-sm);
    }
    .team-avatar {
      width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 18px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.5rem; font-weight: 800; color: #fff; letter-spacing: -.02em;
    }
    .team-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 5px; }
    .team-role {
      font-size: .78rem; color: var(--blue); font-weight: 700;
      letter-spacing: .04em; text-transform: uppercase; margin-bottom: 14px;
    }
    .team-card p { font-size: .84rem; color: var(--txt-2); line-height: 1.65; }

    /* About */
    .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
    .about-text h2 { font-size: clamp(1.4rem,2.5vw,1.9rem); margin-bottom: 16px; }
    .about-text p { color: var(--txt-2); line-height: 1.75; margin-bottom: 14px; }
    .about-text p:last-of-type { margin-bottom: 0; }
    .about-stat-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 32px; }
    .about-stat {
      background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
      padding: 20px 16px; text-align: center; box-shadow: var(--shadow-sm);
    }
    .about-stat strong { display: block; font-size: 1.8rem; font-weight: 800; color: var(--blue); margin-bottom: 4px; line-height: 1; }
    .about-stat span { font-size: .8rem; color: var(--txt-2); }
    .about-values { display: flex; flex-direction: column; gap: 12px; }
    .about-values .label { margin-bottom: 8px; }
    .about-value {
      display: flex; gap: 14px; align-items: flex-start;
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--r-md); padding: 16px 18px; box-shadow: var(--shadow-sm);
    }
    .about-value-icon {
      width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
      background: var(--blue-bg); border: 1px solid var(--blue-bdr);
      display: flex; align-items: center; justify-content: center; font-size: 1rem;
    }
    .about-value-text h4 { font-size: .9rem; font-weight: 700; margin-bottom: 3px; }
    .about-value-text p { font-size: .82rem; color: var(--txt-2); line-height: 1.55; margin: 0; }

    /* ═══════════════════════════════════════════════════
       UTILITY — remplace les styles inline
    ═══════════════════════════════════════════════════ */
    /* Form */
    .fg-0   { margin-bottom: 0; }
    .fg-top { margin-top: 14px; }
    .success-title { font-size: 1.05rem; display: block; margin-bottom: 8px; }
    /* Stars */
    .stars  { color: #f59e0b; font-size: .95rem; }
    /* FAQ / sec-head */
    .sec-head--center { text-align: center; margin-bottom: 48px; }
    .how-h2 { margin-bottom: 36px; }
    /* PWA / app-card */
    .pwa-header   { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
    .pwa-icon     { width: 52px; height: 52px; background: var(--blue-bg); border: 1px solid var(--blue-bdr); border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--blue); }
    .pwa-subtitle { font-size: .8rem; margin: 0; }
    .pwa-desc     { font-size: .88rem; margin-bottom: 28px; }
    .pwa-steps    { display: flex; flex-direction: column; }
    .pwa-step     { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--border); }
    .pwa-step:last-child { border-bottom: none; }
    .pwa-num      { width: 32px; height: 32px; background: var(--blue-bg); border: 1.5px solid var(--blue-bdr); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; color: var(--blue); flex-shrink: 0; margin-top: 2px; }
    .pwa-step-name   { font-size: .84rem; font-weight: 600; color: var(--txt-1); margin-bottom: 3px; }
    .pwa-step-detail { font-size: .8rem; margin: 0; }
    .icon-inline  { display: inline; vertical-align: middle; }
    .pwa-tip      { margin-top: 20px; background: var(--blue-bg); border: 1px solid var(--blue-bdr); border-radius: var(--r-md); padding: 14px 18px; display: flex; align-items: center; gap: 12px; }
    .pwa-tip p    { font-size: .78rem; margin: 0; color: var(--txt-2); }
    .pwa-highlight { color: var(--txt-1); font-style: normal; font-weight: 500; }
    /* Team */
    .team-avatar--blue  { background: linear-gradient(135deg,#1E3254,#14243E); }
    .team-avatar--coral { background: linear-gradient(135deg,#B8941A,#8a6e12); }
    .team-grid--2col    { grid-template-columns: repeat(2,1fr); max-width: 640px; margin: 0 auto; }

    /* ═══════════════════════════════════════════════════
       LEGAL PAGES
    ═══════════════════════════════════════════════════ */
    .legal-body { max-width: 740px; margin: 0 auto; padding: 56px 24px 96px; }
    .legal-body h2 { font-size: clamp(1.5rem,3vw,2rem); font-weight: 800; margin-bottom: 8px; }
    .legal-body .legal-date { font-size: .8rem; color: var(--txt-3); margin-bottom: 48px; display: block; }
    .legal-section { margin-bottom: 40px; }
    .legal-section h3 {
      font-size: 1rem; font-weight: 700; color: var(--txt-1);
      margin-bottom: 12px; padding-bottom: 10px;
      border-bottom: 1px solid var(--border);
    }
    .legal-section p, .legal-section li {
      font-size: .9rem; color: var(--txt-2); line-height: 1.75; margin-bottom: 10px;
    }
    .legal-section ul { padding-left: 20px; }
    .legal-section ul li { margin-bottom: 6px; }
    .legal-section a { color: var(--blue); text-decoration: none; }
    .legal-section a:hover { text-decoration: underline; }
    .legal-info-box {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--r-md); padding: 20px 24px;
      margin-bottom: 12px; font-size: .88rem; color: var(--txt-2); line-height: 1.7;
    }
    .legal-info-box strong { color: var(--txt-1); }

    /* ═══════════════════════════════════════════════════
       RESPONSIVE — 1024px (tablette)
    ═══════════════════════════════════════════════════ */
    @media (max-width: 1024px) {
      /* Layout */
      .hero-inner    { grid-template-columns: 1fr; gap: 44px; }
      .how-inner     { grid-template-columns: 1fr; gap: 40px; }
      .how-right     { position: static; }
      .pricing-inner { grid-template-columns: 1fr; gap: 40px; }
      .props-grid    { grid-template-columns: repeat(2,1fr); }
      .ft-grid       { grid-template-columns: 1fr 1fr; gap: 32px; }
      /* Services — 3 colonnes */
      .svc-grid      { grid-template-columns: repeat(3,1fr); }
      .svc-card      { border-right: none; border-bottom: 1px solid var(--border); }
      .svc-card:nth-child(1),
      .svc-card:nth-child(2) { border-right: 1px solid var(--border); }
      .svc-card:nth-child(3) { border-right: none; }
      .svc-card:last-child   { border-bottom: none; }
      /* Sub-pages */
      .blog-grid  { grid-template-columns: repeat(2,1fr); }
      .team-grid  { grid-template-columns: repeat(2,1fr); }
    }

    /* ═══════════════════════════════════════════════════
       RESPONSIVE — 768px (mobile large)
    ═══════════════════════════════════════════════════ */
    @media (max-width: 768px) {
      /* Global */
      .section    { padding: 64px 0; }
      .sec-head   { margin-bottom: 36px; }

      /* Nav dropdown — ouvre vers la gauche sur mobile */
      .nav-dropdown-menu { right: 0; left: auto; min-width: 180px; }

      /* Hero */
      .hero          { padding-top: 96px; padding-bottom: 56px; min-height: auto; }
      .hero-desc     { font-size: .95rem; }
      .hero-btns     { flex-direction: column; align-items: stretch; }
      .hero-btns .btn { text-align: center; justify-content: center; }
      .pillars       { flex-direction: column; gap: 10px; }
      .form-card     { padding: 24px 20px; }

      /* Stats */
      .stats-grid    { grid-template-columns: repeat(2,1fr); padding: 28px 0; }
      .stat          { border-right: none; border-bottom: 1px solid var(--border); padding: 16px 0; }
      .stat:nth-child(odd)  { border-right: 1px solid var(--border); }
      .stat:nth-last-child(-n+2) { border-bottom: none; }

      /* Services — 2 colonnes */
      .svc-grid { grid-template-columns: repeat(2,1fr); }
      .svc-card { border-right: none; border-bottom: 1px solid var(--border); }
      .svc-card:nth-child(1),
      .svc-card:nth-child(2),
      .svc-card:nth-child(3) { border-right: none; }
      .svc-card:nth-child(odd)  { border-right: 1px solid var(--border); }
      .svc-card:last-child { border-bottom: none; }

      /* How it works */
      .app-card   { padding: 24px 20px; }

      /* Pricing */
      .price-top  { padding: 28px 24px; }
      .price-big  { font-size: 4rem; }
      .price-inc  { padding: 20px 24px; gap: 10px; }
      .price-footer { padding: 16px 24px 24px; }

      /* Properties */
      .prop-img   { height: 170px; }

      /* FAQ */
      .faq-section { padding: 64px 0; }
      .faq-q       { font-size: .92rem; padding: 18px 18px; }
      .faq-a       { font-size: .88rem; }
      .faq-item.open .faq-a { padding: 0 18px 18px; }

      /* Footer */
      .ft-grid { grid-template-columns: 1fr; gap: 28px; }

      /* Form */
      .fg-row { grid-template-columns: 1fr; }

      /* Sub-pages */
      .blog-grid       { grid-template-columns: 1fr; }
      .team-grid       { grid-template-columns: 1fr; }
      .about-grid      { grid-template-columns: 1fr; }
      .about-stat-row  { grid-template-columns: repeat(3,1fr); gap: 10px; }
      .subpage-hero    { padding: 44px 24px 36px; }
      .subpage-body    { padding: 44px 0 64px; }
    }

    /* ═══════════════════════════════════════════════════
       RESPONSIVE — 520px (mobile portrait)
    ═══════════════════════════════════════════════════ */
    @media (max-width: 520px) {
      /* Global */
      .section    { padding: 52px 0; }
      .container  { padding: 0 16px; }

      /* Hero */
      .hero       { padding-top: 80px; padding-bottom: 44px; }

      /* Services — 1 colonne */
      .svc-grid   { grid-template-columns: 1fr; }
      .svc-card   { border-right: none; border-bottom: 1px solid var(--border); }
      .svc-card:nth-child(odd) { border-right: none; }
      .svc-card:last-child { border-bottom: none; }

      /* Properties */
      .props-grid { grid-template-columns: 1fr; }

      /* Pricing */
      .price-inc  { grid-template-columns: 1fr; }
      .price-big  { font-size: 3.4rem; }

      /* Stats */
      .stat-n     { font-size: 1.8rem; }

      /* FAQ */
      .faq-q      { font-size: .88rem; }

      /* About stats */
      .about-stat-row { grid-template-columns: 1fr 1fr; }

      /* Sub-pages topbar */
      .subpage-topbar-title { display: none; }
    }