/* ══════════════════════════════════════════════════════════════
   TOPA TRADERS — PARTNERS
   أسود فاخر · الأخضر Accent فقط · مساحات نظيفة · حركة ناعمة.
   كل الأصناف تبدأ بـ tpn- فلا تتصادم مع أي شيء في القالب.
   ══════════════════════════════════════════════════════════════ */

/* ─── إخفاء ترويسة/تذييل/نوافذ Kajabi الافتراضية — على هذه الصفحة وحدها ─── */
body:has(.topa-partners) #section-header,
body:has(.topa-partners) #section-footer,
body:has(.topa-partners) #section-exit_pop,
body:has(.topa-partners) #section-two_step,
html.tpn-host #section-header,
html.tpn-host #section-footer,
html.tpn-host #section-exit_pop,
html.tpn-host #section-two_step{display:none!important}

body:has(.topa-partners),
html.tpn-host body{background:#000!important}

body:has(.topa-partners) main,
html.tpn-host main{padding:0!important;margin:0!important;min-height:0!important}

.topa.topa-partners{
  --tpn-ink:#F4F2EC;
  --tpn-ink2:#A7A39C;
  --tpn-rule:rgba(255,255,255,.08);
  background:#000;color:var(--tpn-ink)
}

/* ══════════ الترويسة ══════════ */
.topa .tpn-hdr__in{display:flex;align-items:center;justify-content:space-between;gap:14px;height:66px}
.topa .tpn-brand{display:flex;align-items:center;gap:11px;min-height:44px;flex:none}
.topa .tpn-brand img{height:36px;width:36px;object-fit:contain;display:block}
.topa .tpn-brand b{font-size:12.5px;font-weight:600;color:var(--tpn-ink);letter-spacing:.14em;white-space:nowrap}
.topa .tpn-back{display:inline-flex;align-items:center;gap:7px;flex:none;
  min-height:40px;padding:0 15px;border-radius:9px;
  font-size:12.6px;font-weight:500;color:var(--tpn-ink2);
  border:1px solid var(--line2);background:rgba(255,255,255,.02);
  transition:color .24s,border-color .24s,background .24s,transform .24s var(--ez)}
.topa .tpn-back:hover{color:var(--w);border-color:var(--g30);background:var(--g08);transform:translateY(-1px)}
.topa .tpn-back svg{width:13px;height:13px;flex:none}

/* ══════════ عناصر مشتركة ══════════ */
.topa .tpn-kick{display:inline-flex;align-items:center;gap:10px;
  font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--g);margin-bottom:16px}
.topa .tpn-kick::before{content:"";width:24px;height:1px;background:var(--g45);flex:none}
.topa .tpn-h2{font-size:clamp(21px,2.5vw,29px);font-weight:600;line-height:1.5;
  letter-spacing:-.012em;color:var(--w)}
.topa .tpn-h2 em{font-style:normal;color:var(--g)}
.topa .tpn-lead{margin-top:14px;font-size:var(--sub);color:var(--tpn-ink2);line-height:2;max-width:56ch}

/* ══════════ الهيرو ══════════ */
.topa .tpn-hero{position:relative;overflow:hidden;
  padding-block:clamp(40px,5vw,74px) clamp(34px,4.2vw,58px);
  border-bottom:1px solid var(--tpn-rule)}
.topa .tpn-hero__glow{width:min(660px,94vw);height:min(660px,94vw);top:-56%;right:50%;
  transform:translateX(50%);background:radial-gradient(circle,var(--g12),transparent 68%)}
.topa .tpn-hero__in{position:relative;z-index:2;max-width:640px}
.topa .tpn-h1{font-size:clamp(24px,3vw,34px);font-weight:600;line-height:1.55;
  letter-spacing:-.014em;color:var(--w)}
.topa .tpn-h1 em{font-style:normal;color:var(--g)}
.topa .tpn-hero__p{margin-top:15px;font-size:var(--sub);color:var(--tpn-ink2);
  line-height:2.05;max-width:52ch}
.topa .tpn-hero__cta{margin-top:28px}

/* ══════════ الأزرار ══════════ */
.topa .tpn-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 26px;border-radius:11px;position:relative;overflow:hidden;
  font-size:14px;font-weight:600;color:#001603;background:var(--g);border:1px solid var(--g);
  transition:background .24s,transform .26s var(--ez),box-shadow .26s}
.topa .tpn-btn:hover{background:var(--g-lt);transform:translateY(-2px);
  box-shadow:0 14px 32px -14px rgba(6,206,42,.6)}
.topa .tpn-btn:active{transform:translateY(0)}
.topa .tpn-btn svg{width:15px;height:15px;flex:none;transition:transform .28s var(--ez)}
.topa .tpn-btn:hover svg{transform:translateX(-4px)}
/* لمعة خفيفة جداً عند التمرير */
.topa .tpn-btn::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,transparent 38%,rgba(255,255,255,.26) 50%,transparent 62%);
  transform:translateX(-140%)}
.topa .tpn-btn:hover::after{animation:tpnSheen .95s var(--ez) 1 both}
@keyframes tpnSheen{to{transform:translateX(140%)}}

.topa .tpn-btn--q{background:transparent;color:var(--g);border-color:var(--g30);font-weight:500}
.topa .tpn-btn--q:hover{background:var(--g08);border-color:var(--g45);color:var(--g-lt);box-shadow:none}
.topa .tpn-btn--q::after{display:none}

/* ══════════ مجالات التعاون — صفوف تحريرية لا كروت ضخمة ══════════ */
.topa .tpn-areas{margin-top:clamp(26px,3.2vw,40px);border-top:1px solid var(--tpn-rule)}
.topa .tpn-area{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2.2vw,28px);
  align-items:start;padding-block:clamp(24px,2.9vw,34px);
  border-bottom:1px solid var(--tpn-rule);
  transition:background .35s var(--ez)}
.topa .tpn-area:hover{background:linear-gradient(90deg,transparent,var(--g08) 60%,transparent)}
.topa .tpn-area__ic{width:44px;height:44px;border-radius:12px;flex:none;display:grid;place-items:center;
  color:var(--g);background:var(--g08);border:1px solid var(--g20);
  transition:background .35s,border-color .35s,transform .35s var(--ez)}
.topa .tpn-area__ic svg{width:20px;height:20px}
.topa .tpn-area:hover .tpn-area__ic{background:var(--g12);border-color:var(--g45);transform:translateY(-2px)}
.topa .tpn-area__t{font-size:clamp(16.5px,1.8vw,19px);font-weight:600;color:var(--w);
  line-height:1.55;margin-bottom:9px}
.topa .tpn-area__d{font-size:var(--body);color:var(--tpn-ink2);line-height:2.05;max-width:60ch}

/* ══════════ كيف تبدأ الشراكة — ثلاث خطوات ══════════ */
.topa .tpn-steps{position:relative;margin-top:clamp(26px,3.2vw,40px)}
/* الخط الواصل: يبدأ مرسوماً، والانكماش يُضاف بعد تأكيد عمل JavaScript */
.topa .tpn-steps__line{position:absolute;top:25px;right:14%;left:14%;height:1px;z-index:0;
  background:linear-gradient(270deg,var(--g45),var(--line2) 60%,var(--line2));
  transform-origin:right center}
.topa .topa-partners.tpn-armed .tpn-steps__line{transform:scaleX(0)}
.topa .topa-partners.tpn-armed .tpn-steps.is-in .tpn-steps__line{
  animation:tpnLine 1.05s cubic-bezier(.4,0,.2,1) .1s both}
@keyframes tpnLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.topa .tpn-steps__g{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2.2vw,30px)}
.topa .tpn-step{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:0 clamp(4px,1vw,12px)}
.topa .tpn-step__n{width:50px;height:50px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:14px;font-weight:600;color:var(--g);direction:ltr;unicode-bidi:isolate;
  background:#000;border:1px solid var(--g30);margin-bottom:16px;
  transition:background .32s,border-color .32s,transform .32s var(--ez)}
.topa .tpn-step:hover .tpn-step__n{background:var(--g08);border-color:var(--g45);transform:translateY(-2px)}
.topa .tpn-step__t{font-size:16px;font-weight:600;color:var(--w);line-height:1.55;margin-bottom:8px}
.topa .tpn-step__d{font-size:var(--body);color:var(--tpn-ink2);line-height:2;max-width:34ch}

/* ══════════ الفلسفة — إطار زجاجي فاخر ══════════ */
.topa .tpn-phil{position:relative;overflow:hidden;
  max-width:820px;margin-inline:auto;padding:clamp(28px,3.6vw,50px);
  border-radius:18px;text-align:center;
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.018));
  -webkit-backdrop-filter:blur(16px) saturate(120%);backdrop-filter:blur(16px) saturate(120%);
  border:1px solid var(--line)}
/* خط أخضر رفيع في الأعلى */
.topa .tpn-phil::before{content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,var(--g),transparent)}
.topa .tpn-phil__glow{position:absolute;width:min(460px,90%);aspect-ratio:1;top:-58%;right:50%;
  transform:translateX(50%);border-radius:50%;pointer-events:none;filter:blur(76px);
  background:radial-gradient(circle,var(--g12),transparent 66%)}
.topa .tpn-phil__in{position:relative;z-index:2}
.topa .tpn-phil__t{font-size:clamp(19px,2.3vw,27px);font-weight:600;color:var(--w);line-height:1.6}
.topa .tpn-phil__d{margin:15px auto 0;font-size:var(--sub);color:var(--tpn-ink2);
  line-height:2.05;max-width:52ch}

/* ══════════ الدعوة النهائية ══════════ */
.topa .tpn-fin{position:relative;overflow:hidden;text-align:center;
  max-width:620px;margin-inline:auto}
.topa .tpn-fin__t{font-size:clamp(20px,2.5vw,29px);font-weight:600;color:var(--w);line-height:1.55}
.topa .tpn-fin__d{margin:14px auto 26px;font-size:var(--sub);color:var(--tpn-ink2);
  line-height:2;max-width:46ch}
.topa .tpn-fin__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:11px}

/* ══════════ التذييل ══════════ */
.topa .tpn-ft{border-top:1px solid var(--tpn-rule);padding-block:28px 26px;background:#000}
.topa .tpn-ft__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px 22px;font-size:12.2px;color:var(--tx3)}
.topa .tpn-ft__in nav{display:flex;flex-wrap:wrap;gap:2px 18px}
.topa .tpn-ft__in a{display:inline-flex;align-items:center;min-height:40px;transition:color .2s}
.topa .tpn-ft__in a:hover{color:var(--g)}

/* ══════════ الظهور عند التمرير ══════════
   الإخفاء لا يُضاف إلا بعد أن يؤكّد JavaScript عمله، فتبقى الصفحة
   كاملة الظهور لو تعطّل الملف تماماً. */
.topa .topa-partners.tpn-armed [data-tpn]{opacity:0;transform:translateY(18px);
  transition:opacity .78s var(--ez),transform .78s var(--ez)}
.topa .topa-partners.tpn-armed [data-tpn].is-in{opacity:1;transform:none}
.topa .topa-partners.tpn-armed [data-tpn-stagger] > *{opacity:0;transform:translateY(20px);
  transition:opacity .72s var(--ez),transform .72s var(--ez)}
.topa .topa-partners.tpn-armed [data-tpn-stagger].is-in > *{opacity:1;transform:none}
.topa .topa-partners.tpn-armed [data-tpn-stagger].is-in > *:nth-child(1){transition-delay:.05s}
.topa .topa-partners.tpn-armed [data-tpn-stagger].is-in > *:nth-child(2){transition-delay:.16s}
.topa .topa-partners.tpn-armed [data-tpn-stagger].is-in > *:nth-child(3){transition-delay:.27s}
.topa .topa-partners.tpn-armed [data-tpn-stagger].is-in > *:nth-child(4){transition-delay:.38s}

/* ══════════ التجاوب ══════════ */
@media (max-width:900px){
  .topa .tpn-steps__g{grid-template-columns:1fr;gap:0}
  .topa .tpn-steps__line{top:0;bottom:0;right:24px;left:auto;width:1px;height:auto;
    transform-origin:center top;
    background:linear-gradient(180deg,var(--g45),var(--line2) 60%,var(--line2))}
  .topa .topa-partners.tpn-armed .tpn-steps__line{transform:scaleY(0)}
  .topa .topa-partners.tpn-armed .tpn-steps.is-in .tpn-steps__line{animation-name:tpnLineV}
  @keyframes tpnLineV{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  .topa .tpn-step{flex-direction:row;align-items:flex-start;text-align:right;gap:15px;
    padding:0 0 clamp(22px,3.4vw,30px) 0}
  .topa .tpn-step:last-child{padding-bottom:0}
  .topa .tpn-step__n{margin-bottom:0}
  .topa .tpn-step__d{max-width:none}
}
@media (max-width:680px){
  .topa .tpn-hdr__in{height:60px}
  .topa .tpn-brand img{height:32px;width:32px}
  .topa .tpn-btn{width:100%;min-height:52px;padding:0 18px}
  .topa .tpn-fin__btns{flex-direction:column;align-items:stretch}
  .topa .tpn-area{grid-template-columns:1fr;gap:13px}
  .topa .tpn-phil{padding:26px 20px;border-radius:16px}
  .topa .tpn-ft__in{flex-direction:column;align-items:flex-start}
}
@media (max-width:400px){
  .topa .tpn-brand b{display:none}
  .topa .tpn-brand{min-width:44px;justify-content:center}
  .topa .tpn-area__d,.topa .tpn-step__d{font-size:13.4px}
}

/* ══════════ تقليل الحركة ══════════ */
@media (prefers-reduced-motion:reduce){
  .topa .topa-partners.tpn-armed [data-tpn],
  .topa .topa-partners.tpn-armed [data-tpn-stagger] > *{opacity:1;transform:none;transition:none}
  .topa .topa-partners.tpn-armed .tpn-steps__line{transform:none!important;animation:none!important}
  .topa .tpn-btn::after{animation:none!important;opacity:0!important}
  .topa .tpn-area,.topa .tpn-btn,.topa .tpn-back,.topa .tpn-step__n{transition-duration:.001ms}
}