/* ═══════════════════════════════════════════════════════════════════════
   منظّم — monazem.com
   الاتجاه: فاتح · Bento · تفاعلي.
   وضع فاتح فقط (مفيش dark mode).
   قاعدة: مفيش لون مكتوب مباشرة في أي class — كله من متغيّر.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── الخط: Thmanyah Sans (محلي — ملفات في fonts/thmanyah) ──────────────── */
@font-face{font-family:"Thmanyah Sans";font-weight:300;font-style:normal;font-display:swap;
  src:url("fonts/thmanyah/thmanyahsans-Light.otf") format("opentype");}
@font-face{font-family:"Thmanyah Sans";font-weight:400;font-style:normal;font-display:swap;
  src:url("fonts/thmanyah/thmanyahsans-Regular.otf") format("opentype");}
@font-face{font-family:"Thmanyah Sans";font-weight:500;font-style:normal;font-display:swap;
  src:url("fonts/thmanyah/thmanyahsans-Medium.otf") format("opentype");}
@font-face{font-family:"Thmanyah Sans";font-weight:700;font-style:normal;font-display:swap;
  src:url("fonts/thmanyah/thmanyahsans-Bold.otf") format("opentype");}
@font-face{font-family:"Thmanyah Sans";font-weight:900;font-style:normal;font-display:swap;
  src:url("fonts/thmanyah/thmanyahsans-Black.otf") format("opentype");}

/* ── Tokens ──────────────────────────────────────────────────────────── */
:root{
  color-scheme:light;

  --paper:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F5F7FA;
  --line:#E5E9F0;
  --line-strong:#CBD2DE;
  --ink:#111827;
  --ink-2:#374151;
  --muted:#6B7280;

  /* هوية العلامة — نفس أزرق البرنامج الحقيقي، تستخدمه كل حاجة: الأزرار والعناوين وشاشات العرض */
  --brand:#2563EB;
  --brand-ink:#1D4ED8;
  --brand-soft:rgba(37,99,235,.09);
  --brand-line:rgba(37,99,235,.28);
  --on-brand:#F4F7FF;
  --on-brand-14:rgba(244,247,255,.14);
  --on-brand-48:rgba(244,247,255,.48);

  /* alias لنفس اللون — تستخدمه شاشات العرض التوضيحية (.screen) فقط */
  --accent:#2563EB;
  --accent-ink:#1D4ED8;
  --accent-soft:rgba(37,99,235,.09);
  --accent-line:rgba(37,99,235,.28);
  --on-accent:#F4F7FF;

  /* دافي — للورق والتحذير */
  --warm:#B0450A;
  --warm-soft:rgba(194,65,12,.11);
  --gold:#8A5F07;
  --gold-soft:rgba(154,107,8,.14);
  /* أخضر — للمكسب */
  --ok:#046C4E;
  --ok-soft:rgba(4,108,78,.11);

  --pure:#FFFFFF;
  --cta-glow:rgba(255,255,255,.18);

  --shadow:0 1px 2px rgba(17,24,39,.05),0 12px 30px -18px rgba(17,24,39,.20);
  --shadow-lg:0 2px 6px rgba(17,24,39,.06),0 30px 60px -30px rgba(17,24,39,.32);
  --rule:rgba(217,102,42,.06);
  --scrim:rgba(255,255,255,.88);
  --backdrop:rgba(17,24,39,.48);

  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:80px;

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px;
  --z-sticky:40; --z-bar:45; --z-drawer:60; --z-skip:100;
  --header-h:64px;

  --f-head:"Thmanyah Sans",Tahoma,sans-serif;
  --f-body:"Thmanyah Sans","Segoe UI",Tahoma,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;

  /* حركة — التوقيتات من motion presets: Scroll Reveal / Stagger List (Standard) */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-back:cubic-bezier(.34,1.36,.64,1);
  --dur-fast:180ms; --dur:320ms; --dur-slow:500ms;
}

/* ── Base ────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.nav-open{overflow:hidden}
h1,h2,h3,h4,.kufi{font-family:var(--f-head);font-weight:700;line-height:1.35;text-wrap:balance;margin:0}
p{margin:0;text-wrap:pretty}
img,svg{max-width:100%}
img{display:block;height:auto}
a{color:inherit}
.mono,.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--f-mono)}
.ltr{direction:ltr;unicode-bidi:isolate}
.ltr,.foot-links a,.faq p{overflow-wrap:anywhere}
section[id]{scroll-margin-block-start:calc(var(--header-h) + var(--sp-4))}

.wrap{max-width:1180px;margin-inline:auto;padding-inline:var(--sp-5)}
section{padding-block:var(--sp-9)}
@media(max-width:640px){section{padding-block:var(--sp-8)}}

/* العربي خط متصل — أي letter-spacing بيفصل الحروف عن بعض ويكسر الشكل.
   عشان كده كل عنوان فيه عربي بيستخدم خط عربي و letter-spacing:normal.
   الـ mono + التباعد اتسابوا للأرقام واللاتيني بس. */
.eyebrow{
  font-family:var(--f-head);font-weight:700;font-size:12.5px;letter-spacing:normal;
  color:var(--brand-ink);display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3);
}
.eyebrow::after{content:"";height:1px;flex:1;background:var(--brand-line)}
.h2{font-size:clamp(26px,3.4vw,38px)}
.lede{color:var(--muted);max-width:62ch;margin-top:var(--sp-3);font-size:17px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Skip link ───────────────────────────────────────────────────────── */
.skip{
  position:fixed;inset-block-start:var(--sp-2);inset-inline-start:50%;
  transform:translateX(50%) translateY(-200%);z-index:var(--z-skip);
  background:var(--brand);color:var(--on-brand);padding:10px 18px;border-radius:var(--r-md);
  text-decoration:none;font-weight:700;font-size:14px;box-shadow:var(--shadow-lg);
  transition:transform var(--dur) var(--ease-out);
}
.skip:focus-visible{transform:translateX(50%) translateY(0)}

/* ── حركة الظهور مع السكرول ──────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);transition-delay:calc(var(--i,0) * 80ms)}
.reveal.in{opacity:1;transform:none}
/* بلاطات البينتو بتدخل بـ scale خفيف (Stagger List — Standard) */
.pop{opacity:0;transform:translateY(16px) scale(.94);transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-back);transition-delay:calc(var(--i,0) * 60ms)}
.pop.in{opacity:1;transform:none}
@keyframes ping{0%{transform:scale(1);opacity:.5}70%{transform:scale(2.4);opacity:0}100%{opacity:0}}
@keyframes rowin{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

/* ── Top bar ─────────────────────────────────────────────────────────── */
.top{
  position:sticky;top:0;z-index:var(--z-sticky);background:var(--scrim);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
}
.top .wrap{display:flex;align-items:center;gap:var(--sp-5);height:var(--header-h)}
.brand{display:flex;align-items:baseline;gap:9px;font-family:var(--f-head);font-weight:700;font-size:18px;text-decoration:none}
.mark{width:34px;height:34px;display:block;align-self:center;flex:none;object-fit:contain}
.dom{font-family:var(--f-mono);font-size:11.5px;font-weight:400;color:var(--muted);direction:ltr;unicode-bidi:isolate}
@media(max-width:560px){.dom{display:none}}

.top nav{display:flex;gap:var(--sp-1);margin-inline-start:auto;font-size:14.5px;color:var(--muted)}
.top nav a{text-decoration:none;padding:10px;border-radius:var(--r-sm);position:relative;transition:color var(--dur-fast)}
.top nav a::after{content:"";position:absolute;inset-inline:10px;inset-block-end:4px;height:2px;border-radius:2px;background:var(--brand);transform:scaleX(0);transform-origin:right center;transition:transform var(--dur) var(--ease-out)}
.top nav a:hover{color:var(--ink)}
.top nav a:hover::after{transform:scaleX(1)}
.top nav a[aria-current="true"]{color:var(--brand-ink);font-weight:700}
.top nav a[aria-current="true"]::after{transform:scaleX(1)}

.navtoggle{
  display:none;margin-inline-start:auto;width:44px;height:44px;flex:none;
  align-items:center;justify-content:center;border:1px solid var(--line-strong);
  background:var(--surface);border-radius:var(--r-md);cursor:pointer;color:var(--ink);
  transition:border-color var(--dur-fast),color var(--dur-fast);
}
.navtoggle:hover{border-color:var(--brand);color:var(--brand)}
.navtoggle span{display:block;width:18px;height:1.8px;background:currentColor;border-radius:2px;position:relative;transition:transform var(--dur) var(--ease-out)}
.navtoggle span::before,.navtoggle span::after{content:"";position:absolute;inset-inline:0;height:1.8px;background:currentColor;border-radius:2px;transition:transform var(--dur) var(--ease-out),opacity var(--dur-fast)}
.navtoggle span::before{inset-block-start:-6px}
.navtoggle span::after{inset-block-start:6px}
.navtoggle[aria-expanded="true"] span{transform:rotate(45deg)}
.navtoggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(-90deg)}
.navtoggle[aria-expanded="true"] span::after{opacity:0}
@media(max-width:1040px){.top nav,.top .wrap>.btn{display:none}.navtoggle{display:flex}}

/* ── درج التنقّل ─────────────────────────────────────────────────────── */
.navdrawer{position:fixed;inset:0;z-index:var(--z-drawer);visibility:hidden;pointer-events:none}
.navdrawer[data-open="true"]{visibility:visible;pointer-events:auto}
.navdrawer .backdrop{position:absolute;inset:0;background:var(--backdrop);opacity:0;transition:opacity var(--dur) ease}
.navdrawer[data-open="true"] .backdrop{opacity:1}
.navdrawer .panel{
  position:absolute;inset-block:0;inset-inline-end:0;width:min(320px,86vw);
  background:var(--surface);border-inline-start:1px solid var(--line);box-shadow:var(--shadow-lg);
  padding:var(--sp-5) var(--sp-5) var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-2);
  transform:translateX(100%);transition:transform var(--dur) var(--ease-out);
  overflow-y:auto;overscroll-behavior:contain;
}
.navdrawer[data-open="true"] .panel{transform:none}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-3)}
.navclose{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);background:var(--surface-2);border-radius:var(--r-md);cursor:pointer;color:var(--ink-2);font-size:20px;line-height:1;transition:border-color var(--dur-fast),color var(--dur-fast)}
.navclose:hover{border-color:var(--brand);color:var(--brand)}
.dlink{display:flex;align-items:center;gap:var(--sp-3);min-height:48px;padding:0 var(--sp-3);border-radius:var(--r-md);text-decoration:none;color:var(--ink-2);font-size:16px;font-family:var(--f-head);font-weight:500;transition:background var(--dur-fast),color var(--dur-fast)}
.dlink:hover{background:var(--surface-2);color:var(--brand)}
.dlink[aria-current="true"]{background:var(--brand-soft);color:var(--brand-ink);font-weight:700}
.dlink b{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.45;flex:none}
.dlink[aria-current="true"] b{opacity:1}
.panel .btn{margin-top:var(--sp-4)}
.panel-foot{margin-top:auto;padding-top:var(--sp-5);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:var(--sp-2);font-size:14px;color:var(--muted)}
.panel-foot a{text-decoration:none;color:var(--ink-2);min-height:36px;display:flex;align-items:center}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:9px;justify-content:center;min-height:46px;
  padding:12px 24px;border-radius:var(--r-pill);font-size:15px;font-weight:700;text-decoration:none;
  border:1px solid transparent;cursor:pointer;font-family:inherit;
  transition:transform var(--dur) var(--ease-back),background var(--dur-fast),border-color var(--dur-fast),box-shadow var(--dur-fast),color var(--dur-fast);
}
.btn .arw{display:inline-block;transition:transform var(--dur) var(--ease-out)}
.btn:hover{transform:translateY(-2px)}
.btn:hover .arw{transform:translateX(-4px)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand);color:var(--on-brand);box-shadow:0 8px 20px -12px var(--brand)}
.btn-primary:hover{background:var(--brand-ink);box-shadow:0 14px 28px -12px var(--brand)}
.btn-ghost{border-color:var(--line-strong);color:var(--ink);background:var(--surface)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand-ink)}
.btn-sm{min-height:44px;padding:10px 18px;font-size:14px}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:var(--r-sm)}

/* ── Bento ───────────────────────────────────────────────────────────── */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--sp-4);margin-top:var(--sp-6)}
.b{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:var(--sp-5);grid-column:span 2;min-width:0;position:relative;overflow:hidden;
  transition:border-color var(--dur) ,box-shadow var(--dur),transform var(--dur) var(--ease-back);
}
.b:hover{border-color:var(--brand-line);box-shadow:var(--shadow);transform:translateY(-3px) scale(1.012)}
.b.w3{grid-column:span 3}
.b.w4{grid-column:span 4}
.b.w6{grid-column:span 6}
@media(max-width:960px){
  .bento{grid-template-columns:repeat(4,minmax(0,1fr))}
  .b,.b.w3{grid-column:span 2}.b.w4,.b.w6{grid-column:span 4}
}
@media(max-width:620px){
  .bento{grid-template-columns:1fr;gap:var(--sp-3)}
  .b,.b.w3,.b.w4,.b.w6{grid-column:span 1}
}

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero{
  padding-block:var(--sp-7) var(--sp-8);position:relative;overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero::before{
  content:"";position:absolute;inset-block-start:-200px;inset-inline-start:-140px;
  width:620px;height:620px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--brand-soft) 0%,transparent 68%);
}
.hero::after{
  content:"";position:absolute;inset-block-end:-180px;inset-inline-end:-140px;
  width:460px;height:460px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--gold-soft) 0%,transparent 70%);
}
.hero .wrap{position:relative}
.hero-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--sp-7);align-items:center}
@media(max-width:1020px){.hero-grid{grid-template-columns:1fr;gap:var(--sp-6)}}
.daychip{
  display:inline-flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:6px 14px 6px 8px;font-size:13px;color:var(--muted);margin-bottom:var(--sp-5);
}
.daychip time{font-family:var(--f-mono);color:var(--brand-ink);font-variant-numeric:tabular-nums;font-size:13.5px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--brand);position:relative;flex:none}
.dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--brand);animation:ping 2.4s ease-out infinite}
.hero h1{font-size:clamp(33px,4.8vw,54px);line-height:1.2}
.hero h1 em{font-style:normal;color:var(--brand)}
.hero p.sub{margin-top:var(--sp-4);font-size:17.5px;color:var(--muted);max-width:48ch}
.hero-cta{display:flex;gap:var(--sp-3);margin-top:var(--sp-6);flex-wrap:wrap}

.herotiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin-top:var(--sp-7)}
@media(max-width:620px){.herotiles{grid-template-columns:1fr}}
.htile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-4);display:flex;gap:var(--sp-3);align-items:flex-start}
.htile svg{flex:none;color:var(--brand);margin-top:2px}
.htile b{display:block;font-family:var(--f-head);font-size:14.5px;font-weight:700}
.htile span{font-size:13px;color:var(--muted)}

/* ── شاشة البرنامج (component مشترك) ─────────────────────────────────── */
.mockwrap{position:relative;min-width:0}
/* من غير JS الشاشة بتفضل فاضية — بنخفيها بدل ما تبان كصندوق فاضي */
.screen:empty{display:none}
.screen{
  border:1px solid var(--line-strong);border-radius:var(--r-xl);overflow:hidden;
  background:var(--surface);box-shadow:var(--shadow-lg);font-size:12px;line-height:1.6;
}

/* ── لقطة حقيقية من البرنامج (جولة الشاشات) ──────────────────────────── */
.shot{
  border:1px solid var(--line-strong);border-radius:var(--r-xl);overflow:hidden;
  background:var(--surface);box-shadow:var(--shadow-lg);
}
.shot img{display:block;width:100%;height:auto}
.s-bar{display:flex;align-items:center;gap:var(--sp-2);padding:0 var(--sp-3);height:44px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.s-brand{display:flex;align-items:center;gap:7px;font-family:var(--f-head);font-weight:700;font-size:12.5px;flex:none}
.s-mark{width:21px;height:21px;display:block;object-fit:contain}
.s-search{flex:1;max-width:220px;height:25px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--muted);font-size:11px;display:flex;align-items:center;gap:6px;padding:0 9px;margin-inline:auto;overflow:hidden;white-space:nowrap}
.s-user{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);flex:none}
.s-avatar{width:21px;height:21px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;font-size:9.5px;font-weight:700}
.s-body{display:flex;min-height:340px}
.s-nav{width:136px;border-inline-start:1px solid var(--line);padding:10px 8px;background:var(--surface-2);flex:none}
.s-nav i{display:block;font-style:normal;font-size:10px;letter-spacing:normal;color:var(--muted);padding:6px 8px 4px;font-family:var(--f-body)}
.s-nav span[data-nav]{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;color:var(--ink-2);font-size:11.5px;transition:background var(--dur),color var(--dur)}
.s-nav span[data-nav] b{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.5;flex:none;transition:opacity var(--dur)}
.s-nav span[data-nav].on{background:var(--accent-soft);color:var(--accent-ink);font-weight:700}
.s-nav span[data-nav].on b{opacity:1}
.s-main{flex:1;padding:var(--sp-3);min-width:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.s-head{display:flex;align-items:center;gap:var(--sp-2)}
.s-title{font-family:var(--f-head);font-size:13px;font-weight:700;line-height:1.4}
.s-meta{font-size:10.5px;color:var(--muted);margin-inline-start:auto;font-family:var(--f-mono);white-space:nowrap}
.s-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2)}
.s-kpi{border:1px solid var(--line);border-radius:10px;padding:9px 10px;background:var(--surface);min-width:0}
.s-kpi span{font-size:10.5px;color:var(--muted);display:block}
.s-kpi b{font-family:var(--f-mono);font-weight:500;font-size:17px;font-variant-numeric:tabular-nums;letter-spacing:-.02em;display:block;margin-top:1px}
.s-kpi u{text-decoration:none;font-size:9.5px;color:var(--accent-ink);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-kpi.warn u{color:var(--warm)}
.s-card{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:10px;min-width:0;flex:1;overflow-x:auto}
@media(max-width:680px){.s-nav{display:none}.s-kpis{grid-template-columns:repeat(2,1fr)}}
table.s-t{width:100%;border-collapse:collapse;font-size:11px}
table.s-t th{text-align:start;font-weight:400;font-size:10px;color:var(--muted);padding:5px 6px;border-bottom:1px solid var(--line)}
table.s-t td{padding:6.5px 6px;border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
table.s-t tr:last-child td{border-bottom:0}
table.s-t td.n{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
table.s-t tbody tr{animation:rowin .4s ease both}
.pill{font-size:9.5px;padding:2px 8px;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent-ink);white-space:nowrap}
.pill.w{background:var(--warm-soft);color:var(--warm)}
.pill.g{background:var(--gold-soft);color:var(--gold)}
.pill.k{background:var(--ok-soft);color:var(--ok)}
.screen-cap{font-size:12px;color:var(--muted);text-align:center;margin-top:var(--sp-3)}

/* شريط لحظات الهيرو */
.moments-bar{display:flex;align-items:flex-end;gap:var(--sp-2);margin-top:var(--sp-3)}
.moments{display:flex;gap:6px;flex:1;min-width:0}
.moment{flex:1;min-width:0;border:0;background:transparent;padding:4px 2px 0;cursor:pointer;text-align:start;font-family:inherit;color:var(--muted);transition:color var(--dur);border-radius:var(--r-sm)}
.moment .rail{display:block;height:3px;border-radius:2px;background:var(--line);overflow:hidden;margin-bottom:7px}
.moment .rail i{display:block;height:100%;width:0;background:var(--brand);border-radius:2px}
.moment[aria-current="true"] .rail i{width:100%;transition:width 6s linear}
.moments-bar[data-paused="true"] .moment[aria-current="true"] .rail i{transition:none;width:100%}
.moment.done .rail i{width:100%}
.moment em{font-style:normal;font-family:var(--f-mono);font-size:10.5px;display:block}
.moment strong{font-family:var(--f-head);font-size:11.5px;font-weight:500;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.moment[aria-current="true"]{color:var(--brand-ink)}
.mplay{flex:none;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line-strong);background:var(--surface);border-radius:var(--r-sm);cursor:pointer;color:var(--ink-2);transition:border-color var(--dur-fast),color var(--dur-fast)}
.mplay:hover{border-color:var(--brand);color:var(--brand-ink)}
.mplay svg{width:13px;height:13px}
.mplay .i-play{display:none}
.mplay[data-state="paused"] .i-play{display:block}
.mplay[data-state="paused"] .i-pause{display:none}
@media(max-width:680px){.moment strong{display:none}}

/* ── شريط الأرقام ────────────────────────────────────────────────────── */
.trust{background:var(--surface);border-bottom:1px solid var(--line);padding-block:0}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
@media(max-width:760px){.trust .wrap{grid-template-columns:repeat(2,1fr)}}
.tr{padding:var(--sp-6) var(--sp-5);border-inline-start:1px solid var(--line)}
.tr:first-child{border-inline-start:0}
.tr b{display:block;font-family:var(--f-mono);font-size:30px;font-weight:500;color:var(--brand-ink);letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.2}
/* الجزء العربي جوه الرقم بيرجع للخط العربي عشان الحروف تفضل متصلة */
.tr b small{font-family:var(--f-head);font-size:19px;font-weight:700;letter-spacing:normal}
.tr span{font-size:13.5px;color:var(--muted)}
@media(max-width:760px){.tr:nth-child(3){border-inline-start:0}.tr:nth-child(n+3){border-top:1px solid var(--line)}}

/* ── قصة اليوم (scrollytelling) ──────────────────────────────────────── */
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--sp-7);margin-top:var(--sp-7);align-items:start}
.story-sticky{position:sticky;top:calc(var(--header-h) + var(--sp-5));min-width:0}
.story-steps{display:flex;flex-direction:column;position:relative;padding-inline-end:var(--sp-5)}
.story-steps::before{content:"";position:absolute;inset-block:22px;inset-inline-end:5px;width:1px;background:var(--line)}
.story-rail{position:absolute;inset-block-start:22px;inset-inline-end:4px;width:3px;border-radius:2px;background:var(--brand);height:0;transition:height var(--dur) var(--ease-out)}
.sstep{padding-block:var(--sp-6);position:relative;opacity:.5;transition:opacity var(--dur)}
.sstep::before{
  content:"";position:absolute;inset-block-start:30px;inset-inline-end:-1px;width:11px;height:11px;border-radius:50%;
  background:var(--surface);border:2px solid var(--line-strong);transition:border-color var(--dur),transform var(--dur),box-shadow var(--dur);
}
.sstep.on{opacity:1}
.sstep.on::before{border-color:var(--brand);transform:scale(1.25);box-shadow:0 0 0 5px var(--brand-soft)}
.sstep time{font-family:var(--f-mono);font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;transition:color var(--dur)}
.sstep.on time{color:var(--brand-ink)}
.sstep .who{font-family:var(--f-body);font-size:12px;letter-spacing:normal;color:var(--muted);margin-inline-start:var(--sp-3)}
.sstep h3{font-size:19px;margin-top:var(--sp-2);transition:color var(--dur)}
.sstep.on h3{color:var(--brand-ink)}
.sstep p{color:var(--muted);font-size:15px;margin-top:6px;max-width:52ch}
@media(max-width:980px){
  .story{grid-template-columns:1fr;gap:var(--sp-5)}
  .story-sticky{position:sticky;top:var(--header-h);z-index:5;padding-block:var(--sp-2);background:var(--paper)}
  /* على الموبايل بنسيب الأرقام بس — الجدول بياخد طول كتير فوق الشاشة */
  .story-sticky .s-card,.story-sticky .s-body{min-height:0}
  .story-sticky .s-card{display:none}
  .sstep{padding-block:var(--sp-5)}
}

/* ── الورق ضد منظّم ──────────────────────────────────────────────────── */
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px;gap:4px;margin-top:var(--sp-5)}
.seg button{
  border:0;background:transparent;font-family:var(--f-head);font-weight:700;font-size:14.5px;
  padding:10px 22px;min-height:44px;border-radius:var(--r-pill);cursor:pointer;color:var(--muted);
  transition:background var(--dur),color var(--dur);
}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.seg button.paper[aria-pressed="true"]{color:var(--warm)}
.seg button.app[aria-pressed="true"]{color:var(--ok)}

.cmp{margin-top:var(--sp-6);border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);overflow:hidden}
.cmp-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) auto;gap:var(--sp-4);align-items:center;padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line)}
.cmp-row:last-of-type{border-bottom:0}
.cmp-row .task{font-size:14.5px;color:var(--ink-2);font-family:var(--f-head);font-weight:500}
.cmp-row .task small{display:block;font-family:var(--f-body);font-weight:400;font-size:12.5px;color:var(--muted)}
.bar{height:12px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden;position:relative}
.bar i{display:block;height:100%;border-radius:var(--r-pill);width:0;background:var(--warm);transition:width 600ms var(--ease-out),background var(--dur)}
.cmp[data-mode="app"] .bar i{background:var(--ok)}
.cmp-row .val{font-family:var(--f-head);font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--warm);min-width:96px;text-align:start;transition:color var(--dur)}
.cmp[data-mode="app"] .val{color:var(--ok)}
.cmp-total{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-3);padding:var(--sp-5);background:var(--surface-2);border-top:1px solid var(--line)}
.cmp-total b{font-family:var(--f-head);font-size:34px;font-weight:700;letter-spacing:normal;color:var(--warm);font-variant-numeric:tabular-nums;transition:color var(--dur)}
.cmp[data-mode="app"] .cmp-total b{color:var(--ok)}
.cmp-total span{color:var(--muted);font-size:14px}
.cmp-note{font-size:12.5px;color:var(--muted);margin-top:var(--sp-3)}
@media(max-width:760px){
  .cmp-row{grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-2) var(--sp-3)}
  .cmp-row .bar{grid-column:1 / -1;order:3}
}

/* ── جولة الشاشات (tabs) ─────────────────────────────────────────────── */
.tabs{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-5)}
.tabs button{
  border:1px solid var(--line);background:var(--surface);border-radius:var(--r-pill);
  padding:10px 18px;min-height:44px;font-family:var(--f-head);font-weight:500;font-size:14px;
  color:var(--ink-2);cursor:pointer;transition:border-color var(--dur-fast),color var(--dur-fast),background var(--dur-fast);
}
.tabs button:hover{border-color:var(--brand-line);color:var(--brand-ink)}
.tabs button[aria-selected="true"]{background:var(--brand);border-color:var(--brand);color:var(--on-brand);font-weight:700}
.tabpanel{margin-top:var(--sp-5)}
.tabpanel:focus-visible{outline:2px solid var(--brand);outline-offset:6px;border-radius:var(--r-xl)}

/* ── الحاسبة ─────────────────────────────────────────────────────────── */
.calc{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--sp-6);margin-top:var(--sp-6);align-items:start}
@media(max-width:900px){.calc{grid-template-columns:1fr}}
.calc-inputs{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-5)}
.field label{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);font-family:var(--f-head);font-weight:500;font-size:14.5px;margin-bottom:var(--sp-2)}
.field .out{font-family:var(--f-mono);font-size:16px;color:var(--brand-ink);font-variant-numeric:tabular-nums;font-weight:500}
.field input[type=range]{width:100%;accent-color:var(--brand);height:24px;cursor:pointer}
.field .hint{font-size:12.5px;color:var(--muted);margin-top:var(--sp-1)}

.calc-out{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
@media(max-width:520px){.calc-out{grid-template-columns:1fr}}
.res{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5)}
.res.hi{border-color:var(--brand-line);background:var(--brand-soft)}
.res .k{font-size:13px;color:var(--muted);display:block}
.res b{display:block;font-family:var(--f-mono);font-size:clamp(24px,3.4vw,32px);font-weight:500;letter-spacing:-.03em;color:var(--brand-ink);font-variant-numeric:tabular-nums;margin-top:var(--sp-1);line-height:1.2}
.res .u{font-size:12.5px;color:var(--muted);display:block;margin-top:2px}
.assume{grid-column:1 / -1;border:1px dashed var(--line-strong);border-radius:var(--r-lg);padding:var(--sp-4);background:var(--surface)}
.assume summary{font-family:var(--f-head);font-weight:500;font-size:14px;padding:0;min-height:0;cursor:pointer;list-style:none}
.assume summary::-webkit-details-marker{display:none}
.assume summary::after{content:"+";margin-inline-start:auto;color:var(--brand-ink);font-family:var(--f-mono)}
.assume[open] summary::after{content:"–"}
.assume ul{margin:var(--sp-3) 0 0;padding-inline-start:18px;color:var(--muted);font-size:13.5px;display:flex;flex-direction:column;gap:4px}

/* ── الموديولات / المزايا (bento) ────────────────────────────────────── */
.b .bnum{font-family:var(--f-mono);font-size:10.5px;color:var(--brand-ink);letter-spacing:.1em}
.b .blabel{font-family:var(--f-head);font-weight:700;font-size:11.5px;color:var(--brand-ink);letter-spacing:normal}
.b h3{font-size:17px;margin:var(--sp-2) 0 var(--sp-3)}
.b ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.b li{font-size:14px;color:var(--muted);padding-inline-start:15px;position:relative}
.b li::before{content:"";position:absolute;inset-inline-start:0;top:11px;width:5px;height:1.5px;background:var(--brand)}
.b p{font-size:14.5px;color:var(--muted)}
.b .tag{display:inline-block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;color:var(--brand-ink);background:var(--brand-soft);padding:3px 10px;border-radius:var(--r-pill)}

/* ── التقارير ────────────────────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-6);padding:0;list-style:none}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-pill);padding:7px 15px;font-size:13.5px;color:var(--ink-2)}
.chip.acc{border-color:var(--brand-line);color:var(--brand-ink);background:var(--brand-soft);font-weight:700}

/* ── خطوات البدء ─────────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);margin-top:var(--sp-6);counter-reset:s}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.stp{border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5);background:var(--surface);position:relative;overflow:hidden}
.stp::before{counter-increment:s;content:counter(s,decimal);font-family:var(--f-mono);font-size:52px;font-weight:500;color:var(--brand);opacity:.10;position:absolute;inset-block-start:6px;inset-inline-start:16px;line-height:1}
.stp h3{font-size:17px;margin-bottom:var(--sp-2)}
.stp p{font-size:14.5px;color:var(--muted)}
.stp .when{font-family:var(--f-body);font-size:12.5px;letter-spacing:normal;color:var(--muted);display:block;margin-top:var(--sp-3)}

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq{margin-top:var(--sp-6);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:19px 0;display:flex;gap:var(--sp-4);align-items:center;font-family:var(--f-head);font-weight:500;font-size:16px;transition:color var(--dur-fast);min-height:44px}
.faq summary:hover{color:var(--brand-ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";margin-inline-start:auto;flex:none;width:11px;height:11px;border-inline-end:1.8px solid var(--brand);border-block-end:1.8px solid var(--brand);transform:rotate(45deg) translateY(-2px);transition:transform var(--dur) var(--ease-out)}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq p{padding-bottom:21px;color:var(--muted);max-width:70ch;font-size:15px}

/* ── CTA + Footer ────────────────────────────────────────────────────── */
.cta{background:var(--brand);color:var(--on-brand);border-radius:var(--r-xl);padding:var(--sp-7);display:grid;grid-template-columns:1fr auto;gap:var(--sp-6);align-items:center;position:relative;overflow:hidden}
.cta::after{content:"";position:absolute;inset-block-start:-90px;inset-inline-start:-60px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,var(--cta-glow) 0%,transparent 68%);pointer-events:none}
@media(max-width:780px){.cta{grid-template-columns:1fr;padding:var(--sp-6) var(--sp-5)}}
.cta h2{font-size:clamp(24px,3vw,32px);color:var(--on-brand)}
.cta p{margin-top:var(--sp-2);opacity:.9;font-size:16px;max-width:52ch}
.cta .btn-primary{background:var(--on-brand);color:var(--brand-ink);box-shadow:none}
.cta .btn-primary:hover{background:var(--pure);color:var(--brand-ink)}
.cta .btn-ghost{background:transparent;border-color:var(--on-brand-48);color:var(--on-brand)}
.cta .btn-ghost:hover{background:var(--on-brand-14);color:var(--on-brand);border-color:var(--on-brand)}
.cta-actions{display:flex;flex-direction:column;gap:var(--sp-2);min-width:238px;position:relative}

footer{border-top:1px solid var(--line);padding-block:var(--sp-6);color:var(--muted);font-size:14px;margin-top:var(--sp-5)}
.foot{display:flex;flex-wrap:wrap;gap:var(--sp-5);align-items:center;justify-content:space-between}
.foot a{text-decoration:none;color:var(--ink-2);transition:color var(--dur-fast)}
.foot a:hover{color:var(--brand-ink)}
.foot-brand{font-size:16px}
.foot-links{display:flex;gap:var(--sp-5);flex-wrap:wrap}
@media(max-width:760px){footer{padding-bottom:calc(var(--sp-6) + 72px)}}

/* ── شريط دعوة لاصق للموبايل ─────────────────────────────────────────── */
.mobilebar{
  display:none;position:fixed;inset-inline:0;inset-block-end:0;z-index:var(--z-bar);
  padding:var(--sp-2) var(--sp-4) calc(var(--sp-2) + env(safe-area-inset-bottom,0px));
  background:var(--scrim);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);transform:translateY(110%);transition:transform var(--dur) var(--ease-out);
}
.mobilebar[data-show="true"]{transform:none}
.mobilebar .btn{width:100%}
@media(max-width:760px){.mobilebar{display:block}}

/* ── احترام تفضيل المستخدم ───────────────────────────────────────────── */
/* بنوقّف الحركة بس — من غير ما نلغي الـ transform اللي بيخفي الدرج وشريط الموبايل */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.pop{opacity:1;transform:none}
  .moment[aria-current="true"] .rail i{width:100%}
  .story-sticky{position:static}
}