/* ============================================================
   هدف للإعلانات — الستايل الرئيسي
   الألوان مأخوذة من اللوجو: قرمزي + ذهبي معدني على أسود
   ============================================================ */

:root{
  /* الأسود */
  --ink:#0a0709;
  --ink-2:#100c0e;
  --ink-3:#171012;
  --ink-4:#1f1518;

  /* القرمزي */
  --red:#c8121f;
  --red-hi:#ef2436;
  --red-lo:#6d0810;

  /* الذهبي */
  --gold:#d4a03c;
  --gold-hi:#f6dda4;
  --gold-lo:#8a5f14;

  /* النص */
  --bone:#f4efe9;
  --muted:#a2938e;
  --line:rgba(212,160,60,.16);

  /* التدرجات */
  --grad-gold:linear-gradient(135deg,#f6dda4 0%,#d4a03c 45%,#8a5f14 100%);
  --grad-red:linear-gradient(135deg,#ef2436 0%,#c8121f 45%,#6d0810 100%);

  /* الخطوط */
  --display:"Noto Kufi Arabic",system-ui,sans-serif;
  --body:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --latin:"Sora",ui-sans-serif,system-ui,sans-serif;

  /* المقاسات */
  --shell:1220px;
  --pad:clamp(18px,4vw,52px);
  --nav-h:74px;

  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-size:16px;
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* حلقات باهتة في الخلفية — صدى لشكل الهدف في اللوجو */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 78% 12%, rgba(200,18,31,.12), transparent 42%),
    radial-gradient(circle at 12% 82%, rgba(212,160,60,.09), transparent 45%);
}

img{max-width:100%;display:block}

[hidden]{display:none !important}

a{color:inherit;text-decoration:none}

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

.shell{
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--pad);
  position:relative;
  z-index:1;
}

.skip{
  position:fixed;
  inset-inline-end:-9999px;
  top:12px;
  z-index:200;
  background:var(--gold);
  color:var(--ink);
  font-weight:700;
  padding:11px 20px;
  border-radius:10px;
}
.skip:focus{inset-inline-end:14px}

.trap{position:absolute;right:-9999px;opacity:0;height:0;width:0}

/* ============================================================
   شاشة التحميل
   ============================================================ */
.boot{
  position:fixed;
  inset:0;
  z-index:300;
  background:var(--ink);
  display:grid;
  place-items:center;
  transition:opacity .7s var(--ease), visibility .7s;
}
.boot.is-done{opacity:0;visibility:hidden}

.boot__ring,
.boot__ring--2{
  position:absolute;
  border-radius:50%;
  border:2px solid transparent;
}

.boot__ring{
  width:120px;height:120px;
  border-top-color:var(--red);
  border-left-color:var(--red);
  animation:spin 1s linear infinite;
}

.boot__ring--2{
  width:78px;height:78px;
  border-bottom-color:var(--gold);
  border-right-color:var(--gold);
  animation:spin 1.5s linear infinite reverse;
}

.boot__word{
  font-family:var(--display);
  font-weight:900;
  font-size:27px;
  background:var(--grad-gold);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

@keyframes spin{to{transform:rotate(360deg)}}

/* ============================================================
   مؤشر التصويب: أربع زوايا بتقفل على العنصر (ديسكتوب بس)
   ============================================================ */
.reticle{
  position:fixed;
  top:0;left:0;
  z-index:250;
  pointer-events:none;
  opacity:0;
  transition:opacity .3s;
}
.reticle.is-live{opacity:1}

.reticle__box{
  position:absolute;
  width:38px;
  height:38px;
  margin:-19px 0 0 -19px;
  transition:width .3s var(--ease), height .3s var(--ease),
             margin .3s var(--ease), rotate .45s var(--ease);
}

.reticle__box i{
  position:absolute;
  width:10px;
  height:10px;
  border:1.6px solid var(--gold);
  transition:border-color .3s;
}

.reticle__box i:nth-child(1){top:0;   left:0;   border-right:0;  border-bottom:0}
.reticle__box i:nth-child(2){top:0;   right:0;  border-left:0;   border-bottom:0}
.reticle__box i:nth-child(3){bottom:0;right:0;  border-left:0;   border-top:0}
.reticle__box i:nth-child(4){bottom:0;left:0;   border-right:0;  border-top:0}

/* عند المرور على حاجة قابلة للضغط: بيضيق ويلف ويحمرّ */
body.is-aiming .reticle__box{
  width:26px;
  height:26px;
  margin:-13px 0 0 -13px;
  rotate:45deg;
}
/* ذهبي فاتح عشان يفضل باين فوق الأزرار الحمرا والخلفية السودا */
body.is-aiming .reticle__box i{border-color:var(--gold-hi);border-width:2px}

@media (hover:none),(max-width:900px){
  .reticle{display:none}
}

/* ============================================================
   الهيدر
   ============================================================ */
.nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:120;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  transition:background .35s, border-color .35s, backdrop-filter .35s;
  border-bottom:1px solid transparent;
}

.nav.is-stuck{
  background:rgba(10,7,9,.86);
  backdrop-filter:blur(16px);
  border-bottom-color:var(--line);
}

.nav__in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  width:100%;
}

.logo{display:flex;align-items:center;gap:13px}

.logo img{height:46px;width:auto}

.logo__latin{
  font-family:var(--latin);
  font-style:normal;
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.28em;
  color:var(--muted);
  padding-inline-start:13px;
  border-inline-start:1px solid var(--line);
  white-space:nowrap;
}

@media (max-width:420px){
  .logo__latin{display:none}
}

.nav__links{display:flex;gap:4px}

.nav__links a{
  position:relative;
  font-size:14.5px;
  font-weight:500;
  color:var(--muted);
  padding:9px 14px;
  border-radius:8px;
  transition:color .22s;
}
.nav__links a:hover{color:var(--bone)}

.nav__links a::after{
  content:"";
  position:absolute;
  inset:auto 14px 4px 14px;
  height:1.5px;
  background:var(--grad-gold);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .3s var(--ease);
}
.nav__links a:hover::after{transform:scaleX(1)}

.nav__side{display:flex;align-items:center;gap:10px}

/* زرار تبديل اللغة */
.lang{
  font-family:var(--latin);
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  color:var(--gold);
  background:transparent;
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 14px;
  cursor:pointer;
  min-width:52px;
  transition:border-color .22s, background .22s, color .22s;
}
.lang:hover{border-color:var(--gold);background:rgba(212,160,60,.1);color:var(--gold-hi)}

html[lang="en"] .lang{font-family:var(--body);letter-spacing:0;font-size:14px}

/* زرار الصوت */
.snd{
  width:40px;
  height:38px;
  display:grid;
  place-items:center;
  background:transparent;
  border:1px solid var(--line);
  border-radius:999px;
  cursor:pointer;
  transition:border-color .22s, background .22s;
}
.snd:hover{border-color:var(--gold);background:rgba(212,160,60,.1)}

.snd__bars{display:flex;align-items:center;gap:2.5px;height:15px}

.snd__bars i{
  display:block;
  width:2.5px;
  border-radius:2px;
  background:var(--gold);
  height:4px;
  transition:background .22s;
}

/* الأعمدة بترقص وهي شغالة */
.snd[aria-pressed="true"] .snd__bars i{animation:eq .9s ease-in-out infinite alternate}
.snd[aria-pressed="true"] .snd__bars i:nth-child(1){animation-delay:0s}
.snd[aria-pressed="true"] .snd__bars i:nth-child(2){animation-delay:.18s}
.snd[aria-pressed="true"] .snd__bars i:nth-child(3){animation-delay:.36s}
.snd[aria-pressed="true"] .snd__bars i:nth-child(4){animation-delay:.1s}

@keyframes eq{from{height:3px}to{height:15px}}

.snd[aria-pressed="false"] .snd__bars i{height:3px;background:var(--muted)}

/* ============================================================
   شريط تقدم القراءة
   ============================================================ */
.progress{
  position:fixed;
  inset:0 0 auto 0;
  height:3px;
  z-index:130;
  background:rgba(212,160,60,.1);
  pointer-events:none;
}

.progress span{
  display:block;
  height:100%;
  width:0;
  background:var(--grad-gold);
  box-shadow:0 0 12px rgba(212,160,60,.55);
}

.burger{
  display:none;
  flex-direction:column;
  gap:5px;
  width:42px;height:42px;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:1px solid var(--line);
  border-radius:10px;
  cursor:pointer;
}

.burger span{
  display:block;
  width:19px;height:1.5px;
  background:var(--bone);
  transition:transform .3s var(--ease), opacity .2s;
}

.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ============================================================
   الأزرار
   ============================================================ */
.btn{
  --btn-pad:13px 26px;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-family:var(--body);
  font-weight:600;
  font-size:15px;
  padding:var(--btn-pad);
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), color .25s, border-color .25s;
  isolation:isolate;
}

.btn--sm{--btn-pad:9px 18px;font-size:13.5px}
.btn--lg{--btn-pad:17px 38px;font-size:16.5px}

.btn--red{background:var(--grad-red);color:#fff}
.btn--red:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(200,18,31,.42)}

.btn--gold{background:var(--grad-gold);color:var(--ink)}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(212,160,60,.34)}

.btn--line{border-color:rgba(212,160,60,.4);color:var(--bone);background:transparent}
.btn--line:hover{border-color:var(--gold);background:rgba(212,160,60,.09);transform:translateY(-2px)}

/* لمعة بتعدي على الزرار عند الهوفر */
.btn--red::before,
.btn--gold::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.32) 50%,transparent 80%);
  transform:translateX(-120%);
  transition:transform .7s var(--ease);
}
.btn--red:hover::before,
.btn--gold:hover::before{transform:translateX(120%)}

/* ============================================================
   الهيرو
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding-block:calc(var(--nav-h) + 40px) 90px;
  overflow:hidden;
}

/* عمودين: الكلام على اليمين والهدف على الشمال — عشان ما يتداخلوش */
.hero__in{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  align-items:center;
  gap:clamp(18px,3.5vw,54px);
}

.hero__copy{min-width:0;position:relative;z-index:2}

/* الهدف */
.target{
  position:relative;
  width:100%;
  max-width:540px;
  aspect-ratio:1;
  margin-inline:auto;
  will-change:transform;
}

.target__svg{width:100%;height:100%;overflow:visible}

.target__rings{transform-origin:310px 310px;animation:slowspin 90s linear infinite}

@keyframes slowspin{to{transform:rotate(360deg)}}

.ring{
  stroke-dasharray:2000;
  stroke-dashoffset:2000;
  animation:draw 1.5s var(--ease) forwards;
}
.ring:nth-child(1){animation-delay:.05s}
.ring:nth-child(2){animation-delay:.15s}
.ring:nth-child(3){animation-delay:.25s}
.ring:nth-child(4){animation-delay:.35s}
.ring:nth-child(5){animation-delay:.45s}
.ring:nth-child(6){animation-delay:.55s}

@keyframes draw{to{stroke-dashoffset:0}}

.target__bull{
  opacity:0;
  transform-origin:310px 310px;
  animation:bull .5s var(--ease) 1.55s forwards;
}
@keyframes bull{
  0%{opacity:0;transform:scale(0)}
  60%{opacity:1;transform:scale(1.5)}
  100%{opacity:1;transform:scale(1)}
}

.target__arrow{
  opacity:0;
  transform-origin:310px 310px;
  animation:shoot .55s cubic-bezier(.5,0,.2,1) 1.15s forwards;
}
@keyframes shoot{
  0%  {opacity:0;transform:translate(300px,-150px) scale(1.1)}
  70% {opacity:1;transform:translate(-14px,7px)}
  100%{opacity:1;transform:translate(0,0)}
}

.target__shock{
  opacity:0;
  transform-origin:310px 310px;
  animation:shock .9s var(--ease) 1.6s forwards;
}
@keyframes shock{
  0%  {opacity:.9;transform:scale(.5);stroke-width:5}
  100%{opacity:0;transform:scale(4.6);stroke-width:.5}
}

.eyebrow{
  font-family:var(--latin);
  font-size:12px;
  font-weight:600;
  letter-spacing:.2em;
  color:var(--gold);
  margin:0 0 18px;
  display:flex;
  align-items:center;
  gap:12px;
}
.eyebrow::before{
  content:"";
  width:26px;height:1px;
  background:var(--grad-gold);
  flex:none;
}

.hero__h1{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(38px,6.2vw,80px);
  line-height:1.06;
  letter-spacing:-.03em;
  margin:0 0 26px;
}

.hero__h1 .line{display:block;overflow:hidden;padding-block:.06em}

.hero__h1 .gold{
  background:var(--grad-gold);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero__p{
  font-size:clamp(15.5px,2vw,19px);
  line-height:1.9;
  color:var(--muted);
  max-width:50ch;
  margin:0 0 36px;
}

.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:44px}

.hero__badges{
  display:flex;
  flex-wrap:wrap;
  gap:12px 30px;
  list-style:none;
  padding:0;
  margin:0;
}

.hero__badges li{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:13.5px;
  color:var(--muted);
}
.hero__badges li::before{
  content:"";
  width:7px;height:7px;
  flex:none;
  border-radius:50%;
  background:var(--grad-gold);
}

.scroll-cue{
  position:absolute;
  bottom:26px;
  left:50%;
  transform:translateX(-50%);
  width:24px;height:38px;
  border:1.5px solid var(--line);
  border-radius:14px;
  display:grid;
  place-items:start center;
  padding-top:7px;
  z-index:2;
}
.scroll-cue span{
  width:3px;height:7px;
  border-radius:2px;
  background:var(--gold);
  animation:cue 1.7s var(--ease) infinite;
}
@keyframes cue{
  0%,100%{transform:translateY(0);opacity:1}
  50%{transform:translateY(11px);opacity:.2}
}

/* ============================================================
   شريط الأرقام
   ============================================================ */
.scoreband{
  border-block:1px solid var(--line);
  background:linear-gradient(180deg,rgba(200,18,31,.06),transparent);
  position:relative;
  z-index:1;
}

.scoreband__in{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:2px;
}

.score{
  padding:30px 20px;
  text-align:center;
  border-left:1px solid var(--line);
}
.score:last-child{border-left:0}

.score b{
  display:block;
  font-family:var(--latin);
  font-size:clamp(30px,4.4vw,46px);
  font-weight:800;
  line-height:1.1;
  background:var(--grad-gold);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-variant-numeric:tabular-nums;
}

.score span{font-size:13px;color:var(--muted)}

/* ============================================================
   الأقسام العامة
   ============================================================ */
.sec{
  padding-block:clamp(76px,11vw,140px);
  position:relative;
  z-index:1;
}

.sec--alt{background:var(--ink-2)}

.sec__head{margin-bottom:clamp(38px,6vw,62px);max-width:62ch}

.h2{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(28px,5vw,50px);
  line-height:1.18;
  letter-spacing:-.025em;
  margin:0 0 14px;
}

.lede{
  font-size:clamp(15px,1.9vw,18px);
  line-height:1.9;
  color:var(--muted);
  margin:0;
  max-width:56ch;
}

/* ============================================================
   كروت الخدمات
   ============================================================ */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:18px;
  perspective:1200px;
}

.card{
  position:relative;
  overflow:hidden;
  padding:34px 30px;
  border:1px solid var(--line);
  border-radius:20px;
  background:linear-gradient(160deg,rgba(244,239,233,.045),rgba(244,239,233,.012));
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.card:hover{
  transform:translateY(-7px);
  border-color:rgba(212,160,60,.42);
  box-shadow:0 22px 50px rgba(0,0,0,.5);
}

/* حلقة هدف بتظهر في ركن الكارت عند الهوفر */
.card__ring{
  position:absolute;
  top:-70px;
  inset-inline-end:-70px;
  width:190px;height:190px;
  border-radius:50%;
  border:26px solid rgba(200,18,31,.16);
  box-shadow:0 0 0 12px rgba(212,160,60,.07);
  opacity:0;
  transform:scale(.6);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
  pointer-events:none;
}
.card:hover .card__ring{opacity:1;transform:scale(1)}

.card h3{
  font-family:var(--display);
  font-weight:700;
  font-size:20px;
  margin:0 0 12px;
  position:relative;
}

.card > p{
  margin:0 0 18px;
  font-size:14.5px;
  line-height:1.85;
  color:var(--muted);
  position:relative;
}

.card ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:9px;
  position:relative;
}

.card ul li{
  display:flex;
  gap:10px;
  font-size:13.5px;
  color:var(--muted);
}
.card ul li::before{
  content:"";
  width:5px;height:5px;
  flex:none;
  margin-top:9px;
  border-radius:50%;
  background:var(--gold);
}

/* ============================================================
   الأعمال
   ============================================================ */
/* auto-fill مش auto-fit، عشان لو المشاريع قليلة الكرت ما يتمططش على عرض الصفحة.
   الكرت واسع عشان لقطة الموقع تبان، فبيطلع عمودين على الشاشة الكبيرة. */
.work{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,430px),1fr));
  gap:18px;
}

@media (max-width:719px){
  .work{grid-template-columns:1fr}
}

.wk{
  position:relative;
  aspect-ratio:4/3;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--ink-3);
  transition:transform .35s var(--ease), border-color .35s;
}
.wk:hover{transform:translateY(-6px);border-color:rgba(212,160,60,.45)}

.wk img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.wk:hover img{transform:scale(1.07)}

.wk__body{
  position:absolute;
  inset:auto 0 0 0;
  padding:46px 20px 18px;
  background:linear-gradient(180deg,transparent,rgba(10,7,9,.94) 62%);
}

.wk__cat{
  font-family:var(--latin);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.18em;
  color:var(--gold);
  display:block;
  margin-bottom:5px;
}

.wk__name{font-family:var(--display);font-weight:700;font-size:17px;display:block}

.wk__note{
  display:block;
  margin-top:6px;
  font-size:12.5px;
  line-height:1.75;
  color:var(--muted);
}

/* الكرت كله بيبقى لينك لو المشروع منشور */
.wk__link{
  display:block;
  width:100%;
  height:100%;
  color:inherit;
  text-decoration:none;
}

.wk__go{
  position:absolute;
  inset-block-start:14px;
  inset-inline-end:14px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(10,7,9,.72);
  border:1px solid rgba(212,160,60,.42);
  color:var(--gold-hi);
  backdrop-filter:blur(6px);
  opacity:0;
  transform:translateY(-6px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.wk:hover .wk__go{opacity:1;transform:none}
.wk__go svg{width:15px;height:15px}

/* الشكل المؤقت لحد ما تضيف صورك */
.wk--empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
  padding:26px;
  border-style:dashed;
  border-color:rgba(212,160,60,.28);
}

.wk--empty b{font-family:var(--display);font-size:16px;font-weight:700}
.wk--empty span{font-size:12.5px;color:var(--muted);line-height:1.8}

/* ============================================================
   طريقة العمل
   ============================================================ */
.arc{margin-bottom:-42px;pointer-events:none}
.arc svg{width:100%;height:130px;display:block}

.steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(228px,1fr));
  gap:20px;
  list-style:none;
  padding:0;
  margin:0;
}

.step{position:relative;padding-top:34px}

.step__pip{
  position:absolute;
  top:0;
  inset-inline-start:0;
  width:17px;height:17px;
  border-radius:50%;
  background:var(--ink);
  border:2px solid var(--gold);
  box-shadow:0 0 0 5px rgba(212,160,60,.12);
}
.step__pip::after{
  content:"";
  position:absolute;
  inset:3.5px;
  border-radius:50%;
  background:var(--grad-red);
  transform:scale(0);
  transition:transform .45s var(--ease);
}
.step.is-in .step__pip::after{transform:scale(1)}

.step__tag{
  display:block;
  font-family:var(--latin);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--gold);
  margin-bottom:8px;
}

.step h3{
  font-family:var(--display);
  font-weight:900;
  font-size:22px;
  margin:0 0 10px;
}

.step p{margin:0;font-size:14.5px;line-height:1.85;color:var(--muted)}

/* ============================================================
   الباقات
   ============================================================ */
.plans{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(276px,1fr));
  gap:18px;
  align-items:start;
}

.plan{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:34px 28px;
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(165deg,rgba(244,239,233,.045),rgba(244,239,233,.01));
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.plan:hover{
  transform:translateY(-6px);
  border-color:rgba(212,160,60,.42);
  box-shadow:0 22px 50px rgba(0,0,0,.5);
}

.plan--best{
  position:relative;
  border-color:rgba(212,160,60,.55);
  background:linear-gradient(165deg,rgba(200,18,31,.14),rgba(212,160,60,.05));
  box-shadow:0 0 0 1px rgba(212,160,60,.18), 0 24px 60px rgba(0,0,0,.5);
}

.plan__flag{
  position:absolute;
  top:-13px;
  inset-inline-end:28px;
  background:var(--grad-gold);
  color:var(--ink);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.03em;
  padding:5px 15px;
  border-radius:999px;
}

.plan__name{
  font-family:var(--display);
  font-weight:900;
  font-size:23px;
  margin:0;
}

.plan__for{margin:-12px 0 0;font-size:13px;color:var(--muted)}

.plan__price{
  display:flex;
  align-items:baseline;
  gap:8px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}

.plan__price b{
  font-family:var(--latin);
  font-size:42px;
  font-weight:800;
  line-height:1;
  background:var(--grad-gold);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-variant-numeric:tabular-nums;
}

.plan__price small{font-size:13.5px;color:var(--muted)}

.plan ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:11px;
  flex:1;
}

.plan ul li{display:flex;gap:11px;font-size:14.5px;line-height:1.65;color:var(--muted)}
.plan ul li::before{
  content:"";
  width:6px;height:6px;
  flex:none;
  margin-top:9px;
  border-radius:50%;
  background:var(--grad-red);
}

.plan__cta{width:100%}

.plans__note{
  margin:26px 0 0;
  font-size:14px;
  color:var(--muted);
  text-align:center;
}

/* ============================================================
   التواصل
   ============================================================ */
.contact__in{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:clamp(34px,5vw,68px);
  align-items:start;
}

.contact__list{
  list-style:none;
  padding:0;
  margin:34px 0 0;
  display:flex;
  flex-direction:column;
  gap:1px;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
}

.contact__list li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:15px 20px;
  background:rgba(244,239,233,.028);
}

.contact__list li > span:first-child{font-size:13px;color:var(--muted)}

.contact__val{
  font-family:var(--latin);
  font-size:15px;
  font-weight:600;
  direction:ltr;
  background:var(--grad-gold);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

a.contact__val{transition:opacity .2s}
a.contact__val:hover{opacity:.72}

/* الفورم */
.form{
  padding:clamp(24px,3.5vw,38px);
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(165deg,rgba(244,239,233,.05),rgba(244,239,233,.012));
  display:flex;
  flex-direction:column;
  gap:16px;
}

.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.field{display:flex;flex-direction:column;gap:7px}

.field label{font-size:13px;font-weight:500;color:var(--muted)}

.field input,
.field select,
.field textarea{
  font-family:var(--body);
  font-size:15px;
  color:var(--bone);
  background:rgba(10,7,9,.55);
  border:1px solid var(--line);
  border-radius:12px;
  padding:13px 15px;
  width:100%;
  transition:border-color .25s, background .25s;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--gold);
  background:rgba(10,7,9,.85);
}

.field input::placeholder,
.field textarea::placeholder{color:#6b5c58}

.field textarea{resize:vertical;line-height:1.8}

.field select option{background:var(--ink-3);color:var(--bone)}

.field input[aria-invalid="true"]{border-color:var(--red-hi)}

.form__send{margin-top:6px;width:100%}

.form__note{margin:0;font-size:13.5px;min-height:1.2em;text-align:center;color:var(--muted)}
.form__note.is-ok{color:#69d98a}
.form__note.is-bad{color:#ff7089}

/* ============================================================
   الفوتر
   ============================================================ */
.foot{
  border-top:1px solid var(--line);
  padding-block:34px;
  position:relative;
  z-index:1;
}

.foot__in{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.foot__links{display:flex;flex-wrap:wrap;gap:6px 20px}
.foot__links a{font-size:13.5px;color:var(--muted);transition:color .2s}
.foot__links a:hover{color:var(--gold)}

.foot__copy{margin:0;font-size:12.5px;color:var(--muted)}

/* زرار واتساب عائم */
.wa-fab{
  position:fixed;
  bottom:22px;
  inset-inline-end:22px;
  z-index:110;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:13px 20px;
  border-radius:999px;
  background:var(--grad-red);
  color:#fff;
  font-weight:600;
  font-size:14.5px;
  box-shadow:0 12px 34px rgba(200,18,31,.42);
  transition:transform .25s var(--ease), box-shadow .25s;
}
.wa-fab:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 18px 44px rgba(200,18,31,.54)}

/* ============================================================
   الأنميشن
   ============================================================ */
.anim{
  opacity:0;
  transform:translateY(26px);
}
body.is-ready .anim{
  animation:rise .85s var(--ease) forwards;
}
body.is-ready .anim[data-anim="1"]{animation-delay:.15s}
body.is-ready .anim[data-anim="2"]{animation-delay:.28s}
body.is-ready .anim[data-anim="3"]{animation-delay:.38s}
body.is-ready .anim[data-anim="4"]{animation-delay:.52s}
body.is-ready .anim[data-anim="5"]{animation-delay:.64s}
body.is-ready .anim[data-anim="6"]{animation-delay:.74s}

@keyframes rise{to{opacity:1;transform:none}}

.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-in{opacity:1;transform:none}

/* العناوين بتطلع كلمة ورا كلمة.
   بنقسم بالكلمة مش بالحرف عشان الحروف العربي تفضل متوصلة ببعض. */
/* العنوان المقسوم بيسيب الحركة لكلماته، فما يتحركش هو كمان */
.reveal.reveal--split{opacity:1;transform:none;transition:none}

.split{display:inline-block;overflow:hidden;vertical-align:top}

.split > span{
  display:inline-block;
  transform:translateY(105%);
  transition:transform .85s var(--ease);
}
.is-in .split > span{transform:none}

/* الزرار بيتسحب ناحية الماوس */
.magnet{will-change:transform}

/* ============================================================
   الموبايل
   ============================================================ */
@media (max-width:980px){
  .contact__in{grid-template-columns:1fr}
}

@media (max-width:880px){
  :root{--nav-h:66px}

  .burger{display:flex}

  .nav__links{
    position:fixed;
    inset:var(--nav-h) 0 auto 0;
    flex-direction:column;
    gap:0;
    padding:14px var(--pad) 26px;
    background:rgba(10,7,9,.97);
    backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);
    transform:translateY(-14px);
    opacity:0;
    visibility:hidden;
    transition:transform .32s var(--ease), opacity .32s, visibility .32s;
  }
  .nav__links.is-open{transform:none;opacity:1;visibility:visible}

  .nav__links a{
    padding:15px 4px;
    font-size:16px;
    border-bottom:1px solid var(--line);
  }
  .nav__links a::after{display:none}

  .hero__in{grid-template-columns:1fr}

  /* على الموبايل الهدف بيبقى خلفية ورا الكلام */
  .target{
    position:absolute;
    inset:0;
    margin:auto;
    width:min(600px,124vw);
    max-width:none;
    height:min(600px,124vw);
    opacity:.24;
    pointer-events:none;
  }

  .hero{min-height:auto;padding-block:calc(var(--nav-h) + 64px) 96px}

  .scroll-cue{display:none}

  .score{border-left:0;border-bottom:1px solid var(--line);padding:24px 14px}

  .form__row{grid-template-columns:1fr}

  .foot__in{flex-direction:column;text-align:center}

  .wa-fab span{display:none}
  .wa-fab{padding:15px;bottom:16px;inset-inline-end:16px}
}

@media (max-width:560px){
  .btn--lg{--btn-pad:15px 26px;font-size:15px}
  .hero__cta .btn{flex:1 1 100%}
  .arc{display:none}
}

/* ============================================================
   وضع الإنجليزي
   ============================================================ */
html[dir="ltr"] .nav__links a::after{transform-origin:left}

/* قوس مسار السهم بيتقلب عشان يفضل ماشي مع اتجاه القراءة */
html[dir="ltr"] .arc svg{transform:scaleX(-1)}

html[dir="ltr"] .hero__h1,
html[dir="ltr"] .h2,
html[dir="ltr"] .plan__name,
html[dir="ltr"] .step h3,
html[dir="ltr"] .card h3,
html[dir="ltr"] .boot__word{
  font-family:var(--latin);
  letter-spacing:-.025em;
}

html[dir="ltr"] .eyebrow,
html[dir="ltr"] .step__tag{letter-spacing:.16em;text-transform:uppercase}

/* ============================================================
   احترام تقليل الحركة
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }

  .anim,.reveal{opacity:1;transform:none}
  .split > span{transform:none}
  .snd[aria-pressed="true"] .snd__bars i{animation:none;height:11px}
  .ring{stroke-dashoffset:0}
  .target__bull,.target__arrow{opacity:1}
  .target__shock{display:none}
  .reticle{display:none}
}