/* ── RESET ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --blue:   #0088FF;
      --dark:   #0A0A0F;
      --light:  #F7F7FA;
      --muted:  #8E8E93;
      --gold:   #C9A84C;
      --border: #E5E5EA;
      --r-pill: 999px;
      --shadow: 0 8px 40px rgba(0,0,0,.1);
    }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Montserrat', sans-serif;
      font-weight: 500;
      font-size: 15px;
      color: var(--dark);
      background: #fff;
      overflow-x: hidden;
    }
    a { text-decoration: none; color: inherit; }
    button { cursor: pointer; border: none; background: none; font-family: inherit; font-size: inherit; font-weight: inherit; }
    input, select { font-family: inherit; font-weight: inherit; }

    /* ── NAVBAR ── */
    #navbar {
      position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
      padding: 0 5%;
      transition: background .3s, box-shadow .3s;
    }
    #navbar.scrolled {
      background: rgba(255,255,255,.95);
      backdrop-filter: blur(18px);
      box-shadow: 0 1px 16px rgba(0,0,0,.07);
    }
    .nav-inner {
      max-width: 1320px; margin: 0 auto;
      display: flex; align-items: center; justify-content: space-between;
      height: 66px;
    }
    .nav-logo img { height: 34px; width: auto; display: block; }
    .nav-logo-txt {
      display: none; font-size: 22px; font-weight: 700;
      color: #fff; letter-spacing: -.01em;
    }
    #navbar.scrolled .nav-logo-txt { color: var(--dark); }
    .nav-logo-txt span { color: var(--blue); }

    .nav-links { display: flex; gap: 30px; }
    .nav-links a { font-size: 14px; color: rgba(255,255,255,.85); transition: color .2s; }
    #navbar.scrolled .nav-links a { color: var(--dark); }
    .nav-links a:hover { color: var(--blue) !important; }

    .nav-right { display: flex; align-items: center; gap: 10px; }
    .nav-sel-wrap { display: flex; align-items: center; gap: 4px; }
    .nav-sel-wrap i { color: rgba(255,255,255,.75); font-size: 12px; }
    #navbar.scrolled .nav-sel-wrap i { color: var(--dark); }
    .nav-sel {
      background: transparent; border: none; outline: none;
      font-family: 'Montserrat', sans-serif; font-weight: 500;
      font-size: 13px; color: rgba(255,255,255,.85); cursor: pointer;
    }
    #navbar.scrolled .nav-sel { color: var(--dark); }
    .nav-partner {
      border: 1.5px solid rgba(255,255,255,.5); color: #fff;
      padding: 8px 15px; border-radius: var(--r-pill); font-size: 13px;
    }
    #navbar.scrolled .nav-partner { border-color: var(--dark); color: var(--dark); }
    .nav-enter {
      background: var(--blue); color: #fff;
      padding: 9px 18px; border-radius: var(--r-pill); font-size: 13px;
    }

    /* ── HERO ── */
    #hero {
      position: relative; min-height: 100vh;
      display: flex; flex-direction: column;
      align-items: center; justify-content: flex-end;
      overflow: hidden; padding: 0 16px 48px;
    }
    .hero-bg {
      position: absolute; inset: 0;
      background-color: #0a0e27;
      background-image:
        radial-gradient(ellipse 120% 80% at 18% 12%, rgba(99,102,241,0.22) 0%, transparent 55%),
        radial-gradient(ellipse 110% 70% at 82% 88%, rgba(139,92,246,0.18) 0%, transparent 55%),
        radial-gradient(ellipse 90% 60% at 50% 50%, rgba(56,189,248,0.10) 0%, transparent 60%),
        linear-gradient(135deg, #0a0e27 0%, #14193d 45%, #1a1147 100%);
      background-size: cover; background-position: center;
    }
    .hero-bg::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(to bottom,
        rgba(4,10,22,.28) 0%,
        rgba(4,10,22,.18) 30%,
        rgba(4,10,22,.72) 70%,
        rgba(4,10,22,.88) 100%);
    }

    .hero-content {
      position: relative; z-index: 2;
      display: flex; flex-direction: column; align-items: center;
      gap: 14px; width: 100%; max-width: 1100px;
    }
    .hero-title {
      font-size: clamp(2.4rem, 5vw, 4.2rem); color: #fff;
      text-align: center; line-height: 1.05; font-weight: 600;
    }
    .hero-sub {
      color: white; font-size: 14px; font-weight: 400;
      max-width: 480px; text-align: center; line-height: 1.65;
      /* Reserve 3 lines so longer/shorter facts don't shift the layout below
         (search bar, stats, country pills) when the slideshow rotates. */
      min-height: calc(1.65em * 3);
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto;
    }

    /* stats strip */
    .hero-stats { 
      display: flex;
      background: rgba(255,255,255,.08); backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,.15); border-radius: var(--r-pill);
      overflow: hidden; margin: 4px 0;
    }
    .hstat {
      padding: 11px 26px;
      display: flex; flex-direction: column; align-items: center; gap: 2px;
      border-right: 1px solid rgba(255,255,255,.12);
    }
    .hstat:last-child { border-right: none; }
    .hstat strong { color: #fff; font-size: 15px; font-weight: 700; }
    .hstat span   { color: rgba(255,255,255,.58); font-size: 11px; font-weight: 400; }

    /* country pills — ALWAYS a single row. When the pills would exceed the
       row width (e.g. many countries, or any narrow tablet/mobile) the row
       becomes horizontally scrollable instead of wrapping to a second line.
       The right-edge fade hints "more countries →"; it's invisible when the
       row fits because the pills are then centered and the right edge is
       empty space rather than a pill. `safe center` centers when there's
       room but falls back to a scrollable flex-start when overflowing, so
       the first pill never gets stranded off-screen (the classic
       overflow+center flexbox trap). */
    .hero-countries {
      display: flex; gap: 8px; flex-wrap: nowrap; justify-content: safe center;
      /* max-width:100% + min-width:0 let the scroller shrink to its parent's
         width instead of growing to its content's intrinsic width. Without it
         the nowrap pills give the flex item a min-content floor wider than the
         viewport, so on mobile it overflowed `body{overflow-x:hidden}` and the
         right-hand pills were clipped + unreachable (couldn't scroll to them). */
      max-width: 100%; min-width: 0;
      margin-bottom: 15px;
      overflow-x: auto; overflow-y: hidden;
      scrollbar-width: none; -webkit-overflow-scrolling: touch;
      scroll-padding-inline: 12px;
      /* Edge fade is driven by JS (_updatePillFade in main.js) so it only hints
         at off-screen pills on the side(s) that actually have more content — a
         static mask wrongly shadowed the last pill even when scrolled fully right. */
    }
    .hero-countries::-webkit-scrollbar { display: none; }
    /* Pills must keep their intrinsic width inside the scroller (don't let
       flex shrink them into ellipsis). */
    .hero-countries > .cpill { flex: 0 0 auto; }
    .cpill {
      display: flex; align-items: center; gap: 7px;
      /* Match the .hero-facts-wrap frosted-glass background exactly so the pills
         read as part of the same hero "glass" system (rgba(0,0,0,.42)+blur(10px)). */
      background: rgba(0,0,0,.42);
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
      border: 1.5px solid rgba(255,255,255,.22);
      border-radius: var(--r-pill); padding: 5px 12px 5px 6px;
      color: #fff; font-size: 15px; cursor: pointer;
      transition: background .18s, border-color .18s;
      user-select: none;
    }
    .cpill:hover  { background: rgba(0,136,255,.38); border-color: rgba(0,136,255,.6); }
    .cpill.active { background: var(--blue); border-color: var(--blue); }
    .cpill .fl    { font-size: 20px; }
    .cpill .cnt   {
      font-size: 11px; font-weight: 600; font-family: 'Montserrat', sans-serif;
      background: rgba(255,255,255,.18); border-radius: var(--r-pill);
      padding: 1px 5px; margin-left: 1px;
    }
    .cpill.active .cnt { background: rgba(255,255,255,.28); }

    /* ── SEARCH WIDGET (matches search page) ── */
    #search-wrap {
      position: relative; z-index: 10;
      width: 100%; max-width: 1120px;
      margin-top: 14px;
    }

    .hp-dropbtn {
      display: flex; align-items: center;
      color: #fff; font-size: 15px; font-family: 'Montserrat', sans-serif;
      font-weight: 500; background: transparent; border: none; cursor: pointer;
      white-space: nowrap; padding: 6px 2px;
    }
    .hp-droplabel {
      display: inline-block; width: 140px; height: 24px;
      overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
      text-align: left;
    }

    .hp-dropdown { position: relative; }
    .hp-dropdown-content {
      display: none;
      position: absolute; top: calc(100% + 10px); left: 0;
      min-width: 260px; max-height: 370px; overflow-y: auto;
      background: #fff; border: 1px solid var(--border);
      border-radius: 20px; box-shadow: 0 8px 30px rgba(0,0,0,.14);
      z-index: 600; padding: 6px;
    }
    .hp-dropdown-content.show { display: block; }

    .hp-dropdown-content .cn_choice {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 12px; border-radius: 12px;
      font-size: 13px; cursor: pointer; color: var(--dark);
      transition: background .1s;
    }
    .hp-dropdown-content .cn_choice:hover { background: var(--light); }
    .hp-dropdown-content .cn_choice input[type="checkbox"] { display: none; }
    .hp-dropdown-content .dropdown-section-header {
      font-size: 10px; font-weight: 700; letter-spacing: .08em;
      text-transform: uppercase; color: var(--muted);
      padding: 10px 14px 4px;
    }
    .hp-dropdown-content .circle-mark {
      width: 15px; height: 15px; min-width: 15px;
      border-radius: 50%; border: 2px solid var(--blue);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: background .12s, box-shadow .12s;
    }
    .hp-dropdown-content .cn_choice.sel .circle-mark,
    .hp-dropdown-content .cn_choice input:checked ~ .circle-mark {
      background: var(--blue); box-shadow: inset 0 0 0 3px #fff;
    }
    .hp-dropdown-content .cn_choice.sel { color: var(--blue); font-weight: 600; }

    .hp-dropdown-search {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 12px; margin-bottom: 4px;
      border-bottom: 1px solid var(--border);
      position: sticky; top: 0; background: #fff; z-index: 1;
      border-radius: 14px 14px 0 0;
    }
    .hp-dropdown-search i { color: var(--muted); font-size: 12px; }
    .hp-dropdown-search input {
      flex: 1; border: none; outline: none;
      font-size: 13px; font-family: 'Montserrat', sans-serif;
      font-weight: 500; color: var(--dark); background: transparent;
    }
    .hp-dropdown-empty {
      text-align: center; color: var(--muted); font-size: 13px;
      padding: 20px 14px; font-weight: 400;
    }
    .hp-dropdown-btn-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: 8px 6px 4px; margin-top: 6px; border-top: 1px solid var(--border);
      position: sticky; bottom: 0; background: #fff;
    }
    .hp-clear-btn {
      font-size: 12px; color: var(--muted); background: none; border: 1px solid var(--border);
      border-radius: var(--r-pill); padding: 5px 10px; cursor: pointer;
      font-family: 'Montserrat', sans-serif; font-weight: 500;
    }
    .hp-clear-btn:hover { color: var(--dark); border-color: var(--dark); }
    .hp-next-btn {
      font-size: 12px; color: #fff; background: var(--blue); border: none;
      border-radius: var(--r-pill); padding: 5px 12px; cursor: pointer;
      font-family: 'Montserrat', sans-serif; font-weight: 600;
    }

    /* estate types subtype panel */
    #hp-subtypes-panel {
      position: fixed; background: #fff; border: 1px solid var(--border);
      border-radius: 16px; box-shadow: 0 8px 28px rgba(0,0,0,.12);
      padding: 8px; z-index: 700; display: none; min-width: 180px;
    }
    #hp-subtypes-panel .cn_choice {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 12px; border-radius: 10px; font-size: 13px;
      cursor: pointer; color: var(--dark); transition: background .1s;
    }
    #hp-subtypes-panel .cn_choice:hover { background: var(--light); }
    #hp-subtypes-panel .cn_choice.sel { color: var(--blue); font-weight: 600; }
    #hp-subtypes-panel .cn_choice.sel .circle-mark { background: var(--blue); box-shadow: inset 0 0 0 3px #fff; }
    #hp-subtypes-panel .circle-mark {
      width: 14px; height: 14px; min-width: 14px; border-radius: 50%;
      border: 2px solid var(--blue); flex-shrink: 0;
    }

    #hp-ai-container { transition: opacity .2s; }

    @keyframes pulse {
      0%   { opacity: 1; }
      50%  { opacity: .45; }
      100% { opacity: 1; }
    }

    .cpill-skel {
      display: inline-flex; align-items: center;
      width: 100px; height: 34px;
      background: rgba(255,255,255,.15);
      border: 1.5px solid rgba(255,255,255,.12);
      border-radius: var(--r-pill);
      animation: pulse 1.6s ease infinite;
    }
    .cpill-skel--wide { width: 130px; }

    /* ── PROPERTY CARD ── */
    .pcard {
      background: #fff; border-radius: 18px; overflow: hidden;
      border: 1.5px solid var(--border);
      cursor: pointer;
      position: relative;
    }
    .pcard:hover { box-shadow: 0 8px 32px rgba(0,0,0,.1); transform: translateY(-2px); }

    .pcard-imgwrap {
      position: relative; overflow: hidden;
      height: 175px;
      /* Skeleton shimmer while the carousel image loads (or if it never
         loads). The IMG inside has object-fit:cover so when it paints
         it fully covers this gradient; while it's loading, the user sees
         a moving gradient instead of a flat #eee block — which is what
         made the "grey empty card" screenshot look broken. */
      background: linear-gradient(110deg, #ececec 38%, #f6f6f6 50%, #ececec 62%);
      background-size: 220% 100%;
      animation: nv-skeleton-shimmer 1.6s ease-in-out infinite;
      /* Reserve horizontal pans for the carousel swipe handler in main.js
         (touchstart/touchend on .pcard-imgwrap). Without this, mobile +
         tablet browsers eat horizontal drags as page scroll/back-gesture. */
      touch-action: pan-y;
      -webkit-user-select: none; user-select: none;
    }
    @keyframes nv-skeleton-shimmer {
      0%   { background-position: 100% 0; }
      100% { background-position:   0% 0; }
    }
    .pcard-track {
      display: flex; height: 100%;
    }
    .pcard-slide {
      flex: 0 0 100%; height: 100%;
    }
    .pcard-slide img {
      width: 100%; height: 100%; object-fit: cover; display: block;
    }

    .pcard-prev, .pcard-next {
      position: absolute; top: 50%; transform: translateY(-50%);
      width: 28px; height: 28px; border-radius: 50%;
      background: rgba(0,0,0,.45); color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; z-index: 3; cursor: pointer;
      opacity: 0; transition: opacity .18s;
    }
    .pcard:hover .pcard-prev, .pcard:hover .pcard-next { opacity: 1; }
    .pcard-prev { left: 7px; }
    .pcard-next { right: 7px; }

    .pcard-dots {
      position: absolute; bottom: 7px; right: 9px;
      background: rgba(0,0,0,.55); color: #fff;
      font-size: 10px; font-weight: 600; padding: 2px 7px;
      border-radius: var(--r-pill); z-index: 3; letter-spacing: .02em;
    }

    .pbadge {
      position: absolute; top: 9px; left: 9px; z-index: 3;
      background: var(--blue); color: #fff;
      font-size: 9px; font-weight: 700; letter-spacing: .06em;
    }
    .pbadge-new   { background: var(--blue); }
    .pbadge-hot   { background: #FF3B30; }
    .pbadge-luxury{ background: var(--gold); }
    .pbadge-sale  { background: rgba(0,0,0,.55); }

    .pfav {
      position: absolute; top: 9px; right: 9px; z-index: 3;
      width: 28px; height: 28px; border-radius: 50%;
      background: rgba(255,255,255,.85);
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; cursor: pointer; color: var(--dark);
      transition: background .15s, color .15s;
    }
    .pfav:hover { background: #fff; }

    .pbody { padding: 11px 13px 13px; }
    .paddr {
      font-size: 11px; color: var(--muted); font-weight: 400;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      margin-bottom: 5px;
    }
    .pfeats {
      display: flex; gap: 10px; flex-wrap: wrap;
      font-size: 11px; color: var(--muted); font-weight: 400; margin-bottom: 7px;
    }
    .pprice { font-size: 15px; font-weight: 700; color: var(--dark); }

    .pcard-skel { pointer-events: none; }
    .pimg-skel {
      width: 100%; height: 175px;
      background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
      background-size: 200% 100%;
      animation: shimmer 1.4s ease infinite;
    }
    @keyframes shimmer {
      0%   { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
    .pskel-line {
      height: 11px; border-radius: 4px;
      background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
      background-size: 200% 100%;
      animation: shimmer 1.4s ease infinite;
      margin-bottom: 7px; width: 60%;
    }
    .pskel-line--wide  { width: 85%; }
    .pskel-line--price { width: 45%; height: 14px; margin-top: 4px; margin-bottom: 0; }

    /* ── CONTACT FORM BOX ── */
    .contact-form-box {
      background: #fff; border-radius: 20px; border: 1px solid var(--border);
      box-shadow: var(--shadow); overflow: hidden;
    }
    .cf-header {
      padding: 16px 20px; border-bottom: 1px solid var(--border);
      display: flex; align-items: center; gap: 12px;
    }
    .cf-avatar {
      width: 36px; height: 36px; border-radius: 50%;
      background: linear-gradient(135deg, var(--blue), #6155F5);
      display: flex; align-items: center; justify-content: center;
      font-size: 15px; color: #fff; flex-shrink: 0;
    }
    .cf-title { font-weight: 700; font-size: 14px; }
    .cf-sub   { font-size: 11px; color: #4CFF91; font-weight: 500; margin-top: 1px; }
    .cf-req   { color: #FF3B30; }
    .cf-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .form-field { margin-bottom: 11px; }
    .form-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); display: block; margin-bottom: 5px; }
    .form-input {
      width: 100%; padding: 10px 14px; border: 1.5px solid var(--border);
      border-radius: 12px; font-size: 13px; font-family: inherit; font-weight: 500;
      outline: none; color: var(--dark); background: #fff;
      transition: border-color .2s; box-sizing: border-box;
    }
    .form-input:focus { border-color: var(--blue); }
    select.form-input { cursor: pointer; }
    .form-textarea { resize: vertical; min-height: 90px; }
    .cf-submit {
      width: 100%; padding: 13px; background: var(--blue); color: #fff;
      border-radius: 12px; font-size: 14px; font-weight: 700; margin-top: 2px;
      transition: opacity .2s, transform .15s; display: flex; align-items: center;
      justify-content: center; gap: 8px; border: none; cursor: pointer;
    }
    .cf-submit:hover { opacity: .88; }
    .cf-submit:active { transform: scale(.98); }
    .cf-submit:disabled { opacity: .6; cursor: default; }
    .form-note { font-size: 11px; color: var(--muted); font-weight: 400; margin-top: 10px; text-align: center; line-height: 1.5; }
    .form-note a { color: var(--blue); }
    .contact-form-box .form-field:first-of-type,
    .contact-form-box .cf-row,
    .contact-form-box .form-field { padding: 0 20px; }
    .contact-form-box > form { padding: 16px 0 20px; }
    .cf-submit, .form-note { margin-left: 20px; margin-right: 20px; width: calc(100% - 40px); }
    .cf-success-msg {
      padding: 40px 24px; text-align: center;
      display: flex; flex-direction: column; align-items: center;
      color: var(--dark); min-height: 320px; justify-content: center;
    }
    .cf-success-msg p { color: var(--muted); font-size: 13px; font-weight: 400; }

    /* ── TOAST NOTIFICATION ── */
    #hp-toast {
      position: fixed; bottom: 28px; left: 50%;
      transform: translateX(-50%) translateY(80px);
      background: var(--dark); color: #fff;
      padding: 12px 24px; border-radius: var(--r-pill);
      font-size: 13px; font-weight: 600; white-space: nowrap;
      opacity: 0; transition: opacity .3s, transform .3s; z-index: 9000;
    }
    #hp-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
    #hp-toast.error { background: #FF3B30; }

    /* ── SECTIONS ── */
    .section { padding: 80px 5%; }
    .container { max-width: 1320px; margin: 0 auto; }
    .fade-up {
      opacity: 0; transform: translateY(24px);
      transition: opacity .6s ease, transform .6s ease;
    }
    .fade-up.visible { opacity: 1; transform: none; }

    /* ── LISTINGS ── */
    #listings { padding-top: 80px; }
    .listings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
    .lpanel {
      background: var(--light); border-radius: 30px; padding: 26px;
      display: flex; flex-direction: column; gap: 18px;
    }
    .ltag {
      font-size: 10px; font-weight: 700; letter-spacing: .09em;
      text-transform: uppercase; color: var(--blue);
      background: rgba(0,136,255,.09); padding: 4px 11px;
      border-radius: var(--r-pill); display: inline-block;
    }
    .ltitle { font-size: 1.5rem; font-weight: 700; margin: 6px 0; line-height: 1.2; }
    .lsub { color: var(--muted); font-size: 13px; line-height: 1.6; max-width: 300px; font-weight: 400; }
    .prop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
    .pcard {
      background: #fff; border-radius: 16px; overflow: hidden;
      border: 1px solid var(--border); cursor: pointer;
      transition: box-shadow .25s, transform .25s;
    }
    .pcard:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
    .pimg {
      width: 100%; height: 148px;
      background-size: cover; background-position: center;
      position: relative; overflow: hidden; transition: transform .4s;
    }
    .pcard:hover .pimg { transform: scale(1.05); }
    .pbadge {
      position: absolute; top: 8px; left: 8px;
      background: rgba(255,255,255,.92); backdrop-filter: blur(5px);
      font-size: 10px; font-weight: 700; padding: 2px 8px;
      border-radius: var(--r-pill); color: var(--blue);
    }
    .pfav {
      position: absolute; top: 8px; right: 8px;
      background: rgba(255,255,255,.92); width: 27px; height: 27px;
      border-radius: 50%; display: flex; align-items: center; justify-content: center;
      font-size: 12px; color: var(--muted); cursor: pointer; transition: color .2s;
    }
    .pfav:hover { color: #0088FF; }
    .pbody { padding: 11px; }
    .paddr { font-size: 11px; color: var(--muted); margin-bottom: 5px; line-height: 1.4; font-weight: 400; }
    .pfeats { display: flex; gap: 8px; font-size: 11px; color: var(--muted); margin-bottom: 6px; font-weight: 400; }
    .pprice { font-size: 1rem; font-weight: 700; }
    .pfooter { display: flex; align-items: center; gap: 9px; }
    .ibtn {
      width: 35px; height: 35px; border-radius: 50%;
      border: 1.5px solid var(--dark);
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; transition: background .2s, color .2s;
    }
    .ibtn:hover { background: var(--dark); color: #fff; }
    .mbtn {
      margin-left: auto; display: flex; align-items: center; gap: 7px;
      border: 1.5px solid var(--dark); border-radius: var(--r-pill);
      padding: 7px 16px; font-size: 13px;
      transition: background .2s, color .2s;
    }
    .mbtn:hover { background: var(--dark); color: #fff; }
    .ad-banner {
      border-radius: 20px; height: 165px; overflow: hidden;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; background: linear-gradient(135deg, #1a1000, #3d2a00);
    }
    .ad-content { text-align: center; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 5px; }
    .ad-star { font-size: 24px; color: var(--gold); }
    .ad-sup { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); }
    .ad-brand { font-size: 18px; font-weight: 700; color: var(--gold); }
    .ad-sub { font-size: 9px; color: rgba(255,255,255,.45); letter-spacing: .09em; text-transform: uppercase; }

    /* ── AD SLIDER ── */
    .ad-slider-wrap {
      border-radius: 20px; overflow: hidden;
      position: relative; height: 165px;
    }
    .ad-slider-track {
      display: flex; height: 100%;
      transition: transform .65s cubic-bezier(.4,0,.2,1);
    }
    .ad-slide {
      flex: 0 0 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
    }
    .ad-slide-gold  { background: linear-gradient(135deg, #1a1000, #3d2a00); }
    .ad-slide-dark  { background: linear-gradient(135deg, #0d0d1a, #1a1a3e); }
    .ad-slide-green { background: linear-gradient(135deg, #001a0a, #003318); }
    .ad-slide-wine  { background: linear-gradient(135deg, #1a000a, #3d0018); }
    .ad-dots {
      position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
      display: flex; gap: 5px;
    }
    .ad-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: rgba(255,255,255,.35);
      transition: background .3s, transform .3s;
    }
    .ad-dot.on { background: #fff; transform: scale(1.3); }

    /* ── GOLDEN VISA ── */
    #golden-visa { background: var(--dark); position: relative; overflow: hidden; }
    #golden-visa::before {
      content: ''; position: absolute; width: 520px; height: 520px; border-radius: 50%;
      background: radial-gradient(circle, rgba(0,136,255,.16), transparent 70%);
      top: -160px; right: -60px; pointer-events: none;
    }
    .gv-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 60px; align-items: center; }
    .gv-tag  { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--gold); background: rgba(201,168,76,.14); padding: 4px 11px; border-radius: var(--r-pill); display: inline-block; margin-bottom: 14px; }
    .gv-title { color: #fff; font-size: clamp(2rem, 4.5vw, 3.6rem); font-weight: 700; line-height: 1.1; margin-bottom: 16px; }
    .gv-body  { color: rgba(255,255,255,.52); font-size: 13px; line-height: 1.75; margin-bottom: 24px; font-weight: 400; }
    .gv-btns  { display: flex; gap: 10px; flex-wrap: wrap; }
    .gv-primary { background: var(--blue); color: #fff; padding: 10px 20px; border-radius: var(--r-pill); font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
    .gv-outline { border: 1.5px solid rgba(255,255,255,.3); color: #fff; padding: 10px 18px; border-radius: var(--r-pill); font-size: 13px; }
    .gv-right { display: flex; flex-direction: column; gap: 13px; }
    .gv-card  { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; padding: 18px 20px; }
    .gv-card p { color: rgba(255,255,255,.52); font-size: 13px; line-height: 1.7; font-weight: 400; }
    .gv-top7  { background: rgba(0,136,255,.12); border-color: rgba(0,136,255,.28); }
    .gv-num   { font-size: 2.8rem; font-weight: 700; color: var(--blue); }
    .gv-nlbl  { color: #fff; font-size: .95rem; font-weight: 600; margin-top: 2px; }
    .cscroll  { display: flex; gap: 9px; overflow-x: auto; overflow-y: visible; scrollbar-width: none; padding: 4px; margin: -4px; }
    .cscroll::-webkit-scrollbar { display: none; }
    .ccard    { flex-shrink: 0; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 13px; padding: 10px 14px; display: flex; align-items: center; gap: 9px; color: #fff; font-size: 13px; cursor: pointer; transition: background .2s; }
    .ccard:hover { background: rgba(255,255,255,.12); }
    .ccard-flag { font-size: 20px; }
    .ccard-lbl small { display: block; font-size: 10px; color: var(--blue); font-weight: 700; letter-spacing: .05em; }

    /* ── Residency & Citizenship showcase — compact carousel (task 106) ── */
    .rcs-head     { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; flex-wrap: wrap; }
    .rcs-head-txt { max-width: 640px; }
    .rcs-tag      { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--gold); background: rgba(201,168,76,.14); padding: 5px 12px; border-radius: var(--r-pill); display: inline-block; margin-bottom: 12px; }
    .rcs-title    { color: #fff; font-size: clamp(1.5rem, 3vw, 2.3rem); font-weight: 700; line-height: 1.14; margin-bottom: 8px; }
    .rcs-summary  { color: rgba(255,255,255,.5); font-size: 13px; font-weight: 500; letter-spacing: .01em; }
    .rcs-cta      { background: var(--blue); color: #fff; padding: 11px 20px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; transition: filter .2s, transform .2s; }
    .rcs-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }

    .rcs-carousel-wrap { position: relative; }
    .rcs-carousel  { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 4px; scrollbar-width: none; padding: 4px; margin: -4px; }
    .rcs-carousel::-webkit-scrollbar { display: none; }
    .rcs-cc        { scroll-snap-align: start; flex: 0 0 228px; display: flex; flex-direction: column; gap: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 16px; color: #fff; text-decoration: none; transition: background .2s, border-color .2s, transform .2s; }
    .rcs-cc:hover  { background: rgba(255,255,255,.09); border-color: rgba(0,136,255,.4); transform: translateY(-3px); }
    .rcs-cc-top    { display: flex; align-items: center; gap: 10px; }
    .rcs-cc-flag   { font-size: 26px; line-height: 1; flex-shrink: 0; }
    .rcs-cc-name   { font-size: 16px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rcs-cc-n      { margin-left: auto; flex-shrink: 0; min-width: 22px; height: 22px; padding: 0 6px;
                     display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
                     background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
                     font-size: 12px; font-weight: 700; color: rgba(255,255,255,.85); }
    /* Per-type rows: each program type with its OWN "from" price. */
    .rcs-cc-types  { display: flex; flex-direction: column; gap: 7px; }
    .rcs-cc-type   { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .rcs-cc-type .rcs-pill { flex-shrink: 0; }
    .rcs-cc-type-from { min-width: 0; font-size: 12px; font-weight: 700; color: #fff; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .rcs-req       { color: rgba(255,255,255,.5); font-weight: 600; font-size: 11.5px; }
    .rcs-pill      { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: var(--r-pill); border: 1px solid transparent; white-space: nowrap; }
    .rcs-pill i    { font-size: 9px; }
    .rcs-pill-golden      { color: var(--gold); background: rgba(201,168,76,.13); border-color: rgba(201,168,76,.3); }
    .rcs-pill-residency   { color: #4FA8FF; background: rgba(0,136,255,.13); border-color: rgba(0,136,255,.32); }
    .rcs-pill-permanent   { color: #5FE0AE; background: rgba(52,211,153,.13); border-color: rgba(52,211,153,.30); }
    .rcs-pill-citizenship { color: #C99BFF; background: rgba(160,100,255,.14); border-color: rgba(160,100,255,.34); }
    .rcs-cc-foot   { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 4px; color: rgba(255,255,255,.55); font-size: 12.5px; font-weight: 500; }
    .rcs-cc-foot i { color: var(--blue); transition: transform .2s; }
    .rcs-cc:hover .rcs-cc-foot i { transform: translateX(3px); }
    /* "≈ <header currency>" exchange pill in the showcase card foot. */
    .rcs-fx { display: inline-block; margin-left: 2px; padding: 1px 7px; border-radius: 999px;
              background: rgba(0,136,255,.14); border: 1px solid rgba(0,136,255,.30);
              color: #6EB7FF; font-weight: 700; font-size: 11.5px; white-space: nowrap; }

    .rcs-nav       { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 38px; height: 38px; border-radius: 50%; background: rgba(20,20,28,.85); border: 1px solid rgba(255,255,255,.14); color: #fff; display: none; align-items: center; justify-content: center; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s; }
    .rcs-nav:hover { background: var(--blue); }
    .rcs-nav-prev  { left: -10px; }
    .rcs-nav-next  { right: -10px; }
    .rcs-carousel-wrap.rcs-has-overflow .rcs-nav { display: flex; }
    @media (max-width: 768px) { .rcs-carousel-wrap.rcs-has-overflow .rcs-nav { display: none; } }

    /* ── BENEFITS ── */
    #benefits { background: var(--light); }
    .benefits-hd { text-align: center; margin-bottom: 44px; }
    .sec-tag { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--blue); background: rgba(0,136,255,.09); padding: 4px 11px; border-radius: var(--r-pill); display: inline-block; margin-bottom: 11px; }
    .sec-title { font-size: clamp(1.7rem, 3.2vw, 2.6rem); font-weight: 700; }
    .stats-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 36px; }
    .stat-card { background: #fff; border-radius: 20px; padding: 24px 26px; border: 1px solid var(--border); background: linear-gradient(155deg,#fff 0%,rgba(0,136,255,.04) 100%); }
    .stat-lbl  { color: var(--muted); font-size: 12px; margin-bottom: 5px; font-weight: 400; }
    .stat-num  { font-size: clamp(2rem,3.2vw,2.8rem); font-weight: 700; color: var(--dark); line-height: 1; }
    .map-area  { background: #fff; border-radius: 26px; padding: 24px; border: 1px solid var(--border); }
    .map-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
    .mfpill { padding: 5px 14px; border-radius: var(--r-pill); border: 1.5px solid #ccc; font-size: 13px; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
    .mfpill.on,.mfpill:hover { background: var(--dark); border-color: var(--dark); color: #fff; }
    #benefits-map { width: 100%; height: 380px; border-radius: 14px; overflow: hidden; }
    .map-popup-inner { font-family:'Montserrat',sans-serif; padding: 2px 0; }
    .map-popup-inner strong { display:block; font-size:13px; font-weight:700; color:var(--dark); margin-bottom:3px; }
    .map-popup-inner span   { font-size:12px; color:var(--muted); font-weight:400; }
    .mapboxgl-popup-content { border-radius:12px !important; padding:12px 16px !important; box-shadow:0 4px 18px rgba(0,0,0,.12) !important; border:1px solid var(--border) !important; }
    .mapboxgl-popup-tip { display:none !important; }

    #hero-sub {
      transition: opacity .28s ease, transform .28s ease;
    }
    #hero-sub.facts-out {
      opacity: 0;
      transform: translateY(6px);
    }
    #hero-sub.facts-in {
      animation: factsSlideIn .4s ease forwards;
    }
    @keyframes factsSlideIn {
      from { opacity: 0; transform: translateY(-6px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    #facts-bar {
      display: flex;
      gap: 6px;
      margin-top: 12px;
      margin-bottom: 4px;
    }
    .facts-dot {
      height: 3px;
      border-radius: 2px;
      background: rgba(255,255,255,.25);
      flex: 1;
      max-width: 48px;
      cursor: pointer;
      overflow: hidden;
      position: relative;
      transition: background .2s;
    }
    .facts-dot::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(255,255,255,.85);
      transform: scaleX(0);
      transform-origin: left;
    }
    .facts-dot.animating::after {
      animation: factsDotFill var(--dur, 5s) linear forwards;
    }
    .facts-dot.on {
      background: rgba(255,255,255,.35);
    }
    @keyframes factsDotFill {
      from { transform: scaleX(0); }
      to   { transform: scaleX(1); }
    }

    .ccard-skel {
      pointer-events: none;
      cursor: default;
    }
    .cimg-skel {
      width: 40px; height: 28px;
      background: #E5E5EA;
      border-radius: 4px;
      margin: 0 auto 8px;
      animation: skelPulse 1.4s ease-in-out infinite;
    }
    .clbl-skel {
      height: 12px;
      background: #E5E5EA;
      border-radius: 4px;
      width: 70%;
      margin: 0 auto;
      animation: skelPulse 1.4s ease-in-out infinite;
    }
    @keyframes skelPulse {
      0%, 100% { opacity: 1; }
      50%       { opacity: .45; }
    }

    .map-area { position: relative; }
    #benefits-map {
      position: relative !important;
      overflow: visible !important;
      border-radius: 0 !important;
    }
    .nova-map-popover {
      position: absolute;
      z-index: 10;
      width: 230px;
      background: #fff;
      border-radius: 20px;
      padding: 18px 18px 14px;
      box-shadow: 0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08);
      border: 1px solid #E5E5EA;
      pointer-events: auto;
      animation: popoverIn .22s cubic-bezier(.34,1.56,.64,1);
    }
    @keyframes popoverIn {
      from { opacity: 0; transform: translateY(6px) scale(.96); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    .nova-map-popover__close {
      position: absolute; top: 10px; right: 10px;
      background: #F2F2F7; border: none; border-radius: 50%;
      width: 26px; height: 26px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      color: #8E8E93; font-size: 11px;
      transition: background .15s;
    }
    .nova-map-popover__close:hover { background: #E5E5EA; }
    .nova-map-popover__flag {
      width: 44px;
      margin-bottom: 10px;
      display: block;
      line-height: 0;
    }
    .nova-map-popover__flag img {
      display: block;
      width: 44px;
      height: auto;
      border-radius: 4px;
    }
    .nova-map-popover__name {
      font-size: 17px; font-weight: 700;
      font-family: 'Montserrat', sans-serif;
      color: #0A0A0F; margin-bottom: 12px;
    }
    .nova-map-popover__stats {
      display: flex; align-items: center;
      background: #F2F2F7; border-radius: 12px;
      padding: 10px 0; margin-bottom: 11px;
    }
    .nova-map-popover__stat {
      flex: 1; display: flex; flex-direction: column;
      align-items: center; gap: 2px;
    }
    .nova-map-popover__stat-val {
      font-size: 18px; font-weight: 700;
      font-family: 'Montserrat', sans-serif;
      color: #0088FF;
    }
    .nova-map-popover__stat-lbl {
      font-size: 11px; color: #8E8E93;
      font-family: 'Montserrat', sans-serif;
    }
    .nova-map-popover__divider {
      width: 1px; height: 32px;
      background: #D1D1D6; flex-shrink: 0;
    }
    .nova-map-popover__fact {
      font-size: 11px; color: #555; line-height: 1.5;
      margin-bottom: 11px;
      font-family: 'Montserrat', sans-serif;
      transition: opacity 0.3s ease;
    }
    .nova-map-popover__fact i { color: #0088FF; margin-right: 4px; }
    .nova-map-popover__cta {
      width: 100%;
      background: #0088FF; color: #fff; border: none;
      border-radius: 12px; padding: 9px 0;
      font-size: 13px; font-weight: 600; cursor: pointer;
      font-family: 'Montserrat', sans-serif;
      display: flex; align-items: center; justify-content: center; gap: 7px;
      transition: opacity .2s;
    }
    .nova-map-popover__cta:hover { opacity: .88; }

    /* ── Map info window — MOBILE/TABLET bottom sheet (≤1200px) ──────────────
       Instead of the 230px point-anchored card, dock a full-width card to the
       viewport bottom that slides up over a dimming scrim. Class + scrim are
       added by _showMapPopover in main.js; the media query keeps the desktop
       card untouched. */
    .nova-map-popover-scrim {
      position: fixed; inset: 0; z-index: 9990;
      background: rgba(0,0,0,0);
      transition: background .28s ease;
    }
    .nova-map-popover-scrim.show { background: rgba(0,0,0,.45); }

    @media (max-width: 1200px) {
      .nova-map-popover.nova-map-popover--sheet {
        position: fixed !important;
        left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
        width: 100% !important; max-width: 100% !important;
        z-index: 9991 !important;
        border-radius: 24px 24px 0 0 !important;
        padding: 22px 22px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
        box-shadow: 0 -10px 40px rgba(0,0,0,.22) !important;
        /* Override the desktop popoverIn keyframe with a slide-up transition. */
        animation: none !important;
        transform: translateY(100%);
        transition: transform .34s cubic-bezier(.32,.72,.24,1);
      }
      .nova-map-popover.nova-map-popover--sheet.show { transform: translateY(0); }
      /* A grab handle hint + larger, thumb-friendly content in the sheet. */
      .nova-map-popover--sheet::before {
        content: ''; position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
        width: 38px; height: 4px; border-radius: 2px; background: #D1D1D6;
      }
      .nova-map-popover--sheet .nova-map-popover__flag,
      .nova-map-popover--sheet .nova-map-popover__flag img { width: 54px; }
      .nova-map-popover--sheet .nova-map-popover__flag { margin-top: 6px; margin-bottom: 12px; }
      .nova-map-popover--sheet .nova-map-popover__name { font-size: 21px; margin-bottom: 14px; }
      .nova-map-popover--sheet .nova-map-popover__stats { padding: 14px 0; margin-bottom: 14px; }
      .nova-map-popover--sheet .nova-map-popover__stat-val { font-size: 21px; }
      .nova-map-popover--sheet .nova-map-popover__stat-lbl { font-size: 12px; }
      .nova-map-popover--sheet .nova-map-popover__fact { font-size: 12.5px; margin-bottom: 16px; }
      .nova-map-popover--sheet .nova-map-popover__cta { padding: 14px 0; font-size: 15px; border-radius: 14px; }
      .nova-map-popover--sheet .nova-map-popover__close { top: 16px; right: 16px; width: 30px; height: 30px; font-size: 13px; }
    }

    .partner-grid {
      align-items: center !important;
    }
    .partner-sticky {
      position: relative !important;
      top: auto !important;
      text-align: center;
    }
    .step {
      opacity: 1 !important;
      filter: none !important;
      pointer-events: auto !important;
    }
    .step:not(.on) {
      opacity: 1 !important;
    }

    /* ── PARTNER STEPS ── */
    #partner {
      background: var(--dark);
      position: relative;
      min-height: 80vh;
      display: flex;
      align-items: center;
    }

    #partner::before {
      content: '';
      position: absolute;
      inset: 0;
      background: url('invite_partners.svg') center/cover no-repeat;
      opacity: 1;
      pointer-events: none;
    }

    .partner-grid { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
    .partner-sticky { position:sticky; top:30vh; }
    .ptag  { font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.6); background:rgba(255,255,255,.1); padding:4px 11px; border-radius:var(--r-pill); display:inline-block; margin-bottom:14px; }
    .ptitle { color:#fff; font-size:clamp(1.9rem,3.8vw,3rem); font-weight:700; line-height:1.12; margin-bottom:14px; }
    .psub   { color:rgba(255,255,255,.5); font-size:13px; line-height:1.75; margin-bottom:24px; font-weight:400; }
    .pbtn   { background:var(--blue); color:#fff; padding:11px 22px; border-radius:var(--r-pill); font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:8px; }
    .steps  { display:flex; flex-direction:column; }
    .step   { display:flex; gap:20px; padding:32px 0; border-bottom:1px solid rgba(255,255,255,.07); opacity:.3; transition:opacity .5s; }
    .step:last-child { border-bottom:none; }
    .step.on { opacity:1; }
    .step-n { font-size:2.8rem; font-weight:700; color:var(--blue); line-height:1; flex-shrink:0; width:54px; }
    .step-b h4 { color:#fff; font-size:.98rem; font-weight:600; margin-bottom:7px; }
    .step-b p  { color:rgba(255,255,255,.48); font-size:13px; line-height:1.7; margin-bottom:13px; font-weight:400; }
    .step-link { display:inline-flex; align-items:center; gap:7px; background:rgba(0,136,255,.14); border:1px solid rgba(0,136,255,.35); color:var(--blue); padding:7px 15px; border-radius:var(--r-pill); font-size:13px; }

    /* ── CONTACT ── */
    #contact { background: var(--light); }
    .contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:start; }
    .ctag   { font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--blue); background:rgba(0,136,255,.09); padding:4px 11px; border-radius:var(--r-pill); display:inline-block; margin-bottom:13px; }
    .ctitle { font-size:clamp(1.7rem,3.2vw,2.6rem); font-weight:700; margin-bottom:13px; }
    .csub   { color:var(--muted); font-size:13px; line-height:1.7; margin-bottom:20px; font-weight:400; }
    .cinfo  { display:flex; flex-direction:column; gap:11px; margin-bottom:22px; }
    .ci-item { display:flex; align-items:center; gap:11px; font-size:14px; }
    .ci-icon { width:35px; height:35px; border-radius:50%; background:rgba(0,136,255,.1); color:var(--blue); display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
    .wa-btn  { display:inline-flex; align-items:center; gap:9px; background:var(--dark); color:#fff; padding:10px 18px; border-radius:var(--r-pill); font-size:14px; font-weight:600; }
    .chat-box { background:#fff; border-radius:20px; border:1px solid var(--border); box-shadow:var(--shadow); display:flex; flex-direction:column; height:410px; overflow:hidden; }
    .chat-hd  { padding:13px 17px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:11px; }
    .chat-av  { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#6155F5,var(--blue)); display:flex; align-items:center; justify-content:center; font-size:13px; color:#fff; flex-shrink:0; }
    .chat-hd-title { font-weight:700; font-size:13px; }
    .chat-online   { font-size:11px; color:#4CFF91; font-weight:500; }
    .chat-msgs { flex:1; overflow-y:auto; padding:13px; display:flex; flex-direction:column; gap:9px; }
    .chat-msgs::-webkit-scrollbar { width:3px; }
    .chat-msgs::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
    .msg   { max-width:80%; }
    .msg-b { align-self:flex-start; }
    .msg-u { align-self:flex-end; }
    .msg-bub { padding:9px 13px; border-radius:15px; font-size:13px; line-height:1.5; font-weight:400; }
    .msg-b .msg-bub { background:var(--light); color:var(--dark); border-bottom-left-radius:4px; }
    .msg-u .msg-bub { background:var(--blue); color:#fff; border-bottom-right-radius:4px; }
    .msg-t  { font-size:10px; color:var(--muted); margin-top:2px; padding:0 3px; font-weight:400; }
    .chat-in { padding:10px 12px; border-top:1px solid var(--border); display:flex; gap:8px; align-items:center; }
    .chat-inp { flex:1; border:1.5px solid var(--border); border-radius:var(--r-pill); padding:9px 14px; font-size:13px; outline:none; font-family:'Montserrat',sans-serif; font-weight:500; transition:border-color .2s; }
    .chat-inp:focus { border-color:var(--blue); }
    .chat-send { width:35px; height:35px; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; }

    /* ── FOOTER ── */
    footer { background:var(--dark); color:rgba(255,255,255,.65); padding:54px 5% 26px; }
    .fg { max-width:1320px; margin:0 auto; display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:36px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.07); }
    .fbrand .flogo { font-size:21px; font-weight:700; color:#fff; margin-bottom:11px; }
    .fbrand .flogo span { color:var(--blue); }
    .fbrand p { font-size:13px; line-height:1.7; margin-bottom:14px; font-weight:400; }
    .fsocials { display:flex; gap:8px; }
    .fsc { width:31px; height:31px; border-radius:50%; border:1px solid rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; font-size:12px; color:rgba(255,255,255,.55); cursor:pointer; transition:border-color .2s,color .2s; }
    .fsc:hover { border-color:var(--blue); color:var(--blue); }
    .fcol h5 { color:#fff; font-size:11px; font-weight:700; margin-bottom:13px; letter-spacing:.04em; text-transform:uppercase; }
    .fcol a  { display:block; font-size:13px; color:rgba(255,255,255,.52); margin-bottom:8px; transition:color .2s; font-weight:400; }
    .fcol a:hover { color:#fff; }
    .fbtm { max-width:1320px; margin:20px auto 0; display:flex; justify-content:space-between; font-size:11px; color:rgba(255,255,255,.3); font-weight:400; }

    /* ── FLOAT CHAT BTN ── */
    #fchat { position:fixed; bottom:22px; right:22px; z-index:999; width:50px; height:50px; border-radius:50%; background:linear-gradient(135deg,#6155F5,var(--blue)); color:#fff; font-size:17px; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(0,136,255,.42); cursor:pointer; transition:transform .2s; }
    #fchat:hover { transform:scale(1.08); }

    /* ── RESPONSIVE ── */
    @media(max-width:1024px){
      .listings-grid,.gv-grid,.partner-grid,.contact-grid{grid-template-columns:1fr;}
      .stats-row{grid-template-columns:1fr 1fr;}
      .fg{grid-template-columns:1fr 1fr;}
      .srow1{flex-wrap:wrap;}
      .sdrop-wrap{flex:0 0 50%;border-right:none;border-bottom:1px solid rgba(255,255,255,.16);}
      .sdrop-wrap:nth-child(2){border-bottom:none;}
    }
    @media(max-width:640px){
      .prop-grid{grid-template-columns:1fr;}
      .stats-row{grid-template-columns:1fr;}
      .nav-links{display:none;}
      .fg{grid-template-columns:1fr;}
      .hero-stats{flex-wrap:wrap;}
    }

/* ── Search box cycling text animation ── */
#search-cycling-text {
  display: inline-block;
  transition: opacity 0.26s ease, transform 0.26s ease;
}

#search-cycling-text.search-text-out {
  opacity: 0;
  transform: translateY(6px);
}

#search-cycling-text.search-text-in {
  animation: searchFadeIn 0.4s ease forwards;
}

@keyframes searchFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═══════════════════════════════════════════════════════════
   NOTE: The old "MOBILE SEARCH — COMPACT PILL + BOTTOM SHEET"
   block has been REMOVED from this file.
   
   All mobile/tablet responsive search styles are now in:
     hp-search-responsive.css
   
   The old block referenced undefined CSS vars (--nova-glass,
   --nova-blue, --nova-ai, --nova-radius, --nova-radius-sm)
   which caused rendering failures on mobile.
   ═══════════════════════════════════════════════════════════ */