/* ══════════════════════════════════════════════════
   منجد الواوي — Portfolio
   Palette pulled from the source footage:
   golden-hour amber · studio black · taxi yellow
   ══════════════════════════════════════════════════ */

:root{
  --bg:        #08070A;
  --bg-2:      #0D0B11;
  --surface:   #141118;
  --text:      #F7F4EF;
  --muted:     rgba(247,244,239,.56);
  --faint:     rgba(247,244,239,.34);
  --line:      rgba(247,244,239,.10);
  --line-2:    rgba(247,244,239,.06);

  --gold:      #F2B33D;   /* غروب الفيديو */
  --taxi:      #FFC72C;   /* أصفر التاكسي */
  --glow:      rgba(242,179,61,.30);

  --ease:      cubic-bezier(.16,1,.3,1);
  --ease-2:    cubic-bezier(.22,1,.36,1);

  --wrap:      1180px;
  --pad:       clamp(20px, 5vw, 64px);

  --ar:  'Tajawal', system-ui, 'Segoe UI', sans-serif;
  --lat: 'Space Grotesk', ui-monospace, monospace;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--ar);
  font-weight:400;
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-locked{ overflow:hidden; height:100vh; }

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

::selection{ background:var(--gold); color:#000; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

/* أرقام وحروف لاتينية — خط منفصل، وهون بس بنستخدم tracking سالب */
.lat{
  font-family:var(--lat);
  font-weight:500;
  letter-spacing:-.02em;
  direction:ltr;
  unicode-bidi:isolate;
  display:inline-block;
}

/* ══════════════════════════════════════════════════
   PRELOADER — عدّاد أودومتر + كلمات متبدّلة
   + كشف الاسم بالسحب لفوق + ستارة بتنشق ٥ شرائح
   ══════════════════════════════════════════════════ */
.loader{ position:fixed; inset:0; z-index:9999; overflow:hidden; }

/* الشرائح — هي خلفية اللودر، وهي اللي بتنسحب بالنهاية */
.ldr__bands{ position:absolute; inset:0; display:flex; }
.ldr__bands i{
  flex:1; background:var(--bg);
  box-shadow:1px 0 0 var(--bg), -1px 0 0 var(--bg);  /* يمنع خيوط بين الشرائح */
  will-change:transform;
}

.ldr__mid{
  position:absolute; inset:0; z-index:2;
  display:grid; place-items:center; text-align:center; padding:0 6vw;
}

/* الكلمات المتبدّلة */
.ldr__cycle{ position:relative; height:1.6em; }
.ldr__cycle span{
  position:absolute; inset-inline:0; top:0;
  font-size:clamp(1.05rem,3vw,1.6rem); font-weight:500;
  color:var(--faint); letter-spacing:.16em;
  opacity:0; transform:translateY(14px);
  transition:opacity .32s var(--ease), transform .32s var(--ease);
}
.ldr__cycle span.is-on{ opacity:1; transform:none; }

/* كشف الاسم — كل كلمة بتطلع من صندوق مقصوص */
.ldr__name{
  position:absolute; inset-inline:0; top:50%; transform:translateY(-50%);
  display:flex; gap:.3em; justify-content:center; flex-wrap:wrap;
  opacity:0; pointer-events:none;
}
.ldr__name.is-on{ opacity:1; }
.ldr__ln{ display:block; overflow:hidden; }
.ldr__ln b{
  display:block; font-size:clamp(2rem,8vw,4.6rem); font-weight:900; line-height:1.25;
  transform:translateY(110%);
}
.ldr__ln:nth-child(2) b{ color:var(--gold); }

/* القدم: شريط + عدّاد */
.ldr__foot{
  position:absolute; z-index:2;
  inset-inline:var(--pad); bottom:clamp(26px,5vh,54px);
  display:flex; align-items:center; gap:16px;
}
.ldr__bar{ flex:1; height:1px; background:var(--line); overflow:hidden; }
.ldr__bar i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--gold),var(--taxi));
  box-shadow:0 0 12px var(--glow);
}
.ldr__num{
  font-size:clamp(1.6rem,5vw,2.6rem); font-weight:500;
  color:var(--text); font-variant-numeric:tabular-nums; line-height:1;
}
.ldr__num em{ font-style:normal; font-size:.42em; color:var(--faint); margin-inline-start:3px; }

@keyframes blurRise{
  from{ opacity:0; transform:translateY(24px); filter:blur(10px); }
  to  { opacity:1; transform:translateY(0);    filter:blur(0); }
}

/* ══════════ OVERLAYS ══════════ */
.grain{
  position:fixed; inset:0; z-index:60;
  width:100%; height:100%;
  opacity:.055; mix-blend-mode:overlay; pointer-events:none;
}
.scrollbar{
  position:fixed; top:0; inset-inline-start:0; z-index:70;
  height:2px; width:0%;
  background:linear-gradient(90deg,var(--gold),var(--taxi));
  pointer-events:none;
}
.cursor{
  position:fixed; top:0; left:0; z-index:9998;
  width:34px; height:34px; margin:-17px 0 0 -17px;
  border:1px solid rgba(247,244,239,.45); border-radius:50%;
  pointer-events:none; opacity:0;
  transition:width .3s var(--ease),height .3s var(--ease),
             margin .3s var(--ease),background .3s var(--ease),
             border-color .3s var(--ease),opacity .3s;
  display:grid; place-items:center;
}
.cursor span{
  width:4px; height:4px; border-radius:50%; background:var(--gold);
  transition:opacity .3s;
}
.cursor.is-hover{
  width:66px; height:66px; margin:-33px 0 0 -33px;
  background:rgba(242,179,61,.13); border-color:transparent;
}
.cursor.is-hover span{ opacity:0; }

/* ══════════ NAV ══════════ */
.nav{
  position:fixed; top:0; inset-inline:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:20px var(--pad);
  transition:background .45s var(--ease), backdrop-filter .45s, padding .45s var(--ease);
}
.nav.is-stuck{
  background:rgba(8,7,10,.72);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--line-2);
  padding-block:13px;
}
.nav__logo{
  display:flex; align-items:center; gap:9px;
  font-weight:800; font-size:1.02rem; letter-spacing:.01em;
}
.nav__dot{
  width:7px; height:7px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 0 0 var(--glow); animation:pulse 2.6s infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(242,179,61,.5); }
  50%    { box-shadow:0 0 0 9px rgba(242,179,61,0); }
}
.nav__links{ display:flex; gap:28px; font-size:.9rem; color:var(--muted); }
.nav__links a{ position:relative; transition:color .3s; }
.nav__links a::after{
  content:''; position:absolute; bottom:-5px; inset-inline:0;
  height:1px; background:var(--gold); transform:scaleX(0);
  transform-origin:right; transition:transform .45s var(--ease);
}
.nav__links a:hover{ color:var(--text); }
.nav__links a:hover::after{ transform:scaleX(1); }
.nav__cta{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 18px; border-radius:100px;
  font-size:.86rem; font-weight:700;
  background:var(--text); color:#0A0810;
  transition:transform .3s var(--ease), box-shadow .3s;
}
.nav__cta:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.45); }

.nav__right{ display:flex; align-items:center; gap:12px; }

/* ── همبرغر ── */
.burger{
  display:none; width:40px; height:40px; border-radius:12px;
  position:relative; flex:none;
  border:1px solid var(--line); background:rgba(255,255,255,.04);
}
.burger span{
  position:absolute; inset-inline:11px; height:1.5px; border-radius:2px;
  background:var(--text);
  transition:transform .45s var(--ease), opacity .25s, top .45s var(--ease);
}
.burger span:nth-child(1){ top:14px; }
.burger span:nth-child(2){ top:19px; }
.burger span:nth-child(3){ top:24px; }
.burger.is-open span:nth-child(1){ top:19px; transform:rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; transform:scaleX(.3); }
.burger.is-open span:nth-child(3){ top:19px; transform:rotate(-45deg); }

/* ── قائمة الموبايل ── */
.menu{
  position:fixed; inset:0; z-index:49;
  background:rgba(8,7,10,.97);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  display:flex; flex-direction:column; justify-content:center;
  padding:100px var(--pad) 40px;
  opacity:0; visibility:hidden;
  /* الإغلاق: نخفي بعد ما يخلص التلاشي. الفتح: نظهر فوراً */
  transition:opacity .5s var(--ease), visibility 0s linear .5s;
}
.menu.is-open{
  opacity:1; visibility:visible;
  transition:opacity .5s var(--ease), visibility 0s linear 0s;
}
.menu__links{ display:flex; flex-direction:column; gap:4px; }
.menu__links a{
  display:flex; align-items:baseline; gap:14px;
  padding:14px 0; border-bottom:1px solid var(--line-2);
  font-size:clamp(1.5rem,7vw,2.1rem); font-weight:800;
  opacity:0; transform:translateY(22px);
  transition:opacity .55s var(--ease), transform .55s var(--ease), color .3s;
}
.menu.is-open .menu__links a{ opacity:1; transform:none; }
.menu__links a i{ font-size:.7rem; color:var(--gold); opacity:.75; }
.menu__links a:active{ color:var(--gold); }
.menu__foot{
  margin-top:40px; display:flex; flex-direction:column; gap:10px;
  font-size:.9rem; color:var(--muted);
}
.menu__foot a{ transition:color .3s; }
.menu__foot a:active{ color:var(--gold); }

/* ══════════ TYPE PRIMITIVES ══════════
   ملاحظة: العربية ما بتقبل letter-spacing سالب (بيكسر وصل الحروف)
   ولازمها line-height أوسع من اللاتيني                          */
.display{
  font-weight:900;
  font-size:clamp(2.35rem, 7.4vw, 6.1rem);
  line-height:1.18;
  letter-spacing:normal;
}
.display--mid{ font-size:clamp(2.1rem, 6.2vw, 5rem); }
.display em, .h2 em, .contact__big em{ font-style:normal; color:var(--gold); }

.display .ln{ display:block; overflow:hidden; }
.display .ln > span{ display:block; }

.h2{
  font-weight:800;
  font-size:clamp(1.75rem, 4.2vw, 3.15rem);
  line-height:1.35;
}
.lede{
  font-size:clamp(1rem, 1.55vw, 1.16rem);
  color:var(--muted); font-weight:400;
  max-width:56ch; line-height:1.85;
}
.lede--lg{ font-size:clamp(1.1rem,2.1vw,1.6rem); color:rgba(247,244,239,.82); max-width:44ch; }

.kicker, .eyebrow{
  display:flex; align-items:center; gap:11px;
  font-size:.76rem; font-weight:700;
  letter-spacing:.22em; color:var(--gold);
  text-transform:none; margin-bottom:22px;
}
.kicker i, .eyebrow i{
  width:26px; height:1px; background:var(--gold); opacity:.6; flex:none;
}

.sechead{ margin-bottom:clamp(40px,6vw,72px); }

/* ══════════ GLASS ══════════ */
.glass{
  position:relative;
  background:rgba(255,255,255,.022);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-radius:22px; overflow:hidden;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.07);
}
.glass::before{
  content:''; position:absolute; inset:0; border-radius:inherit;
  padding:1.2px; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,.34) 0%, rgba(255,255,255,.10) 22%,
    rgba(255,255,255,0)   45%, rgba(255,255,255,0)   58%,
    rgba(255,255,255,.09) 80%, rgba(255,255,255,.30) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}

/* ══════════ BUTTONS ══════════ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px; border-radius:100px;
  font-weight:700; font-size:.95rem; white-space:nowrap;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease),
             background .35s, color .35s, border-color .35s;
}
.btn__arrow{ display:inline-block; transition:transform .35s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(-5px); }

.btn--gold{
  background:linear-gradient(135deg,var(--taxi),var(--gold));
  color:#120C00;
  box-shadow:0 6px 22px rgba(242,179,61,.26);
}
.btn--gold:hover{ transform:translateY(-3px); box-shadow:0 14px 38px rgba(242,179,61,.4); }

.btn--ghost{
  background:rgba(255,255,255,.05); color:var(--text);
  border:1px solid var(--line);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.btn--ghost:hover{ background:rgba(255,255,255,.11); transform:translateY(-3px); }

.btn--outline{
  border:1px solid var(--gold); color:var(--gold);
}
.btn--outline:hover{ background:var(--gold); color:#120C00; transform:translateY(-3px); }

.btnrow{ display:flex; flex-wrap:wrap; gap:13px; margin-top:32px; }

/* ══════════════════════════════════════════════════
   1 · HERO
   ══════════════════════════════════════════════════ */
.hero{
  position:relative; width:100%;
  height:100vh; height:100dvh;
  overflow:hidden; background:#000;
}
.hero__media{ position:absolute; inset:0; }
.hero__video{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.04); /* يخفي حواف الفيديو */
}
.hero__vignette{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 90% 70% at 50% 40%, transparent 35%, rgba(0,0,0,.55) 100%);
}
.hero__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,
    var(--bg) 0%, rgba(8,7,10,.9) 14%, rgba(8,7,10,.35) 40%, transparent 62%);
}
.hero__stage{ position:absolute; inset:0; pointer-events:none; }

.beat{
  position:absolute;
  inset-inline:var(--pad);
  bottom:clamp(80px,13vh,150px);
  max-width:920px;
  opacity:0;
  pointer-events:none;
}
.beat[data-beat="0"]{ opacity:1; }
.beat .btnrow{ pointer-events:auto; }
.beat .lede{ margin-top:20px; }

.scrollcue{
  position:absolute; bottom:26px; inset-inline-start:var(--pad);
  display:flex; align-items:center; gap:12px;
  font-size:.68rem; letter-spacing:.26em; color:var(--faint);
}
.scrollcue__line{
  position:relative; width:44px; height:1px;
  background:rgba(247,244,239,.16); overflow:hidden;
}
.scrollcue__line i{
  position:absolute; inset-block:0; width:16px; background:var(--gold);
  animation:cue 1.9s var(--ease) infinite;
}
@keyframes cue{
  0%{ transform:translateX(100%); } 100%{ transform:translateX(-300%); }
}

/* ══════════ 2 · MARQUEE ══════════ */
.marquee{
  position:relative; overflow:hidden;
  padding:22px 0; background:var(--bg);
  border-block:1px solid var(--line-2);
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee__track{
  display:flex; align-items:center; gap:28px;
  width:max-content;
  animation:marquee 34s linear infinite;
}
.marquee__track span{
  font-size:clamp(1rem,2.1vw,1.5rem); font-weight:800;
  color:rgba(247,244,239,.30); white-space:nowrap;
}
.marquee__track b{ color:var(--gold); font-size:.8rem; opacity:.75; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(50%); } }
/* RTL: الاتجاه الموجب بيمشي لليسار بصريًا */

/* ══════════ 3 · ABOUT ══════════ */
.about{ padding:clamp(90px,14vw,180px) 0; }
.bigtext{
  font-size:clamp(1.3rem, 3.5vw, 2.6rem);
  font-weight:500; line-height:1.75; max-width:20ch;
  max-width:min(100%, 22ch);
}
@media(min-width:700px){ .bigtext{ max-width:26ch; } }
.bigtext w{ display:inline; color:rgba(247,244,239,.14); transition:color .35s linear; }

.verse{
  margin-top:clamp(48px,7vw,90px);
  padding:clamp(26px,4vw,44px);
  border-inline-start:2px solid var(--gold);
  background:linear-gradient(90deg, rgba(242,179,61,.07), transparent 70%);
  border-radius:0 16px 16px 0;
}
.verse blockquote{
  font-size:clamp(1.15rem,2.9vw,1.95rem); font-weight:700;
  line-height:2; color:var(--text);
}
.verse figcaption{
  margin-top:12px; font-size:.8rem; color:var(--gold);
  letter-spacing:.14em;
}

/* ══════════ 4 · NUMBERS ══════════ */
.numbers{ padding:clamp(80px,12vw,150px) 0; background:var(--bg-2); }
.stats{
  display:grid; gap:1px;
  grid-template-columns:repeat(2,1fr);
  background:var(--line-2);
  border:1px solid var(--line-2); border-radius:20px; overflow:hidden;
}
@media(min-width:860px){ .stats{ grid-template-columns:repeat(4,1fr); } }
.stat{
  background:var(--bg-2); padding:clamp(24px,3.4vw,40px) 22px;
  transition:background .4s var(--ease);
}
.stat:hover{ background:var(--surface); }
.stat__num{
  font-size:clamp(2rem,5vw,3.4rem); font-weight:700;
  color:var(--gold); line-height:1.1; margin-bottom:8px;
}
.stat__lbl{ font-size:.86rem; color:var(--muted); }

.goal{ margin-top:26px; padding:clamp(24px,3.4vw,38px); }
.goal__top{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; margin-bottom:16px; flex-wrap:wrap;
}
.goal__label{ font-weight:800; font-size:clamp(1rem,2.2vw,1.3rem); }
.goal__label b{ color:var(--gold); }
.goal__pct{ font-size:clamp(1.5rem,3.6vw,2.3rem); font-weight:700; color:var(--gold); }
.goal__bar{
  height:8px; border-radius:100px; overflow:hidden;
  background:rgba(247,244,239,.07);
}
.goal__bar i{
  display:block; height:100%; width:0%; border-radius:100px;
  background:linear-gradient(90deg,var(--gold),var(--taxi));
  box-shadow:0 0 18px var(--glow);
}
.goal__note{ margin-top:13px; font-size:.85rem; color:var(--faint); }

/* ══════════ 4.5 · REELS ══════════ */
.reels{ padding:clamp(80px,12vw,150px) 0; }

.reelsum{
  display:grid; gap:1px; grid-template-columns:1fr;
  padding:0; overflow:hidden; margin-bottom:clamp(22px,3vw,34px);
}
@media(min-width:640px){ .reelsum{ grid-template-columns:repeat(3,1fr); } }
.reelsum > div{
  padding:clamp(20px,3vw,32px) 22px;
  box-shadow:0 0 0 1px var(--line-2);
}
.reelsum b{
  display:block; font-size:clamp(1.7rem,4.6vw,2.9rem); font-weight:700;
  color:var(--gold); line-height:1.1; margin-bottom:6px;
}
.reelsum span{ font-size:.86rem; color:var(--muted); }

.reelgrid{ display:grid; gap:14px; grid-template-columns:repeat(2,1fr); }
@media(min-width:820px){ .reelgrid{ grid-template-columns:repeat(3,1fr); } }

.reel{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  aspect-ratio:9/14;
  padding:clamp(16px,2.2vw,22px);
  border:1px solid var(--line); border-radius:18px;
  background:var(--surface);
  overflow:hidden; isolation:isolate;
  transition:transform .5s var(--ease), border-color .5s;
}
.reel:hover{ transform:translateY(-5px); border-color:rgba(242,179,61,.45); }

/* الصورة المصغّرة الحقيقية + تدرّج يخلّي النص مقروء */
.reel__img{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease), filter .5s;
}
.reel:hover .reel__img{ transform:scale(1.06); filter:brightness(1.08); }
.reel::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(to top,
    rgba(8,7,10,.94) 0%, rgba(8,7,10,.72) 26%, rgba(8,7,10,.15) 55%, rgba(8,7,10,.35) 100%);
}
.reel__play{
  position:absolute; top:clamp(14px,2vw,20px); inset-inline-start:clamp(16px,2.2vw,24px);
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; font-size:.7rem;
  background:rgba(242,179,61,.14); color:var(--gold);
  border:1px solid rgba(242,179,61,.3);
  transition:background .4s, transform .4s var(--ease);
}
.reel:hover .reel__play{ background:var(--gold); color:#120C00; transform:scale(1.1); }
.reel__v{
  font-size:clamp(1.5rem,4vw,2.4rem); font-weight:700; color:var(--text);
  line-height:1.1; margin-bottom:8px;
}
.reel__c{
  font-size:.88rem; color:var(--muted); line-height:1.7;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.reelall{
  display:inline-flex; align-items:center; gap:9px;
  margin-top:clamp(20px,3vw,32px);
  font-weight:700; font-size:.95rem; color:var(--gold);
  border-bottom:1px solid rgba(242,179,61,.4); padding-bottom:4px;
  transition:border-color .4s;
}
.reelall:hover{ border-color:var(--gold); }

/* ══════════ 5 · PILLARS ══════════ */
.pillars{ padding:clamp(80px,12vw,150px) 0; }
.cards{ display:grid; gap:16px; grid-template-columns:1fr; }
@media(min-width:820px){ .cards{ grid-template-columns:repeat(3,1fr); } }
.card{
  padding:clamp(26px,3.4vw,40px);
  transition:transform .5s var(--ease), background .5s;
  will-change:transform;
}
.card:hover{ background:rgba(255,255,255,.045); }
.card__idx{
  display:block; font-size:.8rem; color:var(--gold);
  letter-spacing:.2em; margin-bottom:20px; opacity:.8;
}
.card h3{
  font-size:clamp(1.25rem,2.6vw,1.6rem); font-weight:800;
  margin-bottom:12px; line-height:1.5;
}
.card p{ color:var(--muted); font-size:.97rem; line-height:1.9; }

/* ══════════ 6 · REVEAL ══════════ */
.reveal{
  position:relative; width:100%;
  height:100vh; height:100dvh;
  overflow:hidden; background:#000;
}
.reveal__media{ position:absolute; inset:0; }
.reveal__video{ width:100%; height:100%; object-fit:cover; transform:scale(1.04); }
.reveal__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to top, var(--bg) 0%, rgba(8,7,10,.55) 25%, transparent 55%),
    linear-gradient(to bottom, var(--bg) 0%, transparent 22%);
}
.reveal__stage{ position:absolute; inset:0; pointer-events:none; }
.beat--rv{
  position:absolute; inset-inline:var(--pad);
  bottom:clamp(70px,12vh,130px);
  max-width:820px; opacity:0;
}

/* ══════════ 7 · BRANDS ══════════ */
.brands{ padding:clamp(80px,12vw,150px) 0; background:var(--bg-2); }
.feats{
  display:grid; gap:clamp(28px,4vw,48px);
  grid-template-columns:1fr; margin-bottom:clamp(40px,6vw,64px);
}
@media(min-width:820px){ .feats{ grid-template-columns:repeat(3,1fr); } }
.feat__ic{
  width:46px; height:46px; border-radius:14px;
  display:grid; place-items:center; margin-bottom:18px;
  background:rgba(242,179,61,.11); color:var(--gold); font-size:1.15rem;
  border:1px solid rgba(242,179,61,.22);
}
.feat h3{ font-size:1.2rem; font-weight:800; margin-bottom:10px; }
.feat p{ color:var(--muted); font-size:.96rem; line-height:1.9; }

.ctabox{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:26px; padding:clamp(28px,3.6vw,44px);
}
.ctabox h3{ font-size:clamp(1.3rem,2.8vw,1.8rem); font-weight:800; margin-bottom:8px; }
.ctabox p{ color:var(--muted); font-size:.96rem; }

/* ══════════ 8 · WEBSELL ══════════ */
.websell{ padding:clamp(60px,9vw,110px) 0; }
.websell__in{
  padding:clamp(34px,5vw,70px);
  background:
    radial-gradient(ellipse 60% 100% at 100% 0%, rgba(242,179,61,.10), transparent 60%),
    rgba(255,255,255,.022);
}
.websell__in .h2{ margin-bottom:16px; }
.websell__in .lede{ margin-bottom:32px; }

/* ══════════ 9 · CONTACT ══════════ */
.contact{ padding:clamp(80px,12vw,150px) 0 clamp(60px,8vw,100px); }
.contact__big{
  font-size:clamp(2.6rem,10vw,7rem); font-weight:900;
  line-height:1.2; margin-bottom:clamp(40px,6vw,64px);
}
.links{ border-top:1px solid var(--line); }
.link{
  display:flex; align-items:center; gap:16px;
  padding:clamp(20px,2.8vw,30px) 6px;
  border-bottom:1px solid var(--line);
  position:relative; transition:padding-inline-start .45s var(--ease);
}
.link::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(242,179,61,.09), transparent);
  opacity:0; transition:opacity .45s;
}
.link:hover{ padding-inline-start:20px; }
.link:hover::before{ opacity:1; }
.link:hover .link__go{ transform:translateX(-8px); color:var(--gold); }
.link__k{ width:100px; flex:none; font-size:.8rem; color:var(--faint); letter-spacing:.12em; }
.link__v{ flex:1; font-size:clamp(1.05rem,2.6vw,1.65rem); font-weight:700; }
.link__go{ color:var(--faint); font-size:1.3rem; transition:transform .45s var(--ease), color .45s; }

/* ══════════ FOOTER ══════════ */
.foot{ padding:30px 0 40px; border-top:1px solid var(--line-2); }
.foot__in{
  display:flex; flex-wrap:wrap; gap:14px;
  align-items:center; justify-content:space-between;
  font-size:.83rem; color:var(--faint);
}
.foot__up{ transition:color .3s; }
.foot__up:hover{ color:var(--gold); }

/* ══════════ FAB ══════════ */
.fab{
  position:fixed; z-index:45;
  inset-inline-end:20px; bottom:20px;
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center;
  background:#25D366; color:#fff;
  box-shadow:0 8px 26px rgba(37,211,102,.35);
  opacity:0; transform:translateY(20px) scale(.85); pointer-events:none;
  transition:transform .5s var(--ease), opacity .5s var(--ease), box-shadow .3s;
}
.fab.is-in{ opacity:1; transform:none; pointer-events:auto; }
.fab:hover{ box-shadow:0 12px 34px rgba(37,211,102,.55); transform:scale(1.07); }

/* ══════════ REVEAL-ON-SCROLL BASE ══════════ */
[data-rise]{ opacity:0; transform:translateY(30px); filter:blur(9px); }

/* شبكة أمان: لو فشل تحميل GSAP من الـ CDN، المحتوى لازم يضل ظاهر */
.no-gsap .loader,
.no-gsap .grain,
.no-gsap .cursor,
.no-gsap .scrollcue{ display:none !important; }
.no-gsap [data-rise]{ opacity:1 !important; transform:none !important; filter:none !important; }
.no-gsap .beat{ opacity:1 !important; }
.no-gsap .beat[data-beat="1"],
.no-gsap .beat[data-beat="2"],
.no-gsap .beat--rv[data-rvbeat="1"]{ display:none !important; }
.no-gsap .bigtext w{ color:var(--text) !important; }

/* ══════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════ */
@media(max-width:900px){
  .nav__links{ display:none; }
  .cursor{ display:none; }
  .burger{ display:block; }
  /* تتابع ظهور روابط القائمة */
  .menu.is-open .menu__links a:nth-child(1){ transition-delay:.10s; }
  .menu.is-open .menu__links a:nth-child(2){ transition-delay:.16s; }
  .menu.is-open .menu__links a:nth-child(3){ transition-delay:.22s; }
  .menu.is-open .menu__links a:nth-child(4){ transition-delay:.28s; }
  .menu.is-open .menu__links a:nth-child(5){ transition-delay:.34s; }
}
@media(min-width:901px){ .menu{ display:none; } }
@media(max-width:640px){
  body{ line-height:1.7; }
  .nav{ padding:14px var(--pad); }
  .nav__logo{ font-size:.95rem; }
  .nav__cta{ padding:8px 14px; font-size:.8rem; }

  .beat{ bottom:clamp(72px,11vh,110px); }
  .display{ font-size:clamp(2.05rem,9.2vw,3rem); line-height:1.25; }
  .display--mid{ font-size:clamp(1.85rem,8.2vw,2.6rem); }
  .lede{ font-size:.97rem; }
  .btnrow{ gap:10px; margin-top:24px; }
  .btn{ padding:13px 22px; font-size:.88rem; }
  .scrollcue{ display:none; }

  .link__k{ width:74px; font-size:.72rem; }
  .ctabox{ flex-direction:column; align-items:flex-start; }
  .ctabox .btn{ width:100%; justify-content:center; }
  .fab{ width:50px; height:50px; inset-inline-end:16px; bottom:16px; }
}

/* ══════════ REDUCED MOTION ══════════ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  [data-rise]{ opacity:1 !important; transform:none !important; filter:none !important; }
  .beat{ opacity:1 !important; }
  .beat[data-beat="1"],.beat[data-beat="2"],.beat--rv[data-rvbeat="1"]{ display:none; }
  .bigtext w{ color:var(--text) !important; }
  .grain{ display:none; }
}