/* ==========================================================================
   WATHQ — واثق للتطوير العقاري
   نظام تصميم: مينيمال · حديث · فاخر
   ========================================================================== */

:root{
  --ink:#0B0C0D;
  --ink-2:#121416;
  --paper:#F3F1ED;
  --paper-2:#E8E5DF;
  --sand:#B2906A;        /* برونزي هادئ — يُستخدم بندرة */
  --muted:#8C8A85;
  --muted-light:rgba(243,241,237,.62);

  --pad: clamp(20px, 5.2vw, 96px);
  --gutter: clamp(28px, 4vw, 64px);
  --sec: clamp(96px, 14vh, 190px);

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-img: cubic-bezier(.16,.84,.26,1);
  --nav-h: 76px;
}

*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:'IBM Plex Sans Arabic', -apple-system, 'Segoe UI', Tahoma, sans-serif;
  font-weight:300;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
h1,h2,h3,p,figure{margin:0}
::selection{background:var(--sand);color:#fff}

.skip{
  position:fixed;top:-100px;inset-inline-start:16px;z-index:200;
  background:var(--paper);color:var(--ink);padding:10px 18px;border-radius:2px;
}
.skip:focus{top:16px}
:focus-visible{outline:1px solid var(--sand);outline-offset:4px}

/* ====== العلامة ========================================================== */
.logo{display:inline-flex;align-items:center;gap:.72rem;line-height:1}
.logo__lat{
  font-weight:400;letter-spacing:.42em;font-size:.95rem;
  padding-inline-start:.42em; /* تعويض بصري للتباعد */
}
.logo__sep{width:1px;height:14px;background:currentColor;opacity:.4}
.logo__ar{font-weight:300;font-size:1.05rem;letter-spacing:0}
.logo--lg .logo__lat{font-size:clamp(1.1rem,2.6vw,1.6rem)}
.logo--lg .logo__ar{font-size:clamp(1.2rem,2.8vw,1.75rem)}
.logo--lg .logo__sep{height:22px}

/* ====== شريط التنقل ====================================================== */
.nav{
  position:fixed;inset-inline:0;top:0;z-index:100;
  transition:transform .5s var(--ease), background-color .5s ease, backdrop-filter .5s ease;
}
.nav__inner{
  height:var(--nav-h);
  padding-inline:var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.nav__links{display:flex;gap:clamp(20px,2.6vw,42px);font-size:.9rem;font-weight:300}
.nav__links a{position:relative;opacity:.82;transition:opacity .35s ease}
.nav__links a::after{
  content:"";position:absolute;inset-inline-start:0;bottom:-6px;
  width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:var(--to, right);
  transition:transform .55s var(--ease);
}
.nav__links a:hover{opacity:1}
.nav__links a:hover::after{transform:scaleX(1)}
.nav.is-stuck{background:rgba(11,12,13,.72);backdrop-filter:saturate(1.4) blur(14px)}
.nav.is-hidden{transform:translateY(-104%)}

.burger{
  display:none;width:40px;height:40px;background:none;border:0;padding:0;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:flex-end;gap:7px;
}
.burger span{display:block;width:26px;height:1px;background:var(--paper);transition:transform .45s var(--ease),opacity .25s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(4px) rotate(-45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-4px) rotate(45deg)}

.menu{
  position:fixed;inset:0;z-index:95;background:rgba(11,12,13,.97);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .45s ease;
}
.menu[hidden]{display:none}
.menu.is-open{opacity:1}
.menu nav{display:flex;flex-direction:column;gap:28px;text-align:center}
.menu a{font-size:1.6rem;font-weight:200;letter-spacing:.02em}

/* ====== الواجهة الرئيسية ================================================= */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero__media{position:absolute;inset:0}
.hero .slide{
  position:absolute;inset:0;margin:0;opacity:0;
  transition:opacity 1.9s ease-in-out;
}
.hero .slide.is-active{opacity:1}
.hero .slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:none}
.hero .slide.is-active img{animation:kenburns 11s linear forwards}
@keyframes kenburns{from{transform:scale(1.03)}to{transform:scale(1.13)}}

.hero__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(to top, rgba(8,9,10,.95) 0%, rgba(8,9,10,.6) 38%, rgba(8,9,10,.26) 66%, rgba(8,9,10,.62) 100%),
    radial-gradient(130% 85% at 72% 24%, rgba(8,9,10,0) 34%, rgba(8,9,10,.62) 100%);
}

.hero__content{
  position:relative;z-index:2;
  padding:0 var(--pad) clamp(96px,16vh,190px);
  width:100%;max-width:1080px;
}
.hero__title{
  font-weight:200;
  font-size:clamp(2.5rem,7.4vw,6.2rem);
  line-height:1.22;
  letter-spacing:-.01em;
  margin-block:clamp(14px,2.2vh,26px) clamp(16px,2.4vh,28px);
}
.hero__title .line{display:block;overflow:hidden;padding-block:.06em}
.hero__title .line>span{display:block;transform:translateY(110%)}
.hero__sub{
  font-size:clamp(.95rem,1.5vw,1.2rem);
  font-weight:200;color:var(--muted-light);max-width:36ch;
}

.eyebrow{
  font-size:.74rem;font-weight:400;letter-spacing:.34em;
  color:var(--sand);text-transform:none;
  display:flex;align-items:center;gap:14px;
}
.eyebrow::after{content:"";height:1px;width:clamp(36px,5vw,72px);background:currentColor;opacity:.5}
.eyebrow--light{color:rgba(243,241,237,.75)}

.hero__cue{
  position:absolute;z-index:2;bottom:clamp(28px,5vh,56px);inset-inline-end:var(--pad);
  display:flex;flex-direction:column;align-items:center;gap:12px;
  font-size:.7rem;letter-spacing:.26em;color:var(--muted-light);
}
.hero__cue-line{display:block;width:1px;height:62px;background:linear-gradient(to bottom,rgba(243,241,237,.7),rgba(243,241,237,0));overflow:hidden;position:relative}
.hero__cue-line::after{
  content:"";position:absolute;inset-inline:0;top:-62px;height:62px;background:var(--sand);
  animation:cue 2.6s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes cue{0%{transform:translateY(0)}60%,100%{transform:translateY(124px)}}

.hero__dots{
  position:absolute;z-index:2;bottom:clamp(30px,5vh,58px);inset-inline-start:var(--pad);
  display:flex;gap:12px;
}
.hero__dots button{
  width:34px;height:2px;border:0;padding:0;cursor:pointer;
  background:rgba(243,241,237,.28);position:relative;overflow:hidden;
}
.hero__dots button::after{
  content:"";position:absolute;inset:0;background:var(--paper);
  transform:scaleX(0);transform-origin:right;
}
.hero__dots button[aria-selected="true"]::after{animation:dotfill 6s linear forwards}
@keyframes dotfill{to{transform:scaleX(1)}}

/* دخول العناصر عند فتح الموقع */
[data-anim]{opacity:0}
.is-ready [data-anim]{
  animation:fadeUp 1.15s var(--ease) forwards;
  animation-delay:calc(var(--i,0) * 130ms + 180ms);
}
.is-ready .hero__title .line>span{
  animation:maskUp 1.25s var(--ease) forwards;
  animation-delay:calc(var(--i,0) * 130ms + 180ms);
}
.is-ready .hero__title[data-anim],
.is-ready .hero__title .line{opacity:1;animation:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes maskUp{from{transform:translateY(110%)}to{transform:translateY(0)}}

/* ====== عن واثق ========================================================== */
.about{
  background:var(--paper);color:var(--ink);
  padding:var(--sec) var(--pad);
  position:relative;
  --curtain:var(--paper);
}
.about__grid{
  max-width:1360px;margin-inline:auto;
  display:grid;grid-template-columns:1fr .86fr;
  gap:clamp(40px,7vw,120px);align-items:center;
}
.about__text .eyebrow{color:var(--sand)}
.about__lede{
  font-weight:200;
  font-size:clamp(1.3rem,2.55vw,2.35rem);
  line-height:1.72;
  letter-spacing:-.005em;
  margin-top:clamp(22px,3vw,40px);
  max-width:24ch;
  text-wrap:balance;
}
.pillars{
  margin-top:clamp(34px,4.4vw,64px);
  display:flex;flex-wrap:wrap;gap:0;
  border-top:1px solid rgba(11,12,13,.14);
}
.pillars li{
  padding:18px 0;
  font-size:.86rem;letter-spacing:.14em;color:var(--muted);
  flex:1 1 auto;min-width:150px;
}
.pillars li+li{border-inline-start:1px solid rgba(11,12,13,.14);padding-inline-start:clamp(16px,2vw,32px)}
.pillars li:not(:last-child){padding-inline-end:clamp(16px,2vw,32px)}

.about__media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--paper-2)}
.about__media img{width:100%;height:112%;object-fit:cover;object-position:center}

/* ====== القسم البصري ===================================================== */
.showcase{
  background:var(--ink);
  --curtain:var(--ink);
  padding:var(--sec) var(--pad);
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(60px,9vw,150px);
  overflow:hidden;
}
.showcase__label{align-self:flex-start;max-width:1360px;width:100%;margin-inline:auto}

.shot{position:relative;overflow:hidden;background:var(--ink-2);width:100%}
.shot img{width:100%;height:112%;object-fit:cover}

.shot--wide{max-width:1360px;aspect-ratio:16/8}
.duo{
  width:100%;max-width:1360px;
  display:grid;grid-template-columns:1.1fr .9fr;
  gap:clamp(20px,3vw,54px);align-items:end;
}
.shot--tall{aspect-ratio:4/5}
.shot--short{aspect-ratio:1/1;margin-bottom:clamp(0px,6vw,90px)}
.shot--offset{max-width:980px;aspect-ratio:3/2;margin-inline-end:auto;margin-inline-start:clamp(0px,10vw,180px)}

.band{
  position:relative;width:100vw;margin-inline:calc(var(--pad) * -1);
  height:clamp(300px,62vh,660px);overflow:hidden;
}
.band img{width:100%;height:132%;object-fit:cover;object-position:center 30%;position:absolute;inset-inline:0;top:-16%}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(8,9,10,.72),rgba(8,9,10,.3) 45%,rgba(8,9,10,.8))}

/* ====== الفوتر =========================================================== */
.foot{
  background:#08090A;color:var(--paper);
  padding:clamp(70px,10vw,130px) var(--pad) clamp(28px,4vw,48px);
}
.foot__top{max-width:1360px;margin-inline:auto;text-align:center}
.foot__tag{
  margin-top:clamp(16px,2.4vw,26px);
  font-weight:200;color:var(--muted-light);
  font-size:clamp(1rem,1.7vw,1.3rem);letter-spacing:.02em;
}
.foot__mid{
  max-width:1360px;margin:clamp(48px,7vw,96px) auto 0;
  padding-block:clamp(28px,3.6vw,46px);
  border-top:1px solid rgba(243,241,237,.1);
  border-bottom:1px solid rgba(243,241,237,.1);
  display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:space-between;
}
.foot__contact{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,80px)}
.foot__contact dt{font-size:.72rem;letter-spacing:.26em;color:var(--sand);margin-bottom:8px}
.foot__contact dd{font-size:1rem;font-weight:300}
.foot__contact a{position:relative}
.foot__contact a::after{
  content:"";position:absolute;inset-inline-start:0;bottom:-3px;width:100%;height:1px;
  background:currentColor;opacity:.3;transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease);
}
.foot__contact a:hover::after{transform:scaleX(1)}
.foot__social{display:flex;gap:clamp(18px,2.6vw,36px);font-size:.82rem;letter-spacing:.12em}
.foot__social a{opacity:.62;transition:opacity .35s ease}
.foot__social a:hover{opacity:1}
.foot__bar{
  max-width:1360px;margin:clamp(22px,3vw,34px) auto 0;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-size:.74rem;letter-spacing:.08em;color:rgba(243,241,237,.42);
}

/* ====== حركات التمرير ==================================================== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.reveal[data-delay]{transition-delay:calc(var(--d,0) * 1ms)}
.reveal.in{opacity:1;transform:none}

/* ستارة كشف — لا تُستخدم clip-path على العنصر نفسه حتى لا يُحجب عن المراقب */
.reveal-img{position:relative}
.reveal-img::before{
  content:"";position:absolute;inset:-1px;z-index:2;
  background:var(--curtain, var(--ink));
  transform-origin:bottom;transform:scaleY(1);
  transition:transform 1.4s var(--ease-img);
}
.reveal-img[data-delay]::before{transition-delay:calc(var(--d,0) * 1ms)}
.reveal-img img{scale:1.1;transition:scale 1.9s var(--ease-img)}
.reveal-img[data-delay] img{transition-delay:calc(var(--d,0) * 1ms)}
.reveal-img.in::before{transform:scaleY(0)}
.reveal-img.in img{scale:1}

/* ====== الاستجابة ======================================================== */
@media (max-width:1024px){
  .about__grid{grid-template-columns:1fr;gap:clamp(36px,7vw,64px)}
  .about__media{aspect-ratio:3/2;max-height:62vh}
  .shot--offset{margin-inline-start:0}
}
@media (max-width:760px){
  :root{--nav-h:64px}
  body{line-height:1.8}
  .nav__links{display:none}
  .burger{display:flex}
  .hero__content{padding-bottom:clamp(120px,22vh,180px)}
  .hero__title{font-size:clamp(2.15rem,10.4vw,3.4rem);line-height:1.3}
  .hero__cue{display:none}
  .hero__dots{inset-inline-start:var(--pad);bottom:34px}
  .duo{grid-template-columns:1fr;gap:clamp(20px,6vw,40px)}
  .shot--short{margin-bottom:0}
  .shot--wide{aspect-ratio:4/3}
  .pillars li+li{border-inline-start:0;padding-inline-start:0}
  .pillars li{border-top:1px solid rgba(11,12,13,.1);min-width:100%;padding-block:14px}
  .pillars{border-top:0}
  .foot__mid{flex-direction:column;align-items:flex-start;gap:28px}
  .foot__bar{flex-direction:column;gap:6px}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  [data-anim]{opacity:1}
  .hero__title .line>span{transform:none}
  .reveal{opacity:1;transform:none}
  .reveal-img::before{transform:scaleY(0)}
  .reveal-img img{scale:1}
}