/* ==========================================================
   ALWIDAD — home layer: hero + marquee
   (sections below the fold live in sections.css / toolkit.css)
   ========================================================== */

/* ---------- HERO ---------- */
.hero{position:relative;isolation:isolate;overflow:clip;padding-block:clamp(40px,5vw,76px) clamp(70px,8vw,124px)}
.hero__bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero__bg::before{
  content:"";position:absolute;width:min(980px,96vw);aspect-ratio:1;inset-block-start:-26%;inset-inline-end:-18%;
  background:radial-gradient(closest-side,rgba(226,186,105,.24),rgba(226,186,105,.07) 56%,transparent 74%);
}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(46% 40% at 4% 104%,rgba(226,186,105,.1),transparent 70%),linear-gradient(180deg,transparent 72%,var(--ink-950));
}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr);gap:clamp(36px,5.5vw,92px);align-items:center}

.hero__title{font:700 clamp(2.5rem,5.05vw,4.7rem)/1.04 var(--font-display);letter-spacing:-.018em;margin-top:26px;text-wrap:balance}
.hero__title>*{display:block}
.hero__title em{padding:.02em .06em .1em 0}
.shimmer{
  background-image:linear-gradient(100deg,#c8963f 0%,#fbe3a1 22%,#e2ba69 40%,#fff3cf 50%,#e2ba69 60%,#c8963f 80%,#f3d28b 100%);
  background-size:260% 100%;background-position:100% 0;animation:shimmer 8s ease-in-out 1.2s infinite;
}
@keyframes shimmer{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.hero .lead{margin-top:28px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.hero__proof{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:46px;padding-top:26px;border-top:1px solid var(--line);max-width:36em}
.hero__proof li{display:flex;align-items:center;gap:11px;font:600 .82rem/1.3 var(--font-body);color:var(--cream-2);letter-spacing:.02em}
.hero__proof li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold-grad);box-shadow:0 0 0 3px rgba(226,186,105,.16);flex:none}

/* portrait */
.hero__visual{position:relative;justify-self:end;width:min(100%,430px);padding-bottom:70px}
.portrait{position:relative;aspect-ratio:20/22;transition:transform .5s var(--ease)}
.portrait__ghost{position:absolute;inset-block:26px -26px;inset-inline:26px -26px;border:1px solid var(--line);border-radius:30px}
.portrait__frame{
  position:absolute;inset:0;border-radius:28px;overflow:hidden;background:#0d0b08;border:1px solid var(--line-strong);
  box-shadow:0 50px 90px -34px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.5),0 0 130px -30px rgba(226,186,105,.28);
}
.portrait__frame img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;filter:saturate(1.05) contrast(1.03)}
.portrait__frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,6,7,.32) 0%,transparent 20%),linear-gradient(0deg,rgba(7,6,7,.7) 0%,transparent 34%);
}
.nameplate{position:absolute;inset-inline:0;bottom:0;display:grid;justify-items:end;gap:5px;padding-top:18px}
.nameplate__name{font:700 1.6rem/1.1 var(--font-display)}
.nameplate__role{font:600 .68rem/1.5 var(--font-label);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-300);text-align:end}
.nameplate__role [lang="ar"]{font-family:"Cairo",sans-serif;letter-spacing:0;text-transform:none;font-size:.82rem}

.filecard{
  position:absolute;z-index:3;inset-inline-start:clamp(-58px,-4.4vw,-26px);bottom:6px;width:min(264px,66%);
  padding:16px 16px 14px;border-radius:20px;background:linear-gradient(180deg,#181410,#0d0b08);
  border:1px solid var(--line-strong);box-shadow:0 34px 60px -22px rgba(0,0,0,.9),0 0 0 7px rgba(7,6,7,.6);
  animation:float 7s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.filecard__head{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.filecard__ico{width:36px;height:36px;border-radius:10px;background:var(--gold-grad);color:#1b1408;display:grid;place-items:center;flex:none}
.filecard__ico .ico{width:19px;height:19px;stroke-width:1.8}
.filecard__t{font:700 .8rem/1.25 var(--font-body);color:var(--cream)}
.filecard__s{font:500 .66rem/1.3 var(--font-body);color:var(--muted)}
.filecard__list li{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid rgba(226,186,105,.13);font:500 .76rem/1.3 var(--font-body);color:var(--cream-2)}
.filecard__list .tick{width:17px;height:17px;border-radius:50%;border:1px solid var(--gold-500);display:grid;place-items:center;flex:none;color:var(--gold-200)}
.filecard__list .tick svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.filecard__list .tick path{stroke-dasharray:18;stroke-dashoffset:18}
.is-in .filecard__list .tick path{animation:draw .5s var(--ease) forwards;animation-delay:calc(var(--i) * .22s + 1s)}
@keyframes draw{to{stroke-dashoffset:0}}
.filecard__foot{margin-top:10px;padding:9px 11px;border-radius:11px;background:rgba(226,186,105,.1);display:flex;align-items:center;justify-content:space-between;gap:8px;font:700 .68rem/1 var(--font-body);color:var(--gold-200)}
.filecard__bar{flex:1;max-width:64px;height:4px;border-radius:4px;background:rgba(226,186,105,.2);overflow:hidden}
.filecard__bar i{display:block;height:100%;width:100%;background:var(--gold-grad);transform:scaleX(0);transform-origin:left}
html[dir="rtl"] .filecard__bar i{transform-origin:right}
.is-in .filecard__bar i{animation:fill 1.1s var(--ease) 2s forwards}
@keyframes fill{to{transform:scaleX(1)}}

.hero__vert{
  position:absolute;right:clamp(-52px,-3.6vw,-36px);left:auto;top:50%;writing-mode:vertical-rl;transform:translateY(-50%);
  font:500 .6rem/1 var(--font-label);letter-spacing:.5em;text-transform:uppercase;color:var(--gold-500);opacity:.85;white-space:nowrap;
}
html[dir="rtl"] .hero__vert{right:auto;left:clamp(-52px,-3.6vw,-36px);transform:translateY(-50%) rotate(180deg)}

@media (max-width:1180px){
  .hero__vert{display:none}
}
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;gap:56px}
  .hero__visual{justify-self:center;width:min(86%,420px)}
  .hero__proof{max-width:none}
}
@media (max-width:480px){
  .hero__visual{width:min(100%,340px);padding-bottom:56px}
  .filecard{inset-inline-start:-14px;width:78%;padding:13px 13px 12px}
  .portrait__ghost{inset-block:16px -16px;inset-inline:16px -16px}
  .hero__cta .btn{width:100%}
}

/* ---------- MARQUEE ---------- */
.marquee{
  --mq-to:-50%;
  overflow:hidden;border-block:1px solid var(--line);
  background:linear-gradient(90deg,rgba(226,186,105,.07),transparent 18%,transparent 82%,rgba(226,186,105,.07)),var(--ink-900);
}
html[dir="rtl"] .marquee{--mq-to:50%}
.marquee__track{display:flex;width:max-content;animation:marquee 46s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__set{display:flex;flex:none}
.marquee__item{
  display:flex;align-items:center;gap:56px;padding:21px 0 21px 56px;white-space:nowrap;
  font:500 .76rem/1 var(--font-label);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-300);
}
.marquee__item::after{content:"";width:6px;height:6px;rotate:45deg;background:var(--gold-500);opacity:.8;flex:none}
@keyframes marquee{to{transform:translateX(var(--mq-to))}}
html[dir="rtl"] .marquee__item{padding:21px 56px 21px 0}