/* ============================================================
   1. المتغيرات (Variables)
   ============================================================ */
:root{
  /* الألوان */
  --black:#000000;
  --green:#7ed957;
  --white:#ffffff;

  /* اشتقاقات اللون الأخضر */
  --green-soft:rgba(126,217,87,.12);
  --green-line:rgba(126,217,87,.28);
  --green-glow:rgba(126,217,87,.35);

  /* التوهج الأزرق — خاص ببطاقات الوسطاء فقط */
  --blue:#4d9eff;
  --blue-line:rgba(77,158,255,.32);
  --blue-glow:rgba(77,158,255,.4);

  /* الأسطح الزجاجية */
  --glass:rgba(255,255,255,.045);
  --glass-hover:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.1);
  --muted:rgba(255,255,255,.58);
  --plate:rgba(255,255,255,.06);   /* خلفية لوحة الشعار */

  /* الخط والشكل */
  --font:'Tajawal',system-ui,'Segoe UI',sans-serif;
  --radius:20px;
  --radius-pill:999px;

  /* الحركة */
  --ease:cubic-bezier(.22,1,.36,1);
  --fast:.2s;
}

/* ============================================================
   2. الأساسيات (Reset)
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

body{
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:3rem 1.25rem;
  font-family:var(--font);
  color:var(--white);
  background:var(--black);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}

/* توهج أخضر خفيف في الخلفية
   ملاحظة: أُزيل filter:blur(100px) لأنه أغلى تأثير في الصفحة،
   والتدرج الشعاعي ناعم أصلاً — النتيجة البصرية شبه مطابقة */
body::before,body::after{
  content:"";
  position:fixed;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
}
body::before{
  top:-16vh;left:50%;transform:translateX(-50%);
  width:min(34rem,95vw);height:min(34rem,95vw);
  background:radial-gradient(circle,var(--green-glow) 0%,rgba(126,217,87,.12) 40%,transparent 72%);
  opacity:.55;
}
body::after{
  bottom:-20vh;left:-10vw;
  width:min(24rem,80vw);height:min(24rem,80vw);
  background:radial-gradient(circle,#0b1408 0%,rgba(11,20,8,.5) 45%,transparent 74%);
}

/* ============================================================
   3. الهيكل العام
   ============================================================ */
.wrap{
  position:relative;
  z-index:1;
  width:100%;
  max-width:30rem;
  text-align:center;
}

/* ============================================================
   4. الشعار والعنوان
   ============================================================ */
.logo-ring{
  width:112px;height:112px;
  margin:0 auto 1.4rem;
  display:grid;place-items:center;
  border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 55%,var(--green) 80%,transparent 100%);
  animation:spin 8s linear infinite;
}

.logo{
  width:104px;height:104px;
  display:grid;place-items:center;
  overflow:hidden;
  background:var(--black);
  border-radius:50%;
  animation:spin-back 8s linear infinite;
}

/* الشعار المحلي: contain للحفاظ على النسبة ومنع القص */
.logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:14px;
}

h1{
  font-size:clamp(1.9rem,7vw,2.4rem);
  font-weight:700;
  letter-spacing:-.02em;
  direction:ltr;
}

.desc{
  max-width:20rem;
  margin:.5rem auto 0;
  font-size:.85rem;
  line-height:1.6;
  color:var(--muted);
}

/* ============================================================
   5. بطاقة اسم المستخدم
   ============================================================ */
.card{
  margin-top:2rem;
  padding:1rem 1.1rem;
  background:var(--glass);
  border:1px solid var(--border);
  border-radius:var(--radius);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  text-align:right;
}

.card__label{
  font-size:.8rem;
  font-weight:500;
  color:var(--muted);
}

.card__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-top:.35rem;
}

.card__value{
  direction:ltr;
  font-size:1.15rem;
  font-weight:500;
  color:var(--green);
  overflow-wrap:anywhere;
}

.copy{
  flex-shrink:0;
  padding:.5rem 1.1rem;
  font-size:.9rem;
  font-weight:700;
  color:var(--black);
  background:var(--green);
  border-radius:var(--radius-pill);
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}
.copy:hover{transform:translateY(-2px);box-shadow:0 0 0 5px var(--green-soft)}
.copy:active{transform:scale(.94)}
.copy.done{background:transparent;color:var(--green);box-shadow:inset 0 0 0 1px var(--green-line)}

/* ============================================================
   6. زر تيليجرام
   ============================================================ */
.links{
  display:flex;
  flex-direction:column;
  gap:.85rem;
  margin-top:1.1rem;
}

.btn{
  position:relative;
  overflow:hidden;
  display:flex;               /* صف: الشعار + النص */
  align-items:center;
  gap:.9rem;
  text-align:right;
  padding:1rem 1.15rem;
  background:var(--glass);
  border:1px solid var(--border);
  border-radius:var(--radius);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:transform var(--fast) var(--ease),
             background var(--fast) var(--ease),
             border-color var(--fast) var(--ease),
             box-shadow var(--fast) var(--ease);
}

/* لمعة تمر فوق الزر عند المرور بالمؤشر */
.btn::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 25%,var(--green-soft) 50%,transparent 75%);
  transform:translateX(100%);
  opacity:0;
  transition:transform .75s var(--ease),opacity .2s var(--ease);
  pointer-events:none;
}
.btn:hover::before{transform:translateX(-100%);opacity:1}

.btn:hover{
  transform:translateY(-3px);
  background:var(--glass-hover);
  border-color:var(--green-line);
  box-shadow:0 0 28px -8px var(--green-glow);
}
.btn:active{transform:scale(.98)}

.btn__text{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.btn__title{
  display:block;
  font-size:1.05rem;
  font-weight:700;
}

.btn__sub{
  margin-top:.15rem;
  font-size:.85rem;
  font-weight:400;
  color:var(--muted);
  line-height:1.5;
}

/* لوحة شعار تيليجرام — نفس مقاس لوحات الوسطاء */
.btn__logo{
  flex-shrink:0;
  box-sizing:border-box;
  overflow:hidden;
  width:64px;
  height:64px;
  border-radius:16px;
}

.btn__logo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;    /* غيّرها إلى contain إذا كان شعارك بخلفية شفافة */
}

.btn--primary{
  border-color:var(--green-line);
  box-shadow:0 0 24px -12px var(--green-glow);
}

/* ============================================================
   7. بطاقات الوسطاء
   ============================================================ */
.broker{
  position:relative;
  overflow:hidden;
  display:block;
  padding:1.15rem 1.15rem 1rem;
  background:var(--glass);
  border:1px solid var(--border);
  border-radius:var(--radius);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  text-align:right;
  transition:transform var(--fast) var(--ease),
             background var(--fast) var(--ease),
             border-color var(--fast) var(--ease),
             box-shadow var(--fast) var(--ease);
}

.broker::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.07) 50%,transparent 75%);
  transform:translateX(100%);
  opacity:0;
  transition:transform .75s var(--ease),opacity .2s var(--ease);
  pointer-events:none;
}
.broker:hover::before{transform:translateX(-100%);opacity:1}

/* التوهج الأزرق — استبدل var(--blue-glow) بـ var(--green-glow) للعودة للأخضر [1/3] */
.broker:hover{
  transform:translateY(-4px);
  background:var(--glass-hover);
  border-color:var(--blue-line);
  box-shadow:0 0 34px -8px var(--blue-glow);
}
.broker:active{transform:scale(.985)}

/* الصف العلوي: الشعار + النص */
.broker__head{
  display:flex;
  align-items:center;
  gap:.9rem;
}

/* لوحة الشعار: أبعاد ثابتة، والصورة بداخلها لا تتمدد */
.broker__logo{
  flex-shrink:0;
  box-sizing:border-box;      /* يمنع الخروج عن حدود البطاقة */
  overflow:hidden;            /* يقصّ أي زيادة داخل الزوايا الدائرية */
  width:64px;
  height:64px;                /* مربّع — يناسب الشعارات المربّعة والنصية معًا */
  padding:6px;
  background:var(--plate);
  border:1px solid var(--border);
  border-radius:16px;
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease);
}

/* الصورة تملأ اللوحة تمامًا و contain يحافظ على النسبة بلا تمدد */
.broker__logo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

/* للشعارات التي لها خلفية ملوّنة خاصة بها (مثل أيقونة Exness الصفراء
   وأيقونة JustMarkets الزرقاء): تملأ اللوحة كلها بلا هامش */
.broker__logo--full{
  padding:0;
  background:transparent;
  border-color:transparent;
}
.broker__logo--full img{object-fit:cover}
.broker:hover .broker__logo--full{background:transparent;border-color:transparent}

/* [2/3] */
.broker:hover .broker__logo{
  background:rgba(255,255,255,.1);
  border-color:var(--blue-line);
}

/* النصوص */
.broker__text{display:flex;flex-direction:column;min-width:0}

.broker__name{
  direction:ltr;
  text-align:right;
  font-size:1.15rem;
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.3;
}

.broker__sub{
  margin-top:.15rem;
  font-size:.88rem;
  font-weight:400;
  color:var(--muted);
  line-height:1.5;
}

/* زر الإجراء داخل البطاقة */
.broker__cta{
  display:block;
  margin-top:1rem;
  padding:.8rem 1rem;
  font-size:.95rem;
  font-weight:700;
  text-align:center;
  color:var(--black);
  background:var(--green);
  border-radius:14px;
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}

/* [3/3] */
.broker:hover .broker__cta{
  transform:translateY(-1px);
  box-shadow:0 6px 20px -6px var(--blue-glow);
}

/* ============================================================
   8. التذييل
   ============================================================ */
footer{
  margin-top:2.5rem;
  padding-top:1.25rem;
  border-top:1px solid var(--border);
  font-size:.85rem;
  color:var(--muted);
}

/* ============================================================
   9. الحركات
   ============================================================ */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spin-back{to{transform:rotate(-360deg)}}
@keyframes fade-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.reveal{
  opacity:0;
  animation:fade-up .65s var(--ease) forwards;
  animation-delay:var(--delay,0ms);
}

/* ============================================================
   10. الوصولية والاستجابة
   ============================================================ */
:focus-visible{outline:2px solid var(--green);outline-offset:3px}

.sr-only{
  position:absolute;width:1px;height:1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

@media (max-width:380px){
  .card__value{font-size:1rem}
  .btn{padding:1rem}
}

@media (max-width:360px){
  .broker__logo,.btn__logo{width:56px;height:56px}
  .broker__name{font-size:1.05rem}
  .broker__sub{font-size:.82rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  .broker::before,.btn::before{display:none}
}

/* ============================================================
   11. الرسم المتحرك ثلاثي الأبعاد (EA) — خفيف وغير معيق
   ============================================================ */
.stage{
  position:relative;
  width:100%;
  margin:.35rem auto -.35rem;
  aspect-ratio:16/7;      /* يحجز المساحة مسبقًا — لا قفزات في التخطيط */
  pointer-events:none;
  user-select:none;
  contain:layout paint;   /* عزل بدون تقييد الحجم */
}

/* تلاشي الحواف ليندمج مع الخلفية السوداء */
.stage::after{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(to right,var(--black),transparent 18%,transparent 82%,var(--black)),
    linear-gradient(to bottom,var(--black),transparent 22%,transparent 74%,var(--black));
  pointer-events:none;
}

/* الكانفس يظهر بهدوء بعد جاهزيته فقط */
.stage canvas{
  display:block;
  width:100%;
  height:100%;
  opacity:0;
  transition:opacity .8s var(--ease);
}
.stage canvas.is-ready{opacity:.9}

@media (max-width:380px){
  .stage{aspect-ratio:16/8}
  .stage canvas.is-ready{opacity:.8}
}

@media (prefers-reduced-motion:reduce){
  .stage canvas{transition:none}
  .stage canvas.is-ready{opacity:.5}
}

/* ============================================================
   12. تحسينات الأداء على الهواتف
   ============================================================ */

/* backdrop-filter مكلف جدًا على معالجات الهواتف الرسومية:
   يُستبدل بخلفية شبه شفافة أغمق قليلاً — الفرق البصري
   غير ملحوظ فوق خلفية سوداء، والمكسب في الأداء كبير */
@media (max-width:768px){
  .card,.btn,.broker{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:rgba(255,255,255,.055);
  }
  .btn:hover,.broker:hover{background:rgba(255,255,255,.085)}
}

/* على الأجهزة اللمسية لا فائدة من تأثيرات hover — إزالتها
   تمنع حسابات ورسمًا لا يراها المستخدم أبدًا */
@media (hover:none){
  .btn::before,.broker::before{display:none}
  .btn:hover,.broker:hover,.copy:hover{transform:none}
  .btn:hover{box-shadow:0 0 24px -12px var(--green-glow)}
  .broker:hover{box-shadow:none;border-color:var(--border)}
  .broker:hover .broker__logo{background:var(--plate);border-color:var(--border)}
  .broker:hover .broker__cta{transform:none;box-shadow:none}
}

/* عزل الشعار الدوّار في طبقة مستقلة حتى لا يعيد رسم ما حوله */
.logo-ring,.logo{will-change:transform}