html { scroll-behavior: smooth; }
  body { font-family: 'Cairo', sans-serif; overflow-x: hidden; }
  html[dir="ltr"] body { font-family: 'Poppins', system-ui, sans-serif; }

  .gold-text{
    background: linear-gradient(135deg,#F2E3BE 0%,#c9a364 45%,#A07F42 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .gold-bar{ background: linear-gradient(90deg,#c9a364,#E5D2A6,#c9a364); }

  .grid-pattern{
    background-image:
      linear-gradient(rgba(201,163,100,.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(201,163,100,.06) 1px, transparent 1px);
    background-size: 64px 64px;
  }
  .radial-glow{
    background: radial-gradient(60% 55% at 70% 25%, rgba(201,163,100,.22) 0%, rgba(201,163,100,0) 65%),
                radial-gradient(50% 50% at 15% 85%, rgba(201,163,100,.14) 0%, rgba(201,163,100,0) 70%);
  }

  .reveal{ opacity:0; transform: translateY(34px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
  .reveal.visible{ opacity:1; transform: none; }
  .reveal.d1{ transition-delay:.08s } .reveal.d2{ transition-delay:.16s }
  .reveal.d3{ transition-delay:.24s } .reveal.d4{ transition-delay:.32s }

  @keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
  .floaty{ animation: floaty 7s ease-in-out infinite; }

  @keyframes pulseRing { 0%{box-shadow:0 0 0 0 rgba(201,163,100,.55)} 70%{box-shadow:0 0 0 18px rgba(201,163,100,0)} 100%{box-shadow:0 0 0 0 rgba(201,163,100,0)} }
  .pulse-ring{ animation: pulseRing 2.6s infinite; }

  @keyframes pulseGreen { 0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)} 70%{box-shadow:0 0 0 16px rgba(37,211,102,0)} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0)} }
  .pulse-green{ animation: pulseGreen 2.4s infinite; }

  @keyframes pulseBlue { 0%{box-shadow:0 0 0 0 rgba(201,163,100,.6)} 70%{box-shadow:0 0 0 16px rgba(201,163,100,0)} 100%{box-shadow:0 0 0 0 rgba(201,163,100,0)} }
  .pulse-blue{ animation: pulseBlue 2.4s infinite; }

  #navbar{ transition: all .45s ease; }
  .nav-link{ position: relative; }
  .nav-link::after{
    content:''; position:absolute; bottom:-6px; inset-inline-start:0;
    width:0; height:2px; background:linear-gradient(90deg,#c9a364,#E5D2A6);
    transition: width .35s ease;
  }
  .nav-link:hover::after, .nav-link.active::after{ width:100%; }
  .nav-link.active{ color:#c9a364; }

  .cat-tab{ transition: all .3s ease; }
  .cat-tab.active{
    background: linear-gradient(135deg,#c9a364,#A07F42);
    color:#080D18; border-color: transparent;
    box-shadow: 0 10px 30px -12px rgba(201,163,100,.85);
  }

  .lift{ transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease, border-color .45s ease; }
  .lift:hover{ transform: translateY(-8px); box-shadow: 0 30px 60px -30px rgba(8,13,24,.55); }

  ::-webkit-scrollbar{ width:10px }
  ::-webkit-scrollbar-track{ background:#0B1220 }
  ::-webkit-scrollbar-thumb{ background:linear-gradient(#c9a364,#6F5628); border-radius:10px }

  select{ -webkit-appearance:none; appearance:none; }

  @keyframes marquee { from{ transform: translateX(0) } to{ transform: translateX(-50%) } }
  .marquee-track{ display:flex; width:max-content; animation: marquee 30s linear infinite; }
  html[dir="rtl"] .marquee-track{ animation-direction: reverse; }

  /* ============ HERO BG ============ */
  .hero-bg{
    position: absolute; inset: 0;
    background-image: url('assets/company-photo.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    animation: heroZoom 25s ease-in-out infinite;
  }

  @media (max-width: 768px){
    .hero-bg{
      background-attachment: scroll;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: top center;
      animation: none; /* إلغاء الزووم على الموبايل */
      transform: none;
    }
  }
  @keyframes heroZoom{
    0%,100%{ transform: scale(1.05); }
    50%{ transform: scale(1.15); }
  }
  .hero-overlay-1{
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(8,13,24,.9) 0%, rgba(8,13,24,.65) 45%, rgba(8,13,24,.98) 100%);
  }
  .hero-overlay-2{
    position: absolute; inset: 0;
    background: linear-gradient(270deg, transparent 40%, rgba(8,13,24,.55) 100%);
  }

  /* ============ GALLERY ============ */
  .gallery-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  @media (min-width: 768px){
    .gallery-grid{ grid-template-columns: repeat(3, 1fr); gap: 14px; }
  }
  @media (min-width: 1024px){
    .gallery-grid{ grid-template-columns: repeat(4, 1fr); gap: 16px; }
  }
  .gallery-item{
    position: relative; aspect-ratio: 1;
    border-radius: 16px; overflow: hidden;
    cursor: pointer; background: #0B1220;
    border: 1px solid rgba(201,163,100,.12);
    transition: transform .5s cubic-bezier(.16,1,.3,1), border-color .4s, box-shadow .5s;
  }
  .gallery-item:hover{
    transform: translateY(-6px) scale(1.02);
    border-color: rgba(201,163,100,.55);
    box-shadow: 0 30px 60px -25px rgba(201,163,100,.35);
  }
  .gallery-item img{
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .8s cubic-bezier(.16,1,.3,1), filter .4s;
    filter: saturate(1.05) brightness(.95);
  }
  .gallery-item:hover img{
    transform: scale(1.12);
    filter: saturate(1.15) brightness(1);
  }
  .gallery-item .g-overlay{
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(8,13,24,.95) 100%);
    opacity: 0; transition: opacity .4s;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 14px;
  }
  .gallery-item:hover .g-overlay{ opacity: 1; }
  .gallery-item .g-num{
    color: #c9a364; font-weight: 900; font-size: 11px; letter-spacing: .1em;
  }
  .gallery-item .g-title{
    color: #fff; font-weight: 700; font-size: 13px; margin-top: 4px;
  }

  /* Lightbox */
  #galleryLightbox{
    position: fixed; inset: 0; z-index: 110;
    background: rgba(8,13,24,.97);
    backdrop-filter: blur(12px);
    display: none;
    align-items: center; justify-content: center;
    padding: 1rem;
    opacity: 0;
    transition: opacity .35s ease;
  }
  #galleryLightbox.show{ display: flex; opacity: 1; }

  #galleryLightbox .gl-img-wrap{
    position: relative;
    max-width: 90vw; max-height: 85vh;
    display: flex; align-items: center; justify-content: center;
  }
  #galleryLightbox img{
    max-width: 90vw; max-height: 85vh;
    border-radius: 16px;
    object-fit: contain;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,.9);
  }
  #galleryLightbox .gl-caption{
    position: absolute; bottom: -44px; inset-inline: 0;
    text-align: center; color: rgba(255,255,255,.75);
    font-size: 13px; font-weight: 600;
  }
  #galleryLightbox .gl-close{
    position: absolute; top: 20px; inset-inline-end: 20px;
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(255,255,255,.1); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; cursor: pointer;
    border: 1px solid rgba(255,255,255,.15);
    transition: all .3s;
  }
  #galleryLightbox .gl-close:hover{ background: #c9a364; color: #080D18; transform: rotate(90deg); }
  #galleryLightbox .gl-prev,
  #galleryLightbox .gl-next{
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 56px; height: 56px; border-radius: 50%;
    background: rgba(255,255,255,.1); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; cursor: pointer; user-select: none;
    border: 1px solid rgba(255,255,255,.15);
    transition: all .3s;
  }
  #galleryLightbox .gl-prev{ inset-inline-end: 20px; }
  #galleryLightbox .gl-next{ inset-inline-start: 20px; }
  #galleryLightbox .gl-prev:hover,
  #galleryLightbox .gl-next:hover{ background: #c9a364; color: #080D18; }

  /* ============ VIDEO CARDS ============ */
  .video-card{
    position: relative;
    border-radius: 24px; overflow: hidden;
    background: #0B1220;
    border: 1px solid rgba(201,163,100,.15);
    transition: border-color .4s, box-shadow .5s, transform .5s cubic-bezier(.16,1,.3,1);
    box-shadow: 0 25px 60px -25px rgba(0,0,0,.6);
  }
  .video-card:hover{
    border-color: rgba(201,163,100,.55);
    transform: translateY(-6px);
    box-shadow: 0 35px 80px -25px rgba(201,163,100,.3);
  }
  .video-wrap{
    position: relative; aspect-ratio: 16/9;
    background: #000; overflow: hidden;
  }
  .video-wrap video{
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .video-play-btn{
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(8,13,24,.4);
    cursor: pointer;
    transition: background .3s;
    border: none;
  }
  .video-play-btn:hover{ background: rgba(8,13,24,.6); }
  .video-play-btn .play-circle{
    width: 84px; height: 84px; border-radius: 50%;
    background: #c9a364; color: #080D18;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 15px 50px -8px rgba(201,163,100,.85), 0 0 0 0 rgba(201,163,100,.55);
    animation: pulseRing 2.4s infinite;
    transition: transform .4s cubic-bezier(.16,1,.3,1), background .3s;
  }
  .video-card:hover .play-circle{ transform: scale(1.12); background: #E5D2A6; }

  .video-info{ padding: 22px 24px; }
  .video-info h3{
    color: #fff; font-weight: 800; font-size: 1.15rem; line-height: 1.35;
    margin-bottom: 8px;
  }
  .video-info p{
    color: rgba(255,255,255,.55); font-size: .875rem; line-height: 1.6;
  }

  /* ============ LOCATION VIDEO ============ */
  .location-video-wrap{
    position: relative;
    aspect-ratio: 16/9;
    border-radius: 24px; overflow: hidden;
    background: #000;
    border: 1px solid rgba(201,163,100,.2);
    box-shadow: 0 40px 90px -30px rgba(0,0,0,.8), 0 0 60px -20px rgba(201,163,100,.25);
  }
  .location-video-wrap video{
    width: 100%; height: 100%; object-fit: cover;
  }
  .location-video-wrap .loc-overlay{
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: rgba(8,13,24,.5);
    cursor: pointer;
    transition: background .3s;
    border: none; text-align: center; padding: 20px;
  }
  .location-video-wrap .loc-overlay:hover{ background: rgba(8,13,24,.65); }
  .location-video-wrap .loc-play-circle{
    width: 100px; height: 100px; border-radius: 50%;
    background: #c9a364; color: #080D18;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 20px 60px -10px rgba(201,163,100,.9), 0 0 0 0 rgba(201,163,100,.55);
    animation: pulseRing 2.4s infinite;
    transition: transform .4s cubic-bezier(.16,1,.3,1);
    margin-bottom: 24px;
  }
  .location-video-wrap .loc-overlay:hover .loc-play-circle{ transform: scale(1.1); }
  .location-video-wrap .loc-title{
    color: #fff; font-weight: 900; font-size: 1.4rem;
    margin-bottom: 8px;
  }
  .location-video-wrap .loc-sub{
    color: rgba(255,255,255,.7); font-size: .9rem;
  }

  /* ============ REEL CARD ============ */
  .reel-card{
    position: relative; border-radius: 1.25rem; overflow: hidden;
    background: #0B1220;
    border: 1px solid rgba(201,163,100,.18);
    cursor: pointer;
    transition: transform .5s cubic-bezier(.16,1,.3,1), border-color .4s, box-shadow .5s;
  }
  .reel-card:hover{
    transform: translateY(-10px) scale(1.02);
    border-color: rgba(201,163,100,.65);
    box-shadow: 0 35px 70px -25px rgba(201,163,100,.4);
  }
  .reel-thumb-wrap{ position: relative; aspect-ratio: 9/16; overflow: hidden; background:#0B1220; }
  .reel-thumb-wrap img{
    width:100%; height:100%; object-fit: cover;
    transition: transform .8s cubic-bezier(.16,1,.3,1), filter .4s;
    filter: saturate(1.05) brightness(.95);
  }
  .reel-card:hover .reel-thumb-wrap img{ transform: scale(1.1); filter: saturate(1.15) brightness(1); }

  .reel-overlay{
    position:absolute; inset:0; z-index:2; pointer-events:none;
    background: linear-gradient(180deg, rgba(8,13,24,0) 0%, rgba(8,13,24,.1) 40%, rgba(8,13,24,.9) 100%);
  }
  .reel-play{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    z-index:3; pointer-events:none;
  }
  .reel-play span{
    width:70px; height:70px; border-radius:50%;
    background: rgba(201,163,100,.96);
    display:flex; align-items:center; justify-content:center;
    color:#080D18;
    box-shadow: 0 12px 45px -8px rgba(201,163,100,.95), 0 0 0 0 rgba(201,163,100,.55);
    transition: transform .45s cubic-bezier(.16,1,.3,1), background .3s;
    animation: pulseRing 2.6s infinite;
  }
  .reel-card:hover .reel-play span{ transform: scale(1.18); background:#E5D2A6; }

  .reel-badge{
    position:absolute; top:14px; inset-inline-start:14px; z-index:4;
    padding: 6px 12px; border-radius: 999px;
    background: rgba(8,13,24,.7); backdrop-filter: blur(8px);
    border: 1px solid rgba(201,163,100,.4);
    color:#c9a364; font-size:11px; font-weight:900; letter-spacing:.08em;
  }

  .reel-info{ position:absolute; inset-inline:0; bottom:0; z-index:4; padding: 1.1rem 1.15rem 1.2rem; }
  .reel-info h4{ color:#fff; font-weight:800; font-size:.95rem; line-height:1.35; }

  /* ============ REEL MODAL ============ */
  #reelModal{
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center;
    background: rgba(8,13,24,.95);
    backdrop-filter: blur(10px);
    opacity: 0; pointer-events: none;
    transition: opacity .35s ease;
    padding: 0.75rem;
  }
  #reelModal.show{ opacity: 1; pointer-events: auto; }
  #reelModal.hidden{ display: flex !important; }

  .modal-panel{
    position: relative;
    width: 100%;
    max-height: calc(100vh - 1.5rem);
    height: calc(100vh - 1.5rem);
    max-width: calc((100vh - 1.5rem) * 9 / 16);
    aspect-ratio: 9/16;
    display: flex;
    flex-direction: column;
    border-radius: 1.25rem;
    overflow: hidden;
    border: 1px solid rgba(201,163,100,.35);
    background: #0B1220;
    box-shadow: 0 40px 100px -20px rgba(0,0,0,.85), 0 0 60px -10px rgba(201,163,100,.35);
    transform: scale(.92) translateY(24px);
    transition: transform .5s cubic-bezier(.16,1,.3,1);
  }
  #reelModal.show .modal-panel{ transform: scale(1) translateY(0); }

  .modal-video-wrap{
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    background: #000;
    overflow: hidden;
  }
  .modal-video-wrap iframe{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0;
    display: block;
  }

  @media (max-width: 640px){
    #reelModal{ padding: 0; }
    .modal-panel{
      max-height: 100vh; height: 100vh;
      max-width: 100vw;
      border-radius: 0;
      border: none;
    }
  }

  .modal-close{ transition: transform .3s, background .3s, color .3s; }
  .modal-close:hover{ transform: rotate(90deg) scale(1.08); background:#c9a364; color:#080D18; }

  /* ============ FAQ ============ */
  .faq-item{ transition: all .4s cubic-bezier(.16,1,.3,1); }
  .faq-q{ cursor: pointer; }
  .faq-a{
    max-height: 0; overflow: hidden;
    transition: max-height .5s cubic-bezier(.16,1,.3,1), padding .4s ease, opacity .4s;
    opacity: 0;
  }
  .faq-item.open .faq-a{ max-height: 500px; opacity: 1; padding-top: 1rem; }
  .faq-item.open .faq-icon{ transform: rotate(45deg); background:#c9a364; color:#080D18; }
  .faq-icon{ transition: transform .45s cubic-bezier(.16,1,.3,1), background .3s, color .3s; }

  /* ============ LOGO ============ */
  .logo-box{
    background: linear-gradient(135deg,#E5D2A6 0%,#c9a364 50%,#A07F42 100%);
    box-shadow: 0 10px 40px -8px rgba(201,163,100,.75), inset 0 0 0 1px rgba(255,255,255,.25);
  }

  /* ============ FLOATING BUTTONS ============ */
  .float-btn{
    width: 56px; height: 56px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    box-shadow: 0 12px 30px -6px rgba(0,0,0,.55);
    transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, filter .3s;
    position: relative;
  }
  .float-btn:hover{ transform: translateY(-4px) scale(1.08); }
  .float-btn::after{
    content: attr(data-tip);
    position: absolute; inset-inline-end: calc(100% + 12px);
    top: 50%; transform: translateY(-50%);
    background: #0B1220; color:#fff;
    padding: 8px 14px; border-radius: 10px;
    font-size: 13px; font-weight: 700; white-space: nowrap;
    opacity: 0; pointer-events: none;
    transition: opacity .3s, transform .3s;
    border: 1px solid rgba(201,163,100,.3);
    box-shadow: 0 8px 20px -6px rgba(0,0,0,.5);
  }
  .float-btn:hover::after{ opacity:1; transform: translateY(-50%) translateX(-4px); }

  /* ============ CHATBOT ============ */
  #chatbotPanel{
    transform-origin: bottom left;
    transition: opacity .35s ease, transform .4s cubic-bezier(.16,1,.3,1);
  }
  #chatbotPanel.closed{
    opacity: 0; pointer-events: none;
    transform: translateY(20px) scale(.94);
  }
  #chatbotPanel.open{ opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }

  .chat-msg{ animation: chatIn .35s cubic-bezier(.16,1,.3,1); }
  @keyframes chatIn { from { opacity:0; transform: translateY(10px);} to {opacity:1; transform:none;} }

  .chat-scroll::-webkit-scrollbar{ width:6px }
  .chat-scroll::-webkit-scrollbar-track{ background: rgba(255,255,255,.05); border-radius:6px }
  .chat-scroll::-webkit-scrollbar-thumb{ background:#c9a364; border-radius:6px }

  .typing-dot{ animation: typing 1.4s infinite ease-in-out; }
  .typing-dot:nth-child(2){ animation-delay: .2s; }
  .typing-dot:nth-child(3){ animation-delay: .4s; }
  @keyframes typing { 0%,60%,100%{ transform: translateY(0); opacity:.4 } 30%{ transform: translateY(-5px); opacity:1 } }

  .chat-quick{ transition: all .25s ease; }
  .chat-quick:hover{ background: #c9a364; color: #080D18; border-color: #c9a364; }

    @keyframes heroZoomBg {
    0%, 100% { transform: scale(1.05); }
    50% { transform: scale(1.15); }
  }
  @keyframes scrollDot {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(14px); opacity: 0; }
  }
  @keyframes frameRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  @keyframes badgeFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }
  .animate-scroll-dot { animation: scrollDot 1.6s ease-in-out infinite; }

  /* ===== الخلفية العامة (blurred) ===== */
  .hero-bg-full {
    position: absolute; inset: 0;
    background-image: url('assets/company-photo.jpg');
    background-size: cover;
    background-position: center;
    filter: blur(20px) brightness(.28) saturate(.85);
    transform: scale(1.15);
    animation: heroZoomBg 30s ease-in-out infinite;
    width: 100%;
    height: 100%;
  }
  .hero-overlay-full {
    position: absolute; inset: 0;
    background:
      radial-gradient(circle at 30% 40%, rgba(8,13,24,.6) 0%, rgba(8,13,24,.96) 70%),
      linear-gradient(180deg, rgba(8,13,24,.75) 0%, rgba(8,13,24,.98) 100%);
  }

  /* ===== كلمة STARK ضخمة ===== */
  .hero-big-text {
    font-size: clamp(8rem, 22vw, 22rem);
    font-weight: 900;
    letter-spacing: .05em;
    background: linear-gradient(180deg, rgba(201,163,100,.12) 0%, rgba(201,163,100,.02) 60%, transparent 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
    white-space: nowrap;
    filter: blur(.3px);
  }

  /* ===== حاوية الصورة — ارتفاع تلقائي حسب الصورة ===== */
  .hero-visual {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
    /* لا نحدد aspect-ratio — نخلي الصورة هي اللي تحدد الارتفاع */
  }

  /* ===== الإطار الذهبي المتحرك ===== */
  .hero-frame {
    position: absolute;
    inset: -14px;
    border-radius: 32px;
    padding: 2px;
    background: conic-gradient(
      from 0deg,
      transparent 0deg,
      #c9a364 60deg,
      #E5D2A6 120deg,
      transparent 180deg,
      #A07F42 240deg,
      #c9a364 300deg,
      transparent 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: frameRotate 8s linear infinite;
    opacity: .9;
    pointer-events: none;
  }

  /* ===== الصورة — تظهر كاملة بدون قص ===== */
  .hero-image-wrap {
    position: relative;
    width: 100%;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(135deg, #0B1220 0%, #1A2438 100%);
    box-shadow:
      0 40px 100px -30px rgba(0,0,0,.9),
      0 0 0 1px rgba(201,163,100,.3) inset;
    /* نعطي حد أدنى للارتفاع لتفادي التشوه */
    min-height: 320px;
  }
  .hero-image {
    width: 100%;
    height: auto;           /* ← المهم: الارتفاع تلقائي */
    display: block;
    object-fit: contain;    /* ← المهم: الصورة كاملة بدون قص */
    transition: transform 1.2s cubic-bezier(.16,1,.3,1);
  }
  .hero-visual:hover .hero-image { transform: scale(1.03); }

  .hero-image-overlay {
    position: absolute; inset: 0;
    background:
      linear-gradient(180deg, transparent 55%, rgba(8,13,24,.55) 100%);
    pointer-events: none;
  }

  /* ===== شعار الشركة فوق الصورة ===== */
  .hero-logo-badge {
    position: absolute;
    top: 20px; inset-inline-start: 20px;
    width: 64px; height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg,#E5D2A6 0%,#c9a364 50%,#A07F42 100%);
    padding: 4px;
    box-shadow: 0 15px 35px -8px rgba(201,163,100,.65);
    overflow: hidden;
    z-index: 3;
  }
  .hero-logo-badge img {
    width: 100%; height: 100%;
    object-fit: contain;
    background: #fff;
    border-radius: 14px;
    padding: 4px;
  }

  /* ===== Badges العائمة ===== */
  .hero-float-badge {
    position: absolute;
    background: rgba(11,18,32,.85);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(201,163,100,.35);
    border-radius: 16px;
    padding: 12px 16px;
    box-shadow: 0 20px 50px -15px rgba(0,0,0,.7);
    z-index: 5;
    animation: badgeFloat 4s ease-in-out infinite;
  }
  .hero-float-top {
    top: 24px; inset-inline-end: -20px;
  }
  .hero-float-bottom {
    bottom: 24px; inset-inline-start: -20px;
    animation-delay: 2s;
  }
  @media (max-width: 640px){
    .hero-float-top { inset-inline-end: 8px; top: 8px; padding: 8px 12px; }
    .hero-float-bottom { inset-inline-start: 8px; bottom: 8px; padding: 8px 12px; }
    .hero-float-badge svg { width: 16px; height: 16px; }
    .hero-logo-badge { width: 50px; height: 50px; top: 12px; inset-inline-start: 12px; }
    .hero-image-wrap { min-height: 240px; }
  }

  @media (max-width: 640px){
    .hero-bg-full { filter: blur(16px) brightness(.3); }
    .hero-big-text { font-size: 7rem; }
  }