/* ============================================
   مَدّ | Madd Creative Hub
   Cinematic ocean experience
   ============================================ */

/* ============================================
   الخط المعتمد للموقع — The Year of Handicrafts
   صيغة WOFF2 فقط: أخف حجمًا وتحافظ على تشكيل
   النص العربي والربط دون أي كسر في العرض.
   ============================================ */
@font-face {
  font-family: "Handicrafts";
  src: url("assets/fonts/TheYearofHandicrafts-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* Handicrafts has an unusually tall glyph-to-em ratio; scale it down
     so its rendered size matches a normal font site-wide. */
  size-adjust: 80%;
}

@font-face {
  font-family: "Handicrafts";
  src: url("assets/fonts/TheYearofHandicrafts-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  /* Handicrafts has an unusually tall glyph-to-em ratio; scale it down
     so its rendered size matches a normal font site-wide. */
  size-adjust: 80%;
}

@font-face {
  font-family: "Handicrafts";
  src: url("assets/fonts/TheYearofHandicrafts-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  /* Handicrafts has an unusually tall glyph-to-em ratio; scale it down
     so its rendered size matches a normal font site-wide. */
  size-adjust: 80%;
}

@font-face {
  font-family: "Handicrafts";
  src: url("assets/fonts/TheYearofHandicrafts-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  /* Handicrafts has an unusually tall glyph-to-em ratio; scale it down
     so its rendered size matches a normal font site-wide. */
  size-adjust: 80%;
}

@font-face {
  font-family: "Handicrafts";
  src: url("assets/fonts/TheYearofHandicrafts-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  /* Handicrafts has an unusually tall glyph-to-em ratio; scale it down
     so its rendered size matches a normal font site-wide. */
  size-adjust: 80%;
}

:root {
  /* ===== هوية مَدّ — 4 ألوان أساسية فقط لترسيخ الهوية ===== */
  --jacksons:     #2E3A8E;  /* اللون الأساسي */
  --swiss-coffee: #E2D3C8;  /* فاتح دافئ */
  --mischka:      #C9CDD5;  /* رمادي فاتح */
  --lucky-point:  #211C4F;  /* القاعدة الداكنة */
  --lucky-deep:   #15123A;  /* مشتق أغمق من القاعدة */
  --nile-blue:    #1F3A45;  /* تركواز داكن — لمسة ثانوية (الأقل استخداماً) */

  /* أسماء دلالية موحّدة على الهوية أعلاه */
  --ocean-blue:  var(--jacksons);
  --ocean-cyan:  var(--mischka);
  --deep-blue:   var(--jacksons);
  --midnight:    var(--lucky-point);
  --midnight-2:  var(--lucky-deep);
  --liquid-white: #DED0D2;
  --soft-gray:   var(--mischka);
  --muted-ice:   var(--mischka);
  --ocean-depth: var(--nile-blue);
  --foam: rgba(46, 58, 142, 0.10);
  --glass: rgba(201, 205, 213, 0.055);
  --glass-border: rgba(46, 58, 142, 0.16);

  /* Handicrafts يغطي العربية والأرقام فقط (لا حروف لاتينية)،
     لذا اللاتيني يقع تلقائيًا على Tajawal/النظام دون كسر. */
  --display: "Handicrafts", "Tajawal", system-ui, sans-serif;
  --body:    "Handicrafts", "Tajawal", system-ui, sans-serif;
  --latin:   "Tajawal", "Handicrafts", system-ui, sans-serif;
  --mono:    ui-monospace, "Handicrafts", "Tajawal", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }

html { scroll-behavior: smooth; }

html, body {
  background: var(--midnight);
  color: var(--liquid-white);
  font-family: var(--body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  direction: rtl;
  text-rendering: optimizeLegibility;
}

body {
  background:
    radial-gradient(ellipse 1300px 850px at 18% -10%, rgba(46,58,142,0.26), transparent 62%),
    radial-gradient(ellipse 1050px 760px at 100% 28%, rgba(46,58,142,0.30), transparent 68%),
    radial-gradient(ellipse 900px 700px at 50% 110%, rgba(201,205,213,0.10), transparent 66%),
    linear-gradient(180deg, var(--lucky-deep) 0%, var(--midnight) 36%, #262066 100%);
  min-height: 100vh;
}

::selection { background: var(--ocean-blue); color: var(--liquid-white); }

/* ============================================
   FLUID PARTICLES BACKGROUND
   ============================================ */
.particles-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.35;
  transform: translateZ(0);
}

/* ============================================
   PROMO BANNER — top of page, above nav
   ============================================ */
.promo-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 110;
  background: linear-gradient(90deg, rgba(34,34,74,0.62), rgba(61,63,143,0.20) 50%, rgba(34,34,74,0.62));
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid rgba(111,147,196,0.20);
  transform: translateY(0);
  transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .4s;
}
.promo-banner.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
.promo-inner {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 56px;
}
.promo-content {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.promo-badge {
  flex-shrink: 0;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--midnight);
  background: linear-gradient(135deg, #7E9FDC, #CBD7E4);
  padding: 4px 12px;
  border-radius: 100px;
  white-space: nowrap;
}
.promo-text {
  font-family: var(--body);
  font-size: 13px;
  color: rgba(244,247,255,0.85);
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.promo-text strong {
  color: var(--liquid-white);
  font-weight: 600;
}
.promo-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.promo-timer {
  display: flex;
  align-items: center;
  gap: 4px;
  direction: ltr;
}
.promo-time-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 38px;
}
.promo-num {
  font-family: var(--latin);
  font-size: 16px;
  font-weight: 700;
  color: var(--liquid-white);
  letter-spacing: 0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.promo-label {
  font-family: var(--body);
  font-size: 9px;
  color: rgba(244,247,255,0.45);
  margin-top: 2px;
}
.promo-sep {
  font-family: var(--latin);
  font-size: 14px;
  font-weight: 700;
  color: rgba(143,174,230,0.6);
  margin: 0 2px;
  align-self: flex-start;
  line-height: 1;
}
.promo-cta {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  color: var(--midnight);
  background: var(--liquid-white);
  padding: 7px 18px;
  border-radius: 100px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .3s, background .3s;
}
.promo-cta:hover {
  transform: scale(1.04);
  background: #CBD7E4;
}
.promo-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(244,247,255,0.15);
  background: rgba(244,247,255,0.06);
  color: rgba(244,247,255,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .3s, color .3s;
  flex-shrink: 0;
}
.promo-close:hover {
  background: rgba(244,247,255,0.12);
  color: var(--liquid-white);
}
.promo-close svg {
  width: 14px;
  height: 14px;
}

/* When banner is visible, push nav down */
body.has-promo .nav {
  top: var(--promo-h, 44px);
}
body.has-promo .hero {
  padding-top: calc(140px + var(--promo-h, 44px));
}
body.has-promo .loader {
  top: 0; /* loader stays full screen */
}

/* Mobile */
@media (max-width: 900px) {
  .promo-inner {
    flex-direction: column;
    padding: 10px 18px;
    gap: 8px;
  }
  .promo-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .promo-text {
    font-size: 12px;
    white-space: normal;
  }
  .promo-right {
    width: 100%;
    justify-content: space-between;
  }
  .promo-close {
    position: absolute;
    top: 8px;
    left: 12px;
  }
  .promo-inner {
    position: relative;
  }
  body.has-promo .hero {
    padding-top: calc(100px + var(--promo-h, 88px));
  }
}
@media (max-width: 700px) {
  body.has-promo .hero {
    padding-top: calc(76px + var(--promo-h, 88px));
  }
}

/* Keep the values orbit alive on mobile while hiding only expanding cards. */
@media (max-width: 900px) {
  .values-section .orbital-stage {
    display: block !important;
    max-width: min(360px, 92vw) !important;
    aspect-ratio: 1 !important;
    overflow: visible !important;
    margin-bottom: 72px !important;
  }
  .values-section .orbital-nodes {
    display: block !important;
  }
  .values-section .orbital-node .card {
    display: none !important;
  }
  .values-section .orbital-node .node-label {
    top: 36px !important;
    font-size: 11px !important;
  }
  .values-section .orbital-node .dot {
    width: 34px !important;
    height: 34px !important;
  }
  .values-section .orbit-static-labels {
    display: none !important;
  }
  .values-static-grid {
    margin-top: 0 !important;
  }
}

/* ============================================
   CURSOR
   ============================================ */
* { cursor: none; }
@media (max-width: 900px) { * { cursor: auto; } }

.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--liquid-white);
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width .3s cubic-bezier(.2,.8,.2,1), height .3s cubic-bezier(.2,.8,.2,1), opacity .3s;
}
.cursor-ring {
  position: fixed; top: 0; left: 0;
  width: 40px; height: 40px;
  border: 1px solid rgba(244,247,255,0.4);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width .4s cubic-bezier(.2,.8,.2,1), height .4s cubic-bezier(.2,.8,.2,1), border-color .3s;
  backdrop-filter: blur(1px) invert(.05);
}
.cursor.hover { width: 6px; height: 6px; }
.cursor-ring.hover { width: 70px; height: 70px; border-color: var(--liquid-white); }

@media (max-width: 900px) {
  .cursor, .cursor-ring { display: none; }
}

/* ============================================
   NAV
   ============================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 56px;
  transition: all .5s cubic-bezier(.2,.8,.2,1);
}
.nav.scrolled {
  padding: 16px 56px;
  background: rgba(6, 10, 26, 0.65);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid rgba(244,247,255,0.06);
}
.nav-logo {
  width: 104px;
  height: 62px;
  color: var(--liquid-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), filter .4s;
  filter: drop-shadow(0 4px 16px rgba(120,180,255,0.25));
}
.nav-logo:hover {
  transform: scale(1.06);
  filter: drop-shadow(0 6px 22px rgba(180,215,255,0.45));
}
.nav-logo svg,
.nav-logo img {
  width: 100%;
  height: 100%;
  fill: currentColor;
  object-fit: contain;
  display: block;
}
.nav.scrolled .nav-logo {
  width: 86px;
  height: 52px;
}
.nav-links {
  display: flex; gap: 40px; align-items: center;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 500;
}
.nav-links a {
  color: var(--soft-gray);
  text-decoration: none;
  position: relative;
  padding: 6px 0;
  transition: color .3s;
}
.nav-links a::after {
  content: ""; position: absolute;
  bottom: 0; right: 0;
  width: 0; height: 1px;
  background: var(--liquid-white);
  transition: width .4s cubic-bezier(.2,.8,.2,1);
}
.nav-links a:hover { color: var(--liquid-white); }
.nav-links a:hover::after { width: 100%; }

.nav-right { display: flex; gap: 16px; align-items: center; }
/* ============================================
   LIQUID GLASS — UNIFIED SYSTEM
   Every interactive surface on the page shares
   the same refractive-glass treatment: a clear
   lens layer (backdrop-filter + SVG refraction)
   topped with a multi-stop highlight stack that
   simulates the meniscus and bottom shadow of
   a real glass pill.
   ============================================ */

:root {
  --glass-reflex-light: 1;
  --glass-reflex-dark: 1;
  --glass-bg: rgba(244, 247, 255, 0.06);
  --glass-bg-strong: rgba(47, 107, 219, 0.32);
}

/* The shared lens. Apply via .liquid or via the
   per-component selectors below. Note: the lens
   itself must remain EMPTY of content so the
   backdrop-filter only refracts what is BEHIND
   the button (no text-ghosting). */
.liquid-lens {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background: var(--glass-bg);
  backdrop-filter: blur(10px) url(#liquid-glass) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, white calc(var(--glass-reflex-light) * 10%), transparent),
    inset  1.8px  3px   0px -2px color-mix(in srgb, white calc(var(--glass-reflex-light) * 90%), transparent),
    inset -2px   -2px   0px -2px color-mix(in srgb, white calc(var(--glass-reflex-light) * 80%), transparent),
    inset -3px   -8px   1px -6px color-mix(in srgb, white calc(var(--glass-reflex-light) * 55%), transparent),
    inset -0.3px -1px   4px  0px color-mix(in srgb, black calc(var(--glass-reflex-dark)  * 14%), transparent),
    inset -1.5px  2.5px 0px -2px color-mix(in srgb, black calc(var(--glass-reflex-dark)  * 22%), transparent),
    inset  0px    3px   4px -2px color-mix(in srgb, black calc(var(--glass-reflex-dark)  * 22%), transparent),
    inset  2px   -6.5px 1px -4px color-mix(in srgb, black calc(var(--glass-reflex-dark)  * 12%), transparent),
    0px 1px 5px 0px color-mix(in srgb, black calc(var(--glass-reflex-dark) * 18%), transparent),
    0px 8px 22px 0px color-mix(in srgb, black calc(var(--glass-reflex-dark) * 14%), transparent);
  transition: background-color .4s cubic-bezier(1,0,.4,1), box-shadow .4s cubic-bezier(1,0,.4,1);
}

/* ---------- Nav language pill ---------- */
.nav-lang {
  position: relative;
  isolate: isolate;
  isolation: isolate;
  font-family: var(--latin);
  font-size: 13px;
  color: var(--liquid-white);
  letter-spacing: 0.08em;
  padding: 10px 16px;
  border: none;
  border-radius: 100px;
  background: transparent;
  cursor: pointer;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), color .3s;
}
.nav-lang::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background: var(--glass-bg);
  backdrop-filter: blur(10px) url(#liquid-glass) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, white 10%, transparent),
    inset 1.2px 2px 0 -1.5px color-mix(in srgb, white 80%, transparent),
    inset -1.4px -1.4px 0 -1.5px color-mix(in srgb, white 70%, transparent),
    inset -2px -5px 1px -4px color-mix(in srgb, white 50%, transparent),
    inset 0 2px 3px -1.5px color-mix(in srgb, black 18%, transparent),
    0 2px 10px rgba(0,0,0,0.18);
  transition: box-shadow .4s;
}
.nav-lang:hover { transform: scale(1.04); }
.nav-lang:active { transform: scale(.96); }

/* ============================================
   LIQUID GLASS BUTTON (.lg-btn)
   ============================================ */
.lg-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 32px;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 500;
  color: var(--liquid-white);
  background: transparent;
  border: none;
  border-radius: 100px;
  text-decoration: none;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0,0,0,0.30);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), color .3s;
}
/* The lens layer — emits the refraction + highlights */
.lg-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background: var(--glass-bg);
  backdrop-filter: blur(10px) url(#liquid-glass) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, white 10%, transparent),
    inset  1.8px  3px   0px -2px color-mix(in srgb, white 90%, transparent),
    inset -2px   -2px   0px -2px color-mix(in srgb, white 80%, transparent),
    inset -3px   -8px   1px -6px color-mix(in srgb, white 55%, transparent),
    inset -0.3px -1px   4px  0px color-mix(in srgb, black 14%, transparent),
    inset -1.5px  2.5px 0px -2px color-mix(in srgb, black 22%, transparent),
    inset  0px    3px   4px -2px color-mix(in srgb, black 22%, transparent),
    inset  2px   -6.5px 1px -4px color-mix(in srgb, black 12%, transparent),
    0px 1px  5px 0px rgba(0,0,0,0.18),
    0px 8px 22px 0px rgba(0,0,0,0.16);
  transition: background-color .4s cubic-bezier(1,0,.4,1), box-shadow .4s cubic-bezier(1,0,.4,1);
}
/* Mouse-tracking accent highlight (sits above lens, below text) */
.lg-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(140px 100px at var(--mx, 50%) var(--my, 50%),
              rgba(47,107,219,0.55), transparent 70%);
  opacity: 0;
  transition: opacity .4s;
}
.lg-btn:hover { transform: scale(1.03); }
.lg-btn:hover::after { opacity: 1; }
.lg-btn:active { transform: scale(.96); }

.lg-btn .arrow {
  display: inline-block;
  width: 18px; height: 18px;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.lg-btn:hover .arrow { transform: translateX(-4px); }

/* Primary variant — tints the lens brand-blue but keeps every other glass property */
.lg-btn.primary::before {
  background: linear-gradient(135deg, rgba(47,107,219,0.78), rgba(47,107,219,0.42));
}
.lg-btn.primary:hover::before {
  background: linear-gradient(135deg, rgba(47,107,219,0.88), rgba(47,107,219,0.55));
}

/* ============================================
   HERO
   ============================================ */
#ocean-canvas {
  position: absolute;
  left: 0;
  right: 0;
  /* Wave reaches higher to overlap with the city skyline more */
  top: 28%;
  bottom: -8%;
  width: 100%;
  z-index: -1;
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%,
    rgba(0,0,0,0.7)  4%,
    rgba(0,0,0,0.98) 10%,
    black 16%,
    black 78%,
    rgba(0,0,0,0.7) 88%,
    rgba(0,0,0,0.35) 95%,
    transparent 100%);
          mask-image: linear-gradient(180deg,
    transparent 0%,
    rgba(0,0,0,0.7)  4%,
    rgba(0,0,0,0.98) 10%,
    black 16%,
    black 78%,
    rgba(0,0,0,0.7) 88%,
    rgba(0,0,0,0.35) 95%,
    transparent 100%);
}
/* ============================================
   JEDDAH SKYLINE — the new wide cinematic banner.
   Anchored at the top, takes ~64% of hero height. The TOP edge fades
   atmospherically into the deep sky; the BOTTOM stays sharp so the
   foot of the city meets the ocean cleanly. The skyline image's
   own dark base diffuses into the wave's top fade to hide the seam. */
.hero-skyline {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 48%;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%,
    rgba(0,0,0,0.45) 8%,
    rgba(0,0,0,0.85) 18%,
    black 32%,
    black 100%);
          mask-image: linear-gradient(180deg,
    transparent 0%,
    rgba(0,0,0,0.45) 8%,
    rgba(0,0,0,0.85) 18%,
    black 32%,
    black 100%);
}
.hero-skyline .skyline-img {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: auto;
  height: 100%;
  min-width: 100%;
  object-fit: cover;
  object-position: center bottom;
  transform: translateX(-50%);
  filter: brightness(0.85) saturate(1.05) contrast(1.02);
  display: block;
}
/* Side vignette — both flanks of the city dissolve into the night so
   the photograph never reads as a rectangle. */
.hero-skyline::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 105% at 50% 60%,
      transparent 0%,
      rgba(10,16,41,0.0) 45%,
      rgba(10,16,41,0.55) 82%,
      rgba(10,16,41,0.95) 100%);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    /* Volumetric haze along the horizon line (where ocean meets skyline)
       — a warm-blue diffusion bar that ties the two together. */
    radial-gradient(ellipse 1200px 280px at 50% 44%,
      rgba(40, 90, 200, 0.30) 0%,
      rgba(24, 57, 86, 0.18) 40%,
      transparent 75%),
    /* Subtle blue-grey sky atmosphere on top */
    radial-gradient(ellipse 1600px 700px at 50% 5%,
      rgba(120, 170, 240, 0.06) 0%,
      transparent 65%),
    /* Side vignette to kill all visible edges */
    radial-gradient(ellipse 110% 100% at 50% 50%,
      transparent 35%,
      rgba(10,16,41,0.30) 75%,
      rgba(10,16,41,0.85) 100%);
}
/* Tall atmospheric skirt — the entire bottom 50% of the hero is a
   cinematic blue-black mist that bleeds OVER the section boundary so
   the join is invisible. Replaces the old hard fade. */
.hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -120px;
  height: 60%;
  pointer-events: none;
  z-index: 0;
  background:
    /* Deep blue fog at the bottom */
    linear-gradient(180deg,
      transparent 0%,
      rgba(24, 57, 86, 0.12) 25%,
      rgba(10, 16, 41, 0.45) 55%,
      rgba(10, 16, 41, 0.85) 78%,
      var(--midnight) 100%),
    /* Centered glow that softens the horizon-to-page transition */
    radial-gradient(ellipse 1000px 380px at 50% 35%,
      rgba(47, 107, 219, 0.10) 0%,
      transparent 70%);
}
.philosophy-section {
  position: relative;
  /* لمسة التركواز الداكن (Nile Blue) — تتماشى مع موضوع البحر */
  background: radial-gradient(ellipse 1000px 680px at 80% 38%,
    rgba(31, 58, 69, 0.5), transparent 68%);
}
/* Mirror skirt that REACHES UP onto the hero's bottom edge — the two
   gradients overlap inside the seam so the meeting point disappears. */
.philosophy-section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -160px;
  height: 320px;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(10,16,41,0.55) 30%,
    var(--midnight) 70%,
    var(--midnight) 100%);
}

/* ============================================
   HERO — LOGO + HEADLINE
   ============================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 140px 56px 120px;
  overflow: hidden;
  isolation: isolate;
}

/* The real مَدّ wordmark, centered above the headline */
.hero-logo {
  width: clamp(180px, 22vw, 320px);
  color: var(--liquid-white);
  opacity: 0;
  animation: hero-fade-in 1.4s cubic-bezier(.2,.8,.2,1) .1s forwards;
  filter: drop-shadow(0 8px 40px rgba(120,180,255,0.25));
  margin-bottom: 56px;
}
.hero-logo svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Headline — clean, calm, breathing room between lines */
.hero-headline {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(34px, 5.6vw, 88px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--liquid-white);
  max-width: 1100px;
  margin: 0 auto;
  text-wrap: balance;
}
.hero-line {
  display: block;
}
.hero-line.line-1 {
  opacity: 0;
  animation: hero-fade-in 1.2s cubic-bezier(.2,.8,.2,1) .4s forwards;
}
.hero-line.line-2 {
  margin-top: 14px;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
  opacity: 0;
  animation: hero-fade-in 1.2s cubic-bezier(.2,.8,.2,1) .9s forwards;
}
.hero-line .static-part {
  color: var(--liquid-white);
}
/* The word being typed — receives an iridescent water-tint */
.hero-line .typewriter {
  color: transparent;
  background: linear-gradient(180deg, #CBD7E4 0%, #7E9FDC 55%, var(--ocean-blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 6px 28px rgba(120,180,255,0.45));
  font-weight: 500;
  display: inline-block;
  min-width: 1ch;
}
/* Blinking caret next to the typed word */
.hero-line .caret {
  display: inline-block;
  color: #CBD7E4;
  font-weight: 300;
  margin-right: 2px;
  animation: caret-blink 0.9s steps(1) infinite;
  transform: translateY(-0.08em);
}
@keyframes caret-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes hero-fade-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-sub {
  margin-top: 40px;
  font-family: var(--body);
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.8;
  color: var(--soft-gray);
  max-width: 720px;
  font-weight: 400;
  opacity: 0;
  animation: fade-up 1.4s cubic-bezier(.2,.8,.2,1) .9s forwards;
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-cta {
  margin-top: 56px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  animation: fade-up 1.4s cubic-bezier(.2,.8,.2,1) 1.1s forwards;
}

.hero-scroll {
  position: absolute;
  bottom: 40px;
  right: 50%;
  transform: translateX(50%);
  font-family: var(--latin);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--soft-gray);
  text-transform: uppercase;
  writing-mode: vertical-rl;
  display: flex;
  align-items: center;
  gap: 16px;
  opacity: 0;
  animation: fade-up 1.4s ease 1.5s forwards;
}
.hero-scroll::before {
  content: "";
  display: block;
  width: 1px; height: 60px;
  background: linear-gradient(180deg, transparent, var(--liquid-white));
  animation: scroll-pulse 2.2s ease-in-out infinite;
}
@keyframes scroll-pulse {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  50.01% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ============================================
   SECTION FRAMEWORK
   ============================================ */
section {
  position: relative;
  padding: 84px 56px;
  max-width: 1600px;
  margin: 0 auto;
}
.eyebrow {
  font-family: var(--latin);
  font-size: 12px;
  color: var(--ocean-blue);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  white-space: nowrap;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 32px; height: 1px;
  background: var(--ocean-blue);
}
h2.section-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(40px, 5.4vw, 84px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 1100px;
  color: var(--liquid-white);
}
p.section-lead {
  margin-top: 28px;
  font-size: clamp(16px, 1.2vw, 20px);
  line-height: 1.8;
  color: var(--soft-gray);
  max-width: 720px;
}

/* Reveal */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: .1s; }
.reveal.d2 { transition-delay: .2s; }
.reveal.d3 { transition-delay: .3s; }
.reveal.d4 { transition-delay: .4s; }

/* ============================================
   STORYTELLING — voice-synced cinematic section
   ============================================ */
.story-section {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  max-width: none;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
}
.story-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, rgba(47,107,219,0.12), transparent 70%),
    linear-gradient(180deg, var(--midnight) 0%, #050816 50%, var(--midnight) 100%);
}
.story-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(47,107,219,0.18) 0%, transparent 65%);
  filter: blur(80px);
  opacity: 0;
  transition: opacity 1.5s ease;
  pointer-events: none;
}
.story-section.is-playing .story-glow {
  opacity: 1;
  animation: story-glow-breathe 6s ease-in-out infinite alternate;
}
@keyframes story-glow-breathe {
  0%   { transform: translate(-50%, -50%) scale(1);    opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(1.25); opacity: 1; }
}
.story-grid-overlay {
  position: absolute;
  inset: 0;
  background-size: 80px 80px;
  background-image:
    linear-gradient(to right,  rgba(244,247,255,0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244,247,255,0.02) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black, transparent);
          mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black, transparent);
  pointer-events: none;
}
.story-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 64px 40px;
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.story-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.story-line {
  font-family: var(--display);
  font-size: clamp(22px, 3.8vw, 48px);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--liquid-white);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1), filter .35s, color .35s, text-shadow .5s;
  filter: blur(4px);
}
/* When section enters viewport — all lines fade in with stagger */
.story-section.in-view .story-line {
  opacity: 0.35;
  transform: translateY(0);
  filter: blur(0);
}
/* Currently speaking line — fully bright */
.story-line.is-active {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  filter: blur(0) !important;
  text-shadow: 0 0 40px rgba(120,180,255,0.25);
}
/* Already spoken lines — dimmed */
.story-line.is-past {
  opacity: 0.15 !important;
  filter: blur(0) !important;
  transform: translateY(0) scale(0.97) !important;
}
/* Not yet spoken but visible */
.story-line.is-upcoming {
  opacity: 0.25 !important;
  filter: blur(0) !important;
}
.story-break {
  margin-top: 28px;
}
.story-accent {
  margin-top: 16px;
  font-size: clamp(28px, 5vw, 64px);
  background: linear-gradient(180deg, #DED0D2 0%, #CBD7E4 40%, #8F9BD6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
  display: inline-block;
  transition: opacity .35s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1), filter .5s, letter-spacing .8s cubic-bezier(.22,1,.36,1), text-shadow .5s;
}
/* Always visible even before audio */
.story-section.in-view .story-accent {
  opacity: 0.5;
}
.story-accent.is-active {
  opacity: 1 !important;
  filter: blur(0) drop-shadow(0 0 60px rgba(120,180,255,0.6)) !important;
  animation: accent-entrance .9s cubic-bezier(.22,1,.36,1) forwards;
}
.story-accent.is-upcoming {
  opacity: 0.45 !important;
}
@keyframes accent-entrance {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.6);
    letter-spacing: -0.08em;
    filter: blur(12px) drop-shadow(0 0 0 transparent);
  }
  30% {
    opacity: 1;
    transform: translateY(-8px) scale(1.18);
    letter-spacing: 0.02em;
    filter: blur(0) drop-shadow(0 0 100px rgba(120,180,255,0.9));
  }
  50% {
    transform: translateY(3px) scale(1.06);
    letter-spacing: 0.12em;
    filter: blur(0) drop-shadow(0 0 60px rgba(120,180,255,0.7));
  }
  70% {
    transform: translateY(-2px) scale(1.02);
    letter-spacing: 0.06em;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    letter-spacing: 0.04em;
    filter: blur(0) drop-shadow(0 0 50px rgba(120,180,255,0.5));
  }
}
/* Shimmer light sweep after entrance */
.story-accent.is-active::before {
  content: "بل تمتد";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.9) 50%, transparent 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% 100%;
  animation: accent-shimmer 2s ease-in-out 0.8s forwards;
  pointer-events: none;
}
@keyframes accent-shimmer {
  0%   { background-position: 200% center; opacity: 0; }
  20%  { opacity: 0.8; }
  100% { background-position: -200% center; opacity: 0; }
}
/* Glow ring pulse behind the text */
.story-accent.is-active::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 200%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(143,174,230,0.35) 0%, transparent 65%);
  animation: accent-glow-pulse 2.5s ease-in-out 0.3s infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes accent-glow-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.3; }
  50%      { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; }
}
/* When no audio is playing, and section is done — show all lines fully */
.story-section.is-done .story-line {
  opacity: 1 !important;
  filter: blur(0) !important;
  transform: translateY(0) !important;
}
.story-section.is-done .story-line.is-past {
  opacity: 0.2 !important;
}

/* Progress bar */
.story-progress-bar {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 2px;
  background: rgba(244,247,255,0.10);
  border-radius: 2px;
  overflow: hidden;
  opacity: 0;
  transition: opacity .6s;
}
.story-section.is-playing .story-progress-bar {
  opacity: 1;
}
.story-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--ocean-blue), #7E9FDC);
  border-radius: 2px;
  transition: width .2s linear;
}
.story-audio-hint {
  position: absolute;
  left: 50%;
  bottom: 42px;
  z-index: 120;
  transform: translate(-50%, 14px);
  opacity: 0;
  pointer-events: none;
  border: 1px solid rgba(244,247,255,0.18);
  border-radius: 999px;
  background: rgba(244,247,255,0.08);
  color: var(--liquid-white);
  padding: 12px 20px;
  font-family: var(--body);
  font-size: 13px;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  transition: opacity .35s ease, transform .35s ease, background .25s ease;
}
.story-audio-hint.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.story-audio-hint:hover {
  background: rgba(244,247,255,0.14);
}

/* Replay button */
.story-replay {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(244,247,255,0.15);
  background: rgba(244,247,255,0.05);
  color: rgba(244,247,255,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s, background .3s, color .3s, transform .3s;
}
.story-replay.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%);
}
.story-replay:hover {
  background: rgba(244,247,255,0.12);
  color: var(--liquid-white);
}
.story-replay svg {
  width: 18px;
  height: 18px;
}

/* Mobile */
@media (max-width: 700px) {
  .story-stage { padding: 48px 24px; min-height: 82vh; }
  .story-audio-hint {
    bottom: 128px;
    padding: 11px 18px;
    font-size: 12px;
    background: rgba(244,247,255,0.14);
  }
  .story-line { font-size: clamp(18px, 5.5vw, 28px); }
  .story-accent { font-size: clamp(22px, 7vw, 36px); }
  .story-break { margin-top: 20px; }
  .story-lines { gap: 6px; }
}

/* ============================================
   PHILOSOPHY (Jeddah)
   ============================================ */
.philosophy {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 72px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.philosophy-visual {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 0;
  overflow: hidden;
  background: #050816;
  border: 0;
  box-shadow: none;
  contain: layout paint;
}
.philosophy-visual::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(90deg, transparent 42%, rgba(247,251,255,0.96) 42% 58%, transparent 58%),
    rgba(247,251,255,0.08);
  clip-path: polygon(38% 28%, 38% 72%, 72% 50%);
  box-shadow:
    0 0 0 1px rgba(247,251,255,0.2),
    0 18px 42px rgba(0,0,0,0.35);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  opacity: 0.9;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.philosophy-visual.is-playing::after {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.85);
}
.philosophy-visual canvas { width: 100%; height: 100%; display: block; }
.philosophy-quote {
  position: absolute;
  bottom: 36px; right: 36px; left: 36px;
  font-family: var(--latin);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--soft-gray);
  text-transform: uppercase;
  direction: rtl;
  text-align: right;
}
.philosophy-quote strong { color: var(--liquid-white); font-weight: 400; }

.philosophy-body p {
  font-size: clamp(17px, 1.3vw, 22px);
  line-height: 1.85;
  color: var(--soft-gray);
}
.philosophy-body p + p { margin-top: 24px; }

/* ============================================
   VISION + MISSION
   ============================================ */
.vm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.vm-card {
  position: relative;
  padding: 56px 48px 64px;
  border: 1px solid var(--glass-border);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(244,247,255,0.04) 0%, rgba(244,247,255,0.01) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
  isolation: isolate;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), border-color .4s;
}
.vm-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(400px 300px at var(--mx, 50%) var(--my, 0%), rgba(47,107,219,0.25), transparent 60%);
  opacity: 0;
  transition: opacity .6s;
  z-index: -1;
}
.vm-card:hover { transform: translateY(-6px); border-color: rgba(244,247,255,0.18); }
.vm-card:hover::before { opacity: 1; }

.vm-num {
  font-family: var(--latin);
  font-size: 14px;
  letter-spacing: 0.2em;
  color: var(--ocean-blue);
  text-transform: uppercase;
}
.vm-card h3 {
  font-family: var(--display);
  font-size: clamp(36px, 3.4vw, 56px);
  font-weight: 600;
  margin-top: 16px;
  line-height: 1.1;
}
.vm-card p {
  margin-top: 24px;
  font-size: 17px;
  line-height: 1.85;
  color: var(--soft-gray);
}
.vm-card .symbol {
  position: absolute;
  top: 32px;
  left: 32px;
  width: 72px; height: 72px;
  opacity: 0.18;
  color: var(--ocean-blue);
}

/* ============================================
   VALUES — RADIAL ORBITAL TIMELINE
   ============================================ */
.values-section {
  text-align: center;
  overflow: visible;
  padding-bottom: clamp(110px, 12vw, 180px);
}
.values-head {
  max-width: 900px;
  margin: 0 auto 50px;
}
.values-head .eyebrow,
.values-head .section-title,
.values-head .section-lead {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.values-head .section-lead {
  max-width: 600px;
}

/* The stage — a big square that contains the rotating orbital system.
   Generous size so the cards have room to open without overlapping. */
.orbital-stage {
  position: relative;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 1;
  margin: 0 auto;
  perspective: 1200px;
  isolation: isolate;
  contain: layout;
  overflow: visible;
}

/* Big static orbit ring that the nodes ride on */
.orbital-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px dashed rgba(244,247,255,0.10);
  border-radius: 50%;
}
.orbital-orbit::before,
.orbital-orbit::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(244,247,255,0.04);
  transform: translate(-50%, -50%);
}
.orbital-orbit::before { width: 78%;  aspect-ratio: 1; }
.orbital-orbit::after  { width: 118%; aspect-ratio: 1; }

/* CORE — the centre logo. The full مَدّ logo (wordmark + decoration)
   sits inside a soft glowing disc. We size the disc by the wider logo
   aspect ratio so nothing gets clipped. */
.orbital-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180px;
  height: 180px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.orbital-core-dot {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%,
      rgba(200,220,255,0.55) 0%,
      rgba(120,170,240,0.25) 30%,
      rgba(17,40,140,0.65) 70%,
      rgba(6,16,80,0.95) 100%);
  box-shadow:
    inset 0 -20px 50px rgba(0,0,0,0.4),
    0 0 70px rgba(47,107,219,0.45),
    0 0 160px rgba(47,107,219,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: core-breathe 5s ease-in-out infinite;
}
.orbital-core-dot svg {
  width: 78%;
  height: 78%;
  color: var(--liquid-white);
  fill: var(--liquid-white);
  opacity: 0.98;
  filter: drop-shadow(0 4px 12px rgba(120,180,255,0.4));
}
@keyframes core-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
.orbital-core-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(244,247,255,0.30);
  animation: core-ping 2.6s cubic-bezier(0,0,0.2,1) infinite;
  pointer-events: none;
}
.orbital-core-ring.r2 {
  animation-delay: 0.8s;
  border-color: rgba(244,247,255,0.18);
}
@keyframes core-ping {
  0%   { transform: scale(1);   opacity: 0.8; }
  80%  { transform: scale(1.9); opacity: 0;   }
  100% { transform: scale(1.9); opacity: 0;   }
}

/* NODES — JS-positioned around the orbit */
.orbital-nodes {
  position: absolute;
  inset: 0;
  z-index: 4;
}
.orbital-node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  /* JS rewrites --x / --y / --z / --op every animation frame */
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0);
  opacity: var(--op, 1);
  z-index: var(--z, 10);
  transition: opacity .6s ease, transform 0s linear;
  cursor: pointer;
}
.orbital-node .dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(6,10,26,0.85);
  border: 2px solid rgba(244,247,255,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--liquid-white);
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  transition: transform .35s cubic-bezier(.2,.8,.2,1),
              background .3s, border-color .3s, box-shadow .3s;
}
.orbital-node .dot svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.6;
  fill: none;
  stroke: currentColor;
}
.orbital-node .energy-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(180,210,255,0.25) 0%, transparent 70%);
  pointer-events: none;
}
.orbital-node .node-label {
  position: absolute;
  top: 42px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(244,247,255,0.75);
  text-shadow: 0 2px 8px rgba(6,10,26,0.85);
  transition: color .3s, transform .35s cubic-bezier(.2,.8,.2,1);
}
.orbital-node:hover .dot {
  background: rgba(47,107,219,0.65);
  border-color: rgba(244,247,255,0.7);
  transform: translate(-50%, -50%) scale(1.15);
}
.orbital-node:hover .node-label {
  color: var(--liquid-white);
}
/* Related node glow — animates when a sibling is active */
.orbital-node.is-related .dot {
  border-color: rgba(180,215,255,0.9);
  box-shadow: 0 0 24px rgba(180,215,255,0.45);
  animation: node-pulse 1.4s ease-in-out infinite;
}
@keyframes node-pulse {
  0%, 100% { box-shadow: 0 0 18px rgba(180,215,255,0.35); }
  50%      { box-shadow: 0 0 32px rgba(180,215,255,0.7); }
}
.orbital-node.is-active {
  z-index: 50 !important;
  opacity: 1 !important;
}
.orbital-node.is-active .dot {
  background: var(--liquid-white);
  color: var(--midnight);
  border-color: var(--liquid-white);
  transform: translate(-50%, -50%) scale(1.5);
  box-shadow: 0 0 32px rgba(244,247,255,0.4);
}
.orbital-node.is-active .node-label {
  color: var(--liquid-white);
  transform: translateX(-50%) scale(1.15);
}

/* Expanded card that appears below the active node */
.orbital-node .card {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: 280px;
  padding: 22px;
  background: rgba(8, 14, 34, 0.88);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(244,247,255,0.18);
  border-radius: 16px;
  box-shadow:
    0 24px 80px rgba(0,0,0,0.5),
    0 0 40px rgba(120,180,255,0.15);
  text-align: right;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.orbital-node.is-active .card {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.orbital-node .card::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 10px;
  background: rgba(244,247,255,0.5);
}
.orbital-node .card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.orbital-node .card-tag {
  font-family: var(--latin);
  font-size: 10px;
  letter-spacing: 0.22em;
  padding: 4px 10px;
  border-radius: 100px;
  border: 1px solid rgba(244,247,255,0.3);
  color: var(--liquid-white);
  text-transform: uppercase;
}
.orbital-node .card-num {
  font-family: var(--latin);
  font-size: 11px;
  color: rgba(244,247,255,0.5);
  letter-spacing: 0.18em;
}
.orbital-node .card-title {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 500;
  color: var(--liquid-white);
  margin-bottom: 12px;
}
.orbital-node .card-body {
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.7;
  color: rgba(244,247,255,0.8);
}
.orbital-node .card-bar {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(244,247,255,0.10);
}
.orbital-node .card-bar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--latin);
  font-size: 11px;
  color: rgba(244,247,255,0.65);
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.orbital-node .card-bar-track {
  width: 100%;
  height: 3px;
  background: rgba(244,247,255,0.10);
  border-radius: 3px;
  overflow: hidden;
}
.orbital-node .card-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ocean-blue), #7E9FDC);
  border-radius: 3px;
  width: 0;
  transition: width 1s cubic-bezier(.2,.8,.2,1);
}
.orbital-node.is-active .card-bar-fill {
  width: var(--energy, 80%);
}
.orbital-node .card-related {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(244,247,255,0.10);
}
.orbital-node .card-related-head {
  font-family: var(--latin);
  font-size: 10px;
  color: rgba(244,247,255,0.65);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.orbital-node .card-related-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.orbital-node .card-rel-btn {
  font-family: var(--display);
  font-size: 12px;
  color: rgba(244,247,255,0.85);
  padding: 5px 10px;
  background: transparent;
  border: 1px solid rgba(244,247,255,0.20);
  border-radius: 6px;
  cursor: pointer;
  transition: all .25s ease;
}
.orbital-node .card-rel-btn:hover {
  background: rgba(244,247,255,0.10);
  color: var(--liquid-white);
  border-color: rgba(244,247,255,0.5);
}
.orbital-node--fallback {
  --orbit-r: clamp(96px, 27vw, 190px);
  animation: orbit-fallback-spin 18s linear infinite;
  transform:
    rotate(calc(var(--i) * 60deg))
    translateX(var(--orbit-r))
    rotate(calc(var(--i) * -60deg));
}
.orbital-node--fallback .dot span {
  display: block;
  font-size: 18px;
  line-height: 1;
}
.orbital-node--fallback .node-label {
  animation: orbit-fallback-label 18s linear infinite;
}
@keyframes orbit-fallback-spin {
  from {
    transform:
      rotate(calc(var(--i) * 60deg))
      translateX(var(--orbit-r))
      rotate(calc(var(--i) * -60deg));
  }
  to {
    transform:
      rotate(calc(var(--i) * 60deg + 360deg))
      translateX(var(--orbit-r))
      rotate(calc(var(--i) * -60deg - 360deg));
  }
}
@keyframes orbit-fallback-label {
  from { transform: translateX(-50%) rotate(0deg); }
  to { transform: translateX(-50%) rotate(0deg); }
}

.values-static-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 980px;
  margin: 72px auto 0;
}
.value-static-card {
  text-align: right;
  padding: 22px;
  border-radius: 18px;
  border: 1px solid rgba(244,247,255,0.12);
  background: linear-gradient(145deg, rgba(255,255,255,0.065), rgba(255,255,255,0.02));
  box-shadow: 0 16px 44px rgba(0,0,0,0.18);
}
.value-static-card span {
  display: block;
  font-family: var(--latin);
  color: rgba(143,180,230,0.75);
  font-size: 12px;
  margin-bottom: 14px;
}
.value-static-card h3 {
  font-family: var(--display);
  color: var(--liquid-white);
  font-size: clamp(18px, 1.7vw, 24px);
  margin: 0 0 10px;
}
.value-static-card p {
  color: rgba(244,247,255,0.68);
  font-size: 13px;
  line-height: 1.8;
  margin: 0;
}

/* ============================================
   SERVICES (horizontal cinematic)
   ============================================ */
.services-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 80px;
}
.services-list {
  border-top: 1px solid rgba(244,247,255,0.08);
}
.service-row {
  position: relative;
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 40px;
  align-items: center;
  padding: 36px 8px;
  border-bottom: 1px solid rgba(244,247,255,0.08);
  cursor: none;
  transition: padding .5s cubic-bezier(.2,.8,.2,1);
}
.service-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(47,107,219,0.10), transparent);
  opacity: 0;
  transition: opacity .5s;
}
.service-row:hover { padding: 36px 32px; }
.service-row:hover::before { opacity: 1; }
.service-row:hover .service-num { color: var(--ocean-blue); transform: translateX(-8px); }
.service-row:hover .service-title { transform: translateX(-12px); letter-spacing: 0.01em; }
.service-row:hover .service-arrow { opacity: 1; transform: translateX(-8px) rotate(0deg); }

.service-num {
  font-family: var(--latin);
  font-size: 14px;
  color: var(--soft-gray);
  letter-spacing: 0.1em;
  transition: all .5s cubic-bezier(.2,.8,.2,1);
}
.service-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 38px);
  color: var(--liquid-white);
  line-height: 1.2;
  transition: all .5s cubic-bezier(.2,.8,.2,1);
}
.service-arrow {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateX(0) rotate(-45deg);
  transition: all .5s cubic-bezier(.2,.8,.2,1);
  color: var(--liquid-white);
}
.service-preview {
  position: fixed;
  top: 0; left: 0;
  width: 380px;
  aspect-ratio: 4/3;
  border-radius: 24px;
  pointer-events: none;
  z-index: 90;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
  transition: opacity .4s cubic-bezier(.2,.8,.2,1), transform .4s cubic-bezier(.2,.8,.2,1);
  overflow: hidden;
  background: linear-gradient(135deg, #122e60, #0a1a3a);
  border: 1px solid var(--glass-border);
}
.service-preview.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.service-preview > div {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  color: var(--liquid-white);
  font-size: 64px;
  font-weight: 600;
  letter-spacing: -0.03em;
  opacity: 0.18;
}

/* ============================================
   WHY MADD (storytelling blocks)
   ============================================ */
.why-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  margin-top: 80px;
}
.why-card {
  position: relative;
  padding: 48px 36px;
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(244,247,255,0.03), rgba(244,247,255,0.01));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
  isolation: isolate;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), border-color .4s, background .4s;
}
.why-card:hover {
  transform: translateY(-6px);
  border-color: rgba(47,107,219,0.4);
  background: linear-gradient(180deg, rgba(47,107,219,0.10), rgba(244,247,255,0.01));
}
.why-card .num {
  font-family: var(--latin);
  font-size: 12px;
  color: var(--ocean-blue);
  letter-spacing: 0.2em;
}
.why-card h4 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 30px;
  margin-top: 24px;
  line-height: 1.15;
}
.why-card p {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--soft-gray);
}
.why-card.span-7 { grid-column: span 7; min-height: 360px; }
.why-card.span-5 { grid-column: span 5; min-height: 360px; }
.why-card.span-4 { grid-column: span 4; }
.why-card.feat {
  background:
    radial-gradient(ellipse 400px 300px at 80% 20%, rgba(47,107,219,0.30), transparent 60%),
    linear-gradient(180deg, rgba(244,247,255,0.04), rgba(244,247,255,0.01));
}
.why-card.feat h4 { font-size: 44px; }
.why-card .glyph {
  position: absolute;
  bottom: -30px; left: -30px;
  font-family: var(--display);
  font-size: 180px;
  color: rgba(244,247,255,0.04);
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

/* ============================================
   CLIENTS MARQUEE
   ============================================ */
.clients-strip {
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee {
  display: flex;
  gap: 64px;
  white-space: nowrap;
  width: max-content;
}
.marquee.r1 { animation: scroll-l 50s linear infinite; }
.marquee.r2 { animation: scroll-r 60s linear infinite; }
@keyframes scroll-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes scroll-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.client-card {
  flex-shrink: 0;
  width: 240px; height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: rgba(244,247,255,0.02);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--latin);
  font-size: 22px;
  color: var(--soft-gray);
  letter-spacing: 0.08em;
  transition: all .4s;
  position: relative;
  overflow: hidden;
}
.client-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 100%, rgba(47,107,219,0.30), transparent 60%);
  opacity: 0;
  transition: opacity .5s;
}
.client-card:hover {
  color: var(--liquid-white);
  border-color: rgba(244,247,255,0.25);
  transform: translateY(-4px);
}
.client-card:hover::before { opacity: 1; }
.client-card span { position: relative; z-index: 1; }

/* ============================================
   FINAL CTA
   ============================================ */
.cta-section {
  position: relative;
  padding: 120px 56px 100px;
  text-align: center;
  overflow: hidden;
  margin-top: 40px;
}
.cta-section::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(47,107,219,0.5), transparent);
}
#cta-ocean { position: absolute; inset: 0; z-index: -1; opacity: 0.7; }
.cta-section::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 1000px 700px at 50% 50%, transparent, rgba(6,10,26,0.7) 80%),
    linear-gradient(180deg, rgba(6,10,26,0.5), transparent 30%, transparent 70%, var(--midnight));
  z-index: -1;
  pointer-events: none;
}

.cta-section h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(56px, 9vw, 144px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.cta-section h2 .wave {
  background: linear-gradient(180deg, #8F9BD6 0%, var(--jacksons) 60%, var(--lucky-point) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
  display: inline-block;
  animation: stretchword 6s ease-in-out infinite;
}
.cta-section p {
  margin-top: 32px;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.75;
  color: var(--soft-gray);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.cta-section .lg-btn {
  margin-top: 56px;
  padding: 22px 44px;
  font-size: 18px;
}

.contact-grid {
  margin-top: 100px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: right;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.contact-card {
  position: relative;
  isolation: isolate;
  padding: 28px;
  border: none;
  border-radius: 22px;
  background: transparent;
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
  text-decoration: none;
  display: block;
}
.contact-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background: rgba(244, 247, 255, 0.04);
  backdrop-filter: blur(14px) url(#liquid-glass) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, white 10%, transparent),
    inset  2px  3px 0 -2px color-mix(in srgb, white 80%, transparent),
    inset -2px -2px 0 -2px color-mix(in srgb, white 60%, transparent),
    inset -3px -8px 1px -6px color-mix(in srgb, white 45%, transparent),
    inset 0 3px 4px -2px color-mix(in srgb, black 18%, transparent),
    inset 2px -6px 1px -4px color-mix(in srgb, black 10%, transparent),
    0 2px 10px rgba(0,0,0,0.18),
    0 14px 36px rgba(0,0,0,0.16);
  transition: background-color .4s, box-shadow .4s;
}
.contact-card:hover { transform: translateY(-4px) scale(1.01); }
.contact-card:hover::before { background: rgba(47, 107, 219, 0.18); }
.contact-card .label {
  font-family: var(--latin);
  font-size: 11px;
  letter-spacing: 0.25em;
  color: var(--ocean-blue);
  text-transform: uppercase;
}
.contact-card .value {
  font-family: var(--display);
  font-size: 18px;
  color: var(--liquid-white);
  margin-top: 12px;
  direction: ltr;
  text-align: right;
}

/* ============================================
   FLOATING UI
   ============================================ */
.float-controls {
  position: fixed;
  bottom: 32px;
  right: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 90;
}
.float-btn {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--liquid-white);
  cursor: none;
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
  position: relative;
  isolation: isolate;
}
/* Same glass lens treatment as .lg-btn, mapped to a circle */
.float-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background: var(--glass-bg);
  backdrop-filter: blur(12px) url(#liquid-glass) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, white 12%, transparent),
    inset  2px  3px  0 -2px color-mix(in srgb, white 90%, transparent),
    inset -2px -2px  0 -2px color-mix(in srgb, white 80%, transparent),
    inset -3px -8px  1px -6px color-mix(in srgb, white 55%, transparent),
    inset  0    3px  4px -2px color-mix(in srgb, black 22%, transparent),
    inset  2px -6px  1px -4px color-mix(in srgb, black 12%, transparent),
    0 2px 8px rgba(0,0,0,0.25),
    0 10px 30px rgba(0,0,0,0.18);
  transition: background-color .4s cubic-bezier(1,0,.4,1), box-shadow .4s;
}
.float-btn:hover { transform: scale(1.08); }
.float-btn:active { transform: scale(.94); }
.float-btn.whatsapp:hover::before {
  background: rgba(37, 211, 102, 0.55);
}
.float-btn svg { width: 24px; height: 24px; }
.float-btn .tip {
  position: absolute;
  right: calc(100% + 12px);
  left: auto;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--latin);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--liquid-white);
  background: rgba(6,10,26,0.85);
  border: 1px solid var(--glass-border);
  padding: 8px 12px;
  border-radius: 8px;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.float-btn:hover .tip { opacity: 1; }

.sound-bars {
  display: flex;
  gap: 3px;
  align-items: center;
  height: 18px;
}
.sound-bars span {
  display: block;
  width: 2px;
  background: currentColor;
  border-radius: 2px;
  height: 4px;
  transition: height .3s;
}
.sound-on .sound-bars span:nth-child(1) { animation: bars 1.2s ease-in-out infinite; }
.sound-on .sound-bars span:nth-child(2) { animation: bars 1.2s ease-in-out .15s infinite; }
.sound-on .sound-bars span:nth-child(3) { animation: bars 1.2s ease-in-out .3s infinite; }
.sound-on .sound-bars span:nth-child(4) { animation: bars 1.2s ease-in-out .45s infinite; }
@keyframes bars {
  0%,100% { height: 4px; }
  50% { height: 16px; }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
  .nav { padding: 20px 24px; }
  .nav.scrolled { padding: 14px 24px; }
  .nav-links { display: none; }
  section { padding: 76px 24px; }
  .hero { padding: 100px 24px 60px; }
  .philosophy { grid-template-columns: 1fr; gap: 48px; }
  .vm-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .why-card.span-7, .why-card.span-5, .why-card.span-4 { grid-column: span 1; min-height: auto; }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .services-head { grid-template-columns: 1fr; gap: 28px; }
  .service-row { grid-template-columns: 50px 1fr auto; gap: 20px; padding: 24px 4px; }
  .service-row:hover { padding: 24px 12px; }
  .service-arrow { width: 40px; height: 40px; }
  .float-controls { bottom: 20px; right: 20px; }
  .float-btn { width: 48px; height: 48px; }
  .hero-scroll { display: none; }
  .orbital-stage { aspect-ratio: 1; max-width: 100%; }
  .orbital-core { width: 90px; height: 90px; }
  .orbital-node .card { width: 240px; padding: 16px; }
}

/* ============================================
   CINEMATIC FOOTER — مَدّ
   "Curtain reveal" — a fixed footer underneath the page that
   gets uncovered as the user scrolls into the wrapper. Includes:
   - aurora ambient glow + grid background
   - giant MADD wordmark fading in via scroll
   - diagonal marquee strip
   - magnetic pill buttons (JS adds tilt + parallax on hover)
   - "Made with love" badge + back-to-top
   ============================================ */
.cf-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  /* Clip so the fixed footer below is only visible within this box. */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.cf-footer {
  position: fixed;
  inset: auto 0 0 0;
  height: 100vh;
  width: 100%;
  background: var(--midnight);
  color: var(--liquid-white);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  font-family: var(--body);
  isolation: isolate;
}

/* Aurora — soft brand-blue ambient glow that breathes */
.cf-aurora {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80vw;
  height: 60vh;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 50% 50%,
    rgba(47,107,219,0.22) 0%,
    rgba(24,57,86,0.22) 40%,
    transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  animation: cf-breathe 8s ease-in-out infinite alternate;
}
@keyframes cf-breathe {
  0%   { transform: translate(-50%, -50%) scale(1);    opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
}

/* Grid — subtle diagram-paper background that masks vertically */
.cf-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: 60px 60px;
  background-image:
    linear-gradient(to right,  rgba(244,247,255,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244,247,255,0.045) 1px, transparent 1px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
          mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
}

/* Giant background wordmark — sits behind everything, parallaxes
   via JS as the footer reveals. */
.cf-giant {
  position: absolute;
  left: 50%;
  bottom: -5vh;
  transform: translateX(-50%);
  font-family: var(--display);
  font-size: 26vw;
  line-height: 0.75;
  font-weight: 900;
  letter-spacing: -0.05em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244,247,255,0.06);
  background: linear-gradient(180deg,
    rgba(244,247,255,0.12) 0%,
    transparent 60%);
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  opacity: 0;
  /* will be animated via CSS scroll-driven animation if supported,
     fallback handled in JS */
  transition: opacity .8s ease, transform .8s ease;
}
.cf-giant.is-visible {
  opacity: 1;
}

/* Diagonal marquee strip */
.cf-marquee {
  position: absolute;
  top: 8%;
  left: -10%;
  right: -10%;
  width: 120%;
  z-index: 2;
  overflow: hidden;
  border-top: 1px solid rgba(244,247,255,0.10);
  border-bottom: 1px solid rgba(244,247,255,0.10);
  background: rgba(6,10,26,0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 14px 0;
  transform: rotate(-2deg) scale(1.06);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
.cf-marquee-track {
  display: flex;
  width: max-content;
  animation: cf-marquee 40s linear infinite;
}
.cf-marquee-item {
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 0 18px;
  font-family: var(--display);
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(244,247,255,0.55);
  white-space: nowrap;
}
.cf-marquee-item .dot {
  color: rgba(120,170,255,0.55);
  font-size: 14px;
}
@keyframes cf-marquee {
  from { transform: translateX(0); }
  /* rtl: marquee scrolls right-to-left visually means moving +50% in RTL,
     -50% in LTR. Use logical translateX with the RTL flow. */
  to   { transform: translateX(50%); }
}

/* Centre block */
.cf-center {
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
  max-width: 1100px;
  margin: 0 auto;
  margin-top: 14vh;
}
.cf-heading {
  font-family: var(--display);
  font-size: clamp(40px, 7vw, 96px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  /* Extra vertical room so descenders ( ج, ـ ) don't get clipped
     by background-clip:text's tight glyph box. */
  padding: 0.15em 0.05em 0.25em;
  margin-bottom: 48px;
  background: linear-gradient(180deg,
    var(--liquid-white) 0%,
    rgba(244,247,255,0.55) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 28px rgba(180,215,255,0.18));
  /* belt-and-braces: stop any ancestor from clipping the descenders */
  overflow: visible;
}
.cf-ministry {
  width: min(360px, 86vw);
  min-height: 74px;
  margin: 0 auto 28px;
  padding: 14px 24px;
  border-radius: 18px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 18px 54px rgba(0,0,0,0.24), 0 0 40px rgba(0,128,128,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cf-ministry img {
  width: 100%;
  max-height: 58px;
  object-fit: contain;
}
.cf-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}
.cf-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.cf-pills-sm {
  gap: 10px;
  margin-top: 4px;
}

/* The footer pills use the same liquid-glass language as .lg-btn — a
   clear lens (backdrop-filter + SVG refraction) topped with the layered
   meniscus highlights from the site-wide glass system. */
.cf-pill {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 32px;
  border-radius: 100px;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 500;
  font-size: 15px;
  color: var(--liquid-white);
  background: transparent;
  border: none;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0,0,0,0.30);
  transition: color .25s;
  will-change: transform;
}
/* Glass lens layer — identical recipe to .lg-btn::before */
.cf-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background: var(--glass-bg);
  backdrop-filter: blur(10px) url(#liquid-glass) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, white 10%, transparent),
    inset  1.8px  3px   0px -2px color-mix(in srgb, white 90%, transparent),
    inset -2px   -2px   0px -2px color-mix(in srgb, white 80%, transparent),
    inset -3px   -8px   1px -6px color-mix(in srgb, white 55%, transparent),
    inset -0.3px -1px   4px  0px color-mix(in srgb, black 14%, transparent),
    inset -1.5px  2.5px 0px -2px color-mix(in srgb, black 22%, transparent),
    inset  0px    3px   4px -2px color-mix(in srgb, black 22%, transparent),
    inset  2px   -6.5px 1px -4px color-mix(in srgb, black 12%, transparent),
    0px 1px  5px 0px rgba(0,0,0,0.18),
    0px 8px 22px 0px rgba(0,0,0,0.16);
  transition: background-color .4s cubic-bezier(1,0,.4,1), box-shadow .4s;
}
/* Brand-blue highlight on hover */
.cf-pill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(140px 100px at 50% 50%,
    rgba(47,107,219,0.55), transparent 70%);
  opacity: 0;
  transition: opacity .4s;
}
.cf-pill:hover::after { opacity: 1; }
.cf-pill:active { transform: translate3d(var(--cf-mx, 0px), var(--cf-my, 0px), 0) scale(.96); }
.cf-pills-sm .cf-pill {
  padding: 11px 22px;
  font-size: 13px;
  color: rgba(244,247,255,0.85);
}
.cf-pill svg { width: 20px; height: 20px; }

/* Credit badge: same glass treatment, not interactive */
.cf-credit {
  position: relative;
  isolation: isolate;
  padding: 12px 22px;
  border-radius: 100px;
  background: transparent;
  font-family: var(--display);
  font-size: 12px;
  color: rgba(244,247,255,0.8);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: default;
}
.cf-credit::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background: var(--glass-bg);
  backdrop-filter: blur(10px) url(#liquid-glass) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, white 10%, transparent),
    inset 1.2px 2px 0 -1.5px color-mix(in srgb, white 80%, transparent),
    inset -1.4px -1.4px 0 -1.5px color-mix(in srgb, white 70%, transparent),
    inset 0 2px 3px -1.5px color-mix(in srgb, black 18%, transparent),
    0 2px 10px rgba(0,0,0,0.18);
}

/* Bottom bar */
.cf-bottom {
  position: relative;
  z-index: 4;
  padding: 0 56px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cf-copy {
  font-family: var(--latin);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(244,247,255,0.5);
  text-transform: uppercase;
}
.cf-credit {
  padding: 10px 20px;
  font-family: var(--display);
  font-size: 12px;
  color: rgba(244,247,255,0.7);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.cf-heart {
  color: #ff5577;
  animation: cf-heart 2s cubic-bezier(0.25,1,0.5,1) infinite;
  filter: drop-shadow(0 0 6px rgba(255,85,119,0.55));
}
@keyframes cf-heart {
  0%, 100% { transform: scale(1); }
  15%, 45% { transform: scale(1.25); filter: drop-shadow(0 0 12px rgba(255,85,119,0.85)); }
  30%      { transform: scale(1); }
}
.cf-back {
  position: relative;
  isolation: isolate;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: rgba(244,247,255,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color .25s;
  will-change: transform;
}
.cf-back::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background: var(--glass-bg);
  backdrop-filter: blur(12px) url(#liquid-glass) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, white 12%, transparent),
    inset  2px  3px  0 -2px color-mix(in srgb, white 90%, transparent),
    inset -2px -2px  0 -2px color-mix(in srgb, white 80%, transparent),
    inset -3px -8px  1px -6px color-mix(in srgb, white 55%, transparent),
    inset  0    3px  4px -2px color-mix(in srgb, black 22%, transparent),
    0 2px 8px rgba(0,0,0,0.25);
}
.cf-back svg { width: 20px; height: 20px; transition: transform .3s; }
.cf-back:hover { color: var(--liquid-white); }
.cf-back:hover svg { transform: translateY(-3px); }

@media (max-width: 700px) {
  .cf-bottom { padding: 0 24px 24px; }
  .cf-heading { margin-bottom: 32px; }
  .cf-pill { padding: 14px 22px; font-size: 14px; }
  .cf-marquee { top: 5%; }
}


/* ============================================
   CLIENTS LOGO CLOUD
   Immediately under the hero. Infinite-slider rail of client logos
   on a soft glass plate, with progressive-blur edges that dissolve
   the rail into the page background.
   ============================================ */
.lc-section {
  position: relative;
  padding: 28px 0 0;
  max-width: 100%;
  margin: 0;
  z-index: 5;
}
.lc-head {
  text-align: center;
  margin-bottom: 28px;
  padding: 0 24px;
}
.lc-eyebrow {
  display: inline-block;
  font-family: var(--body);
  font-size: 12px;
  letter-spacing: 0;
  color: rgba(244,247,255,0.60);
  text-transform: none;
  margin-bottom: 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 100px;
  padding: 6px 18px;
  white-space: nowrap;
}
.lc-title {
  font-family: var(--display);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--liquid-white);
  line-height: 1.3;
}

/* The cloud container — full bleed (max-w'd internally), with
   horizontal scan lines top/bottom that span the whole viewport */
.lc-cloud {
  position: relative;
  margin: 0 auto;
  max-width: min(1280px, 100vw);
  padding: 20px 0;
  background: transparent;
}
.lc-line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(244,247,255,0.12) 20%,
    rgba(244,247,255,0.12) 80%,
    transparent 100%);
}
.lc-line-top { top: 0; }
.lc-line-bot { bottom: 0; }

/* Rail viewport — only this region shows logos; the marquee track
   scrolls inside it (see the marquee block lower in this file). */
.lc-rail {
  position: relative;
  overflow: hidden;
  padding: 14px 0;
}
/* Base marquee track — a single nowrap flex row sized to its content
   so it can be translated as one continuous strip. */
.lc-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  margin: 0;
}

/* Each logo cell — fixed height, auto width keeps the aspect ratio
   of each brand mark. Light desaturated/dimmed by default so the rail
   reads as a single rhythmic strip; hover restores full colour. */
.lc-logo {
  flex: 0 0 auto;
  width: auto;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  background: none;
  border: none;
  box-shadow: none;
  opacity: 0.85;
  transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .3s;
}
.lc-logo:hover {
  opacity: 1;
  transform: scale(1.08);
}
.lc-logo img {
  width: auto;
  height: auto;
  max-width: 160px;
  max-height: 60px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.lc-logo img[src*="sobol"],
.lc-logo img[src*="almaha"],
.lc-logo img[src*="masarat"] {
  transform: scale(1.5);
}
.lc-logo img[src*="ritch"] {
  transform: scale(2.0);
}
.lc-logo img[src*="ahwal"] {
  transform: scale(1.3);
}

/* Progressive blur edges — 6 stacked div layers, each with a tighter
   directional mask gradient and a stronger backdrop blur. The cumulative
   effect smears the rail into the page background. */
.lc-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 150px;
  pointer-events: none;
  z-index: 3;
  display: none;
}
.lc-fade > div {
  position: absolute;
  inset: 0;
}
.lc-fade-l { left: 0; }
.lc-fade-r { right: 0; }

/* LEFT edge: mask reveals rightward; mask alpha is 1 at left, 0 at right. */
.lc-fade-l > div:nth-child(1) {
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,1) 0%,    rgba(0,0,0,0) 16%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,1) 0%,    rgba(0,0,0,0) 16%);
  backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px);
}
.lc-fade-l > div:nth-child(2) {
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,1) 0%,    rgba(0,0,0,0) 32%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,1) 0%,    rgba(0,0,0,0) 32%);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.lc-fade-l > div:nth-child(3) {
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,1) 0%,    rgba(0,0,0,0) 48%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,1) 0%,    rgba(0,0,0,0) 48%);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.lc-fade-l > div:nth-child(4) {
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,1) 0%,    rgba(0,0,0,0) 64%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,1) 0%,    rgba(0,0,0,0) 64%);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.lc-fade-l > div:nth-child(5) {
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,1) 0%,    rgba(0,0,0,0) 80%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,1) 0%,    rgba(0,0,0,0) 80%);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.lc-fade-l > div:nth-child(6) {
  -webkit-mask-image: linear-gradient(90deg, rgba(6,23,46,1) 0%, rgba(6,23,46,0) 65%);
          mask-image: linear-gradient(90deg, rgba(6,23,46,1) 0%, rgba(6,23,46,0) 65%);
  background: linear-gradient(90deg, var(--midnight) 0%, transparent 60%);
}

/* RIGHT edge: mirror of the left */
.lc-fade-r > div:nth-child(1) {
  -webkit-mask-image: linear-gradient(270deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 16%);
          mask-image: linear-gradient(270deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 16%);
  backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px);
}
.lc-fade-r > div:nth-child(2) {
  -webkit-mask-image: linear-gradient(270deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 32%);
          mask-image: linear-gradient(270deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 32%);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.lc-fade-r > div:nth-child(3) {
  -webkit-mask-image: linear-gradient(270deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 48%);
          mask-image: linear-gradient(270deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 48%);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.lc-fade-r > div:nth-child(4) {
  -webkit-mask-image: linear-gradient(270deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 64%);
          mask-image: linear-gradient(270deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 64%);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.lc-fade-r > div:nth-child(5) {
  -webkit-mask-image: linear-gradient(270deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 80%);
          mask-image: linear-gradient(270deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 80%);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.lc-fade-r > div:nth-child(6) {
  -webkit-mask-image: linear-gradient(270deg, rgba(6,23,46,1) 0%, rgba(6,23,46,0) 65%);
          mask-image: linear-gradient(270deg, rgba(6,23,46,1) 0%, rgba(6,23,46,0) 65%);
  background: linear-gradient(270deg, var(--midnight) 0%, transparent 60%);
}

@media (max-width: 700px) {
  .hero {
    min-height: auto;
    justify-content: flex-start;
    padding: 96px 16px 44px;
  }
  .hero-logo {
    margin-bottom: 26px;
  }
  .hero-scroll {
    display: none;
  }
  .lc-head {
    margin-bottom: 16px;
  }
  .lc-cloud {
    padding: 10px 0;
  }
  .lc-section { padding: 20px 0 0; }
  /* Marquee track stays content-width on every breakpoint — never
     constrained to the viewport, or the loop has nothing to scroll. */
  .lc-track { width: max-content; }
  .lc-fade { width: 52px; }
}

/* ============================================
   TECH LOGOS — static integrations after client logos
   ============================================ */
/* ============================================
   TECH LOGOS — infinite marquee integrations
   ============================================ */
.tech-logos-section {
  position: relative;
  max-width: min(1280px, 100% - 48px);
  margin: 0 auto;
  padding: 38px 0 64px;
  z-index: 5;
}
.tech-logos-section::before {
  content: "";
  position: absolute;
  inset: 0 -6vw auto;
  height: 220px;
  pointer-events: none;
  background: radial-gradient(ellipse 700px 180px at 50% 0%, rgba(47,107,219,0.12), transparent 72%);
}
.tech-logos-head {
  position: relative;
  text-align: center;
  margin-bottom: 32px;
}
.tech-logos-head p {
  margin: 0;
  margin-top: 12px;
  color: rgba(244,247,255,0.68);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.8;
}

.tech-logos-rail {
  direction: ltr !important;
  position: relative;
  overflow: hidden !important;
  padding: 14px 0;
  /* Soft progressive blur edges on both sides so it dissolves into page background */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 11%, #000 89%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 11%, #000 89%, transparent 100%);
}
.tech-logos-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  max-width: none !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
  direction: ltr !important;
  animation: tech-scroll 45s linear infinite !important;
}
.tech-logos-rail:hover .tech-logos-track {
  animation-play-state: paused !important;
}

@keyframes tech-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-33.3333%, 0, 0); }
}

.tech-logo {
  flex: 0 0 auto !important;
  width: 190px !important;
  height: 94px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 clamp(24px, 4vw, 48px) 0 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: transform .25s cubic-bezier(.22,1,.36,1) !important;
  flex-shrink: 0 !important;
}
.tech-logo:hover {
  transform: translateY(-4px) scale(1.05) !important;
}
.tech-logo img {
  max-width: 158px !important;
  max-height: 74px !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
  transition: transform .35s cubic-bezier(.22,1,.36,1) !important;
}
.tech-logo--icon img {
  max-width: 44px !important;
  max-height: 44px !important;
}
.tech-logo img[src*="mahally"] { transform: scale(1.6) !important; }
.tech-logo img[src*="zid"] { transform: scale(1.4) !important; }
.tech-logo img[src*="salla"] { transform: scale(1.2) !important; }
.tech-logo img[src*="meta"] { transform: scale(1.1) !important; }
.tech-logo img[src*="google"] { transform: scale(1.1) !important; }

@media (max-width: 700px) {
  .tech-logos-section {
    max-width: 100% !important;
    padding: 18px 0 34px !important;
  }
  .tech-logos-head { margin-bottom: 20px !important; }
  .tech-logo {
    width: 124px !important;
    height: 64px !important;
    margin: 0 24px 0 0 !important;
  }
  .tech-logo img {
    max-width: 104px !important;
    max-height: 48px !important;
  }
}


/* ============================================
   LC HEAD — enlarged title (was small subtitle)
   ============================================ */
.lc-head .lc-eyebrow {
  font-size: 12px;
  letter-spacing: 0;
  color: rgba(244,247,255,0.65);
  margin-bottom: 14px;
  position: relative;
  padding-bottom: 0;
}
.lc-head .lc-eyebrow::after { display: none; }
.lc-head .lc-title {
  font-family: var(--display);
  font-size: clamp(36px, 5.2vw, 72px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--liquid-white);
  max-width: 900px;
  margin: 0 auto;
}
.lc-head .lc-lead {
  margin-top: 22px;
  font-family: var(--body);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.75;
  color: var(--soft-gray);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   WHY MADD — cycling card with oversized index
   Inspired by an asymmetric editorial testimonial:
   - giant translucent index numeral bleeds off the right edge
   - vertical meta column with "WHY MADD" rotated + progress bar
   - center column: tag chip → title → body → footer with nav buttons
   - bottom ticker repeats keywords
   ============================================ */
.wm-section {
  position: relative;
}
.wm-stage {
  position: relative;
  margin-top: 100px;
  padding: 80px 0;
  min-height: 540px;
  overflow: visible;
  isolation: isolate;
}
.wm-bignum {
  position: absolute;
  top: 50%;
  right: -3vw;
  transform: translateY(-50%);
  font-family: var(--display);
  font-size: clamp(180px, 32vw, 480px);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244,247,255,0.045);
  background: linear-gradient(180deg, rgba(244,247,255,0.04) 0%, transparent 65%);
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  transition: opacity .5s cubic-bezier(.22,1,.36,1), transform .5s;
}
.wm-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 60px;
  align-items: stretch;
  padding: 0 40px 0 0;
}
.wm-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-left: 28px;
  border-left: 1px solid rgba(244,247,255,0.10);
}
.wm-vlabel {
  font-family: var(--latin);
  font-size: 11px;
  letter-spacing: 0.32em;
  color: rgba(244,247,255,0.55);
  text-transform: uppercase;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}
.wm-progress {
  position: relative;
  width: 1px;
  height: 140px;
  background: rgba(244,247,255,0.10);
  margin-top: 32px;
}
.wm-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--liquid-white);
  height: 0%;
  transition: height .55s cubic-bezier(.22,1,.36,1);
}
.wm-content {
  padding: 24px 0 24px 0;
}
.wm-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border: 1px solid rgba(244,247,255,0.18);
  border-radius: 100px;
  font-family: var(--latin);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(244,247,255,0.85);
  background: rgba(244,247,255,0.03);
  text-transform: uppercase;
  margin-bottom: 28px;
}
.wm-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ocean-blue);
  box-shadow: 0 0 10px rgba(47,107,219,0.7);
}
.wm-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
  min-height: 1.12em;
}
.wm-body {
  font-family: var(--body);
  font-size: clamp(16px, 1.25vw, 20px);
  line-height: 1.85;
  color: var(--soft-gray);
  max-width: 640px;
  margin-bottom: 48px;
  min-height: 5em;
}
.wm-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.wm-foot-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.wm-dash {
  display: block;
  width: 36px;
  height: 1px;
  background: var(--liquid-white);
}
.wm-foot-label {
  font-family: var(--display);
  font-size: 15px;
  color: var(--liquid-white);
  font-weight: 500;
}
.wm-foot-sub {
  font-family: var(--latin);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(244,247,255,0.5);
  text-transform: uppercase;
  margin-top: 4px;
}
.wm-nav {
  display: flex;
  gap: 12px;
}
.wm-nav-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(244,247,255,0.18);
  background: transparent;
  color: var(--liquid-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .25s, border-color .25s, transform .25s;
}
.wm-nav-btn:hover {
  background: rgba(244,247,255,0.08);
  border-color: rgba(244,247,255,0.45);
  transform: scale(1.04);
}
.wm-nav-btn:active { transform: scale(0.94); }

/* Bottom ticker — keywords repeating */
.wm-ticker {
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  overflow: hidden;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}
.wm-ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  white-space: nowrap;
  font-family: var(--display);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--liquid-white);
  animation: wm-ticker 28s linear infinite;
}
.wm-ticker-track .sep { color: rgba(120,170,255,0.7); font-size: 0.5em; }
@keyframes wm-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}

/* enter/exit animation for cycling text */
.wm-title.is-out,
.wm-body.is-out,
.wm-pill.is-out,
.wm-foot-label.is-out,
.wm-foot-sub.is-out { opacity: 0; transform: translateX(12px); }
.wm-title,
.wm-body,
.wm-pill,
.wm-foot-label,
.wm-foot-sub {
  transition: opacity .35s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1);
}
.wm-bignum.is-out { opacity: 0; transform: translateY(-50%) scale(1.08); }


/* ============================================
   TESTIMONIALS — vertical scrolling columns
   ============================================ */
.tm-section {
  position: relative;
  text-align: center;
  padding-bottom: 120px;
}
.tm-head {
  max-width: 720px;
  margin: 0 auto 64px;
}
.tm-head .eyebrow,
.tm-head .section-title,
.tm-head .section-lead {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.tm-head .eyebrow {
  display: inline-flex;
}

.tm-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px;
  max-height: 680px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
}
.tm-col-2 { display: block; }
.tm-col-3 { display: block; }
@media (max-width: 1024px) { .tm-col-3 { display: none; } .tm-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .tm-col-2 { display: none; } .tm-cols { grid-template-columns: 1fr; max-height: 600px; } }

.tm-track {
  display: flex;
  flex-direction: column;
  gap: 22px;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: layout paint;
  /* JS-driven rAF for ultra-smooth scroll — no CSS animation */
}
.tm-cols:hover .tm-track { /* pause handled in JS */ }

.tm-card {
  flex: 0 0 auto;
  position: relative;
  padding: 28px 26px;
  border-radius: 22px;
  border: 1px solid rgba(244,247,255,0.10);
  background: linear-gradient(180deg, rgba(244,247,255,0.05), rgba(244,247,255,0.015));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: right;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  transition: transform .4s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .3s;
}
.tm-card:hover {
  transform: translateY(-4px);
  border-color: rgba(244,247,255,0.22);
  box-shadow: 0 24px 48px rgba(0,0,0,0.28), 0 0 0 1px rgba(120,170,255,0.18);
}
.tm-card p {
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.85;
  color: rgba(244,247,255,0.82);
  margin: 0 0 22px;
}
.tm-by {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tm-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  color: var(--liquid-white);
  background: linear-gradient(140deg, #3A48A8, var(--lucky-point));
  border: 1px solid rgba(244,247,255,0.18);
  flex-shrink: 0;
}
/* صور المستخدمين موحّدة على الهوية — تدرّجان فقط من الأزرق الأساسي */
.tm-av[data-i="2"] { background: linear-gradient(140deg, #424FB8, var(--lucky-deep)); }
.tm-av[data-i="3"] { background: linear-gradient(140deg, #3A48A8, var(--lucky-point)); }
.tm-av[data-i="4"] { background: linear-gradient(140deg, #424FB8, var(--lucky-deep)); }
.tm-av[data-i="5"] { background: linear-gradient(140deg, #3A48A8, var(--lucky-point)); }
.tm-av[data-i="6"] { background: linear-gradient(140deg, #424FB8, var(--lucky-deep)); }
.tm-av[data-i="7"] { background: linear-gradient(140deg, #3A48A8, var(--lucky-point)); }
.tm-av[data-i="8"] { background: linear-gradient(140deg, #424FB8, var(--lucky-deep)); }
.tm-av[data-i="9"] { background: linear-gradient(140deg, #3A48A8, var(--lucky-point)); }
.tm-name {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  color: var(--liquid-white);
  letter-spacing: -0.005em;
}
.tm-role {
  font-family: var(--body);
  font-size: 12px;
  color: rgba(244,247,255,0.55);
  margin-top: 2px;
}

/* ============================================
   FOOTER — contact grid
   ============================================ */
.cf-contacts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 auto 36px;
  max-width: 920px;
  width: 100%;
}
.cf-contact {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 16px;
  text-decoration: none;
  text-align: right;
  background: transparent;
  color: var(--liquid-white);
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.cf-contact::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background: rgba(244, 247, 255, 0.04);
  backdrop-filter: blur(14px) url(#liquid-glass) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, white 10%, transparent),
    inset 1.5px 2px 0 -1.5px color-mix(in srgb, white 80%, transparent),
    inset -1.4px -1.4px 0 -1.5px color-mix(in srgb, white 60%, transparent),
    inset 0 2px 3px -1.5px color-mix(in srgb, black 18%, transparent),
    0 2px 10px rgba(0,0,0,0.20);
  transition: background-color .4s, box-shadow .4s;
}
.cf-contact:hover { transform: translateY(-3px); }
.cf-contact:hover::before { background: rgba(47, 107, 219, 0.18); }
.cf-contact-label {
  font-family: var(--latin);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--ocean-blue);
  text-transform: uppercase;
}
.cf-contact-value {
  font-family: var(--display);
  font-size: 15px;
  color: var(--liquid-white);
  direction: ltr;
  text-align: right;
}
.cf-contact-email { font-size: 12px; }

/* ============================================
   Spacing improvements + mobile responsiveness
   ============================================ */
@media (max-width: 1024px) {
  .wm-grid { grid-template-columns: 90px 1fr; gap: 32px; padding: 0; }
  .wm-bignum { font-size: clamp(160px, 28vw, 320px); right: -2vw; }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .cf-contacts { grid-template-columns: 1fr 1fr; max-width: 520px; }
}
@media (max-width: 700px) {
  section { padding: 52px 16px; }
  .hero { padding: 80px 16px 50px; }
  .hero-headline { font-size: clamp(22px, 7vw, 36px); }
  .hero-sub { font-size: 13px; margin-top: 20px; line-height: 1.75; }
  .hero-cta { margin-top: 28px; gap: 10px; }
  .hero-cta .lg-btn { padding: 11px 18px; font-size: 12px; }

  .nav { padding: 12px 14px; }
  .nav.scrolled { padding: 8px 14px; }
  .nav-logo { width: 78px; height: 46px; }
  .nav-right .lg-btn { padding: 8px 14px !important; font-size: 11px !important; }

  h2.section-title { font-size: clamp(24px, 7vw, 36px); }
  p.section-lead { font-size: 13px; line-height: 1.7; }
  .eyebrow { font-size: 10px; letter-spacing: normal; margin-bottom: 18px; }

  .lc-head .lc-title { font-size: clamp(22px, 6.5vw, 32px); }
  .lc-head .lc-lead { font-size: 12px; }

  /* Logo cloud: keep the scrolling marquee on mobile */
  .lc-rail { overflow: hidden; }
  .lc-track {
    flex-wrap: nowrap;
    width: max-content;
    will-change: transform;
    gap: 8px;
  }
  .lc-logo { width: 116px; height: 48px; }
  .lc-fade { display: block; }

  .philosophy { gap: 22px; }
  .philosophy-body p { font-size: 14px; line-height: 1.75; }
  .philosophy-visual { max-height: none; border-radius: 0; }
  .vm-grid { gap: 16px; }
  .vm-card { padding: 28px 20px 32px; }
  .vm-card h3 { font-size: 24px; }
  .vm-card p { font-size: 13px; line-height: 1.75; }
  .vm-num { font-size: 11px; }

  .values-section { text-align: center; padding-bottom: 150px; }
  .orbital-stage { max-width: 320px; overflow: visible; }
  .values-static-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 22px;
  }
  .value-static-card {
    padding: 18px;
  }
  .orbital-core { width: 64px; height: 64px; }
  .orbital-node .dot { width: 30px; height: 30px; }
  .orbital-node .dot svg { width: 13px; height: 13px; }
  .orbital-node .node-label { font-size: 10px; top: 26px; }
  .orbital-node .card { width: min(220px, 78vw); padding: 12px; top: 46px; }
  .orbital-node .card-title { font-size: 15px; }
  .orbital-node .card-body { font-size: 11px; }

  .services-list { border-top-width: 1px; }
  .service-row { padding: 18px 4px; }
  .service-row:hover { padding: 18px 8px; }
  .service-title { font-size: 18px; }
  .service-num { font-size: 12px; }
  .service-arrow { width: 36px; height: 36px; }

  .wm-stage { margin-top: 36px; padding: 32px 0; min-height: 0; }
  .wm-grid { grid-template-columns: 1fr; gap: 14px; }
  .wm-meta { flex-direction: row; align-items: center; gap: 14px; padding-left: 0; border-left: none; padding-bottom: 12px; border-bottom: 1px solid rgba(244,247,255,0.10); }
  .wm-vlabel { writing-mode: horizontal-tb; transform: none; font-size: 9px; }
  .wm-progress { width: 100%; height: 1px; margin-top: 0; flex: 1; }
  .wm-progress-fill { width: 0%; height: 100%; transition: width .55s cubic-bezier(.22,1,.36,1); }
  .wm-bignum { font-size: 160px; top: auto; bottom: 0; right: -10px; transform: none; opacity: 0.6; }
  .wm-title { font-size: clamp(22px, 6.5vw, 32px); }
  .wm-body { font-size: 13px; margin-bottom: 24px; min-height: 0; line-height: 1.75; }
  .wm-content { padding: 0; }
  .wm-nav-btn { width: 36px; height: 36px; }
  .wm-ticker-track { font-size: 28px; }
  .wm-pill { font-size: 9px; padding: 5px 10px; margin-bottom: 18px; }
  .wm-foot-label { font-size: 13px; }
  .wm-foot-sub { font-size: 9px; }

  .tm-section { padding-bottom: 48px; }
  .tm-head { margin-bottom: 32px; }
  .tm-card { padding: 18px 16px; border-radius: 16px; }
  .tm-card p { font-size: 13px; line-height: 1.75; }
  .tm-name { font-size: 13px; }
  .tm-role { font-size: 11px; }
  .tm-av { width: 34px; height: 34px; font-size: 14px; }

  .cta-section { padding: 64px 16px 52px; }
  .cta-section h2 { font-size: clamp(32px, 10vw, 52px); }
  .cta-section p { font-size: 13px; margin-top: 18px; }
  .cta-section .lg-btn { margin-top: 28px; padding: 14px 24px; font-size: 13px; }

  .cf-wrapper { height: 110vh; }
  .cf-center { margin-top: 4vh; padding: 0 16px; }
  .cf-heading { font-size: clamp(26px, 8vw, 38px); margin-bottom: 18px; }
  .cf-contacts { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
  .cf-contact { padding: 10px 12px; }
  .cf-contact-value { font-size: 12px; }
  .cf-contact-email { font-size: 10px; }
  .cf-pills { gap: 8px; }
  .cf-pill { padding: 10px 16px; font-size: 12px; }
  .cf-pills-sm .cf-pill { padding: 8px 12px; font-size: 10px; }
  .cf-bottom { gap: 12px; padding: 0 16px 16px; }
  .cf-copy { font-size: 9px; }
  .cf-actions { gap: 14px; }
  .cf-marquee { display: none; }

  .ps-row { padding: 16px 4px; }
  .ps-row:hover { padding: 16px 8px; }
  .ps-name-text { font-size: 15px; }
  .ps-desc { font-size: 12px; line-height: 1.65; }
  .ps-arrow { width: 12px; height: 12px; }
  .ps-year { font-size: 10px; }
}

/* Phones — very small */
@media (max-width: 380px) {
  .cf-contacts { grid-template-columns: 1fr; }
  .hero-cta { flex-direction: column; width: 100%; }
  .hero-cta .lg-btn { width: 100%; justify-content: center; }
}

/* ============================================
   CONTACT POPUP — triggered from floating btn
   ============================================ */
.contact-popup {
  position: fixed;
  bottom: 100px;
  right: 32px;
  z-index: 91;
  width: 300px;
  border-radius: 22px;
  padding: 0;
  overflow: hidden;
  background: rgba(8, 14, 34, 0.88);
  backdrop-filter: blur(32px) saturate(160%);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  border: 1px solid rgba(244,247,255,0.12);
  box-shadow:
    0 24px 80px rgba(0,0,0,0.5),
    0 0 40px rgba(47,107,219,0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.96);
  transform-origin: bottom right;
  transition: opacity .35s cubic-bezier(.22,1,.36,1),
              visibility .35s,
              transform .4s cubic-bezier(.22,1,.36,1);
}
.contact-popup.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.contact-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(244,247,255,0.08);
}
.contact-popup-title {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  color: var(--liquid-white);
}
.contact-popup-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(244,247,255,0.12);
  background: rgba(244,247,255,0.05);
  color: var(--liquid-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .3s;
}
.contact-popup-close:hover { background: rgba(244,247,255,0.12); }
.contact-popup-close svg { width: 14px; height: 14px; }
.contact-popup-list {
  display: flex;
  flex-direction: column;
  padding: 10px;
  gap: 4px;
}
.contact-popup-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 14px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--liquid-white);
  transition: background .3s, transform .25s;
  cursor: pointer;
}
.contact-popup-item:hover {
  background: rgba(244,247,255,0.06);
  transform: translateX(-4px);
}
[dir="ltr"] .contact-popup-item:hover { transform: translateX(4px); }
.contact-popup-item svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 10px;
  padding: 5px;
}
.contact-popup-item.whatsapp-item svg {
  background: rgba(37, 211, 102, 0.18);
  color: #25D366;
}
.contact-popup-item.phone-item svg {
  background: rgba(47, 107, 219, 0.18);
  color: #7E9FDC;
}
.contact-popup-item.insta-item svg {
  background: rgba(225, 48, 108, 0.18);
  color: #E1306C;
}
.contact-popup-item.email-item svg {
  background: rgba(244, 247, 255, 0.08);
  color: var(--soft-gray);
}
.contact-popup-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.contact-popup-label {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 500;
  color: var(--liquid-white);
}
.contact-popup-val {
  font-family: var(--latin);
  font-size: 12px;
  color: rgba(244,247,255,0.5);
  letter-spacing: 0.04em;
  direction: ltr;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The trigger button green glow on hover (same as old whatsapp) */
.float-btn.contact-trigger:hover::before {
  background: rgba(37, 211, 102, 0.55);
}
/* Pulse ring when popup is open */
.float-btn.contact-trigger.is-active::before {
  background: rgba(37, 211, 102, 0.35);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, white 12%, transparent),
    0 0 0 3px rgba(37, 211, 102, 0.25),
    0 2px 8px rgba(0,0,0,0.25),
    0 10px 30px rgba(0,0,0,0.18);
}

/* ============================================
   FOOTER — dev credit logo (سليمان)
   ============================================ */
.cf-credit-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cf-dev-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  overflow: hidden;
  opacity: 0.5;
  transition: opacity .4s, transform .4s cubic-bezier(.22,1,.36,1);
  flex-shrink: 0;
}
.cf-dev-logo:hover {
  opacity: 1;
  transform: scale(1.1);
}
.cf-dev-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ============================================
   Logo rail — seamless CSS marquee (news-ticker style).
   The track holds 3 identical logo sets and scrolls left
   by exactly one set (-33.3333%), then loops with no gap
   or reset. Per-item margin (not flex gap) keeps every set
   the same width so the -33.3333% step is pixel-exact.
   ============================================ */
.lc-rail {
  direction: ltr !important;
  overflow: hidden !important;
  /* Soft edge fade — logos dissolve into the page on both sides
     for a premium ticker look (no extra DOM, GPU-friendly mask). */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 11%, #000 89%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 11%, #000 89%, transparent 100%);
}
.lc-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  max-width: none !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  /* GPU-isolated, never repaints — only the transform animates. */
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
  /* Force LTR so the marquee runs the same way in the Arabic (RTL)
     build — items lay left-to-right and scroll leftward. */
  direction: ltr !important;
  animation: lc-scroll 42s linear infinite !important;
}
.lc-rail:hover .lc-track { animation-play-state: paused; }
/* 3 identical sets → translating by exactly one set (-33.3333%)
   loops with zero jump: the frame at -33.3333% is pixel-identical
   to the frame at 0, so the restart is invisible. */
@keyframes lc-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-33.3333%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .lc-track { animation: none !important; transform: none !important; }
}
.lc-fade { display: none !important; }
.phi-video { object-fit: cover !important; }

/* Uniform cells; the trailing margin gives every set an equal
   width, which is what makes the -33.3333% loop seamless. */
.lc-logo {
  flex: 0 0 auto !important;
  width: 234px !important;
  height: 120px !important;
  padding: 0 !important;
  margin: 0 clamp(28px, 5vw, 56px) 0 0 !important;
}
.lc-logo img {
  max-width: 208px !important;
  max-height: 96px !important;
}

@media (max-width: 700px) {
  .lc-track { gap: 0 !important; }
  .lc-logo {
    width: 156px !important;
    height: 80px !important;
    margin: 0 30px 0 0 !important;
  }
  .lc-logo img {
    max-width: 138px !important;
    max-height: 64px !important;
  }
}

/* ============================================
   FOOTER BOTTOM — mobile responsiveness fix
   ============================================ */
@media (max-width: 700px) {
  .cf-bottom {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 0 20px 24px;
    text-align: center;
  }
  .cf-credit-row {
    flex-direction: column;
    gap: 8px;
  }
  .cf-dev-logo {
    width: 28px;
    height: 28px;
  }
  .cf-copy { order: 3; font-size: 10px; }
  .cf-credit-row { order: 1; }
  .cf-back { order: 2; }

  /* Contact popup mobile */
  .contact-popup {
    right: 16px;
    left: 16px;
    bottom: 90px;
    width: auto;
  }
}

/* Orbital card: prevent overflow clipping */
.orbital-node .card {
  z-index: 60;
}

/* Cursor: never on touch / small screens */
@media (pointer: coarse), (max-width: 900px) {
  * { cursor: auto !important; }
  .cursor, .cursor-ring { display: none !important; }
  .service-row, .ps-row { cursor: pointer !important; }
}

/* ============================================
   SERVICES — project-showcase style
   Clean minimal list rows with hover highlight,
   animated underline + arrow, description fade-in.
   ============================================ */
.ps-section {
  position: relative;
}
.ps-head {
  margin-bottom: 48px;
}
.ps-list {
  position: relative;
  max-width: 1100px;
}
.ps-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 16px;
  border-top: 1px solid rgba(244,247,255,0.08);
  text-decoration: none;
  color: inherit;
  cursor: none;
  transition: padding .4s cubic-bezier(.22,1,.36,1);
}
.ps-row:last-of-type { border-bottom: none; }
.ps-border-end { border-top: 1px solid rgba(244,247,255,0.08); }

/* Hover background highlight */
.ps-bg {
  position: absolute;
  inset: 0;
  margin: 0 -16px;
  padding: 0 16px;
  background: linear-gradient(90deg, transparent, rgba(47,107,219,0.08), transparent);
  border-radius: 14px;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity .4s cubic-bezier(.22,1,.36,1), transform .4s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.ps-row:hover .ps-bg { opacity: 1; transform: scale(1); }
.ps-row:hover { padding: 28px 28px; }

.ps-main { flex: 1; min-width: 0; }

.ps-name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ps-name-text {
  position: relative;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 34px);
  color: var(--liquid-white);
  line-height: 1.3;
  letter-spacing: -0.005em;
}
/* Animated underline */
.ps-name-text::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -2px;
  height: 1px;
  width: 0;
  background: var(--liquid-white);
  transition: width .4s cubic-bezier(.22,1,.36,1);
}
.ps-row:hover .ps-name-text::after { width: 100%; }

/* Arrow slides in */
.ps-arrow {
  width: 18px;
  height: 18px;
  color: rgba(244,247,255,0.5);
  opacity: 0;
  transform: translate(8px, 8px);
  transition: opacity .35s, transform .4s cubic-bezier(.22,1,.36,1), color .3s;
  flex-shrink: 0;
}
.ps-row:hover .ps-arrow { opacity: 1; transform: translate(0, 0); color: var(--liquid-white); }

/* Description */
.ps-desc {
  display: block;
  margin-top: 8px;
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.7;
  color: rgba(244,247,255,0.45);
  transition: color .35s;
  max-width: 520px;
}
.ps-row:hover .ps-desc { color: rgba(244,247,255,0.72); }

/* Year/number badge */
.ps-year {
  font-family: var(--latin);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: rgba(244,247,255,0.4);
  white-space: nowrap;
  margin-top: 6px;
  transition: color .35s;
}
.ps-row:hover .ps-year { color: rgba(244,247,255,0.65); }

@media (max-width: 700px) {
  .ps-row { padding: 20px 4px; }
  .ps-row:hover { padding: 20px 12px; }
  .ps-name-text { font-size: 17px; }
  .ps-desc { font-size: 13px; }
  .ps-arrow { width: 14px; height: 14px; }
}



/* ============================================
   LOADING SCREEN — cinematic with text-block reveal
   ============================================ */
.loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background:
    radial-gradient(ellipse 800px 600px at 50% 40%, rgba(47,107,219,0.12), transparent 65%),
    var(--midnight);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 1s cubic-bezier(.22,1,.36,1), visibility 1s;
}
.loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.loader-logo {
  width: clamp(140px, 22vw, 260px);
  height: auto;
  color: var(--liquid-white);
  fill: var(--liquid-white);
  opacity: 0;
  animation: loader-logo-in 1.2s cubic-bezier(.22,1,.36,1) 0.2s forwards;
  filter: drop-shadow(0 0 60px rgba(47,107,219,0.55));
}
@keyframes loader-logo-in {
  0%   { opacity: 0; transform: scale(0.85) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Text block reveal — inspired by GSAP text-block-animation */
.loader-reveal {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.blk-line {
  position: relative;
  overflow: hidden;
  display: block;
  font-family: var(--display);
  font-size: clamp(20px, 3.5vw, 36px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--liquid-white);
}
.blk-text {
  display: inline-block;
  opacity: 0;
  animation: blk-text-in 0.01s linear 1.2s forwards;
}
.blk-d1 .blk-text { animation-delay: 1.5s; }

/* The blue block that sweeps across to reveal text */
.blk-block {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: var(--ocean-blue);
  z-index: 2;
  transform-origin: right center;
  transform: scaleX(0);
  animation: blk-sweep-in 0.6s cubic-bezier(.77,0,.18,1) 0.8s forwards,
             blk-sweep-out 0.5s cubic-bezier(.77,0,.18,1) 1.2s forwards;
}
.blk-d1 .blk-block {
  animation: blk-sweep-in 0.6s cubic-bezier(.77,0,.18,1) 1.1s forwards,
             blk-sweep-out 0.5s cubic-bezier(.77,0,.18,1) 1.5s forwards;
}
@keyframes blk-sweep-in {
  0%   { transform: scaleX(0); transform-origin: right center; }
  100% { transform: scaleX(1); transform-origin: right center; }
}
@keyframes blk-sweep-out {
  0%   { transform: scaleX(1); transform-origin: left center; }
  100% { transform: scaleX(0); transform-origin: left center; }
}
@keyframes blk-text-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.loader-coords {
  font-family: var(--latin);
  font-size: 11px;
  letter-spacing: 0.35em;
  color: rgba(244,247,255,0.35);
  text-transform: uppercase;
  opacity: 0;
  animation: loader-coords-in 1s ease 1.8s forwards;
}
@keyframes loader-coords-in {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ============================================
   PHILOSOPHY — infinite text marquee
   ============================================ */
.phi-marquee {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  overflow: hidden;
  padding: 18px 0;
  border-top: 1px solid rgba(244,247,255,0.06);
  border-bottom: 1px solid rgba(244,247,255,0.06);
  background: rgba(47,107,219,0.04);
  margin-bottom: 60px;
}
.phi-marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 40px;
  white-space: nowrap;
  font-family: var(--display);
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: rgba(244,247,255,0.08);
  will-change: transform;
  backface-visibility: hidden;
  /* JS-driven rAF marquee */
}
.phi-dot {
  color: rgba(120,170,255,0.25);
  font-size: 0.5em;
}

/* Philosophy image (replaces canvas) */
.phi-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  filter: brightness(0.88) saturate(1.1) contrast(1.04);
  transition: transform .8s cubic-bezier(.22,1,.36,1);
}
.philosophy-visual:hover .phi-img {
  transform: scale(1.03);
}


/* ============================================
   POINTER HIGHLIGHT — CTA "موجتك" word
   A rectangle border draws itself around the word,
   then a cursor pointer icon slides to the bottom-right corner.
   ============================================ */
.ptr-hl {
  position: relative;
  display: inline-block;
}
.ptr-hl::before {
  content: "";
  position: absolute;
  inset: -6px -12px;
  border: 1.5px solid rgba(143,174,230,0.6);
  border-radius: 6px;
  /* draw animation: clip-path reveals the border */
  clip-path: inset(0 100% 0 0);
  animation: ptr-draw 1.2s cubic-bezier(.22,1,.36,1) 0.6s forwards;
}
@keyframes ptr-draw {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0% 0 0); }
}
.ptr-cursor {
  position: absolute;
  bottom: -14px;
  left: -14px;
  width: 18px;
  height: 18px;
  color: var(--ocean-blue);
  filter: drop-shadow(0 0 8px rgba(47,107,219,0.6));
  transform: rotate(-90deg);
  opacity: 0;
  animation: ptr-appear 0.8s cubic-bezier(.22,1,.36,1) 1.4s forwards;
}
@keyframes ptr-appear {
  0%   { opacity: 0; transform: rotate(-90deg) translate(-12px, 12px); }
  100% { opacity: 1; transform: rotate(-90deg) translate(0, 0); }
}
/* Subtle pulse on the rectangle after it's drawn */
.ptr-hl::after {
  content: "";
  position: absolute;
  inset: -6px -12px;
  border: 1.5px solid rgba(143,174,230,0.3);
  border-radius: 6px;
  opacity: 0;
  animation: ptr-pulse 2.5s ease-in-out 2s infinite;
}
@keyframes ptr-pulse {
  0%, 100% { opacity: 0; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.06); }
}


/* ============================================
   PHILOSOPHY — video replaces image
   ============================================ */
.phi-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: inherit;
  background: #050816;
  filter: brightness(0.9) saturate(1.08);
}

/* ============================================
   MOBILE NAV — hamburger + glass side drawer
   ============================================ */
.nav-burger {
  display: none; /* shown on mobile */
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  z-index: 102;
}
.nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--liquid-white);
  border-radius: 2px;
  transition: transform .3s, opacity .3s;
}
.nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(6,10,26,0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s, visibility .4s;
}
.drawer-overlay.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: min(320px, 85vw);
  height: 100vh;
  z-index: 200;
  background: rgba(8, 14, 34, 0.75);
  backdrop-filter: blur(32px) saturate(160%);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  border-left: 1px solid rgba(244,247,255,0.10);
  box-shadow: -20px 0 80px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  padding: 28px 28px 36px;
  transition: right .45s cubic-bezier(.22,1,.36,1);
  overflow-y: auto;
}
[dir="ltr"] .drawer {
  right: auto;
  left: -100%;
  border-left: none;
  border-right: 1px solid rgba(244,247,255,0.10);
}
.drawer.is-open { right: 0; }
[dir="ltr"] .drawer.is-open { left: 0; right: auto; }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}
.drawer-logo {
  width: 56px;
  height: auto;
  color: var(--liquid-white);
  fill: var(--liquid-white);
  filter: drop-shadow(0 4px 16px rgba(120,180,255,0.25));
}
.drawer-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(244,247,255,0.15);
  background: rgba(244,247,255,0.05);
  color: var(--liquid-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .3s;
}
.drawer-close:hover { background: rgba(244,247,255,0.12); }
.drawer-close svg { width: 18px; height: 18px; }

.drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}
.drawer-link {
  display: block;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 500;
  color: var(--liquid-white);
  text-decoration: none;
  padding: 18px 0;
  border-bottom: 1px solid rgba(244,247,255,0.06);
  transition: color .3s, padding .3s;
}
.drawer-link:hover { color: var(--ocean-blue); padding-right: 12px; }
[dir="ltr"] .drawer-link:hover { padding-right: 0; padding-left: 12px; }

.drawer-foot {
  margin-top: 24px;
}

/* ============================================
   MOBILE HERO — skyline image + layout fixes
   ============================================ */
@media (max-width: 900px) {
  .nav {
    min-height: 72px;
    padding: 12px 18px;
    background: linear-gradient(180deg, rgba(6, 23, 46, 0.82), rgba(6, 23, 46, 0.58));
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
  }
  .nav.scrolled { padding: 10px 18px; }
  .nav-right {
    position: absolute;
    left: 18px;
    right: 18px;
    direction: rtl;
    margin: 0;
    width: auto;
    justify-content: space-between;
    gap: 10px;
    pointer-events: none;
  }
  .nav-lang {
    min-width: 54px;
    height: 44px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
  }
  .nav-burger {
    display: flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(244,247,255,0.16);
    border-radius: 999px;
    background: rgba(244,247,255,0.055);
    pointer-events: auto;
  }
  .nav-cta-btn { display: none !important; }

  /* Center nav logo on mobile */
  .nav {
    justify-content: space-between;
  }
  .nav-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 92px;
    height: 54px;
    transform: translate(-50%, -50%);
  }
  .nav.scrolled .nav-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 84px;
    height: 50px;
    transform: translate(-50%, -50%);
  }

  /* Mobile skyline */
  .hero-skyline .skyline-img { display: none; }
  .hero-skyline::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('assets/jeddah-mobile.png') center bottom / cover no-repeat;
    filter: brightness(0.7) saturate(1.1);
  }
  .hero-skyline {
    height: 55%;
  }

  /* Calmer wave on mobile */
  #ocean-canvas {
    top: 42%;
    opacity: 0.6;
  }

  /* Hero text */
  .hero { padding: 80px 20px 50px; min-height: 100svh; }
  .hero-headline { font-size: clamp(26px, 8vw, 40px); }
  .hero-sub { font-size: 14px; margin-top: 20px; line-height: 1.8; }
  .hero-cta { margin-top: 28px; gap: 10px; }
  .hero-cta .lg-btn { padding: 12px 20px; font-size: 13px; }

  /* Orbital — stop shaking */
  .orbital-stage {
    max-width: 340px;
    aspect-ratio: 1;
    transform: none !important;
    overflow: visible;
  }
  .orbital-core { width: 70px; height: 70px; }
  .orbital-core-ring { animation: none; opacity: 0.3; }
  .orbital-node .dot {
    width: 34px;
    height: 34px;
  }
  .orbital-node .dot svg { width: 14px; height: 14px; }
  .orbital-node .node-label { font-size: 11px; top: 28px; }
  .orbital-node .card { width: min(230px, 80vw); padding: 14px; top: 50px; font-size: 12px; }

  /* Philosophy video */
  .philosophy-visual { aspect-ratio: 16/9; max-height: none; border-radius: 0; }
}

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .particles-bg {
    display: none !important;
  }
  .tm-track {
    transform: none !important;
  }
  .lc-track {
    will-change: transform;
  }
  .story-section.is-playing .story-glow,
  .hero-scroll::before {
    animation: none !important;
  }

  /* ---- Story section: disable GPU-heavy effects on mobile ---- */
  /* blur(80px) on .story-glow is the main scroll-jank culprit on phones */
  .story-glow {
    display: none !important;
  }
  /* mask-image forces full compositing layer — remove on mobile */
  .story-grid-overlay {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    opacity: 0.4;
  }
  /* Remove blur from story-line transitions — repaints on every frame */
  .story-line {
    filter: none !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
  }
  .story-section.in-view .story-line,
  .story-line.is-active,
  .story-line.is-past,
  .story-line.is-upcoming {
    filter: none !important;
  }
  /* Reduce aurora blur in footer */
  .cf-aurora {
    filter: blur(30px) !important;
  }
}

/* Extra small phones */
@media (max-width: 380px) {
  .hero-headline { font-size: 24px; }
  .hero-cta .lg-btn { padding: 10px 16px; font-size: 12px; }
  .drawer { width: 90vw; }
}

/* Keep orbital core ring still for users who ask for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .orbital-core-ring { animation: none !important; }
}

/* ============================================
   SERVICES CARD GRID — colored cards + 3D icons
   ============================================ */
.svc-section {
  padding: 80px 0;
  max-width: min(1200px, 100% - 48px);
  margin: 0 auto;
}
.svc-head {
  text-align: center;
  margin-bottom: 52px;
}
.svc-lead {
  font-size: clamp(14px, 1.6vw, 16px);
  color: rgba(244,247,255,0.65);
  max-width: 560px;
  margin: 16px auto 0;
  line-height: 1.8;
}
.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.svc-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 196px;
  padding: 30px 32px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  box-shadow: 0 6px 26px rgba(0,0,0,0.22);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
}
.svc-card:hover {
  transform: scale(1.02);
  box-shadow: 0 24px 54px rgba(0,0,0,0.36);
}
.svc-card--blue {
  background: linear-gradient(150deg, #5B8DF2 0%, #2F6BDB 100%);
  color: #0B1130;
}
.svc-card--purple {
  background: linear-gradient(150deg, #4D4FAC 0%, #34356F 100%);
  color: var(--liquid-white);
}
.svc-card--dark {
  background: linear-gradient(150deg, rgba(255,255,255,0.085) 0%, rgba(255,255,255,0.03) 100%);
  border: 1px solid rgba(255,255,255,0.09);
  color: var(--liquid-white);
}
.svc-card-title {
  font-family: var(--display);
  font-size: clamp(19px, 2vw, 25px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.01em;
  max-width: 74%;
  margin: 0 0 12px 0;
}
.svc-card-desc {
  font-family: var(--body);
  font-size: 13px;
  color: inherit;
  opacity: 0.85;
  line-height: 1.6;
  margin: 0;
  max-width: 90%;
}
/* Platform / tooling logos — a row of real brand marks under each
   service description, rendered as solid white (mamz.sa-inspired). */
.svc-card-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  max-width: 92%;
}
.svc-logo {
  height: 29px;
  width: auto;
  max-width: 76px;
  object-fit: contain;
  /* All brand logos forced to a single solid colour for a clean row. */
  filter: brightness(0) invert(1);
  opacity: 0.78;
  transition: opacity .25s, transform .25s;
}
.svc-card:hover .svc-logo {
  opacity: 1;
}
.svc-logo:hover {
  transform: scale(1.14);
}
/* Blue cards use a dark logo tint so marks stay legible on the light bg. */
.svc-card--blue .svc-logo {
  filter: brightness(0) saturate(100%);
  opacity: 0.72;
}
.svc-card--blue:hover .svc-logo {
  opacity: 0.95;
}

.svc-card-link {
  margin-top: auto;
  padding-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  align-self: flex-start;
}
.svc-card:hover .svc-card-link > span:first-child {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.svc-card-arrow {
  width: 17px;
  height: 17px;
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
html[dir="rtl"] .svc-card-arrow { transform: scaleX(-1); }
html[dir="rtl"] .svc-card:hover .svc-card-arrow { transform: scaleX(-1) translateX(5px); }
html[dir="ltr"] .svc-card:hover .svc-card-arrow { transform: translateX(5px); }
.svc-card-img {
  position: absolute;
  inset-block-end: -26px;
  inset-inline-end: -20px;
  width: 152px;
  height: 152px;
  object-fit: contain;
  z-index: -1;
  opacity: 0.96;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,0.34));
  transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .35s;
}
.svc-card:hover .svc-card-img {
  opacity: 1;
  transform: scale(1.12) rotate(-6deg);
}

@media (max-width: 700px) {
  .svc-section { padding: 56px 0; }
  .svc-head { margin-bottom: 36px; }
  .svc-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .svc-card {
    min-height: 168px;
    padding: 26px 24px;
  }
  .svc-card-title { max-width: 66%; }
  .svc-card-logos {
    max-width: 100%;
    margin-top: 13px;
    gap: 12px;
  }
  .svc-logo {
    height: 25px;
    max-width: 64px;
  }
  .svc-card-img {
    width: 132px;
    height: 132px;
    inset-block-end: -22px;
    inset-inline-end: -18px;
  }
}

/* ============================================
   SCROLL-TO-TOP FLOATING BUTTON
   ============================================ */
.scroll-top-btn {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8);
  transition: opacity .3s, visibility .3s, transform .3s cubic-bezier(.22,1,.36,1);
}
.scroll-top-btn.is-visible {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.scroll-top-btn svg {
  width: 20px;
  height: 20px;
  transition: transform .25s;
}
.scroll-top-btn:hover svg { transform: translateY(-3px); }

/* ============================================
   TESTIMONIALS — interactive quote switcher
   ============================================ */
.tq {
  max-width: 760px;
  margin: 12px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 38px;
  padding: 16px 24px;
}
.tq-quote-wrap {
  position: relative;
  padding: 0 30px;
}
.tq-mark {
  position: absolute;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 110px;
  line-height: 1;
  color: rgba(247,251,255,0.07);
  pointer-events: none;
  user-select: none;
}
.tq-mark-o { top: -36px; right: -8px; }
.tq-mark-c { bottom: -78px; left: -8px; transform: rotate(180deg); }
.tq-quote {
  font-family: var(--display);
  font-size: clamp(20px, 2.7vw, 31px);
  font-weight: 400;
  line-height: 1.75;
  text-align: center;
  color: var(--liquid-white);
  margin: 0;
  transition: opacity .4s ease, filter .4s ease, transform .4s ease;
}
.tq.is-switching .tq-quote {
  opacity: 0;
  filter: blur(6px);
  transform: scale(0.98);
}
.tq-role {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(247,251,255,0.5);
  margin: 0;
  transition: opacity .5s ease, transform .5s ease;
}
.tq.is-switching .tq-role {
  opacity: 0;
  transform: translateY(8px);
}
.tq-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.tq-pill {
  display: flex;
  align-items: center;
  border: none;
  border-radius: 100px;
  background: transparent;
  cursor: pointer;
  padding: 3px;
  transition: background .5s cubic-bezier(.4,0,.2,1), padding .5s cubic-bezier(.4,0,.2,1), box-shadow .5s;
}
.tq-pill:hover { background: rgba(247,251,255,0.08); }
.tq-pill.is-active {
  background: var(--liquid-white);
  padding: 4px 18px 4px 4px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.30);
}
.tq-av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  color: var(--liquid-white);
  background: linear-gradient(135deg, var(--ocean-blue), var(--deep-blue));
  flex-shrink: 0;
  transition: transform .4s cubic-bezier(.4,0,.2,1), box-shadow .4s;
}
.tq-pill:not(.is-active):hover .tq-av { transform: scale(1.06); }
.tq-pill.is-active .tq-av {
  box-shadow: 0 0 0 2px rgba(22,22,60,0.22);
}
.tq-name {
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  max-width: 0;
  margin-inline-start: 0;
  overflow: hidden;
  opacity: 0;
  color: var(--midnight);
  transition: max-width .5s cubic-bezier(.4,0,.2,1), opacity .4s ease, margin-inline-start .5s cubic-bezier(.4,0,.2,1);
}
.tq-pill.is-active .tq-name {
  max-width: 220px;
  opacity: 1;
  margin-inline-start: 10px;
}
@media (hover: hover) {
  .tq-pill:not(.is-active):hover .tq-name {
    max-width: 220px;
    opacity: 0.95;
    margin-inline-start: 10px;
    color: var(--liquid-white);
  }
}
@media (max-width: 640px) {
  .tq { gap: 30px; padding: 8px 16px; }
  .tq-quote-wrap { padding: 0 14px; }
  .tq-mark { font-size: 76px; }
  .tq-mark-o { top: -22px; }
  .tq-mark-c { bottom: -52px; }
  .tq-av { width: 32px; height: 32px; font-size: 14px; }
  .tq-pill.is-active { padding: 3px 14px 3px 3px; }
}

/* Unique testimonial treatment: centered quote + avatar pills. */
.tq {
  max-width: 900px;
  gap: 32px;
  padding: 44px 20px 10px;
}
.tq-quote-wrap {
  width: 100%;
  padding: 0 clamp(26px, 5vw, 72px);
}
.tq-mark {
  font-size: clamp(78px, 12vw, 136px);
  color: rgba(247,251,255,0.055);
}
.tq-mark-o {
  top: -46px;
  right: clamp(-8px, 1vw, 14px);
}
.tq-mark-c {
  bottom: -74px;
  left: clamp(-8px, 1vw, 14px);
}
.tq-quote {
  max-width: 760px;
  margin: 0 auto;
  font-size: clamp(26px, 4.1vw, 50px);
  line-height: 1.55;
}
.tq-role {
  margin: -4px 0 0;
  font-family: var(--latin);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: rgba(247,251,255,0.62);
}
.tq-pills {
  max-width: min(760px, 100%);
  gap: 8px 10px;
  align-items: center;
}
.tq-pill {
  min-height: 44px;
  gap: 0;
  padding: 3px;
  color: var(--liquid-white);
}
.tq-pill.is-active {
  background: var(--liquid-white);
  padding: 5px 18px 5px 5px;
  color: var(--midnight);
}
.tq-av {
  width: 38px;
  height: 38px;
  overflow: hidden;
  background: rgba(247,251,255,0.08);
  box-shadow: none;
}
.tq-avatar {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}
.tq-pill.is-active .tq-av {
  box-shadow: 0 0 0 2px rgba(22,22,60,0.22);
}
.tq-name {
  font-family: var(--body);
  color: var(--liquid-white);
}
.tq-pill.is-active .tq-name {
  color: var(--midnight);
}
@media (hover: hover) {
  .tq-pill:not(.is-active):hover .tq-name {
    color: var(--liquid-white);
  }
}
@media (max-width: 700px) {
  .tq {
    gap: 24px;
    padding: 36px 10px 8px;
  }
  .tq-quote-wrap {
    padding: 0 18px;
  }
  .tq-mark {
    font-size: 82px;
  }
  .tq-mark-o {
    top: -30px;
    right: -4px;
  }
  .tq-mark-c {
    bottom: -58px;
    left: -4px;
  }
  .tq-quote {
    font-size: clamp(24px, 7vw, 34px);
    line-height: 1.65;
  }
  .tq-role {
    max-width: 100%;
    text-align: center;
    letter-spacing: 0.18em;
  }
  .tq-pills {
    padding-inline: 8px 76px;
    gap: 8px;
  }
  .tq-pill.is-active {
    padding: 4px 12px 4px 4px;
  }
  .tq-av {
    width: 34px;
    height: 34px;
  }
  .tq-name {
    font-size: 12px;
  }
}

/* Emergency mobile spacing fix: keep content visible between hero and logo grids. */
@media (max-width: 700px) {
  body.has-promo .hero,
  .hero {
    min-height: auto !important;
    padding: 96px 16px 44px !important;
    justify-content: flex-start !important;
  }
  .hero-headline {
    margin-top: 0 !important;
  }
  .hero-sub {
    margin-top: 20px !important;
  }
  .hero-cta {
    margin-top: 28px !important;
  }
  .lc-section {
    padding-top: 10px !important;
  }
  .lc-head {
    margin-bottom: 14px !important;
  }
  .tech-logos-section {
    padding-top: 16px !important;
  }
  .tech-logos-section .reveal,
  .tech-logos-section.reveal,
  .tech-logos-head,
  .tech-logos-rail,
  .tech-logos-track {
    opacity: 1 !important;
    transform: none !important;
  }
  .story-section {
    min-height: auto !important;
  }
  .story-stage {
    min-height: auto !important;
    padding: 42px 20px !important;
  }
  .story-line,
  .story-section.in-view .story-line,
  .story-section.is-done .story-line {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* Mobile stability reset: avoid blank sections if scroll reveal observers lag. */
@media (max-width: 900px) {
  .reveal,
  .reveal.d1,
  .reveal.d2,
  .reveal.d3,
  .reveal.d4 {
    opacity: 1 !important;
    transform: none !important;
    transition-delay: 0s !important;
  }
  section {
    overflow: visible;
  }
  .lc-section,
  .tech-logos-section,
  .story-section,
  .philosophy-section,
  #vision,
  #values,
  #services,
  #why,
  #testimonials,
  #cta {
    min-height: 0 !important;
  }
  .story-section,
  .story-stage {
    min-height: 0 !important;
  }
  .values-static-grid {
    grid-template-columns: 1fr !important;
  }
  .orbital-stage {
    display: block !important;
    max-width: min(360px, 92vw) !important;
    height: auto !important;
    aspect-ratio: 1 !important;
    margin-bottom: 18px !important;
  }
  .orbital-core {
    width: 82px !important;
    height: 82px !important;
  }
  .orbital-nodes {
    display: block !important;
  }
  .orbital-node .card {
    display: none !important;
  }
  .orbital-node .dot {
    width: 34px !important;
    height: 34px !important;
  }
  .orbital-node .node-label {
    display: block !important;
    font-size: 11px !important;
    top: 30px !important;
  }
  .orbit-static-labels {
    display: none !important;
  }
}

/* ============================================
   No letter-spacing anywhere — Arabic is cursive,
   any positive tracking disconnects the letters and
   breaks the text. This neutralises every tracking
   rule (and the animated hero tracking) site-wide.
   ============================================ */
* { letter-spacing: normal !important; }