/* ══════════════════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════════════════ */
:root {
  /* ── Dark palette (default) ── */
  --bg:           #08090D;
  --surface:      #10121A;
  --surface2:     #181C28;
  --text:         #F2EDE4;
  --text-muted:   #8A8880;
  --accent:       #D4963A;
  --accent-hi:    #F0C060;
  --accent-cool:  #3A6EA8;
  --border:       rgba(212,150,58,.18);
  --border-sub:   rgba(242,237,228,.05);
  --shadow:       rgba(0,0,0,.55);

  /* ── Spacing ── */
  --max-w:        1200px;
  --sec-pad:      clamp(5rem, 10vw, 8rem);
  --nav-h:        80px;

  /* ── Type stacks ── */
  --f-display:    'Cormorant Garant', 'Georgia', serif;
  --f-body:       'DM Sans', 'Segoe UI', sans-serif;
  --f-arabic:     'Cairo', 'Arial', sans-serif;

  /* ── Radii ── */
  --r:            8px;
  --r-lg:         16px;

  /* ── Easing ── */
  --ease:         cubic-bezier(.25,.46,.45,.94);
  --ease-spring:  cubic-bezier(.34,1.56,.64,1);
  --ease-out:     cubic-bezier(.22,1,.36,1);
}

[data-theme="light"] {
  --bg:           #F5F0E8;
  --surface:      #FDFAF4;
  --surface2:     #EDE8DC;
  --text:         #1A1612;
  --text-muted:   #6B6560;
  --accent:       #B07C22;
  --accent-hi:    #D4963A;
  --accent-cool:  #1E4F8C;
  --border:       rgba(176,124,34,.22);
  --border-sub:   rgba(26,22,18,.07);
  --shadow:       rgba(0,0,0,.18);
}


/* ══════════════════════════════════════════════════
   PRELOADER
══════════════════════════════════════════════════ */
.preloader {
  position:        fixed;
  inset:           0;
  z-index:         99999;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--bg);
  opacity:         1;
  visibility:      visible;
  /* Exit transition */
  transition:      opacity .7s var(--ease), visibility .7s, transform .7s var(--ease);
}

.preloader.preloader-done {
  opacity:         0;
  visibility:      hidden;
  transform:       scale(1.04);
  pointer-events:  none;
}

/* Inner container */
.preloader-inner {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             1.6rem;
  position:        relative;
}

/* Ambient golden halo */
.preloader-halo {
  position:        absolute;
  width:           320px;
  height:          320px;
  top:             50%;
  left:            50%;
  transform:       translate(-50%, -50%);
  background:      radial-gradient(circle, rgba(212,150,58,.18) 0%, transparent 65%);
  border-radius:   50%;
  pointer-events:  none;
  animation:       haloBreath 3s ease-in-out infinite alternate;
}

@keyframes haloBreath {
  from { transform: translate(-50%,-50%) scale(.85); opacity: .6; }
  to   { transform: translate(-50%,-50%) scale(1.1); opacity: 1;  }
}

/* Logo wrapper */
.preloader-logo-wrap {
  position:  relative;
  z-index:   1;
  animation: preloaderLogoIn .9s var(--ease-out) .2s both;
}

@keyframes preloaderLogoIn {
  from { opacity: 0; transform: scale(.78) translateY(12px); }
  to   { opacity: 1; transform: scale(1)   translateY(0);    }
}

.preloader-logo {
  height:         80px;
  width:          auto;
  mix-blend-mode: screen;
  display:        block;
}
[data-theme="light"] .preloader-logo { mix-blend-mode: multiply; }

/* Progress track */
.preloader-track {
  width:         220px;
  height:        2px;
  background:    rgba(212,150,58,.12);
  border-radius: 100px;
  overflow:      hidden;
  position:      relative;
  z-index:       1;
  animation:     fadeIn .4s var(--ease) .5s both;
}

/* Animated fill */
.preloader-fill {
  height:        100%;
  width:         0%;
  border-radius: 100px;
  background:    linear-gradient(90deg, var(--accent), var(--accent-hi), var(--accent));
  background-size: 200% 100%;
  box-shadow:    0 0 10px rgba(212,150,58,.5);
  animation:
    preloaderBarFill 2s var(--ease) .3s both,
    barShimmer       1.6s linear     .3s infinite;
}

@keyframes preloaderBarFill {
  0%   { width:  0%; }
  45%  { width: 65%; }
  75%  { width: 85%; }
  90%  { width: 96%; }
  100% { width: 100%; }
}

@keyframes barShimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

/* Company label */
.preloader-label {
  font-family:    var(--f-body);
  font-size:      .62rem;
  font-weight:    500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color:          var(--text-muted);
  position:       relative;
  z-index:        1;
  animation:      fadeIn .5s var(--ease) .7s both;
}


/* ══════════════════════════════════════════════════
   RESET
══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background:  var(--bg);
  color:       var(--text);
  font-family: var(--f-body);
  font-weight: 300;
  font-size:   1rem;
  line-height: 1.75;
  overflow-x:  hidden;
  transition:  background-color .4s var(--ease), color .4s var(--ease);
}

[dir="rtl"] body { font-family: var(--f-arabic); }

img, svg   { display: block; max-width: 100%; }
a          { color: inherit; text-decoration: none; }
button     { cursor: pointer; background: none; border: none; font-family: inherit; }
ul         { list-style: none; }


/* ══════════════════════════════════════════════════
   TYPOGRAPHY HELPERS
══════════════════════════════════════════════════ */
.section-label {
  font-family:    var(--f-body);
  font-size:      .68rem;
  font-weight:    700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color:          var(--accent);
  margin-bottom:  .9rem;
}
[dir="rtl"] .section-label { font-family: var(--f-arabic); letter-spacing: .04em; }

.section-heading {
  font-family: var(--f-display);
  font-size:   clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  font-style:  italic;
  line-height: 1.13;
  color:       var(--text);
  margin-bottom: 1.1rem;
}
[dir="rtl"] .section-heading { font-family: var(--f-arabic); font-style: normal; }

.section-sub {
  font-size:    1rem;
  font-weight:  300;
  color:        var(--text-muted);
  max-width:    540px;
  margin-bottom: 3rem;
}
[dir="rtl"] .section-sub { font-family: var(--f-arabic); }

/* Centered header block used inside services + markets */
.section-centered {
  text-align: center;
}
.section-centered .section-sub {
  margin-left: auto;
  margin-right: auto;
}


/* ══════════════════════════════════════════════════
   CONTAINER
══════════════════════════════════════════════════ */
.container {
  max-width: var(--max-w);
  margin:    0 auto;
  padding:   0 clamp(1.25rem, 4vw, 2.5rem);
}


/* ══════════════════════════════════════════════════
   NAVBAR — floating pill
══════════════════════════════════════════════════ */
.navbar {
  position:        fixed;
  top:             0;
  left:            0;
  right:           0;
  z-index:         200;
  display:         flex;
  justify-content: center;
  align-items:     flex-start;
  padding:         12px 20px 0;
  /* no background on the full-width wrapper */
  transition:      padding .4s var(--ease);
}

.navbar-pill {
  display:         flex;
  align-items:     center;
  gap:             1.5rem;
  width:           100%;
  max-width:       1160px;
  height:          56px;
  padding:         0 1.25rem 0 1rem;
  background:      rgba(8,9,13,.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border:          1px solid rgba(212,150,58,.1);
  border-radius:   100px;
  /* slide in on page load */
  animation:       pillSlideIn .7s var(--ease-out) .1s both;
  transition:      background .4s var(--ease), border-color .4s var(--ease),
                   box-shadow .4s var(--ease);
}

@keyframes pillSlideIn {
  from { opacity: 0; transform: translateY(-16px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)     scale(1);   }
}

/* Scrolled: deepen the pill */
.navbar.scrolled .navbar-pill {
  background:   rgba(8,9,13,.94);
  border-color: rgba(212,150,58,.28);
  box-shadow:   0 8px 40px rgba(0,0,0,.5),
                0 0 0 1px rgba(212,150,58,.06),
                inset 0 1px 0 rgba(255,255,255,.04);
}

[data-theme="light"] .navbar-pill {
  background: rgba(245,240,232,.4);
  border-color: rgba(176,124,34,.12);
}
[data-theme="light"] .navbar.scrolled .navbar-pill {
  background:   rgba(245,240,232,.96);
  border-color: rgba(176,124,34,.35);
  box-shadow:   0 8px 32px rgba(0,0,0,.14), 0 0 0 1px rgba(176,124,34,.08);
}


/* ── Logo ── */
.logo {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
}

.logo-img {
  height:     36px;
  width:      auto;
  object-fit: contain;
  /* The PNG has a transparent background with gold script;
     screen blend removes any residual white fringe on dark surfaces */
  mix-blend-mode: screen;
  transition: opacity .25s, filter .25s;
}
/* In light mode, multiply keeps gold on parchment looking rich */
[data-theme="light"] .logo-img {
  mix-blend-mode: multiply;
}

.logo-img:hover { opacity: .85; }

.logo-img-footer {
  height: 40px;
}


/* ── Nav links ── */
.nav-links {
  display:     flex;
  align-items: center;
  gap:         2rem;
  margin-left: auto;
}
[dir="rtl"] .nav-links { margin-left: 0; margin-right: auto; }

.nav-link {
  font-size:      .8rem;
  font-weight:    400;
  letter-spacing: .06em;
  color:          var(--text-muted);
  position:       relative;
  transition:     color .25s;
}
.nav-link::after {
  content:          '';
  position:         absolute;
  bottom:           -3px;
  left: 0; right: 0;
  height:           1px;
  background:       var(--accent);
  transform:        scaleX(0);
  transform-origin: center;
  transition:       transform .3s var(--ease);
}
.nav-link:hover            { color: var(--text); }
.nav-link:hover::after     { transform: scaleX(1); }


/* ── Controls ── */
.navbar-controls {
  display:     flex;
  align-items: center;
  gap:         .65rem;
}

.lang-btn {
  font-family:    var(--f-arabic);
  font-size:      .75rem;
  font-weight:    600;
  color:          var(--text-muted);
  border:         1px solid var(--border);
  border-radius:  4px;
  padding:        .22rem .6rem;
  transition:     color .25s, border-color .25s;
  line-height:    1.6;
}
.lang-btn:hover  { color: var(--accent); border-color: var(--accent); }

.theme-btn {
  width:  36px;
  height: 36px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--text-muted);
  border:          1px solid var(--border);
  border-radius:   50%;
  transition:      color .25s, border-color .25s, transform .35s var(--ease-spring);
}
.theme-btn svg { width: 16px; height: 16px; }
.theme-btn:hover { color: var(--accent); border-color: var(--accent); transform: rotate(18deg); }

/* Moon visible in dark, sun in light */
.icon-moon { display: block; }
.icon-sun  { display: none;  }
[data-theme="light"] .icon-moon { display: none;  }
[data-theme="light"] .icon-sun  { display: block; }

/* ── Hamburger ── */
.hamburger {
  display:        none;
  flex-direction: column;
  gap:            5px;
  padding:        4px;
}
.hamburger span {
  display:       block;
  width:         22px;
  height:        1.5px;
  background:    var(--text);
  border-radius: 2px;
  transition:    transform .3s var(--ease), opacity .3s;
}
.hamburger.active span:nth-child(1) { transform: translateY(6.5px)  rotate(45deg);  }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }


/* ══════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════ */
.hero {
  position:    relative;
  min-height:  100vh;
  display:     flex;
  align-items: center;
  overflow:    hidden;
  background:  var(--bg);
}

/* Orbs */
.hero-orb {
  position:      absolute;
  border-radius: 50%;
  filter:        blur(90px);
  pointer-events: none;
  will-change:   transform;
}
.orb-1 {
  width: 700px; height: 700px;
  bottom: -200px; left: -180px;
  background: radial-gradient(circle, rgba(212,150,58,.2) 0%, transparent 62%);
  animation: orbA 20s ease-in-out infinite alternate;
}
.orb-2 {
  width: 550px; height: 550px;
  top: -120px; right: -120px;
  background: radial-gradient(circle, rgba(58,110,168,.17) 0%, transparent 62%);
  animation: orbB 26s ease-in-out infinite alternate;
}
.orb-3 {
  width: 300px; height: 300px;
  top: 38%; right: 22%;
  background: radial-gradient(circle, rgba(212,150,58,.1) 0%, transparent 62%);
  animation: orbC 16s ease-in-out infinite alternate;
}

@keyframes orbA {
  0%   { transform: translate(0,0)    scale(1); }
  100% { transform: translate(60px,-50px) scale(1.1); }
}
@keyframes orbB {
  0%   { transform: translate(0,0)    scale(1); }
  100% { transform: translate(-50px,70px) scale(1.09); }
}
@keyframes orbC {
  0%   { transform: translate(0,0); }
  100% { transform: translate(-35px,40px); }
}

/* Geometric grid overlay on hero */
.hero::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background-image:
    repeating-linear-gradient(0deg,  transparent, transparent 59px, var(--border-sub) 60px),
    repeating-linear-gradient(90deg, transparent, transparent 59px, var(--border-sub) 60px);
  pointer-events: none;
}

/* Hero container wrapper */
.hero > .container {
  position:    relative;
  z-index:     2;
  padding-top: calc(var(--nav-h) + 3.5rem);
  padding-bottom: 5.5rem;
}

/* Hero 2-column grid */
.hero-content {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  align-items:           center;
  gap:                   3rem;
}

/* ── Hero text column ── */
.hero-text {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  text-align:     left;
}
[dir="rtl"] .hero-text {
  align-items: flex-end;
  text-align:  right;
}

/* ── Hero visual column ── */
.hero-visual {
  display:         flex;
  align-items:     center;
  justify-content: center;
  position:        relative;
}

.hero-icon-wrap {
  position: relative;
  width:    min(440px, 90%);
  aspect-ratio: 1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  animation: heroReveal .9s var(--ease-out) .4s both;
}

/* Ambient glow ring */
.hero-glow {
  position:      absolute;
  inset:         -20%;
  border-radius: 50%;
  background:    radial-gradient(
    circle at 50% 60%,
    rgba(212,150,58,.28) 0%,
    rgba(58,110,168,.14) 45%,
    transparent 70%
  );
  animation: glowPulse 5s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes glowPulse {
  0%   { opacity: .7; transform: scale(.95); }
  100% { opacity: 1;  transform: scale(1.08); }
}

/* Orbiting accent dots */
.hero-dot {
  position:      absolute;
  border-radius: 50%;
  pointer-events: none;
}
.dot-a {
  width: 10px; height: 10px;
  background: var(--accent);
  top: 14%; right: 8%;
  box-shadow: 0 0 12px var(--accent);
  animation: dotFloat1 3.8s ease-in-out infinite;
}
.dot-b {
  width: 6px; height: 6px;
  background: var(--accent-cool);
  bottom: 22%; left: 6%;
  box-shadow: 0 0 8px var(--accent-cool);
  animation: dotFloat2 4.6s ease-in-out infinite;
  opacity: .75;
}
.dot-c {
  width: 14px; height: 14px;
  background: var(--accent-hi);
  bottom: 40%; right: 4%;
  box-shadow: 0 0 18px rgba(240,192,96,.5);
  animation: dotFloat3 5.2s ease-in-out infinite;
  opacity: .5;
}

@keyframes dotFloat1 {
  0%, 100% { transform: translate(0, 0);     }
  50%      { transform: translate(-8px, -14px); }
}
@keyframes dotFloat2 {
  0%, 100% { transform: translate(0, 0);     }
  50%      { transform: translate(10px, -10px); }
}
@keyframes dotFloat3 {
  0%, 100% { transform: translate(0, 0);     }
  50%      { transform: translate(-6px, 12px); }
}

/* The icon itself — floating + panning */
.hero-icon {
  position:       relative;
  z-index:        2;
  width:          100%;
  height:         auto;
  object-fit:     contain;
  user-select:    none;
  pointer-events: none;
  /* Entry animation then seamless loop via animation-fill-mode */
  animation:
    heroReveal .9s var(--ease-out) .4s both,
    heroFloat  7s ease-in-out      1.5s infinite;
  filter: drop-shadow(0 24px 48px rgba(212,150,58,.22))
          drop-shadow(0  8px 16px rgba(0,0,0,.45));
}

@keyframes heroReveal {
  from { opacity: 0; transform: translateY(30px) scale(.92); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* Float + pan: Y oscillation primary, X drift secondary, subtle scale */
@keyframes heroFloat {
  0%   { transform: translateY(0px)   translateX(0px)   scale(1);     filter: drop-shadow(0 24px 48px rgba(212,150,58,.22)) drop-shadow(0 8px 16px rgba(0,0,0,.45)); }
  20%  { transform: translateY(-18px) translateX(10px)  scale(1.015); filter: drop-shadow(0 38px 64px rgba(212,150,58,.3))  drop-shadow(0 8px 20px rgba(0,0,0,.4));  }
  45%  { transform: translateY(-10px) translateX(18px)  scale(1.02);  filter: drop-shadow(0 32px 56px rgba(58,110,168,.22))  drop-shadow(0 8px 18px rgba(0,0,0,.42)); }
  70%  { transform: translateY(-22px) translateX(6px)   scale(1.01);  filter: drop-shadow(0 42px 70px rgba(212,150,58,.28)) drop-shadow(0 8px 20px rgba(0,0,0,.38)); }
  100% { transform: translateY(0px)   translateX(0px)   scale(1);     filter: drop-shadow(0 24px 48px rgba(212,150,58,.22)) drop-shadow(0 8px 16px rgba(0,0,0,.45)); }
}

/* Badge */
.hero-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            .5rem;
  font-family:    var(--f-body);
  font-size:      .63rem;
  font-weight:    700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          var(--accent);
  border:         1px solid var(--border);
  border-radius:  100px;
  padding:        .32rem 1rem;
  margin-bottom:  2rem;
  background:     rgba(212,150,58,.06);
  animation:      fadeInDown .8s var(--ease) .25s both;
  align-self:     flex-start;
}
[dir="rtl"] .hero-badge { align-self: flex-end; }
[dir="rtl"] .hero-badge { font-family: var(--f-arabic); letter-spacing: .05em; }

.hero-badge::before {
  content:       '';
  width:         5px;
  height:        5px;
  background:    var(--accent);
  border-radius: 50%;
  animation:     dot-pulse 2s ease-in-out infinite;
}

@keyframes dot-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);   }
  50%      { opacity: .35; transform: scale(1.35); }
}

/* Headline */
.hero-headline {
  font-family:   var(--f-display);
  font-size:     clamp(2.8rem, 7.5vw, 6.5rem);
  font-weight:   300;
  font-style:    italic;
  line-height:   1.07;
  color:         var(--text);
  max-width:     820px;
  margin-bottom: 1.5rem;
  animation:     fadeInUp 1s var(--ease) .45s both;
}
[dir="rtl"] .hero-headline {
  font-family: var(--f-arabic);
  font-style:  normal;
  font-weight: 300;
  font-size:   clamp(2rem, 5.5vw, 4.8rem);
}

/* Sub */
.hero-sub {
  font-size:     clamp(.95rem, 1.6vw, 1.1rem);
  font-weight:   300;
  color:         var(--text-muted);
  max-width:     500px;
  margin-bottom: 2rem;
  animation:     fadeInUp 1s var(--ease) .7s both;
}
[dir="rtl"] .hero-sub { font-family: var(--f-arabic); }

/* ── Market presence chips ── */
.hero-markets {
  display:       flex;
  align-items:   center;
  gap:           .6rem;
  flex-wrap:     wrap;
  margin-bottom: 2.5rem;
  animation:     fadeInUp .8s var(--ease) .9s both;
}

.hero-mchip {
  font-family:    var(--f-body);
  font-size:      .72rem;
  font-weight:    500;
  letter-spacing: .06em;
  color:          var(--text-muted);
  border:         1px solid var(--border-sub);
  border-radius:  100px;
  padding:        .22rem .75rem;
  background:     rgba(212,150,58,.04);
  transition:     color .2s, border-color .2s, background .2s;
}
.hero-mchip:hover          { color: var(--accent); border-color: var(--border); background: rgba(212,150,58,.08); }
[dir="rtl"] .hero-mchip   { font-family: var(--f-arabic); letter-spacing: .02em; }

.hero-mdot {
  font-size:   .55rem;
  color:       var(--border);
  line-height: 1;
  user-select: none;
}

/* ── Actions row: primary CTA + ghost secondary ── */
.hero-actions {
  display:     flex;
  align-items: center;
  gap:         1.25rem;
  flex-wrap:   wrap;
  animation:   fadeInUp .8s var(--ease) 1.1s both;
}
[dir="rtl"] .hero-actions { flex-direction: row-reverse; }

/* Ghost / text secondary button */
.btn-ghost {
  font-family:    var(--f-body);
  font-size:      .8rem;
  font-weight:    400;
  letter-spacing: .06em;
  color:          var(--text-muted);
  display:        inline-flex;
  align-items:    center;
  gap:            .3rem;
  transition:     color .25s;
  white-space:    nowrap;
}
[dir="rtl"] .btn-ghost { font-family: var(--f-arabic); flex-direction: row-reverse; }

.btn-ghost::after {
  content:    '→';
  display:    inline-block;
  transition: transform .25s var(--ease);
}
[dir="rtl"] .btn-ghost::after { content: '←'; }

.btn-ghost:hover                  { color: var(--accent); }
.btn-ghost:hover::after           { transform: translateX(4px); }
[dir="rtl"] .btn-ghost:hover::after { transform: translateX(-4px); }

/* Countdown label */
.countdown-label {
  font-family:    var(--f-body);
  font-size:      .7rem;
  font-weight:    500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color:          var(--text-muted);
  margin-bottom:  .9rem;
  animation:      fadeInUp .8s var(--ease) 1s both;
}
[dir="rtl"] .countdown-label { font-family: var(--f-arabic); letter-spacing: .04em; }

/* Countdown grid */
.countdown-grid {
  display:       flex;
  align-items:   center;
  gap:           clamp(.6rem, 2vw, 1.8rem);
  margin-bottom: 2.8rem;
  animation:     fadeInUp .8s var(--ease) 1.1s both;
}

.countdown-unit {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            .4rem;
  min-width:      clamp(52px, 9vw, 84px);
}

.countdown-val {
  font-family:          var(--f-display);
  font-size:            clamp(2rem, 5.5vw, 4.2rem);
  font-weight:          600;
  font-variant-numeric: tabular-nums;
  line-height:          1;
  color:                var(--text);
  background:           var(--surface2);
  border:               1px solid var(--border);
  border-radius:        var(--r);
  width:                100%;
  text-align:           center;
  padding:              .45rem 0;
  transition:           transform .18s var(--ease-spring), border-color .25s;
}
.countdown-val.tick { transform: scale(1.05); border-color: var(--accent); }

.countdown-lbl {
  font-family:    var(--f-body);
  font-size:      .6rem;
  font-weight:    500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          var(--text-muted);
}
[dir="rtl"] .countdown-lbl { font-family: var(--f-arabic); letter-spacing: .02em; }

.countdown-sep {
  font-family: var(--f-display);
  font-size:   clamp(1.5rem, 3.5vw, 2.8rem);
  font-weight: 300;
  color:       var(--accent);
  margin-bottom: 1.5rem;
  line-height:   1;
  user-select:   none;
}

/* CTA */
.btn-primary {
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  gap:            .55rem;
  font-family:    var(--f-body);
  font-size:      .8rem;
  font-weight:    500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          #0A0808;
  background:     var(--accent);
  border:         2px solid var(--accent);
  border-radius:  var(--r);
  padding:        .8rem 2.1rem;
  align-self:     flex-start;
  transition:     transform .25s var(--ease), box-shadow .25s var(--ease),
                  background .25s, border-color .25s;
  /* animation inherited from .hero-actions parent */
}
[dir="rtl"] .btn-primary { font-family: var(--f-arabic); letter-spacing: .04em; align-self: flex-end; }
.btn-primary:hover {
  transform:    translateY(-3px);
  box-shadow:   0 10px 36px rgba(212,150,58,.35);
  background:   var(--accent-hi);
  border-color: var(--accent-hi);
}

/* RTL: swap hero columns so text is right, icon is left */
[dir="rtl"] .hero-content {
  direction: rtl;
}

/* Scroll cue */
.scroll-cue {
  position:  absolute;
  bottom:    2.2rem;
  left:      50%;
  transform: translateX(-50%);
  animation: fadeIn 1s var(--ease) 2s both;
}
.scroll-arrow {
  width:  22px;
  height: 22px;
  border-right:  1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(45deg);
  animation: arrowBounce 2s ease-in-out 2.5s infinite;
}
@keyframes arrowBounce {
  0%, 100% { transform: rotate(45deg) translateY(0);  opacity: .45; }
  50%      { transform: rotate(45deg) translateY(6px); opacity: 1;   }
}


/* ══════════════════════════════════════════════════
   SHARED SECTION
══════════════════════════════════════════════════ */
.section { padding: var(--sec-pad) 0; }


/* ══════════════════════════════════════════════════
   ABOUT
══════════════════════════════════════════════════ */
.about-section { background: var(--surface); }

.about-grid {
  display:               grid;
  grid-template-columns: 1fr 340px;
  gap:                   4rem;
  align-items:           start;
}
[dir="rtl"] .about-grid { grid-template-columns: 340px 1fr; }

.about-text p {
  font-size:     1rem;
  font-weight:   300;
  color:         var(--text-muted);
  line-height:   1.8;
  margin-bottom: 1.1rem;
}
[dir="rtl"] .about-text p { font-family: var(--f-arabic); }
.about-text p:last-child { margin-bottom: 0; }

.about-details {
  display:        flex;
  flex-direction: column;
  gap:            1px;
  background:     var(--border);
  border:         1px solid var(--border);
  border-radius:  var(--r-lg);
  overflow:       hidden;
}

.detail-card {
  display:        flex;
  flex-direction: column;
  gap:            .18rem;
  padding:        1.1rem 1.4rem;
  background:     var(--surface2);
  transition:     background .2s;
}
.detail-card:hover { background: var(--surface); }

.detail-label {
  font-family:    var(--f-body);
  font-size:      .62rem;
  font-weight:    600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          var(--accent);
}
[dir="rtl"] .detail-label { font-family: var(--f-arabic); letter-spacing: .03em; }

.detail-value {
  font-size:  .95rem;
  font-weight: 400;
  color:       var(--text);
}
[dir="rtl"] .detail-value { font-family: var(--f-arabic); }


/* ══════════════════════════════════════════════════
   SERVICES
══════════════════════════════════════════════════ */
.services-section {
  position:   relative;
  background: var(--bg);
}

/* Subtle grid overlay */
.services-section::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background-image:
    repeating-linear-gradient(0deg,  transparent, transparent 49px, var(--border-sub) 50px),
    repeating-linear-gradient(90deg, transparent, transparent 49px, var(--border-sub) 50px);
  pointer-events: none;
}

.services-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1.5rem;
  position:              relative;
  z-index:               1;
}

.service-card {
  background:    var(--surface2);
  border:        1px solid var(--border-sub);
  border-radius: var(--r-lg);
  padding:       2rem 1.75rem;
  position:      relative;
  overflow:      hidden;
  transition:    transform .3s var(--ease), box-shadow .3s var(--ease),
                 border-color .3s;
}
/* Left accent bar */
.service-card::before {
  content:          '';
  position:         absolute;
  left: 0; top: 0; bottom: 0;
  width:            3px;
  background:       var(--accent);
  transform:        scaleY(0);
  transform-origin: bottom;
  transition:       transform .35s var(--ease-out);
}
[dir="rtl"] .service-card::before { left: auto; right: 0; }

.service-card:hover {
  transform:    translateY(-5px);
  box-shadow:   0 18px 48px var(--shadow);
  border-color: var(--border);
}
.service-card:hover::before { transform: scaleY(1); }

.service-icon {
  width:         44px;
  height:        44px;
  color:         var(--accent);
  margin-bottom: 1.25rem;
}
.service-icon svg { width: 100%; height: 100%; }

.service-title {
  font-family:   var(--f-body);
  font-size:     .93rem;
  font-weight:   500;
  color:         var(--text);
  margin-bottom: .6rem;
  letter-spacing: .02em;
}
[dir="rtl"] .service-title { font-family: var(--f-arabic); }

.service-desc {
  font-size:   .86rem;
  font-weight: 300;
  color:       var(--text-muted);
  line-height: 1.7;
}
[dir="rtl"] .service-desc { font-family: var(--f-arabic); }


/* ══════════════════════════════════════════════════
   STATS — gold strip
══════════════════════════════════════════════════ */
.stats-section {
  background: var(--accent);
  padding:    clamp(3rem, 6vw, 5rem) 0;
}

.stats-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   2rem;
  text-align:            center;
}

.stat-item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            .45rem;
}

.stat-number {
  font-family: var(--f-display);
  font-size:   clamp(2.5rem, 5.5vw, 4rem);
  font-weight: 600;
  line-height: 1;
  color:       #0D0A06;
}
[dir="rtl"] .stat-number { font-family: var(--f-arabic); }

.stat-label {
  font-family:    var(--f-body);
  font-size:      .75rem;
  font-weight:    500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          rgba(13,10,6,.6);
}
[dir="rtl"] .stat-label { font-family: var(--f-arabic); letter-spacing: .03em; }


/* ══════════════════════════════════════════════════
   MARKETS
══════════════════════════════════════════════════ */
.markets-section { background: var(--surface); }

.markets-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1.5rem;
}

.market-card {
  background:    var(--surface2);
  border:        1px solid var(--border-sub);
  border-radius: var(--r-lg);
  padding:       2rem 1.75rem;
  transition:    transform .3s var(--ease), box-shadow .3s var(--ease);
}
.market-card:hover {
  transform:  translateY(-5px);
  box-shadow: 0 18px 48px var(--shadow);
}

.market-flag {
  width:         60px;
  height:        40px;
  border-radius: 4px;
  overflow:      hidden;
  margin-bottom: 1.25rem;
  box-shadow:    0 2px 10px rgba(0,0,0,.35);
}

.market-title {
  font-family:   var(--f-body);
  font-size:     1.05rem;
  font-weight:   500;
  color:         var(--text);
  margin-bottom: .4rem;
}
[dir="rtl"] .market-title { font-family: var(--f-arabic); }

.market-badge {
  display:        inline-block;
  font-family:    var(--f-body);
  font-size:      .6rem;
  font-weight:    600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          var(--accent);
  border:         1px solid var(--border);
  border-radius:  100px;
  padding:        .12rem .6rem;
  margin-bottom:  1rem;
}
[dir="rtl"] .market-badge { font-family: var(--f-arabic); letter-spacing: .03em; }

.market-desc {
  font-size:   .88rem;
  font-weight: 300;
  color:       var(--text-muted);
  line-height: 1.7;
}
[dir="rtl"] .market-desc { font-family: var(--f-arabic); }


/* ══════════════════════════════════════════════════
   PROCESS — HOW WE WORK
══════════════════════════════════════════════════ */
.process-section { background: var(--surface); }

.process-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   0;
  position:              relative;
}

.process-step {
  padding: 2rem 2rem 2rem 0;
  position: relative;
}
[dir="rtl"] .process-step { padding: 2rem 0 2rem 2rem; }

.process-num-wrap {
  display:     flex;
  align-items: center;
  gap:         1rem;
  margin-bottom: 1.25rem;
}

.process-num {
  font-family:    var(--f-display);
  font-size:      2.6rem;
  font-weight:    700;
  line-height:    1;
  color:          var(--accent);
  flex-shrink:    0;
}

.process-line {
  flex:        1;
  height:      1px;
  background:  linear-gradient(90deg, var(--border), transparent);
}
[dir="rtl"] .process-line { background: linear-gradient(270deg, var(--border), transparent); }

.process-step-last .process-num-wrap { margin-bottom: 1.25rem; }

.process-title {
  font-family:   var(--f-body);
  font-size:     .95rem;
  font-weight:   500;
  color:         var(--text);
  margin-bottom: .6rem;
  letter-spacing: .02em;
}
[dir="rtl"] .process-title { font-family: var(--f-arabic); }

.process-desc {
  font-size:   .86rem;
  font-weight: 300;
  color:       var(--text-muted);
  line-height: 1.75;
  max-width:   240px;
}
[dir="rtl"] .process-desc { font-family: var(--f-arabic); }


/* ══════════════════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════════════════ */
.testi-section { background: var(--bg); }

.testi-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1.5rem;
}

.testi-card {
  background:    var(--surface2);
  border:        1px solid var(--border-sub);
  border-radius: var(--r-lg);
  padding:       2rem 1.75rem;
  display:       flex;
  flex-direction: column;
  gap:           1rem;
  position:      relative;
  overflow:      hidden;
  transition:    transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.testi-card::before {
  content:  '"';
  position: absolute;
  top:      -.2rem;
  right:    1.25rem;
  font-family: var(--f-display);
  font-size:   6rem;
  font-weight: 700;
  color:       var(--accent);
  opacity:     .08;
  line-height: 1;
  pointer-events: none;
}
[dir="rtl"] .testi-card::before { right: auto; left: 1.25rem; }
.testi-card:hover {
  transform:  translateY(-4px);
  box-shadow: 0 16px 40px var(--shadow);
  border-color: var(--border);
}

.testi-stars {
  color:       var(--accent);
  font-size:   .9rem;
  letter-spacing: .1em;
}

.testi-quote {
  font-family: var(--f-display);
  font-size:   1rem;
  font-weight: 300;
  font-style:  italic;
  color:       var(--text);
  line-height: 1.7;
  flex:        1;
}
[dir="rtl"] .testi-quote { font-family: var(--f-arabic); font-style: normal; }

.testi-author {
  display:     flex;
  align-items: center;
  gap:         .85rem;
  padding-top: .75rem;
  border-top:  1px solid var(--border-sub);
}

.testi-avatar {
  width:           38px;
  height:          38px;
  border-radius:   50%;
  background:      linear-gradient(135deg, var(--accent), var(--accent-cool));
  color:           #0A0808;
  font-family:     var(--f-body);
  font-size:       .72rem;
  font-weight:     700;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  letter-spacing:  .04em;
}

.testi-info {
  display:        flex;
  flex-direction: column;
  gap:            .1rem;
}

.testi-name {
  font-size:   .88rem;
  font-weight: 500;
  color:       var(--text);
}
[dir="rtl"] .testi-name { font-family: var(--f-arabic); }

.testi-role {
  font-size:   .76rem;
  font-weight: 300;
  color:       var(--text-muted);
}
[dir="rtl"] .testi-role { font-family: var(--f-arabic); }


/* ══════════════════════════════════════════════════
   FAQ
══════════════════════════════════════════════════ */
.faq-section { background: var(--surface); }

.faq-wrap {
  display:               grid;
  grid-template-columns: 280px 1fr;
  gap:                   4rem;
  align-items:           start;
}
[dir="rtl"] .faq-wrap { direction: rtl; }

.faq-header { position: sticky; top: calc(var(--nav-h) + 2rem); }

.faq-list {
  display:        flex;
  flex-direction: column;
}

.faq-item {
  border-bottom: 1px solid var(--border-sub);
}
.faq-item:first-child { border-top: 1px solid var(--border-sub); }

.faq-q {
  width:           100%;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             1rem;
  padding:         1.2rem 0;
  text-align:      left;
  font-family:     var(--f-body);
  font-size:       .95rem;
  font-weight:     400;
  color:           var(--text);
  background:      none;
  border:          none;
  cursor:          pointer;
  transition:      color .2s;
}
[dir="rtl"] .faq-q { text-align: right; flex-direction: row-reverse; }
.faq-q:hover { color: var(--accent); }

.faq-chevron {
  width:      20px;
  height:     20px;
  flex-shrink: 0;
  color:       var(--accent);
  transition:  transform .35s var(--ease);
}

.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-item.open .faq-q       { color: var(--accent); }

.faq-a {
  overflow:   hidden;
  max-height: 0;
  transition: max-height .4s var(--ease);
}
.faq-item.open .faq-a { max-height: 400px; }

.faq-a p {
  font-size:     .9rem;
  font-weight:   300;
  color:         var(--text-muted);
  line-height:   1.8;
  padding-bottom: 1.25rem;
}
[dir="rtl"] .faq-a p { font-family: var(--f-arabic); }


/* ══════════════════════════════════════════════════
   CONTACT
══════════════════════════════════════════════════ */
.contact-section {
  position:   relative;
  background: var(--bg);
  overflow:   hidden;
}

.contact-orb {
  position:      absolute;
  border-radius: 50%;
  filter:        blur(90px);
  pointer-events: none;
}
.orb-c1 {
  width: 420px; height: 420px;
  top: -100px; right: -80px;
  background: radial-gradient(circle, rgba(212,150,58,.14) 0%, transparent 65%);
}
.orb-c2 {
  width: 380px; height: 380px;
  bottom: -80px; left: -80px;
  background: radial-gradient(circle, rgba(58,110,168,.11) 0%, transparent 65%);
}

.contact-grid {
  display:               grid;
  grid-template-columns: 1fr 380px;
  gap:                   4rem;
  align-items:           start;
  position:              relative;
  z-index:               1;
}
[dir="rtl"] .contact-grid { grid-template-columns: 380px 1fr; }


/* ── Form ── */
.contact-form {
  display:        flex;
  flex-direction: column;
  gap:            1.25rem;
}

.form-row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1.25rem;
}

.form-group {
  display:        flex;
  flex-direction: column;
  gap:            .38rem;
}

.form-group label {
  font-size:      .7rem;
  font-weight:    500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          var(--text-muted);
}
[dir="rtl"] .form-group label { font-family: var(--f-arabic); letter-spacing: .02em; }

.form-group input,
.form-group select,
.form-group textarea {
  background:    var(--surface2);
  border:        1px solid var(--border-sub);
  border-radius: var(--r);
  padding:       .75rem 1rem;
  color:         var(--text);
  font-family:   inherit;
  font-size:     .9rem;
  font-weight:   300;
  width:         100%;
  outline:       none;
  transition:    border-color .25s, box-shadow .25s;
}
[dir="rtl"] .form-group input,
[dir="rtl"] .form-group select,
[dir="rtl"] .form-group textarea {
  font-family: var(--f-arabic);
  text-align:  right;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--accent);
  box-shadow:   0 0 0 3px rgba(212,150,58,.12);
}

.form-group select {
  cursor:              pointer;
  appearance:          none;
  -webkit-appearance:  none;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8880' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 12px center;
  background-size:     16px;
  padding-right:       2.5rem;
}
[dir="rtl"] .form-group select {
  background-position: left 12px center;
  padding-right: 1rem;
  padding-left:  2.5rem;
}

.form-group textarea { resize: vertical; min-height: 128px; }

.btn-submit {
  align-self: flex-start;
  position:   relative;
  overflow:   hidden;
}
[dir="rtl"] .btn-submit { align-self: flex-end; }

.btn-loader {
  display:       none;
  width:         14px;
  height:        14px;
  border:        2px solid rgba(10,8,8,.25);
  border-top-color: #0A0808;
  border-radius: 50%;
  animation:     spin .55s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn-submit.loading .btn-text   { display: none; }
.btn-submit.loading .btn-loader { display: block; }

.form-message {
  font-size:     .87rem;
  padding:       .75rem 1rem;
  border-radius: var(--r);
  display:       none;
  line-height:   1.5;
}
.form-message.success {
  display:    block;
  background: rgba(34,197,94,.1);
  border:     1px solid rgba(34,197,94,.25);
  color:      #4ade80;
}
.form-message.error {
  display:    block;
  background: rgba(239,68,68,.1);
  border:     1px solid rgba(239,68,68,.25);
  color:      #f87171;
}
[data-theme="light"] .form-message.success { color: #15803d; }
[data-theme="light"] .form-message.error   { color: #b91c1c; }


/* ── Info cards ── */
.contact-info {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
}

.info-card {
  display:     flex;
  align-items: flex-start;
  gap:         1rem;
  padding:     1.1rem 1.25rem;
  background:  var(--surface2);
  border:      1px solid var(--border-sub);
  border-radius: var(--r);
  transition:  border-color .25s;
}
.info-card:hover { border-color: var(--border); }
[dir="rtl"] .info-card { flex-direction: row-reverse; text-align: right; }

.info-icon {
  width:           40px;
  height:          40px;
  flex-shrink:     0;
  background:      rgba(212,150,58,.08);
  border-radius:   var(--r);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--accent);
}
.info-icon svg { width: 18px; height: 18px; }

.info-content {
  display:        flex;
  flex-direction: column;
  gap:            .18rem;
}

.info-label {
  font-family:    var(--f-body);
  font-size:      .6rem;
  font-weight:    600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          var(--text-muted);
}
[dir="rtl"] .info-label { font-family: var(--f-arabic); letter-spacing: .03em; }

.info-value {
  font-size:   .9rem;
  font-weight: 400;
  color:       var(--text);
  line-height: 1.45;
}
[dir="rtl"] .info-value { font-family: var(--f-arabic); }
a.info-value:hover { color: var(--accent); }

.map-wrap {
  border-radius: var(--r-lg);
  overflow:      hidden;
  border:        1px solid var(--border-sub);
  margin-top:    .5rem;
}
.map-wrap iframe {
  display:    block;
  filter:     grayscale(60%) contrast(1.08);
  transition: filter .4s;
}
.map-wrap:hover iframe { filter: grayscale(0%); }
[data-theme="light"] .map-wrap iframe { filter: grayscale(25%) contrast(1.05); }
[data-theme="light"] .map-wrap:hover iframe { filter: grayscale(0%); }


/* ══════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════ */
.footer {
  background:  var(--bg);
  position:    relative;
  overflow:    hidden;
  padding-top: 4.5rem;
}

/* Gradient top border */
.footer::before {
  content:  '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height:     2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--accent) 25%,
    var(--accent-cool) 50%,
    var(--accent) 75%,
    transparent 100%
  );
}

/* Subtle background orb */
.footer::after {
  content:  '';
  position: absolute;
  bottom: -120px; left: 50%;
  transform: translateX(-50%);
  width:  600px; height: 300px;
  background: radial-gradient(ellipse, rgba(212,150,58,.07) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Footer top grid ── */
.footer-top {
  display:               grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap:                   2rem 2.5rem;
  padding-bottom:        3.5rem;
  border-bottom:         1px solid var(--border-sub);
  position:              relative;
  z-index:               1;
}
[dir="rtl"] .footer-top { direction: rtl; }

.footer-col-brand {
  padding-right: 1rem;
}
[dir="rtl"] .footer-col-brand { padding-right: 0; padding-left: 1rem; }

.footer-tagline {
  font-size:     .78rem;
  font-weight:   300;
  color:         var(--text-muted);
  margin-top:    .4rem;
  line-height:   1.5;
}
[dir="rtl"] .footer-tagline { font-family: var(--f-arabic); }

/* Mini contact in footer */
.footer-contact-mini {
  display:        flex;
  flex-direction: column;
  gap:            .6rem;
  margin-top:     1.4rem;
}

.footer-contact-link {
  display:     flex;
  align-items: center;
  gap:         .5rem;
  font-size:   .8rem;
  font-weight: 300;
  color:       var(--text-muted);
  transition:  color .2s;
}
.footer-contact-link svg {
  width: 14px; height: 14px;
  flex-shrink: 0;
  color: var(--accent);
  transition: transform .25s;
}
.footer-contact-link:hover          { color: var(--text); }
.footer-contact-link:hover svg      { transform: scale(1.15); }
[dir="rtl"] .footer-contact-link    { flex-direction: row-reverse; }

/* Column titles */
.footer-col-title {
  font-family:    var(--f-body);
  font-size:      .66rem;
  font-weight:    700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color:          var(--accent);
  margin-bottom:  1.1rem;
}
[dir="rtl"] .footer-col-title { font-family: var(--f-arabic); letter-spacing: .04em; }

/* Link lists */
.footer-links {
  display:        flex;
  flex-direction: column;
  gap:            .6rem;
}

.footer-links a {
  font-size:    .83rem;
  font-weight:  300;
  color:        var(--text-muted);
  display:      inline-flex;
  align-items:  center;
  gap:          .3rem;
  transition:   color .2s, transform .2s;
}
.footer-links a::before {
  content:    '—';
  font-size:  .65rem;
  color:      var(--accent);
  opacity:    0;
  transform:  translateX(-6px);
  transition: opacity .2s, transform .2s;
}
.footer-links a:hover {
  color:     var(--text);
  transform: translateX(6px);
}
.footer-links a:hover::before {
  opacity:   1;
  transform: translateX(0);
}
[dir="rtl"] .footer-links a:hover { transform: translateX(-6px); }
[dir="rtl"] .footer-links a::before { transform: translateX(6px); }
[dir="rtl"] .footer-links a:hover::before { transform: translateX(0); }

/* Registration badge */
.footer-reg-badge {
  display:        inline-flex;
  flex-direction: column;
  gap:            .15rem;
  margin-top:     1.8rem;
  padding:        .5rem .85rem;
  background:     var(--surface2);
  border:         1px solid var(--border-sub);
  border-radius:  var(--r);
}

.footer-reg-id {
  font-family:    var(--f-body);
  font-size:      .68rem;
  font-weight:    500;
  color:          var(--text-muted);
  letter-spacing: .05em;
}

.footer-reg-country {
  font-size:   .63rem;
  font-weight: 300;
  color:       var(--text-muted);
  opacity:     .65;
}
[dir="rtl"] .footer-reg-country { font-family: var(--f-arabic); }

/* Bottom bar */
.footer-bottom {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             1rem;
  flex-wrap:       wrap;
  padding:         1.5rem 0;
  position:        relative;
  z-index:         1;
}

.footer-bottom p {
  font-size:   .7rem;
  font-weight: 300;
  color:       var(--text-muted);
  line-height: 1.5;
}
[dir="rtl"] .footer-bottom p { font-family: var(--f-arabic); }
[dir="rtl"] .footer-bottom    { direction: rtl; }


/* ══════════════════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════════════════ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ══════════════════════════════════════════════════
   MOBILE NAV — complete
══════════════════════════════════════════════════ */

/* ── Backdrop ── */
#navBackdrop {
  position:         fixed;
  inset:            0;
  z-index:          185;
  background:       rgba(0,0,0,.55);
  backdrop-filter:  blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity:          0;
  visibility:       hidden;
  pointer-events:   none;
  transition:       opacity .38s var(--ease), visibility .38s;
}
#navBackdrop.active {
  opacity:          1;
  visibility:       visible;
  pointer-events:   all;
}
/* Only relevant on mobile */
@media (min-width: 861px) { #navBackdrop { display: none !important; } }

@media (max-width: 860px) {

  /* ── Show hamburger ── */
  .hamburger { display: flex; }

  /* ── Nav overlay ── */
  .nav-links {
    position:         fixed;
    inset:            var(--nav-h) 0 0 0; /* below the pill */
    z-index:          190;
    margin-left:      0;

    /* Layout: stack links, push contact strip to bottom */
    display:          flex;
    flex-direction:   column;
    align-items:      stretch;
    justify-content:  flex-start;
    gap:              0;
    overflow-y:       auto;

    /* Rich background */
    background:       rgba(8,9,13,.97);
    backdrop-filter:  blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border-top:       2px solid transparent;
    border-image:     linear-gradient(90deg, transparent, var(--accent), var(--accent-cool), var(--accent), transparent) 1;

    /* Hidden: fades + drops */
    opacity:          0;
    visibility:       hidden;
    pointer-events:   none;
    transform:        translateY(-14px);
    transition:       opacity .38s var(--ease),
                      visibility .38s,
                      transform .42s var(--ease);
  }

  [data-theme="light"] .nav-links {
    background: rgba(253,250,244,.98);
  }

  /* ── Open state ── */
  .nav-links.open {
    opacity:        1;
    visibility:     visible;
    pointer-events: all;
    transform:      translateY(0);
  }

  /* ── Individual links ── */
  .nav-link {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         1.1rem 1.75rem;
    min-height:      60px;
    font-size:       1rem;
    font-weight:     300;
    letter-spacing:  .06em;
    color:           var(--text-muted);
    border-bottom:   1px solid var(--border-sub);
    text-align:      left;
    /* reset desktop underline pseudo */
    position:        static;
    transition:      color .22s, background .22s, padding-left .22s;
  }
  [dir="rtl"] .nav-link {
    text-align:      right;
    flex-direction:  row-reverse;
    padding-left:    1.75rem;
    padding-right:   1.75rem;
  }
  .nav-link:first-child { border-top: 1px solid var(--border-sub); }

  /* reset desktop underline */
  .nav-link::after {
    content:          '→';
    position:         static;
    height:           auto;
    width:            auto;
    background:       none;
    transform-origin: unset;
    color:            var(--accent);
    font-size:        .8rem;
    opacity:          0;
    transform:        translateX(-5px);
    transition:       opacity .22s, transform .22s;
  }
  [dir="rtl"] .nav-link::after { content: '←'; transform: translateX(5px); }

  .nav-link:hover,
  .nav-link:active {
    color:        var(--text);
    background:   rgba(212,150,58,.05);
    padding-left: 2.1rem;
  }
  [dir="rtl"] .nav-link:hover,
  [dir="rtl"] .nav-link:active {
    padding-left:  1.75rem;
    padding-right: 2.1rem;
  }
  .nav-link:hover::after,
  .nav-link:active::after {
    opacity:   1;
    transform: translateX(0);
  }
  [dir="rtl"] .nav-link:hover::after,
  [dir="rtl"] .nav-link:active::after { transform: translateX(0); }

  /* ── Staggered entrance ── */
  .nav-links .nav-link {
    opacity:   0;
    transform: translateY(14px);
    transition: opacity .38s var(--ease),
                transform .38s var(--ease),
                color .22s,
                background .22s,
                padding-left .22s;
  }
  .nav-links.open .nav-link            { opacity: 1; transform: translateY(0); }
  .nav-links.open .nav-link:nth-child(1) { transition-delay: .08s; }
  .nav-links.open .nav-link:nth-child(2) { transition-delay: .15s; }
  .nav-links.open .nav-link:nth-child(3) { transition-delay: .22s; }
  .nav-links.open .nav-link:nth-child(4) { transition-delay: .29s; }

  /* ── Mobile contact footer inside menu ── */
  .nav-mobile-footer {
    display:        flex;
    flex-direction: column;
    gap:            .75rem;
    padding:        1.75rem;
    margin-top:     auto;
    border-top:     1px solid var(--border-sub);
    /* stagger in with the links */
    opacity:        0;
    transform:      translateY(12px);
    transition:     opacity .38s var(--ease) .38s,
                    transform .38s var(--ease) .38s;
  }
  .nav-links.open .nav-mobile-footer {
    opacity:   1;
    transform: translateY(0);
  }

  .nav-mfooter-link {
    display:     flex;
    align-items: center;
    gap:         .65rem;
    font-size:   .82rem;
    font-weight: 300;
    color:       var(--text-muted);
    min-height:  44px;
    transition:  color .2s;
  }
  .nav-mfooter-link svg {
    width:      16px;
    height:     16px;
    flex-shrink: 0;
    color:      var(--accent);
  }
  .nav-mfooter-link:hover { color: var(--accent); }
  [dir="rtl"] .nav-mfooter-link { flex-direction: row-reverse; }
}


/* ══════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Hero: collapse to single column, centered */
  .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2.5rem;
  }
  .hero-text {
    align-items: center;
    text-align:  center;
    order: 2;
  }
  [dir="rtl"] .hero-text { align-items: center; }
  .hero-visual {
    order: 1;
  }
  .hero-icon-wrap {
    width: min(320px, 72vw);
  }
  .hero-badge { align-self: center; }
  [dir="rtl"] .hero-badge { align-self: center; }
  .btn-primary { align-self: center; }
  [dir="rtl"] .btn-primary { align-self: center; }
  [dir="rtl"] .hero-content { direction: ltr; }

  .about-grid        { grid-template-columns: 1fr; gap: 2.5rem; }
  [dir="rtl"] .about-grid { grid-template-columns: 1fr; }
  .about-details     { max-width: 480px; }
  .contact-grid      { grid-template-columns: 1fr; gap: 3rem; }
  [dir="rtl"] .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .process-step { padding: 1.75rem 1.75rem 1.75rem 0; }
  .faq-wrap     { grid-template-columns: 1fr; gap: 2rem; }
  .faq-header   { position: static; }
}

@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem 2rem; }
  .testi-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .markets-grid  { grid-template-columns: repeat(2, 1fr); }
  .stats-grid    { grid-template-columns: repeat(2, 1fr); }
  .process-grid  { grid-template-columns: repeat(2, 1fr); }
  .navbar { padding: 10px 12px 0; }
}

@media (max-width: 560px) {
  .services-grid  { grid-template-columns: 1fr; }
  .markets-grid   { grid-template-columns: 1fr; }
  .stats-grid     { grid-template-columns: repeat(2, 1fr); }
  .process-grid   { grid-template-columns: 1fr; }
  .testi-grid     { grid-template-columns: 1fr; }
  .form-row       { grid-template-columns: 1fr; }
  .countdown-grid { gap: .4rem; }
  .countdown-sep  { font-size: 1.4rem; margin-bottom: 1.2rem; }
  .hero-icon-wrap { width: min(260px, 78vw); }
  .footer-top     { grid-template-columns: 1fr; }
  .footer-bottom  { flex-direction: column; text-align: center; }
}

@media (max-width: 380px) {
  .stats-grid { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════
   CUSTOM CURSOR — desktop pointer devices only
══════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {

  /* Kill default cursor everywhere */
  *, *::before, *::after { cursor: none !important; }

  .cursor-dot {
    position:       fixed;
    top:  0;
    left: 0;
    width:          6px;
    height:         6px;
    background:     var(--accent);
    border-radius:  50%;
    pointer-events: none;
    z-index:        10000;
    opacity:        0;
    transform:      translate(-50%, -50%);
    will-change:    left, top;
    transition:     opacity .3s var(--ease),
                    width  .2s var(--ease-spring),
                    height .2s var(--ease-spring),
                    background .2s,
                    border-radius .2s;
  }

  .cursor-ring {
    position:       fixed;
    top:  0;
    left: 0;
    width:          38px;
    height:         38px;
    border:         1.5px solid rgba(212,150,58,.55);
    border-radius:  50%;
    pointer-events: none;
    z-index:        9999;
    opacity:        0;
    transform:      translate(-50%, -50%);
    will-change:    left, top;
    transition:     opacity .35s var(--ease),
                    width  .4s var(--ease-spring),
                    height .4s var(--ease-spring),
                    background .3s,
                    border-color .3s,
                    border-width .25s;
  }

  /* ── Active (mouse inside window) ── */
  .cursor-dot.active  { opacity: 1; }
  .cursor-ring.active { opacity: .75; }

  /* ── Hover over links / cards / buttons ── */
  .cursor-dot.on-hover {
    width:      8px;
    height:     8px;
    background: var(--accent-hi);
  }
  .cursor-ring.on-hover {
    width:        54px;
    height:       54px;
    border-color: var(--accent-hi);
    border-width: 1px;
    background:   rgba(212,150,58,.07);
    opacity:      1;
  }

  /* ── Text input cursor (thin bar) ── */
  .cursor-dot.on-text {
    width:         2px;
    height:        18px;
    border-radius: 1px;
    background:    var(--accent);
  }
  .cursor-ring.on-text { opacity: 0; }

  /* ── Mouse-down click burst ── */
  .cursor-dot.clicking {
    width:      10px;
    height:     10px;
    background: var(--accent-hi);
  }
  .cursor-ring.clicking {
    width:        26px;
    height:       26px;
    background:   rgba(212,150,58,.2);
    border-color: var(--accent-hi);
    border-width: 2px;
    opacity:      1;
  }
}


/* ── nav-mobile-footer hidden on desktop ── */
.nav-mobile-footer { display: none; }


/* ══════════════════════════════════════════════════
   TABLET POLISH — 560px–860px
══════════════════════════════════════════════════ */
@media (max-width: 860px) {
  /* Better section spacing on tablet */
  .section { padding: clamp(3.5rem, 8vw, 5.5rem) 0; }
  .stats-section { padding: clamp(2.5rem, 5vw, 4rem) 0; }

  /* Process steps: remove connecting lines on mobile */
  .process-line { display: none; }
  .process-step { padding: 1.5rem 0; border-bottom: 1px solid var(--border-sub); }
  .process-step:last-child { border-bottom: none; }
  .process-num  { font-size: 2rem; }
  .process-desc { max-width: 100%; }

  /* Testi cards better on tablet */
  .testi-card { padding: 1.75rem; }

  /* FAQ header: no sticky on mobile */
  .faq-header   { position: static; padding-bottom: 1rem; }

  /* Contact info cards smaller gap */
  .contact-info { gap: .75rem; }
}


/* ══════════════════════════════════════════════════
   MOBILE POLISH — ≤ 480px
══════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Pill navbar — condensed */
  .navbar       { padding: 8px 10px 0; }
  .navbar-pill  { height: 50px; padding: 0 .7rem 0 .5rem; gap: .6rem; }
  .logo-img     { height: 32px; }
  .lang-btn     { padding: .18rem .42rem; font-size: .67rem; }
  .theme-btn    { width: 30px; height: 30px; }
  .theme-btn svg { width: 14px; height: 14px; }

  /* Hero — tighter spacing */
  .hero > .container {
    padding-top:    calc(var(--nav-h) + 1.25rem);
    padding-bottom: 4rem;
  }
  .hero-content { gap: 1.25rem; }
  .hero-icon-wrap { width: min(210px, 68vw); }

  .hero-badge {
    font-size:      .57rem;
    letter-spacing: .15em;
    padding:        .27rem .75rem;
    margin-bottom:  1.25rem;
  }
  .hero-headline { margin-bottom: .9rem; }
  .hero-sub      { font-size: .88rem; margin-bottom: 1.5rem; }

  /* Market chips compact */
  .hero-markets  { gap: .4rem; margin-bottom: 1.75rem; }
  .hero-mchip    { font-size: .67rem; padding: .18rem .6rem; }

  /* Actions stack vertically on small phones */
  .hero-actions  { flex-direction: column; align-items: center; gap: .9rem; }
  .btn-primary   { width: 100%; justify-content: center; padding: .85rem 1rem; }
  .btn-submit    { width: 100%; justify-content: center; }

  /* Section headings scale */
  .section-heading { font-size: clamp(1.7rem, 6vw, 2.1rem); }
  .section-sub      { font-size: .9rem; }

  /* About */
  .about-details { max-width: 100%; }
  .detail-card   { padding: .85rem 1rem; }

  /* Cards */
  .service-card { padding: 1.35rem 1.1rem; }
  .service-icon { width: 36px; height: 36px; margin-bottom: .9rem; }
  .market-card  { padding: 1.35rem 1.1rem; }

  /* Stats */
  .stat-number  { font-size: clamp(1.9rem, 8.5vw, 2.8rem); }
  .stat-label   { font-size: .68rem; }

  /* Contact */
  .map-wrap iframe { height: 170px; }
  .info-card { padding: .85rem .95rem; gap: .65rem; }
  .info-icon { width: 34px; height: 34px; }
  .info-icon svg { width: 15px; height: 15px; }

  /* Footer — centered single column */
  .footer { padding-top: 2.5rem; }
  .footer-col-brand {
    display:     flex;
    flex-direction: column;
    align-items: center;
    text-align:  center;
  }
  .footer-col-brand .logo { justify-content: center; }
  .footer-contact-mini    { align-items: center; }
  .footer-col-title       { text-align: center; }
  .footer-links           { align-items: center; }
  /* Remove slide effect on touch (no hover) */
  .footer-links a::before { display: none; }
  .footer-links a:hover   { transform: none; }
  .footer-reg-badge       { align-self: center; }
  .footer-bottom          { flex-direction: column; align-items: center; gap: .4rem; }
  .footer-bottom p        { text-align: center; }
}


/* ══════════════════════════════════════════════════
   EXTRA-SMALL PHONES — ≤ 360px
══════════════════════════════════════════════════ */
@media (max-width: 360px) {
  .navbar-pill { gap: .4rem; height: 48px; }
  .logo-img    { height: 32px; }
  .lang-btn    { display: none; }
  .hero-mchip  { font-size: .62rem; padding: .15rem .5rem; }
}


/* ══════════════════════════════════════════════════
   REDUCED MOTION — respect OS preference
══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .hero-icon,
  .hero-glow,
  .hero-dot,
  .orb-1, .orb-2, .orb-3 {
    animation: none !important;
  }
  * {
    transition-duration: .01ms !important;
    animation-duration:  .01ms !important;
  }
}


/* ══════════════════════════════════════════════════
   SAFE AREA — notched / bottom-bar phones
══════════════════════════════════════════════════ */
@supports (padding: max(0px)) {
  .navbar {
    padding-left:  max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
  .footer-bottom {
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  }
}