/* صفحة العرض — CSS فقط (بلا جافاسكربت). خمس تشكيلات ألوان بـ data-theme */
:root{--bg:#07060f;--t0:#f5f3ff;--t1:#c9c4e8;--t2:#8b86ad;--glass:rgba(255,255,255,.055);--bd:rgba(255,255,255,.1);
  --a:#8b5cf6;--b:#ec4899;--c:#22d3ee;--glow:139,92,246}
body[data-theme=ocean]{--a:#0ea5e9;--b:#6366f1;--c:#22d3ee;--glow:14,165,233}
body[data-theme=sunset]{--a:#f97316;--b:#ec4899;--c:#facc15;--glow:249,115,22}
body[data-theme=emerald]{--a:#10b981;--b:#06b6d4;--c:#a3e635;--glow:16,185,129}
body[data-theme=gold]{--a:#f59e0b;--b:#eab308;--c:#fb7185;--glow:245,158,11}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--t0);font-family:Cairo,system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  line-height:1.7;min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{width:min(1120px,100% - 32px);margin-inline:auto}

/* ── الخلفية الحية ── */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;will-change:transform}
.b1{width:520px;height:520px;background:var(--a);top:-160px;right:-120px;animation:float1 18s ease-in-out infinite}
.b2{width:460px;height:460px;background:var(--b);bottom:-180px;left:-140px;animation:float2 22s ease-in-out infinite}
.b3{width:340px;height:340px;background:var(--c);top:40%;left:45%;opacity:.28;animation:float3 26s ease-in-out infinite}
.b4{width:260px;height:260px;background:var(--a);top:65%;right:20%;opacity:.3;animation:float1 30s ease-in-out infinite reverse}
.grid{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px);background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 75%)}
.noise{position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,var(--bg))}
@keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-80px,60px) scale(1.12)}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(90px,-70px) scale(1.15)}}
@keyframes float3{0%,100%{transform:translate(0,0)}33%{transform:translate(-120px,-40px)}66%{transform:translate(80px,50px)}}

/* ── الشريط العلوي ── */
.nav{position:sticky;top:0;z-index:10;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:rgba(7,6,15,.55);border-bottom:1px solid var(--bd)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--a),var(--b));display:grid;grid-template-columns:repeat(3,1fr);
  gap:3px;padding:8px;flex-shrink:0;box-shadow:0 6px 20px rgba(var(--glow),.45)}
.logo i{background:#fff;border-radius:2px;animation:bar 1.6s ease-in-out infinite}
.logo i:nth-child(2){animation-delay:.2s}.logo i:nth-child(3){animation-delay:.4s}
@keyframes bar{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
.nav-links{display:flex;align-items:center;gap:18px;font-size:14px;color:var(--t1)}
.nav-links a:hover{color:var(--t0)}
.nav-cta{padding:8px 16px;border-radius:999px;background:linear-gradient(135deg,var(--a),var(--b));color:#fff!important;font-weight:700}

/* ── البطل ── */
.hero{text-align:center;padding:72px 0 40px;position:relative}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;background:var(--glass);border:1px solid var(--bd);
  font-size:13px;color:var(--t1);backdrop-filter:blur(8px)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 12px var(--c);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.6)}}
.title{font-size:clamp(34px,7vw,72px);font-weight:900;line-height:1.15;margin:22px auto 16px;max-width:900px;letter-spacing:-.5px}
.grad{background:linear-gradient(90deg,#fff 0%,var(--a) 30%,var(--b) 60%,var(--c) 90%,#fff 100%);background-size:250% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shine-text 8s linear infinite}
@keyframes shine-text{to{background-position:250% center}}
.sub{font-size:clamp(16px,2.2vw,20px);color:var(--t1);max-width:680px;margin:0 auto}
.actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 26px;
  border-radius:14px;font-weight:800;font-size:16px;transition:transform .25s,box-shadow .25s,background .25s}
.btn.primary{background:linear-gradient(135deg,var(--a),var(--b));color:#fff;box-shadow:0 10px 34px rgba(var(--glow),.5)}
.btn.primary:hover{transform:translateY(-3px);box-shadow:0 16px 44px rgba(var(--glow),.65)}
.btn.ghost{background:var(--glass);border:1px solid var(--bd);color:var(--t0);backdrop-filter:blur(8px)}
.btn.ghost:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
.btn.big{min-height:56px;padding:0 34px;font-size:17px;margin-top:22px}
.shine{position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg);animation:sweep 3.2s ease-in-out infinite}
@keyframes sweep{0%{left:-60%}55%,100%{left:130%}}
.btn:focus-visible,.nav-links a:focus-visible{outline:3px solid var(--c);outline-offset:3px}

/* ── المدار المتحرك ── */
.orbit{position:relative;width:min(340px,80vw);aspect-ratio:1;margin:46px auto 0}
.ring{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(255,255,255,.16)}
.r1{animation:spin 28s linear infinite}.r2{inset:16%;border-style:solid;border-color:rgba(var(--glow),.35);animation:spin 18s linear infinite reverse}
.r3{inset:32%;border-color:rgba(255,255,255,.12);animation:spin 12s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.core{position:absolute;inset:38%;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--c),var(--a) 55%,var(--b));
  display:grid;place-items:center;font-size:clamp(26px,6vw,38px);box-shadow:0 0 60px rgba(var(--glow),.7),inset 0 0 20px rgba(255,255,255,.3);
  animation:breathe 4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.sat{position:absolute;width:52px;height:52px;margin:-26px;border-radius:16px;display:grid;place-items:center;font-size:24px;
  background:var(--glass);border:1px solid var(--bd);backdrop-filter:blur(10px);box-shadow:0 8px 24px rgba(0,0,0,.35);animation:bob 5s ease-in-out infinite}
.s1{top:6%;left:50%}.s2{top:50%;left:94%;animation-delay:-1.2s}.s3{top:94%;left:50%;animation-delay:-2.4s}.s4{top:50%;left:6%;animation-delay:-3.6s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ── الأرقام ── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:30px auto 10px}
.stat{text-align:center;padding:22px 12px;border-radius:18px;background:var(--glass);border:1px solid var(--bd);backdrop-filter:blur(10px)}
.stat b{display:block;font-size:clamp(26px,4vw,38px);font-weight:900;background:linear-gradient(135deg,var(--a),var(--c));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{color:var(--t2);font-size:14px}

/* ── المميزات ── */
.features{padding:60px 0 20px}
.h2{font-size:clamp(26px,4vw,38px);font-weight:900;text-align:center;margin-bottom:30px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
@media (min-width:900px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{position:relative;padding:26px 22px;border-radius:20px;background:var(--glass);border:1px solid var(--bd);backdrop-filter:blur(10px);
  transition:transform .3s,border-color .3s,box-shadow .3s;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(var(--glow),.7),transparent 50%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.4)}
.card:hover::before{opacity:1}
.ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;font-size:26px;margin-bottom:14px;
  background:linear-gradient(135deg,rgba(var(--glow),.35),rgba(255,255,255,.05));border:1px solid var(--bd)}
.card h3{font-size:18px;font-weight:800;margin-bottom:6px}
.card p{color:var(--t1);font-size:14.5px}

/* ── من نحن ── */
.about{padding:60px 0 80px}
.about-card{text-align:center;padding:44px 26px;border-radius:26px;background:linear-gradient(135deg,rgba(var(--glow),.18),rgba(255,255,255,.03));
  border:1px solid var(--bd);backdrop-filter:blur(12px)}
.about-card p{color:var(--t1);font-size:16.5px;max-width:760px;margin:0 auto;white-space:pre-line}

/* ── التذييل ── */
.foot{border-top:1px solid var(--bd);padding:22px 0;color:var(--t2);font-size:13.5px}
.foot-in{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.links{display:flex;gap:16px}.links a:hover{color:var(--t0)}

/* ── الظهور المتتابع ── */
.rise{opacity:0;transform:translateY(24px);animation:rise .8s cubic-bezier(.2,.8,.2,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.18s}.d3{animation-delay:.32s}.d4{animation-delay:.46s}.d5{animation-delay:.6s}
@keyframes rise{to{opacity:1;transform:none}}
.pop{opacity:0;animation:pop .7s cubic-bezier(.2,.8,.2,1) forwards}
.n0{animation-delay:.7s}.n1{animation-delay:.8s}.n2{animation-delay:.9s}.n3{animation-delay:1s}.n4{animation-delay:1.1s}.n5{animation-delay:1.2s}
@keyframes pop{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}}

/* ── التلفون ── */
@media (max-width:640px){
  .stats .stat:last-child:nth-child(odd){grid-column:1/-1}
  .nav-links a:not(.nav-cta){display:none}
  .hero{padding-top:48px}
  .btn{width:100%}.actions{flex-direction:column}
  .sat{width:44px;height:44px;margin:-22px;font-size:20px}
  .foot-in{flex-direction:column;align-items:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rise,.pop{opacity:1;transform:none}
}