:root {
      --navy:       #0B1628;
      --navy-mid:   #152338;
      --navy-dark:  #060E1A;
      --gold:       #B59478;
      --gold-light: #D4A96A;
      --gold-dark:  #8a6a4a;
      --white:      #FFFFFF;
      --bg:         #F7F5F2;
      --bg-dark:    #EDE9E4;
      --text-muted: #7a7a7a;
      --font-display: 'Noto Kufi Arabic', Georgia, serif;
      --font-main:    'Noto Kufi Arabic', sans-serif;
      --radius-lg:  16px;
      --shadow-sm:  0 2px 12px rgba(0,0,0,0.06);
      --shadow-md:  0 8px 32px rgba(0,0,0,0.10);
      --shadow-lg:  0 20px 60px rgba(0,0,0,0.15);
      --transition: all 0.32s cubic-bezier(0.4,0,0.2,1);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: var(--font-main); background: var(--bg); color: var(--navy); }

    /* ── Breadcrumb ── */
    .page-breadcrumb {
      display: flex; align-items: center; gap: 8px;
      color: rgba(255,255,255,0.45); font-size: 0.8rem;
    }
    .page-breadcrumb a { color: rgba(255,255,255,0.45); text-decoration: none; transition: color .3s; }
    .page-breadcrumb a:hover { color: var(--gold-light); }
    .page-breadcrumb .sep { font-size: 0.6rem; opacity: .4; }
    .page-breadcrumb .crumb-current { color: var(--gold-light); }

    /* ══ HERO ══ */
    #invest-hero {
      background: linear-gradient(155deg, var(--navy) 0%, #101f38 55%, var(--navy-dark) 100%);
      padding: 130px 0 80px;
      position: relative;
      overflow: hidden;
    }
    #invest-hero::before {
      content: '';
      position: absolute; inset: 0;
      background: url('../assets/investment.webp') center/cover no-repeat;
      opacity: 0.05;
    }
    .h-geo { position: absolute; border-radius: 50%; pointer-events: none; }
    .h-geo.g1 { width: 480px; height: 480px; top: -180px; left: -100px; border: 1px solid rgba(181,148,120,.07); }
    .h-geo.g2 { width: 260px; height: 260px; bottom: -70px; right: 6%; border: 1px solid rgba(181,148,120,.1); }
    .h-geo.g3 { width: 110px; height: 110px; top: 55px; right: 20%; border: 1px solid rgba(181,148,120,.14); }

    .hero-eyebrow {
      display: inline-flex; align-items: center; gap: 10px;
      color: var(--gold-light); font-size: .68rem;
      letter-spacing: 3.5px; text-transform: uppercase; font-weight: 500;
      margin-bottom: 18px;
    }
    .hero-eyebrow::before, .hero-eyebrow::after {
      content: ''; width: 22px; height: 1px;
      background: var(--gold-light); opacity: .5;
    }

    .hero-title {
      font-family: var(--font-display);
      font-size: clamp(1.9rem, 5vw, 3rem);
      font-weight: 800; color: var(--white);
      line-height: 1.22; margin-bottom: 16px;
    }
    .hero-title em { font-style: normal; color: var(--gold-light); }

    .hero-sub {
      font-size: .95rem; color: rgba(255,255,255,.55);
      line-height: 1.9; max-width: 500px; margin-bottom: 32px;
    }

    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

    .btn-gold-fill {
      display: inline-flex; align-items: center; gap: 9px;
      background: linear-gradient(135deg, var(--gold-light), var(--gold));
      color: var(--navy); font-family: var(--font-main);
      font-weight: 700; font-size: .88rem;
      padding: 13px 28px; border-radius: 8px;
      text-decoration: none; border: none; cursor: pointer;
      box-shadow: 0 6px 22px rgba(181,148,120,.35);
      transition: var(--transition);
    }
    .btn-gold-fill:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(181,148,120,.45); color: var(--navy); }

    .btn-ghost-white {
      display: inline-flex; align-items: center; gap: 9px;
      background: transparent; color: rgba(255,255,255,.7);
      font-family: var(--font-main); font-weight: 500; font-size: .85rem;
      padding: 13px 22px; border-radius: 8px;
      text-decoration: none; border: 1px solid rgba(255,255,255,.18);
      transition: var(--transition);
    }
    .btn-ghost-white:hover { background: rgba(255,255,255,.07); color: var(--white); border-color: rgba(255,255,255,.32); }

    /* ══ PROJECTS SECTION ══ */
    #invest-projects { padding: 80px 0; background: var(--bg); }

    .section-eyebrow {
      display: inline-flex; align-items: center; gap: 10px;
      color: var(--gold); font-size: .68rem;
      letter-spacing: 3px; text-transform: uppercase;
      font-weight: 600; margin-bottom: 12px;
    }
    .section-eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--gold); }

    .section-title {
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 3.5vw, 2.1rem);
      font-weight: 700; color: var(--navy); line-height: 1.3; margin-bottom: 14px;
    }
    .section-title span { color: var(--gold); }

    /* ── Project Card ── */
    .invest-card {
      background: var(--white);
      border-radius: 20px;
      overflow: hidden;
      border: 1px solid rgba(181,148,120,.11);
      box-shadow: var(--shadow-sm);
      margin-bottom: 36px;
      transition: var(--transition);
    }
    .invest-card:last-child { margin-bottom: 0; }
    .invest-card:hover { box-shadow: var(--shadow-lg); border-color: rgba(181,148,120,.25); transform: translateY(-3px); }

    /* Image pane */
    .ic-img-pane {
      position: relative;
      min-height: 340px;
      overflow: hidden;
      border-radius: 15px;
    }
    @media (max-width: 991px) { .ic-img-pane { min-height: 260px; } }

    .ic-img-pane img {
      width: 100%; height: 100%;
      object-fit: cover; display: block;
      transition: transform .7s ease;
    }
    .invest-card:hover .ic-img-pane img { transform: scale(1.05); }

    .ic-img-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(11,22,40,.7) 0%, rgba(11,22,40,.1) 55%, transparent 100%);
    }

    .ic-badge-status {
      position: absolute; top: 18px; right: 18px;
      background: rgba(181,148,120,.92);
      color: #fff; padding: 5px 14px;
      border-radius: 24px; font-size: .7rem;
      font-weight: 600; backdrop-filter: blur(8px);
      display: flex; align-items: center; gap: 6px;
    }
    .ic-badge-type {
      position: absolute; bottom: 18px; right: 18px;
      background: rgba(11,22,40,.78);
      color: rgba(255,255,255,.88); padding: 4px 13px;
      border-radius: 20px; font-size: .7rem;
      backdrop-filter: blur(8px);
    }

    /* ── Video Play Button ── */
    .ic-play-btn {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 68px; height: 68px;
      background: rgba(255,255,255,.15);
      border: 2px solid rgba(255,255,255,.5);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; color: #fff; font-size: 1.4rem;
      backdrop-filter: blur(6px);
      transition: var(--transition);
      text-decoration: none;
      padding-right: 4px; /* visual center for play icon */
      /* Pulse ring */
      box-shadow: 0 0 0 0 rgba(255,255,255,.35);
      animation: play-pulse 2.5s infinite;
    }
    .ic-play-btn:hover {
      background: var(--gold);
      border-color: var(--gold);
      color: var(--white);
      transform: translate(-50%, -50%) scale(1.1);
      animation: none;
      box-shadow: 0 8px 30px rgba(181,148,120,.55);
    }
    @keyframes play-pulse {
      0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.35); }
      70%  { box-shadow: 0 0 0 18px rgba(255,255,255,0); }
      100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
    }

    /* No-video thumbnail label */
    .ic-no-video {
      position: absolute; bottom: 18px; left: 18px;
      background: rgba(11,22,40,.6);
      color: rgba(255,255,255,.5);
      padding: 4px 12px; border-radius: 20px;
      font-size: .68rem; backdrop-filter: blur(6px);
      display: flex; align-items: center; gap: 6px;
    }

    /* Body pane */
    .ic-body {
      padding: 36px 40px 36px 32px;
      display: flex; flex-direction: column; height: 100%;
    }
    @media (max-width: 991px) { .ic-body { padding: 28px 22px; } }

    .ic-eyebrow {
      font-size: .66rem; letter-spacing: 2.5px;
      text-transform: uppercase; color: var(--gold);
      font-weight: 600; margin-bottom: 10px;
    }

    .ic-title {
      font-family: var(--font-display);
      font-size: clamp(1.3rem, 2.8vw, 1.75rem);
      font-weight: 700; color: var(--navy);
      line-height: 1.25; margin-bottom: 12px;
    }

    .ic-desc {
      font-size: .87rem; color: var(--text-muted);
      line-height: 1.85; margin-bottom: 20px;
    }

    /* Chips */
    .ic-chips {
      display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px;
    }
    .ic-chip {
      display: inline-flex; align-items: center; gap: 6px;
      background: var(--bg); border: 1px solid var(--bg-dark);
      color: var(--navy); padding: 6px 13px;
      border-radius: 24px; font-size: .76rem; font-weight: 500;
    }
    .ic-chip i { color: var(--gold); font-size: .68rem; }

    /* Features */
    .ic-features {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 7px 14px; margin-bottom: 24px;
    }
    @media (max-width: 400px) { .ic-features { grid-template-columns: 1fr; } }

    .ic-feat {
      display: flex; align-items: center; gap: 8px;
      font-size: .8rem; color: var(--navy);
    }
    .ic-feat i { color: var(--gold); font-size: .65rem; flex-shrink: 0; }

    /* Divider */
    .ic-divider {
      height: 1px;
      background: linear-gradient(90deg, rgba(181,148,120,.3), transparent);
      margin-bottom: 24px;
    }

    /* CTA row */
    .ic-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }

    .btn-wa {
      display: inline-flex; align-items: center; gap: 9px;
      background: linear-gradient(135deg, #25D366, #128C7E);
      color: #fff; font-family: var(--font-main);
      font-weight: 700; font-size: .85rem;
      padding: 12px 24px; border-radius: 8px;
      text-decoration: none;
      box-shadow: 0 4px 14px rgba(37,211,102,.28);
      transition: var(--transition);
    }
    .btn-wa:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(37,211,102,.4); color: #fff; }
    .btn-wa i { font-size: 1rem; }

    .btn-play-cta {
      display: inline-flex; align-items: center; gap: 9px;
      background: transparent; color: var(--navy);
      font-family: var(--font-main); font-weight: 600;
      font-size: .83rem; padding: 12px 20px; border-radius: 8px;
      text-decoration: none; border: 1.5px solid rgba(11,22,40,.18);
      cursor: pointer; transition: var(--transition);
    }
    .btn-play-cta:hover { border-color: var(--gold); color: var(--gold-dark); background: rgba(181,148,120,.05); }
    .btn-play-cta i { color: var(--gold); }

    /* ══ LIGHTBOX ══ */
    #video-lightbox {
      position: fixed; inset: 0; z-index: 9999;
      background: rgba(6,14,26,.94);
      display: flex; align-items: center; justify-content: center;
      opacity: 0; visibility: hidden;
      transition: opacity .35s ease, visibility .35s ease;
      backdrop-filter: blur(8px);
    }
    #video-lightbox.active { opacity: 1; visibility: visible; }

    .lb-inner {
      position: relative;
      width: min(900px, 92vw);
      border-radius: 16px;
      overflow: hidden;
      background: #000;
      box-shadow: 0 40px 100px rgba(0,0,0,.7);
      transform: scale(.92);
      transition: transform .35s cubic-bezier(0.34,1.56,0.64,1);
    }
    #video-lightbox.active .lb-inner { transform: scale(1); }

    .lb-video-wrap {
      position: relative;
      padding-top: 56.25%; /* 16:9 */
      background: #000;
    }
    .lb-video-wrap iframe {
      position: absolute; inset: 0;
      width: 100%; height: 100%; border: none; display: block;
    }

    .lb-close {
      position: absolute; top: -44px; left: 0;
      background: transparent; border: none;
      color: rgba(255,255,255,.7); font-size: 1rem;
      cursor: pointer; display: flex; align-items: center; gap: 8px;
      font-family: var(--font-main); font-weight: 500;
      transition: color .25s;
      padding: 0;
    }
    .lb-close:hover { color: var(--white); }
    .lb-close i { font-size: .85rem; }

    /* Project name inside lightbox top bar */
    .lb-header {
      position: absolute; top: -44px; right: 0;
      color: rgba(255,255,255,.55);
      font-size: .82rem; font-family: var(--font-main);
      display: flex; align-items: center; gap: 8px;
    }
    .lb-header i { color: var(--gold-light); }

    /* ══ EMPTY STATE ══ */
    .invest-empty {
      text-align: center; padding: 80px 20px;
    }
    .invest-empty i {
      font-size: 3.5rem; color: rgba(181,148,120,.25);
      display: block; margin-bottom: 20px;
    }
    .invest-empty h4 { color: var(--navy); font-weight: 700; margin-bottom: 10px; }
    .invest-empty p { color: var(--text-muted); font-size: .9rem; }

    /* ── Skeleton ── */
    .sk-card {
      background: var(--white); border-radius: 20px;
      overflow: hidden; border: 1px solid var(--bg-dark);
      margin-bottom: 36px;
    }
    .sk-pulse {
      background: linear-gradient(90deg, #f0ece8 25%, #e4ddd6 50%, #f0ece8 75%);
      background-size: 200% 100%;
      animation: shimmer 1.6s infinite;
    }
    @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

    /* ── Float WA ── */
    .float-whatsapp {
      position: fixed; bottom: 28px; left: 28px;
      width: 56px; height: 56px;
      background: linear-gradient(135deg,#25D366,#128C7E);
      border-radius: 50%; display: flex; align-items: center; justify-content: center;
      color: #fff; font-size: 1.45rem; text-decoration: none;
      box-shadow: 0 6px 20px rgba(37,211,102,.4); z-index: 900;
      transition: var(--transition);
    }
    .float-whatsapp:hover { transform: scale(1.1); color: #fff; box-shadow: 0 10px 28px rgba(37,211,102,.5); }

    @media (max-width: 767px) {
      #invest-hero { padding: 110px 0 64px; }
      .ic-body { padding: 24px 18px; }
    }

    /* ── Media Buttons ── */
.ic-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.btn-media {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font);
  border: 1.5px solid var(--gold);
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.22s, color 0.22s, transform 0.18s;
  white-space: nowrap;
}

.btn-media:hover {
  background: var(--gold);
  color: #fff;
  transform: translateY(-2px);
}

.btn-media i {
  font-size: 16px;
}

/* رسالة "لا يوجد محتوى بعد" */
.ic-no-media {
  font-size: 13px;
  color: var(--gray);
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-style: italic;
}

.ic-no-media i {
  color: var(--gold);
  font-size: 14px;
}
/* قيد التنفيذ — برتقالي */
.badge-near {
  background: var(--gold-light);
  color: #fff;
}

/* قيد التخطيط — الأزرق/الذهبي اللي عندك */
.badge-upcoming {
  background: var(--navy);
  color: #fff;
}