/* =========================================================
   MrPOS — Landing page styles
   Font: Cairo · RTL · Responsive · Animated
   لوحة ألوان: تركواز/أخضر + ذهبي (هوية حسابات ومطاعم — بعيدة عن ألوان AI)
   ========================================================= */
:root{
  --bg:#ffffff;
  --bg-soft:#f1f7f5;
  --ink:#0d1f1c;
  --ink-2:#1c3b35;
  --muted:#5f7a73;
  --line:#e2efeb;
  --primary:#0f9c8a;
  --primary-2:#0a7a6e;
  --accent:#16b877;      /* أخضر النجاح/المبيعات */
  --gold:#f5a524;        /* ذهبي فخم للـ CTA */
  --dark:#062825;
  --dark-2:#0a3a34;
  --grad:linear-gradient(135deg,#12a594 0%,#0a7a6e 100%);
  --grad-soft:linear-gradient(135deg,#17b8a6 0%,#0e8f81 100%);
  --shadow-sm:0 4px 16px rgba(6,40,36,.09);
  --shadow:0 18px 50px rgba(6,40,36,.16);
  --shadow-lg:0 40px 90px rgba(6,40,36,.28);
  --radius:18px;
  --radius-lg:26px;
  --max:1320px;
  --font:"Cairo","Tajawal","Segoe UI",Tahoma,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.7;overflow-x:hidden;font-weight:500}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
ul,ol{list-style:none}
h1,h2,h3,h4{line-height:1.25;font-weight:800;color:var(--ink)}
.container{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:22px}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-light{background:linear-gradient(135deg,#fff,#cdeee7);-webkit-background-clip:text;background-clip:text;color:transparent}
.skip-link{position:absolute;right:-999px;top:8px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;z-index:999}
.skip-link:focus{right:12px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font);
  font-weight:700;font-size:15px;padding:12px 22px;border-radius:14px;cursor:pointer;border:0;
  transition:transform .2s ease,box-shadow .25s ease,background .25s ease,color .2s;white-space:nowrap}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-lg{padding:16px 30px;font-size:16.5px;border-radius:16px}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 12px 30px rgba(15,156,138,.4)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(15,156,138,.52)}
.btn-ghost{background:transparent;color:var(--ink-2)}
.btn-ghost:hover{background:var(--bg-soft)}
.btn-outline{background:rgba(255,255,255,.06);color:#fff;border:1.5px solid rgba(255,255,255,.35);backdrop-filter:blur(6px)}
.btn-outline:hover{background:rgba(255,255,255,.16);transform:translateY(-3px)}
.btn-white{background:#fff;color:var(--primary)}
.btn-white:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.25)}
.btn-gold{background:var(--gold);color:#3f2c05;box-shadow:0 12px 30px rgba(245,165,36,.34)}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(245,165,36,.48)}
.btn-dl svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* أزرار التحميل في الهيدر مضغوطة عشان تسيب مكان للمنيو */
.header-cta .btn{padding:10px 15px;font-size:13.5px;border-radius:12px}
.header-cta .btn-dl svg{width:17px;height:17px}
.btn-outline-light{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)}
.btn-outline-light:hover{background:rgba(255,255,255,.12)}

/* ---------- Header ---------- */
.site-header{position:fixed;inset-block-start:0;inset-inline:0;z-index:100;transition:.3s;
  padding-block:14px;background:transparent}
.site-header.scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(14px);
  box-shadow:0 4px 24px rgba(6,40,36,.08);padding-block:8px}
.header-inner{display:flex;align-items:center;gap:18px}
/* فوق الهيرو الغامق (قبل التمرير): الشعار أبيض */
.brand{display:flex;align-items:center}
.brand img{height:38px;width:auto}
/* اللوجو الأبيض فوق الهيرو الغامق، والغامق لما الهيدر يبقى أبيض بعد التمرير */
.brand .logo-on-light{display:none}
.site-header.scrolled .brand .logo-on-dark{display:none}
.site-header.scrolled .brand .logo-on-light{display:block}
.main-nav{display:flex;align-items:center;gap:18px;margin-inline-start:12px}
.menu-dl{display:none}
/* روابط المنيو: بيضا فوق الهيرو، وتبقى غامقة بعد التمرير على خلفية بيضا */
.main-nav a{font-weight:700;color:rgba(255,255,255,.92);font-size:15px;position:relative;padding-block:6px;transition:.2s;white-space:nowrap}
.main-nav a::after{content:"";position:absolute;inset-block-end:0;inset-inline-start:0;width:0;height:2px;background:#fff;border-radius:2px;transition:.25s}
.main-nav a:hover{color:#fff}
.main-nav a:hover::after,.main-nav a.active::after{width:100%}
.site-header.scrolled .main-nav a{color:var(--ink-2);font-weight:600}
.site-header.scrolled .main-nav a::after{background:var(--grad)}
.site-header.scrolled .main-nav a:hover{color:var(--primary)}
.header-cta{margin-inline-start:auto;display:flex;gap:10px;align-items:center}
.nav-toggle{display:none;margin-inline-start:auto;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{width:26px;height:3px;background:var(--ink);border-radius:3px;transition:.3s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative;background:linear-gradient(160deg,#04211d 0%,#083a34 55%,#0a544a 100%);
  color:#fff;padding-block:150px 90px;overflow:hidden}
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:drift 18s ease-in-out infinite}
.blob.b1{width:520px;height:520px;background:#0fb0a0;top:-120px;inset-inline-end:-80px}
.blob.b2{width:460px;height:460px;background:#0c8f5f;bottom:-160px;inset-inline-start:-100px;animation-delay:-6s}
.blob.b3{width:360px;height:360px;background:#f5a524;top:40%;inset-inline-start:38%;opacity:.22;animation-delay:-11s}
.grid-overlay{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000,transparent)}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-30px) scale(1.12)}}
.hero-inner{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  padding:8px 16px;border-radius:100px;font-size:14px;font-weight:600;color:#d5f0ea;margin-bottom:22px}
.eyebrow .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(22,184,119,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(22,184,119,.55)}70%{box-shadow:0 0 0 12px rgba(22,184,119,0)}100%{box-shadow:0 0 0 0 rgba(22,184,119,0)}}
.hero h1{font-size:clamp(34px,5vw,58px);font-weight:900;color:#fff;letter-spacing:-.5px}
.hero h1 .grad{background:linear-gradient(120deg,#5fe6cf,#ffd98a);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{font-size:clamp(16px,1.6vw,20px);color:#bcd6cf;margin:20px 0 30px;max-width:560px;font-weight:500}
.hero .lead b{color:#fff;font-weight:800}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-badges{display:flex;gap:22px;flex-wrap:wrap;margin-top:28px}
.hero-badges li{display:flex;align-items:center;gap:8px;font-size:14.5px;color:#c6ddd7;font-weight:600}
.ic{width:19px;height:19px;fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Hero devices ---------- */
.hero-visual{position:relative;height:460px}
.device{position:relative}
.device .screen{background:#071a17;border-radius:12px;overflow:hidden;position:relative}
.laptop{width:100%;max-width:540px;margin-inline:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.45))}
.laptop .screen{border:10px solid #0c211e;border-radius:16px 16px 4px 4px;aspect-ratio:16/10}
.laptop-base{height:16px;background:linear-gradient(#12433c,#062420);border-radius:0 0 12px 12px;margin-inline:-4%;box-shadow:inset 0 3px 6px rgba(0,0,0,.4)}
.laptop-base::after{content:"";display:block;width:16%;height:5px;background:#05211d;border-radius:0 0 8px 8px;margin-inline:auto}
.float-slow{animation:floaty 6s ease-in-out infinite}
.float-fast{animation:floaty 4.5s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.phone{position:absolute;inset-block-end:-24px;inset-inline-start:-6px;width:150px;filter:drop-shadow(0 24px 44px rgba(0,0,0,.5))}
.phone .screen{border:7px solid #0c211e;border-radius:26px;aspect-ratio:9/19}
.phone .screen::before{content:"";position:absolute;top:8px;inset-inline-start:50%;transform:translateX(-50%);width:44px;height:6px;background:#0c211e;border-radius:6px;z-index:3}
.offline-pill{position:absolute;top:8px;inset-inline-start:-4px;background:#fff;color:var(--ink);font-weight:800;font-size:13.5px;
  padding:9px 15px;border-radius:100px;box-shadow:var(--shadow);display:flex;align-items:center;gap:8px;animation:floaty 5s ease-in-out infinite}
.offline-pill .ic{stroke:var(--accent)}
/* لقطة شاشة حقيقية (اختياري) تغطّي الماكيت لو الملف موجود */
.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;z-index:5}

/* ---------- Mock POS UI (inside devices) ---------- */
.app-pos{height:100%;background:#f4faf8;display:flex;flex-direction:column;font-size:11px;text-align:right;direction:rtl}
.pos-top{display:flex;align-items:center;gap:8px;background:#083d38;color:#fff;padding:7px 10px}
.pos-logo{font-weight:800;font-size:12px}.pos-logo b{color:#5fe6cf}
.pos-store{font-size:9.5px;color:#a9ccc5}
.pos-online{margin-inline-start:auto;font-size:9px;color:#3ff0b0;font-weight:700}
.pos-body{flex:1;display:grid;grid-template-columns:1.6fr 1fr;gap:7px;padding:8px}
.cats{display:flex;gap:5px;margin-bottom:7px;flex-wrap:wrap}
.cats span{background:#e2f4f0;color:#2c6b60;padding:3px 9px;border-radius:8px;font-size:9px;font-weight:700}
.cats span.on{background:var(--grad);color:#fff}
.items{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.it{background:#fff;border-radius:9px;padding:8px 5px;text-align:center;box-shadow:0 3px 8px rgba(6,40,36,.06)}
.it i{font-size:17px;font-style:normal;display:block;margin-bottom:3px}
.it b{display:block;font-size:9px;color:#1f3b35;font-weight:700}
.it em{font-style:normal;color:var(--primary);font-weight:800;font-size:9.5px}
.pos-cart{background:#fff;border-radius:11px;padding:9px;box-shadow:0 4px 12px rgba(6,40,36,.08);display:flex;flex-direction:column}
.pos-cart h4{font-size:10px;color:#1f3b35;margin-bottom:6px}
.pos-cart .line{display:flex;justify-content:space-between;font-size:9.5px;color:#48645d;padding:3px 0;border-bottom:1px dashed #edf4f1}
.pos-cart .line b{color:#1f3b35}
.pos-cart .tot{display:flex;justify-content:space-between;margin-top:auto;padding-top:7px;font-weight:800;color:var(--ink);font-size:12px}
.pos-cart .pay{background:var(--accent);color:#fff;text-align:center;padding:7px;border-radius:9px;font-weight:800;margin-top:7px;font-size:11px}
.app-pos.small .dash{flex:1;padding:9px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto 1fr;gap:7px;background:#f4faf8}
/* قائمة أحدث الفواتير — بتملأ باقي شاشة لوحة التحكم بدل الفراغ */
.dash-list{grid-column:1/-1;background:#fff;border-radius:10px;padding:8px 10px;box-shadow:0 3px 9px rgba(6,40,36,.06);display:flex;flex-direction:column;gap:3px;overflow:hidden}
.dl-head{display:flex;justify-content:space-between;align-items:center;font-size:9.5px;color:#1f3b35;font-weight:800;margin-bottom:2px}
.dl-head span{color:#7d968f;font-weight:700;font-size:8px;background:#eef6f3;padding:1px 8px;border-radius:10px}
.dl-row{display:flex;justify-content:space-between;font-size:8.5px;color:#48645d;font-weight:600;border-bottom:1px dashed #eef4f1;padding:2.5px 0}
.dl-row:last-child{border-bottom:0}
.dl-row b{color:var(--primary);font-weight:800}
.dk{background:#fff;border-radius:10px;padding:9px;box-shadow:0 3px 9px rgba(6,40,36,.06)}
.dk em{font-style:normal;color:#6f8a83;font-size:9px;display:block}
.dk b{color:var(--ink);font-size:15px}
.dk.green b{color:var(--accent)}
.dash-chart{grid-column:1/-1;display:flex;align-items:flex-end;gap:6px;height:60px;background:#fff;border-radius:10px;padding:9px;box-shadow:0 3px 9px rgba(6,40,36,.06)}
.dash-chart span{flex:1;height:var(--h);background:var(--grad);border-radius:5px 5px 2px 2px;opacity:.85}

.app-phone{height:100%;background:#f4faf8;display:flex;flex-direction:column;font-size:11px;padding:8px 9px 12px;direction:rtl}
.ph-top{display:flex;align-items:center;gap:6px;font-weight:800;color:var(--ink);font-size:13px;padding-bottom:9px}
.ph-top b{color:var(--primary)}.ph-top span{margin-inline-start:auto;color:var(--accent);font-size:9px}
.ph-list{display:flex;flex-direction:column;gap:6px;flex:1}
.ph-list .row{background:#fff;border-radius:9px;padding:8px 10px;display:flex;justify-content:space-between;box-shadow:0 3px 8px rgba(6,40,36,.06);font-size:10.5px;color:#2f4a44;font-weight:600}
.ph-list .row b{color:var(--primary);font-weight:800}
.ph-total{display:flex;justify-content:space-between;font-weight:800;color:var(--ink);padding:9px 4px;font-size:12.5px}
.ph-pay{background:var(--grad);color:#fff;text-align:center;padding:10px;border-radius:11px;font-weight:800;font-size:12px}

/* ---------- Mock main-menu UI (شبكة أيقونات القائمة الرئيسية) ---------- */
.app-menu{height:100%;background:#f4faf8;display:flex;flex-direction:column;direction:rtl}
.mtop{display:flex;align-items:center;gap:8px;background:#083d38;color:#fff;padding:7px 10px}
.mgrid{flex:1;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(3,1fr);gap:6px;padding:9px;overflow:hidden}
/* عناصر واقعية للماكيت: نقاط النافذة + شريط الحالة السفلي + لمعة الزجاج */
.win-dots{display:flex;gap:4px;align-items:center}
.win-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.28)}
.mstatus{display:flex;justify-content:space-between;background:#eaf4f0;color:#5c7a72;font-size:7.5px;font-weight:700;padding:4px 12px;border-top:1px solid #dfeee9}
.glare{position:absolute;inset:0;pointer-events:none;z-index:6;background:linear-gradient(115deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 20%,transparent 34%)}
.laptop .screen::after{content:"";position:absolute;top:3px;inset-inline-start:50%;transform:translateX(50%);width:5px;height:5px;border-radius:50%;background:#16453d;box-shadow:0 0 0 1.5px rgba(0,0,0,.35);z-index:7}
.phone .screen::after{content:"";position:absolute;bottom:5px;inset-inline-start:50%;transform:translateX(50%);width:36%;height:3px;border-radius:3px;background:rgba(7,26,23,.28);z-index:7}
/* شريط حالة الموبايل (ساعة + شبكة + بطارية) وشريط التنقل السفلي */
.ph-status{display:flex;justify-content:space-between;align-items:center;background:#083d38;color:#d9ece8;padding:6px 12px 0;font-size:8.5px;font-weight:700}
.ph-status .st-ics{display:flex;gap:4px;align-items:center}
.ph-status svg{width:12px;height:9px;display:block}
.ph-status.onlight{background:transparent;color:#1f3b35;padding:0 4px 6px}
.ph-nav{display:flex;justify-content:space-around;align-items:center;background:#fff;border-top:1px solid #e2efeb;padding:6px 0 9px}
.ph-nav svg{width:15px;height:15px;fill:none;stroke:#8aa39c;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ph-nav svg:first-child{stroke:var(--primary)}
.mtile{background:#fff;border-radius:9px;padding:9px 3px;display:flex;flex-direction:column;align-items:center;gap:5px;box-shadow:0 3px 8px rgba(6,40,36,.06);transition:.25s}
.mtile:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(15,156,138,.16)}
.mtile svg{width:20px;height:20px;fill:none;stroke:var(--primary);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mtile span{font-size:7.5px;font-weight:700;color:#2f4a44;text-align:center;line-height:1.15}
.app-menu.ph .mgrid{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:7px;padding:10px}
.app-menu.ph .mtile{padding:12px 3px}
.app-menu.ph .mtile svg{width:22px;height:22px}
.app-menu.ph .mtile span{font-size:8.5px}
/* أيقونات كروت المميزات وقائمة الجولة */
.fi svg,.di svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.feat .fi{color:var(--primary)}
.feat:hover .fi{color:#fff}
.feat.accent .fi{color:#fff}
.deck-btn .di{color:var(--primary)}
.deck-btn.is-active .di{color:#fff}

/* ---------- Stats ---------- */
.stats{background:var(--bg-soft);padding-block:44px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat{text-align:center;padding:20px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.stat b{display:block;font-size:clamp(28px,3.6vw,42px);font-weight:900;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{color:var(--muted);font-weight:600;font-size:15px}

/* ---------- Section head ---------- */
.sec-head{text-align:center;max-width:680px;margin-inline:auto;margin-bottom:48px}
.sec-head .tag{display:inline-block;background:#e6f5f1;color:var(--primary);font-weight:800;font-size:13.5px;padding:7px 16px;border-radius:100px;margin-bottom:16px}
.sec-head h2{font-size:clamp(26px,3.6vw,42px);font-weight:900;letter-spacing:-.5px}
.sec-head p{color:var(--muted);font-size:17px;margin-top:14px}
.sec-head.light h2,.sec-head.light .tag{color:inherit}

/* ---------- Showcase (interactive deck) ---------- */
.showcase{padding-block:90px;background:#fff}
.showcase-stage{display:grid;grid-template-columns:1fr 1.15fr;gap:44px;align-items:center}
.deck-nav{display:flex;flex-direction:column;gap:14px}
.deck-btn{width:100%;display:flex;align-items:center;gap:14px;text-align:right;background:#fff;border:1.5px solid var(--line);
  border-radius:18px;padding:16px 18px;cursor:pointer;position:relative;overflow:hidden;transition:.3s;font-family:var(--font)}
.deck-btn:hover{border-color:#bfe2db;transform:translateX(-4px)}
.deck-btn .di{font-size:26px;width:52px;height:52px;display:grid;place-items:center;background:var(--bg-soft);border-radius:14px;flex-shrink:0;transition:.3s}
.deck-btn .dt{display:flex;flex-direction:column}
.deck-btn .dt b{font-size:17px;color:var(--ink);font-weight:800}
.deck-btn .dt em{font-style:normal;color:var(--muted);font-size:14px;font-weight:500}
.deck-btn .prog{position:absolute;inset-block-end:0;inset-inline-start:0;height:3px;width:0;background:var(--grad)}
.deck-btn.is-active{border-color:transparent;background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;border:1.5px solid transparent;box-shadow:var(--shadow)}
.deck-btn.is-active .di{background:var(--grad);transform:scale(1.05)}
.deck-btn.is-active .dt b{color:var(--primary)}
.deck-btn.is-active .prog{width:var(--p,0)}

.stage-device{position:relative;display:grid;place-items:center;padding:30px}
.stage-frame{position:relative;width:100%;max-width:440px;aspect-ratio:16/11;background:#083d38;border-radius:22px;
  border:12px solid #052e29;box-shadow:var(--shadow-lg);overflow:hidden;z-index:2}
.stage-glow{position:absolute;inset:6% 10%;background:var(--grad);filter:blur(60px);opacity:.4;z-index:1;border-radius:50%}
.stage-screen{position:absolute;inset:0;padding:14px;background:#f4faf8;direction:rtl;opacity:0;transform:scale(1.04) translateY(10px);transition:.5s ease;pointer-events:none;display:flex;flex-direction:column}
.stage-screen.is-active{opacity:1;transform:none;pointer-events:auto}
.ss-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.ss-head b{font-size:16px;color:var(--ink)}
.ss-head span{font-size:12px;color:var(--muted);background:#e6f5f1;padding:4px 12px;border-radius:20px;font-weight:700}
.ss-pos{display:grid;grid-template-columns:1.4fr 1fr;gap:10px;flex:1}
.ss-items{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-content:start}
.ss-items span{background:#fff;border-radius:11px;padding:14px 4px;text-align:center;font-size:12px;font-weight:700;color:#2f4a44;box-shadow:0 4px 10px rgba(6,40,36,.06)}
.ss-bill{background:#fff;border-radius:13px;padding:12px;display:flex;flex-direction:column;box-shadow:0 5px 14px rgba(6,40,36,.08)}
.ss-bill .l{display:flex;justify-content:space-between;font-size:12.5px;color:#48645d;padding:5px 0;border-bottom:1px dashed #edf4f1;font-weight:600}
.ss-bill .l.tt{margin-top:auto;border:0;font-weight:800;color:var(--ink);font-size:15px;padding-top:9px}
.ss-btn{background:var(--accent);color:#fff;text-align:center;padding:10px;border-radius:11px;font-weight:800;margin-top:8px}
.ss-tables{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;flex:1;align-content:center}
.tb{background:#fff;border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px 4px;font-size:19px;font-weight:900;color:#2f4a44;box-shadow:0 4px 10px rgba(6,40,36,.06);border:2px solid transparent}
.tb em{font-style:normal;font-size:10px;font-weight:700;margin-top:3px;color:var(--muted)}
.tb.busy{background:#fff2f2;border-color:#ffd4d4;color:#e0434a}.tb.busy em{color:#e0434a}
.tb.book{background:#fff8ea;border-color:#ffe6b0;color:#d98c00}.tb.book em{color:#d98c00}
.ss-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.kpi{background:#fff;border-radius:13px;padding:12px;box-shadow:0 4px 10px rgba(6,40,36,.06)}
.kpi em{font-style:normal;color:#6f8a83;font-size:11px;display:block;margin-bottom:3px}
.kpi b{font-size:19px;color:var(--ink)}
.kpi.green b{color:var(--accent)}
.ss-chart{background:#fff;border-radius:13px;flex:1;display:flex;align-items:flex-end;gap:8px;padding:14px;box-shadow:0 4px 10px rgba(6,40,36,.06)}
.ss-chart span{flex:1;height:var(--h);background:var(--grad);border-radius:6px 6px 3px 3px;opacity:.9;animation:growBar .8s ease both}
@keyframes growBar{from{height:6px;opacity:.3}}
.ss-stock{display:flex;flex-direction:column;gap:8px;flex:1}
.sr{background:#fff;border-radius:11px;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 4px 10px rgba(6,40,36,.06);font-weight:700;color:#2f4a44;font-size:13.5px}
.sr em{font-style:normal;font-size:11.5px;font-weight:800;padding:4px 12px;border-radius:20px}
.sr .ok{background:#e3f9ef;color:#0aa76a}
.sr .low{background:#fff6e5;color:#d98c00}
.sr .out{background:#ffeaea;color:#e0434a}

/* ---------- Features grid ---------- */
.features{padding-block:90px;background:var(--bg-soft)}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feat{background:#fff;border-radius:var(--radius-lg);padding:28px 24px;box-shadow:var(--shadow-sm);border:1px solid var(--line);transition:.3s;position:relative;overflow:hidden}
.feat::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:4px;background:var(--grad);transform:scaleX(0);transform-origin:right;transition:.35s}
.feat:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.feat:hover::before{transform:scaleX(1)}
.feat .fi{width:60px;height:60px;border-radius:16px;background:var(--bg-soft);display:grid;place-items:center;font-size:28px;margin-bottom:16px;transition:.3s}
.feat:hover .fi{background:var(--grad);transform:rotate(-6deg) scale(1.05)}
.feat h3{font-size:19px;margin-bottom:8px}
.feat p{color:var(--muted);font-size:15px}
.feat.accent{background:linear-gradient(150deg,#083d38,#0e5a50);color:#fff}
.feat.accent h3{color:#fff}.feat.accent p{color:#bcd6cf}
.feat.accent .fi{background:rgba(255,255,255,.12)}
.feat.accent::before{transform:scaleX(1);background:var(--gold)}

/* ---------- Gallery ---------- */
.gallery{padding-block:90px;background:#fff;overflow:hidden}
.gallery-wrap{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:0;padding-block:20px}
.device.lg.laptop{max-width:640px}
.device.lg.phone{position:relative;inset:auto;width:210px;margin-inline-start:-70px;margin-bottom:14px;z-index:3}
.device.lg .app-pos.small{font-size:12px}

/* ---------- Why (dark) ---------- */
.why{padding-block:90px;background:linear-gradient(160deg,#04211d,#0a4a43);color:#fff}
.why .sec-head h2{color:#fff}
.why .sec-head .tag{background:rgba(255,255,255,.1);color:#86e6d6}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.why-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);padding:28px 24px;transition:.3s}
.why-card:hover{background:rgba(255,255,255,.09);transform:translateY(-6px)}
.why-card .wn{font-size:34px;font-weight:900;background:linear-gradient(120deg,#5fe6cf,#ffd98a);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:10px}
.why-card h3{color:#fff;font-size:19px;margin-bottom:8px}
.why-card p{color:#bcd6cf;font-size:15px}

/* ---------- Steps ---------- */
.steps{padding-block:90px;background:var(--bg-soft)}
.steps-line{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative}
.steps-line::before{content:"";position:absolute;top:26px;inset-inline:8%;height:2px;background:linear-gradient(90deg,var(--primary),var(--gold));opacity:.3}
.step{text-align:center;position:relative}
.step .sn{width:54px;height:54px;border-radius:50%;background:var(--grad);color:#fff;font-weight:900;font-size:22px;display:grid;place-items:center;margin-inline:auto;margin-bottom:16px;box-shadow:0 10px 24px rgba(15,156,138,.35);position:relative;z-index:2}
.step h3{font-size:18px;margin-bottom:6px}
.step p{color:var(--muted);font-size:14.5px;padding-inline:10px}

/* ---------- CTA ---------- */
.cta{padding-block:90px;background:linear-gradient(135deg,#0b8073 0%,#0a5f56 100%);position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(245,165,36,.22),transparent 42%),radial-gradient(circle at 80% 80%,rgba(255,255,255,.12),transparent 40%)}
.cta-inner{position:relative;text-align:center;color:#fff;max-width:720px}
.cta-inner h2{font-size:clamp(28px,4vw,46px);font-weight:900;color:#fff}
.cta-inner p{font-size:18px;color:#dcefeb;margin:14px 0 30px}
/* كروت التواصل — مصر والسعودية */
.contact-cards{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.contact-card{background:#fff;border-radius:20px;padding:18px 20px 16px;flex:0 1 300px;box-shadow:0 18px 44px rgba(0,0,0,.2);text-align:right;transition:transform .25s}
.contact-card:hover{transform:translateY(-4px)}
.cc-head{display:flex;justify-content:space-between;align-items:center}
.cc-country{font-weight:900;color:var(--ink);font-size:16.5px}
.cc-badge{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:800;color:#0aa76a;background:#e3f9ef;padding:3px 10px;border-radius:20px}
.cc-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.cc-num{display:block;direction:ltr;text-align:center;font-size:20px;font-weight:800;color:var(--ink-2);letter-spacing:.4px;margin:12px 0 14px;background:var(--bg-soft);border-radius:12px;padding:8px}
.cc-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cc-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-weight:800;font-size:14px;padding:10px;border-radius:12px;transition:.2s}
.cc-btn svg{width:17px;height:17px}
.cc-wa{background:var(--accent);color:#fff;box-shadow:0 8px 18px rgba(22,184,119,.3)}
.cc-wa:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(22,184,119,.42)}
.cc-call{background:var(--bg-soft);color:var(--ink-2);border:1.5px solid var(--line)}
.cc-call:hover{background:#e6f3ef}
.site-link{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:800;font-size:15px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);padding:10px 24px;border-radius:100px;transition:.2s}
.site-link:hover{background:rgba(255,255,255,.26);transform:translateY(-2px)}
.site-link svg{width:17px;height:17px}
@media (max-width:640px){
  .contact-card{flex:1 1 100%;max-width:360px}
  .cc-num{font-size:18px}
}

/* ---------- Footer ---------- */
.site-footer{background:var(--dark);color:#9fb8b2;padding-block:56px 22px;position:relative}
.site-footer::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(23,184,166,.55),transparent)}
/* شريط التحميل أعلى الفوتر */
.foot-download{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  padding:28px 34px;margin-bottom:46px;border-radius:24px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#0c5c52,#08403a);border:1px solid rgba(255,255,255,.1);box-shadow:0 22px 50px rgba(0,0,0,.32)}
.foot-download::after{content:"";position:absolute;inset-block:-60%;inset-inline-start:-6%;width:260px;
  background:radial-gradient(circle,rgba(245,165,36,.2),transparent 70%);pointer-events:none}
.foot-download .fd-text{position:relative;z-index:1}
.foot-download .fd-text h3{color:#fff;font-size:23px;font-weight:900;margin-bottom:6px}
.foot-download .fd-text span{color:#bcd6cf;font-size:15px}
.foot-download .fd-actions{display:flex;gap:12px;flex-wrap:wrap;position:relative;z-index:1}
@media (max-width:640px){
  .foot-download{flex-direction:column;align-items:stretch;text-align:center;padding:24px 18px}
  .foot-download .fd-actions{flex-direction:column}
  .foot-download .fd-actions .btn{width:100%}
}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:36px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.09)}
.foot-brand img{height:40px;margin-bottom:16px}
.foot-brand p{font-size:14.5px;max-width:360px;color:#8fa8a2;line-height:1.85}
.foot-col h4{color:#fff;font-size:15px;font-weight:800;margin-bottom:16px;letter-spacing:.3px;position:relative;padding-bottom:10px}
.foot-col h4::after{content:"";position:absolute;inset-block-end:0;inset-inline-start:0;width:26px;height:2.5px;border-radius:2px;
  background:linear-gradient(90deg,var(--primary),var(--gold))}
.foot-col a{display:block;width:fit-content;color:#9fb8b2;font-size:14.5px;padding-block:6px;transition:color .2s,transform .2s}
.foot-col a:hover{color:#6fe6d0;transform:translateX(-4px)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding-top:22px}
.foot-bottom p{font-size:13.5px;color:#7f978f;margin:0}
.seo-line{font-size:12.5px;color:#5f7a73;max-width:62%;line-height:1.9}
@media (max-width:640px){.seo-line{max-width:100%}}

/* ---------- FAQ ---------- */
.faq{padding-block:80px;background:var(--bg-soft)}
.faq-list{max-width:840px;margin-inline:auto;display:flex;flex-direction:column;gap:12px}
.faq-item{border:1.5px solid var(--line);border-radius:16px;background:#fff;transition:.25s}
.faq-item[open]{border-color:#bfe2db;box-shadow:var(--shadow-sm)}
.faq-item summary{list-style:none;cursor:pointer;padding:18px 20px;font-weight:800;color:var(--ink);font-size:16.5px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:26px;line-height:1;color:var(--primary);font-weight:400;transition:transform .25s;flex-shrink:0}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{padding:0 20px 18px;color:var(--muted);font-size:15px;margin:0;line-height:1.75}
@media (max-width:520px){
  .faq{padding-block:56px}
  .faq-item summary{font-size:15px;padding:15px 16px}
  .faq-item p{font-size:14px;padding:0 16px 15px}
}

/* ---------- Reveal animation ----------
   عناصر الأنيميشن تتخفي فقط لو JavaScript شغّال (كلاس .js على html)،
   فلو الـ JS متعطّل أو فشل يفضل كل المحتوى ظاهر — ومعاه شبكة أمان في main.js */
.js .reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr;text-align:center}
  .hero-copy{order:1}.hero-visual{order:2;height:400px;margin-top:20px}
  .hero .lead{margin-inline:auto}.hero-actions,.hero-badges{justify-content:center}
  .showcase-stage{grid-template-columns:1fr;gap:30px}
  .stage-device{order:-1}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .steps-line{grid-template-columns:repeat(2,1fr);gap:30px}
  .steps-line::before{display:none}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1024px){
  .main-nav,.header-cta{display:none}
  .main-nav.open{display:flex;position:absolute;inset-block-start:100%;inset-inline:12px;flex-direction:column;align-items:stretch;
    background:#fff;padding:16px;border-radius:18px;box-shadow:var(--shadow);gap:6px;margin:0}
  .main-nav.open a{padding:11px 14px;border-radius:10px;color:var(--ink-2);font-size:15.5px}
  .main-nav.open a:hover{background:var(--bg-soft);color:var(--primary)}
  /* أزرار التحميل تظهر جوّه المنيو المنسدل على الموبايل/التابلت */
  .main-nav.open .menu-dl{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding-top:12px;border-top:1px solid var(--line)}
  .main-nav.open .menu-dl .btn{width:100%;padding:13px;font-size:15px}
  .nav-toggle{display:flex}
  /* الهيدر أبيض على الموبايل → الشعار ملوّن مش أبيض */
  .site-header{background:rgba(255,255,255,.92);backdrop-filter:blur(12px)}
  .brand img{height:34px}
  .brand .logo-on-dark{display:none}
  .brand .logo-on-light{display:block}
  .hero{padding-block:120px 70px}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-wrap{flex-direction:column;align-items:center;gap:0}
  .device.lg.phone{margin:-40px 0 0;width:180px}
}
@media (max-width:520px){
  .feat-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .steps-line{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero-visual{height:380px}
  .phone{width:138px;inset-block-end:0}
  /* ماكيت الموبايل: أيقونات وبلاطات أصغر عشان الأعمدة التلاتة تتقفّل جوّه الشاشة الضيقة */
  .app-menu.ph .mgrid{gap:5px;padding:7px}
  .app-menu.ph .mtile{padding:8px 2px;gap:3px}
  .app-menu.ph .mtile svg{width:18px;height:18px}
  .app-menu.ph .mtile span{font-size:6.5px}
  /* كروت أصغر وأنسب على الموبايل */
  .feat{padding:16px 15px;border-radius:16px}
  .feat .fi{width:44px;height:44px;border-radius:12px;margin-bottom:10px}
  .feat .fi svg{width:23px;height:23px}
  .feat h3{font-size:16px;margin-bottom:5px}
  .feat p{font-size:13px;line-height:1.6}
  .feat-grid{gap:12px}
  .why-card{padding:20px 17px}
  .why-card .wn{font-size:27px}
  .why-card h3{font-size:16.5px}
  .why-grid{gap:12px}
  .stat{padding:14px}
  .step .sn{width:46px;height:46px;font-size:19px}
  .sec-head{margin-bottom:30px}
  .features,.why,.steps,.showcase,.gallery{padding-block:56px}
  .btn-lg{width:100%}
  .hero-actions{flex-direction:column}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
}