/* ═══════════════════════════════════════════════════════════════
   LB AGENCY — stylesheet (v6 · العودة لأخضر الصنوبري + تعديلات
   التصميم المرئية الجديدة (خلفية الهيرو بالصور، إلخ) محفوظة كما هي.
   Palette from the LB logo: pine green + marble white.
   RTL-native (logical properties). Arabic-first.
   ═══════════════════════════════════════════════════════════════ */

/* Aref Ruqaa — الخط العربي للموقع كامل (مستضاف محليًا، الحروف العربية فقط؛ اللاتيني يبقى Space Grotesk) */
@font-face { font-family: "Aref Ruqaa"; font-style: normal; font-weight: 400; font-display: swap; size-adjust: 128%;
  src: url("../assets/fonts/aref-ruqaa-arabic-400-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEFF; }
@font-face { font-family: "Aref Ruqaa"; font-style: normal; font-weight: 700; font-display: swap; size-adjust: 128%;
  src: url("../assets/fonts/aref-ruqaa-arabic-700-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEFF; }

@font-face { font-family: "Amiri Names"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/amiri-arabic-700-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }

@font-face { font-family: "Plex Ar"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }
@font-face { font-family: "Plex Ar"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../assets/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }
@font-face { font-family: "Plex Ar"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }

:root {
  --marble:    #f4f5f3;
  --marble-2:  #e9ece9;
  --pine:      #2e463f;
  --pine-deep: #24352f;
  --pine-ink:  #1b2a25;
  --sage:      #58685f;
  --mist:      #b9c4bd;
  --gold:      #a8843b;
  --line:      rgba(27, 42, 37, 0.14);
  --line-dark: rgba(244, 245, 243, 0.16);

  /* ── لوحة ألوان موسّعة — نفس العائلة اللونية الخضراء بدرجات أوسع،
       بدل تكرار نفس درجتين بكل مكان. تُستخدم كخلفيات متبادلة بين
       الأقسام ولتفاصيل صغيرة (حدود، أيقونات، نقشات). ── */
  --sage-tint:   #dde6e0;   /* أخضر سيج فاتح جدًا — خلفيات بديلة */
  --olive:       #4a5a3f;   /* أخضر زيتوني غامق — تنويع بجانب الصنوبري */
  --teal-mist:   #3a564d;   /* أخضر مزرق خفيف — لمسات وسيطة */
  --gold-light:  #d9bf87;   /* ذهبي فاتح/شمباني — تفاصيل ناعمة */
  --gold-deep:   #7c5f28;   /* ذهبي غامق/برونزي — نص على فاتح */
  --cream:       #f7f2e7;   /* بيج دافئ — بديل الأبيض البارد */
  --cream-2:     #efe7d6;   /* بيج أغمق قليلًا — تباين خفيف بالبطاقات */

  --font-display: "Unbounded", "Aref Ruqaa", serif;
  --font-body:    "Space Grotesk", "Plex Ar", system-ui, sans-serif;
  --font-ar:      "Space Grotesk", "Plex Ar", sans-serif;
  --font-title:   "Space Grotesk", "Aref Ruqaa", serif;

  --space-section: clamp(5rem, 11vw, 9.5rem);
  --container: 78rem;
  --radius: 14px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-ar);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--marble);
  background: var(--pine-ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 200;
  pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; display: block; }

/* ── Accessibility ── */
.skip-link {
  position: absolute; inset-inline-start: 1rem; top: -3.5rem; z-index: 300;
  padding: 0.6rem 1.1rem; background: var(--pine); color: var(--marble);
  font-weight: 700; text-decoration: none; border-radius: 999px;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 2px solid var(--pine); outline-offset: 3px; }
.creators :focus-visible, .site-footer :focus-visible, .cta-band:focus-visible { outline-color: var(--marble); }

/* ── Scroll progress bar (modern touch) ── */
.scroll-progress {
  position: fixed; top: 0; inset-inline-start: 0;
  height: 3px; width: 0;
  background: linear-gradient(90deg, var(--pine), var(--gold));
  z-index: 500;
}

/* ═══════════════ HEADER ═══════════════ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(27, 42, 37, 0.92);
  backdrop-filter: blur(14px);
  border-block-end: 1px solid rgba(253,243,231,0.14);
}
.header-inner {
  max-width: var(--container); margin-inline: auto;
  padding: 0.7rem clamp(1.25rem, 4vw, 2.5rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.logo { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; color: var(--marble); }
.logo img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; transition: transform 0.3s var(--ease); }
.logo:hover img { transform: scale(1.05); }
.footer-logo-img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; }

.nav-menu { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2rem); list-style: none; }
.nav-menu a { color: var(--marble); text-decoration: none; font-size: 0.95rem; font-weight: 500; transition: color 0.25s; }
.nav-menu a:hover { color: var(--gold-light); }
.nav-num { color: var(--gold-light); font-size: 0.65rem; vertical-align: super; margin-inline-end: 0.3rem; font-weight: 700; }
.nav-cta a.btn { padding: 0.55rem 1.3rem; font-size: 0.85rem; }
.nav-social { display: flex; gap: 0.85rem; }
.icon { width: 20px; height: 20px; fill: currentColor; }
.nav-social a { color: var(--mist); transition: color 0.25s, transform 0.25s var(--ease); }
.nav-social a:hover { color: var(--gold-light); transform: translateY(-2px); }

.nav-toggle { display: none; flex-direction: column; gap: 6px; background: none; border: 0; padding: 0.6rem; cursor: pointer; }
.nav-toggle-bar { width: 26px; height: 2px; background: var(--marble); transition: transform 0.3s var(--ease); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child { transform: translateY(-4px) rotate(-45deg); }

/* ── زر تبديل اللغة — دائرة ثابتة بزاوية الصفحة، نفس الرابط ── */
.lang-fab {
  position: fixed; z-index: 260;
  inset-block-start: clamp(4.6rem, 9vh, 5.6rem);
  inset-inline-end: clamp(1rem, 3vw, 1.75rem);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--marble);
  color: var(--pine-ink);
  font-family: var(--font-display); font-weight: 700; font-size: 0.85rem;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(27,42,37,0.18);
  transition: transform 0.3s var(--ease), box-shadow 0.25s, background 0.25s;
}
.lang-fab:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 14px 34px rgba(27,42,37,0.26); background: var(--pine); color: var(--marble); }
.lang-fab-cur { pointer-events: none; }

@media (max-width: 760px) {
  .lang-fab { inset-block-start: auto; inset-block-end: clamp(4.6rem, 14vw, 5.6rem); inset-inline-end: clamp(1rem, 4vw, 1.5rem); }
}

/* ═══════════════ HERO ═══════════════ */
.hero {
  position: relative;
  min-height: min(94vh, 62rem);
  display: flex; align-items: center;
  padding: clamp(3rem, 8vw, 6rem) 0;
  overflow: hidden;
}
.hero-inner {
  position: relative; z-index: 1;
  max-width: var(--container); margin-inline: auto; width: 100%;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.hero-meta {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: 0.85rem; font-weight: 500; letter-spacing: 0.05em;
  color: rgba(253, 243, 231, 0.75);
  border-block-end: 1px solid rgba(253, 243, 231, 0.22);
  padding-block-end: 1rem; margin-block-end: clamp(1.5rem, 4vw, 3rem);
}
.hero-meta-ar { font-family: var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-light); font-weight: 700; }

.hero-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3.1rem, 12.5vw, 10rem);
  line-height: 1.05;
  color: var(--marble);
  display: grid;
  text-shadow: 0 6px 30px rgba(0,0,0,0.25);
}
.hero-title .line { display: block; }
.line-2 {
  color: transparent;
  -webkit-text-stroke: 2px var(--gold-light);
  padding-inline-start: clamp(1.5rem, 8vw, 8rem);
}
.dot { color: var(--gold-light); }
.chip {
  display: inline-grid; place-items: center;
  width: 0.82em; height: 0.62em;
  margin-inline-end: 0.12em;
  background: var(--gold-light);
  color: var(--pine-ink);
  -webkit-text-stroke: 0;
  border-radius: 999px;
  font-size: 0.42em;
  transform: translateY(-0.08em);
}
.hero-foot {
  margin-block-start: clamp(2rem, 5vw, 3.5rem);
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 2rem; flex-wrap: wrap;
}
.hero-sub { max-width: 28rem; color: rgba(253, 243, 231, 0.8); font-size: 1.1rem; }
.hero-cta { display: flex; gap: 0.9rem; flex-wrap: wrap; }
.hero-cta .btn-outline { color: var(--marble); border-color: rgba(253, 243, 231, 0.4); }
.hero-cta .btn-outline:hover { border-color: var(--gold-light); color: var(--gold-light); }
.hero-cta .btn-solid { background: var(--gold); color: var(--pine-ink); }
.hero-cta .btn-solid:hover { background: var(--gold-light); box-shadow: 0 10px 28px rgba(232, 121, 47, 0.4); }
/* ── خلفية بانورامية بألواح صور المواهب — تملأ الهيرو بالكامل خلف
     النص (أسلوب مواقع الوكالات العالمية)، مع طبقة تعتيم متدرجة تضمن
     تباين كافٍ لنص أبيض فوقها. كل لوح يكبر بهدوء عند التحويم/الظهور
     لإحساس حي وسلس بدون إخلال بالقراءة. ── */
.hero-photobg {
  position: absolute; inset: 0; z-index: 0;
  display: flex;
  overflow: hidden;
}
.hero-photobg-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}
.hero-photobg-panel img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center 20%;
  transform: scale(1.04);
  transition: transform 8s var(--ease);
  filter: saturate(1.05);
}
.hero:hover .hero-photobg-panel img { transform: scale(1.12); }
.hero-photobg-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(27,42,37,0.88) 0%, rgba(27,42,37,0.72) 32%, rgba(27,42,37,0.4) 58%, rgba(27,42,37,0.72) 100%),
    linear-gradient(0deg, rgba(27,42,37,0.55), transparent 45%);
}
@media (max-width: 900px) {
  .hero-photobg-panel:nth-child(4), .hero-photobg-panel:nth-child(5) { display: none; }
  .hero-photobg-scrim { background:
    linear-gradient(180deg, rgba(27,42,37,0.55) 0%, rgba(27,42,37,0.86) 55%, rgba(27,42,37,0.94) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-photobg-panel img { transition: none; }
}

.hero-glow {
  position: absolute; z-index: 0;
  inset-block-start: -20%; inset-inline-end: -10%;
  width: 60vw; height: 60vw; max-width: 56rem; max-height: 56rem;
  background: radial-gradient(circle, rgba(46, 70, 63, 0.14), transparent 62%);
  filter: blur(10px);
  pointer-events: none;
  animation: glow-drift 14s var(--ease) infinite alternate;
}
@keyframes glow-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-4%, 5%) scale(1.08); }
}

/* floating gold sparkles — echo of the talent portraits */
.hero-sparks { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero-sparks .spark {
  position: absolute;
  color: var(--gold);
  animation: spark-float 6s ease-in-out infinite;
}
.hero-sparks .s1 { inset-block-start: 18%; inset-inline-end: 12%; font-size: 1.6rem; animation-delay: 0s; }
.hero-sparks .s2 { inset-block-start: 60%; inset-inline-end: 6%;  font-size: 2.4rem; animation-delay: 1.4s; opacity: 0.8; }
.hero-sparks .s3 { inset-block-end: 14%; inset-inline-start: 8%;  font-size: 1.2rem; animation-delay: 2.6s; opacity: 0.7; }
.hero-sparks .s4 { inset-block-start: 30%; inset-inline-start: 16%; font-size: 0.9rem; animation-delay: 3.4s; opacity: 0.55; }
@keyframes spark-float {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  50%      { transform: translateY(-14px) rotate(20deg) scale(1.12); }
}

/* ── عناصر هندسية متحركة تملأ فراغي الهيرو الجانبيين (v8) ──
   دوائر متراكبة، مربع مائل، مثلث، خطوط ونقاط — كلها SVG رفيعة
   بلون واحد (currentColor) تتحرك ببطء شديد كل وحدة بمدارها الخاص. */
.hero-geo { display: none; }
.hero-geo-unused {
  position: absolute; z-index: 0;
  inset-block-start: 8%;
  width: clamp(140px, 15vw, 220px);
  color: var(--pine);
  opacity: 0.55;
  pointer-events: none;
}
.hero-geo-start { inset-inline-start: clamp(0.5rem, 3vw, 3rem); }
.hero-geo-end   { inset-inline-end: clamp(0.5rem, 3vw, 3rem); inset-block-start: 4%; color: var(--gold); }
.hero-geo svg { width: 100%; height: auto; display: block; }

.geo-ring       { animation: geo-spin 22s linear infinite; transform-origin: center; transform-box: fill-box; }
.geo-r2         { animation-duration: 16s; animation-direction: reverse; }
.geo-r3         { animation-duration: 26s; }
.geo-sq         { animation: geo-float 7s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.geo-sq-2       { animation-duration: 9s; animation-delay: 1.2s; }
.geo-tri        { animation: geo-float 8.5s ease-in-out infinite; animation-delay: 0.6s; transform-box: fill-box; transform-origin: center; }
.geo-line       { animation: geo-fade 5s ease-in-out infinite; }
.geo-line-2     { animation-delay: 1.8s; animation-duration: 6s; }
.geo-dot        { animation: geo-pulse 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.geo-dot-2      { animation-delay: 1s; animation-duration: 4.2s; }
.geo-dot-3      { animation-delay: 2s; animation-duration: 3.8s; }

@keyframes geo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes geo-float {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50%      { transform: translateY(-16px) rotate(calc(var(--rot, 0deg) + 6deg)); }
}
@keyframes geo-fade { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.8; } }
@keyframes geo-pulse { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.6); opacity: 1; } }

@media (max-width: 980px) { .hero-geo { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .geo-ring, .geo-sq, .geo-tri, .geo-line, .geo-dot { animation: none; }
}

/* ── Buttons (with shine sweep) ── */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.8rem 1.7rem;
  font-family: var(--font-ar); font-size: 0.95rem; font-weight: 700;
  text-decoration: none;
  border-radius: 999px; border: 1px solid var(--pine);
  cursor: pointer;
  transition: transform 0.3s var(--ease), background 0.3s, color 0.3s, box-shadow 0.3s;
}
.btn::before {
  content: "";
  position: absolute; top: 0; height: 100%; width: 45%;
  inset-inline-start: -60%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  transition: inset-inline-start 0.6s var(--ease);
}
.btn:hover::before { inset-inline-start: 120%; }
.btn .arrow { transition: transform 0.3s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
[dir="rtl"] .btn:hover .arrow { transform: translateX(-4px); }
.btn:hover { transform: translateY(-2px); }
.btn-solid { background: var(--pine); color: var(--marble); }
.btn-solid:hover { background: var(--pine-deep); box-shadow: 0 8px 26px rgba(36, 53, 47, 0.35); }
.btn-outline { background: transparent; color: var(--pine-ink); border-color: var(--line); }
.btn-outline:hover { border-color: var(--pine); color: var(--pine); }
.btn-marble { background: var(--marble); color: var(--pine-ink); border-color: var(--marble); }
.btn-marble:hover { box-shadow: 0 8px 26px rgba(0, 0, 0, 0.3); }
.btn-lg { padding: 1rem 2.1rem; font-size: 1rem; }
.btn-wide { width: 100%; justify-content: center; }

/* ═══════════════ MARQUEE ═══════════════ */
.marquee { overflow: hidden; padding-block: 1rem; background: var(--pine-deep); }
.marquee-track {
  display: flex; width: max-content; white-space: nowrap;
  animation: scroll 28s linear infinite;
  font-family: var(--font-ar); font-weight: 700;
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  letter-spacing: 0.02em;
  color: var(--mist);
}
.marquee-track > span { padding-inline-end: 0.5em; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
[dir="rtl"] .marquee-track { animation-name: scroll-rtl; }
@keyframes scroll-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }

/* ═══════════════ BRANDS FLOAT — شعارات البراندات عائمة داخل خلفية
   قسم الثقة نفسه (بدون شريط أو قسم منفصل، وبدون أي تسمية نصية) ═══════════════
   حقل من دوائر الشعارات الشفافة تطفو بهدوء (عوم رأسي + دوران بسيط)،
   موزّعة في أطراف القسم بعيدًا عن الجوال/اللابتوب والعنوان بالمنتصف،
   بحجم وشفافية وسرعة مختلفة لكل واحدة حتى تبدو حية وعضوية لا صف
   متكرر. تظهر بخفة خلف المحتوى دون أن تنافسه. ═══════════════ */
.brands-float-field {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
}
.float-logo {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(244,245,243,0.94);
  box-shadow: 0 8px 22px rgba(0,0,0,0.28);
  opacity: 0.5;
  animation-name: logo-drift;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform;
  transition: opacity 0.4s var(--ease);
}
.float-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* مواضع/أحجام/توقيت كل شعار — كلاسات منفصلة بدل inline style لأن
   سياسة أمان المحتوى (CSP) بالموقع تمنع الأنماط المضمّنة inline.
   الحقل يتفادى المنتصف (٣٠٪–٧٠٪ أفقيًا) حيث العنوان + الجوال + اللابتوب،
   ويوزّع الشعارات بالأطراف العلوية والسفلية والجانبية بدلاً من ذلك. */
.fl-1  { inset-block-start:4%;  inset-inline-start:3%;  width:46px; height:46px; opacity:0.42; animation-delay:0.0s; animation-duration:9s; }
.fl-2  { inset-block-start:13%; inset-inline-start:11%; width:58px; height:58px; opacity:0.5;  animation-delay:1.4s; animation-duration:10.5s; }
.fl-3  { inset-block-start:5%;  inset-inline-start:20%; width:40px; height:40px; opacity:0.38; animation-delay:0.6s; animation-duration:8s; }
.fl-4  { inset-block-end:10%;   inset-inline-start:6%;  width:52px; height:52px; opacity:0.46; animation-delay:2.1s; animation-duration:9.5s; }
.fl-5  { inset-block-end:20%;   inset-inline-start:16%; width:44px; height:44px; opacity:0.4;  animation-delay:0.9s; animation-duration:8.5s; }
.fl-6  { inset-block-start:34%; inset-inline-start:4%;  width:38px; height:38px; opacity:0.36; animation-delay:1.8s; animation-duration:10s; }
.fl-7  { inset-block-start:60%; inset-inline-start:10%; width:50px; height:50px; opacity:0.44; animation-delay:1.1s; animation-duration:9s; }
.fl-8  { inset-block-start:4%;  inset-inline-end:4%;    width:54px; height:54px; opacity:0.48; animation-delay:0.3s; animation-duration:8.8s; }
.fl-9  { inset-block-start:15%; inset-inline-end:13%;   width:42px; height:42px; opacity:0.4;  animation-delay:2.4s; animation-duration:9.2s; }
.fl-10 { inset-block-end:16%;   inset-inline-start:24%;  width:40px; height:40px; opacity:0.38; animation-delay:0.7s; animation-duration:10.2s; }
.fl-11 { inset-block-start:34%; inset-inline-end:5%;    width:38px; height:38px; opacity:0.36; animation-delay:1.6s; animation-duration:8.6s; }
.fl-12 { inset-block-end:24%;   inset-inline-end:15%;   width:46px; height:46px; opacity:0.42; animation-delay:0.2s; animation-duration:9.4s; }
.fl-13 { inset-block-end:12%;   inset-inline-end:5%;    width:56px; height:56px; opacity:0.48; animation-delay:1.9s; animation-duration:8.2s; }
.fl-14 { inset-block-start:60%; inset-inline-end:9%;    width:48px; height:48px; opacity:0.4;  animation-delay:1.0s; animation-duration:9.8s; }
.fl-16 { inset-block-end:6%;    inset-inline-start:30%; width:34px; height:34px; opacity:0.3;  animation-delay:0.5s; animation-duration:9.6s; }
.fl-17 { inset-block-end:5%;    inset-inline-end:28%;   width:34px; height:34px; opacity:0.3;  animation-delay:1.3s; animation-duration:10.4s; }
.fl-19 { inset-block-start:2%;  inset-inline-start:45%; width:32px; height:32px; opacity:0.26; animation-delay:2.0s; animation-duration:8.7s; }
.fl-21 { inset-block-start:2%;  inset-inline-end:44%;   width:32px; height:32px; opacity:0.26; animation-delay:0.4s; animation-duration:10.1s; }
@keyframes logo-drift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(4deg); }
}
@media (max-width: 900px) {
  .fl-6, .fl-11, .fl-16, .fl-17, .fl-19, .fl-21 { display: none; }
  .float-logo { transform: scale(0.82); }
}

/* ═══════════════ SECTIONS ═══════════════ */
.section { padding-block: var(--space-section); }
.container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.section-head { display: flex; align-items: center; gap: 1rem; margin-block-end: 1.6rem; }

/* ── خريطة السعودية كخلفية كاملة لقسم "من نحن" — لمسة هوية محلية،
     مع طبقة تعتيم فاتحة (بلون الرخام) فوقها لضمان بقاء النص واضحًا. ── */
.about {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--pine-ink) 0%, #142019 100%);
}
.about .container { position: relative; z-index: 1; }
.about-map {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;
}
.about-map-scrim {
  position: absolute; inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(19,29,25,0.55), rgba(19,29,25,0.42) 55%, rgba(19,29,25,0.65));
  pointer-events: none;
}
/* لوحة زجاجية داكنة خفيفة خلف النص فقط — تُبقي الخريطة واضحة بالخلفية
   وتضمن في نفس الوقت وضوح القراءة للفقرات والجدول فوقها مباشرة. */
.about-textpanel {
  position: relative;
  z-index: 1;
  background: rgba(19, 29, 25, 0.68);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 22px;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  border: 1px solid rgba(253,243,231,0.1);
}
.section-index {
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.8rem; color: var(--marble);
  background: var(--pine);
  padding: 0.25rem 0.6rem; border-radius: 999px;
}
.eyebrow { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; color: var(--mist); }
.eyebrow [lang="en"] { color: var(--gold-light); letter-spacing: 0.12em; text-transform: uppercase; font-family: var(--font-body); }

h2 {
  font-family: var(--font-ar); font-weight: 700;
  font-size: clamp(1.9rem, 4.6vw, 3.2rem);
  line-height: 1.3;
  margin-block-end: 1.5rem;
  color: var(--marble);
}

/* ── About ── */
.about-statement {
  font-family: var(--font-ar); font-weight: 700;
  font-size: clamp(1.55rem, 3.6vw, 2.8rem);
  line-height: 1.5;
  max-width: 60rem;
  margin-block-end: clamp(2.5rem, 6vw, 4.5rem);
  color: var(--marble);
}
.about-statement em { font-style: normal; color: var(--gold-light); }
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.about-copy p { color: var(--mist); font-size: 1.08rem; }
.about-copy p + p { margin-block-start: 1.1rem; }
.about-points { list-style: none; }
.about-points li {
  display: grid; grid-template-columns: 9rem 1fr; gap: 1rem;
  padding-block: 1.1rem;
  border-block-start: 1px solid rgba(253,243,231,0.14);
  color: var(--mist);
}
.about-points li:last-child { border-block-end: 1px solid rgba(253,243,231,0.14); }
.point-key { font-weight: 700; color: var(--marble); font-size: 0.95rem; padding-block-start: 0.15rem; }

/* ═══════════════ STATS COUNTERS ═══════════════
   نفس خلفية قسم الثقة الداكنة تحتها مباشرة، بدون حدّ أو فاصل أبيض
   بينهما، حتى تبدو المنطقتان قطعة واحدة متصلة. */
.stats { background: none; }
/* الأرقام داخل قسم الثقة — نفس الخلفية بدون فاصل */
.trust:has(.trust-stats) { padding-block-start: clamp(1rem, 3vw, 2rem); }
.trust-stats { position: relative; z-index: 1; }
.trust:has(.trust-stats) .brands-float-field { inset-block-start: 25rem; }
.trust-stats .stats-grid { padding-block-end: clamp(1rem, 3vw, 2rem); }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding-block: clamp(2.2rem, 6vw, 3.5rem);
  text-align: center;
}
.stat-num {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1;
  color: var(--marble);
  display: inline-flex; align-items: baseline; justify-content: center; gap: 0.1em;
}
.stat-plus { color: var(--gold-light); font-size: 0.6em; }
.stat-label { color: var(--mist); font-weight: 700; margin-block-start: 0.5rem; }

/* ═══════════════ CREATORS ═══════════════ */
.creators { background: var(--pine-deep); color: var(--marble); }
.creators .eyebrow { color: var(--mist); }
.creators .eyebrow [lang="en"] { color: var(--marble); }
.creators-title {
  font-family: var(--font-ar); font-weight: 700;
  font-size: clamp(1.9rem, 5vw, 3.4rem);
  line-height: 1.35;
  margin-block-end: clamp(2rem, 5vw, 3.5rem);
}

/* الرسم التوضيحي — عميل محتار على المكتب */
.creators-illo {
  max-width: 680px;
  margin-inline: auto;
  margin-block-end: clamp(2.5rem, 6vw, 4rem);
}
.creators-illo svg { width: 100%; height: auto; display: block; }
.illo-q { animation: q-float 3.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.illo-q.q2 { animation-delay: 0.7s; }
.illo-q.q3 { animation-delay: 1.5s; }
@keyframes q-float {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-10px) rotate(5deg); }
}
.illo-zz { animation: zz-blink 2.6s ease-in-out infinite; }
@keyframes zz-blink { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }

.creators-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.qpanel {
  border-radius: var(--radius);
  padding: clamp(1.8rem, 4vw, 2.8rem) clamp(1.4rem, 3vw, 2rem);
  min-height: 15rem;
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.6rem;
  border: 1px solid var(--line-dark);
  transition: transform 0.4s var(--ease), border-color 0.4s, box-shadow 0.4s;
}
.qpanel:hover { transform: translateY(-8px); border-color: rgba(244,245,243,0.45); box-shadow: 0 22px 44px rgba(0,0,0,0.25); }
.qpanel-a {
  background:
    linear-gradient(135deg, rgba(244,245,243,0.06) 25%, transparent 25%, transparent 50%, rgba(244,245,243,0.06) 50%, rgba(244,245,243,0.06) 75%, transparent 75%) 0 0 / 26px 26px,
    var(--pine);
}
.qpanel-b {
  background:
    radial-gradient(circle at 1px 1px, rgba(244,245,243,0.14) 1px, transparent 1.6px) 0 0 / 16px 16px,
    var(--teal-mist);
}
.qpanel-c {
  background:
    repeating-radial-gradient(circle at 120% -20%, transparent 0 18px, rgba(244,245,243,0.05) 18px 20px),
    var(--pine-ink);
}
.qtext { font-family: var(--font-ar); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.4; }
.qsub { color: var(--mist); font-family: var(--font-ar); font-size: 1rem; line-height: 1.8; }
.creators-cta { margin-block-start: clamp(2rem, 5vw, 3rem); display: flex; justify-content: center; }

/* ── Services grid (11 خدمة — بطاقات بدل الصفوف الكبيرة) ── */
.services {
  position: relative;
  overflow: hidden;
  background: var(--cream);
}
/* خلفية القسم: نقشة سجاد/زهور خضراء بالعرض الكامل، مع طبقة تغميق
   فوقها لإبقاء البطاقات البيضاء واضحة ومقروءة فوقها. */
.services-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0;
  pointer-events: none;
}
.services-bg-scrim {
  position: absolute; inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(27,42,25,0.62), rgba(27,42,25,0.72) 50%, rgba(27,42,25,0.66));
  pointer-events: none;
}
/* نقشة هندسية خفيفة جدًا خلف القسم — تكسر الفراغ الفاتح بدون تشتيت */
.section-pattern {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(46,70,63,0.09) 1px, transparent 1.6px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 85%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 85%);
}
.services .container { position: relative; z-index: 1; }
.services .eyebrow { color: var(--gold-light); }
.services h2 { color: var(--marble); }

.services-grid {
  margin-block-start: 2.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.service-card {
  position: relative;
  background: linear-gradient(160deg, var(--pine) 0%, var(--pine-deep) 100%);
  border: 1px solid rgba(253,243,231,0.14);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.1rem);
  display: flex; flex-direction: column; gap: 0.9rem;
  box-shadow: 0 14px 32px rgba(15,22,19,0.28);
  transition: transform 0.4s var(--ease), box-shadow 0.4s, border-color 0.4s, background 0.4s;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(15,22,19,0.36);
  border-color: var(--gold-light);
  background: linear-gradient(160deg, var(--pine-deep) 0%, var(--pine-ink) 100%);
}
.service-card-icon {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: rgba(253,243,231,0.1);
  transition: background 0.4s, transform 0.4s var(--ease);
}
.service-card:hover .service-card-icon { background: var(--gold); transform: rotate(-6deg) scale(1.06); }
.service-card-icon svg {
  width: 24px; height: 24px;
  fill: none; stroke: var(--gold-light); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke 0.4s;
}
.service-card:hover .service-card-icon svg { stroke: var(--pine-ink); }
.service-card h3 { font-family: var(--font-ar); font-weight: 700; font-size: 1.1rem; line-height: 1.5; color: var(--marble); }
.service-card p { color: var(--mist); font-size: 0.92rem; line-height: 1.85; }

/* تتالي دخول البطاقات الـ 11 بترتيب متتابع */
.services-grid .service-card:nth-child(1)  { transition-delay: 0.02s; }
.services-grid .service-card:nth-child(2)  { transition-delay: 0.06s; }
.services-grid .service-card:nth-child(3)  { transition-delay: 0.1s; }
.services-grid .service-card:nth-child(4)  { transition-delay: 0.14s; }
.services-grid .service-card:nth-child(5)  { transition-delay: 0.18s; }
.services-grid .service-card:nth-child(6)  { transition-delay: 0.22s; }
.services-grid .service-card:nth-child(7)  { transition-delay: 0.26s; }
.services-grid .service-card:nth-child(8)  { transition-delay: 0.3s; }
.services-grid .service-card:nth-child(9)  { transition-delay: 0.34s; }
.services-grid .service-card:nth-child(10) { transition-delay: 0.38s; }
.services-grid .service-card:nth-child(11) { transition-delay: 0.42s; }
.js .services-grid .service-card.reveal { transform: translateY(24px) scale(0.94); }
.js .services-grid .service-card.reveal.in-view { transform: none; }

@media (max-width: 980px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .services-grid { grid-template-columns: 1fr; } }

/* ── قسم المواهب: خلفية خضراء بنقشة تطريز خفيفة ─────────────── */
.talent {
  position: relative;
  background:
    linear-gradient(160deg, var(--pine) 0%, var(--pine-deep) 55%, var(--pine-ink) 100%);
}
.talent::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("../assets/talent-bg-pattern.svg");
  background-size: 220px 220px;
  background-repeat: repeat;
}
.talent .container { position: relative; z-index: 1; }
.talent .eyebrow { color: var(--gold-light); }
.talent .section-index { background: var(--gold); color: var(--pine-ink); }
.talent h2 { color: var(--marble); }
.talent-note { color: var(--mist) !important; }

/* ── Talent grid ── */
.talent-grid {
  margin-block-start: 2.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.2rem;
}
.tile { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; }
.tile[role="button"] { cursor: pointer; }
.tile[role="button"]:focus-visible { outline: 3px solid var(--pine); outline-offset: 3px; }
.tile-media {
  position: absolute; inset: 0;
  background: #fdfdfc;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.tile img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 18%;
  transition: transform 0.6s var(--ease);
}
.tile img.tile-img-center { object-position: center 38%; }
.tile:hover img { transform: scale(1.05); }
.tile { transition: transform 0.4s var(--ease), box-shadow 0.4s; }
.tile:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(27,42,37,0.16); }
.tile-info {
  position: absolute;
  inset-block-end: 0; inset-inline: 0;
  padding: 2rem 1.1rem 0.9rem;
  background: linear-gradient(transparent, rgba(27, 42, 37, 0.88));
}
.tile-info h3 { font-family: var(--font-ar); font-weight: 700; font-size: 1.1rem; color: #ffffff; line-height: 1.5; }
.tile-info p { color: var(--mist); font-family: var(--font-ar); font-size: 0.85rem; }

.talent-note {
  margin-block-start: 2.2rem;
  text-align: center;
  font-family: var(--font-ar); font-weight: 700;
  font-size: 1.05rem;
  color: var(--sage);
}

/* ═══════════════ COLLABORATIONS — التعاونات ═══════════════ */
.collabs {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 50% 40% at 90% 8%, rgba(168,132,59,0.14), transparent 65%),
    linear-gradient(180deg, var(--pine-ink) 0%, #142019 100%);
}
.collabs .section-index { background: var(--gold); color: var(--pine-ink); }
.collabs .eyebrow { color: var(--gold-light); }
.collabs h2 { color: var(--marble); }
.collabs .section-sub { color: var(--mist); max-width: 36rem; margin-block-end: 2rem; }
.collab-tabs {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin-block-end: 2.4rem;
}
.collab-tab {
  font: inherit; font-size: 0.92rem; font-weight: 700;
  padding: 0.55rem 1.15rem; border-radius: 999px; cursor: pointer;
  color: var(--mist); background: rgba(253,243,231,0.05);
  border: 1px solid rgba(253,243,231,0.16);
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s var(--ease);
}
.collab-tab:hover { color: var(--marble); border-color: var(--gold-light); transform: translateY(-1px); }
.collab-tab.is-active { background: var(--gold); color: var(--pine-ink); border-color: var(--gold); }
.collab-groups { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.collab-group[hidden] { display: none; }
.collab-title {
  display: flex; align-items: center; gap: 0.7rem;
  font-family: var(--font-ar); font-weight: 700;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  color: var(--marble);
  padding-block-end: 0.8rem; margin-block-end: 1.1rem;
  border-block-end: 1px solid rgba(253,243,231,0.14);
}
.collab-count {
  font-size: 0.78rem; font-weight: 700; color: var(--gold-light);
  border: 1px solid rgba(217,191,135,0.4); border-radius: 999px;
  padding: 0.1rem 0.6rem;
}
.collab-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.collab-chip {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.4rem 1rem; border-radius: 999px;
  font-size: 0.92rem; color: var(--marble);
  background: rgba(253,243,231,0.06);
  border: 1px solid rgba(253,243,231,0.12);
  transition: transform 0.25s var(--ease), border-color 0.25s, background 0.25s;
}
.collab-chip.has-logo { padding-inline-start: 0.4rem; }
.collab-chip img {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  object-fit: cover; background: rgba(244,245,243,0.94);
}
.collab-chip:hover { transform: translateY(-2px); border-color: var(--gold-light); background: rgba(253,243,231,0.1); }
/* Our Clients — moving logo line */
.clients-line {
  position: relative; overflow: hidden; direction: ltr;
  margin-block: 0 2.4rem; padding-block: 0.6rem;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.clients-track {
  display: flex; width: max-content; list-style: none;
  animation: clients-scroll 70s linear infinite;
}
.clients-line:hover .clients-track { animation-play-state: paused; }
.client-logo { flex: none; margin-inline-end: 1.2rem; }
.client-logo img {
  display: block; width: 72px; height: 72px; border-radius: 50%;
  border: 2px solid rgba(253,243,231,0.18);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
@keyframes clients-scroll { to { transform: translateX(-50%); } }
@media (max-width: 760px) { .client-logo img { width: 58px; height: 58px; } }
@media (prefers-reduced-motion: reduce) { .clients-track { animation: none; } .clients-line { overflow-x: auto; } }

@media (max-width: 760px) {
  .collab-tabs { flex-wrap: nowrap; overflow-x: auto; padding-block-end: 0.4rem; scrollbar-width: none; }
  .collab-tab { flex: none; }
  .collab-chip { font-size: 0.86rem; padding-block: 0.32rem; }
}

/* ═══════════════ NEWSLETTERS — أخبار المواهب الأسبوعية ═══════════════ */
.newsletters {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #142019 0%, var(--pine-ink) 100%);
}
.newsletters .container { position: relative; z-index: 1; }
.newsletters .eyebrow { color: var(--mist); }
.newsletters h2 { color: var(--marble); }
.newsletters .section-sub { color: var(--mist); max-width: 34rem; margin-block-end: 2.5rem; }

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.news-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  transition: transform 0.4s var(--ease), box-shadow 0.4s;
}
.news-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(27,42,37,0.18); }
.news-card-media { position: absolute; inset: 0; }
.news-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform 0.6s var(--ease); }
.news-card:hover .news-card-media img { transform: scale(1.06); }
.news-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(transparent 35%, rgba(27,42,37,0.9));
}
.news-card-date {
  position: absolute; z-index: 2;
  inset-block-start: 1rem; inset-inline-start: 1rem;
  background: var(--gold);
  color: var(--pine-ink);
  font-family: var(--font-ar); font-weight: 700; font-size: 0.75rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}
.news-card h3 {
  position: absolute; z-index: 2;
  inset-block-end: 1.1rem; inset-inline: 1.1rem;
  font-family: var(--font-ar); font-weight: 700; font-size: 1.05rem;
  color: #fff; line-height: 1.5;
}

.news-grid .news-card:nth-child(1) { transition-delay: 0.05s; }
.news-grid .news-card:nth-child(2) { transition-delay: 0.16s; }
.news-grid .news-card:nth-child(3) { transition-delay: 0.27s; }
.js .news-grid .news-card.reveal { transform: translateY(28px) scale(0.95); }
.js .news-grid .news-card.reveal.in-view { transform: none; }

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

/* ── حالة "ترقبوا" المبدئية — تظهر بدل الشبكة لحين توفر محتوى فعلي ── */
.coming-soon {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  min-height: 12rem;
  margin-block-start: 1.5rem;
  border: 1px dashed rgba(253,243,231,0.22);
  border-radius: var(--radius);
  background: rgba(253,243,231,0.06);
}
.coming-soon-text {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: var(--gold-light);
  letter-spacing: 0.02em;
}

/* ═══════════════ TALENT SUPPORT — دعم المواهب ═══════════════ */
.talent-support {
  position: relative; overflow: hidden;
  background: var(--pine-ink);
  color: var(--marble);
}
.support-blob {
  position: absolute; z-index: 0;
  width: 380px; height: 380px;
  inset-block-start: -120px; inset-inline-end: -110px;
  background: radial-gradient(circle at 35% 35%, var(--gold), transparent 72%);
  opacity: 0.16;
  filter: blur(4px);
  animation: blob-morph 15s ease-in-out infinite;
  pointer-events: none;
}
.talent-support .container { position: relative; z-index: 1; }

.support-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.support-intro .eyebrow { color: var(--mist); }
.support-intro h2 {
  font-family: var(--font-ar); font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.2rem);
  text-transform: none;
  margin-block-end: 1.1rem;
}
.support-intro h2::after { background: linear-gradient(90deg, var(--gold), var(--gold-light)); }
.support-intro > p { color: var(--mist); font-size: 1.05rem; max-width: 30rem; margin-block-end: 1.6rem; }
.support-points { list-style: none; display: grid; gap: 1.2rem; margin-block-start: 0.4rem; }
.support-points li {
  position: relative;
  padding-inline-start: 1.7rem;
}
[dir="rtl"] .support-points li { padding-inline-start: 0; padding-inline-end: 1.7rem; }
.support-points li::before {
  content: "✦";
  position: absolute; inset-inline-start: 0; inset-block-start: 0.15em;
  color: var(--gold);
  font-size: 0.9em;
}
[dir="rtl"] .support-points li::before { inset-inline-start: auto; inset-inline-end: 0; }
.support-point-title {
  display: block;
  font-family: var(--font-ar); font-weight: 700;
  color: var(--marble);
  font-size: 1.02rem;
  margin-block-end: 0.25rem;
}
.support-point-desc {
  display: block;
  color: var(--mist);
  font-size: 0.92rem;
  line-height: 1.7;
}

.support-card {
  background: var(--marble);
  border-radius: calc(var(--radius) + 8px);
  padding: clamp(2rem, 5vw, 2.6rem);
  color: var(--pine-ink);
  box-shadow: 0 30px 70px rgba(0,0,0,0.35);
}
.support-card h3 { font-family: var(--font-ar); font-weight: 700; font-size: 1.4rem; margin-block-end: 0.5rem; }
.support-card > p { color: var(--sage); margin-block-end: 1.6rem; }
.support-contact-link {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 1rem 1.2rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  color: var(--pine-ink);
  text-decoration: none;
  font-family: var(--font-ar); font-weight: 700;
  margin-block-end: 0.85rem;
  transition: transform 0.25s var(--ease), border-color 0.25s, background 0.25s;
}
.support-contact-link:last-child { margin-block-end: 0; }
.support-contact-link:hover { transform: translateY(-2px); border-color: var(--gold-light); background: var(--cream); }
.support-contact-link .icon { width: 22px; height: 22px; flex: none; color: var(--pine); }

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

/* ═══════════════ CTA BAND ═══════════════ */
.cta-band {
  display: block; overflow: hidden;
  background: var(--pine); color: var(--marble);
  text-decoration: none;
  padding-block: clamp(1.2rem, 3vw, 2rem);
}
.cta-track { color: var(--marble); font-weight: 700; font-size: clamp(1.8rem, 5vw, 3.4rem); animation-duration: 22s; }
.cta-track [lang="ar"] { color: var(--mist); }
.cta-band:hover .cta-track { animation-play-state: paused; }

/* ═══════════════ CONTACT ═══════════════ */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
.contact-intro > p { color: var(--sage); margin-block-end: 1.8rem; max-width: 26rem; }
.contact-social { display: grid; gap: 0.8rem; }
.contact-social a {
  display: inline-flex; align-items: center; gap: 0.7rem;
  color: var(--pine-ink); text-decoration: none; font-weight: 500;
  transition: color 0.25s;
}
.contact-social a:hover { color: var(--pine); }
.contact-form {
  display: grid; gap: 1.3rem;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: 0 24px 60px rgba(27, 42, 37, 0.08);
}
.field { display: grid; gap: 0.45rem; }
.field label { font-size: 0.85rem; font-weight: 700; color: var(--sage); }
.field input, .field textarea {
  font: inherit; color: var(--pine-ink);
  background: var(--marble);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.field input::placeholder, .field textarea::placeholder { color: #8b988f; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--pine);
  box-shadow: 0 0 0 3px rgba(46, 70, 63, 0.18);
}
.field textarea { resize: vertical; min-height: 8rem; }
.field.invalid input, .field.invalid textarea { border-color: #b3402a; }
.field-error { min-height: 1.1em; font-size: 0.85rem; color: #9e3520; }
.form-status { font-weight: 500; min-height: 1.4em; }
.form-status.ok { color: var(--pine); }
.form-status.err { color: #9e3520; }
.hp-field {
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ═══════════════ FOOTER ═══════════════ */
.site-footer { background: var(--pine-ink); color: var(--marble); padding-block: 3rem 2rem; overflow: hidden; }
.footer-mega {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(3.4rem, 13vw, 11rem);
  line-height: 0.95; text-transform: uppercase;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 245, 243, 0.25);
  user-select: none;
  margin-block-end: 2.5rem;
  white-space: nowrap;
}
.footer-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding-block: 1.5rem;
  border-block: 1px solid var(--line-dark);
}
.site-footer .logo, .site-footer .logo-text { color: var(--marble); }
.site-footer .logo-text sup { color: var(--mist); }
.footer-tag { color: var(--mist); font-size: 0.95rem; }
.footer-social { display: flex; gap: 1.1rem; }
.footer-social a { color: var(--mist); transition: color 0.25s, transform 0.25s var(--ease); }
.footer-social a:hover { color: var(--marble); transform: translateY(-2px); }
.footer-legal { color: var(--mist); font-size: 0.85rem; text-align: center; margin-block-start: 1.5rem; }

/* ═══════════════ TALENT MODAL ═══════════════ */
.tmodal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 1rem; }
.tmodal[hidden] { display: none; }
.tmodal-backdrop { position: absolute; inset: 0; background: rgba(27, 42, 37, 0.65); backdrop-filter: blur(6px); }
.tmodal-card {
  position: relative;
  width: min(26rem, 100%);
  background: var(--marble);
  border-radius: calc(var(--radius) + 8px);
  padding: 2.4rem 1.8rem 1.6rem;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  animation: tmodal-in 0.35s var(--ease);
}
@keyframes tmodal-in { from { opacity: 0; transform: translateY(24px) scale(0.97); } to { opacity: 1; transform: none; } }
.tmodal-close {
  position: absolute; inset-block-start: 0.8rem; inset-inline-start: 0.8rem;
  width: 2.4rem; height: 2.4rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--pine-ink);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.tmodal-close:hover { background: var(--pine); color: var(--marble); }
.tmodal-avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover; object-position: center 30%;
  margin-inline: auto;
  border: 3px solid var(--pine);
  margin-block-end: 0.9rem;
}
.tmodal-name { font-family: var(--font-ar); font-weight: 700; font-size: 1.5rem; color: var(--pine-ink); }
.tmodal-role { font-family: var(--font-ar); color: var(--sage); margin-block-end: 1.4rem; }
.tmodal-links { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; margin-block-end: 1rem; }
.tmodal-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.65rem 1.2rem;
  border: 1px solid var(--pine); border-radius: 999px;
  color: var(--pine-ink); text-decoration: none;
  font-family: var(--font-ar); font-weight: 700; font-size: 0.95rem;
  transition: background 0.25s, color 0.25s, transform 0.25s var(--ease);
}
.tmodal-link:hover { background: var(--pine); color: var(--marble); transform: translateY(-2px); }
.tmodal-link[hidden] { display: none; }
.tmodal-link .icon-img { height: 16px; width: auto; flex: none; border-radius: 2px; }
.tmodal-wa {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  width: 100%;
  padding: 1rem;
  background: #25d366;
  color: #06281a;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--font-ar); font-weight: 700; font-size: 1.05rem;
  transition: transform 0.25s var(--ease), box-shadow 0.25s;
}
.tmodal-wa:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(37, 211, 102, 0.4); }
.tmodal-wa .icon { width: 24px; height: 24px; }
.tmodal-wa[hidden] { display: none; }
.tmodal-hint { font-family: var(--font-ar); color: var(--sage); font-size: 0.82rem; margin-block-start: 0.7rem; }
.tmodal-legal {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem;
  margin-block-start: 1rem;
  padding-block-start: 0.9rem;
  border-top: 1px solid var(--line);
}
.tmodal-legal-text { font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.02em; color: var(--sage); text-transform: uppercase; }
.tmodal-legal-rep { font-family: var(--font-body); font-size: 0.68rem; letter-spacing: 0.01em; color: var(--pine-ink); opacity: 0.75; }
.tmodal-legal-logo { height: 44px; width: auto; flex: none; margin-block-start: 0.3rem; }
@media (max-width: 560px) {
  .tmodal { padding: 0; align-items: end; }
  .tmodal-card { width: 100%; border-end-start-radius: 0; border-end-end-radius: 0; animation-name: tmodal-up; }
  @keyframes tmodal-up { from { transform: translateY(100%); } to { transform: none; } }
}

/* ═══════════════ SCROLL REVEAL + WORD SPLIT ═══════════════ */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.js .reveal.in-view { opacity: 1; transform: none; }

/* بطاقات المواهب: دخول "pop" خفيف ومرن (bounce بسيط) بدل الانزلاق
   العادي — تكبر شوي زيادة عن حجمها الطبيعي ثم ترجع، بدل التلاشي فقط. */
.js .talent-grid .tile.reveal {
  opacity: 0;
  transform: translateY(18px) scale(0.86);
  transition: opacity 0.55s var(--ease), transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.js .talent-grid .tile.reveal.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* split headlines: the element shows instantly, its WORDS animate in */
.js .reveal.split { opacity: 1; transform: none; }
.w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.7em) rotate(3deg);
  transition: opacity 0.55s var(--ease), transform 0.65s var(--ease);
  transition-delay: calc(var(--wi, 0) * 0.05s);
}
.in-view .w { opacity: 1; transform: none; }
.hero-title .line-1 { transition-delay: 0.05s; }
.hero-title .line-2 { transition-delay: 0.15s; }
.hero-title .line-3 { transition-delay: 0.25s; }
.hero-foot { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .w { opacity: 1; transform: none; transition: none; }
  .marquee-track, .cta-track, .float-logo, .hero-glow, .hero-sparks .spark, .illo-q, .illo-zz { animation: none; }
  .btn::before { display: none; }
  .btn:hover, .tile:hover, .tile:hover img, .service-card:hover, .qpanel:hover { transform: none; }
  .tmodal-card { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width: 980px) {
  .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .creators-grid { grid-template-columns: 1fr; }
  .qpanel { min-height: 0; }
}
@media (max-width: 760px) {
  .talent-grid { grid-template-columns: 1fr 1fr; }
  .line-2 { padding-inline-start: 0.8rem; }
  .stats-grid { grid-template-columns: 1fr; gap: 2rem; }
  .nav-toggle { display: flex; }
  .nav-menu {
    position: absolute; inset-inline: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--pine-ink);
    border-block-end: 1px solid rgba(253,243,231,0.14);
    padding: 0.5rem 1.5rem 1.5rem;
    display: none;
  }
  .nav-menu.open { display: flex; }
  .nav-menu li { border-block-start: 1px solid rgba(253,243,231,0.14); }
  .nav-menu li:first-child { border: 0; }
  .nav-menu a { display: block; padding-block: 1rem; font-family: var(--font-ar); font-size: 1.25rem; font-weight: 700; }
  .nav-social { padding-block: 1.1rem; }
  .nav-cta a.btn { display: inline-flex; margin-block-start: 0.8rem; }
}
@media (max-width: 440px) {
  .about-points li { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* ═══════════════ GREEN BOOST — لمسات خضراء إضافية بالثيم ═══════════════ */
:root { --marble-green: #eef2ee; }
h2::after {
  content: "";
  display: block;
  width: 3.2rem; height: 3px;
  margin-block-start: 0.9rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pine), var(--gold));
}
.creators-title::after { background: linear-gradient(90deg, var(--mist), var(--gold)); }
.hero { background: var(--pine-ink); }

/* ═══════════════ TRUST SECTION — موك-أب جوال ولابتوب ثلاثي الأبعاد ═══════════════ */
/* ── قسم الثقة: خلفية داكنة توحي بواجهة تطبيق مضيئة (بدل الرخام
     الفاتح) — نفس روح مراجع الصور المرسلة: أجهزة تطفو فوق خلفية
     ليلية عميقة مع توهجات ذهبية/خضراء وشبكة نقاط خفيفة. ── */
.trust {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 55% at 18% 12%, rgba(168,132,59,0.16), transparent 60%),
    radial-gradient(ellipse 55% 60% at 85% 85%, rgba(46,70,63,0.55), transparent 65%),
    linear-gradient(155deg, var(--pine-ink) 0%, #142019 55%, var(--pine-deep) 100%);
}
.trust::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  opacity: 0.5;
  background-image:
    radial-gradient(rgba(244,245,243,0.09) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, #000 0%, transparent 75%);
  pointer-events: none;
}
.trust .container { position: relative; z-index: 1; }
.trust .eyebrow { color: var(--mist); }
.trust h2 { color: var(--marble); }
.trust-blob {
  position: absolute; z-index: 0;
  filter: blur(1px);
  opacity: 0.5;
  animation: blob-morph 14s ease-in-out infinite;
  pointer-events: none;
}
.trust-blob-a {
  width: 420px; height: 420px;
  inset-block-start: -110px; inset-inline-start: -130px;
  background: radial-gradient(circle at 30% 30%, var(--pine), var(--pine-deep));
  opacity: 0.6;
}
.trust-blob-b {
  width: 320px; height: 320px;
  inset-block-end: -90px; inset-inline-end: -110px;
  background: radial-gradient(circle at 60% 40%, var(--gold), transparent 70%);
  opacity: 0.28;
  animation-delay: -6s;
}
@keyframes blob-morph {
  0%, 100% { border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%; transform: translate(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px)) rotate(0deg) scale(1); }
  33%      { border-radius: 65% 35% 45% 55% / 35% 65% 35% 65%; transform: translate(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px)) rotate(8deg) scale(1.05); }
  66%      { border-radius: 35% 65% 55% 45% / 60% 40% 60% 40%; transform: translate(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px)) rotate(-6deg) scale(0.97); }
}

.trust-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  margin-block-start: clamp(2.5rem, 6vw, 4rem);
}

/* ── موك-أب الجوال ── */
.phone-wrap {
  position: relative;
  display: flex; justify-content: center;
  perspective: 1400px;
  transition: transform 0.15s var(--ease);
}
.phone-wrap::after {
  content: "";
  position: absolute; z-index: 0;
  inset-block-end: 6%; inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 70%; height: 60px;
  background: radial-gradient(ellipse at center, rgba(168,132,59,0.35), transparent 72%);
  filter: blur(10px);
}
.phone-frame {
  position: relative;
  width: 230px; height: 470px;
  background: #0d1210;
  border-radius: 38px;
  padding: 10px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 70px rgba(168,132,59,0.18), inset 0 0 0 2px rgba(255,255,255,0.07);
  transform-style: preserve-3d;
  transform: rotateY(-10deg) rotateX(4deg) rotateZ(-2deg);
  animation: phone-float 9s ease-in-out infinite;
}
/* عوم + دوران خفيف ولطيف (wobble) حول محور Y ضمن نفس الحركة —
   يمر بدورة كاملة بهدوء بدل دوران سريع مستمر، حتى تبقى الشاشة
   مقروءة أغلب الوقت وتظهر الحافة الجانبية للجهاز بلمسة أنيقة. */
@keyframes phone-float {
  0%, 100% { transform: rotateY(-10deg) rotateX(4deg) rotateZ(-2deg) translateY(0); }
  22%      { transform: rotateY(-8deg) rotateX(3deg) rotateZ(-1deg) translateY(-14px); }
  55%      { transform: rotateY(-10deg) rotateX(4deg) rotateZ(-2deg) translateY(0); }
  72%      { transform: rotateY(70deg) rotateX(2deg) rotateZ(0deg) translateY(-6px); }
  84%      { transform: rotateY(-28deg) rotateX(3deg) rotateZ(-1deg) translateY(-10px); }
  92%      { transform: rotateY(-10deg) rotateX(4deg) rotateZ(-2deg) translateY(0); }
}
.phone-notch {
  position: relative; z-index: 2;
  width: 64px; height: 16px;
  margin-inline: auto;
  background: #0d1210;
  border-radius: 0 0 12px 12px;
}
.phone-screen {
  position: absolute; inset: 10px; top: 10px;
  border-radius: 30px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--pine) 0%, var(--pine-deep) 60%, var(--pine-ink) 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
  padding-inline: 1.2rem;
}
.phone-screen::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 18%, rgba(255,255,255,0.09), transparent 60%);
}
.phone-logo {
  position: relative; z-index: 1;
  width: 58px; height: 58px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  object-fit: cover;
  background: var(--marble);
  margin-block-end: 0.4rem;
}
.phone-stat {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-weight: 900;
  font-size: 2.3rem; line-height: 1;
  color: var(--marble);
  display: inline-flex; align-items: baseline; gap: 0.08em;
}
.phone-stat .stat-plus { color: var(--gold); font-size: 0.55em; }
.phone-stat-label {
  position: relative; z-index: 1;
  font-size: 0.72rem; letter-spacing: 0.02em;
  color: var(--mist); text-align: center; line-height: 1.6;
}
.phone-badge {
  position: relative; z-index: 1;
  margin-block-start: 0.7rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--gold); border-radius: 999px;
  color: var(--gold); font-size: 0.72rem; font-weight: 700;
}
.float-spark {
  position: absolute; color: var(--gold);
  animation: spark-float 6s ease-in-out infinite;
}
.fs1 { inset-block-start: 10%; inset-inline-end: -6%; animation-delay: 0.6s; }
.fs2 { inset-block-end: 16%; inset-inline-start: -8%; animation-delay: 2.2s; opacity: 0.7; }

/* ── موك-أب اللابتوب ثلاثي الأبعاد ── */
.laptop-wrap {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  perspective: 1600px;
  transition: transform 0.15s var(--ease);
}
.laptop {
  position: relative;
  width: min(360px, 90%);
  transform-style: preserve-3d;
  transform: rotateX(10deg) rotateY(-14deg);
  animation: laptop-float 6s ease-in-out infinite;
}
@keyframes laptop-float {
  0%, 100% { transform: rotateX(10deg) rotateY(-14deg) translateY(0); }
  50%      { transform: rotateX(8deg) rotateY(-12deg) translateY(-10px); }
}
.laptop-screen {
  position: relative;
  width: 100%; aspect-ratio: 16 / 10.4;
  background: #131313;
  border-radius: 14px 14px 3px 3px;
  padding: 9px 9px 16px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 80px rgba(168,132,59,0.16);
}
.laptop-screen::before {
  content: ""; position: absolute;
  inset-block-start: 4px; inset-inline-start: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: #3a3a3a;
}
.laptop-inner {
  position: absolute; inset: 9px 9px 16px;
  border-radius: 6px; overflow: hidden;
  background: linear-gradient(160deg, var(--pine) 0%, var(--pine-deep) 55%, var(--pine-ink) 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
/* ── تأثير "قفل ← فتح" على شاشة اللابتوب: تبدأ الشاشة مقفلة بأيقونة
   قفل، ثم تُفتح (تلاشي + دوران بسيط للأيقونة) ليظهر بعدها محتوى
   "Trust us" — بشكل يتكرر كل دورة تليق بجو "منصة موثوقة". ── */
.laptop-lock {
  position: absolute; z-index: 2;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-light);
  background: radial-gradient(circle at 50% 50%, rgba(27,42,37,0.7), rgba(19,19,19,0.92));
  animation: laptop-lock-cycle 6s ease-in-out infinite;
}
.laptop-lock-icon { animation: laptop-lock-icon-cycle 6s ease-in-out infinite; }
@keyframes laptop-lock-cycle {
  0%, 38%  { opacity: 1; pointer-events: auto; }
  55%, 100% { opacity: 0; pointer-events: none; }
}
@keyframes laptop-lock-icon-cycle {
  0%, 30%  { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 8px rgba(168,132,59,0.6)); }
  40%      { transform: scale(1.15) rotate(-8deg); }
  48%      { transform: scale(0.85) rotate(10deg); filter: drop-shadow(0 0 14px rgba(168,132,59,0.9)); }
  55%, 100% { transform: scale(0.6) rotate(0deg); opacity: 0; }
}
.laptop-text {
  font-family: var(--font-display); font-weight: 900; letter-spacing: 0.03em;
  font-size: clamp(1.5rem, 4vw, 2.3rem);
  color: var(--marble);
  opacity: 0;
  animation: trust-pulse 2.6s ease-in-out infinite, laptop-reveal 6s ease-in-out infinite;
}
@keyframes trust-pulse {
  0%, 100% { text-shadow: 0 0 14px rgba(168,132,59,0.5), 0 0 30px rgba(46,70,63,0.45); }
  50%      { text-shadow: 0 0 26px rgba(168,132,59,0.9), 0 0 52px rgba(46,70,63,0.75); }
}
@keyframes laptop-reveal {
  0%, 52%  { opacity: 0; transform: translateY(6px) scale(0.96); }
  68%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}
.laptop-text-ar {
  font-family: var(--font-ar); color: var(--mist);
  font-size: 0.9rem; margin-block-start: 0.3rem; letter-spacing: 0.02em;
  opacity: 0;
  animation: laptop-reveal 6s ease-in-out infinite;
}
.laptop-scanline {
  position: absolute; inset-inline: 0; inset-block-start: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(168,132,59,0.85), transparent);
  animation: scan 3.4s linear infinite;
  opacity: 0.75;
}
@keyframes scan { 0% { inset-block-start: 0%; } 100% { inset-block-start: 100%; } }
.laptop-base {
  height: 13px;
  background: linear-gradient(180deg, #2c2c2c, #141414);
  border-radius: 0 0 9px 9px;
  transform: rotateX(78deg);
  transform-origin: top;
  margin-block-start: -1px;
}
.laptop-reflection {
  width: min(300px, 78%);
  height: 36px;
  margin-block-start: -4px;
  background: radial-gradient(ellipse at center, rgba(168,132,59,0.3), transparent 72%);
  filter: blur(6px);
}

@media (max-width: 900px) {
  .trust-grid { grid-template-columns: 1fr; gap: 3.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .trust-blob, .phone-frame, .laptop, .laptop-text, .laptop-text-ar, .laptop-scanline, .laptop-lock, .laptop-lock-icon, .float-spark { animation: none; }
  .laptop-lock { display: none; }
  .laptop-text, .laptop-text-ar { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   CREATIVE SCROLL CHOREOGRAPHY (v5)
   مفردات حركة إضافية: انزلاق جانبي، تكبير، دوران، قصّ (clip-path)،
   تتالي (stagger) للمجموعات، خط عنوان يُرسم، وحركة parallax خفيفة
   خلف قسم الثقة. كل شي يحترم prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════ */

/* ── انزلاق من البداية (يمين بالعربي RTL) ── */
.js .reveal-left {
  opacity: 0;
  transform: translateX(-46px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
[dir="rtl"] .js .reveal-left { transform: translateX(46px); }
.js .reveal-left.in-view { opacity: 1; transform: none; }

/* ── انزلاق من النهاية ── */
.js .reveal-right {
  opacity: 0;
  transform: translateX(46px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
[dir="rtl"] .js .reveal-right { transform: translateX(-46px); }
.js .reveal-right.in-view { opacity: 1; transform: none; }

/* ── تكبير ناعم من الداخل ── */
.js .reveal-scale {
  opacity: 0;
  transform: scale(0.86) translateY(18px);
  transition: opacity 0.75s var(--ease), transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.js .reveal-scale.in-view { opacity: 1; transform: none; }

/* ── قصّ/كشف تدريجي (clip-path) — يليق بعناوين البيانات الكبيرة ── */
.js .reveal-clip {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity 0.4s ease, clip-path 1s var(--ease);
}
[dir="rtl"] .js .reveal-clip { clip-path: inset(0 0 0 100%); }
.js .reveal-clip.in-view { opacity: 1; clip-path: inset(0 0 0 0); }

/* ── تتالي: المجموعات (بطاقات/صور/بنود) تدخل وحدة بعد وحدة ─────
   nth-child يحسب التأخير تلقائيًا بدون أي جافاسكربت إضافي.        */
.stats-grid .stat.reveal,
.creators-grid .qpanel.reveal,
.talent-grid .tile.reveal,
.about-points.reveal li {
  transition-delay: 0s;
}
.stats-grid .stat:nth-child(1) { transition-delay: 0.05s; }
.stats-grid .stat:nth-child(2) { transition-delay: 0.18s; }
.stats-grid .stat:nth-child(3) { transition-delay: 0.31s; }

.creators-grid .qpanel:nth-child(1) { transition-delay: 0.05s; }
.creators-grid .qpanel:nth-child(2) { transition-delay: 0.2s; }
.creators-grid .qpanel:nth-child(3) { transition-delay: 0.35s; }

.talent-grid .tile:nth-child(1)  { transition-delay: 0.02s; }
.talent-grid .tile:nth-child(2)  { transition-delay: 0.08s; }
.talent-grid .tile:nth-child(3)  { transition-delay: 0.14s; }
.talent-grid .tile:nth-child(4)  { transition-delay: 0.2s; }
.talent-grid .tile:nth-child(5)  { transition-delay: 0.26s; }
.talent-grid .tile:nth-child(6)  { transition-delay: 0.32s; }
.talent-grid .tile:nth-child(7)  { transition-delay: 0.38s; }
.talent-grid .tile:nth-child(8)  { transition-delay: 0.44s; }
.talent-grid .tile:nth-child(9)  { transition-delay: 0.5s; }
.talent-grid .tile:nth-child(10) { transition-delay: 0.56s; }
.talent-grid .tile:nth-child(11) { transition-delay: 0.62s; }

.about-points.reveal li:nth-child(1) { transition-delay: 0.1s; }
.about-points.reveal li:nth-child(2) { transition-delay: 0.22s; }
.about-points.reveal li:nth-child(3) { transition-delay: 0.34s; }

/* بطاقات الأسئلة الثلاثة تدخل بميلان خفيف يعتدل — إحساس "تستقر مكانها" */
.js .creators-grid .qpanel.reveal {
  transform: translateY(34px) rotate(-3deg) scale(0.94);
}
.js .creators-grid .qpanel:nth-child(2).reveal { transform: translateY(34px) rotate(0deg) scale(0.94); }
.js .creators-grid .qpanel:nth-child(3).reveal { transform: translateY(34px) rotate(3deg) scale(0.94); }
.js .creators-grid .qpanel.reveal.in-view { transform: none; }

/* شبكة المواهب: تبني نفسها كموزاييك — تكبير خفيف بدل الانزلاق العمودي فقط */
.js .talent-grid .tile.reveal {
  transform: translateY(20px) scale(0.9);
}
.js .talent-grid .tile.reveal.in-view { transform: none; }

/* ── خط يُرسم تحت العناوين الكبيرة عند دخولها الشاشة ── */
h2.reveal::after {
  width: 0;
  transition: width 1s var(--ease) 0.25s;
}
h2.reveal.in-view::after { width: 3.2rem; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal-left, .js .reveal-right, .js .reveal-scale, .js .reveal-clip,
  .js .creators-grid .qpanel.reveal, .js .talent-grid .tile.reveal {
    opacity: 1; transform: none; clip-path: none; transition: none;
  }
  h2.reveal::after { width: 3.2rem; transition: none; }
  .trust-blob-a, .trust-blob-b { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   MOUSE-REACTIVE MOTION (v6)
   الحركة الحين تتفاعل مع الفأرة أيضًا، مو بس مع التمرير:
   - توهج يتبع المؤشر في الهيرو
   - أشكال قسم الثقة (blobs) تنجذب قليلًا نحو موضع المؤشر
   - بطاقات الأسئلة الثلاث وصور المواهب تميل بخفة مع حركة الفأرة
     (نفس أسلوب ميلان الجوال/اللابتوب، بمدى أخف يلائم حجمها)
   كله يعمل على أجهزة الفأرة فقط (hover:hover) ويتوقف تمامًا مع
   إعداد تقليل الحركة.
   ═══════════════════════════════════════════════════════════════ */

.hero-cursor-glow {
  position: absolute; z-index: 0;
  inset-block-start: 0; inset-inline-start: 0;
  width: 480px; height: 480px;
  margin-inline-start: -240px; margin-block-start: -240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168,132,59,0.16), rgba(46,70,63,0.1) 45%, transparent 72%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.12s linear;
  will-change: transform;
}
.hero.mouse-active .hero-cursor-glow { opacity: 1; }

/* بطاقات الأسئلة وصور المواهب: الميلان الفعلي يُضبط عبر transform
   مضمّن من JS عند تحريك الفأرة فوقها؛ الانتقال السلس بينه وبين حالة
   الاستقرار يعتمد على transition الموجود أصلًا على .qpanel/.tile. */
.js .qpanel, .js .tile { transform-style: preserve-3d; }

@media (prefers-reduced-motion: reduce) {
  .hero-cursor-glow { display: none; }
}
@media (hover: none) {
  .hero-cursor-glow { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   MODERN EXTRAS (v7)
   1. مؤشر مخصص (نقطة + حلقة) يكبر فوق العناصر القابلة للنقر
   2. أزرار "مغناطيسية" تنجذب بخفة نحو مؤشر الفأرة القريب
   3. مؤشّر تنقّل نشط (خط متحرك تحت القسم الحالي أثناء التمرير)
   4. زر "عودة للأعلى" بحلقة تقدّم دائرية
   5. تموّج (ripple) عند الضغط على الأزرار الأساسية
   6. كشف صور المواهب بستارة منزلقة بدل الظهور المسطّح
   7. طبقة Aurora متدرجة تدور ببطء خلف الهيرو
   كل شيء يتوقف تلقائيًا مع تفضيل تقليل الحركة، ولا يظهر على اللمس.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1 · مؤشر مخصص ── */
@media (hover: hover) and (pointer: fine) {
  .js.cursor-fx-on, .js.cursor-fx-on * { cursor: none !important; }
}
.cursor-dot, .cursor-ring {
  position: fixed; z-index: 600;
  inset-block-start: 0; inset-inline-start: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.cursor-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.cursor-ring {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(46, 70, 63, 0.55);
  transition: opacity 0.25s ease, width 0.25s var(--ease), height 0.25s var(--ease), border-color 0.25s ease, background 0.25s ease;
}
.cursor-fx-on .cursor-dot,
.cursor-fx-on .cursor-ring { opacity: 1; }
.cursor-ring.cursor-hover {
  width: 54px; height: 54px;
  border-color: var(--gold);
  background: rgba(168, 132, 59, 0.08);
}
.cursor-ring.cursor-hover-dark { border-color: var(--marble); background: rgba(244,245,243,0.12); }

/* ── 2 · أزرار مغناطيسية (الميلان الفعلي يُضبط عبر transform من JS) ── */
.magnetic { transition: transform 0.2s ease-out; will-change: transform; }

/* ── 3 · مؤشّر التنقّل النشط ── */
.nav-menu a { position: relative; }
.nav-menu a::after {
  content: "";
  position: absolute; inset-inline: 0; inset-block-end: -6px;
  height: 2px;
  background: var(--pine);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s var(--ease);
}
.nav-menu a:hover::after,
.nav-menu a.active::after { transform: scaleX(1); }
.nav-menu a.active { color: var(--pine); }

/* ── 4 · زر العودة للأعلى ── */
.back-to-top {
  position: fixed;
  inset-block-end: clamp(1.2rem, 4vw, 2rem);
  inset-inline-end: clamp(1.2rem, 4vw, 2rem);
  z-index: 250;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: var(--marble);
  box-shadow: 0 8px 24px rgba(27,42,37,0.2);
  cursor: pointer;
  color: var(--pine);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px) scale(0.9);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.25s, visibility 0s linear 0.3s;
}
.back-to-top.show {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.25s;
}
.back-to-top:hover { box-shadow: 0 12px 30px rgba(27,42,37,0.3); }
.btt-ring { position: absolute; inset: 0; width: 44px; height: 44px; transform: rotate(-90deg); }
.btt-ring-track, .btt-ring-fill {
  fill: none; stroke-width: 2.4;
  cx: 22; cy: 22; r: 19;
}
.btt-ring-track { stroke: var(--line); }
.btt-ring-fill {
  stroke: var(--gold);
  stroke-linecap: round;
  stroke-dasharray: 119.4;
  stroke-dashoffset: 119.4;
  transition: stroke-dashoffset 0.1s linear;
}
.btt-arrow { position: relative; width: 18px; height: 18px; }

/* ── 5 · تموّج عند الضغط على الأزرار ── */
.btn { position: relative; }
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  transform: scale(0);
  opacity: 0.6;
  animation: ripple-anim 0.6s ease-out forwards;
  pointer-events: none;
}
.btn-outline .ripple { background: rgba(46,70,63,0.25); }
@keyframes ripple-anim {
  to { transform: scale(2.6); opacity: 0; }
}

/* ── 6 · كشف صور المواهب بستارة منزلقة ── */
.tile-media { position: absolute; inset: 0; }
.tile-curtain {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, var(--pine) 0%, var(--pine-deep) 100%);
  z-index: 2;
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 0.85s var(--ease);
}
[dir="rtl"] .tile-curtain { transform-origin: left; }
.js .tile.reveal .tile-curtain { transform: scaleX(1); }
.js .tile.reveal.in-view .tile-curtain { transform: scaleX(0); }

/* ── 7 · طبقة Aurora خلف الهيرو ── */
.hero-aurora {
  position: absolute; z-index: 0;
  inset-block-start: -30%; inset-inline-start: 50%;
  width: 130vw; height: 130vw; max-width: 90rem; max-height: 90rem;
  transform: translateX(-50%);
  background: conic-gradient(from 0deg,
    rgba(46,70,63,0.10),
    rgba(168,132,59,0.09),
    rgba(46,70,63,0.05),
    rgba(168,132,59,0.10),
    rgba(46,70,63,0.10));
  filter: blur(60px);
  opacity: 0.7;
  pointer-events: none;
  animation: aurora-spin 40s linear infinite;
  mix-blend-mode: multiply;
}
@keyframes aurora-spin {
  from { transform: translateX(-50%) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-dot, .cursor-ring { display: none; }
  .hero-aurora { animation: none; }
  .js .tile.reveal .tile-curtain,
  .js .tile.reveal.in-view .tile-curtain { transform: none; transition: none; opacity: 0; }
  .btn .ripple { display: none; }
}
@media (hover: none) {
  .cursor-dot, .cursor-ring { display: none; }
}