docs(proposal): add Nady El-Seid mobile-app + data-portal proposal microsite

Phase-1 scope only: membership renewals/installments, sports activity
invoices, QR gate entry + invitations. Interactive HTML prototypes for
8 mobile screens and 6 portal screens, 6 downloadable CSV import
templates, 12-week plan, 700,000 EGP commercial offer.

Deployed to CapRover as app 'sayd-mobile'.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Proposal/sayd-mobile/Dockerfile

+FROM nginx:alpine
+RUN rm /etc/nginx/conf.d/default.conf
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY . /usr/share/nginx/html
+EXPOSE 80

Proposal/sayd-mobile/captain-definition

+{
+  "schemaVersion": 2,
+  "dockerfilePath": "./Dockerfile"
+}

Proposal/sayd-mobile/css/styles.css

+/* ==========================================================================
+   نادي الصيد المصري — تطبيق الأعضاء + بوابة البيانات
+   AL-Arcade proposal microsite. Arabic-first, RTL.
+   ========================================================================== */
+
+:root{
+  /* Brand */
+  --ink:        #07142B;
+  --ink-2:      #0C2247;
+  --ink-3:      #16407A;
+  --navy:       #123566;
+  --navy-soft:  #1B4A8C;
+  --gold:       #C9A227;
+  --gold-2:     #E8CC6A;
+  --gold-dim:   rgba(201,162,39,.14);
+  --mint:       #16B981;
+  --mint-dim:   rgba(22,185,129,.12);
+  --rose:       #E0556B;
+  --rose-dim:   rgba(224,85,107,.12);
+  --sky:        #3E8CE0;
+
+  /* Neutrals */
+  --paper:      #FFFFFF;
+  --paper-2:    #F7F8FB;
+  --paper-3:    #EFF2F7;
+  --line:       #E2E7EF;
+  --line-2:     #D3DAE6;
+  --txt:        #0E1A2B;
+  --txt-2:      #4A5A72;
+  --txt-3:      #7C8AA0;
+
+  --f-head: 'Cairo', system-ui, sans-serif;
+  --f-body: 'IBM Plex Sans Arabic', system-ui, sans-serif;
+
+  --r-s: 8px;
+  --r-m: 14px;
+  --r-l: 22px;
+  --r-xl: 32px;
+
+  --sh-s: 0 1px 2px rgba(10,25,50,.06), 0 2px 8px rgba(10,25,50,.05);
+  --sh-m: 0 4px 12px rgba(10,25,50,.07), 0 12px 32px rgba(10,25,50,.07);
+  --sh-l: 0 12px 28px rgba(10,25,50,.10), 0 32px 72px rgba(10,25,50,.12);
+
+  --wrap: 1140px;
+}
+
+*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
+
+html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
+
+body{
+  font-family:var(--f-body);
+  background:var(--paper);
+  color:var(--txt);
+  line-height:1.75;
+  font-size:16px;
+  overflow-x:hidden;
+  -webkit-font-smoothing:antialiased;
+}
+
+h1,h2,h3,h4,h5{ font-family:var(--f-head); line-height:1.28; font-weight:800; letter-spacing:-.01em; }
+a{ color:inherit; text-decoration:none; }
+img{ max-width:100%; display:block; }
+button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
+table{ border-collapse:collapse; width:100%; }
+::selection{ background:var(--gold); color:#fff; }
+
+/* Numbers always LTR-safe inside RTL */
+.num{ font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate; display:inline-block; }
+
+/* ================= NAV ================= */
+.nav{
+  position:fixed; inset-inline:0; top:0; z-index:200;
+  background:rgba(255,255,255,.82);
+  backdrop-filter:saturate(180%) blur(14px);
+  -webkit-backdrop-filter:saturate(180%) blur(14px);
+  border-bottom:1px solid transparent;
+  transition:border-color .3s, box-shadow .3s;
+}
+.nav.stuck{ border-bottom-color:var(--line); box-shadow:0 1px 20px rgba(10,25,50,.05); }
+.nav-in{
+  max-width:var(--wrap); margin:0 auto; padding:10px 24px;
+  display:flex; align-items:center; gap:20px;
+}
+.nav-brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
+.nav-brand img{ height:34px; width:auto; }
+.nav-brand span{ font-family:var(--f-head); font-weight:800; font-size:.82rem; color:var(--navy); line-height:1.25; }
+.nav-links{ display:flex; gap:2px; margin-inline-start:auto; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
+.nav-links::-webkit-scrollbar{ display:none; }
+.nav-links a{
+  font-size:.82rem; font-weight:600; color:var(--txt-2);
+  padding:7px 12px; border-radius:99px; white-space:nowrap; transition:.2s;
+}
+.nav-links a:hover{ color:var(--navy); background:var(--paper-3); }
+.nav-links a.on{ color:#fff; background:var(--navy); }
+.nav-cta{
+  flex-shrink:0; background:var(--gold); color:#fff; font-weight:700; font-size:.82rem;
+  padding:8px 18px; border-radius:99px; transition:.2s; box-shadow:0 4px 14px rgba(201,162,39,.32);
+}
+.nav-cta:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(201,162,39,.4); }
+.progress{ position:absolute; bottom:-1px; inset-inline-start:0; height:2px; background:linear-gradient(90deg,var(--gold),var(--gold-2)); width:0; }
+
+/* ================= LAYOUT ================= */
+section{ padding:104px 24px; position:relative; }
+.wrap{ max-width:var(--wrap); margin:0 auto; }
+.narrow{ max-width:820px; }
+.alt{ background:var(--paper-2); }
+.dark{ background:var(--ink); color:#EAF0F9; }
+.dark h2,.dark h3,.dark h4{ color:#fff; }
+
+.eyebrow{
+  display:inline-flex; align-items:center; gap:9px;
+  font-family:var(--f-head); font-weight:700; font-size:.76rem; letter-spacing:.08em;
+  color:var(--gold); margin-bottom:14px; text-transform:none;
+}
+.eyebrow::before{ content:''; width:26px; height:2px; background:var(--gold); border-radius:2px; }
+.dark .eyebrow{ color:var(--gold-2); }
+
+h2.title{ font-size:clamp(1.7rem,3.4vw,2.5rem); color:var(--navy); margin-bottom:16px; }
+.dark h2.title{ color:#fff; }
+.lede{ font-size:1.03rem; color:var(--txt-2); max-width:720px; line-height:1.9; }
+.dark .lede{ color:#A9BBD4; }
+
+.grid{ display:grid; gap:20px; }
+.g2{ grid-template-columns:repeat(2,1fr); }
+.g3{ grid-template-columns:repeat(3,1fr); }
+.g4{ grid-template-columns:repeat(4,1fr); }
+
+/* ================= HERO ================= */
+.hero{
+  min-height:100vh; display:flex; align-items:center; justify-content:center;
+  background:
+    radial-gradient(1100px 600px at 80% -5%, rgba(201,162,39,.18), transparent 62%),
+    radial-gradient(900px 520px at 8% 105%, rgba(30,90,170,.30), transparent 60%),
+    linear-gradient(160deg,#07142B 0%,#0B2144 55%,#07142B 100%);
+  color:#fff; text-align:center; padding:120px 24px 80px; overflow:hidden;
+}
+.hero::after{
+  content:''; position:absolute; inset:0; pointer-events:none; opacity:.16;
+  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
+                   linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
+  background-size:64px 64px;
+  mask-image:radial-gradient(ellipse at center,#000 20%,transparent 78%);
+  -webkit-mask-image:radial-gradient(ellipse at center,#000 20%,transparent 78%);
+}
+.hero-in{ position:relative; z-index:2; max-width:940px; }
+.hero-logo{ height:118px; width:auto; margin:0 auto 30px; filter:drop-shadow(0 12px 34px rgba(0,0,0,.5)); }
+.hero-tag{
+  display:inline-block; border:1px solid rgba(201,162,39,.5); color:var(--gold-2);
+  padding:5px 18px; border-radius:99px; font-size:.78rem; font-weight:600; margin-bottom:22px;
+  background:rgba(201,162,39,.08);
+}
+.hero h1{ font-size:clamp(2.1rem,5.6vw,3.9rem); line-height:1.2; margin-bottom:16px; }
+.hero h1 em{ font-style:normal; color:var(--gold-2); }
+.hero-sub{ font-size:clamp(1rem,1.9vw,1.22rem); color:#B3C5DE; max-width:660px; margin:0 auto 40px; line-height:1.9; }
+.hero-stats{ display:flex; justify-content:center; gap:0; flex-wrap:wrap; margin-bottom:44px; }
+.hero-stat{ padding:0 34px; border-inline-start:1px solid rgba(255,255,255,.13); }
+.hero-stat:first-child{ border:none; }
+.hero-stat b{ display:block; font-family:var(--f-head); font-size:1.85rem; color:var(--gold-2); font-weight:800; }
+.hero-stat span{ font-size:.8rem; color:#8FA6C4; }
+.hero-foot{ display:flex; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap; font-size:.8rem; color:#7E93B0; }
+.hero-foot img{ height:22px; opacity:.85; }
+.btn-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:48px; }
+.btn{
+  display:inline-flex; align-items:center; gap:8px; font-family:var(--f-head); font-weight:700;
+  font-size:.92rem; padding:13px 30px; border-radius:99px; transition:.22s;
+}
+.btn-gold{ background:linear-gradient(135deg,var(--gold),#B8901C); color:#fff; box-shadow:0 8px 26px rgba(201,162,39,.35); }
+.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(201,162,39,.45); }
+.btn-ghost{ border:1px solid rgba(255,255,255,.28); color:#fff; }
+.btn-ghost:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.5); }
+.btn-navy{ background:var(--navy); color:#fff; box-shadow:var(--sh-m); }
+.btn-navy:hover{ transform:translateY(-2px); }
+
+/* ================= CARDS ================= */
+.card{
+  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m);
+  padding:26px 24px; transition:.25s;
+}
+.card:hover{ border-color:var(--line-2); box-shadow:var(--sh-m); transform:translateY(-3px); }
+.card h4{ color:var(--navy); font-size:1.02rem; margin-bottom:8px; }
+.card p{ font-size:.88rem; color:var(--txt-2); line-height:1.8; }
+.card-ico{
+  width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
+  margin-bottom:16px; font-size:1.3rem;
+  background:var(--gold-dim); color:var(--gold);
+}
+.card-ico.mint{ background:var(--mint-dim); color:var(--mint); }
+.card-ico.sky{ background:rgba(62,140,224,.12); color:var(--sky); }
+.card-ico.rose{ background:var(--rose-dim); color:var(--rose); }
+
+.pain{
+  background:var(--paper); border:1px solid var(--line); border-inline-start:3px solid var(--rose);
+  border-radius:var(--r-m); padding:22px 22px;
+}
+.pain h4{ color:var(--rose); font-size:.98rem; margin-bottom:6px; }
+.pain p{ font-size:.87rem; color:var(--txt-2); }
+.gain{ border-inline-start-color:var(--mint); }
+.gain h4{ color:var(--mint); }
+
+.stat{
+  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m);
+  padding:24px 20px; text-align:center;
+}
+.stat b{ display:block; font-family:var(--f-head); font-size:2rem; color:var(--navy); font-weight:800; line-height:1.1; }
+.stat span{ font-size:.82rem; color:var(--txt-3); }
+.dark .stat{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1); }
+.dark .stat b{ color:var(--gold-2); }
+.dark .stat span{ color:#93A8C4; }
+
+/* Scope in / out */
+.scope-list{ list-style:none; }
+.scope-list li{
+  display:flex; gap:12px; align-items:flex-start; padding:13px 0;
+  border-bottom:1px dashed var(--line); font-size:.92rem;
+}
+.scope-list li:last-child{ border-bottom:none; }
+.tick{
+  flex-shrink:0; width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
+  font-size:.72rem; font-weight:800; margin-top:3px;
+  background:var(--mint-dim); color:var(--mint);
+}
+.tick.no{ background:var(--paper-3); color:var(--txt-3); }
+.tick.later{ background:rgba(62,140,224,.12); color:var(--sky); }
+
+/* ================= DEVICE ================= */
+.proto{ display:grid; grid-template-columns:300px 1fr; gap:44px; align-items:start; }
+.proto-nav{ position:sticky; top:96px; }
+.proto-nav h4{ font-size:.8rem; color:var(--txt-3); font-weight:700; margin-bottom:12px; letter-spacing:.04em; }
+.pn-item{
+  display:flex; align-items:center; gap:12px; width:100%; text-align:start;
+  padding:11px 14px; border-radius:var(--r-s); font-size:.88rem; font-weight:600;
+  color:var(--txt-2); transition:.18s; margin-bottom:3px; border:1px solid transparent;
+}
+.pn-item:hover{ background:var(--paper-3); color:var(--navy); }
+.pn-item.on{ background:var(--navy); color:#fff; box-shadow:var(--sh-s); }
+.pn-item .n{
+  width:22px; height:22px; border-radius:6px; display:grid; place-items:center; flex-shrink:0;
+  font-size:.7rem; font-weight:800; background:var(--paper-3); color:var(--txt-3);
+}
+.pn-item.on .n{ background:rgba(255,255,255,.18); color:#fff; }
+.pn-desc{ font-size:.83rem; color:var(--txt-2); line-height:1.8; padding:16px 14px 0; border-top:1px solid var(--line); margin-top:14px; }
+
+.phone-stage{ display:flex; justify-content:center; align-items:flex-start; gap:34px; flex-wrap:wrap; }
+.phone{
+  width:330px; flex-shrink:0; background:#0A1220; border-radius:44px; padding:11px;
+  box-shadow:var(--sh-l), 0 0 0 1px rgba(255,255,255,.06) inset;
+  position:relative;
+}
+.phone::before{
+  content:''; position:absolute; top:22px; left:50%; transform:translateX(-50%);
+  width:104px; height:26px; background:#0A1220; border-radius:99px; z-index:5;
+}
+.screen{
+  background:#F4F6FA; border-radius:34px; overflow:hidden; height:686px;
+  position:relative; display:flex; flex-direction:column;
+}
+.sbar{
+  height:46px; flex-shrink:0; display:flex; align-items:flex-end; justify-content:space-between;
+  padding:0 26px 6px; font-size:.72rem; font-weight:700; color:#0E1A2B; position:relative; z-index:6;
+}
+.sbar.on-dark{ color:#fff; }
+.scr-body{ flex:1; overflow-y:auto; overflow-x:hidden; }
+.scr-body::-webkit-scrollbar{ width:0; }
+
+/* app chrome */
+.app-hd{ padding:6px 20px 18px; }
+.app-hd.navy{ background:linear-gradient(150deg,#0C2247,#123566 60%,#16407A); color:#fff; padding-bottom:26px; border-radius:0 0 26px 26px; }
+.app-hd h3{ font-size:1.08rem; }
+.app-hd .sm{ font-size:.74rem; opacity:.7; }
+.app-back{ font-size:1.1rem; }
+
+.tabbar{
+  flex-shrink:0; height:66px; background:#fff; border-top:1px solid var(--line);
+  display:flex; align-items:center; justify-content:space-around; padding-bottom:8px;
+}
+.tab{ display:flex; flex-direction:column; align-items:center; gap:3px; font-size:.62rem; color:var(--txt-3); font-weight:600; }
+.tab i{ font-size:1.15rem; font-style:normal; }
+.tab.on{ color:var(--navy); }
+.tab.on i{ filter:drop-shadow(0 2px 6px rgba(18,53,102,.3)); }
+
+/* app widgets */
+.mcard{
+  margin:0 16px 14px; background:#fff; border-radius:16px; padding:16px;
+  border:1px solid var(--line); box-shadow:0 1px 3px rgba(10,25,50,.04);
+}
+.mcard-t{ font-size:.78rem; font-weight:700; color:var(--txt-3); margin-bottom:10px; display:flex; justify-content:space-between; align-items:center; }
+.mrow{ display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid var(--paper-3); font-size:.8rem; }
+.mrow:last-child{ border-bottom:none; }
+.mrow .l{ color:var(--txt-2); }
+.mrow .v{ font-weight:700; color:var(--txt); }
+.chip{ display:inline-block; font-size:.66rem; font-weight:700; padding:3px 10px; border-radius:99px; }
+.chip.due{ background:var(--rose-dim); color:var(--rose); }
+.chip.ok{ background:var(--mint-dim); color:#0E8C60; }
+.chip.soon{ background:var(--gold-dim); color:#9A7B12; }
+.chip.info{ background:rgba(62,140,224,.12); color:var(--sky); }
+.mbtn{
+  display:block; width:100%; text-align:center; padding:13px; border-radius:13px;
+  font-family:var(--f-head); font-weight:700; font-size:.86rem;
+  background:linear-gradient(135deg,var(--gold),#B8901C); color:#fff; box-shadow:0 6px 18px rgba(201,162,39,.3);
+}
+.mbtn.navy{ background:var(--navy); box-shadow:0 6px 18px rgba(18,53,102,.28); }
+.mbtn.ghost{ background:#fff; color:var(--navy); border:1.5px solid var(--line-2); box-shadow:none; }
+
+/* membership digital card */
+.dcard{
+  margin:-38px 16px 18px; border-radius:20px; padding:18px;
+  background:linear-gradient(135deg,#123566,#0C2247 60%,#1B4A8C);
+  color:#fff; position:relative; overflow:hidden; box-shadow:0 14px 34px rgba(12,34,71,.35);
+}
+.dcard::after{
+  content:''; position:absolute; inset-inline-end:-40px; top:-40px; width:150px; height:150px;
+  border-radius:50%; background:radial-gradient(circle,rgba(201,162,39,.45),transparent 70%);
+}
+.dcard .who{ font-family:var(--f-head); font-weight:800; font-size:1.02rem; }
+.dcard .meta{ font-size:.7rem; opacity:.72; }
+.dcard .idno{ font-family:var(--f-head); letter-spacing:.16em; font-size:1rem; color:var(--gold-2); margin-top:12px; }
+
+.qr-box{
+  width:190px; height:190px; margin:0 auto; background:#fff; border-radius:18px; padding:12px;
+  box-shadow:0 10px 30px rgba(10,25,50,.14); display:grid; place-items:center;
+}
+.qr-grid{ width:100%; height:100%; display:grid; grid-template-columns:repeat(11,1fr); grid-template-rows:repeat(11,1fr); gap:2px; }
+.qr-grid i{ background:#0E1A2B; border-radius:1px; }
+
+.seg{ display:flex; background:var(--paper-3); border-radius:11px; padding:3px; margin:0 16px 14px; }
+.seg button{ flex:1; font-size:.76rem; font-weight:700; padding:8px; border-radius:9px; color:var(--txt-3); }
+.seg button.on{ background:#fff; color:var(--navy); box-shadow:var(--sh-s); }
+
+.sport-item{ display:flex; gap:12px; align-items:center; margin:0 16px 10px; background:#fff; border:1px solid var(--line); border-radius:15px; padding:12px; }
+.sport-ico{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:1.25rem; background:var(--paper-3); flex-shrink:0; }
+.sport-item .nm{ font-weight:700; font-size:.85rem; }
+.sport-item .ds{ font-size:.7rem; color:var(--txt-3); }
+.sport-item .pr{ margin-inline-start:auto; text-align:center; }
+.sport-item .pr b{ font-size:.9rem; color:var(--navy); font-family:var(--f-head); }
+.sport-item .pr span{ display:block; font-size:.62rem; color:var(--txt-3); }
+
+.tt{ margin:0 16px 10px; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
+.tt-d{ background:var(--paper-2); padding:7px 14px; font-size:.74rem; font-weight:700; color:var(--navy); border-bottom:1px solid var(--line); }
+.tt-r{ display:flex; align-items:center; gap:10px; padding:10px 14px; font-size:.76rem; border-bottom:1px solid var(--paper-3); }
+.tt-r:last-child{ border-bottom:none; }
+.tt-r .tm{ font-weight:700; color:var(--navy); font-size:.72rem; direction:ltr; }
+
+.otp-row{ display:flex; gap:10px; justify-content:center; margin:22px 0; direction:ltr; }
+.otp-row i{
+  width:52px; height:60px; border-radius:13px; background:#fff; border:1.5px solid var(--line-2);
+  display:grid; place-items:center; font-style:normal; font-family:var(--f-head); font-weight:800; font-size:1.4rem; color:var(--navy);
+}
+.otp-row i.f{ border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-dim); }
+
+/* ================= BROWSER / PORTAL ================= */
+.browser{
+  border-radius:16px; overflow:hidden; box-shadow:var(--sh-l);
+  border:1px solid var(--line); background:#fff;
+}
+.bbar{
+  background:#EDF0F5; border-bottom:1px solid var(--line); padding:10px 14px;
+  display:flex; align-items:center; gap:12px;
+}
+.bdots{ display:flex; gap:6px; }
+.bdots i{ width:11px; height:11px; border-radius:50%; }
+.burl{
+  flex:1; background:#fff; border-radius:7px; padding:5px 14px; font-size:.72rem; color:var(--txt-3);
+  direction:ltr; text-align:left; border:1px solid var(--line);
+}
+.bwin{ display:flex; min-height:560px; background:var(--paper-2); }
+
+.side{ width:210px; flex-shrink:0; background:var(--ink); color:#B9C9E0; padding:18px 12px; }
+.side-b{ display:flex; align-items:center; gap:9px; padding:0 8px 16px; border-bottom:1px solid rgba(255,255,255,.09); margin-bottom:14px; }
+.side-b img{ height:30px; }
+.side-b span{ font-family:var(--f-head); font-weight:800; font-size:.76rem; color:#fff; line-height:1.3; }
+.side-g{ font-size:.64rem; color:#5E7A9C; }
+.side a, .side .si{
+  display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:8px;
+  font-size:.8rem; font-weight:600; margin-bottom:2px; transition:.18s; cursor:default;
+}
+.side .si:hover{ background:rgba(255,255,255,.06); color:#fff; }
+.side .si.on{ background:var(--gold); color:#fff; }
+.side .si i{ font-style:normal; font-size:.95rem; }
+
+.pmain{ flex:1; padding:22px 24px; overflow:hidden; }
+.ptop{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
+.ptop h3{ font-size:1.15rem; color:var(--navy); }
+.ptop p{ font-size:.76rem; color:var(--txt-3); }
+
+.kpi{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px; }
+.kpi .k{ font-size:.72rem; color:var(--txt-3); font-weight:600; margin-bottom:6px; }
+.kpi .v{ font-family:var(--f-head); font-size:1.5rem; font-weight:800; color:var(--navy); line-height:1.1; }
+.kpi .d{ font-size:.68rem; margin-top:5px; font-weight:700; }
+.kpi .d.up{ color:var(--mint); }
+.kpi .d.dn{ color:var(--rose); }
+
+.tbl{ background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
+.tbl table{ font-size:.78rem; }
+.tbl th{
+  background:var(--paper-2); text-align:start; padding:10px 14px; font-weight:700;
+  color:var(--txt-2); font-size:.73rem; border-bottom:1px solid var(--line); white-space:nowrap;
+}
+.tbl td{ padding:10px 14px; border-bottom:1px solid var(--paper-3); color:var(--txt); white-space:nowrap; }
+.tbl tr:last-child td{ border-bottom:none; }
+.tbl tbody tr:hover{ background:var(--paper-2); }
+
+/* upload wizard */
+.steps{ display:flex; align-items:center; margin-bottom:22px; }
+.step{ display:flex; align-items:center; gap:8px; font-size:.76rem; font-weight:700; color:var(--txt-3); }
+.step .b{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--paper-3); color:var(--txt-3); font-size:.72rem; }
+.step.done .b{ background:var(--mint); color:#fff; }
+.step.done{ color:var(--mint); }
+.step.now .b{ background:var(--navy); color:#fff; box-shadow:0 0 0 4px rgba(18,53,102,.12); }
+.step.now{ color:var(--navy); }
+.step-line{ flex:1; height:2px; background:var(--line); margin:0 10px; border-radius:2px; }
+.step-line.done{ background:var(--mint); }
+
+.drop{
+  border:2px dashed var(--line-2); border-radius:14px; padding:34px 20px; text-align:center;
+  background:#fff;
+}
+.drop .ic{ font-size:2.2rem; margin-bottom:10px; }
+.drop h4{ color:var(--navy); font-size:.98rem; margin-bottom:6px; }
+.drop p{ font-size:.78rem; color:var(--txt-3); }
+
+.map-row{
+  display:grid; grid-template-columns:1fr 30px 1fr 90px; gap:10px; align-items:center;
+  background:#fff; border:1px solid var(--line); border-radius:9px; padding:9px 12px; margin-bottom:7px; font-size:.78rem;
+}
+.map-row .arw{ text-align:center; color:var(--txt-3); }
+.map-row select{
+  font-family:inherit; font-size:.78rem; padding:5px 8px; border-radius:6px;
+  border:1px solid var(--line-2); background:var(--paper-2); color:var(--txt); width:100%;
+}
+.badge{ font-size:.66rem; font-weight:700; padding:3px 9px; border-radius:99px; text-align:center; background:var(--paper-3); color:var(--txt-3); }
+.badge.ok{ background:var(--mint-dim); color:#0E8C60; }
+.badge.warn{ background:var(--gold-dim); color:#9A7B12; }
+.badge.err{ background:var(--rose-dim); color:var(--rose); }
+
+.field{ margin-bottom:14px; }
+.field label{ display:block; font-size:.76rem; font-weight:700; color:var(--txt-2); margin-bottom:5px; }
+.field input, .field select{
+  width:100%; font-family:inherit; font-size:.82rem; padding:9px 12px; border-radius:9px;
+  border:1px solid var(--line-2); background:#fff; color:var(--txt);
+}
+.field .hint{ font-size:.68rem; color:var(--txt-3); margin-top:4px; }
+.pbtn{
+  display:inline-flex; align-items:center; gap:7px; background:var(--navy); color:#fff;
+  font-family:var(--f-head); font-weight:700; font-size:.8rem; padding:9px 20px; border-radius:9px;
+}
+.pbtn.gold{ background:var(--gold); }
+.pbtn.ghost{ background:#fff; color:var(--navy); border:1px solid var(--line-2); }
+
+/* ================= TEMPLATES ================= */
+.tmpl{
+  background:#fff; border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden;
+  transition:.25s;
+}
+.tmpl:hover{ box-shadow:var(--sh-m); transform:translateY(-3px); }
+.tmpl-h{ padding:18px 20px 14px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--line); }
+.tmpl-h .fi{
+  width:38px; height:44px; flex-shrink:0; border-radius:5px; background:#1D6F42; color:#fff;
+  display:grid; place-items:center; font-size:.6rem; font-weight:800; font-family:var(--f-head);
+  box-shadow:0 3px 8px rgba(29,111,66,.3);
+}
+.tmpl-h h4{ font-size:.92rem; color:var(--navy); }
+.tmpl-h p{ font-size:.72rem; color:var(--txt-3); }
+.tmpl-b{ padding:14px 20px 18px; }
+.cols{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:14px; }
+.cols span{ font-size:.68rem; background:var(--paper-3); color:var(--txt-2); padding:3px 9px; border-radius:5px; font-weight:600; }
+.dl{ display:inline-flex; align-items:center; gap:6px; font-size:.76rem; font-weight:700; color:var(--gold); }
+.dl:hover{ text-decoration:underline; }
+
+/* ================= FLOW ================= */
+.flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:34px; }
+.fstep{ position:relative; padding:0 16px; text-align:center; }
+.fstep::after{
+  content:''; position:absolute; top:27px; inset-inline-start:-50%; width:100%; height:2px;
+  background:linear-gradient(90deg,transparent,rgba(201,162,39,.45),transparent);
+}
+.fstep:first-child::after{ display:none; }
+.fstep .fn{
+  width:56px; height:56px; border-radius:50%; margin:0 auto 14px; display:grid; place-items:center;
+  font-family:var(--f-head); font-weight:800; font-size:1.15rem; position:relative; z-index:2;
+  background:var(--ink-2); color:var(--gold-2); border:1px solid rgba(201,162,39,.35);
+}
+.fstep h4{ font-size:.94rem; margin-bottom:6px; }
+.fstep p{ font-size:.79rem; color:#9AB0CC; line-height:1.75; }
+
+/* ================= TIMELINE ================= */
+.tl{ position:relative; padding-inline-start:28px; }
+.tl::before{ content:''; position:absolute; inset-inline-start:7px; top:6px; bottom:6px; width:2px; background:linear-gradient(180deg,var(--gold),var(--line)); }
+.tl-i{ position:relative; padding-bottom:26px; }
+.tl-i::before{
+  content:''; position:absolute; inset-inline-start:-28px; top:6px; width:16px; height:16px;
+  border-radius:50%; background:#fff; border:3px solid var(--gold);
+}
+.tl-w{ font-size:.72rem; font-weight:800; color:var(--gold); letter-spacing:.04em; }
+.tl-i h4{ font-size:1rem; color:var(--navy); margin:2px 0 6px; }
+.tl-i p{ font-size:.86rem; color:var(--txt-2); }
+
+/* ================= PRICING ================= */
+.price-hero{
+  background:linear-gradient(150deg,#0C2247,#123566 55%,#0A1C38);
+  border-radius:var(--r-l); padding:44px 40px; color:#fff; position:relative; overflow:hidden;
+  box-shadow:var(--sh-l);
+}
+.price-hero::after{
+  content:''; position:absolute; inset-inline-end:-90px; top:-90px; width:340px; height:340px; border-radius:50%;
+  background:radial-gradient(circle,rgba(201,162,39,.28),transparent 68%);
+}
+.price-hero .amt{ font-family:var(--f-head); font-weight:900; font-size:clamp(2.6rem,7vw,4.4rem); color:var(--gold-2); line-height:1; }
+.price-hero .cur{ font-size:1.1rem; color:#C0D2EA; }
+
+.pline{ display:flex; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid var(--line); font-size:.9rem; }
+.pline:last-child{ border-bottom:none; }
+.pline .pn{ flex:1; }
+.pline .pn b{ display:block; color:var(--navy); font-family:var(--f-head); font-size:.94rem; }
+.pline .pn span{ font-size:.78rem; color:var(--txt-3); }
+.pline .pv{ font-family:var(--f-head); font-weight:800; color:var(--navy); white-space:nowrap; }
+
+.pay-step{ background:#fff; border:1px solid var(--line); border-radius:var(--r-m); padding:20px; text-align:center; }
+.pay-step .pc{ font-family:var(--f-head); font-size:1.7rem; font-weight:900; color:var(--gold); }
+.pay-step .pa{ font-size:.86rem; font-weight:700; color:var(--navy); }
+.pay-step .pw{ font-size:.74rem; color:var(--txt-3); margin-top:4px; }
+
+/* ================= MISC ================= */
+.note{
+  background:var(--gold-dim); border:1px solid rgba(201,162,39,.3); border-radius:var(--r-m);
+  padding:18px 20px; font-size:.86rem; color:#6E5709; line-height:1.85;
+}
+.dark .note{ background:rgba(201,162,39,.1); color:#E6D8A6; }
+
+.faq{ border-bottom:1px solid var(--line); }
+.faq summary{ padding:16px 4px; font-family:var(--f-head); font-weight:700; font-size:.95rem; color:var(--navy); cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:14px; }
+.faq summary::-webkit-details-marker{ display:none; }
+.faq summary::after{ content:'+'; color:var(--gold); font-size:1.3rem; line-height:1; }
+.faq[open] summary::after{ content:'−'; }
+.faq p{ padding:0 4px 18px; font-size:.88rem; color:var(--txt-2); line-height:1.9; }
+
+footer{ background:var(--ink); color:#8AA0BE; padding:56px 24px 34px; text-align:center; }
+footer img{ height:44px; margin:0 auto 16px; opacity:.9; }
+footer .fl{ display:flex; justify-content:center; gap:26px; flex-wrap:wrap; font-size:.84rem; margin:20px 0; }
+footer .fl span{ color:#C9D8EC; }
+footer small{ font-size:.72rem; color:#5C7A9C; }
+
+.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
+.reveal.in{ opacity:1; transform:none; }
+
+/* ================= RESPONSIVE ================= */
+@media (max-width:1020px){
+  .proto{ grid-template-columns:1fr; }
+  .proto-nav{ position:static; display:flex; gap:6px; overflow-x:auto; padding-bottom:8px; }
+  .proto-nav .pn-item{ white-space:nowrap; margin-bottom:0; }
+  .proto-nav h4,.pn-desc{ display:none; }
+  .g4{ grid-template-columns:repeat(2,1fr); }
+  .flow{ grid-template-columns:repeat(2,1fr); row-gap:34px; }
+  .fstep::after{ display:none; }
+}
+@media (max-width:760px){
+  section{ padding:72px 18px; }
+  .g2,.g3,.g4{ grid-template-columns:1fr; }
+  .nav-links{ display:none; }
+  .hero-stat{ padding:10px 20px; border:none; }
+  .price-hero{ padding:30px 22px; }
+  .bwin{ display:block; }
+  .side{ width:100%; display:flex; gap:4px; overflow-x:auto; padding:10px; }
+  .side-b,.side-g{ display:none; }
+  .side .si{ white-space:nowrap; margin-bottom:0; }
+  .pmain{ padding:16px; }
+  .flow{ grid-template-columns:1fr; }
+  .tl{ padding-inline-start:22px; }
+}

Proposal/sayd-mobile/index.html

+<!DOCTYPE html>
+<html lang="ar" dir="rtl">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>نادي الصيد المصري — تطبيق الأعضاء وبوابة البيانات | عرض فني ومالي</title>
+<meta name="description" content="تطبيق موبايل للأعضاء يحل أزمة تحصيل الاشتراكات والتجديدات وفواتير الأنشطة الرياضية ودخول البوابة بـ QR — مدعوم ببوابة إدارة ترفع البيانات من ملفات Excel جاهزة.">
+<meta name="theme-color" content="#07142B">
+<link rel="icon" href="assets/club-logo.png">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@600;700;800;900&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="css/styles.css">
+</head>
+<body>
+
+<!-- ============ NAV ============ -->
+<nav class="nav" id="nav">
+  <div class="nav-in">
+    <div class="nav-brand">
+      <img src="assets/club-logo.png" alt="نادي الصيد المصري">
+      <span>نادي الصيد المصري<br>تطبيق الأعضاء</span>
+    </div>
+    <div class="nav-links" id="navlinks">
+      <a href="#problem">المشكلة</a>
+      <a href="#scope">النطاق</a>
+      <a href="#app">التطبيق</a>
+      <a href="#portal">البوابة</a>
+      <a href="#templates">القوالب</a>
+      <a href="#flow">آلية العمل</a>
+      <a href="#plan">الجدول الزمني</a>
+      <a href="#price">العرض المالي</a>
+    </div>
+    <a href="#price" class="nav-cta">العرض المالي</a>
+  </div>
+  <div class="progress" id="progress"></div>
+</nav>
+
+<!-- ============ HERO ============ -->
+<section class="hero" id="top">
+  <div class="hero-in">
+    <img src="assets/club-logo.png" alt="نادي الصيد المصري" class="hero-logo">
+    <div class="hero-tag">المرحلة الأولى &mdash; تطبيق الأعضاء وبوابة البيانات</div>
+    <h1>حصّل اشتراكاتك<br>من <em>جيب العضو</em>، لا من طابور الخزنة.</h1>
+    <p class="hero-sub">
+      تطبيق موبايل لأعضاء نادي الصيد المصري يعرض المستحقات ويحصّلها إلكترونيًا،
+      ويشترك في الأنشطة الرياضية، ويفتح البوابة بكود QR &mdash;
+      مدعوم ببوابة إدارية بسيطة ترفعون إليها بياناتكم من ملفات Excel جاهزة، بدون نظام ERP كامل.
+    </p>
+    <div class="btn-row">
+      <a href="#app" class="btn btn-gold">شاهد نموذج التطبيق ↓</a>
+      <a href="#portal" class="btn btn-ghost">شاهد بوابة الإدارة</a>
+    </div>
+    <div class="hero-stats">
+      <div class="hero-stat"><b class="num">3</b><span>محاور فقط في المرحلة الأولى</span></div>
+      <div class="hero-stat"><b class="num">12</b><span>أسبوع حتى الإطلاق</span></div>
+      <div class="hero-stat"><b class="num">6</b><span>ملفات Excel لتشغيل النظام</span></div>
+      <div class="hero-stat"><b class="num">700,000</b><span>جنيه &mdash; شامل كل شيء</span></div>
+    </div>
+    <div class="hero-foot">
+      <span>مقدم إلى: مجلس إدارة نادي الصيد المصري</span>
+      <span>&bull;</span>
+      <span style="display:inline-flex;align-items:center;gap:8px;">
+        <img src="assets/al-arcade-white.png" alt="AL-Arcade"> مقدم من شركة الأركيد
+      </span>
+      <span>&bull;</span>
+      <span>وثيقة سرية &mdash; 2026</span>
+    </div>
+  </div>
+</section>
+
+<!-- ============ PROBLEM ============ -->
+<section id="problem">
+  <div class="wrap">
+    <div class="reveal">
+      <div class="eyebrow">لماذا الآن</div>
+      <h2 class="title">المشكلة ليست في إدارة النادي. المشكلة في التحصيل.</h2>
+      <p class="lede">
+        النادي لا يحتاج اليوم نظام ERP بمائتي شاشة ليحل أزمته الحالية.
+        الأزمة محدّدة وواضحة: <strong>المال المستحق موجود، لكنه لا يصل إلى الخزنة في وقته.</strong>
+        هذا العرض يعالج هذه النقطة تحديدًا &mdash; ولا شيء غيرها.
+      </p>
+    </div>
+
+    <div class="grid g3 reveal" style="margin-top:38px;">
+      <div class="pain">
+        <h4>التجديد يعتمد على مبادرة العضو</h4>
+        <p>لا أحد يذكّر العضو بموعد تجديد عضويته أو بقسطه المستحق. من ينسى، لا يدفع. ومن لا يدفع، لا يُلاحَق إلا بعد شهور.</p>
+      </div>
+      <div class="pain">
+        <h4>الدفع يتطلب الحضور شخصيًا</h4>
+        <p>كل جنيه يمر عبر شباك الخزنة في ساعات عمل محدودة. عضو مسافر أو مشغول = تحصيل مؤجّل إلى أجل غير معلوم.</p>
+      </div>
+      <div class="pain">
+        <h4>لا صورة لحظية للمتأخرات</h4>
+        <p>معرفة «كم لنا عند الأعضاء هذا الشهر؟» تتطلب عملًا يدويًا على كشوف متفرقة، والنتيجة تصل متأخرة وغير دقيقة.</p>
+      </div>
+      <div class="pain">
+        <h4>الأنشطة الرياضية بلا سعر معلن</h4>
+        <p>ولي الأمر لا يعرف تكلفة اشتراك ابنه في السباحة أو الكاراتيه قبل أن يسأل موظفًا. الاحتكاك يقتل الاشتراك.</p>
+      </div>
+      <div class="pain">
+        <h4>الدعوات بلا سقف ولا محاسبة</h4>
+        <p>لا سجل دقيق لمن استهلك دعواته، ولا آلية بسيطة لبيع دعوة إضافية. إيراد كامل يضيع على البوابة.</p>
+      </div>
+      <div class="pain">
+        <h4>البوابة نقطة اختناق</h4>
+        <p>التحقق من صلاحية العضوية عند الدخول يدوي وبطيء، ولا يميّز بسهولة بين عضو سدد وعضو متأخر.</p>
+      </div>
+    </div>
+
+    <div class="note reveal" style="margin-top:34px;">
+      <strong>القرار الذي بنينا عليه هذا العرض:</strong>
+      بدلًا من مشروع ERP كامل بميزانية ملايين ومدة تنفيذ تتجاوز السنة، نبدأ بأصغر منتج يحل أكبر ألم &mdash;
+      تطبيق موبايل للأعضاء + بوابة بيانات مبسّطة. تشتغلون خلال ثلاثة أشهر، وتحصّلون من الشهر الأول للإطلاق.
+      وما تبقّى من طموحات النظام يبقى قرارًا مفتوحًا لمرحلة قادمة، إن أردتم.
+    </div>
+  </div>
+</section>
+
+<!-- ============ SCOPE ============ -->
+<section class="alt" id="scope">
+  <div class="wrap">
+    <div class="reveal">
+      <div class="eyebrow">حدود المشروع</div>
+      <h2 class="title">ثلاثة محاور. لا أكثر.</h2>
+      <p class="lede">
+        وضوح النطاق هو ما يجعل هذا المشروع قابلًا للتنفيذ في 12 أسبوعًا وبميزانية 700,000 جنيه.
+        كل ما هو خارج هذه المحاور الثلاثة مؤجَّل صراحةً إلى المرحلة الثانية.
+      </p>
+    </div>
+
+    <div class="grid g3 reveal" style="margin-top:36px;">
+      <div class="card">
+        <div class="card-ico">◉</div>
+        <h4>١ &mdash; العضوية والاشتراكات</h4>
+        <p>
+          تجديد العضوية السنوي وأقساطه. يرى العضو رصيده ومستحقاته شهرًا بشهر،
+          ويسدد إلكترونيًا كاملًا أو قسطًا، ويستلم إيصالًا فوريًا في التطبيق.
+        </p>
+      </div>
+      <div class="card">
+        <div class="card-ico mint">◈</div>
+        <h4>٢ &mdash; الأنشطة الرياضية</h4>
+        <p>
+          كتالوج معلن بأسعار كل نشاط، اشتراك مباشر من التطبيق، فاتورة شهرية،
+          وجدول تدريب لكل مشترك يرفعه المدرب من قالب جاهز.
+        </p>
+      </div>
+      <div class="card">
+        <div class="card-ico sky">▣</div>
+        <h4>٣ &mdash; البوابة والدعوات</h4>
+        <p>
+          كود QR شخصي متجدد لدخول العضو، رصيد دعوات شهري حسب نوع العضوية،
+          وشراء دعوات إضافية من التطبيق عند نفادها.
+        </p>
+      </div>
+    </div>
+
+    <div class="grid g2 reveal" style="margin-top:44px; align-items:start;">
+      <div>
+        <h3 style="color:var(--navy); font-size:1.1rem; margin-bottom:12px;">داخل نطاق المرحلة الأولى</h3>
+        <ul class="scope-list">
+          <li><span class="tick">✓</span><span>تطبيق موبايل أصلي للأعضاء &mdash; iOS و Android، عربي بالكامل RTL</span></li>
+          <li><span class="tick">✓</span><span>دخول برقم الموبايل + كود تحقق OTP (بدون كلمات مرور)</span></li>
+          <li><span class="tick">✓</span><span>بطاقة عضوية رقمية وحالة سريان الاشتراك</span></li>
+          <li><span class="tick">✓</span><span>كشف المستحقات: تجديد سنوي، أقساط، غرامات، فواتير أنشطة</span></li>
+          <li><span class="tick">✓</span><span>سداد إلكتروني بالبطاقة والمحافظ الإلكترونية + إيصال فوري</span></li>
+          <li><span class="tick">✓</span><span>كتالوج الأنشطة الرياضية بالأسعار والفئات السنية والسعة</span></li>
+          <li><span class="tick">✓</span><span>الاشتراك في نشاط وربطه بأحد الأبناء</span></li>
+          <li><span class="tick">✓</span><span>جدول التدريب الأسبوعي لكل مشترك</span></li>
+          <li><span class="tick">✓</span><span>QR دخول متجدد + شاشة مسح على البوابة</span></li>
+          <li><span class="tick">✓</span><span>رصيد الدعوات، إصدار دعوة، وشراء دعوات إضافية</span></li>
+          <li><span class="tick">✓</span><span>إشعارات تذكير بالاستحقاق قبل موعده وبعده</span></li>
+          <li><span class="tick">✓</span><span>بوابة إدارة ويب: رفع البيانات، الأعضاء، المستحقات، التسعير، التقارير</span></li>
+          <li><span class="tick">✓</span><span>ستة قوالب Excel/CSV جاهزة لرفع كل بيانات النادي</span></li>
+          <li><span class="tick">✓</span><span>النشر على App Store و Google Play باسم النادي</span></li>
+        </ul>
+      </div>
+      <div>
+        <h3 style="color:var(--txt-3); font-size:1.1rem; margin-bottom:12px;">خارج النطاق &mdash; مؤجَّل للمرحلة الثانية</h3>
+        <ul class="scope-list">
+          <li><span class="tick later">→</span><span>حجز الملاعب والكورتات وحمامات السباحة</span></li>
+          <li><span class="tick later">→</span><span>محفظة إلكترونية ورصيد داخلي</span></li>
+          <li><span class="tick later">→</span><span>المطاعم والكافيتريات والطلب من التطبيق</span></li>
+          <li><span class="tick later">→</span><span>القرى والشاليهات والحجوزات الموسمية</span></li>
+          <li><span class="tick later">→</span><span>الشكاوى والطلبات والدعم الفني</span></li>
+          <li><span class="tick later">→</span><span>الأخبار والفعاليات والبطولات</span></li>
+          <li><span class="tick later">→</span><span>العيادة الطبية والكشف الرياضي</span></li>
+          <li><span class="tick later">→</span><span>الإنجازات وتقييم اللاعبين</span></li>
+          <li><span class="tick no">✕</span><span>نظام ERP محاسبي كامل (دفتر عام، ميزانيات، أصول)</span></li>
+          <li><span class="tick no">✕</span><span>الموارد البشرية والرواتب والحضور</span></li>
+          <li><span class="tick no">✕</span><span>المخازن والمشتريات وأذون الاستلام</span></li>
+          <li><span class="tick no">✕</span><span>نقاط البيع داخل النادي</span></li>
+          <li><span class="tick no">✕</span><span>إدارة الموظفين والصلاحيات المعقدة</span></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ============ MOBILE APP PROTOTYPE ============ -->
+<section id="app">
+  <div class="wrap">
+    <div class="reveal">
+      <div class="eyebrow">نموذج تفاعلي &mdash; تطبيق العضو</div>
+      <h2 class="title">هذا ما سيراه العضو على هاتفه.</h2>
+      <p class="lede">
+        ليست صورًا تخيلية. الشاشات التالية شاشات حقيقية مبنية بنفس التصميم الذي سيُسلَّم.
+        اضغط على أي شاشة من القائمة لتتصفحها.
+      </p>
+    </div>
+
+    <div class="proto reveal" style="margin-top:38px;">
+      <div class="proto-nav">
+        <h4>شاشات التطبيق</h4>
+        <button class="pn-item on" data-scr="login"><span class="n">١</span> الدخول والتحقق</button>
+        <button class="pn-item" data-scr="home"><span class="n">٢</span> الرئيسية وبطاقة العضوية</button>
+        <button class="pn-item" data-scr="dues"><span class="n">٣</span> المستحقات والأقساط</button>
+        <button class="pn-item" data-scr="pay"><span class="n">٤</span> السداد الإلكتروني</button>
+        <button class="pn-item" data-scr="qr"><span class="n">٥</span> كود دخول البوابة</button>
+        <button class="pn-item" data-scr="invites"><span class="n">٦</span> الدعوات وشراء المزيد</button>
+        <button class="pn-item" data-scr="sports"><span class="n">٧</span> الأنشطة الرياضية</button>
+        <button class="pn-item" data-scr="schedule"><span class="n">٨</span> جدول التدريب</button>
+        <div class="pn-desc">
+          تطبيق أصلي (Native) لنظامي iOS و Android، بواجهة عربية بالكامل من اليمين لليسار،
+          ويعمل على الأجهزة من إصدار iOS 14 و Android 8 فأحدث.
+        </div>
+      </div>
+
+      <div class="phone-stage">
+        <div class="phone">
+          <div class="screen">
+
+            <!-- 1. LOGIN -->
+            <div class="scr" data-scr="login" style="display:flex;flex-direction:column;height:100%;background:linear-gradient(165deg,#0C2247,#07142B);">
+              <div class="sbar on-dark"><span class="num">9:41</span><span>▮▮▮ ⏻</span></div>
+              <div class="scr-body" style="display:flex;flex-direction:column;align-items:center;padding:26px 22px;color:#fff;text-align:center;">
+                <img src="assets/club-logo.png" style="height:88px;margin:18px 0 20px;filter:drop-shadow(0 8px 22px rgba(0,0,0,.5));" alt="">
+                <h3 style="font-family:var(--f-head);font-size:1.15rem;">أهلًا بك في نادي الصيد</h3>
+                <p style="font-size:.78rem;color:#9FB6D4;margin-top:6px;line-height:1.8;">
+                  أدخل رقم الموبايل المسجَّل في بيانات عضويتك<br>وسيصلك كود تحقق برسالة قصيرة
+                </p>
+                <div style="width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:13px 16px;margin:24px 0 6px;display:flex;align-items:center;gap:10px;direction:ltr;">
+                  <span style="font-size:.86rem;color:#C7D8EE;">🇪🇬 +20</span>
+                  <span style="width:1px;height:20px;background:rgba(255,255,255,.18);"></span>
+                  <span style="font-size:.95rem;font-weight:700;letter-spacing:.06em;">100 123 4567</span>
+                </div>
+                <div class="otp-row">
+                  <i class="f">٤</i><i>٩</i><i>٢</i><i style="color:var(--txt-3);opacity:.4;">•</i>
+                </div>
+                <p style="font-size:.72rem;color:#8AA3C4;">لم يصلك الكود؟ إعادة الإرسال خلال <span class="num">00:23</span></p>
+                <div style="margin-top:auto;width:100%;padding-top:26px;">
+                  <div class="mbtn" style="margin:0;">تأكيد ودخول</div>
+                  <p style="font-size:.68rem;color:#6F87A8;margin-top:14px;line-height:1.7;">
+                    بالدخول أنت توافق على لائحة النادي وشروط استخدام التطبيق
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <!-- 2. HOME -->
+            <div class="scr" data-scr="home" style="display:none;flex-direction:column;height:100%;">
+              <div class="sbar on-dark"><span class="num">9:41</span><span>▮▮▮ ⏻</span></div>
+              <div class="scr-body">
+                <div class="app-hd navy">
+                  <div style="display:flex;justify-content:space-between;align-items:flex-start;">
+                    <div>
+                      <div class="sm">صباح الخير</div>
+                      <h3>محمد أحمد سيد</h3>
+                    </div>
+                    <div style="position:relative;font-size:1.2rem;">🔔<span style="position:absolute;top:-2px;right:-4px;width:8px;height:8px;background:var(--rose);border-radius:50%;"></span></div>
+                  </div>
+                </div>
+
+                <div class="dcard">
+                  <div style="display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:2;">
+                    <div>
+                      <div class="who">محمد أحمد سيد إبراهيم</div>
+                      <div class="meta">عضو عامل &mdash; ساري حتى <span class="num">2026/12/31</span></div>
+                    </div>
+                    <span class="chip ok">سارية</span>
+                  </div>
+                  <div class="idno num">10245</div>
+                </div>
+
+                <div class="mcard" style="border-color:rgba(224,85,107,.35);background:linear-gradient(180deg,#FFF6F7,#fff);">
+                  <div class="mcard-t"><span>إجمالي المستحق عليك الآن</span><span class="chip due">متأخر يومان</span></div>
+                  <div style="font-family:var(--f-head);font-size:1.9rem;font-weight:900;color:var(--rose);line-height:1.1;">
+                    <span class="num">1,850</span> <span style="font-size:.9rem;color:var(--txt-3);">ج.م</span>
+                  </div>
+                  <p style="font-size:.72rem;color:var(--txt-3);margin:4px 0 14px;">٣ بنود مستحقة &mdash; قسط تجديد + فاتورة نشاط + غرامة</p>
+                  <div class="mbtn">سدّد الآن</div>
+                </div>
+
+                <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 16px 14px;">
+                  <div style="background:#fff;border:1px solid var(--line);border-radius:13px;padding:12px 4px;text-align:center;">
+                    <div style="font-size:1.2rem;">▣</div><div style="font-size:.62rem;font-weight:700;color:var(--txt-2);margin-top:4px;">كود الدخول</div>
+                  </div>
+                  <div style="background:#fff;border:1px solid var(--line);border-radius:13px;padding:12px 4px;text-align:center;">
+                    <div style="font-size:1.2rem;">✉</div><div style="font-size:.62rem;font-weight:700;color:var(--txt-2);margin-top:4px;">الدعوات</div>
+                  </div>
+                  <div style="background:#fff;border:1px solid var(--line);border-radius:13px;padding:12px 4px;text-align:center;">
+                    <div style="font-size:1.2rem;">◈</div><div style="font-size:.62rem;font-weight:700;color:var(--txt-2);margin-top:4px;">الأنشطة</div>
+                  </div>
+                  <div style="background:#fff;border:1px solid var(--line);border-radius:13px;padding:12px 4px;text-align:center;">
+                    <div style="font-size:1.2rem;">🧾</div><div style="font-size:.62rem;font-weight:700;color:var(--txt-2);margin-top:4px;">الإيصالات</div>
+                  </div>
+                </div>
+
+                <div class="mcard">
+                  <div class="mcard-t"><span>اشتراكات أبنائك</span><span style="color:var(--gold);font-weight:700;">الكل</span></div>
+                  <div class="mrow"><span class="l">يوسف &mdash; سباحة مبتدئين</span><span class="v"><span class="chip ok">نشط</span></span></div>
+                  <div class="mrow"><span class="l">لُجين &mdash; جمباز فني</span><span class="v"><span class="chip soon">تُجدَّد خلال ٥ أيام</span></span></div>
+                </div>
+
+                <div class="mcard" style="margin-bottom:20px;">
+                  <div class="mcard-t"><span>رصيد الدعوات هذا الشهر</span></div>
+                  <div style="display:flex;align-items:center;gap:10px;">
+                    <div style="flex:1;height:8px;background:var(--paper-3);border-radius:99px;overflow:hidden;">
+                      <div style="width:25%;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-2));"></div>
+                    </div>
+                    <span style="font-size:.78rem;font-weight:800;color:var(--navy);"><span class="num">1</span> من <span class="num">4</span></span>
+                  </div>
+                </div>
+              </div>
+              <div class="tabbar">
+                <div class="tab on"><i>⌂</i>الرئيسية</div>
+                <div class="tab"><i>◈</i>الأنشطة</div>
+                <div class="tab"><i>▣</i>الدخول</div>
+                <div class="tab"><i>◔</i>حسابي</div>
+              </div>
+            </div>
+
+            <!-- 3. DUES -->
+            <div class="scr" data-scr="dues" style="display:none;flex-direction:column;height:100%;">
+              <div class="sbar"><span class="num">9:41</span><span>▮▮▮ ⏻</span></div>
+              <div class="scr-body">
+                <div class="app-hd" style="padding-top:4px;">
+                  <div style="display:flex;align-items:center;gap:12px;">
+                    <span class="app-back">→</span><h3 style="color:var(--navy);">المستحقات</h3>
+                  </div>
+                </div>
+                <div class="seg">
+                  <button class="on">مستحق (٣)</button><button>مسدَّد</button><button>الكل</button>
+                </div>
+
+                <div class="mcard" style="border-inline-start:3px solid var(--rose);">
+                  <div class="mcard-t"><span>قسط تجديد العضوية</span><span class="chip due">متأخر</span></div>
+                  <div class="mrow"><span class="l">عن شهر</span><span class="v">فبراير 2026</span></div>
+                  <div class="mrow"><span class="l">تاريخ الاستحقاق</span><span class="v num">2026/02/28</span></div>
+                  <div class="mrow"><span class="l">القسط ٢ من ٣</span><span class="v" style="color:var(--rose);font-size:1rem;"><span class="num">1,500</span> ج.م</span></div>
+                </div>
+
+                <div class="mcard" style="border-inline-start:3px solid var(--gold);">
+                  <div class="mcard-t"><span>اشتراك سباحة مبتدئين &mdash; يوسف</span><span class="chip soon">يستحق قريبًا</span></div>
+                  <div class="mrow"><span class="l">عن شهر</span><span class="v">مارس 2026</span></div>
+                  <div class="mrow"><span class="l">عدد الحصص</span><span class="v"><span class="num">12</span> حصة</span></div>
+                  <div class="mrow"><span class="l">القيمة</span><span class="v"><span class="num">900</span> ج.م</span></div>
+                </div>
+
+                <div class="mcard" style="border-inline-start:3px solid var(--rose);">
+                  <div class="mcard-t"><span>غرامة تأخير سداد</span><span class="chip due">متأخر</span></div>
+                  <div class="mrow"><span class="l">السبب</span><span class="v">تأخر قسط يناير</span></div>
+                  <div class="mrow"><span class="l">القيمة</span><span class="v"><span class="num">350</span> ج.م</span></div>
+                </div>
+
+                <div style="margin:18px 16px 22px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;">
+                  <div class="mrow"><span class="l">إجمالي المحدد</span><span class="v" style="font-size:1.15rem;color:var(--navy);"><span class="num">2,750</span> ج.م</span></div>
+                  <div style="height:10px;"></div>
+                  <div class="mbtn">سدّد المحدد</div>
+                  <div style="height:8px;"></div>
+                  <div class="mbtn ghost">سدّد بندًا واحدًا فقط</div>
+                </div>
+              </div>
+              <div class="tabbar">
+                <div class="tab on"><i>⌂</i>الرئيسية</div><div class="tab"><i>◈</i>الأنشطة</div>
+                <div class="tab"><i>▣</i>الدخول</div><div class="tab"><i>◔</i>حسابي</div>
+              </div>
+            </div>
+
+            <!-- 4. PAY -->
+            <div class="scr" data-scr="pay" style="display:none;flex-direction:column;height:100%;">
+              <div class="sbar"><span class="num">9:41</span><span>▮▮▮ ⏻</span></div>
+              <div class="scr-body">
+                <div class="app-hd" style="padding-top:4px;">
+                  <div style="display:flex;align-items:center;gap:12px;">
+                    <span class="app-back">→</span><h3 style="color:var(--navy);">إتمام السداد</h3>
+                  </div>
+                </div>
+
+                <div class="mcard" style="background:linear-gradient(150deg,#0C2247,#123566);border:none;color:#fff;">
+                  <div style="font-size:.74rem;opacity:.7;">المبلغ المطلوب سداده</div>
+                  <div style="font-family:var(--f-head);font-size:2.1rem;font-weight:900;color:var(--gold-2);line-height:1.2;">
+                    <span class="num">2,750</span> <span style="font-size:.85rem;color:#C0D2EA;">ج.م</span>
+                  </div>
+                  <div style="font-size:.7rem;opacity:.65;margin-top:4px;">بندان مستحقان &mdash; عضوية 10245</div>
+                </div>
+
+                <div style="margin:0 16px 10px;font-size:.78rem;font-weight:700;color:var(--txt-2);">اختر وسيلة الدفع</div>
+
+                <div class="mcard" style="border:1.5px solid var(--gold);display:flex;align-items:center;gap:12px;">
+                  <div class="sport-ico" style="background:var(--gold-dim);">💳</div>
+                  <div><div style="font-weight:700;font-size:.85rem;">بطاقة بنكية</div><div style="font-size:.7rem;color:var(--txt-3);">Visa &bull; Mastercard &bull; Meeza</div></div>
+                  <div style="margin-inline-start:auto;width:20px;height:20px;border-radius:50%;background:var(--gold);color:#fff;display:grid;place-items:center;font-size:.65rem;">✓</div>
+                </div>
+                <div class="mcard" style="display:flex;align-items:center;gap:12px;">
+                  <div class="sport-ico">📱</div>
+                  <div><div style="font-weight:700;font-size:.85rem;">محفظة إلكترونية</div><div style="font-size:.7rem;color:var(--txt-3);">فودافون كاش &bull; إنستاباي</div></div>
+                </div>
+                <div class="mcard" style="display:flex;align-items:center;gap:12px;">
+                  <div class="sport-ico">🏛</div>
+                  <div><div style="font-weight:700;font-size:.85rem;">الدفع في خزنة النادي</div><div style="font-size:.7rem;color:var(--txt-3);">يصدر كود سداد يقدَّم للخزنة</div></div>
+                </div>
+
+                <div style="margin:14px 16px 0;background:var(--mint-dim);border-radius:12px;padding:12px 14px;font-size:.73rem;color:#0E8C60;line-height:1.75;">
+                  ✓ بمجرد نجاح العملية يُحدَّث رصيدك فورًا، ويصلك إيصال إلكتروني، ويُسجَّل التحصيل في تقرير الخزنة.
+                </div>
+
+                <div style="margin:16px;"><div class="mbtn">ادفع <span class="num">2,750</span> ج.م</div></div>
+              </div>
+            </div>
+
+            <!-- 5. QR -->
+            <div class="scr" data-scr="qr" style="display:none;flex-direction:column;height:100%;background:linear-gradient(170deg,#0C2247,#07142B);">
+              <div class="sbar on-dark"><span class="num">9:41</span><span>▮▮▮ ⏻</span></div>
+              <div class="scr-body" style="color:#fff;padding:10px 0 20px;">
+                <div style="text-align:center;padding:6px 20px 20px;">
+                  <h3 style="font-family:var(--f-head);font-size:1.1rem;">كود الدخول</h3>
+                  <p style="font-size:.74rem;color:#9FB6D4;margin-top:4px;">وجّه الكود إلى قارئ البوابة</p>
+                </div>
+                <div class="qr-box"><div class="qr-grid" data-qr></div></div>
+                <div style="text-align:center;margin-top:16px;">
+                  <div style="font-family:var(--f-head);letter-spacing:.2em;color:var(--gold-2);font-size:1rem;" class="num">10245</div>
+                  <div style="font-size:.76rem;color:#B9CCE6;margin-top:2px;">محمد أحمد سيد &mdash; عضو عامل</div>
+                  <div style="display:inline-flex;align-items:center;gap:7px;margin-top:12px;background:rgba(22,185,129,.16);border:1px solid rgba(22,185,129,.4);color:#5EE3B0;padding:5px 16px;border-radius:99px;font-size:.72rem;font-weight:700;">
+                    ● العضوية سارية &mdash; الدخول مسموح
+                  </div>
+                  <p style="font-size:.7rem;color:#7E96B8;margin-top:14px;">يتجدد الكود تلقائيًا كل <span class="num">60</span> ثانية لمنع إعادة الاستخدام</p>
+                </div>
+
+                <div style="margin:24px 16px 0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:16px;">
+                  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
+                    <span style="font-size:.78rem;font-weight:700;">آخر عمليات الدخول</span>
+                  </div>
+                  <div style="display:flex;justify-content:space-between;font-size:.74rem;color:#B9CCE6;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.08);">
+                    <span>البوابة الرئيسية</span><span class="num">اليوم 08:14</span>
+                  </div>
+                  <div style="display:flex;justify-content:space-between;font-size:.74rem;color:#B9CCE6;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.08);">
+                    <span>بوابة حمام السباحة</span><span class="num">أمس 17:02</span>
+                  </div>
+                  <div style="display:flex;justify-content:space-between;font-size:.74rem;color:#B9CCE6;padding:6px 0;">
+                    <span>البوابة الرئيسية &mdash; ومعه ضيف</span><span class="num">أمس 16:58</span>
+                  </div>
+                </div>
+              </div>
+              <div class="tabbar" style="background:#0A1A33;border-top-color:rgba(255,255,255,.1);">
+                <div class="tab" style="color:#6F87A8;"><i>⌂</i>الرئيسية</div>
+                <div class="tab" style="color:#6F87A8;"><i>◈</i>الأنشطة</div>
+                <div class="tab on" style="color:var(--gold-2);"><i>▣</i>الدخول</div>
+                <div class="tab" style="color:#6F87A8;"><i>◔</i>حسابي</div>
+              </div>
+            </div>
+
+            <!-- 6. INVITES -->
+            <div class="scr" data-scr="invites" style="display:none;flex-direction:column;height:100%;">
+              <div class="sbar"><span class="num">9:41</span><span>▮▮▮ ⏻</span></div>
+              <div class="scr-body">
+                <div class="app-hd" style="padding-top:4px;">
+                  <div style="display:flex;align-items:center;gap:12px;">
+                    <span class="app-back">→</span><h3 style="color:var(--navy);">الدعوات</h3>
+                  </div>
+                </div>
+
+                <div class="mcard" style="text-align:center;background:linear-gradient(150deg,#FFFBEF,#fff);border-color:rgba(201,162,39,.35);">
+                  <div style="font-size:.76rem;color:var(--txt-3);">رصيدك المتاح لشهر مارس</div>
+                  <div style="font-family:var(--f-head);font-size:2.4rem;font-weight:900;color:var(--gold);line-height:1.2;">
+                    <span class="num">3</span> <span style="font-size:.9rem;color:var(--txt-3);">من <span class="num">4</span> دعوات</span>
+                  </div>
+                  <div style="display:flex;gap:6px;justify-content:center;margin:10px 0 14px;">
+                    <span style="width:34px;height:6px;border-radius:99px;background:var(--gold);"></span>
+                    <span style="width:34px;height:6px;border-radius:99px;background:var(--gold);"></span>
+                    <span style="width:34px;height:6px;border-radius:99px;background:var(--gold);"></span>
+                    <span style="width:34px;height:6px;border-radius:99px;background:var(--paper-3);"></span>
+                  </div>
+                  <p style="font-size:.7rem;color:var(--txt-3);">يتجدد الرصيد أول كل شهر ميلادي حسب نوع عضويتك</p>
+                </div>
+
+                <div style="margin:0 16px 12px;"><div class="mbtn navy">إصدار دعوة جديدة</div></div>
+
+                <div class="mcard" style="border:1.5px dashed rgba(201,162,39,.5);background:#FFFDF6;">
+                  <div class="mcard-t"><span>نفد رصيدك؟ اشترِ دعوات إضافية</span></div>
+                  <div class="mrow"><span class="l">دعوة إضافية (بالغ)</span><span class="v"><span class="num">150</span> ج.م</span></div>
+                  <div class="mrow"><span class="l">دعوة إضافية (طفل تحت ١٢)</span><span class="v"><span class="num">75</span> ج.م</span></div>
+                  <div class="mrow"><span class="l">الحد الأقصى للشراء شهريًا</span><span class="v"><span class="num">10</span> دعوات</span></div>
+                  <div style="height:12px;"></div>
+                  <div class="mbtn">اشترِ دعوات</div>
+                </div>
+
+                <div class="mcard" style="margin-bottom:22px;">
+                  <div class="mcard-t"><span>دعوات هذا الشهر</span></div>
+                  <div class="mrow"><span class="l">أحمد سامي &mdash; <span class="num">15/03</span></span><span class="v"><span class="chip ok">تم الدخول</span></span></div>
+                  <div class="mrow"><span class="l">دعوة مفتوحة &mdash; لم تُستخدم</span><span class="v"><span class="chip info">سارية اليوم</span></span></div>
+                </div>
+              </div>
+              <div class="tabbar">
+                <div class="tab"><i>⌂</i>الرئيسية</div><div class="tab"><i>◈</i>الأنشطة</div>
+                <div class="tab on"><i>▣</i>الدخول</div><div class="tab"><i>◔</i>حسابي</div>
+              </div>
+            </div>
+
+            <!-- 7. SPORTS -->
+            <div class="scr" data-scr="sports" style="display:none;flex-direction:column;height:100%;">
+              <div class="sbar"><span class="num">9:41</span><span>▮▮▮ ⏻</span></div>
+              <div class="scr-body">
+                <div class="app-hd" style="padding-top:4px;">
+                  <h3 style="color:var(--navy);">الأنشطة الرياضية</h3>
+                  <div class="sm" style="color:var(--txt-3);">اشترك مباشرة &mdash; الأسعار معلنة</div>
+                </div>
+                <div class="seg"><button class="on">الكل</button><button>سباحة</button><button>كرة</button><button>فردي</button></div>
+
+                <div class="sport-item">
+                  <div class="sport-ico" style="background:rgba(62,140,224,.12);">🏊</div>
+                  <div><div class="nm">سباحة مبتدئين</div><div class="ds">٦ - ٩ سنوات &bull; <span class="num">12</span> حصة/شهر</div></div>
+                  <div class="pr"><b class="num">900</b><span>ج.م / شهر</span></div>
+                </div>
+                <div class="sport-item">
+                  <div class="sport-ico" style="background:rgba(62,140,224,.12);">🏊</div>
+                  <div><div class="nm">سباحة متقدم</div><div class="ds">١٠ - ١٤ سنة &bull; <span class="num">16</span> حصة/شهر</div></div>
+                  <div class="pr"><b class="num">1,200</b><span>ج.م / شهر</span></div>
+                </div>
+                <div class="sport-item">
+                  <div class="sport-ico" style="background:var(--mint-dim);">⚽</div>
+                  <div><div class="nm">كرة القدم &mdash; الموهبة</div><div class="ds">٨ - ١١ سنة &bull; <span class="num">12</span> حصة/شهر</div></div>
+                  <div class="pr"><b class="num">1,100</b><span>ج.م / شهر</span></div>
+                </div>
+                <div class="sport-item">
+                  <div class="sport-ico" style="background:var(--rose-dim);">🥋</div>
+                  <div><div class="nm">كاراتيه مبتدئين</div><div class="ds">٦ - ١٢ سنة &bull; <span class="num">8</span> حصص/شهر</div></div>
+                  <div class="pr"><b class="num">700</b><span>ج.م / شهر</span></div>
+                </div>
+                <div class="sport-item" style="opacity:.6;">
+                  <div class="sport-ico" style="background:var(--gold-dim);">🎾</div>
+                  <div><div class="nm">تنس أرضي &mdash; أطفال</div><div class="ds"><span class="chip due">اكتملت العدد &mdash; قائمة انتظار</span></div></div>
+                  <div class="pr"><b class="num">1,400</b><span>ج.م / شهر</span></div>
+                </div>
+                <div class="sport-item">
+                  <div class="sport-ico" style="background:rgba(201,162,39,.12);">🤸</div>
+                  <div><div class="nm">جمباز فني &mdash; سيدات</div><div class="ds">١٢ - ١٨ سنة &bull; <span class="num">12</span> حصة/شهر</div></div>
+                  <div class="pr"><b class="num">1,000</b><span>ج.م / شهر</span></div>
+                </div>
+
+                <div style="margin:14px 16px 22px;background:var(--paper-3);border-radius:12px;padding:12px 14px;font-size:.73rem;color:var(--txt-2);line-height:1.75;">
+                  عند الاشتراك تختار الابن، ويصدر النظام فاتورة الشهر الأول + رسوم الانضمام فورًا، ثم فاتورة شهرية تلقائية بعدها.
+                </div>
+              </div>
+              <div class="tabbar">
+                <div class="tab"><i>⌂</i>الرئيسية</div><div class="tab on"><i>◈</i>الأنشطة</div>
+                <div class="tab"><i>▣</i>الدخول</div><div class="tab"><i>◔</i>حسابي</div>
+              </div>
+            </div>
+
+            <!-- 8. SCHEDULE -->
+            <div class="scr" data-scr="schedule" style="display:none;flex-direction:column;height:100%;">
+              <div class="sbar"><span class="num">9:41</span><span>▮▮▮ ⏻</span></div>
+              <div class="scr-body">
+                <div class="app-hd" style="padding-top:4px;">
+                  <div style="display:flex;align-items:center;gap:12px;">
+                    <span class="app-back">→</span>
+                    <div><h3 style="color:var(--navy);">جدول التدريب</h3>
+                    <div class="sm" style="color:var(--txt-3);">يوسف محمد &mdash; سباحة مبتدئين</div></div>
+                  </div>
+                </div>
+
+                <div class="mcard" style="display:flex;gap:12px;align-items:center;">
+                  <div class="sport-ico" style="background:rgba(62,140,224,.12);">🏊</div>
+                  <div style="flex:1;">
+                    <div style="font-weight:700;font-size:.85rem;">مجموعة أ &mdash; صباحي</div>
+                    <div style="font-size:.7rem;color:var(--txt-3);">كابتن هشام صلاح &bull; حمام السباحة الأولمبي</div>
+                  </div>
+                  <span class="chip ok">نشط</span>
+                </div>
+
+                <div class="tt">
+                  <div class="tt-d">السبت</div>
+                  <div class="tt-r"><span class="tm">09:00 &mdash; 10:00</span><span>حمام السباحة الأولمبي</span></div>
+                </div>
+                <div class="tt">
+                  <div class="tt-d">الاثنين</div>
+                  <div class="tt-r"><span class="tm">09:00 &mdash; 10:00</span><span>حمام السباحة الأولمبي</span></div>
+                </div>
+                <div class="tt">
+                  <div class="tt-d">الأربعاء</div>
+                  <div class="tt-r"><span class="tm">09:00 &mdash; 10:00</span><span>حمام السباحة الأولمبي</span></div>
+                  <div class="tt-r" style="background:var(--gold-dim);"><span class="tm">—</span><span style="font-size:.72rem;color:#9A7B12;">ملاحظة المدرب: حصة قياس مستوى</span></div>
+                </div>
+
+                <div class="mcard" style="margin-top:6px;margin-bottom:22px;background:var(--paper-2);">
+                  <div class="mcard-t"><span>تغييرات على الجدول</span></div>
+                  <div style="font-size:.75rem;color:var(--txt-2);line-height:1.8;">
+                    ▸ أُلغيت حصة الاثنين <span class="num">10/03</span> &mdash; صيانة الحمام.<br>
+                    ▸ حصة تعويضية الجمعة <span class="num">14/03</span> الساعة <span class="num">10:00</span>.
+                  </div>
+                </div>
+              </div>
+              <div class="tabbar">
+                <div class="tab"><i>⌂</i>الرئيسية</div><div class="tab on"><i>◈</i>الأنشطة</div>
+                <div class="tab"><i>▣</i>الدخول</div><div class="tab"><i>◔</i>حسابي</div>
+              </div>
+            </div>
+
+          </div>
+        </div>
+
+        <div style="flex:1;min-width:260px;max-width:360px;">
+          <div id="scr-note"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ============ PORTAL PROTOTYPE ============ -->
+<section class="alt" id="portal">
+  <div class="wrap">
+    <div class="reveal">
+      <div class="eyebrow">نموذج تفاعلي &mdash; بوابة الإدارة</div>
+      <h2 class="title">وهذا ما ستراه إدارة النادي على الويب.</h2>
+      <p class="lede">
+        البوابة هي «مصنع البيانات» الذي يغذّي التطبيق. لا تحتاج تدريبًا طويلًا ولا موظفًا متخصصًا:
+        تحمّلون قالب Excel، تملأونه، ترفعونه &mdash; والنظام يتحقق ويعتمد.
+        وما بعد الرفع الأول يُدار بالشاشات مباشرة.
+      </p>
+    </div>
+
+    <div class="reveal" style="margin-top:34px; display:flex; gap:8px; flex-wrap:wrap;">
+      <button class="pn-item on" style="width:auto;" data-pscr="dash"><span class="n">١</span> لوحة التحصيل</button>
+      <button class="pn-item" style="width:auto;" data-pscr="import"><span class="n">٢</span> رفع بيانات الأعضاء</button>
+      <button class="pn-item" style="width:auto;" data-pscr="members"><span class="n">٣</span> الأعضاء والمستحقات</button>
+      <button class="pn-item" style="width:auto;" data-pscr="catalog"><span class="n">٤</span> تسعير الأنشطة</button>
+      <button class="pn-item" style="width:auto;" data-pscr="invites"><span class="n">٥</span> سياسة الدعوات</button>
+      <button class="pn-item" style="width:auto;" data-pscr="sched"><span class="n">٦</span> جداول المدربين</button>
+    </div>
+
+    <div class="browser reveal" style="margin-top:18px;">
+      <div class="bbar">
+        <div class="bdots"><i style="background:#FF5F57;"></i><i style="background:#FEBC2E;"></i><i style="background:#28C840;"></i></div>
+        <div class="burl" id="burl">https://portal.sayd-club.eg/dashboard</div>
+      </div>
+      <div class="bwin">
+        <aside class="side">
+          <div class="side-b">
+            <img src="assets/club-logo.png" alt=""><span>نادي الصيد<br>بوابة الإدارة</span>
+          </div>
+          <div class="si on" data-jump="dash"><i>▤</i> لوحة التحصيل</div>
+          <div class="si" data-jump="import"><i>⬆</i> رفع البيانات</div>
+          <div class="si" data-jump="members"><i>◉</i> الأعضاء والمستحقات</div>
+          <div class="si" data-jump="catalog"><i>◈</i> تسعير الأنشطة</div>
+          <div class="si" data-jump="invites"><i>✉</i> سياسة الدعوات</div>
+          <div class="si" data-jump="sched"><i>◷</i> جداول المدربين</div>
+          <div class="si"><i>🧾</i> الإيصالات</div>
+          <div class="si"><i>🔔</i> الإشعارات</div>
+          <div class="si"><i>⚙</i> الإعدادات</div>
+        </aside>
+
+        <main class="pmain">
+
+          <!-- P1 DASHBOARD -->
+          <div class="pscr" data-pscr="dash">
+            <div class="ptop">
+              <div><h3>لوحة التحصيل</h3><p>مارس 2026 &mdash; محدَّثة الآن</p></div>
+              <div style="display:flex;gap:8px;"><span class="pbtn ghost">تصدير Excel</span><span class="pbtn">إرسال تذكير جماعي</span></div>
+            </div>
+            <div class="grid g4" style="gap:12px;margin-bottom:18px;">
+              <div class="kpi"><div class="k">محصَّل هذا الشهر</div><div class="v num">1,284,500</div><div class="d up">▲ 34% مقارنة بفبراير</div></div>
+              <div class="kpi"><div class="k">مستحق ولم يُحصَّل</div><div class="v num" style="color:var(--rose);">742,300</div><div class="d dn">▼ 12% عن الشهر الماضي</div></div>
+              <div class="kpi"><div class="k">نسبة التحصيل</div><div class="v num">63%</div><div class="d up">▲ من 41% قبل التطبيق</div></div>
+              <div class="kpi"><div class="k">سُدِّد من التطبيق</div><div class="v num">71%</div><div class="d up">من إجمالي المحصَّل</div></div>
+            </div>
+
+            <div class="grid g2" style="gap:14px;align-items:start;">
+              <div class="tbl">
+                <table>
+                  <thead><tr><th>البند</th><th>عدد</th><th>القيمة</th><th>الحالة</th></tr></thead>
+                  <tbody>
+                    <tr><td>تجديدات عضوية 2026</td><td class="num">1,842</td><td class="num">8,289,000</td><td><span class="badge ok">جارٍ</span></td></tr>
+                    <tr><td>أقساط مستحقة هذا الشهر</td><td class="num">613</td><td class="num">919,500</td><td><span class="badge warn">منها 214 متأخر</span></td></tr>
+                    <tr><td>فواتير أنشطة رياضية</td><td class="num">487</td><td class="num">498,400</td><td><span class="badge ok">جارٍ</span></td></tr>
+                    <tr><td>غرامات تأخير</td><td class="num">214</td><td class="num">74,900</td><td><span class="badge err">غير محصَّل</span></td></tr>
+                    <tr><td>بيع دعوات إضافية</td><td class="num">1,106</td><td class="num">165,900</td><td><span class="badge ok">محصَّل</span></td></tr>
+                  </tbody>
+                </table>
+              </div>
+              <div>
+                <div class="tbl" style="margin-bottom:14px;">
+                  <table>
+                    <thead><tr><th>أعلى المتأخرات</th><th>المبلغ</th><th>التأخر</th></tr></thead>
+                    <tbody>
+                      <tr><td>عمرو مصطفى فتحي &mdash; <span class="num">10247</span></td><td class="num">6,350</td><td><span class="badge err">92 يوم</span></td></tr>
+                      <tr><td>هالة سمير عبدالله &mdash; <span class="num">10312</span></td><td class="num">5,900</td><td><span class="badge err">78 يوم</span></td></tr>
+                      <tr><td>كريم وائل نبيل &mdash; <span class="num">10488</span></td><td class="num">4,500</td><td><span class="badge warn">44 يوم</span></td></tr>
+                      <tr><td>منى رضا شعبان &mdash; <span class="num">10501</span></td><td class="num">3,150</td><td><span class="badge warn">31 يوم</span></td></tr>
+                    </tbody>
+                  </table>
+                </div>
+                <div class="kpi">
+                  <div class="k">تنبيه ذكي</div>
+                  <p style="font-size:.8rem;color:var(--txt-2);line-height:1.8;margin-top:6px;">
+                    <span class="num">214</span> عضوًا لم يفتحوا التطبيق منذ التسجيل ولديهم مستحقات.
+                    اقترح إرسال رسالة SMS بدلًا من إشعار داخلي.
+                  </p>
+                  <div style="margin-top:10px;"><span class="pbtn gold">أرسل SMS للـ 214</span></div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- P2 IMPORT WIZARD -->
+          <div class="pscr" data-pscr="import" style="display:none;">
+            <div class="ptop">
+              <div><h3>رفع بيانات الأعضاء</h3><p>ملف members.csv &mdash; 1,842 صفًا</p></div>
+              <span class="pbtn ghost">تحميل القالب الفارغ</span>
+            </div>
+
+            <div class="steps">
+              <div class="step done"><span class="b">✓</span> اختيار القالب</div>
+              <div class="step-line done"></div>
+              <div class="step done"><span class="b">✓</span> رفع الملف</div>
+              <div class="step-line done"></div>
+              <div class="step now"><span class="b">٣</span> مطابقة الأعمدة</div>
+              <div class="step-line"></div>
+              <div class="step"><span class="b">٤</span> مراجعة الأخطاء</div>
+              <div class="step-line"></div>
+              <div class="step"><span class="b">٥</span> الاعتماد</div>
+            </div>
+
+            <p style="font-size:.8rem;color:var(--txt-2);margin-bottom:12px;">
+              تعرّف النظام تلقائيًا على أعمدة ملفكم. راجعوا المطابقة وعدّلوها إن لزم &mdash; ثم تابعوا.
+            </p>
+
+            <div class="map-row" style="background:var(--paper-2);font-weight:700;color:var(--txt-2);">
+              <span>العمود في ملفكم</span><span></span><span>الحقل في النظام</span><span style="text-align:center;">الحالة</span>
+            </div>
+            <div class="map-row"><span>رقم العضوية</span><span class="arw">←</span>
+              <select><option>كود العضوية (إلزامي)</option></select><span class="badge ok">مطابَق</span></div>
+            <div class="map-row"><span>الاسم</span><span class="arw">←</span>
+              <select><option>الاسم الرباعي (إلزامي)</option></select><span class="badge ok">مطابَق</span></div>
+            <div class="map-row"><span>موبايل</span><span class="arw">←</span>
+              <select><option>رقم الموبايل (إلزامي)</option></select><span class="badge ok">مطابَق</span></div>
+            <div class="map-row"><span>الرقم القومى</span><span class="arw">←</span>
+              <select><option>الرقم القومي</option></select><span class="badge ok">مطابَق</span></div>
+            <div class="map-row"><span>الفئة</span><span class="arw">←</span>
+              <select><option>نوع العضوية</option><option>الحالة</option><option>— تجاهل هذا العمود —</option></select><span class="badge warn">راجِع</span></div>
+            <div class="map-row"><span>تاريخ النهاية</span><span class="arw">←</span>
+              <select><option>تاريخ انتهاء الاشتراك</option></select><span class="badge ok">مطابَق</span></div>
+            <div class="map-row"><span>ملاحظات الموظف</span><span class="arw">←</span>
+              <select><option>— تجاهل هذا العمود —</option></select><span class="badge">متجاهَل</span></div>
+
+            <div style="display:flex;gap:14px;align-items:center;margin-top:18px;flex-wrap:wrap;">
+              <span class="pbtn">تابع إلى مراجعة الأخطاء</span>
+              <span class="pbtn ghost">إلغاء</span>
+              <span style="font-size:.76rem;color:var(--txt-3);">
+                معاينة: <b class="num">1,796</b> صفًا سليمًا &bull;
+                <b class="num" style="color:var(--gold);">39</b> تحذيرًا &bull;
+                <b class="num" style="color:var(--rose);">7</b> أخطاء توقف الاستيراد
+              </span>
+            </div>
+
+            <div class="tbl" style="margin-top:18px;">
+              <table>
+                <thead><tr><th>الصف</th><th>الحقل</th><th>القيمة</th><th>المشكلة</th><th>الإجراء</th></tr></thead>
+                <tbody>
+                  <tr><td class="num">142</td><td>رقم الموبايل</td><td class="num">0100123</td><td><span class="badge err">رقم غير مكتمل</span></td><td>تصحيح يدوي</td></tr>
+                  <tr><td class="num">389</td><td>كود العضوية</td><td class="num">10245</td><td><span class="badge err">مكرر مع الصف 12</span></td><td>حذف أو دمج</td></tr>
+                  <tr><td class="num">604</td><td>تاريخ الانتهاء</td><td>31/13/2026</td><td><span class="badge err">تاريخ غير صالح</span></td><td>تصحيح يدوي</td></tr>
+                  <tr><td class="num">877</td><td>نوع العضوية</td><td>عامل م</td><td><span class="badge warn">غير معروف &mdash; هل تقصد «عضو عامل»؟</span></td><td>قبول الاقتراح</td></tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <!-- P3 MEMBERS -->
+          <div class="pscr" data-pscr="members" style="display:none;">
+            <div class="ptop">
+              <div><h3>الأعضاء والمستحقات</h3><p>1,842 عضوًا &mdash; 613 عليهم مستحقات هذا الشهر</p></div>
+              <div style="display:flex;gap:8px;"><span class="pbtn ghost">تصفية</span><span class="pbtn gold">إضافة مستحق</span></div>
+            </div>
+            <div class="grid g4" style="gap:10px;margin-bottom:16px;">
+              <div class="field" style="margin:0;"><input placeholder="بحث بالاسم أو كود العضوية أو الموبايل"></div>
+              <div class="field" style="margin:0;"><select><option>كل أنواع العضوية</option><option>عضو عامل</option><option>عضو منتسب</option></select></div>
+              <div class="field" style="margin:0;"><select><option>الحالة: الكل</option><option>متأخر السداد</option><option>منتظم</option></select></div>
+              <div class="field" style="margin:0;"><select><option>مارس 2026</option><option>فبراير 2026</option></select></div>
+            </div>
+            <div class="tbl">
+              <table>
+                <thead>
+                  <tr><th>كود</th><th>الاسم</th><th>النوع</th><th>سريان العضوية</th><th>مستحق الشهر</th><th>إجمالي المتأخر</th><th>التطبيق</th><th>الحالة</th></tr>
+                </thead>
+                <tbody>
+                  <tr><td class="num">10245</td><td>محمد أحمد سيد إبراهيم</td><td>عضو عامل</td><td class="num">2026/12/31</td><td class="num">1,850</td><td class="num" style="color:var(--rose);">350</td><td><span class="badge ok">مفعَّل</span></td><td><span class="badge warn">متأخر يومان</span></td></tr>
+                  <tr><td class="num">10246</td><td>ياسمين خالد محمود علي</td><td>عضو عامل</td><td class="num">2026/12/31</td><td class="num">4,500</td><td class="num">0</td><td><span class="badge ok">مفعَّل</span></td><td><span class="badge ok">منتظم</span></td></tr>
+                  <tr><td class="num">10247</td><td>عمرو مصطفى فتحي حسن</td><td>عضو منتسب</td><td class="num" style="color:var(--rose);">2026/06/30</td><td class="num">1,200</td><td class="num" style="color:var(--rose);">6,350</td><td><span class="badge err">لم يُفعَّل</span></td><td><span class="badge err">موقوف</span></td></tr>
+                  <tr><td class="num">10312</td><td>هالة سمير عبدالله رشاد</td><td>عضو عامل</td><td class="num">2026/12/31</td><td class="num">2,400</td><td class="num" style="color:var(--rose);">5,900</td><td><span class="badge ok">مفعَّل</span></td><td><span class="badge err">متأخر 78 يوم</span></td></tr>
+                  <tr><td class="num">10488</td><td>كريم وائل نبيل فؤاد</td><td>عضو عامل</td><td class="num">2026/12/31</td><td class="num">1,500</td><td class="num" style="color:var(--gold);">4,500</td><td><span class="badge ok">مفعَّل</span></td><td><span class="badge warn">متأخر 44 يوم</span></td></tr>
+                  <tr><td class="num">10501</td><td>منى رضا شعبان محمد</td><td>عضو منتسب</td><td class="num">2026/12/31</td><td class="num">900</td><td class="num" style="color:var(--gold);">3,150</td><td><span class="badge ok">مفعَّل</span></td><td><span class="badge warn">متأخر 31 يوم</span></td></tr>
+                  <tr><td class="num">10533</td><td>طارق حسن عبدالعزيز</td><td>عضو فخري</td><td>—</td><td class="num">0</td><td class="num">0</td><td><span class="badge ok">مفعَّل</span></td><td><span class="badge ok">معفى</span></td></tr>
+                </tbody>
+              </table>
+            </div>
+            <p style="font-size:.74rem;color:var(--txt-3);margin-top:10px;">
+              كل تعديل هنا ينعكس على تطبيق العضو خلال ثوانٍ، ويُسجَّل في سجل المراجعة باسم الموظف والوقت.
+            </p>
+          </div>
+
+          <!-- P4 CATALOG -->
+          <div class="pscr" data-pscr="catalog" style="display:none;">
+            <div class="ptop">
+              <div><h3>تسعير الأنشطة الرياضية</h3><p>ما تحدّدونه هنا هو ما يظهر للعضو في التطبيق</p></div>
+              <div style="display:flex;gap:8px;"><span class="pbtn ghost">رفع من Excel</span><span class="pbtn gold">+ نشاط جديد</span></div>
+            </div>
+            <div class="grid g2" style="gap:18px;align-items:start;">
+              <div class="tbl">
+                <table>
+                  <thead><tr><th>الكود</th><th>النشاط</th><th>الفئة السنية</th><th>حصص/شهر</th><th>الاشتراك</th><th>الانضمام</th><th>السعة</th></tr></thead>
+                  <tbody>
+                    <tr><td>SW-01</td><td>سباحة مبتدئين</td><td>6-9</td><td class="num">12</td><td class="num">900</td><td class="num">300</td><td class="num">18/24</td></tr>
+                    <tr><td>SW-02</td><td>سباحة متقدم</td><td>10-14</td><td class="num">16</td><td class="num">1,200</td><td class="num">300</td><td class="num">14/20</td></tr>
+                    <tr><td>KR-01</td><td>كاراتيه مبتدئين</td><td>6-12</td><td class="num">8</td><td class="num">700</td><td class="num">250</td><td class="num">22/30</td></tr>
+                    <tr><td>FB-01</td><td>كرة القدم &mdash; الموهبة</td><td>8-11</td><td class="num">12</td><td class="num">1,100</td><td class="num">400</td><td class="num">26/28</td></tr>
+                    <tr><td>TN-01</td><td>تنس أرضي &mdash; أطفال</td><td>7-12</td><td class="num">8</td><td class="num">1,400</td><td class="num">350</td><td class="num" style="color:var(--rose);">12/12</td></tr>
+                    <tr><td>GY-01</td><td>جمباز فني &mdash; سيدات</td><td>12-18</td><td class="num">12</td><td class="num">1,000</td><td class="num">300</td><td class="num">11/18</td></tr>
+                    <tr><td>SQ-01</td><td>اسكواش &mdash; ناشئين</td><td>10-16</td><td class="num">8</td><td class="num">1,300</td><td class="num">350</td><td class="num">6/10</td></tr>
+                  </tbody>
+                </table>
+              </div>
+              <div style="background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;">
+                <h4 style="color:var(--navy);font-size:.94rem;margin-bottom:14px;">تعديل: سباحة مبتدئين</h4>
+                <div class="field"><label>اسم النشاط</label><input value="سباحة مبتدئين"></div>
+                <div class="grid g2" style="gap:10px;">
+                  <div class="field"><label>الاشتراك الشهري</label><input value="900"></div>
+                  <div class="field"><label>رسوم الانضمام</label><input value="300"></div>
+                </div>
+                <div class="grid g2" style="gap:10px;">
+                  <div class="field"><label>الفئة السنية</label><input value="6 - 9 سنوات"></div>
+                  <div class="field"><label>السعة القصوى</label><input value="24"></div>
+                </div>
+                <div class="field"><label>حالة الاشتراك عند اكتمال العدد</label>
+                  <select><option>فتح قائمة انتظار</option><option>إخفاء النشاط</option><option>السماح بالتجاوز</option></select>
+                  <div class="hint">يظهر للعضو في التطبيق كـ «اكتملت العدد &mdash; قائمة انتظار».</div>
+                </div>
+                <div class="field"><label>خصم الأخ الثاني</label><input value="15%"><div class="hint">يُطبَّق تلقائيًا على الفاتورة الثانية لنفس العضوية.</div></div>
+                <span class="pbtn">حفظ ونشر للتطبيق</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- P5 INVITES -->
+          <div class="pscr" data-pscr="invites" style="display:none;">
+            <div class="ptop">
+              <div><h3>سياسة الدعوات</h3><p>عدد الدعوات المجانية وسعر الإضافية &mdash; حسب نوع العضوية</p></div>
+              <span class="pbtn ghost">رفع من Excel</span>
+            </div>
+            <div class="grid g2" style="gap:18px;align-items:start;">
+              <div class="tbl">
+                <table>
+                  <thead><tr><th>نوع العضوية</th><th>مجانية/شهر</th><th>سعر الإضافية</th><th>حد الشراء</th><th>دعوة طفل</th><th>الصلاحية</th></tr></thead>
+                  <tbody>
+                    <tr><td>عضو عامل</td><td class="num">4</td><td class="num">150</td><td class="num">10</td><td class="num">75</td><td>يوم واحد</td></tr>
+                    <tr><td>عضو منتسب</td><td class="num">2</td><td class="num">200</td><td class="num">6</td><td class="num">100</td><td>يوم واحد</td></tr>
+                    <tr><td>عضو فخري</td><td class="num">8</td><td>—</td><td>—</td><td>—</td><td>يوم واحد</td></tr>
+                    <tr><td>عضو مؤقت</td><td class="num">0</td><td class="num">250</td><td class="num">4</td><td class="num">125</td><td>يوم واحد</td></tr>
+                  </tbody>
+                </table>
+                <div style="padding:14px;border-top:1px solid var(--line);">
+                  <div class="grid g3" style="gap:10px;">
+                    <div class="kpi" style="border:none;padding:0;"><div class="k">دعوات مجانية مستهلكة</div><div class="v num">4,812</div></div>
+                    <div class="kpi" style="border:none;padding:0;"><div class="k">دعوات مباعة</div><div class="v num">1,106</div></div>
+                    <div class="kpi" style="border:none;padding:0;"><div class="k">إيراد الدعوات</div><div class="v num" style="color:var(--mint);">165,900</div></div>
+                  </div>
+                </div>
+              </div>
+              <div style="background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;">
+                <h4 style="color:var(--navy);font-size:.94rem;margin-bottom:14px;">قواعد عامة</h4>
+                <div class="field"><label>موعد تجديد الرصيد</label>
+                  <select><option>أول كل شهر ميلادي</option><option>تاريخ تجديد العضوية</option></select></div>
+                <div class="field"><label>هل يُرحَّل الرصيد غير المستخدم؟</label>
+                  <select><option>لا &mdash; يسقط آخر الشهر</option><option>نعم &mdash; بحد أقصى شهر</option></select></div>
+                <div class="field"><label>منع إصدار دعوة عند وجود متأخرات</label>
+                  <select><option>نعم &mdash; يُمنع فوق 30 يوم تأخير</option><option>لا</option></select>
+                  <div class="hint">أداة تحصيل فعّالة: الدعوة امتياز مرتبط بانتظام السداد.</div></div>
+                <div class="field"><label>أيام الذروة المستثناة</label><input value="الجمعة &mdash; الأعياد الرسمية"><div class="hint">تُمنع الدعوات في هذه الأيام تلقائيًا.</div></div>
+                <span class="pbtn">حفظ السياسة</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- P6 SCHEDULES -->
+          <div class="pscr" data-pscr="sched" style="display:none;">
+            <div class="ptop">
+              <div><h3>جداول المدربين</h3><p>يرفع كل مدرب جدول مجموعته من قالب موحّد &mdash; ثم يظهر لكل مشترك في تطبيقه</p></div>
+              <span class="pbtn ghost">تحميل قالب الجدول</span>
+            </div>
+
+            <div class="grid g2" style="gap:18px;align-items:start;">
+              <div>
+                <div class="drop" style="margin-bottom:14px;">
+                  <div class="ic">📄</div>
+                  <h4>اسحب ملف الجدول هنا أو اضغط للاختيار</h4>
+                  <p>training_schedule.csv أو .xlsx &mdash; حتى 5 ميجابايت</p>
+                  <div style="margin-top:14px;"><span class="pbtn">اختر ملفًا</span></div>
+                </div>
+                <div class="tbl">
+                  <table>
+                    <thead><tr><th>المدرب</th><th>المجموعة</th><th>آخر رفع</th><th>الحالة</th></tr></thead>
+                    <tbody>
+                      <tr><td>كابتن هشام صلاح</td><td>سباحة &mdash; مجموعة أ</td><td class="num">2026/03/01</td><td><span class="badge ok">منشور</span></td></tr>
+                      <tr><td>كابتن دينا عادل</td><td>جمباز &mdash; مجموعة ب</td><td class="num">2026/03/01</td><td><span class="badge ok">منشور</span></td></tr>
+                      <tr><td>كابتن طارق منير</td><td>الموهبة 2016</td><td class="num">2026/02/26</td><td><span class="badge warn">بانتظار الاعتماد</span></td></tr>
+                      <tr><td>كابتن نهى سامي</td><td>تنس &mdash; أطفال</td><td>—</td><td><span class="badge err">لم يُرفع</span></td></tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+              <div>
+                <div style="background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:14px;">
+                  <h4 style="color:var(--navy);font-size:.94rem;margin-bottom:6px;">معاينة الجدول المرفوع</h4>
+                  <p style="font-size:.75rem;color:var(--txt-3);margin-bottom:12px;">سباحة مبتدئين &mdash; مجموعة أ &mdash; كابتن هشام صلاح</p>
+                  <div class="tbl">
+                    <table>
+                      <thead><tr><th>اليوم</th><th>من</th><th>إلى</th><th>المكان</th></tr></thead>
+                      <tbody>
+                        <tr><td>السبت</td><td class="num">09:00</td><td class="num">10:00</td><td>الحمام الأولمبي</td></tr>
+                        <tr><td>الاثنين</td><td class="num">09:00</td><td class="num">10:00</td><td>الحمام الأولمبي</td></tr>
+                        <tr><td>الأربعاء</td><td class="num">09:00</td><td class="num">10:00</td><td>الحمام الأولمبي</td></tr>
+                      </tbody>
+                    </table>
+                  </div>
+                  <div style="display:flex;gap:8px;margin-top:14px;">
+                    <span class="pbtn">اعتمد وانشر لـ 18 مشتركًا</span>
+                    <span class="pbtn ghost">رفض</span>
+                  </div>
+                </div>
+                <div class="kpi">
+                  <div class="k">تنبيه تعارض</div>
+                  <p style="font-size:.8rem;color:var(--txt-2);line-height:1.8;margin-top:6px;">
+                    الحمام الأولمبي محجوز للسباحة المتقدمة الأربعاء <span class="num">09:00</span>.
+                    راجع الجدولين قبل الاعتماد.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </main>
+      </div>
+    </div>
+
+    <div class="note reveal" style="margin-top:24px;">
+      <strong>لماذا «بوابة» لا «ERP»؟</strong>
+      لأن ما يحتاجه النادي اليوم هو مصدر بيانات موثوق يغذّي التطبيق، لا نظامًا لإدارة كل عملية داخلية.
+      البوابة تُدار بموظف واحد أو اثنين، وتُتعلَّم في يوم تدريبي واحد، وتُبنى بحيث يمكن لاحقًا ربطها
+      بأي نظام ERP تختارونه في المرحلة الثانية دون إعادة إدخال البيانات.
+    </div>
+  </div>
+</section>
+
+<!-- ============ TEMPLATES ============ -->
+<section id="templates">
+  <div class="wrap">
+    <div class="reveal">
+      <div class="eyebrow">قوالب البيانات</div>
+      <h2 class="title">ستة ملفات Excel تُشغّل النظام بالكامل.</h2>
+      <p class="lede">
+        لا نطلب منكم إدخال بيانات يدويًا ولا ربطًا بأنظمة قائمة. نسلّمكم القوالب التالية جاهزة،
+        تملأونها بالبيانات المتاحة لديكم، وترفعونها على البوابة. القوالب أدناه حقيقية &mdash; حمّلوها وجرّبوها الآن.
+      </p>
+    </div>
+
+    <div class="grid g3 reveal" style="margin-top:34px;">
+      <div class="tmpl">
+        <div class="tmpl-h"><div class="fi">CSV</div><div><h4>١ &mdash; الأعضاء</h4><p>القاعدة التي يقوم عليها كل شيء</p></div></div>
+        <div class="tmpl-b">
+          <div class="cols"><span>كود العضوية</span><span>الاسم</span><span>الرقم القومي</span><span>الموبايل</span><span>نوع العضوية</span><span>الحالة</span><span>تاريخ الانضمام</span><span>تاريخ الانتهاء</span></div>
+          <a class="dl" href="templates/01_members.csv" download>⬇ تحميل القالب</a>
+        </div>
+      </div>
+      <div class="tmpl">
+        <div class="tmpl-h"><div class="fi">CSV</div><div><h4>٢ &mdash; المستحقات</h4><p>التجديدات والأقساط والغرامات</p></div></div>
+        <div class="tmpl-b">
+          <div class="cols"><span>كود العضوية</span><span>نوع المستحق</span><span>الوصف</span><span>عن شهر</span><span>المبلغ</span><span>تاريخ الاستحقاق</span><span>الحالة</span></div>
+          <a class="dl" href="templates/02_dues.csv" download>⬇ تحميل القالب</a>
+        </div>
+      </div>
+      <div class="tmpl">
+        <div class="tmpl-h"><div class="fi">CSV</div><div><h4>٣ &mdash; كتالوج الأنشطة</h4><p>ما يظهر للعضو بالأسعار</p></div></div>
+        <div class="tmpl-b">
+          <div class="cols"><span>كود النشاط</span><span>الاسم</span><span>الفئة السنية</span><span>حصص/شهر</span><span>الاشتراك الشهري</span><span>رسوم الانضمام</span><span>السعة</span><span>المدرب</span></div>
+          <a class="dl" href="templates/03_sports_catalog.csv" download>⬇ تحميل القالب</a>
+        </div>
+      </div>
+      <div class="tmpl">
+        <div class="tmpl-h"><div class="fi">CSV</div><div><h4>٤ &mdash; المشتركون في الأنشطة</h4><p>الاشتراكات القائمة حاليًا</p></div></div>
+        <div class="tmpl-b">
+          <div class="cols"><span>كود العضوية</span><span>اسم اللاعب</span><span>كود النشاط</span><span>المجموعة</span><span>تاريخ البدء</span><span>الاشتراك</span><span>الحالة</span></div>
+          <a class="dl" href="templates/04_activity_subscriptions.csv" download>⬇ تحميل القالب</a>
+        </div>
+      </div>
+      <div class="tmpl">
+        <div class="tmpl-h"><div class="fi">CSV</div><div><h4>٥ &mdash; سياسة الدعوات</h4><p>سطر واحد لكل نوع عضوية</p></div></div>
+        <div class="tmpl-b">
+          <div class="cols"><span>نوع العضوية</span><span>دعوات مجانية</span><span>سعر الإضافية</span><span>حد الشراء</span><span>دعوة طفل</span><span>الصلاحية</span></div>
+          <a class="dl" href="templates/05_invitations_policy.csv" download>⬇ تحميل القالب</a>
+        </div>
+      </div>
+      <div class="tmpl">
+        <div class="tmpl-h"><div class="fi">CSV</div><div><h4>٦ &mdash; جداول التدريب</h4><p>يملأه كل مدرب لمجموعته</p></div></div>
+        <div class="tmpl-b">
+          <div class="cols"><span>كود النشاط</span><span>المجموعة</span><span>اليوم</span><span>من</span><span>إلى</span><span>المكان</span><span>المدرب</span><span>ملاحظات</span></div>
+          <a class="dl" href="templates/06_training_schedule.csv" download>⬇ تحميل القالب</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="grid g3 reveal" style="margin-top:30px;">
+      <div class="pain gain"><h4>تعرّف تلقائي على الأعمدة</h4><p>لا يهم ترتيب الأعمدة ولا صياغة عناوينها. النظام يطابقها تلقائيًا ويعرض عليكم المطابقة للمراجعة.</p></div>
+      <div class="pain gain"><h4>تحقق قبل الاعتماد</h4><p>أرقام موبايل ناقصة، أكواد مكررة، تواريخ غير صالحة &mdash; كلها تُكتشف قبل دخول أي صف إلى قاعدة البيانات.</p></div>
+      <div class="pain gain"><h4>رفع متكرر بلا تكرار</h4><p>رفع الملف مرة أخرى يُحدِّث الموجود ويضيف الجديد بمفتاح كود العضوية &mdash; ولا يُنشئ نسخًا مكررة.</p></div>
+    </div>
+  </div>
+</section>
+
+<!-- ============ FLOW ============ -->
+<section class="dark" id="flow">
+  <div class="wrap">
+    <div class="reveal">
+      <div class="eyebrow">آلية العمل</div>
+      <h2 class="title">من ملف Excel إلى جنيه في الخزنة &mdash; في أربع خطوات.</h2>
+      <p class="lede">دورة كاملة لا تحتاج نظامًا محاسبيًا ولا فريق تشغيل.</p>
+    </div>
+    <div class="flow reveal">
+      <div class="fstep"><div class="fn">١</div><h4>ارفعوا البيانات</h4><p>ملفات الأعضاء والمستحقات والأنشطة تُرفع على البوابة مرة واحدة، ثم تُحدَّث شهريًا.</p></div>
+      <div class="fstep"><div class="fn">٢</div><h4>يفعّل العضو تطبيقه</h4><p>يدخل برقم موبايله المسجّل، فيتعرف عليه النظام فورًا ويعرض عضويته ومستحقاته.</p></div>
+      <div class="fstep"><div class="fn">٣</div><h4>يُذكَّر ويسدّد</h4><p>إشعار قبل الاستحقاق وبعده. يسدّد بالبطاقة أو المحفظة، فيتحدث رصيده لحظيًا ويصله إيصال.</p></div>
+      <div class="fstep"><div class="fn">٤</div><h4>ترون النتيجة</h4><p>لوحة تحصيل لحظية: كم دخل، كم متبقٍ، من المتأخر &mdash; بلا كشوف يدوية ولا انتظار.</p></div>
+    </div>
+
+    <div class="grid g4 reveal" style="margin-top:48px;">
+      <div class="stat"><b class="num">iOS + Android</b><span>تطبيق أصلي في المتجرين</span></div>
+      <div class="stat"><b>سحابة مؤمَّنة</b><span>استضافة داخل مصر أو أوروبا</span></div>
+      <div class="stat"><b>بوابة دفع معتمدة</b><span>Paymob أو Fawry أو Kashier</span></div>
+      <div class="stat"><b class="num">99.5%</b><span>نسبة إتاحة متعاقد عليها</span></div>
+    </div>
+
+    <div class="grid g3 reveal" style="margin-top:22px;">
+      <div class="card" style="background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);">
+        <div class="card-ico sky">🔐</div><h4>أمان البيانات</h4>
+        <p style="color:#A9BBD4;">تشفير كامل للاتصال، دخول العضو بـ OTP بلا كلمات مرور، صلاحيات محددة لموظفي البوابة، وسجل مراجعة لكل تعديل.</p>
+      </div>
+      <div class="card" style="background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);">
+        <div class="card-ico mint">💾</div><h4>ملكية البيانات</h4>
+        <p style="color:#A9BBD4;">بيانات النادي ملك النادي. تصدير كامل بصيغة Excel في أي وقت وبضغطة واحدة، بلا احتجاز ولا رسوم خروج.</p>
+      </div>
+      <div class="card" style="background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);">
+        <div class="card-ico">🔌</div><h4>قابلية التوسع</h4>
+        <p style="color:#A9BBD4;">النظام مبني بواجهة برمجية (API) موثقة، فأي نظام محاسبي أو ERP مستقبلي يتصل به مباشرة دون إعادة بناء.</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ============ PLAN ============ -->
+<section class="alt" id="plan">
+  <div class="wrap">
+    <div class="reveal">
+      <div class="eyebrow">خطة التنفيذ</div>
+      <h2 class="title">اثنا عشر أسبوعًا من التوقيع إلى المتجر.</h2>
+      <p class="lede">جدول واقعي، بتسليمات محددة في نهاية كل مرحلة، ومراجعة مشتركة قبل الانتقال للمرحلة التالية.</p>
+    </div>
+
+    <div class="grid g2 reveal" style="margin-top:34px;align-items:start;gap:40px;">
+      <div class="tl">
+        <div class="tl-i"><div class="tl-w">الأسبوع ١ &mdash; ٢</div><h4>التحليل وتثبيت القوالب</h4>
+          <p>ورشة عمل مع إدارة العضويات والأنشطة. تثبيت أنواع العضوية، بنود المستحقات، سياسة الدعوات، وقائمة الأنشطة. تسليم القوالب الستة النهائية + الهوية البصرية للتطبيق.</p></div>
+        <div class="tl-i"><div class="tl-w">الأسبوع ٣ &mdash; ٥</div><h4>بناء بوابة الإدارة</h4>
+          <p>محرك رفع البيانات والتحقق، شاشات الأعضاء والمستحقات، تسعير الأنشطة، سياسة الدعوات، لوحة التحصيل. <strong>تسليم: بوابة عاملة ترفعون عليها بياناتكم الحقيقية.</strong></p></div>
+        <div class="tl-i"><div class="tl-w">الأسبوع ٦ &mdash; ٩</div><h4>بناء تطبيق الموبايل</h4>
+          <p>الدخول بـ OTP، بطاقة العضوية، المستحقات والسداد، الأنشطة والاشتراك، جدول التدريب، الإشعارات. ربط بوابة الدفع واختبار المعاملات الحقيقية.</p></div>
+        <div class="tl-i"><div class="tl-w">الأسبوع ١٠</div><h4>البوابة والدعوات</h4>
+          <p>QR المتجدد، شاشة المسح على بوابات النادي، محرك رصيد الدعوات وشرائها، وربطها بحالة السداد.</p></div>
+        <div class="tl-i"><div class="tl-w">الأسبوع ١١</div><h4>الاختبار بالبيانات الحقيقية</h4>
+          <p>تشغيل تجريبي مغلق مع ٥٠ عضوًا وثلاثة مدربين. تصحيح ما يظهر، واختبار الحمل والأمان.</p></div>
+        <div class="tl-i" style="padding-bottom:0;"><div class="tl-w">الأسبوع ١٢</div><h4>التدريب والإطلاق</h4>
+          <p>يومان تدريب لموظفي البوابة، مادة تعريفية للأعضاء، نشر التطبيق على App Store و Google Play باسم النادي، وبدء التشغيل الفعلي.</p></div>
+      </div>
+
+      <div>
+        <div style="background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:24px;margin-bottom:18px;">
+          <h4 style="color:var(--navy);margin-bottom:14px;">ما نحتاجه منكم</h4>
+          <ul class="scope-list" style="font-size:.88rem;">
+            <li><span class="tick">✓</span><span>ملف الأعضاء الحالي بأي صيغة متاحة (Excel أو تصدير من نظامكم)</span></li>
+            <li><span class="tick">✓</span><span>قائمة أنواع العضوية وقيمة التجديد لكل نوع</span></li>
+            <li><span class="tick">✓</span><span>قائمة الأنشطة الرياضية وأسعارها المعتمدة</span></li>
+            <li><span class="tick">✓</span><span>سياسة الدعوات المعتمدة من المجلس</span></li>
+            <li><span class="tick">✓</span><span>حساب تاجر لدى بوابة دفع (نساعدكم في فتحه)</span></li>
+            <li><span class="tick">✓</span><span>مسؤول تواصل واحد من النادي طوال المشروع</span></li>
+            <li><span class="tick">✓</span><span>حسابا مطوّر باسم النادي على المتجرين (نساعدكم في فتحهما)</span></li>
+          </ul>
+        </div>
+        <div class="note">
+          <strong>ملاحظة مهمة حول البيانات:</strong>
+          لم نستلم بعد ملف الأعضاء، ولهذا صُمِّم النظام ليقبل بياناتكم <em>كما هي</em> عبر القوالب،
+          لا أن يفرض عليكم هيكلًا جاهزًا. أي اختلاف في أعمدة ملفكم يُستوعب في مرحلة المطابقة
+          دون تكلفة إضافية ودون تأخير الجدول.
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ============ PRICING ============ -->
+<section id="price">
+  <div class="wrap">
+    <div class="reveal">
+      <div class="eyebrow">العرض المالي</div>
+      <h2 class="title">سعر واحد، شامل، بلا بنود مخفية.</h2>
+    </div>
+
+    <div class="price-hero reveal" style="margin-top:28px;">
+      <div style="position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;">
+        <div>
+          <div style="font-size:.86rem;color:#B9CCE6;margin-bottom:6px;">إجمالي قيمة المشروع &mdash; المرحلة الأولى</div>
+          <div class="amt num">700,000</div>
+          <div class="cur">جنيه مصري &mdash; شامل التطبيق والبوابة والنشر والتدريب</div>
+        </div>
+        <div style="text-align:center;border-inline-start:1px solid rgba(255,255,255,.15);padding-inline-start:26px;">
+          <div style="font-size:.8rem;color:#B9CCE6;">صيانة واستضافة سنوية</div>
+          <div style="font-family:var(--f-head);font-size:1.9rem;font-weight:900;color:#fff;"><span class="num">126,000</span></div>
+          <div style="font-size:.76rem;color:#93AECF;">ج.م/سنة &mdash; <b style="color:var(--gold-2);">أول ٦ أشهر مجانًا</b></div>
+        </div>
+      </div>
+    </div>
+
+    <div class="grid g2 reveal" style="margin-top:34px;align-items:start;gap:34px;">
+      <div>
+        <h3 style="color:var(--navy);font-size:1.12rem;margin-bottom:10px;">تفصيل القيمة</h3>
+        <div class="pline"><div class="pn"><b>تطبيق الموبايل للأعضاء</b><span>iOS + Android أصلي &mdash; ١٢ شاشة &mdash; عربي RTL</span></div><div class="pv"><span class="num">300,000</span></div></div>
+        <div class="pline"><div class="pn"><b>بوابة الإدارة ومحرك رفع البيانات</b><span>٦ قوالب، تحقق ومطابقة، ٩ شاشات إدارية</span></div><div class="pv"><span class="num">220,000</span></div></div>
+        <div class="pline"><div class="pn"><b>نظام البوابة والدعوات</b><span>QR متجدد، شاشة مسح، محرك رصيد وبيع الدعوات</span></div><div class="pv"><span class="num">90,000</span></div></div>
+        <div class="pline"><div class="pn"><b>الربط والنشر والتدريب</b><span>بوابة الدفع، نشر المتجرين، تدريب الموظفين، الإطلاق</span></div><div class="pv"><span class="num">90,000</span></div></div>
+        <div class="pline" style="border-top:2px solid var(--navy);margin-top:6px;padding-top:16px;">
+          <div class="pn"><b style="font-size:1.05rem;">الإجمالي</b><span>غير شامل ضريبة القيمة المضافة</span></div>
+          <div class="pv" style="font-size:1.3rem;color:var(--gold);"><span class="num">700,000</span> ج.م</div>
+        </div>
+      </div>
+
+      <div>
+        <h3 style="color:var(--navy);font-size:1.12rem;margin-bottom:10px;">جدول الدفعات</h3>
+        <div class="grid g2" style="gap:12px;">
+          <div class="pay-step"><div class="pc num">40%</div><div class="pa"><span class="num">280,000</span> ج.م</div><div class="pw">عند توقيع العقد</div></div>
+          <div class="pay-step"><div class="pc num">30%</div><div class="pa"><span class="num">210,000</span> ج.م</div><div class="pw">عند تسليم البوابة (أسبوع ٥)</div></div>
+          <div class="pay-step"><div class="pc num">20%</div><div class="pa"><span class="num">140,000</span> ج.م</div><div class="pw">عند نشر التطبيق على المتجرين</div></div>
+          <div class="pay-step"><div class="pc num">10%</div><div class="pa"><span class="num">70,000</span> ج.م</div><div class="pw">بعد شهر تشغيل فعلي مستقر</div></div>
+        </div>
+
+        <div style="background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:20px;margin-top:16px;">
+          <h4 style="color:var(--navy);font-size:.96rem;margin-bottom:10px;">مشمول في السعر بلا رسوم إضافية</h4>
+          <ul class="scope-list" style="font-size:.85rem;">
+            <li><span class="tick">✓</span><span>سنة ضمان كاملة على أي عيب برمجي</span></li>
+            <li><span class="tick">✓</span><span>استضافة ودعم فني مجانًا أول ٦ أشهر بعد الإطلاق</span></li>
+            <li><span class="tick">✓</span><span>عدد غير محدود من الأعضاء والمستخدمين &mdash; لا رسوم لكل مستخدم</span></li>
+            <li><span class="tick">✓</span><span>رسوم حسابي المتجرين للسنة الأولى</span></li>
+            <li><span class="tick">✓</span><span>يومان تدريب حضوري + أدلة استخدام بالعربية</span></li>
+            <li><span class="tick">✓</span><span>تصدير كامل لبياناتكم في أي وقت</span></li>
+            <li><span class="tick">✓</span><span>واجهة برمجية (API) موثقة للربط المستقبلي</span></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <div class="grid g3 reveal" style="margin-top:34px;">
+      <div class="card"><div class="card-ico mint">↺</div><h4>عائد الاستثمار</h4>
+        <p>برفع نسبة التحصيل من ٤١٪ إلى ٦٣٪ فقط على قاعدة أعضاء متوسطة، تتجاوز الزيادة السنوية في المُحصَّل قيمة المشروع كاملة خلال أقل من شهرين تشغيل.</p></div>
+      <div class="card"><div class="card-ico">⊕</div><h4>خصم التوقيع المبكر</h4>
+        <p>عند التوقيع خلال ٣٠ يومًا من تاريخ العرض: خصم <b class="num">5%</b> من الإجمالي، أو تمديد فترة الاستضافة والدعم المجاني إلى ١٢ شهرًا &mdash; باختياركم.</p></div>
+      <div class="card"><div class="card-ico sky">→</div><h4>المرحلة الثانية</h4>
+        <p>الحجوزات، المحفظة، المطاعم، القرى، الشكاوى، الأخبار &mdash; تُسعَّر منفصلة عند طلبها، وتُبنى فوق نفس النظام دون هدم أو إعادة بناء.</p></div>
+    </div>
+  </div>
+</section>
+
+<!-- ============ TERMS / FAQ ============ -->
+<section class="alt" id="terms">
+  <div class="wrap narrow">
+    <div class="reveal">
+      <div class="eyebrow">الشروط والأسئلة</div>
+      <h2 class="title">ما يهمكم معرفته قبل التوقيع.</h2>
+    </div>
+    <div class="reveal" style="margin-top:26px;">
+      <details class="faq" open><summary>ماذا لو لم تكن بياناتنا منظمة أو ناقصة؟</summary>
+        <p>هذا هو الوضع الطبيعي، وقد صُمِّم النظام له. القوالب تقبل الحقول الإلزامية فقط (كود العضوية، الاسم، الموبايل)، وكل ما عداها اختياري يُستكمل لاحقًا من شاشات البوابة. ومرحلة المطابقة تستوعب أي تسمية أعمدة لديكم. لن نطلب منكم إعادة إدخال أي بيانات يدويًا.</p></details>
+      <details class="faq"><summary>هل نحتاج موظفًا متخصصًا لتشغيل البوابة؟</summary>
+        <p>لا. البوابة مصممة لموظف إداري عادي يجيد استخدام Excel. التدريب يومان، والعمل اليومي المعتاد لا يتجاوز رفع ملف المستحقات الشهري ومتابعة لوحة التحصيل.</p></details>
+      <details class="faq"><summary>من يملك التطبيق والبيانات؟</summary>
+        <p>النادي. التطبيق يُنشر على المتجرين باسم نادي الصيد المصري وتحت حساباته، والبيانات ملك النادي بالكامل مع حق تصديرها في أي وقت. نسلّم الكود المصدري للنادي عند سداد الدفعة الأخيرة.</p></details>
+      <details class="faq"><summary>ماذا يحدث بعد انتهاء الستة أشهر المجانية؟</summary>
+        <p>يبدأ عقد الاستضافة والصيانة السنوي بقيمة <span class="num">126,000</span> ج.م، ويشمل الاستضافة والنسخ الاحتياطي والدعم الفني وتحديثات التوافق مع إصدارات iOS و Android الجديدة. العقد اختياري وقابل للتجديد سنويًا، والنظام يظل ملك النادي في كل الأحوال.</p></details>
+      <details class="faq"><summary>هل رسوم بوابة الدفع مشمولة؟</summary>
+        <p>رسوم الربط البرمجي مشمولة. أما عمولة المعاملات (عادة ١.٥٪ &mdash; ٢.٥٪ حسب البوابة والوسيلة) فهي علاقة مباشرة بين النادي وبوابة الدفع، ويمكن للنادي تحميلها على العضو أو استيعابها &mdash; والنظام يدعم الحالتين.</p></details>
+      <details class="faq"><summary>ماذا لو أردنا المرحلة الثانية لاحقًا؟</summary>
+        <p>النظام مبني على واجهة برمجية موثقة وقاعدة بيانات مفتوحة لكم، فأي إضافة مستقبلية &mdash; حجوزات، محفظة، مطاعم، أو ربط بنظام ERP كامل &mdash; تُبنى فوق ما سُلِّم دون إعادة بناء ودون هدر ما دُفع.</p></details>
+      <details class="faq"><summary>ما مدة صلاحية هذا العرض؟</summary>
+        <p><span class="num">30</span> يومًا من تاريخ تقديمه. الأسعار بالجنيه المصري وغير شاملة ضريبة القيمة المضافة، وتخضع للمراجعة بعد انتهاء المدة.</p></details>
+    </div>
+  </div>
+</section>
+
+<footer>
+  <img src="assets/al-arcade-white.png" alt="AL-Arcade">
+  <div style="font-family:var(--f-head);font-weight:800;color:#fff;font-size:1.05rem;">شركة الأركيد &mdash; AL-Arcade</div>
+  <p style="font-size:.85rem;max-width:520px;margin:10px auto 0;line-height:1.9;">
+    عرض فني ومالي مقدَّم إلى مجلس إدارة نادي الصيد المصري &mdash; المرحلة الأولى: تطبيق الأعضاء وبوابة البيانات.
+  </p>
+  <div class="fl"><span>700,000 ج.م</span><span>12 أسبوعًا</span><span>iOS + Android</span><span>ضمان سنة كاملة</span></div>
+  <small>وثيقة سرية &mdash; لا تُتداول خارج مجلس الإدارة &mdash; 2026</small>
+</footer>
+
+<script src="js/app.js"></script>
+</body>
+</html>

Proposal/sayd-mobile/js/app.js

+(function () {
+  'use strict';
+
+  /* ---------- scroll reveal ---------- */
+  var io = new IntersectionObserver(function (entries) {
+    entries.forEach(function (e) { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
+  }, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
+  document.querySelectorAll('.reveal').forEach(function (el) { io.observe(el); });
+
+  /* ---------- nav state + progress ---------- */
+  var nav = document.getElementById('nav');
+  var bar = document.getElementById('progress');
+  var links = Array.prototype.slice.call(document.querySelectorAll('#navlinks a'));
+  var targets = links.map(function (a) { return document.querySelector(a.getAttribute('href')); });
+
+  function onScroll() {
+    var y = window.scrollY;
+    nav.classList.toggle('stuck', y > 20);
+    var h = document.documentElement.scrollHeight - window.innerHeight;
+    bar.style.width = (h > 0 ? (y / h) * 100 : 0) + '%';
+    var active = -1;
+    targets.forEach(function (t, i) { if (t && t.getBoundingClientRect().top <= 140) active = i; });
+    links.forEach(function (a, i) { a.classList.toggle('on', i === active); });
+  }
+  window.addEventListener('scroll', onScroll, { passive: true });
+  onScroll();
+
+  /* ---------- QR filler (deterministic pseudo-random) ---------- */
+  document.querySelectorAll('[data-qr]').forEach(function (g) {
+    var n = 121, seed = 7;
+    var frag = document.createDocumentFragment();
+    for (var i = 0; i < n; i++) {
+      seed = (seed * 1103515245 + 12345) & 0x7fffffff;
+      var c = i % 11, r = Math.floor(i / 11);
+      // finder squares in three corners
+      var finder = (c < 3 && r < 3) || (c > 7 && r < 3) || (c < 3 && r > 7);
+      var on = finder ? !((c === 1 || c === 9) && (r === 1 || r === 9)) : (seed % 100) > 48;
+      var cell = document.createElement('i');
+      if (!on) cell.style.background = 'transparent';
+      frag.appendChild(cell);
+    }
+    g.appendChild(frag);
+  });
+
+  /* ---------- mobile screen switcher ---------- */
+  var NOTES = {
+    login: {
+      t: 'دخول بلا كلمة مرور',
+      p: 'العضو يدخل برقم موبايله المسجَّل في بيانات النادي فقط. لا حسابات تُنشأ ولا كلمات مرور تُنسى ولا موظف يفعّل الحساب يدويًا.',
+      b: ['التعرف الفوري على العضو من ملف الأعضاء المرفوع', 'كود تحقق OTP صالح لدقيقتين', 'جهاز واحد نشط لكل عضوية لمنع التداول']
+    },
+    home: {
+      t: 'كل ما يهم العضو في شاشة واحدة',
+      p: 'أول ما يراه العضو: هل عضويته سارية، وكم عليه، وبكم زر يسدّد. البطاقة الرقمية تغني عن الكارنيه الورقي.',
+      b: ['حالة العضوية وتاريخ سريانها', 'إجمالي المستحق مع تنبيه التأخير', 'اشتراكات الأبناء ورصيد الدعوات']
+    },
+    dues: {
+      t: 'شفافية كاملة في المستحقات',
+      p: 'كل بند مستحق بمفرده: عن أي شهر، ولماذا، ومتى يستحق. لا مبالغ مجمّعة غامضة تُشكِّك العضو وتؤخر السداد.',
+      b: ['تجديدات وأقساط وغرامات وفواتير أنشطة', 'سداد بند واحد أو عدة بنود معًا', 'أرشيف كامل للمسدَّد مع إيصالاته']
+    },
+    pay: {
+      t: 'التحصيل حيث يوجد العضو',
+      p: 'بطاقة أو محفظة إلكترونية &mdash; أو كود سداد يُقدَّم لخزنة النادي لمن يفضّل الدفع نقدًا. كل الطرق تُسجَّل في نفس التقرير.',
+      b: ['Visa و Mastercard و Meeza', 'فودافون كاش و إنستاباي', 'كود سداد للخزنة يربط الدفع النقدي بالنظام']
+    },
+    qr: {
+      t: 'البوابة تعرف من يدخل',
+      p: 'كود متجدد كل ٦٠ ثانية لا يمكن تصويره وإرساله لغير العضو. القارئ على البوابة يعرض فورًا حالة العضوية.',
+      b: ['منع الدخول عند إيقاف العضوية أو تجاوز حد التأخير', 'سجل دخول لحظي لكل بوابة', 'يعمل بلا إنترنت لدى العضو (كود دون اتصال)']
+    },
+    invites: {
+      t: 'الدعوات: انضباط وإيراد',
+      p: 'رصيد شهري واضح حسب نوع العضوية، وبيع منظّم للدعوات الإضافية بدل التقدير الشخصي على البوابة.',
+      b: ['رصيد مجاني يتجدد شهريًا', 'شراء دعوات إضافية بحد أقصى', 'ربط اختياري بين الدعوة وانتظام السداد']
+    },
+    sports: {
+      t: 'السعر معلن، والاشتراك بضغطة',
+      p: 'أكبر عائق أمام اشتراك الأنشطة هو أن ولي الأمر لا يعرف السعر ولا الأماكن المتاحة. الكتالوج يزيل العائق.',
+      b: ['أسعار وفئات سنية وعدد حصص معلنة', 'السعة المتاحة وقائمة انتظار عند الاكتمال', 'فاتورة شهرية تلقائية بعد الاشتراك']
+    },
+    schedule: {
+      t: 'الجدول من المدرب مباشرة',
+      p: 'يرفع المدرب جدول مجموعته من قالب موحّد، فيظهر لكل مشترك في تطبيقه &mdash; مع تنبيه فوري عند أي إلغاء أو تعويض.',
+      b: ['جدول أسبوعي لكل لاعب على حدة', 'ملاحظات المدرب على الحصة', 'إشعار فوري بالتغييرات والحصص التعويضية']
+    }
+  };
+
+  var noteBox = document.getElementById('scr-note');
+
+  function renderNote(k) {
+    var n = NOTES[k];
+    if (!n || !noteBox) return;
+    noteBox.innerHTML =
+      '<div class="card" style="border-color:var(--line-2);">' +
+        '<div class="card-ico">◆</div>' +
+        '<h4>' + n.t + '</h4>' +
+        '<p>' + n.p + '</p>' +
+        '<ul class="scope-list" style="margin-top:14px;">' +
+          n.b.map(function (x) { return '<li><span class="tick">✓</span><span>' + x + '</span></li>'; }).join('') +
+        '</ul>' +
+      '</div>';
+  }
+
+  var scrBtns = document.querySelectorAll('.pn-item[data-scr]');
+  scrBtns.forEach(function (btn) {
+    btn.addEventListener('click', function () {
+      var k = btn.dataset.scr;
+      scrBtns.forEach(function (b) { b.classList.toggle('on', b === btn); });
+      document.querySelectorAll('.scr').forEach(function (s) {
+        s.style.display = (s.dataset.scr === k) ? 'flex' : 'none';
+      });
+      renderNote(k);
+    });
+  });
+  renderNote('login');
+
+  /* ---------- portal screen switcher ---------- */
+  var URLS = {
+    dash: 'https://portal.sayd-club.eg/dashboard',
+    import: 'https://portal.sayd-club.eg/import/members',
+    members: 'https://portal.sayd-club.eg/members',
+    catalog: 'https://portal.sayd-club.eg/activities/pricing',
+    invites: 'https://portal.sayd-club.eg/invitations/policy',
+    sched: 'https://portal.sayd-club.eg/schedules'
+  };
+  var burl = document.getElementById('burl');
+  var pBtns = document.querySelectorAll('.pn-item[data-pscr]');
+  var sideItems = document.querySelectorAll('.side .si[data-jump]');
+
+  function showPortal(k) {
+    pBtns.forEach(function (b) { b.classList.toggle('on', b.dataset.pscr === k); });
+    sideItems.forEach(function (s) { s.classList.toggle('on', s.dataset.jump === k); });
+    document.querySelectorAll('.pscr').forEach(function (s) {
+      s.style.display = (s.dataset.pscr === k) ? 'block' : 'none';
+    });
+    if (burl && URLS[k]) burl.textContent = URLS[k];
+  }
+  pBtns.forEach(function (b) { b.addEventListener('click', function () { showPortal(b.dataset.pscr); }); });
+  sideItems.forEach(function (s) { s.addEventListener('click', function () { showPortal(s.dataset.jump); }); });
+})();

Proposal/sayd-mobile/nginx.conf

+server {
+  listen 80;
+  server_name _;
+  root /usr/share/nginx/html;
+  index index.html;
+  charset utf-8;
+
+  location / { try_files $uri $uri/ /index.html; }
+
+  location ~* \.csv$ {
+    add_header Content-Type "text/csv; charset=utf-8";
+    add_header Content-Disposition "attachment";
+  }
+
+  gzip on;
+  gzip_types text/plain text/css application/javascript text/csv image/svg+xml;
+  add_header X-Content-Type-Options nosniff;
+  add_header X-Frame-Options SAMEORIGIN;
+}

Proposal/sayd-mobile/templates/01_members.csv

+"membership_no","full_name","national_id","mobile","membership_type","status","join_date","expiry_date","email"
+"كود العضوية","الاسم الرباعي","الرقم القومي","رقم الموبايل","نوع العضوية","الحالة","تاريخ الانضمام","تاريخ انتهاء الاشتراك","البريد الإلكتروني"
+"10245","محمد أحمد سيد إبراهيم","28503121201234","01001234567","عضو عامل","نشط","2011-03-15","2026-12-31","m.ahmed@example.com"
+"10246","ياسمين خالد محمود علي","29907114500987","01112223344","عضو عامل","نشط","2015-08-02","2026-12-31",""
+"10247","عمرو مصطفى فتحي حسن","30101010100111","01223334455","عضو منتسب","موقوف","2019-01-20","2026-06-30",""

Proposal/sayd-mobile/templates/02_dues.csv

+"membership_no","due_type","description","period","amount","due_date","status"
+"كود العضوية","نوع المستحق","الوصف","عن شهر / سنة","المبلغ","تاريخ الاستحقاق","الحالة"
+"10245","اشتراك سنوي","تجديد العضوية 2026","2026","4500","2026-01-31","غير محصل"
+"10245","قسط","القسط الأول من رسوم التجديد","2026-01","1500","2026-01-31","محصل"
+"10245","قسط","القسط الثاني من رسوم التجديد","2026-02","1500","2026-02-28","غير محصل"
+"10246","اشتراك سنوي","تجديد العضوية 2026","2026","4500","2026-01-31","غير محصل"
+"10247","غرامة تأخير","غرامة تأخر السداد عن 2025","2025","350","2026-01-31","غير محصل"

Proposal/sayd-mobile/templates/03_sports_catalog.csv

+"activity_code","activity_name","category","age_group","sessions_per_month","monthly_fee","joining_fee","capacity","coach_name"
+"كود النشاط","اسم النشاط","الفئة","الفئة السنية","عدد الحصص شهريًا","الاشتراك الشهري","رسوم الانضمام","السعة","المدرب المسؤول"
+"SW-01","سباحة مبتدئين","سباحة","6 - 9 سنوات","12","900","300","24","كابتن هشام صلاح"
+"SW-02","سباحة متقدم","سباحة","10 - 14 سنة","16","1200","300","20","كابتن هشام صلاح"
+"KR-01","كاراتيه مبتدئين","كاراتيه","6 - 12 سنة","8","700","250","30","كابتن أيمن رشدي"
+"FB-01","كرة القدم — الموهبة","كرة القدم","8 - 11 سنة","12","1100","400","28","كابتن طارق منير"
+"TN-01","تنس أرضي — أطفال","تنس","7 - 12 سنة","8","1400","350","12","كابتن نهى سامي"
+"GY-01","جمباز فني — سيدات","جمباز","12 - 18 سنة","12","1000","300","18","كابتن دينا عادل"
+"SQ-01","اسكواش — ناشئين","اسكواش","10 - 16 سنة","8","1300","350","10","كابتن كريم لطفي"

Proposal/sayd-mobile/templates/04_activity_subscriptions.csv

+"membership_no","player_name","activity_code","group_name","start_date","end_date","monthly_fee","status"
+"كود العضوية","اسم اللاعب","كود النشاط","اسم المجموعة","تاريخ البدء","تاريخ الانتهاء","الاشتراك الشهري","الحالة"
+"10245","يوسف محمد أحمد","SW-01","مجموعة أ — صباحي","2026-09-01","2027-06-30","900","نشط"
+"10246","لُجين خالد محمود","GY-01","مجموعة ب — مسائي","2026-09-01","2027-06-30","1000","نشط"
+"10247","مالك عمرو مصطفى","FB-01","الموهبة 2016","2026-09-01","2027-06-30","1100","موقوف"

Proposal/sayd-mobile/templates/05_invitations_policy.csv

+"membership_type","free_invites_per_month","extra_invite_price","max_extra_per_month","guest_child_price","valid_days"
+"نوع العضوية","دعوات مجانية شهريًا","سعر الدعوة الإضافية","حد أقصى للشراء شهريًا","سعر دعوة طفل","صلاحية الدعوة (أيام)"
+"عضو عامل","4","150","10","75","1"
+"عضو منتسب","2","200","6","100","1"
+"عضو فخري","8","0","0","0","1"
+"عضو مؤقت","0","250","4","125","1"

Proposal/sayd-mobile/templates/06_training_schedule.csv

+"activity_code","group_name","weekday","start_time","end_time","venue","coach_name","notes"
+"كود النشاط","اسم المجموعة","اليوم","من","إلى","المكان","المدرب","ملاحظات"
+"SW-01","مجموعة أ — صباحي","السبت","09:00","10:00","حمام السباحة الأولمبي","كابتن هشام صلاح",""
+"SW-01","مجموعة أ — صباحي","الاثنين","09:00","10:00","حمام السباحة الأولمبي","كابتن هشام صلاح",""
+"SW-01","مجموعة أ — صباحي","الأربعاء","09:00","10:00","حمام السباحة الأولمبي","كابتن هشام صلاح","حصة قياس مستوى"
+"GY-01","مجموعة ب — مسائي","الأحد","17:00","18:30","صالة الجمباز","كابتن دينا عادل",""
+"GY-01","مجموعة ب — مسائي","الثلاثاء","17:00","18:30","صالة الجمباز","كابتن دينا عادل",""
+"FB-01","الموهبة 2016","السبت","16:00","17:30","الملعب رقم 2","كابتن طارق منير",""