/* ══════════════════════════════════════════════════════════════
   TOPA TRADERS — Components
   كل مكوّن هنا قابل لإعادة الاستخدام في أي Landing Page.
   يعتمد كلياً على المتغيرات في topa-tokens.css
   ══════════════════════════════════════════════════════════════ */

/* ─── الأساس ─── */
.topa{direction:rtl;text-align:right;font-family:var(--font);background:var(--bg);color:var(--tx);
  font-size:var(--body);line-height:var(--lh-b);font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;position:relative;isolation:isolate}
.topa *,.topa *::before,.topa *::after{box-sizing:border-box}
.topa h1,.topa h2,.topa h3,.topa h4,.topa p,.topa ul,.topa ol,.topa figure{margin:0;padding:0}
.topa ul,.topa ol{list-style:none}
.topa img,.topa svg{max-width:100%;display:block}
.topa a{color:inherit;text-decoration:none}
.topa button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.topa :focus-visible{outline:2px solid var(--g);outline-offset:3px;border-radius:5px}

/* ─── التخطيط ─── */
.topa .t-wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.topa .t-sec{padding-block:var(--sp);position:relative}
.topa .t-sec--alt{background:var(--s1);border-block:1px solid var(--line)}
.topa .t-grid{display:grid;gap:var(--gap)}
.topa .t-grid--2{grid-template-columns:repeat(2,1fr)}
.topa .t-grid--3{grid-template-columns:repeat(3,1fr)}

/* ─── رأس القسم ─── */
.topa .t-hd{max-width:var(--measure);margin-bottom:clamp(28px,3.4vw,44px)}
.topa .t-hd--c{margin-inline:auto;text-align:center}
.topa .t-kick{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;
  letter-spacing:.06em;color:var(--g);margin-bottom:12px}
.topa .t-kick::before{content:"";width:14px;height:1.5px;background:currentColor;flex:none}
.topa .t-hd--c .t-kick::after{content:"";width:14px;height:1.5px;background:currentColor;flex:none}
.topa .t-h1{font-size:var(--h1);font-weight:600;line-height:var(--lh-h);letter-spacing:-.018em;
  color:var(--w);text-wrap:pretty}
.topa .t-h2{font-size:var(--h2);font-weight:600;line-height:var(--lh-h);letter-spacing:-.012em;
  color:var(--w);text-wrap:pretty}
.topa .t-h1 em,.topa .t-h2 em{font-style:normal;color:var(--g)}
.topa .t-sub{margin-top:13px;font-size:var(--sub);color:var(--tx2);line-height:1.9;max-width:var(--measure)}
.topa .t-hd--c .t-sub{margin-inline:auto}

/* ─── الأزرار ─── */
.topa .t-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:0 24px;min-height:var(--btn-h);border-radius:var(--r);font-size:14.5px;font-weight:500;
  line-height:1.4;white-space:nowrap;border:1px solid transparent;
  transition:background .24s var(--ez),border-color .24s,color .24s,transform .24s var(--ez),box-shadow .24s}
.topa .t-btn svg{width:14px;height:14px;flex:none;transition:transform .26s var(--ez)}
.topa .t-btn:hover svg{transform:translateX(-4px)}
.topa .t-btn--p{background:var(--g);color:#001603;font-weight:600}
.topa .t-btn--p:hover{background:var(--g-lt);transform:translateY(-1px);box-shadow:0 6px 18px -8px rgba(6,206,42,.5)}
.topa .t-btn--p:active{transform:translateY(0)}
.topa .t-btn--s{background:rgba(255,255,255,.02);color:var(--w);border-color:var(--g30)}
.topa .t-btn--s:hover{background:var(--g08);border-color:var(--g45);transform:translateY(-1px)}
.topa .t-btn--q{background:transparent;color:var(--tx);border-color:var(--line2)}
.topa .t-btn--q:hover{border-color:var(--line3);background:rgba(255,255,255,.035);transform:translateY(-1px)}
.topa .t-btn--sm{min-height:42px;padding:0 17px;font-size:13px}
.topa .t-btn--w{width:100%}
.topa .t-btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.topa .t-btns--c{justify-content:center}

/* ─── الخلفيات الهندسية ─── */
.topa .t-grid-bg{position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.042) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.042) 1px,transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(ellipse 74% 58% at 50% 34%,#000 8%,transparent 74%);
  mask-image:radial-gradient(ellipse 74% 58% at 50% 34%,#000 8%,transparent 74%)}
.topa .t-glow{position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(86px)}

/* ─── بطاقة زجاجية ─── */
.topa .t-glass{background:linear-gradient(160deg,var(--gl2),var(--gl));
  -webkit-backdrop-filter:blur(14px) saturate(120%);backdrop-filter:blur(14px) saturate(120%);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);
  position:relative;overflow:hidden;
  transition:border-color .3s var(--ez),transform .3s var(--ez),background .3s}
.topa .t-glass::before{content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);opacity:0;transition:opacity .3s}
.topa .t-glass:hover{transform:translateY(-3px);border-color:var(--g30)}
.topa .t-glass:hover::before{opacity:1}
.topa .t-card{padding:clamp(20px,2.3vw,26px)}
.topa .t-card__t{font-size:var(--h3);font-weight:600;color:var(--w);line-height:1.5;margin-bottom:7px}
.topa .t-card__d{font-size:var(--body);color:var(--tx2);line-height:1.9}

/* ─── الأيقونة ─── */
.topa .t-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;margin-bottom:15px;
  background:var(--g08);border:1px solid var(--g20);color:var(--g);
  transition:transform .32s var(--ez),background .3s,border-color .3s}
.topa .t-ic svg{width:19px;height:19px}
.topa .t-glass:hover .t-ic{transform:translateY(-2px) scale(1.06);background:var(--g12);border-color:var(--g45)}
.topa .t-ic--sm{width:34px;height:34px;border-radius:9px;margin-bottom:0}
.topa .t-ic--sm svg{width:16px;height:16px}

/* ─── إحصائيات الثقة — شفافة بلا كروت ─── */
.topa .t-stats{position:relative;z-index:2;padding-block:clamp(22px,2.6vw,30px) 0;border-top:1px solid var(--line)}
.topa .t-stats__row{display:grid;grid-template-columns:repeat(4,1fr)}
.topa .t-stats__i{padding:4px clamp(10px,1.6vw,22px);text-align:center;position:relative}
.topa .t-stats__i + .t-stats__i::before{content:"";position:absolute;inset-block:6px;right:0;width:1px;
  background:linear-gradient(180deg,transparent,var(--line2) 22%,var(--line2) 78%,transparent)}
.topa .t-stats__v{font-size:clamp(16px,1.88vw,23px);font-weight:600;color:var(--g);line-height:1.25;
  letter-spacing:-.02em;direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.topa .t-stats__v--ar{direction:rtl;font-size:clamp(12px,1.28vw,16px)}
.topa .t-stats__l{font-size:12px;color:var(--tx3);margin-top:7px;line-height:1.7}
.topa .t-note{font-size:11.8px;color:var(--tx3);text-align:center;line-height:1.85;
  max-width:760px;margin-inline:auto}

/* ─── صف أفقي (فوائد بلا كروت) ─── */
.topa .t-row{display:flex;gap:14px;padding:clamp(16px,1.9vw,20px) 0;border-bottom:1px solid var(--line)}
.topa .t-row:first-child{border-top:1px solid var(--line)}
.topa .t-row__t{font-size:var(--h3);font-weight:600;color:var(--w);margin-bottom:5px;line-height:1.5;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.topa .t-row__d{font-size:var(--body);color:var(--tx2);line-height:1.9}
.topa .t-row:hover .t-ic{transform:translateY(-2px) scale(1.06);background:var(--g12);border-color:var(--g45)}
.topa .t-tag{font-size:10.5px;font-weight:600;color:var(--g);background:var(--g08);
  border:1px solid var(--g20);padding:2px 9px;border-radius:6px}

/* ─── الأسئلة الشائعة ─── */
.topa .t-faq{max-width:780px;margin-inline:auto}
.topa .t-q{border-bottom:1px solid var(--line)}
.topa .t-q__b{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 2px;text-align:right;font-size:15px;font-weight:500;color:var(--w);line-height:1.65;
  transition:color .2s;min-height:56px}
.topa .t-q__b:hover{color:var(--g)}
.topa .t-q__i{width:26px;height:26px;border-radius:7px;border:1px solid var(--line2);flex:none;
  display:grid;place-items:center;position:relative;transition:.26s var(--ez)}
.topa .t-q__i::before,.topa .t-q__i::after{content:"";position:absolute;background:currentColor;border-radius:1px}
.topa .t-q__i::before{width:9px;height:1.5px}
.topa .t-q__i::after{width:1.5px;height:9px;transition:opacity .26s}
.topa .t-q.is-open .t-q__i{background:var(--g);border-color:var(--g);color:#001603}
.topa .t-q.is-open .t-q__i::after{opacity:0}
.topa .t-q__p{padding:0 2px 18px}
.topa .t-q__c{font-size:var(--body);color:var(--tx2);line-height:2;max-width:68ch}
.topa .t-q__c b{color:var(--tx);font-weight:500}
.topa.tp-js .t-q__p{overflow:hidden;height:0;padding-bottom:0;transition:height .34s var(--ez)}
.topa.tp-js .t-q__inner{padding:0 2px 18px}

/* ─── الهيدر ─── */
.topa .t-hdr{position:sticky;top:0;z-index:80;background:rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;transition:border-color .25s,background .25s}
.topa .t-hdr.is-stuck{border-bottom-color:var(--line);background:rgba(0,0,0,.95)}
.topa .t-hdr__in{display:flex;align-items:center;gap:clamp(14px,2.2vw,32px);height:66px}
.topa .t-logo{display:flex;align-items:center;flex:none;min-height:44px}
.topa .t-logo img{height:38px;width:38px;object-fit:contain;display:block}
.topa .t-nav{display:flex;align-items:center;gap:clamp(13px,1.7vw,24px);margin-inline-end:auto}
.topa .t-nav a{font-size:13.5px;color:var(--tx2);padding:7px 0;transition:color .2s}
.topa .t-nav a:hover{color:var(--w)}
.topa .t-hdr__act{display:flex;align-items:center;gap:10px;flex:none}
.topa .t-login{font-size:13.5px;color:var(--tx2);padding:8px 5px;min-height:44px;
  display:flex;align-items:center;transition:color .2s}
.topa .t-login:hover{color:var(--w)}
.topa .t-burger{display:none;width:40px;height:40px;border:1px solid var(--line2);border-radius:9px;
  align-items:center;justify-content:center;flex:none}
.topa .t-burger span{display:block;width:16px;height:1.5px;background:var(--w);position:relative;transition:.26s var(--ez)}
.topa .t-burger span::before,.topa .t-burger span::after{content:"";position:absolute;right:0;
  width:16px;height:1.5px;background:var(--w);transition:.26s var(--ez)}
.topa .t-burger span::before{top:-5.5px}
.topa .t-burger span::after{top:5.5px}
.topa .t-burger.is-open span{background:transparent}
.topa .t-burger.is-open span::before{top:0;transform:rotate(45deg)}
.topa .t-burger.is-open span::after{top:0;transform:rotate(-45deg)}
.topa .t-mob{display:none;position:fixed;inset:66px 0 0;z-index:79;background:var(--bg);
  padding:22px var(--pad) 30px;overflow-y:auto}
.topa .t-mob.is-open{display:block}
.topa .t-mob a.t-mob__l{display:flex;align-items:center;justify-content:space-between;padding:15px 2px;
  font-size:15.5px;color:var(--tx);border-bottom:1px solid var(--line);min-height:52px}
.topa .t-mob a.t-mob__l svg{width:14px;height:14px;color:var(--tx3)}
.topa .t-mob__cta{margin-top:22px;display:grid;gap:10px}
.topa .t-mob__meta{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--tx3);line-height:2}

/* ─── الفوتر ─── */
.topa .t-ft{background:var(--bg);padding-block:clamp(40px,4.8vw,62px) 26px}
.topa .t-ft__g{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:clamp(24px,3vw,40px);
  padding-bottom:clamp(26px,3vw,38px);border-bottom:1px solid var(--line)}
.topa .t-ft__logo{display:inline-flex;align-items:center;gap:11px;margin-bottom:14px;min-height:44px}
.topa .t-ft__logo img{height:40px;width:40px;object-fit:contain;display:block}
.topa .t-ft__logo b{font-size:14px;font-weight:600;color:var(--w);letter-spacing:.02em}
.topa .t-ft__ab{font-size:13.2px;color:var(--tx2);line-height:1.95;max-width:36ch}
.topa .t-ft__soc{display:flex;gap:9px;margin-top:16px}
.topa .t-ft__soc a{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--tx2);
  transition:color .22s,border-color .22s,background .22s,transform .22s var(--ez)}
.topa .t-ft__soc a:hover{color:var(--g);border-color:var(--g30);background:var(--g08);transform:translateY(-2px)}
.topa .t-ft__soc svg{width:17px;height:17px}
.topa .t-ft__h{font-size:12.8px;font-weight:600;color:var(--w);margin-bottom:14px}
.topa .t-ft__l{display:grid;gap:10px}
.topa .t-ft__l a{font-size:13.2px;color:var(--tx2);transition:color .2s}
.topa .t-ft__l a:hover{color:var(--g)}
.topa .t-ft__ct{display:grid;gap:11px}
.topa .t-ft__ct a,.topa .t-ft__ct span{display:flex;align-items:flex-start;gap:10px;
  font-size:12.8px;color:var(--tx2);line-height:1.75;transition:color .2s}
.topa .t-ft__ct a:hover{color:var(--g)}
.topa .t-ft__ct svg{width:15px;height:15px;color:var(--tx3);flex:none;margin-top:4px}
.topa .t-ft__dis{padding-block:20px;border-bottom:1px solid var(--line);
  font-size:11.8px;color:var(--tx3);line-height:2.05}
.topa .t-ft__dis b{color:var(--tx2);font-weight:500}
.topa .t-ft__bot{padding-top:18px;display:flex;flex-wrap:wrap;gap:11px 20px;align-items:center;
  justify-content:space-between;font-size:12.2px;color:var(--tx3)}
.topa .t-ft__bot nav{display:flex;flex-wrap:wrap;gap:8px 17px}
.topa .t-ft__bot a:hover{color:var(--g)}

/* ─── شريط CTA لاصق للجوال ─── */
.topa .t-sticky{position:fixed;bottom:0;right:0;left:0;z-index:70;display:none;
  padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(0,0,0,.96);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-top:1px solid var(--line)}
.topa.tp-js .t-sticky{transform:translateY(102%);transition:transform .32s var(--ez)}
.topa.tp-js .t-sticky.is-on{transform:translateY(0)}
.topa .t-sticky__in{display:flex;align-items:center;gap:12px}
.topa .t-sticky__tx{flex:1;min-width:0}
.topa .t-sticky__tx b{display:block;font-size:12.8px;font-weight:600;color:var(--w);line-height:1.45}
.topa .t-sticky__tx span{display:block;font-size:11.2px;color:var(--g);margin-top:1px}

/* ══════════ قسم START TOPA — الأزرق حصراً هنا ══════════ */
.topa .topa-blue{background:var(--s1);border-block:1px solid var(--line);position:relative;overflow:hidden}
.topa .topa-blue .t-kick{color:var(--b)}
.topa .topa-blue .t-h2 em{color:var(--b)}
.topa .topa-blue .t-ic{background:var(--b08);border-color:var(--b20);color:var(--b)}
.topa .topa-blue .t-row:hover .t-ic,.topa .topa-blue .t-glass:hover .t-ic{background:var(--b12);border-color:var(--b45)}
.topa .topa-blue .t-glass:hover{border-color:var(--b30)}
.topa .topa-blue .t-tag{color:var(--b);background:var(--b08);border-color:var(--b20)}
.topa .topa-blue .t-btn--p{background:var(--b);color:#00122E}
.topa .topa-blue .t-btn--p:hover{background:var(--b-lt);box-shadow:0 6px 18px -8px rgba(46,125,247,.55)}
.topa .topa-blue .t-btn--q:hover{border-color:var(--b45);background:var(--b08)}

/* ══════════ خاص بالصفحة الرئيسية ══════════ */
/* الهيرو — ارتفاع منضبط، بلا 100vh */
.topa .t-hero{position:relative;overflow:hidden;padding-block:clamp(28px,3.6vw,52px) 0}
.topa .t-hero__glow{width:min(620px,88vw);height:min(620px,88vw);top:-28%;right:-8%;
  background:radial-gradient(circle,var(--g12),transparent 68%)}
.topa .t-hero__in{position:relative;z-index:2;display:grid;grid-template-columns:1.3fr .7fr;
  gap:clamp(26px,3.2vw,44px);align-items:center;min-height:var(--hero-h)}
.topa .t-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;
  color:var(--tx2);padding:6px 13px;border:1px solid var(--line2);border-radius:var(--r);
  background:rgba(255,255,255,.025);margin-bottom:18px}
.topa .t-eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--g);flex:none}
.topa .t-hero__p{margin-top:15px;font-size:var(--sub);line-height:1.9;color:var(--tx2);max-width:var(--measure)}
.topa .t-hero__btns{margin-top:24px}

/* المسرح ثلاثي الأبعاد */
.topa .t-stage{position:relative;aspect-ratio:1/1;display:grid;place-items:center;perspective:1200px}
.topa .t-stage svg text{direction:ltr;unicode-bidi:isolate}
.topa .t-ring{position:absolute;border:1px solid var(--line);border-radius:50%}
.topa .t-ring:nth-of-type(1){inset:8%}
.topa .t-ring:nth-of-type(2){inset:22%;border-style:dashed;border-color:var(--g20)}
.topa .t-note{position:relative;z-index:3;width:min(320px,84%);aspect-ratio:2.32/1;
  transform:rotateX(10deg) rotateY(-15deg) rotateZ(-5deg);
  filter:drop-shadow(0 24px 38px rgba(0,0,0,.8))}
.topa .t-note svg{width:100%;height:100%}
.topa .t-coin{position:absolute;z-index:4;width:clamp(52px,12%,72px);aspect-ratio:1;top:10%;left:5%;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.65))}
.topa .t-cndl{position:absolute;z-index:4;bottom:10%;right:3%;width:clamp(68px,17%,100px);
  filter:drop-shadow(0 9px 16px rgba(0,0,0,.6))}

/* بطاقة اختيار كبيرة */
.topa .t-pick{padding:clamp(24px,2.8vw,34px);display:flex;flex-direction:column}
.topa .t-pick--hi{border-color:var(--g30);background:linear-gradient(160deg,var(--g08),var(--gl) 45%)}
.topa .t-pick--hi:hover{border-color:var(--g45)}
.topa .t-pick__t{font-size:clamp(19px,2vw,23px);font-weight:600;color:var(--w);line-height:1.45;margin-bottom:10px}
.topa .t-pick__d{font-size:var(--sub);color:var(--tx2);line-height:1.9;margin-bottom:22px}
.topa .t-pick__cta{margin-top:auto}

/* قائمة مزايا بعلامات صح */
.topa .t-list{display:grid;gap:10px}
.topa .t-list li{display:flex;align-items:flex-start;gap:10px;font-size:var(--body);color:var(--tx);line-height:1.8}
.topa .t-list svg{width:14px;height:14px;color:var(--g);flex:none;margin-top:5px}

/* بطاقة مسار */
.topa .t-path{padding:clamp(22px,2.5vw,28px);display:flex;flex-direction:column}
.topa .t-path--hi{border-color:var(--g30);background:linear-gradient(160deg,var(--g08),var(--gl) 42%)}
.topa .t-path__tag{align-self:flex-start;font-size:10.5px;font-weight:600;color:#001603;
  background:var(--g);padding:3px 10px;border-radius:6px;margin-bottom:12px}
.topa .t-path__tag--q{background:transparent;color:var(--tx3);border:1px solid var(--line2)}
.topa .t-path__n{font-size:19px;font-weight:600;color:var(--w);line-height:1.45;margin-bottom:8px}
.topa .t-path__d{font-size:var(--body);color:var(--tx2);line-height:1.9;margin-bottom:20px}
.topa .t-path__cta{margin-top:auto}

/* بطاقة برنامج */
.topa .t-prog{padding:clamp(22px,2.5vw,28px);display:flex;flex-direction:column}
.topa .t-prog__n{font-size:19px;font-weight:600;color:var(--w);margin-bottom:9px;line-height:1.45}
.topa .t-prog__n span{color:var(--g)}
.topa .t-prog__d{font-size:var(--body);color:var(--tx2);line-height:1.9;margin-bottom:20px}
.topa .t-prog__cta{margin-top:auto}

/* عنصر START TOPA البصري */
.topa .t-vis{position:relative;aspect-ratio:1/1;display:grid;place-items:center}
.topa .t-vis svg{width:100%;height:100%;overflow:visible}

/* الدعوة الختامية */
.topa .t-fin{position:relative;overflow:hidden;border-block:1px solid var(--line);background:var(--s1)}
.topa .t-fin__glow{width:min(700px,92vw);height:min(700px,92vw);top:-40%;right:50%;transform:translateX(50%);
  background:radial-gradient(circle,var(--g12),transparent 66%)}
.topa .t-fin__in{position:relative;z-index:2;text-align:center;max-width:var(--measure);margin-inline:auto}

/* ══════════ التجاوب ══════════ */
@media (max-width:1080px){
  .topa .t-hero__in{grid-template-columns:1fr;gap:32px;min-height:0}
  .topa .t-stage{max-width:380px;margin-inline:auto;order:-1;aspect-ratio:1.42/1}
  .topa .t-vis{order:-1;max-width:290px;margin-inline:auto;aspect-ratio:1.5/1}
  .topa .t-ft__g{grid-template-columns:1fr 1fr;gap:28px}
  .topa .t-ft__g>div:first-child{grid-column:1/-1}
}
@media (max-width:900px){
  .topa .t-nav,.topa .t-login{display:none}
  .topa .t-burger{display:flex}
  .topa .t-hdr__act .t-btn{min-height:42px;padding:0 15px;font-size:13px}
  .topa .t-hdr__act .t-btn svg{display:none}
  .topa .t-grid--3{grid-template-columns:1fr}
  .topa .t-sticky{display:block}
  .topa .t-ft{padding-bottom:92px}
  .topa .t-stats__row{grid-template-columns:repeat(2,1fr);row-gap:clamp(20px,3vw,26px)}
  .topa .t-stats__i:nth-child(odd)::before{display:none}
  .topa .t-stats__i:nth-child(-n+2)::after{content:"";position:absolute;
    bottom:calc(-1 * clamp(10px,1.5vw,13px));left:8%;right:8%;height:1px;
    background:linear-gradient(90deg,transparent,var(--line2) 25%,var(--line2) 75%,transparent)}
}
@media (max-width:680px){
  .topa{--btn-h:46px}
  .topa .t-grid--2{grid-template-columns:1fr}
  .topa .t-hdr__in{height:60px}
  .topa .t-mob{inset-block-start:60px}
  .topa .t-btns .t-btn{width:100%}
  .topa .t-btns--c{flex-direction:column}
  .topa .t-stage{max-width:246px;aspect-ratio:1.3/1}
  .topa .t-hero{padding-block:16px 0}
  .topa .t-ft__g{grid-template-columns:1fr}
  .topa .t-ft__bot{flex-direction:column;align-items:flex-start}
  .topa .t-vis{max-width:225px}
}
@media (max-width:400px){
  /* الإحصائيات تبقى عمودين على كل الهواتف — بلا كروت */
  .topa .t-stats__i{padding-inline:6px}
  .topa .t-stats__v{font-size:14px}
  .topa .t-stats__l{font-size:11.2px}
  .topa .t-sticky__tx span{display:none}
  .topa .t-logo img{height:34px;width:34px}
}

/* ══════════ Process / Timeline — مسار خطوات مترابط ══════════ */
.topa .t-flow{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.7vw,22px)}
/* الخط الواصل على الديسكتوب */
.topa .t-flow::before{content:"";position:absolute;top:22px;right:12%;left:12%;height:1px;z-index:0;
  background:repeating-linear-gradient(90deg,var(--line2) 0 6px,transparent 6px 13px)}
.topa .t-flow__i{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:0 clamp(4px,1vw,10px)}
.topa .t-flow__n{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-size:15px;font-weight:600;color:var(--g);background:var(--bg);
  border:1px solid var(--g30);margin-bottom:16px;
  transition:background .3s,border-color .3s,transform .3s var(--ez)}
.topa .t-flow__i:hover .t-flow__n{background:var(--g12);border-color:var(--g45);transform:translateY(-2px)}
.topa .t-flow__t{font-size:var(--h3);font-weight:600;color:var(--w);line-height:1.5;margin-bottom:7px}
.topa .t-flow__d{font-size:var(--body);color:var(--tx2);line-height:1.9;max-width:30ch}

/* ══════════ التنبيه التعليمي — مستقيم، بحركة لمرة واحدة ══════════ */
.topa .t-notice{position:relative;overflow:hidden;display:flex;align-items:flex-start;gap:11px;
  margin-top:clamp(26px,3vw,38px);padding:14px 16px;border-radius:var(--r);
  background:rgba(255,255,255,.025);border:1px solid var(--line);
  font-size:12.6px;color:var(--tx2);line-height:1.85;max-width:760px;margin-inline:auto}
.topa .t-notice svg{width:17px;height:17px;color:var(--g);flex:none;margin-top:3px}
/* لمعة تمر مرة واحدة عند دخول التنبيه للشاشة */
.topa .t-notice::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(6,206,42,.16) 50%,transparent 70%);
  transform:translateX(-120%);opacity:0}
.topa.tp-anim .t-notice.is-in::after{animation:tpSweep 1.5s cubic-bezier(.22,1,.36,1) .35s 1 both}
@keyframes tpSweep{0%{transform:translateX(-120%);opacity:0}
  15%{opacity:1}85%{opacity:1}100%{transform:translateX(120%);opacity:0}}

/* ══════════ شارة الضمان — مرتبطة بمنتج واحد فقط ══════════ */
.topa .t-badge{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:7px;
  align-self:flex-start;margin-bottom:13px;padding:0 13px;min-height:40px;border-radius:9px;
  font-size:11.5px;font-weight:600;color:var(--g);
  background:var(--g08);border:1px solid var(--g30);
  transition:background .24s,border-color .24s}
.topa .t-badge:hover{background:var(--g12);border-color:var(--g45)}
.topa .t-badge svg{width:13px;height:13px;flex:none}
.topa .t-badge::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(6,206,42,.3) 50%,transparent 70%);
  transform:translateX(-120%);opacity:0}
.topa.tp-anim [data-rv].is-in .t-badge::after{animation:tpSweep 1.4s cubic-bezier(.22,1,.36,1) .5s 1 both}

/* ══════════ بادئة الإحصائيات ══════════ */
.topa .t-stats__pre{font-size:.62em;font-weight:400;color:var(--tx2);letter-spacing:0}
.topa .t-stats__v{direction:rtl;unicode-bidi:plaintext}

/* ══════════ زر إعدادات الكوكيز في الفوتر ══════════ */
.topa .t-ft__cookie{font-size:12.2px;color:var(--tx3);padding:0;transition:color .2s;
  font-family:inherit;line-height:inherit}
.topa .t-ft__cookie:hover{color:var(--g)}
.topa .t-ft__cookie[aria-disabled="true"]{opacity:.5;cursor:default}

/* ══════════ تجاوب المكوّنات الجديدة ══════════ */
@media (max-width:900px){
  .topa .t-flow{grid-template-columns:1fr;gap:0}
  .topa .t-flow::before{top:0;bottom:0;right:21px;left:auto;width:1px;height:auto;
    background:repeating-linear-gradient(180deg,var(--line2) 0 6px,transparent 6px 13px)}
  .topa .t-flow__i{flex-direction:row;align-items:flex-start;text-align:right;gap:14px;
    padding:0 0 clamp(20px,3vw,26px) 0}
  .topa .t-flow__i:last-child{padding-bottom:0}
  .topa .t-flow__n{margin-bottom:0;width:44px}
  .topa .t-flow__d{max-width:none}
}