/* الموقع التعريفي — الطيب إديو (نفس هوية تطبيقات الطيب) */
:root{
  color-scheme:dark;
  --bg:#060919;--bg2:#0A0F26;--surface:#111737;--surface2:#171F47;
  --line:rgba(129,140,248,.16);--line2:rgba(129,140,248,.3);
  --text:#EEF1FF;--muted:#A3ABD6;--faint:#6F78A8;
  --indigo:#4F46E5;--violet:#7C3AED;--cyan:#06B6D4;--sky:#0EA5E9;
  --emerald:#10B981;--amber:#F59E0B;--rose:#F43F5E;--pink:#EC4899;
  --hero:linear-gradient(135deg,#1E1B6B 0%,#4F46E5 38%,#7C3AED 72%,#06B6D4 100%);
  --btn:linear-gradient(90deg,#4F46E5,#7C3AED);
  --glow:0 0 0 1px rgba(99,102,241,.35),0 10px 40px -8px rgba(79,70,229,.6),0 0 60px -20px rgba(6,182,212,.55);
  --display:'Cairo',system-ui,sans-serif;
  --body:'IBM Plex Sans Arabic','Cairo',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{background:var(--bg)}
body{margin:0;color:var(--text);font-family:var(--body);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--display);line-height:1.25;margin:0 0 .4em;text-wrap:balance}
p{margin:0 0 1em}
a{color:#A5B4FC;text-decoration:none}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
#flow{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.page{position:relative;z-index:1}
.wrap{width:min(1160px,100% - 32px);margin-inline:auto}
.grad{background:linear-gradient(90deg,#A5B4FC,#C4B5FD 40%,#67E8F9);-webkit-background-clip:text;background-clip:text;color:transparent}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;padding:12px 22px;min-height:48px;font:700 16px var(--display);cursor:pointer;color:#fff;background:var(--btn);box-shadow:var(--glow);transition:transform .15s,filter .15s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.1)}
.btn:focus-visible,.feat:focus-visible,.chip-close:focus-visible{outline:2px solid #67E8F9;outline-offset:3px}
.btn.ghost{background:rgba(99,102,241,.12);box-shadow:0 0 0 1px var(--line2);color:#C7D2FE}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;backdrop-filter:blur(14px);background:rgba(6,9,25,.7);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:20px;min-height:64px}
.logo{display:flex;align-items:center;gap:10px;font:800 18px var(--display);color:var(--text)}
.logo img{filter:drop-shadow(0 0 12px rgba(99,102,241,.7))}
.links{display:flex;gap:22px;margin-inline-start:auto}
.links a{color:var(--muted);font-weight:600}
.nav .btn{min-height:40px;padding:8px 16px;font-size:14px}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:64px 0 30px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border-radius:999px;font-size:13px;font-weight:600;color:#C7D2FE;background:rgba(99,102,241,.14);border:1px solid var(--line2);margin-bottom:18px}
.pill b{width:8px;height:8px;border-radius:50%;background:var(--emerald);box-shadow:0 0 10px var(--emerald);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.35}}
.hero h1{font-size:clamp(32px,5vw,56px);font-weight:900}
.lead{font-size:18px;color:var(--muted);max-width:590px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 14px}
.ticker{display:flex;gap:10px;flex-wrap:wrap;color:var(--faint);font-size:13px}
.ticker span{padding:4px 10px;border-radius:10px;background:rgba(17,23,55,.7);border:1px solid var(--line)}

/* phone */
.phone{width:300px;margin:auto;border-radius:44px;padding:11px;background:linear-gradient(160deg,#232c62,#0c1130);box-shadow:0 0 0 1px rgba(165,180,252,.25),0 40px 90px -20px rgba(79,70,229,.75),0 0 90px -10px rgba(6,182,212,.35);position:relative}
.phone.float{transform:rotate(-4deg);animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(-4deg) translateY(-12px)}}
.notch{height:22px;display:grid;place-items:center}.notch span{width:84px;height:6px;border-radius:6px;background:rgba(255,255,255,.14)}
.screen{background:var(--bg);border-radius:32px;padding:12px;height:560px;overflow:hidden;position:relative}
.scr-scroll{height:100%;overflow-y:auto;scrollbar-width:none}.scr-scroll::-webkit-scrollbar{display:none}
.appbar{display:flex;align-items:center;justify-content:space-between;font:700 13px var(--display);color:var(--muted);padding:2px 4px 10px}
.appbar b{color:var(--text);font-size:15px}
.card{background:linear-gradient(180deg,rgba(24,32,70,.9),rgba(17,23,55,.9));border:1px solid var(--line);border-radius:18px}
.hcard{background:var(--hero);border-radius:22px;padding:16px;box-shadow:0 14px 34px -12px rgba(79,70,229,.85);margin-bottom:10px;position:relative;overflow:hidden}
.hcard:after{content:'';position:absolute;inset-inline-end:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.12)}
.hcard small{color:rgba(255,255,255,.82);font-size:12px}
.hcard .big{font:900 30px var(--display);margin:2px 0 6px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips span{font-size:11px;padding:2px 9px;border-radius:999px;background:rgba(255,255,255,.18)}
.row{display:flex;align-items:center;gap:10px;padding:10px;border-radius:16px;background:var(--surface);border:1px solid var(--line);margin-bottom:8px}
.row .t{flex:1;min-width:0}.row b{display:block;font-size:13px}.row small{color:var(--faint);font-size:11px}
.row .v{font:800 14px var(--display)}
.dot{width:34px;height:34px;border-radius:12px;flex:none;display:grid;place-items:center;font-size:15px;color:#fff;font-weight:800}
.g1{background:linear-gradient(135deg,#F43F5E,#F97316)}.g2{background:linear-gradient(135deg,#06B6D4,#6366F1)}.g3{background:linear-gradient(135deg,#10B981,#0EA5E9)}.g4{background:linear-gradient(135deg,#8B5CF6,#EC4899)}.g5{background:linear-gradient(135deg,#F59E0B,#F43F5E)}.g6{background:linear-gradient(135deg,#4F46E5,#06B6D4)}
.sec{font:700 13px var(--display);color:#C7D2FE;margin:14px 4px 8px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile{padding:10px 12px}.tile small{color:var(--faint);font-size:11px;display:block}.tile b{font:800 16px var(--display)}.tile em{display:block;font-style:normal;font-size:10.5px;color:var(--faint)}
.pos{color:#6EE7B7}.neg{color:#FDA4AF}
.ph-btn{margin-top:10px;text-align:center;padding:12px;border-radius:14px;background:var(--btn);font:800 14px var(--display);box-shadow:var(--glow)}
.bar{height:8px;border-radius:8px;background:rgba(129,140,248,.14);overflow:hidden;margin-top:6px}.bar i{display:block;height:100%;border-radius:8px}
.bridge .row{padding:8px 10px}
.bridge .track{height:6px;border-radius:6px;background:rgba(129,140,248,.12);margin-top:5px}
.bridge .track i{display:block;height:100%;border-radius:6px}

/* sections */
.section{padding:70px 0 10px}
.sec-head{text-align:center;max-width:720px;margin:0 auto 32px}
.sec-head h2{font-size:clamp(26px,3.4vw,40px);font-weight:900}
.sec-head p{color:var(--muted);font-size:17px}
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.feat{all:unset;box-sizing:border-box;cursor:pointer;display:block;padding:22px;border-radius:20px;background:linear-gradient(180deg,rgba(24,32,70,.85),rgba(17,23,55,.85));border:1px solid var(--line);backdrop-filter:blur(8px);transition:transform .2s,box-shadow .2s,border-color .2s;position:relative;overflow:hidden}
.feat:hover{transform:translateY(-5px);box-shadow:var(--glow);border-color:rgba(129,140,248,.5)}
.feat h3{font-size:18px;margin-top:14px}
.feat p{color:var(--muted);font-size:14.5px;margin:0 0 12px}
.feat .ic{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;font-size:22px;font-weight:900;color:#fff}
.feat .open{font:700 13px var(--display);color:#67E8F9;display:inline-flex;gap:6px;align-items:center}
.feat .open:after{content:'←';transition:transform .2s}
.feat:hover .open:after{transform:translateX(-4px)}

/* modal */
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:rgba(3,5,15,.72);backdrop-filter:blur(8px)}
.mbox{display:grid;grid-template-columns:320px 1fr;gap:34px;align-items:center;width:min(880px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:26px;border-radius:26px;background:linear-gradient(160deg,rgba(23,31,71,.97),rgba(10,15,38,.97));border:1px solid var(--line2);box-shadow:var(--glow);animation:pop .35s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{transform:scale(.92) translateY(14px);opacity:0}}
.mtext h3{font-size:26px}
.mtext p{color:var(--muted)}
.mtext ul{padding:0;margin:0 0 18px;list-style:none}
.mtext li{padding:6px 0;color:var(--muted)}.mtext li:before{content:'✓';color:var(--emerald);font-weight:900;margin-inline-end:8px}
.demo-tag{display:inline-block;font-size:12px;color:#FDE68A;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.35);border-radius:8px;padding:2px 10px;margin-bottom:10px}
.chip-close{position:absolute;top:14px;inset-inline-start:14px;width:38px;height:38px;border-radius:12px;border:1px solid var(--line2);background:rgba(99,102,241,.12);color:var(--text);font-size:20px;cursor:pointer}
.mbox{position:relative}
.modal[hidden],[hidden]{display:none!important}

/* pricing + download */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,340px));justify-content:center;gap:18px}
.plan{padding:28px;text-align:center;position:relative}
.plan.best{box-shadow:var(--glow);border-color:rgba(129,140,248,.5)}
.plan .tag{position:absolute;top:-12px;inset-inline:0;margin:auto;width:max-content;padding:2px 14px;border-radius:999px;background:var(--hero);font-size:12px;font-weight:800}
.price{font:900 48px var(--display)}.price small{font-size:18px;color:var(--muted)}
.plan ul{list-style:none;padding:0;text-align:start;margin:14px 0 20px}.plan li{padding:6px 0;border-bottom:1px dashed var(--line);color:var(--muted)}.plan li:before{content:'✓';color:var(--emerald);margin-inline-end:8px;font-weight:900}
.plan .btn{width:100%}
.dl{margin-top:26px;padding:24px;display:flex;align-items:center;justify-content:space-between;gap:18px;background:var(--hero);border-radius:22px;box-shadow:var(--glow)}
.dl p{margin:0;color:rgba(255,255,255,.88)}
.dl .btn{background:#fff;color:#312E81;box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.device{font-size:13px;margin-top:8px;color:rgba(255,255,255,.85)}
.contact{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:8px}
.x-unused{margin:40px auto 0;max-width:820px;padding:16px 20px;border-radius:16px;border:1px dashed rgba(245,158,11,.45);background:rgba(245,158,11,.07);color:#FDE68A;font-size:14.5px}
.footer{margin-top:60px;padding:24px 0 30px;border-top:1px solid var(--line);color:var(--faint);text-align:center;font-size:13px}

@media(max-width:960px){.hero{grid-template-columns:1fr;padding-top:36px}.features{grid-template-columns:repeat(2,1fr)}.links{display:none}.nav .btn{margin-inline-start:auto}.mbox{grid-template-columns:1fr;padding:18px}.mbox .phone{transform:scale(.92)}}
@media(max-width:560px){.features{grid-template-columns:1fr}.plans{grid-template-columns:1fr}.dl{flex-direction:column;text-align:center}.cta .btn{flex:1}.phone{width:280px}.screen{height:520px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===================== زرار الوضع ===================== */
.theme-btn{width:40px;height:40px;border-radius:12px;border:1px solid var(--line2);background:rgba(99,102,241,.1);color:var(--text);display:grid;place-items:center;cursor:pointer;transition:transform .2s,background .2s;flex:none}
.theme-btn:hover{transform:rotate(-12deg);background:rgba(99,102,241,.2)}
.theme-btn svg{width:20px;height:20px}
.theme-btn .sun{display:none}
[data-theme="light"] .theme-btn .sun{display:block}
[data-theme="light"] .theme-btn .moon{display:none}
.links{margin-inline-start:auto}
.nav .theme-btn{margin-inline-start:0}
@media(max-width:960px){.nav .theme-btn{margin-inline-start:auto}.nav .btn{margin-inline-start:0}}

/* ===================== الوضع الفاتح ===================== */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F3F5FF;--bg2:#E9ECFF;--surface:#FFFFFF;--surface2:#F1F3FF;
  --line:rgba(79,70,229,.14);--line2:rgba(79,70,229,.28);
  --text:#131936;--muted:#4A5382;--faint:#7C85AF;
  --glow:0 0 0 1px rgba(99,102,241,.22),0 14px 36px -14px rgba(79,70,229,.5);
}
[data-theme="light"] a{color:#4338CA}
[data-theme="light"] .grad{background:linear-gradient(90deg,#4F46E5,#7C3AED 45%,#0891B2);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme="light"] .nav{background:rgba(243,245,255,.82)}
[data-theme="light"] .pill{color:#3730A3;background:rgba(79,70,229,.08)}
[data-theme="light"] .ticker span{background:rgba(255,255,255,.9)}
[data-theme="light"] .btn.ghost{color:#3730A3;background:rgba(79,70,229,.08)}
[data-theme="light"] .card,[data-theme="light"] .feat{background:rgba(255,255,255,.88);box-shadow:0 16px 40px -22px rgba(49,46,129,.45)}
[data-theme="light"] .feat:hover{box-shadow:var(--glow)}
[data-theme="light"] .feat .open{color:#0E7490}
[data-theme="light"] .modal{background:rgba(30,27,75,.35)}
[data-theme="light"] .mbox{background:linear-gradient(160deg,#FFFFFF,#EEF1FF)}
[data-theme="light"] .demo-tag{color:#92400E;background:rgba(245,158,11,.12)}
[data-theme="light"] .chip-close{color:#312E81}
[data-theme="light"] .plan li{border-bottom-color:rgba(79,70,229,.12)}
/* الموبايلات بتفضل غامقة زي الجهاز الحقيقي */
[data-theme="light"] .phone{--bg:#060919;--surface:#111737;--surface2:#171F47;--line:rgba(129,140,248,.16);--line2:rgba(129,140,248,.3);--text:#EEF1FF;--muted:#A3ABD6;--faint:#6F78A8;color:#EEF1FF}
[data-theme="light"] .phone .card{background:linear-gradient(180deg,rgba(24,32,70,.9),rgba(17,23,55,.9));box-shadow:none}
[data-theme="light"] a.btn{color:#fff}
[data-theme="light"] a.btn.ghost{color:#3730A3}
[data-theme="light"] .dl a.btn{color:#312E81}
.plan .tag,.dl,.dl h3{color:#fff}