/* صفحات هبوط التطبيقات: نفس نظام التصميم (salla-ui.css) + أقسام الصفحة. هيكل مستوحى من upsell.com
 * الخط هنا IBM Plex Sans Arabic (رخصة OFL مجانية): PingARLT خط تجاري مرخّص لسلة، نستخدمه داخل سلة بس */
:root { --font: "IBM Plex Sans Arabic", -apple-system, "Segoe UI", Tahoma, sans-serif; }
html { scroll-behavior: smooth; }
body { background: hsl(var(--surface)); font-size: var(--text-md); line-height: 1.7; overflow-x: hidden; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.accent { color: hsl(var(--secondary)); }
.accent-p { color: hsl(var(--primary)); }
section { position: relative; }

/* ===== الشريط العلوي ===== */
.nav { position: sticky; top: 0; z-index: 30; transition: background .25s, box-shadow .25s; }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
.nav.solid { background: hsl(var(--surface) / .92); backdrop-filter: blur(10px); box-shadow: 0 1px 0 hsl(var(--line)); }
.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-weight: 700; font-size: 1.2rem; }
.brand img { width: 36px; height: 36px; border-radius: 10px; }
.brand small { display: block; font-size: .7rem; font-weight: 400; opacity: .7; line-height: 1; }
.nav-links { display: flex; gap: 26px; }
.nav-links a { color: inherit; text-decoration: none; font-size: var(--text-sm); opacity: .85; }
.nav-links a:hover { opacity: 1; }
.nav:not(.solid) { color: #fff; }
.nav:not(.solid) .btn:not(.secondary) { background: transparent; color: #fff; border-color: rgb(255 255 255 / .5); }
@media (max-width: 860px) { .nav-links { display: none; } }

/* ===== الهيرو ===== */
.hero { margin-top: -68px; padding: 120px 0 0; color: #fff; text-align: center; overflow: hidden;
  background: radial-gradient(1200px 520px at 50% -10%, hsl(var(--primary-400)) 0%, transparent 60%), linear-gradient(180deg, hsl(var(--primary-700)) 0%, hsl(var(--primary)) 100%); }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 150px; background: hsl(var(--surface)); }
.hero .badges { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.hero .badges > span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: var(--text-xs); font-weight: 500; background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .22); }
.hero .badges > span.on { background: #fff; color: hsl(var(--primary)); border-color: #fff; }
.hero h1 { font-size: clamp(2.1rem, 5.4vw, 3.9rem); line-height: 1.5; font-weight: 700; margin: 0 auto 16px; max-width: 860px; }
.hero p.lead { font-size: clamp(1rem, 1.6vw, 1.15rem); opacity: .86; max-width: 660px; margin: 0 auto 30px; }
.hero .ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 56px; }
.hero .ctas .btn.ghost-w { background: rgb(255 255 255 / .1); color: #fff; border-color: rgb(255 255 255 / .35); }
.hero .ctas .btn.ghost-w:hover { background: rgb(255 255 255 / .18); }

/* جهاز العرض في الهيرو + بطاقات عائمة بعناوين */
.stage { position: relative; z-index: 1; max-width: 980px; margin: 0 auto; }
.device { position: relative; background: #11131a; border-radius: 22px; padding: 12px; box-shadow: 0 40px 80px -30px rgb(0 0 0 / .55); margin: 0 auto; max-width: 860px; }
.device .screen { background: #faf9f7; border-radius: 12px; overflow: hidden; color: #1d2321; text-align: start; }
.shop-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; border-bottom: 1px solid #eee; font-size: 14px; background: #fff; }
.shop-bar b { font-size: 15px; }
.shop-bar .cart { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; border: 1px solid #e5e5e5; font-size: 13px; }
.shop-bar .cart em { font-style: normal; min-width: 20px; height: 20px; border-radius: 10px; display: inline-grid; place-items: center; background: hsl(var(--primary)); color: #fff; font-size: 11px; padding: 0 5px; }
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 20px; align-items: start; }
.pdp-img { border-radius: 12px; aspect-ratio: 1; object-fit: cover; width: 100%; }
.pdp h3 { font-size: 20px; margin: 0 0 2px; color: #1d2321; }
.pdp .price { font-weight: 700; font-size: 18px; margin-bottom: 4px; }
.pdp .stars { color: #f5a623; font-size: 13px; }
.pdp .hz { margin: 10px 0 0; }
.callout { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; animation: float 6s ease-in-out infinite; }
.callout .tag { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: hsl(var(--secondary)); color: hsl(var(--secondary-reverse)); font-weight: 700; font-size: 13px; box-shadow: 0 8px 20px -6px rgb(0 0 0 / .3); white-space: nowrap; }
.callout .mini { background: #fff; width: 270px; color: #1d2321; border-radius: 12px; padding: 12px; box-shadow: 0 20px 40px -14px rgb(0 0 0 / .35); font-size: 12.5px; text-align: start; }
.callout.c1 { top: 70px; right: -40px; }
.callout.c2 { top: 150px; left: -50px; animation-delay: -2s; }
.callout.c3 { bottom: 150px; right: -70px; animation-delay: -4s; }
.callout.c4 { top: 40px; left: -30px; animation-delay: -3s; }
@keyframes float { 50% { transform: translateY(-8px); } }
@media (max-width: 1100px) { .callout.c1, .callout.c3 { right: -8px; } .callout.c2, .callout.c4 { left: -8px; } }
@media (max-width: 760px) {
  .pdp { grid-template-columns: 1fr; }
  .callout { position: static; animation: none; align-items: center; margin: 10px auto 0; }
  .callout .mini { display: none; }
  .callouts-m { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
}

/* ===== أقسام عامة ===== */
.sec { padding: 96px 0; }
.sec.tint { background: hsl(var(--primary-100)); }
.sec.round { border-radius: 40px; margin: 0 16px; }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 700; color: hsl(var(--primary)); background: hsl(var(--primary-100)); padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; }
.sec h2.big { font-size: clamp(1.8rem, 3.6vw, 2.7rem); line-height: 1.55; font-weight: 700; margin-bottom: 14px; }
.sec h2.big em { font-style: normal; color: hsl(var(--primary)); white-space: nowrap; background: linear-gradient(transparent 64%, hsl(var(--secondary) / .6) 64%, hsl(var(--secondary) / .6) 92%, transparent 92%); padding: 0 .1em; }
.sec .sub { color: hsl(var(--muted)); font-size: 1.05rem; max-width: 640px; }
.center { text-align: center; } .center .sub { margin: 0 auto; }

/* شريط الثقة */
.trust { padding: 24px 0 64px; text-align: center; }
.trust p { font-weight: 700; margin-bottom: 18px; }
.trust .row { justify-content: center; gap: 34px; color: hsl(var(--muted)); font-weight: 700; font-size: 1.05rem; }
.trust .row span { display: inline-flex; align-items: center; gap: 8px; opacity: .8; }
.trust .row i { font-size: 1.3rem; color: hsl(var(--primary)); }

/* المشاكل: عنوان يسار + بطاقات مرقمة */
.problems { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: start; }
.problems .cards { display: flex; flex-direction: column; gap: 14px; }
.pcard { background: hsl(var(--surface)); border-radius: 16px; padding: 22px 24px; box-shadow: var(--shadow-sm); border: 1px solid hsl(var(--line)); }
.pcard .n { font-size: 2rem; font-weight: 300; color: hsl(var(--primary-300)); line-height: 1; margin-bottom: 8px; }
.pcard h3 { font-size: 1rem; color: hsl(var(--primary)); margin-bottom: 4px; }
.pcard p { color: hsl(var(--muted)); font-size: var(--text-sm); }
@media (max-width: 860px) { .problems { grid-template-columns: 1fr; gap: 24px; } }

/* أماكن الظهور: تبويبات + معاينة */
.places { display: grid; grid-template-columns: .85fr 1.15fr; gap: 40px; align-items: center; margin-top: 44px; }
.ptabs { display: flex; flex-direction: column; border-inline-start: 2px solid hsl(var(--line)); }
.ptab { text-align: start; background: none; border: 0; font: inherit; color: hsl(var(--placeholder)); cursor: pointer; padding: 10px 18px; margin-inline-start: -2px; border-inline-start: 2px solid transparent; transition: color .2s, border-color .2s; }
.ptab b { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; }
.ptab p { display: none; color: hsl(var(--text)); font-size: var(--text-sm); margin-top: 6px; }
.ptab[aria-selected="true"] { color: hsl(var(--primary)); border-color: hsl(var(--primary)); }
.ptab[aria-selected="true"] p { display: block; }
.pview { background: hsl(var(--primary-100)); border-radius: 24px; padding: 28px; min-height: 440px; display: grid; place-items: center; }
.pview .panel { background: #fff; color: #1d2321; border-radius: 16px; padding: 18px 20px; width: 100%; max-width: 440px; box-shadow: var(--shadow-md); }
.pview .panel .hz { margin: 0; }
@media (max-width: 860px) { .places { grid-template-columns: 1fr; } .pview { min-height: 0; padding: 16px; } }

/* بطاقات الميزات بصور واجهة */
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.fcard { background: hsl(var(--surface)); border-radius: 20px; padding: 14px 14px 22px; border: 1px solid hsl(var(--line)); }
.fcard .art { background: hsl(var(--primary-100)); border-radius: 14px; height: 190px; display: grid; place-items: center; margin-bottom: 18px; overflow: hidden; padding: 14px; }
.fcard h3 { font-size: 1.05rem; margin: 0 8px 6px; }
.fcard p { color: hsl(var(--muted)); font-size: var(--text-sm); margin: 0 8px; }
@media (max-width: 860px) { .features { grid-template-columns: 1fr; } }

/* شريط الأرقام */
.stat-band { background: linear-gradient(180deg, hsl(var(--primary-700)), hsl(var(--primary))); color: #fff; text-align: center; padding: 80px 0; }
.stat-band .num { font-size: clamp(3rem, 8vw, 5.5rem); font-weight: 800; line-height: 1; margin-bottom: 14px; }
.stat-band .grid { max-width: 820px; margin: 40px auto 0; }
.stat-band .grid b { display: block; font-size: 1.8rem; color: hsl(var(--secondary)); }
.stat-band .grid span { opacity: .8; font-size: var(--text-sm); }

/* مثال حقيقي */
.case { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.case .photo { border-radius: 24px; overflow: hidden; aspect-ratio: 4/3; }
.case .photo img { width: 100%; height: 100%; object-fit: cover; }
.case .kpis3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0; }
.case .kpis3 b { display: block; font-size: 1.6rem; color: hsl(var(--primary)); }
.case .kpis3 span { font-size: var(--text-xs); color: hsl(var(--muted)); }
@media (max-width: 860px) { .case { grid-template-columns: 1fr; } }

/* مبني لمتجرك: 3 أعمدة */
.pillars { background: hsl(var(--secondary-100)); border-radius: 32px; padding: 44px 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; }
.pillars .icon-box { margin: 0 auto 12px; }
.pillars h3 { font-size: 1rem; margin-bottom: 6px; }
.pillars p { color: hsl(var(--muted)); font-size: var(--text-sm); }
@media (max-width: 860px) { .pillars { grid-template-columns: 1fr; } }

/* داخل سلة: مدار */
.orbit { position: relative; width: min(520px, 92vw); aspect-ratio: 1; margin: 40px auto 0; }
.orbit .ring { position: absolute; border-radius: 50%; inset: 0; border: 2px dashed hsl(var(--primary) / .22); }
.orbit .ring.r2 { inset: 17%; border: 0; background: hsl(var(--primary) / .08); }
.orbit .ring.r3 { inset: 33%; border: 0; background: hsl(var(--primary) / .12); }
.orbit .core { position: absolute; inset: 39%; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: var(--shadow-md); }
.orbit .core img { width: 62%; border-radius: 22%; }
.orbit .node { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: hsl(var(--text)); width: 90px; text-align: center; }
@media (max-width: 560px) { .orbit { width: 78vw; } .orbit .node { font-size: 11px; width: 70px; } .orbit .node i { width: 40px; height: 40px; font-size: 18px; } }
.orbit .node i { width: 48px; height: 48px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 22px; color: hsl(var(--primary)); box-shadow: var(--shadow-md); }
.orbit svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sec:has(.orbit) { overflow: hidden; }
/* الحركة: العناصر تدور ببطء حول المركز وتبقى معتدلة، والحلقة فيها نقاط تمشي بالعكس، والمركز ينبض */
.orbit { --spin: 80s; animation: orbit-spin var(--spin) linear infinite; }
.orbit .core, .orbit .node { animation: orbit-counter var(--spin) linear infinite; }
.orbit .core { animation-name: orbit-counter-core; }
.orbit .ring:not(.r2):not(.r3) { animation: orbit-spin 36s linear infinite reverse; }
.orbit .ring:not(.r2):not(.r3)::before, .orbit .ring:not(.r2):not(.r3)::after { content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; left: calc(50% - 5px); top: -6px; background: hsl(var(--primary)); box-shadow: 0 0 0 5px hsl(var(--primary) / .14), 0 0 18px hsl(var(--primary) / .55); }
.orbit .ring:not(.r2):not(.r3)::after { top: auto; bottom: -6px; background: hsl(var(--secondary)); box-shadow: 0 0 0 5px hsl(var(--secondary) / .25), 0 0 16px hsl(var(--secondary) / .8); }
.orbit .ring.r2 { animation: orbit-breathe 7s ease-in-out infinite; }
.orbit .ring.r3 { animation: orbit-breathe 7s ease-in-out -3.5s infinite; }
.orbit .core::before, .orbit .core::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid hsl(var(--primary) / .35); animation: orbit-ping 3.6s cubic-bezier(.2,.6,.3,1) infinite; pointer-events: none; }
.orbit .core::after { animation-delay: -1.8s; }
.orbit .node i { transition: transform .35s var(--ease), box-shadow .35s var(--ease); animation: orbit-bob 5s ease-in-out infinite; }
.orbit .node:nth-of-type(2n) i { animation-delay: -1.6s; }
.orbit .node:nth-of-type(3n) i { animation-delay: -3.1s; }
.orbit:hover, .orbit:hover .core, .orbit:hover .node, .orbit:hover .ring, .orbit:hover i { animation-play-state: paused; }
.orbit .node:hover i { transform: scale(1.12); box-shadow: 0 14px 30px -10px hsl(var(--primary) / .55); }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes orbit-counter { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(-360deg); } }
@keyframes orbit-counter-core { to { transform: rotate(-360deg); } }
@keyframes orbit-breathe { 50% { transform: scale(1.05); opacity: .75; } }
@keyframes orbit-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
@keyframes orbit-bob { 50% { translate: 0 -5px; } }
@media (prefers-reduced-motion: reduce) { .orbit, .orbit *, .orbit *::before, .orbit *::after { animation: none !important; } }

/* الأسعار */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
.plan { border: 1px solid hsl(var(--line)); border-radius: 20px; padding: 24px 20px; display: flex; flex-direction: column; gap: 12px; background: hsl(var(--surface)); }
.plan.hot { border: 2px solid hsl(var(--primary)); box-shadow: var(--shadow-md); position: relative; }
.plan.hot::before { content: "الأكثر طلبًا"; position: absolute; top: -12px; inset-inline-start: 20px; background: hsl(var(--primary)); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 6px; }
.plan .p { font-size: 2rem; font-weight: 800; line-height: 1; }
.plan .p small { font-size: .85rem; font-weight: 400; color: hsl(var(--muted)); }
.plan ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: var(--text-sm); }
.plan li { display: flex; gap: 8px; align-items: flex-start; }
.plan li i { color: hsl(var(--success)); margin-top: 4px; }
.plan .btn { margin-top: auto; }
@media (max-width: 960px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .plans { grid-template-columns: 1fr; } }

/* الأسئلة */
.faq { max-width: 820px; margin: 36px auto 0; }
.faq details { border-bottom: 1px solid hsl(var(--line)); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 4px; font-weight: 700; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { transition: transform .25s; color: hsl(var(--muted)); }
.faq details[open] summary i { transform: rotate(45deg); }
.faq details p { padding: 0 4px 20px; color: hsl(var(--muted)); }

/* دعوة أخيرة */
.cta-card { position: relative; overflow: hidden; border-radius: 28px; padding: 64px 24px; text-align: center; color: #fff; background: hsl(var(--primary)); }
.cta-card h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.55; font-weight: 700; margin-bottom: 22px; position: relative; }
.cta-card .row { justify-content: center; position: relative; }
.cta-card .shape { position: absolute; border-radius: 50%; border: 36px solid hsl(var(--secondary) / .9); }
.cta-card .shape.s1 { width: 220px; height: 220px; top: -90px; right: -80px; }
.cta-card .shape.s2 { width: 160px; height: 160px; bottom: -70px; left: -50px; border-color: rgb(255 255 255 / .16); }

/* الفوتر */
.foot { background: #12141a; color: rgb(255 255 255 / .75); padding: 56px 0 28px; margin-top: 96px; border-radius: 40px 40px 0 0; font-size: var(--text-sm); }
.foot .cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 24px; }
.foot h4 { color: #fff; margin: 0 0 12px; font-size: var(--text-sm); }
.foot a { color: inherit; text-decoration: none; display: block; margin-bottom: 8px; }
.foot a:hover { color: #fff; }
.foot .brand { color: #fff; margin-bottom: 10px; }
.foot .copy { border-top: 1px solid rgb(255 255 255 / .1); margin-top: 32px; padding-top: 20px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@media (max-width: 760px) { .foot .cols { grid-template-columns: 1fr 1fr; } }

/* ظهور عند التمرير */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.demo-toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 60; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } .callout { animation: none; } }

/* شارة "مصمم لسلة" بنفس فكرة شارة متجر تطبيقات سلة: أيقونة كهرماني ونافذة صغيرة بالمزايا */
.sd { position: relative; cursor: default; outline: none; }
.sd-ic { width: 18px; height: 18px; border-radius: 6px; flex: none; background: #F2A93B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 9l10 4-4 1.6L13.4 19z' fill='%23fff'/%3E%3Cpath d='M7 3v2M3 7h2M4.2 4.2l1.4 1.4M10.5 4.5l-.9 1.3'/%3E%3C/svg%3E") center / 13px no-repeat; box-shadow: inset 0 0 0 2px rgb(150 95 30 / .35); }
.sd-tip { position: absolute; display: grid !important; white-space: normal; top: calc(100% + 10px); inset-inline-start: 50%; transform: translate(50%, 6px); width: 270px; z-index: 20; background: #26282b; color: #e9eaec; border-radius: 16px; padding: 12px; display: grid; gap: 8px; text-align: start; font-size: 13px; font-weight: 400; box-shadow: 0 24px 50px -16px rgb(0 0 0 / .5); opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s; }
.sd-tip b { display: flex; gap: 8px; align-items: center; background: #36393d; color: #a6f0d8; border-radius: 10px; padding: 8px 10px; font-weight: 500; }
.sd-tip span { display: flex; gap: 8px; align-items: center; padding-inline-start: 4px; }
.sd-tip span i { color: #a6f0d8; }
.sd:hover .sd-tip, .sd:focus .sd-tip, .sd:focus-within .sd-tip { opacity: 1; visibility: visible; transform: translate(50%, 0); }
[dir="ltr"] .sd-tip { transform: translate(-50%, 6px); } [dir="ltr"] .sd:hover .sd-tip { transform: translate(-50%, 0); }

/* ===== انتماء لتِجوار: شريط علوي، عائلة التطبيقات، وتوقيع الفوتر (ألوان محايدة عشان ما تغيّر لون التطبيق) ===== */
.tj-strip { background: #fff; color: #172033; font-size: 13px; border-bottom: 1px solid rgb(23 32 51 / .06); position: relative; z-index: 31; }
.tj-strip .wrap { display: flex; justify-content: space-between; align-items: center; height: 38px; gap: 12px; }
.tj-strip a { color: inherit; text-decoration: none; }
.tj-by { display: inline-flex; align-items: center; gap: 8px; }
.tj-by img { width: 22px; height: 22px; }
.tj-by b { color: #2563EB; font-weight: 700; }
.tj-links { display: flex; gap: 18px; opacity: .75; } .tj-links a:hover { opacity: 1; color: #2563EB; }
@media (max-width: 520px) { .tj-links a:first-child { display: none; } }
.tj-family .tj-head { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.tj-family .tj-head img { width: 56px; height: 56px; filter: drop-shadow(0 12px 20px rgb(37 99 235 / .3)); }
.tj-family .tj-head span { color: #2563EB; font-weight: 600; font-size: var(--text-sm); }
.tj-family .tj-head h2 { margin: 0; font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.5; }
.tj-family .tj-head .btn { margin-inline-start: auto; }
.tj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tj-app { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 24px; text-decoration: none; color: hsl(var(--text)); background: hsl(var(--primary) / .06); border: 1px solid hsl(var(--primary) / .14); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.tj-app:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -26px hsl(var(--primary) / .6); }
.tj-app .ic { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; font-size: 26px; margin-bottom: 10px; object-fit: cover; }
.tj-app b { font-size: 1.15rem; color: hsl(var(--primary)); }
.tj-app span { color: hsl(var(--muted)); font-size: var(--text-sm); }
.tj-app .go { position: absolute; top: 22px; inset-inline-end: 22px; color: hsl(var(--primary)); font-size: 20px; }
.tj-app.tj-svc { background: linear-gradient(160deg, #F3F8FF, #E3EFFF); border-color: rgb(59 130 247 / .16); }
.tj-app.tj-svc b, .tj-app.tj-svc .go { color: #2563EB; }
@media (max-width: 760px) { .hz-boxes i:nth-child(n+3) { display: none; } .nb-pulse { top: 380px; } }
@media (max-width: 860px) { .tj-grid { grid-template-columns: 1fr; } .tj-family .tj-head { flex-wrap: wrap; } .tj-family .tj-head .btn { margin-inline-start: 0; } }
.foot .copy { align-items: center; }
.tj-sign { display: inline-flex !important; align-items: center; gap: 10px; margin: 0 !important; color: #fff !important; font-weight: 700; }
.tj-sign img { width: 32px; height: 32px; }
.tj-sign small { display: block; font-weight: 400; font-size: 12px; opacity: .65; }

/* ===== شخصية كل تطبيق في الهيرو ===== */
/* حُزمة: صناديق هدايا تطفو */
.hz-boxes i { position: absolute; width: 74px; height: 74px; border-radius: 18px; border: 2px solid rgb(255 255 255 / .22); background: linear-gradient(90deg, transparent 44%, rgb(255 255 255 / .32) 44% 56%, transparent 56%), linear-gradient(0deg, transparent 44%, rgb(255 255 255 / .32) 44% 56%, transparent 56%), rgb(255 255 255 / .07); border-color: hsl(var(--secondary) / .45); animation: hz-float 9s ease-in-out infinite; }
.hz-boxes i:nth-child(1) { top: 140px; right: 6%; transform: rotate(-12deg); }
.hz-boxes i:nth-child(2) { top: 260px; left: 7%; width: 54px; height: 54px; transform: rotate(14deg); animation-delay: -3s; }
.hz-boxes i:nth-child(3) { top: 90px; left: 22%; width: 38px; height: 38px; border-radius: 12px; transform: rotate(-6deg); animation-delay: -5s; }
.hz-boxes i:nth-child(4) { top: 330px; right: 15%; width: 44px; height: 44px; border-radius: 13px; transform: rotate(20deg); animation-delay: -1.5s; }
.hz-boxes i:nth-child(5) { top: 470px; left: 3%; width: 86px; height: 86px; transform: rotate(-18deg); animation-delay: -6.5s; }
.hz-boxes i:nth-child(6) { top: 500px; right: 4%; width: 60px; height: 60px; transform: rotate(8deg); animation-delay: -4s; }
@keyframes hz-float { 50% { translate: 0 -14px; } }
/* نبض: خط نبض يمشي خلف الواجهة */
.nb-pulse { position: absolute; left: 0; width: 100%; top: 440px; height: 200px; pointer-events: none; }
.nb-pulse path { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.nb-pulse .base { stroke: rgb(255 255 255 / .12); }
.nb-pulse .beat { stroke: hsl(var(--secondary)); stroke-dasharray: 260 2400; animation: nb-beat 3.4s linear infinite; filter: drop-shadow(0 0 8px hsl(var(--secondary))); }
@keyframes nb-beat { from { stroke-dashoffset: 2660; } to { stroke-dashoffset: 0; } }
/* لافتة: شريط إعلانات يتحرك تحت المنيو */
[data-app="lafta"] .hero { padding-top: 150px; background-image: repeating-linear-gradient(-45deg, rgb(255 255 255 / .035) 0 18px, transparent 18px 36px), radial-gradient(1200px 520px at 50% -10%, hsl(var(--primary-400)) 0%, transparent 60%), linear-gradient(180deg, hsl(var(--primary-700)) 0%, hsl(var(--primary)) 100%); }
.lf-ticker { position: absolute; top: 68px; left: 0; right: 0; height: 40px; overflow: hidden; background: hsl(var(--secondary)); color: hsl(var(--secondary-reverse)); font-size: 14px; font-weight: 700; display: flex; align-items: center; }
.lf-ticker .track { display: flex; gap: 48px; white-space: nowrap; animation: lf-run 28s linear infinite; padding-inline-start: 48px; }
.lf-ticker span { display: inline-flex; align-items: center; gap: 8px; }
@keyframes lf-run { to { transform: translateX(50%); } }
[dir="ltr"] .lf-ticker .track { animation-direction: reverse; }

/* ===== لمسة مختلفة لكل تطبيق في العناوين والبطاقة الأخيرة ===== */
[data-app="nabd"] .sec h2.big em { background: none; position: relative; padding-inline-end: .35em; }
[data-app="nabd"] .sec h2.big em::after { content: ""; position: absolute; top: .35em; inset-inline-end: 0; width: .22em; height: .22em; border-radius: 50%; background: hsl(var(--secondary)); animation: nb-live2 1.8s infinite; }
@keyframes nb-live2 { 0% { box-shadow: 0 0 0 0 hsl(var(--secondary) / .7); } 70%, 100% { box-shadow: 0 0 0 .35em hsl(var(--secondary) / 0); } }
[data-app="lafta"] .sec h2.big em { background: hsl(var(--secondary)); color: hsl(var(--secondary-reverse)); padding: 0 .3em; border-radius: 10px; display: inline-block; transform: rotate(-1.5deg); line-height: 1.4; }
[data-app="hizma"] .cta-card .shape { border-radius: 28%; transform: rotate(-14deg); }
[data-app="nabd"] .cta-card .shape { animation: nb-ring 4s ease-out infinite; }
@keyframes nb-ring { 50% { transform: scale(1.08); opacity: .7; } }
[data-app="lafta"] .cta-card .shape { border-radius: 0; border: 0; width: 140%; height: 14px; top: 26px; right: -20%; transform: rotate(-3deg); background: repeating-linear-gradient(90deg, hsl(var(--secondary) / .75) 0 34px, transparent 34px 56px); }
[data-app="lafta"] .cta-card .shape.s2 { top: auto; bottom: 26px; left: -20%; transform: rotate(2deg); background: repeating-linear-gradient(90deg, rgb(255 255 255 / .14) 0 34px, transparent 34px 56px); }
@media (prefers-reduced-motion: reduce) { .hz-boxes i, .nb-pulse .beat, .lf-ticker .track, [data-app="nabd"] .cta-card .shape, [data-app="nabd"] .sec h2.big em::after { animation: none !important; } }

/* ===== فوتر صفحات التطبيقات: بطاقة عائمة بلون التطبيق، متوسطة (مو غامقة ولا فاتحة مرة) ===== */
html:not([data-app="tijwar"]) .foot { margin: 96px 16px 16px; padding: 48px 0 24px; border-radius: 32px; color: hsl(var(--primary-700) / .78);
  background: radial-gradient(600px 260px at 85% 0%, hsl(var(--secondary) / .35), transparent 70%), color-mix(in srgb, hsl(var(--primary)) 16%, #fff);
  border: 1px solid hsl(var(--primary) / .14); }
html:not([data-app="tijwar"]) .foot .cols { grid-template-columns: 1.5fr repeat(3, 1fr); gap: 32px; }
html:not([data-app="tijwar"]) .foot h4 { color: hsl(var(--primary-700)); font-size: var(--text-sm); margin-bottom: 14px; }
html:not([data-app="tijwar"]) .foot a { color: inherit; margin-bottom: 10px; transition: color .2s; }
html:not([data-app="tijwar"]) .foot a:hover { color: hsl(var(--primary)); }
html:not([data-app="tijwar"]) .foot .brand { color: hsl(var(--primary-700)); display: inline-flex; gap: 10px; align-items: center; font-size: 1.3rem; }
html:not([data-app="tijwar"]) .foot .fb { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 22px; object-fit: cover; box-shadow: 0 10px 20px -12px hsl(var(--primary) / .6); }
html:not([data-app="tijwar"]) .foot .f-brand p { margin: 0 0 18px; max-width: 280px; }
html:not([data-app="tijwar"]) .foot .f-brand .btn { display: inline-flex; color: hsl(var(--primary-reverse)); margin: 0; }
html:not([data-app="tijwar"]) .foot .f-brand .btn:hover { color: hsl(var(--primary-reverse)); }
html:not([data-app="tijwar"]) .foot .f-app { display: flex; align-items: center; gap: 10px; }
html:not([data-app="tijwar"]) .foot .fi { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; object-fit: cover; flex: none; }
html:not([data-app="tijwar"]) .foot .copy { border-color: hsl(var(--primary) / .14); margin-top: 36px; padding-top: 20px; font-size: 13px; }
html:not([data-app="tijwar"]) .foot .tj-sign { color: hsl(var(--primary-700)) !important; }
@media (max-width: 760px) { html:not([data-app="tijwar"]) .foot { margin: 64px 10px 10px; border-radius: 26px; } html:not([data-app="tijwar"]) .foot .cols { grid-template-columns: 1fr 1fr; } html:not([data-app="tijwar"]) .foot .f-brand { grid-column: 1 / -1; } }