/* ═══════════════════════════════════════════════════════════════════════
   صفحاتُ مندوبي المبيعات — الاستمارة (/join) واللوحة (/rep) وشرح التنزيل
   (/install و/r/<رمز>/install). بهويّة صفحة الهبوط نفسها: خطُّ تجوّل،
   والأزرق #2563eb، وأرضيّةٌ رماديّةٌ فاتحة ولوحاتٌ بيضاء بزوايا واسعة.
   ═══════════════════════════════════════════════════════════════════════ */
@font-face{font-family:Tajawal;font-weight:500;font-display:swap;src:url(/landing/assets/fonts/Tajawal-arabic-500.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Tajawal;font-weight:700;font-display:swap;src:url(/landing/assets/fonts/Tajawal-arabic-700.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Tajawal;font-weight:800;font-display:swap;src:url(/landing/assets/fonts/Tajawal-arabic-800.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Tajawal;font-weight:900;font-display:swap;src:url(/landing/assets/fonts/Tajawal-arabic-900.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Tajawal;font-weight:500;font-display:swap;src:url(/landing/assets/fonts/Tajawal-latin-500.woff2) format("woff2");unicode-range:U+0000-00FF}
@font-face{font-family:Tajawal;font-weight:800;font-display:swap;src:url(/landing/assets/fonts/Tajawal-latin-800.woff2) format("woff2");unicode-range:U+0000-00FF}
@font-face{font-family:"Plus Jakarta Sans";font-weight:800;font-display:swap;src:url(/landing/assets/fonts/PlusJakartaSans-latin-800.woff2) format("woff2")}

:root{
  --floor:#E9EBEA; --panel:#FDFDFC; --panel-2:#F1F3F5; --ink:#0F172A; --soft:#334155; --mute:#6B7589;
  --line:#E3E7EE; --blue:#2563eb; --blue-d:#1d4ed8; --blue-t:#EAF1FE; --ok:#059669; --ok-t:#E7F6F0;
  --bad:#B42318; --bad-t:#FDEDEB; --warn:#B54708; --warn-t:#FEF3E6; --tg:#229ED9;
  --num:"Plus Jakarta Sans",Tajawal,system-ui,sans-serif;
  --r:22px; --r-sm:14px;
  --sh:0 1px 2px rgba(15,23,42,.04),0 12px 32px -12px rgba(15,23,42,.14);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--floor); color:var(--ink); font:500 16px/1.75 Tajawal,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; min-height:100svh}
a{color:var(--blue); text-decoration:none}
img{max-width:100%; height:auto}
.num{font-family:var(--num); letter-spacing:-.01em}

.wrap{max-width:980px; margin:0 auto; padding:18px 16px 60px}
.top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 2px 18px}
.brand{display:flex; align-items:center; gap:10px; font-weight:900; font-size:21px; color:var(--ink)}
.brand img{width:34px; height:34px}
.top .ghost{font-weight:800; font-size:14px}

.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh);
  padding:clamp(18px,3.4vw,34px)}
.panel + .panel{margin-top:16px}
.hero h1{margin:0 0 6px; font-size:clamp(26px,4.6vw,40px); line-height:1.3; font-weight:900; letter-spacing:-.01em}
.hero p{margin:0; color:var(--soft); font-size:clamp(15px,2vw,17px)}
.kicker{display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:13px; color:var(--blue);
  background:var(--blue-t); padding:5px 12px; border-radius:999px; margin-bottom:12px}

h2{margin:0 0 12px; font-size:20px; font-weight:900}
.muted{color:var(--mute)}
.small{font-size:14px}

/* ── النماذج ─────────────────────────────────────────────────────────── */
.grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.field{display:flex; flex-direction:column; gap:6px}
.field.full{grid-column:1 / -1}
.field label{font-weight:800; font-size:14px; color:var(--soft)}
.field label i{font-style:normal; color:var(--mute); font-weight:500}
.input,select.input,textarea.input{width:100%; font:inherit; font-size:16px; color:var(--ink); background:#fff;
  border:1.5px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; outline:none;
  transition:border-color .15s, box-shadow .15s}
textarea.input{min-height:104px; resize:vertical}
.input:focus{border-color:var(--blue); box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.input.bad{border-color:var(--bad); box-shadow:0 0 0 4px rgba(180,35,24,.08)}
.input[dir=ltr]{text-align:right}
.seg{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:5px; border-radius:var(--r-sm);
  border:1.5px solid var(--line); background:#fff}
.seg.bad{border-color:var(--bad); box-shadow:0 0 0 4px rgba(180,35,24,.08)}
.seg button{border:0; border-radius:10px; padding:10px; font:800 16px Tajawal,system-ui,sans-serif; cursor:pointer;
  background:transparent; color:var(--soft)}
.seg button[aria-checked=true]{background:var(--blue); color:#fff}
.err{display:none; margin:14px 0 0; padding:10px 14px; border-radius:var(--r-sm); background:var(--bad-t);
  color:var(--bad); font-weight:700; font-size:14px}
.err.on{display:block}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; cursor:pointer;
  font:800 16px/1 Tajawal,system-ui,sans-serif; padding:15px 22px; border-radius:999px; background:var(--panel-2);
  color:var(--ink); transition:transform .12s, background .15s, opacity .15s; text-align:center}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.55; cursor:default}
.btn-blue{background:var(--blue); color:#fff}
.btn-blue:hover{background:var(--blue-d)}
.btn-tg{background:var(--tg); color:#fff}
.btn-ok{background:var(--ok); color:#fff}
.btn-line{background:#fff; border:1.5px solid var(--line)}
.btn-block{width:100%}
.btn img{width:22px; height:22px}
.row{display:flex; flex-wrap:wrap; gap:10px; align-items:center}

/* ── خطوات التحقّق ببوت تيليغرام ────────────────────────────────────── */
.steps{list-style:none; margin:14px 0 20px; padding:0; counter-reset:s; display:grid; gap:10px}
.steps li{counter-increment:s; display:flex; gap:12px; align-items:flex-start; color:var(--soft)}
.steps li::before{content:counter(s); flex:0 0 28px; height:28px; border-radius:50%; background:var(--blue-t);
  color:var(--blue); font:800 14px/28px var(--num); text-align:center}
.wait{display:flex; align-items:center; gap:12px; margin-top:16px; padding:14px 16px; border-radius:var(--r-sm);
  background:var(--panel-2); color:var(--soft); font-weight:700}
.spin{width:22px; height:22px; border-radius:50%; border:3px solid rgba(37,99,235,.18); border-top-color:var(--blue);
  animation:spin .9s linear infinite; flex:0 0 auto}
@keyframes spin{to{transform:rotate(360deg)}}
.done{text-align:center; padding:12px 0}
.done .ic{width:72px; height:72px; margin:0 auto 14px; border-radius:50%; background:var(--ok-t); color:var(--ok);
  display:grid; place-items:center; font-size:36px; font-weight:900}

/* ── اللوحة ──────────────────────────────────────────────────────────── */
.kpis{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px}
.kpi{background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:14px 16px}
.kpi b{display:block; font:800 clamp(20px,2.6vw,26px)/1.25 var(--num)}
.kpi span{color:var(--mute); font-size:13px; font-weight:700}
.kpi.due b{color:var(--bad)} .kpi.ok b{color:var(--ok)}
.links{display:grid; gap:10px}
.link{display:flex; align-items:center; gap:10px; background:var(--panel-2); border-radius:var(--r-sm); padding:10px 12px}
.link div{flex:1; min-width:0}
.link strong{display:block; font-size:14px}
.link code{display:block; direction:ltr; text-align:right; font:700 13px/1.5 var(--num); color:var(--soft);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.link .btn{padding:10px 14px; font-size:14px}

.chips{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px}
.chip{border:1.5px solid var(--line); background:#fff; border-radius:999px; padding:7px 14px; font:800 14px Tajawal;
  cursor:pointer; color:var(--soft)}
.chip.on{background:var(--ink); border-color:var(--ink); color:#fff}

.list{display:grid; gap:10px}
.item{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; align-items:center;
  border:1px solid var(--line); border-radius:16px; padding:12px 14px; background:#fff}
.item .t{font-weight:900}
.item .s{grid-column:1; color:var(--mute); font-size:14px}
.item .m{grid-row:1 / span 2; grid-column:2; text-align:left; display:flex; flex-direction:column; align-items:flex-end; gap:6px}
.item .money{font:800 16px var(--num)}
.tag{display:inline-block; border-radius:999px; padding:3px 10px; font-size:12.5px; font-weight:800; white-space:nowrap}
.t-wait{background:var(--panel-2); color:var(--mute)} .t-trial{background:var(--blue-t); color:var(--blue)}
.t-due{background:var(--warn-t); color:var(--warn)} .t-paid{background:var(--ok-t); color:var(--ok)}
.t-review{background:var(--bad-t); color:var(--bad)}
.feed{display:grid; gap:8px}
.feed div{padding:10px 12px; border-radius:var(--r-sm); background:var(--panel-2); font-size:14.5px; white-space:pre-line}
.feed time{display:block; color:var(--mute); font:700 12px var(--num); margin-top:2px}
.empty{padding:26px 10px; text-align:center; color:var(--mute)}

/* ── الأهداف ─────────────────────────────────────────────────────────── */
.bar{height:10px; border-radius:99px; background:var(--panel-2); overflow:hidden; margin-bottom:14px}
.bar i{display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,#f59e0b,#fbbf24);
  transition:width .6s ease}
.ladder{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px}
.rung{border:1.5px dashed var(--line); border-radius:16px; padding:14px; text-align:center; background:#fff}
.rung b{display:block; font:800 30px/1.1 var(--num)}
.rung span{display:block; color:var(--mute); font-size:13px; font-weight:700}
.rung strong{display:block; margin-top:8px; color:var(--warn); font:800 18px var(--num)}
.rung em{display:block; margin-top:4px; font-style:normal; font-size:12.5px; color:var(--mute); font-weight:700}
.rung.on{border-style:solid; border-color:#fbbf24; background:#FFFBEB}
.rung.on em{color:var(--ok)}

/* ── شرح التنزيل ─────────────────────────────────────────────────────── */
.tabs{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:6px; background:var(--panel-2); padding:6px; border-radius:999px;
  margin:18px 0}
.tab{border:0; background:transparent; border-radius:999px; padding:12px; font:800 16px Tajawal; cursor:pointer;
  color:var(--soft); display:flex; align-items:center; justify-content:center; gap:8px}
.tab img{width:22px; height:22px}
.tab.on{background:#fff; color:var(--ink); box-shadow:var(--sh)}
.pane{display:none} .pane.on{display:block}
.video{position:relative; border-radius:18px; overflow:hidden; background:#0B1220; aspect-ratio:16/9; margin-bottom:18px}
.video.tall{aspect-ratio:9/16; max-width:360px; margin-inline:auto}
.video video{width:100%; height:100%; display:block; object-fit:contain; background:#0B1220}
.video .soon{position:absolute; inset:0; display:grid; place-items:center; color:#CBD5E1; font-weight:800; text-align:center; padding:20px}
.howto{list-style:none; margin:0; padding:0; counter-reset:h; display:grid; gap:12px}
.howto li{counter-increment:h; display:grid; grid-template-columns:36px minmax(0,1fr); gap:12px; align-items:start}
.howto li::before{content:counter(h); width:36px; height:36px; border-radius:12px; background:var(--ink); color:#fff;
  display:grid; place-items:center; font:800 16px var(--num)}
.howto b{display:block}
.howto span{color:var(--soft); font-size:15px}
.note{margin-top:16px; padding:12px 14px; border-radius:var(--r-sm); background:var(--warn-t); color:var(--warn);
  font-weight:700; font-size:14.5px}

.contact{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.contact .who{flex:1; min-width:180px}
.contact .who b{display:block; font-size:18px}

.foot{margin-top:28px; text-align:center; color:var(--mute); font-size:13px}
.foot a{color:var(--mute); text-decoration:underline}

@media (max-width:760px){
  .grid2{grid-template-columns:minmax(0,1fr)}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpis .kpi:first-child{grid-column:1 / -1}
  .btn{padding:14px 18px}
}