/* ══════════════════════════════════════════════════════════════
   veFlow — الصفحة الرئيسية (/VeFlow) · إعادة تصميم ٢٠٢٦-٠٩
   ⚠️ كل الحركات بتنطفي مع prefers-reduced-motion (آخر الملف).
   ⚠️ الخط المحلي CairoLocal احتياط لو Google Fonts ما وصل.
   ══════════════════════════════════════════════════════════════ */
@font-face{font-family:"CairoLocal";src:url("/fonts/Cairo-Regular.ttf") format("truetype");font-weight:400 600;font-display:swap}
@font-face{font-family:"CairoLocal";src:url("/fonts/Cairo-Bold.ttf") format("truetype");font-weight:700 900;font-display:swap}

:root{
  --bg:#06050c;--bg2:#0c0a18;--card:rgba(20,17,38,.72);--card2:#141126;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.14);
  --v:#8b5cf6;--v2:#a855f7;--pink:#ec4899;--cyan:#22d3ee;--amber:#fbbf24;
  --txt:#f5f3ff;--mut:#a7a3bf;--mut2:#77738f;
  --grad:linear-gradient(110deg,#a855f7 0%,#ec4899 45%,#f59e0b 75%,#22d3ee 100%);
  --grad2:linear-gradient(135deg,#8b5cf6,#ec4899);
  --r:22px;--ease:cubic-bezier(.2,.75,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:"Tajawal","CairoLocal",system-ui,sans-serif;background:var(--bg);color:var(--txt);overflow-x:hidden;line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.disp{font-family:"Cairo","CairoLocal","Tajawal",sans-serif;line-height:1.2}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
::selection{background:rgba(236,72,153,.4)}
.wrap{max-width:1220px;margin:0 auto;padding:0 24px}
.grad-text{background:var(--grad);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradShift 8s ease-in-out infinite}
@keyframes gradShift{50%{background-position:100% 0}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* ⚠️ clip لا hidden: hidden بيسمح لـscrollIntoView يزيح الصفحة أفقياً لمّا عنصر (توهّج/بطاقة طايرة) يطلع برّا الشاشة */
@supports (overflow:clip){html,body{overflow-x:clip}}
header.hero,#equation{overflow-x:clip}

/* ═════════ الخلفية ═════════ */
.bgfx{position:fixed;inset:0;z-index:-3;overflow:hidden;background:
  radial-gradient(1200px 700px at 85% -10%,rgba(139,92,246,.25),transparent 60%),
  radial-gradient(900px 600px at 0% 20%,rgba(236,72,153,.13),transparent 60%),var(--bg)}
.bgfx .blob{position:absolute;border-radius:50%;filter:blur(100px);opacity:.5;mix-blend-mode:screen;animation:blob 22s ease-in-out infinite}
.bgfx .b1{width:600px;height:600px;background:#7c3aed;top:-160px;right:-120px}
.bgfx .b2{width:520px;height:520px;background:#db2777;bottom:-200px;left:-140px;animation-delay:-7s}
.bgfx .b3{width:420px;height:420px;background:#0891b2;top:45%;left:40%;opacity:.25;animation-delay:-13s}
@keyframes blob{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(60px,-70px) scale(1.1)}66%{transform:translate(-50px,40px) scale(.92)}}
.grid-floor{position:fixed;inset:auto 0 0 0;height:60vh;z-index:-2;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(168,85,247,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(168,85,247,.18) 1px,transparent 1px);
  background-size:64px 64px;transform:perspective(600px) rotateX(62deg) translateY(30%);transform-origin:bottom;
  -webkit-mask-image:linear-gradient(to top,#000 10%,transparent 80%);mask-image:linear-gradient(to top,#000 10%,transparent 80%)}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.spot{position:fixed;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(168,85,247,.14),transparent 62%);transform:translate3d(50vw,30vh,0);transition:opacity .4s;will-change:transform}
.progress{position:fixed;top:0;right:0;left:0;height:3px;z-index:60;background:var(--grad2);transform-origin:right;transform:scaleX(0)}

/* ═════════ الأزرار ═════════ */
.btn{--mx:0px;--my:0px;position:relative;border:0;cursor:pointer;font:700 15px/1 "Tajawal","CairoLocal",sans-serif;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  transition:transform .25s var(--ease),box-shadow .3s,background .3s,border-color .3s;transform:translate(var(--mx),var(--my));white-space:nowrap}
.btn-ghost{background:rgba(255,255,255,.03);color:var(--txt);padding:13px 22px;border:1px solid var(--line2);backdrop-filter:blur(8px)}
.btn-ghost:hover{border-color:rgba(168,85,247,.6);background:rgba(168,85,247,.1)}
.btn-solid{color:#fff;padding:14px 26px;background:var(--grad2);box-shadow:0 12px 34px -10px rgba(236,72,153,.7),inset 0 1px 0 rgba(255,255,255,.25);overflow:hidden}
.btn-solid::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(120%);transition:transform .8s var(--ease)}
.btn-solid:hover::before{transform:translateX(-120%)}
.btn-solid:hover{box-shadow:0 18px 44px -10px rgba(236,72,153,.85),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-lg{font-size:17px;padding:17px 32px;border-radius:18px}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(-5px)}

/* ═════════ الشريط العلوي ═════════ */
nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .35s,border-color .35s,backdrop-filter .35s;border-bottom:1px solid transparent}
nav .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:18px;transition:padding .35s}
nav.scrolled{background:rgba(8,6,16,.7);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-color:var(--line)}
nav.scrolled .bar{padding-block:11px}
.logo{font-family:"Cairo","CairoLocal";font-weight:900;font-size:27px;letter-spacing:-.5px;display:flex;align-items:center;flex-shrink:0}
.logo .d{width:10px;height:10px;border-radius:50%;background:var(--grad2);box-shadow:0 0 18px rgba(236,72,153,.8);margin-inline-start:8px;animation:pulse 2.4s infinite}
@keyframes pulse{50%{transform:scale(1.4);opacity:.65}}
.nav-links{display:flex;gap:30px;align-items:center;font-size:15px;font-weight:500}
.nav-links a{color:var(--mut);transition:color .25s;position:relative;padding:4px 0}
.nav-links a:hover{color:var(--txt)}
.nav-links a::after{content:"";position:absolute;bottom:-4px;right:0;width:0;height:2px;border-radius:2px;background:var(--grad2);transition:width .3s var(--ease)}
.nav-links a:hover::after{width:100%}
.nav-cta{display:flex;gap:10px;align-items:center}
.nav-cta .btn{padding:11px 20px;font-size:14px}
.burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line2);background:rgba(255,255,255,.04);color:var(--txt);font-size:20px;cursor:pointer}
.mnav{display:none}

/* ═════════ عام للأقسام ═════════ */
section{position:relative;padding:120px 0}
.head{max-width:720px;margin:0 auto 56px;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;letter-spacing:.3px;color:#e9d5ff;padding:7px 15px;border-radius:999px;
  background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.28);margin-bottom:18px}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pink);box-shadow:0 0 10px var(--pink)}
.sec-title{font-size:clamp(32px,4.6vw,58px);font-weight:900;letter-spacing:-.5px;margin-bottom:16px}
.sec-lead{font-size:clamp(16px,1.6vw,19px);color:var(--mut);max-width:620px;margin:0 auto}

/* ظهور عند التمرير */
.rv{opacity:0;transform:translateY(34px);filter:blur(6px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
.rv.in{opacity:1;transform:none;filter:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}

/* ═════════ الهيرو ═════════ */
header.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:130px 0 90px}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.badge{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 14px;border-radius:999px;font-size:13.5px;font-weight:600;color:#ddd6fe;
  background:rgba(255,255,255,.04);border:1px solid var(--line2);backdrop-filter:blur(10px);margin-bottom:26px;position:relative;overflow:hidden}
.badge::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.12) 50%,transparent 70%);animation:sheen 4.5s ease-in-out infinite}
@keyframes sheen{0%,60%{transform:translateX(100%)}100%{transform:translateX(-100%)}}
.dotg{width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.18);animation:pulse 2s infinite}
h1.h1{font-size:clamp(42px,6vw,82px);font-weight:900;letter-spacing:-1.5px;line-height:1.08;margin-bottom:26px}
h1.h1 .ln{display:block}
h1.h1 .w{display:inline-block;opacity:0;transform:translateY(60%) rotate(4deg);filter:blur(10px);transition:opacity .8s var(--ease),transform .9s var(--ease),filter .8s var(--ease)}
h1.h1.go .w{opacity:1;transform:none;filter:none}
.hero-sub{font-size:clamp(17px,1.55vw,20px);color:var(--mut);max-width:560px;margin-bottom:34px}
.hero-sub b{color:var(--txt);font-weight:800}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.hero-note{font-size:13.5px;color:var(--mut2)}
.fade-up{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.go .fade-up,.fade-up.go{opacity:1;transform:none}

/* المسرح: صورة ← إعلان */
.stage-wrap{position:relative;perspective:1200px}
.stage{position:relative;aspect-ratio:4/5;max-width:470px;margin-inline:auto;border-radius:30px;padding:10px;
  background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.02));border:1px solid var(--line2);
  box-shadow:0 60px 120px -40px rgba(139,92,246,.6),0 30px 60px -30px rgba(0,0,0,.8);transform-style:preserve-3d;transition:transform .5s var(--ease)}
.stage::before{content:"";position:absolute;inset:-2px;border-radius:32px;padding:2px;background:conic-gradient(from var(--ang,0deg),#a855f7,#ec4899,#f59e0b,#22d3ee,#a855f7);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.8;animation:spin 6s linear infinite}
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes spin{to{--ang:360deg}}
.stage-in{position:relative;width:100%;height:100%;border-radius:22px;overflow:hidden;background:#0b0916}
.stage-in .lay{position:absolute;inset:0}
.stage-in .lay>*{width:100%;height:100%;object-fit:cover}
.stage-in .after{clip-path:inset(0 0 100% 0);transition:clip-path 1.6s cubic-bezier(.7,0,.2,1)}
.stage.done .after{clip-path:inset(0 0 0 0)}
.beam{position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,#fff,transparent);box-shadow:0 0 30px 8px rgba(236,72,153,.7),0 0 60px 20px rgba(168,85,247,.45);opacity:0;z-index:3}
.stage.scan .beam{animation:beam 1.6s cubic-bezier(.7,0,.2,1) forwards}
@keyframes beam{0%{top:0;opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
.stage .chip{position:absolute;z-index:4;top:16px;right:16px;padding:7px 13px;border-radius:999px;font-size:12.5px;font-weight:800;background:rgba(8,6,16,.7);backdrop-filter:blur(10px);border:1px solid var(--line2);transition:.4s}
.stage .chip.b{opacity:1}.stage .chip.a{opacity:0;transform:translateY(-6px);background:var(--grad2);border-color:transparent}
.stage.done .chip.b{opacity:0}.stage.done .chip.a{opacity:1;transform:none}
.stage .spark{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.35),transparent 55%);transition:opacity .6s}
.stage.flash .spark{opacity:1}
.stage-cap{position:absolute;z-index:4;bottom:14px;right:14px;left:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-radius:16px;
  background:rgba(8,6,16,.62);backdrop-filter:blur(14px);border:1px solid var(--line);font-size:13px;font-weight:700}
.stage-cap .prog{flex:0 0 70px;height:4px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}
.stage-cap .prog i{display:block;height:100%;width:0;background:var(--grad2)}
.art{display:grid;place-items:center;font-size:120px}
.art.plain{background:linear-gradient(160deg,#2a2833,#15141b);filter:grayscale(.6)}
.art.plain span{filter:drop-shadow(0 10px 10px rgba(0,0,0,.4));opacity:.8;transform:scale(.8)}
.art.fancy{background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.35),transparent 45%),var(--g,linear-gradient(135deg,#f472b6,#7c3aed))}
.art.fancy span{filter:drop-shadow(0 30px 30px rgba(0,0,0,.45));transform:rotate(-8deg) scale(1.05)}

/* البطاقات الطائرة */
.fc{position:absolute;z-index:5;width:150px;padding:9px;border-radius:18px;background:rgba(18,15,34,.78);backdrop-filter:blur(16px);border:1px solid var(--line2);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.7);animation:bob 7s ease-in-out infinite;transition:translate .4s var(--ease)}
.fc .thumb{height:100px;border-radius:12px;display:grid;place-items:center;font-size:44px;overflow:hidden}
.fc .cap{font-size:12px;font-weight:700;color:var(--mut);text-align:center;margin-top:7px}
.fc.f1{top:4%;left:-40px}.fc.f2{bottom:14%;left:-70px;animation-delay:-2.5s}.fc.f3{top:34%;right:-56px;animation-delay:-4.5s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-16px) rotate(2deg)}}
.scroll-ind{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;color:var(--mut2)}
.mouse{width:24px;height:38px;border:2px solid rgba(255,255,255,.25);border-radius:14px;position:relative}
.mouse::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--pink);animation:wheel 1.8s infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* ═════════ شريط الأدوات المتحرّك ═════════ */
.ticker{position:relative;padding:26px 0;border-block:1px solid var(--line);background:rgba(255,255,255,.015);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ticker-track{display:flex;gap:48px;padding-inline-end:48px;width:max-content;animation:tick 38s linear infinite}
.ticker span{display:inline-flex;align-items:center;gap:12px;font:800 clamp(18px,2vw,24px)/1 "Cairo","CairoLocal";color:rgba(245,243,255,.8);white-space:nowrap}
.ticker span i{font-style:normal;color:var(--pink);font-size:.8em}
@keyframes tick{to{transform:translateX(50%)}}

/* ═════════ المعادلة ═════════ */
.eq{position:relative;max-width:1040px;margin:0 auto}
.eq-row{display:grid;grid-template-columns:1fr auto 1fr auto 1.35fr;align-items:center;gap:22px}
.eq-row.nob{grid-template-columns:1fr auto 1.35fr}
.eq-row.nob .eq-b,.eq-row.nob .op-plus{display:none}
.eq-card{position:relative;border-radius:26px;padding:8px;background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.02));border:1px solid var(--line2);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.8);opacity:.18;transform:translateY(24px) scale(.94);filter:blur(4px) grayscale(.6);
  transition:opacity .7s var(--ease),transform .8s var(--ease),filter .7s var(--ease),box-shadow .6s}
.eq-card .m{position:relative;border-radius:19px;overflow:hidden;aspect-ratio:3/4;max-height:44vh;margin-inline:auto;background:#0d0b18}
.eq-card .m>img,.eq-card .m>video,.eq-card .m>.art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.eq-card .m>.art{font-size:84px}
.eq-r .m{aspect-ratio:4/5;max-height:56vh}
.eq .art.plain{background:radial-gradient(circle at 50% 38%,#3b3552,#15131f 70%);filter:none}
.eq .art.plain span{opacity:1;transform:none}
.eq-r .m>.art{font-size:120px}
.eq-lbl{position:absolute;z-index:2;top:16px;right:16px;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:800;background:rgba(8,6,16,.72);backdrop-filter:blur(10px);border:1px solid var(--line2)}
.eq-r .eq-lbl{background:var(--grad2);border-color:transparent}
.op{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;font:900 34px/1 "Cairo","CairoLocal";color:#fff;
  background:rgba(255,255,255,.04);border:1px solid var(--line2);opacity:.15;transform:scale(.6) rotate(-90deg);transition:opacity .6s var(--ease),transform .7s var(--ease),background .6s,box-shadow .6s}
.eq.s1 .eq-a,.eq.s3 .eq-b,.eq.s5 .eq-r{opacity:1;transform:none;filter:none}
.eq.s1 .eq-a{box-shadow:0 30px 70px -30px rgba(168,85,247,.7)}
.eq.s2 .op-plus,.eq.s4 .op-eq{opacity:1;transform:none;background:var(--grad2);box-shadow:0 0 40px rgba(236,72,153,.55)}
.eq.s5 .eq-r{box-shadow:0 50px 110px -30px rgba(236,72,153,.75),0 0 0 1px rgba(236,72,153,.4)}
.eq.s5 .eq-a,.eq.s5 .eq-b{opacity:.55;transform:scale(.96);filter:none}
.eq .burst{position:absolute;inset:-20%;z-index:3;pointer-events:none;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.65),rgba(236,72,153,.25) 35%,transparent 65%);opacity:0;transform:scale(.3)}
.eq.s5 .burst{animation:burst 1s var(--ease)}
@keyframes burst{0%{opacity:0;transform:scale(.3)}25%{opacity:1}100%{opacity:0;transform:scale(1.4)}}
.eq-r .m>.res{clip-path:circle(0% at 50% 50%);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1)}
.eq.s5 .eq-r .m>.res{clip-path:circle(75% at 50% 50%)}
.eq-foot{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:40px}
.eq-cap{font:800 clamp(18px,2vw,24px)/1.4 "Cairo","CairoLocal";text-align:center;min-height:1.4em;transition:opacity .4s}
.eq-dots{display:flex;gap:10px}
.eq-dots button{position:relative;width:34px;height:6px;border-radius:6px;border:0;cursor:pointer;background:rgba(255,255,255,.14);overflow:hidden}
.eq-dots button i{position:absolute;inset:0;width:0;background:var(--grad2)}
.eq-dots button.on i{animation:fill var(--dur,7s) linear forwards}
.eq-dots button.seen i{width:100%}
@keyframes fill{to{width:100%}}
.eq-demo-note{font-size:12.5px;color:var(--mut2)}

/* ═════════ العرض (bento) ═════════ */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;gap:16px}
.media{position:relative;border-radius:var(--r);overflow:hidden;background:var(--card2);border:1px solid var(--line);isolation:isolate;
  transition:transform .5s var(--ease),box-shadow .5s,border-color .4s}
.media>video,.media>img,.media>.imgart{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.media:hover{border-color:rgba(236,72,153,.45);box-shadow:0 30px 70px -30px rgba(236,72,153,.5)}
.media:hover>video,.media:hover>img,.media:hover>.imgart{transform:scale(1.06)}
.imgart{display:grid;place-items:center;font-size:64px}
.media .ov{position:absolute;inset:auto 0 0 0;z-index:2;padding:18px;background:linear-gradient(0deg,rgba(6,5,12,.88),transparent);transform:translateY(8px);opacity:.92;transition:.45s var(--ease)}
.media:hover .ov{transform:none;opacity:1}
.media .ov .k{font-size:11.5px;font-weight:800;color:#f9a8d4;letter-spacing:.3px}
.media .ov h4{font-size:17px;font-weight:800;margin-top:2px}
.badge-live{position:absolute;z-index:3;top:14px;right:14px;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:11.5px;font-weight:800;background:rgba(8,6,16,.7);backdrop-filter:blur(10px);border:1px solid var(--line2)}
.badge-live .rd{width:7px;height:7px;border-radius:50%;background:#ef4444;box-shadow:0 0 10px #ef4444;animation:pulse 1.4s infinite}
.b-tall{grid-row:span 3}.b-wide{grid-column:span 2;grid-row:span 2}.b-sq{grid-row:span 2}
.bento>.media:not(.b-tall):not(.b-wide):not(.b-sq){grid-row:span 1}

/* ═════════ الأرقام ═════════ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{position:relative;padding:34px 20px;border-radius:var(--r);text-align:center;background:var(--card);border:1px solid var(--line);overflow:hidden}
.stat::before{content:"";position:absolute;inset:auto 20% -40px;height:80px;background:var(--grad2);filter:blur(40px);opacity:.25}
.stat .num{font:900 clamp(38px,4.4vw,58px)/1 "Cairo","CairoLocal";letter-spacing:-1px}
.stat .lbl{margin-top:10px;color:var(--mut);font-size:15px;font-weight:600}

/* ═════════ بطاقات بإضاءة تتبع الماوس ═════════ */
.glowc{--gx:50%;--gy:50%;position:relative;border-radius:var(--r);background:var(--card);border:1px solid var(--line);isolation:isolate;overflow:hidden;transition:transform .45s var(--ease),border-color .4s}
.glowc::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--gx) var(--gy),rgba(168,85,247,.18),transparent 45%)}
.glowc::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;opacity:0;transition:opacity .4s;pointer-events:none;
  background:radial-gradient(300px circle at var(--gx) var(--gy),rgba(236,72,153,.9),transparent 45%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.glowc:hover::before,.glowc:hover::after{opacity:1}
.glowc:hover{transform:translateY(-6px)}

/* الأدوات */
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tool{padding:30px 28px;display:flex;flex-direction:column;gap:12px;min-height:220px}
.tool .ic{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;font-size:30px;background:rgba(255,255,255,.05);border:1px solid var(--line2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);transition:transform .5s var(--ease),background .4s}
.tool:hover .ic{transform:rotate(-8deg) scale(1.12);background:var(--grad2)}
.tool h3{font-size:21px;font-weight:900}
.tool p{color:var(--mut);font-size:15px}
.tool .go{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:800;color:#f9a8d4;opacity:.75;transition:opacity .3s,gap .3s}
.tool:hover .go{opacity:1;gap:10px}
.tool.hot{grid-column:span 1;background:linear-gradient(160deg,rgba(168,85,247,.2),rgba(236,72,153,.08)),var(--card)}
.tool .new{position:absolute;top:18px;left:18px;font-size:11px;font-weight:900;padding:4px 10px;border-radius:999px;background:var(--grad2)}

/* ═════════ كيف بتشتغل ═════════ */
.steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.steps-line{position:absolute;top:47px;right:16%;left:16%;height:2px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
.steps-line i{position:absolute;inset:0;background:var(--grad2);transform-origin:right;transform:scaleX(var(--p,0))}
.step{position:relative;text-align:center;padding:0 12px}
.step .ico{position:relative;z-index:1;width:94px;height:94px;margin:0 auto 22px;border-radius:28px;display:grid;place-items:center;font-size:40px;
  background:var(--card2);border:1px solid var(--line2);box-shadow:0 20px 50px -20px rgba(168,85,247,.6);transition:transform .6s var(--ease),background .6s}
.step.lit .ico{background:var(--grad2);transform:translateY(-4px) rotate(-4deg)}
.step .n{position:absolute;top:-8px;left:calc(50% - 58px);z-index:2;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:900 14px/1 "Cairo","CairoLocal";background:#fff;color:#1e1b2e}
.step h3{font-size:22px;font-weight:900;margin-bottom:10px}
.step p{color:var(--mut);font-size:15.5px;max-width:320px;margin:0 auto}

/* ═════════ قبل / بعد ═════════ */
.ba-tabs{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.ba-tabs button{border:1px solid var(--line2);background:rgba(255,255,255,.03);color:var(--mut);padding:9px 16px;border-radius:999px;font:700 14px/1 "Tajawal","CairoLocal";cursor:pointer;transition:.3s}
.ba-tabs button.on{background:var(--grad2);border-color:transparent;color:#fff}
.ba{--split:50%;position:relative;max-width:920px;margin:0 auto;aspect-ratio:16/10;border-radius:28px;overflow:hidden;border:1px solid var(--line2);
  box-shadow:0 60px 120px -50px rgba(168,85,247,.6);cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none;background:#0d0b18}
.ba .side{position:absolute;inset:0}
.ba .side>img,.ba .side>.art{width:100%;height:100%;object-fit:cover}
/* --split = قدّيش من اليمين ظاهر «بعد» (المقبض على نفس المسافة من اليمين) */
.ba .after{clip-path:inset(0 0 0 calc(100% - var(--split)))}
.ba .lbl{position:absolute;z-index:2;top:18px;padding:7px 13px;border-radius:999px;font-size:13px;font-weight:800;background:rgba(8,6,16,.7);backdrop-filter:blur(10px);border:1px solid var(--line2)}
.ba .before .lbl{left:18px}.ba .after .lbl{right:18px;background:var(--grad2);border-color:transparent}
.ba .handle{position:absolute;top:0;bottom:0;right:var(--split);width:2px;margin-right:-1px;z-index:3;background:#fff;box-shadow:0 0 20px rgba(255,255,255,.7)}
.ba .grip{position:absolute;top:50%;right:var(--split);z-index:4;width:54px;height:54px;margin:-27px -27px 0 0;border-radius:50%;display:grid;place-items:center;font-size:20px;font-weight:900;color:#1e1b2e;background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 0 6px rgba(255,255,255,.18);transition:transform .25s}
.ba:hover .grip,.ba.drag .grip{transform:scale(1.1)}
.ba-cap{text-align:center;margin-top:18px;color:var(--mut);font-weight:700}

/* ═════════ القوالب — شريط أفقي ═════════ */
.rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 24px 30px;margin:0 -24px;scrollbar-width:none;cursor:grab}
.rail::-webkit-scrollbar{display:none}
.rail.drag{cursor:grabbing;scroll-snap-type:none}
.tpl{flex:0 0 290px;scroll-snap-align:start;display:flex;flex-direction:column;overflow:hidden;padding:0;transform-style:preserve-3d}
.tpl .art{height:230px;font-size:76px;position:relative;overflow:hidden}
.tpl .art>img,.tpl .art>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tpl .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.tpl .tag{align-self:flex-start;font-size:11.5px;font-weight:800;color:#f9a8d4;padding:3px 10px;border-radius:999px;background:rgba(236,72,153,.12)}
.tpl h3{font-size:18px;font-weight:900}
.tpl p{color:var(--mut);font-size:14px}
.tpl .cost{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--mut)}
.tpl .cost b{color:var(--txt);font-size:16px}
.rail-nav{display:flex;justify-content:center;gap:10px;margin-top:8px}
.rail-nav button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line2);background:rgba(255,255,255,.04);color:var(--txt);font-size:18px;cursor:pointer;transition:.3s}
.rail-nav button:hover{background:var(--grad2);border-color:transparent}
.t-a{background:linear-gradient(135deg,#f472b6,#7c3aed)}.t-b{background:linear-gradient(135deg,#22d3ee,#3b82f6)}.t-c{background:linear-gradient(135deg,#fbbf24,#ec4899)}
.t-d{background:linear-gradient(135deg,#34d399,#0ea5e9)}.t-e{background:linear-gradient(135deg,#a78bfa,#ec4899)}.t-f{background:linear-gradient(135deg,#fb7185,#f59e0b)}

/* ═════════ الخدمات المميّزة (كاروسيل · هوية · ريلز) ═════════
   كمبيوتر: النصوص تنزل مع التمرير والشاشة ثابتة جنبها (sticky) وبتتبدّل.
   جوّال: تبويبات، والنصّ فوق الشاشة. */
.svc-tabs{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:34px;position:sticky;top:72px;z-index:6}
.svc-tabs button{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line2);background:rgba(12,10,24,.75);backdrop-filter:blur(12px);color:var(--mut);padding:11px 18px;border-radius:999px;font:800 15px/1 "Tajawal","CairoLocal";cursor:pointer;transition:.35s var(--ease)}
.svc-tabs button.on{background:var(--grad2);border-color:transparent;color:#fff;box-shadow:0 10px 30px -10px rgba(236,72,153,.7)}
.svc-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.svc-t{min-height:78vh;display:flex;flex-direction:column;justify-content:center;gap:14px;opacity:.28;transition:opacity .6s var(--ease)}
.svc-t.on{opacity:1}
.svc-n{font:900 15px/1 "Cairo","CairoLocal";color:#f9a8d4;letter-spacing:1px}
.svc-ic{width:70px;height:70px;border-radius:22px;display:grid;place-items:center;font-size:34px;background:var(--grad2);box-shadow:0 20px 40px -15px rgba(236,72,153,.7)}
.svc-t h3{font-size:clamp(30px,3.4vw,44px);font-weight:900}
.svc-t p{color:var(--mut);font-size:18px;max-width:470px}
.svc-t ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin:6px 0 10px}
.svc-t li{display:flex;align-items:center;gap:10px;font-weight:700}
.svc-t .btn{align-self:flex-start}
.svc-stage-wrap{position:sticky;top:130px;height:calc(100vh - 170px);min-height:520px;max-height:680px}
.svc-stage{position:relative;height:100%;border-radius:32px;overflow:hidden;border:1px solid var(--line2);
  background:radial-gradient(700px 400px at 70% 0,rgba(168,85,247,.25),transparent 60%),radial-gradient(500px 300px at 0 100%,rgba(236,72,153,.18),transparent 60%),#0b0918;
  box-shadow:0 60px 120px -50px rgba(139,92,246,.7)}
.svc-stage::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:radial-gradient(circle at 50% 50%,#000,transparent 75%);mask-image:radial-gradient(circle at 50% 50%,#000,transparent 75%)}
.scn{position:absolute;inset:0;opacity:0;visibility:hidden;transform:scale(.96);transition:opacity .6s var(--ease),transform .7s var(--ease),visibility 0s .6s;z-index:1}
.scn.on{opacity:1;visibility:visible;transform:none;transition:opacity .6s var(--ease),transform .7s var(--ease),visibility 0s}
.scn-media>video,.scn-media>img{width:100%;height:100%;object-fit:cover}

/* ── ١) الكاروسيل ── */
.car-prompt{position:absolute;top:26px;right:26px;left:26px;z-index:3;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid var(--line2);backdrop-filter:blur(10px);font-weight:800;font-size:15px}
.car-type{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.caret{width:2px;height:20px;background:var(--pink);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.car-go{margin-inline-start:auto;flex-shrink:0;white-space:nowrap;padding:7px 13px;border-radius:10px;font-size:13px;background:rgba(255,255,255,.08);transition:.4s}
.scn-car.p2 .car-go,.scn-car.p3 .car-go{background:var(--grad2)}
.car-deck{position:absolute;inset:92px 0 56px;display:grid;place-items:center;perspective:1200px}
.cs{--o:0;position:absolute;width:min(58%,300px);aspect-ratio:4/5;border-radius:20px;padding:22px 20px;display:flex;flex-direction:column;gap:10px;justify-content:center;
  background:linear-gradient(160deg,#2a1255,#12091f 70%);border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px -20px rgba(0,0,0,.8);
  opacity:0;transform:translateY(60px) scale(.7);transition:transform .9s var(--ease),opacity .6s var(--ease);transition-delay:calc(var(--i) * 70ms);z-index:calc(10 - var(--i))}
.cs::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 80% 10%,rgba(236,72,153,.35),transparent 50%);pointer-events:none}
.cs-h{position:absolute;top:14px;right:16px;font-size:11px;font-weight:800;color:#c4b5fd}
.cs-big{font:900 88px/1 "Cairo","CairoLocal";background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cs-num{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font:900 22px/1 "Cairo","CairoLocal";background:var(--grad2)}
.cs strong{font:900 22px/1.35 "Cairo","CairoLocal"}
.cs p{color:#cbc6e0;font-size:14px;line-height:1.6}
.cs em{font-style:normal;font-size:12px;color:#f9a8d4;font-weight:800;margin-top:6px}
.cs-cover{background:linear-gradient(160deg,#6d28d9,#be185d)}
.cs-end{background:linear-gradient(160deg,#0e7490,#6d28d9)}
.scn-car.p2 .cs{opacity:1;transform:translateX(calc((var(--i) - 2) * -30%)) translateY(calc((var(--i) - 2) * (var(--i) - 2) * 4%)) rotate(calc((var(--i) - 2) * -8deg)) scale(.78)}
.scn-car.p3 .cs{transition-delay:0s;opacity:var(--op,0);transform:translateX(calc(var(--o) * -106%)) scale(var(--sc,.86))}
.car-dots{position:absolute;bottom:24px;left:0;right:0;display:flex;justify-content:center;gap:7px;opacity:0;transition:.5s}
.car-dots i{width:7px;height:7px;border-radius:7px;background:rgba(255,255,255,.25);transition:.35s}
.car-dots i.on{width:22px;background:var(--grad2)}
.scn-car.p3 .car-dots{opacity:1}

/* ── ٢) الهوية ── */
.br-title{position:absolute;top:24px;right:26px;left:26px;z-index:3;display:flex;justify-content:space-between;align-items:center;font-weight:900;font-size:16px}
.br-title em{font-style:normal;font-size:13px;color:#f9a8d4;font-weight:800;padding:6px 12px;border-radius:999px;background:rgba(236,72,153,.12)}
.br-logos{position:absolute;inset:80px 26px 26px;display:grid;grid-template-columns:repeat(6,1fr);align-content:center;gap:14px;transition:opacity .6s,transform .7s var(--ease)}
.lg{border-radius:18px;background:#faf7f2;display:grid;place-items:center;align-content:center;gap:6px;color:#1c1917;opacity:0;transform:scale(.6) translateY(20px);
  transition:transform .7s var(--ease),opacity .5s,box-shadow .4s,filter .4s;transition-delay:calc(var(--i) * 140ms);box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
.lg{grid-column:span 2;aspect-ratio:1}.lg:nth-child(4){grid-column:2/4}.lg:nth-child(5){grid-column:4/6}
.scn-brand.p1 .lg,.scn-brand.p2 .lg{opacity:1;transform:none}
.scn-brand.p2 .lg{transition-delay:0s}
.scn-brand.p2 .lg:not(.lg1){opacity:.28;filter:grayscale(1);transform:scale(.92)}
.scn-brand.p2 .lg1{box-shadow:0 0 0 3px #f59e0b,0 0 50px rgba(245,158,11,.6);transform:scale(1.06)}
.scn-brand.p3 .br-logos{opacity:0;transform:scale(.9);pointer-events:none}
.mk{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font:900 30px/1 "Cairo","CairoLocal";color:#fff;background:linear-gradient(135deg,#f59e0b,#b45309);box-shadow:inset 0 -4px 0 rgba(0,0,0,.15)}
.mk.sm{width:40px;height:40px;font-size:20px}.mk.xs{width:24px;height:24px;font-size:12px}
.lg small{font-weight:900;font-size:13px}
.lg2 .wm{font:900 30px/1 "Cairo","CairoLocal";color:#7c2d12}.lg2 .wm i{color:#f59e0b;font-style:normal}
.lg3 .hx{width:64px;height:70px;display:grid;place-items:center;font:900 22px/1 "Cairo","CairoLocal";color:#fff;background:#4c1d95;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.lg4 .ol{display:grid;place-items:center;gap:4px;padding:12px 14px;border:2px solid #1c1917;border-radius:10px;font:900 15px/1 "Cairo","CairoLocal";letter-spacing:2px}.lg4 .ol small{font-size:9px;letter-spacing:0}
.lg5{background:#1c1917}.lg5 .bd{font:900 18px/1 "Cairo","CairoLocal";color:#fde68a;padding:14px 12px;border:1.5px dashed #fde68a;border-radius:50%}
.br-board{position:absolute;inset:78px 22px 22px;pointer-events:none}
.br-board>*{position:absolute;opacity:0;transform:translateY(30px) scale(.9);transition:transform .8s var(--ease),opacity .6s}
.scn-brand.p3 .br-board>*{opacity:1;transform:none}
.scn-brand.p3 .br-card{transition-delay:.1s}.scn-brand.p3 .br-letter{transition-delay:.3s}.scn-brand.p3 .br-env{transition-delay:.5s}.scn-brand.p3 .br-pal{transition-delay:.7s}.scn-brand.p3 .br-av{transition-delay:.85s}
.br-letter{right:4%;top:2%;width:40%;aspect-ratio:210/297;background:#fff;border-radius:6px;padding:14px 12px;display:flex;flex-direction:column;gap:7px;box-shadow:0 30px 60px -20px rgba(0,0,0,.7)}
.br-letter .mk{margin-bottom:6px}
.br-letter i{display:block;height:5px;border-radius:3px;background:#e7e5e4}.br-letter i.s{width:60%}
.br-card{left:4%;top:6%;width:48%;aspect-ratio:91/55;perspective:900px}
.br-card .f{position:absolute;inset:0;border-radius:10px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:12px 16px;box-shadow:0 24px 50px -20px rgba(0,0,0,.8);transition:transform 1s var(--ease)}
.br-card .fr{background:#1c1917;color:#fde68a;align-items:center}
.br-card .fr b{font:900 20px/1 "Cairo","CairoLocal"}.br-card .fr small{font-size:11px;color:#d6d3d1}
.br-card .bk{background:#faf7f2;color:#1c1917;transform:rotateY(180deg);align-items:flex-start;border-right:6px solid #f59e0b}
.br-card .bk b{font:900 15px/1.2 "Cairo","CairoLocal"}.br-card .bk small{font-size:11px;color:#78716c;margin-bottom:4px}.br-card .bk span{font-size:11px;font-weight:700;direction:ltr}
.scn-brand.flip .br-card .fr{transform:rotateY(-180deg)}.scn-brand.flip .br-card .bk{transform:rotateY(0)}
.br-env{left:6%;bottom:18%;width:46%;aspect-ratio:22/11;background:#fff7ed;border-radius:6px;box-shadow:0 24px 50px -20px rgba(0,0,0,.7);overflow:hidden}
.br-env::before{content:"";position:absolute;inset:0 0 40% 0;background:#fde68a;clip-path:polygon(0 0,100% 0,50% 100%)}
.br-env .mk{position:absolute;top:10px;right:12px}
.br-env span{position:absolute;bottom:14px;left:16px;width:40%;height:5px;border-radius:3px;background:#d6d3d1;box-shadow:0 10px 0 #e7e5e4}
.br-pal{right:4%;bottom:6%;display:flex;gap:8px;padding:10px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid var(--line2)}
.br-pal i{width:30px;height:30px;border-radius:50%;background:var(--c);border:2px solid rgba(255,255,255,.2)}
.br-av{left:8%;bottom:3%;padding:6px;border-radius:50%;background:conic-gradient(#f59e0b,#ec4899,#8b5cf6,#f59e0b)}
.br-av .mk{width:58px;height:58px;border:3px solid #0b0918}

/* ── ٣) الريلز ── */
.phone{position:absolute;top:50%;left:36%;height:86%;max-width:52%;aspect-ratio:9/19;transform:translate(-50%,-50%);border-radius:36px;padding:9px;background:#050409;border:1px solid rgba(255,255,255,.18);box-shadow:0 50px 100px -30px rgba(0,0,0,.9),0 0 0 6px rgba(255,255,255,.03)}
.phone::before{content:"";position:absolute;top:14px;left:50%;width:70px;height:18px;margin-left:-35px;border-radius:12px;background:#050409;z-index:5}
.scr{position:relative;width:100%;height:100%;border-radius:28px;overflow:hidden;background:linear-gradient(160deg,#7c3aed,#db2777 55%,#f59e0b)}
.rl-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rl-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.65),transparent 45%,transparent 75%,rgba(0,0,0,.35))}
.rl-top{position:absolute;top:36px;right:14px;left:14px;display:flex;justify-content:space-between;font-size:13px;z-index:2}
.rl-side{position:absolute;left:10px;bottom:90px;display:flex;flex-direction:column;gap:14px;z-index:2;font-size:20px;text-align:center}
.rl-side small{display:block;font-size:9px;font-weight:700}
.rl-cap{position:absolute;right:14px;left:48px;top:44%;z-index:2;display:flex;flex-wrap:wrap;gap:4px 6px;justify-content:center;font:900 19px/1.3 "Cairo","CairoLocal";text-shadow:0 2px 8px rgba(0,0,0,.6)}
.rl-cap span{opacity:0;transform:translateY(10px) scale(.8);transition:.3s var(--ease);padding:1px 5px;border-radius:6px}
.rl-cap span.in{opacity:1;transform:none}
.rl-cap span.hot{background:#fde047;color:#1c1917;text-shadow:none}
.rl-user{position:absolute;right:14px;bottom:30px;z-index:2;display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;font-size:12px}
.rl-user i{grid-row:span 2;width:30px;height:30px;border-radius:50%;background:var(--grad2);border:2px solid #fff}
.rl-user small{font-size:10px;opacity:.85}
.rl-bar{position:absolute;right:0;left:0;bottom:0;height:3px;background:rgba(255,255,255,.25);z-index:2}
.rl-bar i{display:block;height:100%;width:0;background:#fff}
.rl-script{position:absolute;top:28px;right:24px;width:min(38%,210px);z-index:3;padding:14px;border-radius:16px;background:rgba(12,10,24,.78);backdrop-filter:blur(12px);border:1px solid var(--line2);display:flex;flex-direction:column;gap:8px;font-size:13px}
.rl-script b{font-size:12px;color:#f9a8d4}
.rl-script p{color:var(--mut2);transition:.3s;padding:4px 8px;border-radius:8px;border-right:2px solid transparent}
.rl-script p.on{color:#fff;background:rgba(168,85,247,.18);border-color:var(--pink)}
.rl-wave{position:absolute;right:24px;bottom:28px;z-index:3;height:46px;display:flex;align-items:center;gap:3px;padding:8px 12px;border-radius:14px;background:rgba(12,10,24,.78);border:1px solid var(--line2)}
.rl-wave i{width:3px;height:30%;border-radius:3px;background:var(--grad2);animation:wave 1s ease-in-out infinite;animation-delay:calc(var(--d) * -0.14s)}
@keyframes wave{50%{height:95%}}

/* ═════════ جدار الإبداع — صفّين عكس بعض ═════════ */
.wall{display:flex;flex-direction:column;gap:18px;overflow:hidden;padding:6px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.wall-row{display:flex;gap:18px;padding-inline-end:18px;width:max-content;animation:tick var(--dur,60s) linear infinite}
.wall-row.rev{animation-direction:reverse}
.wall:hover .wall-row{animation-play-state:paused}
.wall .media{flex:0 0 auto;height:280px}
.wall .ar-portrait{aspect-ratio:9/16}.wall .ar-land{aspect-ratio:16/9}.wall .ar-square{aspect-ratio:1}.wall .ar-wide{aspect-ratio:21/9}.wall .ar-tall{aspect-ratio:3/4}.wall .ar-classic{aspect-ratio:4/3}
.wall .media:not([class*="ar-"]){aspect-ratio:1}

/* ═════════ المسارات ═════════ */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.path{padding:38px 36px}
.path .pico{width:66px;height:66px;border-radius:20px;display:grid;place-items:center;font-size:32px;background:var(--grad2);margin-bottom:20px;box-shadow:0 20px 40px -15px rgba(236,72,153,.7)}
.path h3{font-size:26px;font-weight:900;margin-bottom:8px}
.path p{color:var(--mut);margin-bottom:18px}
.path ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.path li{display:flex;gap:10px;align-items:center;font-weight:600}
.ck{flex:0 0 24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:900;background:rgba(52,211,153,.15);color:#34d399}

/* ═════════ الباقات ═════════ */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;align-items:stretch}
.price{padding:34px 26px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.price h3{font-size:19px;font-weight:800;color:var(--mut)}
.price .amt{font:900 54px/1 "Cairo","CairoLocal";margin:10px 0 2px}
.price .amt span{font-size:17px;font-weight:700;color:var(--mut)}
.price .pts{color:#e9d5ff;font-weight:700;margin-bottom:18px}
.price .btn{margin-top:auto;width:100%}
.price.pop{border-color:transparent;background:linear-gradient(var(--card2),var(--card2)) padding-box,conic-gradient(from var(--ang,0deg),#a855f7,#ec4899,#f59e0b,#22d3ee,#a855f7) border-box;border:2px solid transparent;
  animation:spin 6s linear infinite;box-shadow:0 40px 90px -40px rgba(236,72,153,.8);transform:scale(1.03)}
.price.pop:hover{transform:scale(1.03) translateY(-6px)}
.fav{position:absolute;top:14px;left:50%;transform:translateX(-50%);font-size:11.5px;font-weight:900;padding:5px 12px;border-radius:999px;background:var(--grad2);white-space:nowrap}
.price.pop h3{margin-top:18px}

/* ═════════ الأسئلة ═════════ */
.faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq details{border-radius:18px;background:var(--card);border:1px solid var(--line);transition:border-color .3s,background .3s}
.faq details[open]{border-color:rgba(168,85,247,.45);background:rgba(168,85,247,.07)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;font:800 17px/1.4 "Cairo","CairoLocal"}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:0 0 32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:20px;background:rgba(255,255,255,.06);transition:transform .35s var(--ease),background .3s}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--grad2)}
.faq .a{padding:0 24px 22px;color:var(--mut);font-size:15.5px}

/* ═════════ الدعوة الأخيرة ═════════ */
.cta-box{position:relative;overflow:hidden;border-radius:36px;padding:90px 30px;text-align:center;border:1px solid var(--line2);
  background:radial-gradient(800px 400px at 50% 0,rgba(168,85,247,.35),transparent 70%),radial-gradient(600px 300px at 50% 100%,rgba(236,72,153,.25),transparent 70%),var(--bg2)}
.cta-box canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.cta-box>*:not(canvas){position:relative;z-index:1}
.cta-box h2{font-size:clamp(34px,5vw,64px);font-weight:900;letter-spacing:-.8px;margin-bottom:16px}
.cta-box p{color:var(--mut);font-size:18px;margin-bottom:34px}

footer{padding:50px 0 40px;border-top:1px solid var(--line)}
.foot-grid{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot-links{display:flex;gap:18px;flex-wrap:wrap;font-size:14px;color:var(--mut)}
.foot-links a:hover{color:var(--txt)}
.mut{color:var(--mut2);font-size:14px}

/* ═════════ الشاشات ═════════ */
@media (max-width:1100px){
  /* تابلت عرضي: الروابط الخمسة + الزرّين ما بيوسعوا ⇐ قائمة ☰ */
  .nav-links,.nav-cta .btn-ghost{display:none}
  .burger{display:grid;place-items:center}
  .mnav{position:fixed;inset:64px 12px auto 12px;z-index:49;display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:20px;background:rgba(12,10,24,.96);backdrop-filter:blur(20px);border:1px solid var(--line2);
    opacity:0;transform:translateY(-10px);pointer-events:none;transition:.3s var(--ease)}
  .mnav.on{opacity:1;transform:none;pointer-events:auto}
  .mnav a{padding:13px 14px;border-radius:12px;font-weight:700}
  .mnav a:hover{background:rgba(255,255,255,.05)}
  .hero-grid{gap:36px}
  .fc{width:124px}.fc .thumb{height:80px;font-size:36px}
  .fc.f1{left:-14px;top:-2%}.fc.f2{left:-18px;bottom:8%}.fc.f3{right:-18px;top:auto;bottom:30%}
  .svc-grid{gap:34px}
}
@media (max-width:960px){
  .svc-tabs{position:static}
  .svc-grid{grid-template-columns:1fr;gap:26px}
  .svc-t{display:none;min-height:0;opacity:1}
  .svc-t.on{display:flex}
  .svc-stage-wrap{position:relative;top:auto;height:auto;min-height:0;max-height:none}
  .svc-stage{height:auto;aspect-ratio:4/5;max-height:620px;margin-inline:auto}

  section{padding:90px 0}
  .nav-links,.nav-cta .btn-ghost{display:none}
  .burger{display:grid;place-items:center}
  .mnav{position:fixed;inset:64px 12px auto 12px;z-index:49;display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:20px;background:rgba(12,10,24,.96);backdrop-filter:blur(20px);border:1px solid var(--line2);
    opacity:0;transform:translateY(-10px);pointer-events:none;transition:.3s var(--ease)}
  .mnav.on{opacity:1;transform:none;pointer-events:auto}
  .mnav a{padding:13px 14px;border-radius:12px;font-weight:700}
  .mnav a:hover{background:rgba(255,255,255,.05)}
  .hero-grid{grid-template-columns:1fr;gap:60px;text-align:center}
  .hero-sub{margin-inline:auto}
  .hero-cta{justify-content:center}
  .stage{max-width:380px}
  .fc{width:120px}.fc .thumb{height:78px;font-size:34px}
  .fc.f1{left:-8px;top:-4%}.fc.f2{left:-8px;bottom:6%}.fc.f3{right:-8px;top:40%}
  .scroll-ind{display:none}
  .eq-row{grid-template-columns:1fr auto 1fr;grid-template-areas:"a p b" "e e e" "r r r";gap:14px}
  .eq-row.nob{grid-template-columns:1fr;grid-template-areas:"a" "e" "r"}
  .eq-a{grid-area:a}.op-plus{grid-area:p}.eq-b{grid-area:b}.op-eq{grid-area:e;justify-self:center;transform:scale(.6) rotate(0)}.eq-r{grid-area:r;max-width:420px;width:100%;justify-self:center}
  .eq.s4 .op-eq{transform:none}
  .op{width:52px;height:52px;font-size:26px}
  .bento{grid-template-columns:1fr 1fr;grid-auto-rows:130px}
  .stats{grid-template-columns:1fr 1fr}
  .tools{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr;gap:40px}
  .steps-line{display:none}
  .paths{grid-template-columns:1fr}
}
@media (max-width:600px){
  .svc-tabs button{padding:9px 13px;font-size:13px}
  .svc-t h3{font-size:28px}.svc-t p{font-size:16px}
  .rl-script{display:none}
  .phone{left:50%;height:90%}
  .rl-wave{display:none}
  .cs{width:66%;padding:30px 14px 14px;gap:6px}
  .cs strong{font-size:17px}.cs p{font-size:12px}.cs-big{font-size:60px}.cs-num{width:34px;height:34px;font-size:17px}
  .br-env{bottom:24%;width:50%}
  .br-pal{bottom:3%;right:3%;gap:5px;padding:7px}.br-pal i{width:22px;height:22px}
  .br-av{display:none}
  .br-letter{width:44%}.br-card{width:54%}
  .car-prompt{font-size:13px;top:16px;right:16px;left:16px}

  .wrap{padding:0 16px}
  .rail{padding:10px 16px 26px;margin:0 -16px}
  section{padding:74px 0}
  header.hero{padding:110px 0 60px}
  h1.h1{letter-spacing:-.5px}
  .hero-cta .btn{flex:1 1 100%}
  .nav-cta .btn-solid{padding:10px 14px;font-size:13px}
  .logo{font-size:23px}
  .fc{display:none}
  .fc.f1{display:block;width:108px;left:-6px;top:-5%}
  .bento{grid-template-columns:1fr;grid-auto-rows:220px}
  .b-tall,.b-wide,.b-sq,.bento>.media{grid-column:auto!important;grid-row:span 1!important}
  .tools{grid-template-columns:1fr}
  .tool{min-height:0}
  .tpl{flex-basis:78vw}
  .wall .media{height:200px}
  .ba{aspect-ratio:4/5}
  .price.pop{transform:none}
  .cta-box{padding:64px 20px;border-radius:28px}
  .foot-grid{flex-direction:column;text-align:center}
}
@media (hover:none){.glowc:hover{transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv,h1.h1 .w,.fade-up{opacity:1!important;transform:none!important;filter:none!important}
  .wall-row,.ticker-track{animation:none!important}
}