/* =========================================================================
   eew1 Studio — استوديو العروض والتقارير
   هوية داكنة جريئة مستقلة عن المتجر. Mobile-first.
   ========================================================================= */
:root{
  --s-bg:      #080814;
  --s-bg2:     #10102A;
  --s-ink:     #F4F6FF;
  --s-muted:   #9AA3C7;
  --s-line:    rgba(255,255,255,.1);
  --s-glass:   rgba(255,255,255,.06);
  --violet:    #7C3AED;
  --violet-2:  #A78BFA;
  --cyan:      #38BDF8;
  --pink:      #E040FB;
  --amber:     #F59E0B;
  --emerald:   #10B981;
  --lime:      #A3E635;
  --grad-ppt:  linear-gradient(135deg,#38BDF8 0%,#7C3AED 50%,#E040FB 100%);
  --grad-rep:  linear-gradient(135deg,#22D3EE 0%,#2563EB 55%,#7C3AED 100%);
  --grad-txt:  linear-gradient(90deg,#38BDF8,#A78BFA,#E040FB,#38BDF8);
  --accent:    var(--violet);
  --accent-2:  var(--pink);
  --ease-out:  cubic-bezier(.22,1,.36,1);
  --ease-io:   cubic-bezier(.65,0,.35,1);
  --f-head: 'Almarai','Segoe UI',Tahoma,sans-serif;
  --f-body: 'IBM Plex Sans Arabic','Segoe UI',Tahoma,sans-serif;
  --f-mono: 'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
html[data-service="report"]{ --accent:#2563EB; --accent-2:#22D3EE; }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; min-height:100vh; font-family:var(--f-body); font-size:16px; line-height:1.7;
  color:var(--s-ink); background:var(--s-bg); overflow-x:hidden;
}
h1,h2,h3{ font-family:var(--f-head); font-weight:800; line-height:1.3; margin:0 0 .4em; letter-spacing:-.01em; }
p{ margin:0 0 1em; }
button{ font:inherit; cursor:pointer; color:inherit; }
input,textarea,select{ font:inherit; color:inherit; }
img,svg{ max-width:100%; display:block; }
.mono{ font-family:var(--f-mono); unicode-bidi:plaintext; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.wrap{ width:100%; max-width:1180px; margin-inline:auto; padding-inline:18px; }

/* ===================== الخلفية الحيّة ===================== */
.bgfx{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bgfx .orb{
  position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; mix-blend-mode:screen;
  animation:orb 22s ease-in-out infinite alternate; will-change:transform;
  transition:background 1.2s;
}
.bgfx .orb--1{ width:60vmax; height:60vmax; background:var(--accent); top:-25vmax; right:-20vmax; }
.bgfx .orb--2{ width:45vmax; height:45vmax; background:var(--accent-2); bottom:-20vmax; left:-15vmax; animation-delay:-8s; opacity:.4; }
.bgfx .orb--3{ width:30vmax; height:30vmax; background:var(--cyan); top:45%; left:40%; animation-delay:-15s; opacity:.22; }
@keyframes orb{ 0%{transform:translate(0,0) scale(1)} 50%{transform:translate(-6vmax,4vmax) scale(1.15)} 100%{transform:translate(4vmax,-5vmax) scale(.9)} }
.bgfx .noise{
  position:absolute; inset:0; opacity:.06;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/></svg>");
}
.bgfx .grid{
  position:absolute; inset:0; opacity:.18;
  background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 30%,#000 20%,transparent 100%);
          mask-image:radial-gradient(80% 70% at 50% 30%,#000 20%,transparent 100%);
}
#particles{ position:absolute; inset:0; }

/* ===================== الهيدر ===================== */
.shdr{ position:sticky; top:0; z-index:50; padding:12px 0; background:rgba(8,8,20,.55); -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%); border-bottom:1px solid rgba(255,255,255,.06); }
.shdr__in{ display:flex; align-items:center; gap:12px; }
.shdr .logo{ display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-family:var(--f-head); font-weight:800; }
.shdr .logo img{ width:36px; height:36px; filter:drop-shadow(0 4px 10px rgba(124,58,237,.5)); }
.shdr .logo small{ display:block; font:600 10px/1 var(--f-mono); letter-spacing:.2em; color:var(--s-muted); margin-top:3px; }
.shdr__back{
  margin-inline-start:auto; display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px;
  border:1px solid var(--s-line); background:var(--s-glass); color:var(--s-ink); font-size:14px; text-decoration:none;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); transition:background .2s, transform .25s var(--ease-out);
}
.shdr__back:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px); }
.shdr__back svg{ width:16px; height:16px; }

main{ position:relative; z-index:1; }

/* ===================== المشهد الأول ===================== */
.scene{ transition:opacity .5s, transform .6s var(--ease-io), filter .5s; }
.scene[hidden]{ display:none; }
.scene.out{ opacity:0; transform:scale(.96) translateY(-20px); filter:blur(6px); pointer-events:none; }
.scene.in{ animation:sceneIn .7s var(--ease-out) both; }
@keyframes sceneIn{ from{ opacity:0; transform:scale(1.04) translateY(20px); filter:blur(8px); } }

.landing{ padding:clamp(28px,7vw,88px) 0 60px; text-align:center; }
.landing .eyebrow{
  display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; font-size:13px; font-weight:600;
  border:1px solid var(--s-line); background:var(--s-glass); color:var(--s-muted);
}
.landing .eyebrow i{ width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 4px rgba(34,211,238,.2); animation:pulse 2s infinite; }
@keyframes pulse{ 50%{ box-shadow:0 0 0 9px rgba(34,211,238,0);} }
.landing h1{ font-size:clamp(2rem,6.2vw,4.4rem); margin:22px auto 14px; max-width:14ch; }
.landing h1 .w{ display:inline-block; opacity:0; transform:translateY(.7em) rotate(3deg) scale(.9); animation:wIn .8s var(--ease-out) forwards; }
@keyframes wIn{ to{ opacity:1; transform:none; } }
.landing h1 .hl{
  background:var(--grad-txt); background-size:300% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shine 6s linear infinite;
}
.landing h1 .w.hl{ animation:wIn .8s var(--ease-out) forwards, shine 6s linear infinite; }
@keyframes shine{ to{ background-position:300% center; } }
.landing .lead{ color:var(--s-muted); font-size:clamp(1rem,2vw,1.2rem); max-width:56ch; margin:0 auto 40px; }

/* بطاقات الخدمتين */
.choices{ display:grid; gap:18px; grid-template-columns:1fr; max-width:980px; margin:0 auto; perspective:1400px; }
@media (min-width:900px){ .choices{ grid-template-columns:1fr 1fr; gap:26px; } }
.choice{
  position:relative; text-align:start; border-radius:28px; padding:26px; min-height:330px; overflow:hidden; isolation:isolate;
  border:1px solid var(--s-line); background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  transform-style:preserve-3d; transform:perspective(1200px) rotateX(var(--rx,0)) rotateY(var(--ry,0));
  transition:transform .35s var(--ease-out), box-shadow .35s, border-color .3s;
  display:flex; flex-direction:column; gap:14px;
}
.choice:hover{ border-color:rgba(255,255,255,.25); box-shadow:0 30px 80px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06) inset; }
.choice::before{
  content:''; position:absolute; inset:-1px; z-index:-1; border-radius:inherit; opacity:0; transition:opacity .4s;
  background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.14), transparent 55%);
}
.choice:hover::before{ opacity:1; }
.choice__tag{ font:600 11px/1 var(--f-mono); letter-spacing:.22em; color:var(--s-muted); }
.choice__title{ font-size:clamp(1.6rem,3vw,2.2rem); margin:0; }
.choice__title span{ display:block; font-size:.5em; font-family:var(--f-mono); font-weight:500; color:var(--s-muted); letter-spacing:.05em; margin-top:4px; }
.choice__desc{ color:var(--s-muted); margin:0; max-width:34ch; }
.choice__cta{ margin-top:auto; display:inline-flex; align-items:center; gap:10px; font-weight:700; }
.choice__cta i{
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center; color:#fff;
  transition:transform .35s var(--ease-out);
}
.choice__cta svg{ width:20px; height:20px; }
.choice:hover .choice__cta i{ transform:translateX(-6px) rotate(-10deg); }
.choice--ppt .choice__cta i{ background:var(--grad-ppt); box-shadow:0 8px 24px rgba(236,72,153,.4); }
.choice--rep .choice__cta i{ background:var(--grad-rep); box-shadow:0 8px 24px rgba(16,185,129,.4); }

/* رسم PowerPoint: شرائح تتبدّل */
.choice__art{ position:relative; order:-1; width:100%; height:150px; margin:0 0 6px; pointer-events:none; opacity:.9; }
.choice__art .slides{ inset:0 15% ; }
.choice__art .pages i{ inset:6px 28% 0 28%; }
.choice__art .pages .pen{ right:22%; }
@media (min-width:900px){
  .choice__art{ position:absolute; order:0; inset-inline-start:auto; inset-inline-end:-20px; top:34px; width:250px; height:180px; margin:0; }
  .choice__art .slides{ inset:0; }
  .choice__art .pages i{ inset:10px 40px 0 40px; }
  .choice__art .pages .pen{ right:34px; }
}
.slides{ position:absolute; inset:0; transform-style:preserve-3d; }
.slides i{
  position:absolute; inset:0; border-radius:14px; background:linear-gradient(160deg,rgba(255,255,255,.18),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.2); box-shadow:0 20px 40px rgba(0,0,0,.35);
  transform:translate(calc(var(--i) * 14px), calc(var(--i) * -12px)) rotate(calc(var(--i) * -3deg)); opacity:calc(1 - var(--i) * .22);
  transition:transform .6s var(--ease-out), opacity .6s;
}
.slides i::before{ content:''; position:absolute; left:16px; right:16px; top:18px; height:10px; border-radius:6px; background:var(--grad-ppt); opacity:.9; }
.slides i::after{ content:''; position:absolute; left:16px; right:60px; top:40px; height:70px; border-radius:6px;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.28) 0 6px,transparent 6px 16px); }
.slides i:nth-child(1){ --i:0 } .slides i:nth-child(2){ --i:1 } .slides i:nth-child(3){ --i:2 } .slides i:nth-child(4){ --i:3 }
.choice--ppt:hover .slides i{ animation:shuffle 2.4s var(--ease-io) infinite; animation-delay:calc(var(--i) * -.6s); }
@keyframes shuffle{
  0%   { transform:translate(calc(var(--i) * 14px), calc(var(--i) * -12px)) rotate(calc(var(--i) * -3deg)); }
  25%  { transform:translate(-120px, 10px) rotate(-14deg); opacity:0; }
  26%  { transform:translate(60px, -50px) rotate(6deg); opacity:0; }
  50%  { transform:translate(42px,-36px) rotate(-9deg); opacity:.34; }
  100% { transform:translate(calc(var(--i) * 14px), calc(var(--i) * -12px)) rotate(calc(var(--i) * -3deg)); }
}

/* رسم التقرير: أوراق تتقلّب */
.pages{ position:absolute; inset:0; }
.pages i{
  position:absolute; inset:10px 40px 0 40px; border-radius:6px 6px 10px 10px; background:#fff; opacity:.95;
  box-shadow:0 18px 36px rgba(0,0,0,.35); transform-origin:top center;
  transform:translateY(calc(var(--i) * 10px)) scale(calc(1 - var(--i) * .05)); z-index:calc(4 - var(--i));
  transition:transform .6s var(--ease-out);
}
.pages i::before{ content:''; position:absolute; left:14px; right:14px; top:14px; height:8px; border-radius:4px; background:var(--grad-rep); }
.pages i::after{ content:''; position:absolute; left:14px; right:14px; top:32px; bottom:16px; border-radius:4px;
  background:repeating-linear-gradient(180deg,#CBD5E1 0 4px,transparent 4px 12px); opacity:.8; }
.pages i:nth-child(1){ --i:0 } .pages i:nth-child(2){ --i:1 } .pages i:nth-child(3){ --i:2 }
.choice--rep:hover .pages i:nth-child(1){ animation:flip 2.2s var(--ease-io) infinite; }
@keyframes flip{
  0%{ transform:translateY(0) rotateX(0); } 45%{ transform:translateY(-8px) rotateX(-160deg); opacity:.6; }
  46%{ opacity:0; } 60%{ transform:translateY(20px) scale(.9); opacity:0; } 100%{ transform:translateY(0); opacity:.95; }
}
.pages .pen{
  position:absolute; width:8px; height:90px; border-radius:4px; background:linear-gradient(180deg,var(--amber),#B45309);
  right:34px; bottom:30px; transform:rotate(-35deg); z-index:9; box-shadow:0 10px 20px rgba(0,0,0,.4);
}
.choice--rep:hover .pen{ animation:write 1.4s ease-in-out infinite; }
@keyframes write{ 50%{ transform:rotate(-35deg) translate(-18px,6px); } }

/* خطوات */
.how{ margin-top:70px; display:grid; gap:16px; grid-template-columns:1fr; text-align:start; }
@media (min-width:760px){ .how{ grid-template-columns:repeat(3,1fr); } }
.how div{ padding:18px 20px; border-radius:18px; border:1px solid var(--s-line); background:var(--s-glass); }
.how b{ display:block; font:700 12px/1 var(--f-mono); color:var(--cyan); letter-spacing:.2em; margin-bottom:10px; }
.how p{ margin:0; color:var(--s-muted); font-size:14.5px; }

/* ===================== مشهد المعالج (Slides) ===================== */
.wizard{ padding:10px 0 80px; }
.wizard__top{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:28px; }
.wizard__svc{
  display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:999px; font-size:13px; font-weight:700;
  background:var(--accent); color:#fff; box-shadow:0 8px 24px -8px var(--accent); transition:background .6s;
}
.progress{ display:flex; align-items:center; gap:6px; margin-inline-start:auto; font-family:var(--f-mono); font-size:13px; color:var(--s-muted); }
.progress b{
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-weight:600; font-size:12px;
  border:1px solid var(--s-line); background:var(--s-glass); transition:all .4s var(--ease-out);
}
.progress b.done{ background:var(--accent); border-color:transparent; color:#fff; }
.progress b.now{ background:#fff; color:var(--s-bg); border-color:#fff; transform:scale(1.15); box-shadow:0 0 0 6px rgba(255,255,255,.12); }
.progress i{ width:18px; height:1px; background:var(--s-line); }
.progress i.done{ background:var(--accent); }

.deck{ position:relative; perspective:1600px; min-height:420px; }
.slide{
  position:absolute; inset:0; display:flex; flex-direction:column; gap:20px;
  padding:clamp(22px,4vw,44px); border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035)); border:1px solid var(--s-line);
  -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.7);
  transform-style:preserve-3d; will-change:transform, opacity;
  opacity:0; pointer-events:none;
  transform:translateX(-90px) rotateY(18deg) scale(.94);
  transition:transform .75s var(--ease-out), opacity .55s;
}
.slide.on{ position:relative; opacity:1; pointer-events:auto; transform:none; }
.slide.exit{ transform:translateX(120px) rotateY(-22deg) scale(.9); opacity:0; }
html[data-service="report"] .slide{ transform:translateY(60px) rotateX(-18deg) scale(.96); transform-origin:top; }
html[data-service="report"] .slide.exit{ transform:translateY(-70px) rotateX(14deg) scale(.96); }
html[data-service="report"] .slide.on{ transform:none; }
.slide::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%); background-size:250% 100%;
  animation:sheen 6s linear infinite;
}
@keyframes sheen{ to{ background-position:-250% 0; } }
.slide__num{ font:600 12px/1 var(--f-mono); letter-spacing:.25em; color:var(--accent-2); }
.slide h2{ font-size:clamp(1.5rem,3.6vw,2.4rem); margin:0; }
.slide__hint{ color:var(--s-muted); margin:-8px 0 0; }
.slide .stag > *{ opacity:0; transform:translateY(16px); transition:opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.slide.on .stag > *{ opacity:1; transform:none; }
.slide.on .stag > :nth-child(1){ transition-delay:.15s } .slide.on .stag > :nth-child(2){ transition-delay:.22s }
.slide.on .stag > :nth-child(3){ transition-delay:.29s } .slide.on .stag > :nth-child(4){ transition-delay:.36s }
.slide.on .stag > :nth-child(5){ transition-delay:.43s } .slide.on .stag > :nth-child(n+6){ transition-delay:.5s }

/* بطاقات الاختيار */
.opts{ display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:560px){ .opts{ grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); } }
.opt{
  position:relative; text-align:start; padding:20px 18px; border-radius:20px; min-height:120px;
  border:1px solid var(--s-line); background:rgba(255,255,255,.04); color:var(--s-ink);
  display:flex; flex-direction:column; gap:8px; overflow:hidden;
  transition:transform .3s var(--ease-out), border-color .25s, background .25s, box-shadow .3s;
}
.opt svg{ width:34px; height:34px; color:var(--accent-2); transition:transform .35s var(--ease-out), color .3s; }
.opt b{ font-family:var(--f-head); font-size:1.12rem; }
.opt small{ color:var(--s-muted); font-size:13px; line-height:1.5; }
.opt:hover{ transform:translateY(-4px); border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.08); }
.opt:hover svg{ transform:scale(1.15) rotate(-6deg); }
.opt.on{ border-color:var(--accent); background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 30%,transparent),rgba(255,255,255,.04)); box-shadow:0 12px 40px -14px var(--accent); }
.opt.on svg{ color:#fff; }
.opt.on::after{
  content:''; position:absolute; top:14px; inset-inline-end:14px; width:22px; height:22px; border-radius:50%; background:var(--accent);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 5 5 9-9'/></svg>");
  background-size:14px; background-repeat:no-repeat; background-position:center; animation:popIn .35s var(--ease-out);
}
@keyframes popIn{ from{ transform:scale(0) rotate(-40deg); } }
.opt.pressed{ animation:press .3s var(--ease-out); }
@keyframes press{ 40%{ transform:scale(.96); } }
.opt--lg{ min-height:150px; }
.opt--row{ flex-direction:row; align-items:center; min-height:0; }

/* الحقول */
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-weight:700; font-size:14.5px; }
.field label small{ font-weight:400; color:var(--s-muted); margin-inline-start:6px; }
.field input, .field textarea{
  width:100%; padding:14px 16px; border-radius:14px; border:1px solid var(--s-line); background:rgba(0,0,0,.25); color:#fff;
  outline:none; transition:border-color .25s, box-shadow .25s, background .25s;
}
.field textarea{ min-height:120px; resize:vertical; }
.field input::placeholder, .field textarea::placeholder{ color:rgba(255,255,255,.35); }
.field input:focus, .field textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 25%,transparent); background:rgba(0,0,0,.35); }
.field.bad input, .field.bad textarea{ border-color:#F87171; animation:shake .4s; }
.field .err{ color:#FCA5A5; font-size:13px; display:none; }
.field.bad .err{ display:block; }
@keyframes shake{ 20%,60%{ transform:translateX(-6px) } 40%,80%{ transform:translateX(6px) } }
.grid2{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:640px){ .grid2{ grid-template-columns:1fr 1fr; } }

/* رفع الملفات */
.drop{
  position:relative; border:2px dashed rgba(255,255,255,.22); border-radius:22px; padding:34px 20px; text-align:center;
  background:rgba(255,255,255,.03); transition:border-color .25s, background .25s, transform .25s var(--ease-out); cursor:pointer;
}
.drop:hover, .drop.over{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent); }
.drop.over{ transform:scale(1.01); }
.drop input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.drop__ico{ width:62px; height:62px; margin:0 auto 12px; border-radius:18px; display:grid; place-items:center; background:var(--accent); color:#fff;
  box-shadow:0 12px 30px -8px var(--accent); transition:transform .35s var(--ease-out); }
.drop:hover .drop__ico, .drop.over .drop__ico{ transform:translateY(-6px) rotate(-6deg); }
.drop__ico svg{ width:28px; height:28px; }
.drop b{ display:block; font-size:1.05rem; }
.drop small{ color:var(--s-muted); }
.files{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.file{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:14px; border:1px solid var(--s-line); background:rgba(255,255,255,.05);
  animation:fileIn .5s var(--ease-out);
}
@keyframes fileIn{ from{ opacity:0; transform:translateY(10px) scale(.96); } }
.file__ico{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:rgba(255,255,255,.08); font:700 10px var(--f-mono); color:var(--accent-2); flex:none; }
.file__name{ flex:1; min-width:0; font-size:14px; }
.file__name b{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file__name small{ color:var(--s-muted); font-family:var(--f-mono); font-size:11.5px; }
.file__ok{ width:26px; height:26px; flex:none; }
.file__ok circle{ stroke:var(--emerald); stroke-width:2; fill:none; stroke-dasharray:70; stroke-dashoffset:70; animation:draw .5s .1s var(--ease-out) forwards; }
.file__ok path{ stroke:var(--emerald); stroke-width:2.5; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:24; stroke-dashoffset:24; animation:draw .4s .45s var(--ease-out) forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.file__x{ border:0; background:transparent; color:var(--s-muted); padding:6px; border-radius:8px; }
.file__x:hover{ background:rgba(255,255,255,.1); color:#fff; }
.file__x svg{ width:16px; height:16px; }

/* المراجعة */
.review{ display:grid; gap:10px; grid-template-columns:1fr; }
@media (min-width:640px){ .review{ grid-template-columns:1fr 1fr; } }
.review div{ padding:14px 16px; border-radius:16px; background:rgba(0,0,0,.22); border:1px solid var(--s-line); }
.review div.wide{ grid-column:1 / -1; }
.review small{ display:block; color:var(--s-muted); font-size:12.5px; margin-bottom:4px; }
.review b{ font-weight:600; word-break:break-word; }
.review .chips{ display:flex; flex-wrap:wrap; gap:6px; }
.review .chips span{ padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.08); font-size:13px; font-family:var(--f-mono); }

/* أزرار التنقل */
.slide__nav{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:10px; flex-wrap:wrap; }
.sbtn{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; border-radius:999px; border:1px solid transparent; font-weight:700; font-size:15.5px;
  transition:transform .25s var(--ease-out), box-shadow .25s, background .25s, opacity .2s;
}
.sbtn svg{ width:18px; height:18px; }
.sbtn--next{ background:#fff; color:var(--s-bg); box-shadow:0 12px 30px -10px rgba(255,255,255,.5); margin-inline-start:auto; }
.sbtn--next:hover{ transform:translateY(-3px); box-shadow:0 18px 40px -10px rgba(255,255,255,.55); }
.sbtn--send{ background:var(--accent); color:#fff; padding:16px 34px; font-size:17px; box-shadow:0 16px 40px -10px var(--accent); }
.sbtn--send:hover{ transform:translateY(-3px) scale(1.02); }
.sbtn--ghost{ background:transparent; border-color:var(--s-line); color:var(--s-muted); }
.sbtn--ghost:hover{ background:rgba(255,255,255,.08); color:#fff; }
.sbtn:disabled{ opacity:.5; pointer-events:none; }
.sbtn .ripple{ position:absolute; border-radius:50%; background:rgba(0,0,0,.15); transform:scale(0); animation:ripple .6s var(--ease-out) forwards; pointer-events:none; }
.sbtn--send .ripple, .sbtn--ghost .ripple{ background:rgba(255,255,255,.3); }
@keyframes ripple{ to{ transform:scale(4); opacity:0; } }
.sbtn.busy{ pointer-events:none; }
.sbtn.busy::after{ content:''; width:16px; height:16px; border-radius:50%; border:2px solid currentColor; border-top-color:transparent; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.kbd{ font:500 12px var(--f-mono); color:var(--s-muted); display:none; }
@media (hover:hover){ .kbd{ display:inline-flex; gap:6px; align-items:center; } }
.kbd b{ padding:2px 7px; border-radius:6px; border:1px solid var(--s-line); background:rgba(255,255,255,.06); font-weight:600; }

/* ===================== النجاح ===================== */
.success{ text-align:center; padding:40px 0 80px; }
.check{ width:120px; height:120px; margin:0 auto 24px; position:relative; }
.check svg{ width:100%; height:100%; }
.check circle{ fill:none; stroke:var(--emerald); stroke-width:3; stroke-dasharray:330; stroke-dashoffset:330; animation:draw .9s var(--ease-out) forwards; }
.check path{ fill:none; stroke:#fff; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:60; stroke-dashoffset:60; animation:draw .5s .7s var(--ease-out) forwards; }
.check::before{ content:''; position:absolute; inset:0; border-radius:50%; background:var(--emerald); transform:scale(0); animation:fill .6s .55s var(--ease-out) forwards; z-index:-1; }
@keyframes fill{ to{ transform:scale(1); } }
.check::after{ content:''; position:absolute; inset:-12px; border-radius:50%; border:2px solid var(--emerald); opacity:0; animation:ring 1.4s 1s var(--ease-out) infinite; }
@keyframes ring{ 0%{ transform:scale(.8); opacity:.8 } 100%{ transform:scale(1.5); opacity:0 } }
.success h2{ font-size:clamp(1.7rem,4.5vw,2.6rem); animation:up .7s .9s var(--ease-out) both; }
.success p{ color:var(--s-muted); animation:up .7s 1.05s var(--ease-out) both; }
.order-no{
  display:inline-flex; flex-direction:column; align-items:center; gap:4px; padding:18px 34px; border-radius:22px; margin:18px 0 28px;
  border:1px solid var(--s-line); background:var(--s-glass); animation:up .7s 1.2s var(--ease-out) both;
}
.order-no small{ color:var(--s-muted); font-size:12.5px; }
.order-no b{ font:700 clamp(1.6rem,5vw,2.4rem)/1.1 var(--f-mono); letter-spacing:.06em;
  background:var(--grad-txt); background-size:300% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shine 5s linear infinite; }
.success .demo-note{ display:inline-block; margin-top:10px; padding:8px 14px; border-radius:12px; font-size:13px; background:rgba(245,158,11,.14); color:#FCD34D; border:1px solid rgba(245,158,11,.3); }
@keyframes up{ from{ opacity:0; transform:translateY(18px); } }
.confetti{ position:fixed; inset:0; pointer-events:none; z-index:60; }

/* تنبيه عام */
.snack{
  position:fixed; bottom:22px; left:50%; transform:translate(-50%,30px); z-index:99; padding:12px 18px; border-radius:14px;
  background:#fff; color:var(--s-bg); font-weight:600; font-size:14px; box-shadow:0 20px 50px rgba(0,0,0,.5); opacity:0; transition:all .4s var(--ease-out);
}
.snack.show{ opacity:1; transform:translate(-50%,0); }

.sftr{ position:relative; z-index:1; padding:24px 0 40px; text-align:center; color:var(--s-muted); font-size:13px; }
.sftr a{ color:var(--s-ink); }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .landing h1 .w{ opacity:1; transform:none; }
}

/* ===================== الشعار ===================== */
.logo__mark{ width:44px; height:44px; }
.logo__word{ font:800 22px/1 var(--f-head); letter-spacing:.02em;
  background:var(--grad-txt); background-size:300% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shine 6s linear infinite; }
.logo__word b{ font-weight:800; }
.brand-line{ font:600 11px/1 var(--f-mono); letter-spacing:.28em; color:var(--s-muted); }
.landing .tagline{ margin:-26px auto 34px; font:600 12px/1 var(--f-mono); letter-spacing:.3em; color:var(--s-muted); }
.sftr img{ width:28px; height:28px; margin:0 auto 8px; opacity:.8; }

/* ===================== التسعير ===================== */
.units{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:16px 18px; border-radius:18px; border:1px solid var(--s-line); background:rgba(0,0,0,.2); }
.units__lbl b{ display:block; font-family:var(--f-head); font-size:1.05rem; }
.units__lbl small{ color:var(--s-muted); font-size:12.5px; }
.stepper{ display:inline-flex; align-items:center; border:1px solid var(--s-line); border-radius:999px; background:rgba(255,255,255,.05); overflow:hidden; }
.stepper button{ width:46px; height:46px; border:0; background:transparent; color:#fff; font-size:22px; font-weight:700; transition:background .2s; }
.stepper button:hover{ background:var(--accent); }
.stepper input{ width:64px; height:46px; text-align:center; border:0; background:transparent; color:#fff; font:700 1.25rem var(--f-mono); outline:none; -moz-appearance:textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; }
.opt.off{ opacity:.45; filter:grayscale(.6); cursor:not-allowed; }
.opt.off:hover{ transform:none; }
.opt__price{ display:inline-block; margin-inline-start:6px; padding:2px 8px; border-radius:999px; font:600 12px var(--f-mono); background:rgba(255,255,255,.1); color:var(--accent-2); vertical-align:middle; }
.opt.on .opt__price{ background:rgba(255,255,255,.2); color:#fff; }
.total{ padding:16px 18px; border-radius:18px; border:1px solid var(--s-line); background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 18%,transparent),rgba(255,255,255,.03)); }
.total__rows{ display:grid; grid-template-columns:1fr auto; gap:6px 14px; font-size:14px; color:var(--s-muted); }
.total__rows b{ color:var(--s-ink); font-family:var(--f-mono); font-weight:600; }
.total__sum{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; padding-top:10px; border-top:1px dashed rgba(255,255,255,.18); font-weight:700; }
.total__sum b{ font-size:1.6rem; background:var(--grad-txt); background-size:300% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shine 5s linear infinite; }
.total.tick .total__sum b{ animation:shine 5s linear infinite, tickUp .35s var(--ease-out); }
@keyframes tickUp{ from{ transform:translateY(6px); opacity:0; } }
.review .total--review{ background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 22%,transparent),rgba(0,0,0,.2)); }
.review .total--review small{ display:none; }

/* ===================== اللغتان ===================== */
.lang{
  margin-inline-start:auto; display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px;
  border:1px solid var(--s-line); background:var(--s-glass); color:var(--s-ink); font:700 13px var(--f-mono); letter-spacing:.06em;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); transition:background .2s, transform .25s var(--ease-out), border-color .2s;
}
.lang svg{ width:18px; height:18px; color:var(--accent-2); }
.lang:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3); transform:translateY(-2px); }
html[lang="en"] body{ font-family:'Inter', var(--f-body); }
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3, html[lang="en"] .opt b, html[lang="en"] .units__lbl b, html[lang="en"] .choice__title{ font-family:'Inter', var(--f-head); letter-spacing:-.02em; }
html[lang="en"] .landing h1{ max-width:18ch; }
/* في LTR تنعكس اتجاهات الأسهم والانزلاق */
[dir="ltr"] .sbtn svg, [dir="ltr"] .choice__cta svg, [dir="ltr"] .shdr__back svg{ transform:scaleX(-1); }
[dir="ltr"] .choice:hover .choice__cta i{ transform:translateX(6px) rotate(10deg); }
[dir="ltr"] .slide{ transform:translateX(90px) rotateY(-18deg) scale(.94); }
[dir="ltr"] .slide.exit{ transform:translateX(-120px) rotateY(22deg) scale(.9); }
[dir="ltr"] .slide.on{ transform:none; }
[dir="ltr"] .snack{ transform:translate(-50%,30px); } [dir="ltr"] .snack.show{ transform:translate(-50%,0); }
.actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.actions--top{ margin-top:26px; }
.sbtn--full{ width:100%; margin:0; }

/* ===================== بطاقات الخدمة: الرسم في عمود مستقل (لا تداخل) ===================== */
@media (min-width:900px){
  .choice{ display:grid; grid-template-columns:1fr 230px; grid-template-rows:auto auto 1fr auto; column-gap:18px; align-items:start; min-height:300px; }
  .choice__tag, .choice__title, .choice__desc, .choice__cta{ grid-column:1; }
  .choice__cta{ align-self:end; }
  .choice__art{ position:relative; inset:auto; top:auto; order:0; grid-column:2; grid-row:1 / -1; width:100%; height:100%; min-height:200px; margin:0; align-self:stretch; }
  .choice__art .slides{ inset:24px 0 24px 0; }
  .choice__art .pages i{ inset:18px 14% 10px 14%; }
  .choice__art .pages .pen{ right:14%; bottom:24px; }
}
.choice__title span:last-child{ letter-spacing:.08em; }
html[lang="ar"] .choice__title span:last-child, html[lang="ar"] .choice__tag, html[lang="ar"] .tagline, html[lang="ar"] .how b, html[lang="ar"] .slide__num, html[lang="ar"] .brand-line, html[lang="ar"] .logo small{ font-family:var(--f-body); letter-spacing:0; font-weight:600; }

/* ===================== التقرير: صفحات/كلمات + تلميحات ===================== */
.seg{ display:inline-flex; padding:4px; border-radius:999px; border:1px solid var(--s-line); background:rgba(0,0,0,.25); gap:4px; }
.seg button{ padding:9px 18px; border-radius:999px; border:0; background:transparent; color:var(--s-muted); font-weight:700; transition:all .25s var(--ease-out); }
.seg button.on{ background:#fff; color:var(--s-bg); box-shadow:0 6px 18px -6px rgba(255,255,255,.5); }
.units__lbl .note{ display:block; margin-top:8px; font-style:normal; font-size:13px; font-weight:700; color:#FCD34D; padding:6px 10px; border-radius:10px; background:rgba(245,158,11,.14); border:1px solid rgba(245,158,11,.35); }
.tip{ margin:0; padding:10px 14px; border-radius:12px; font-size:14px; font-weight:600; color:#C4B5FD; background:rgba(124,58,237,.16); border:1px dashed rgba(167,139,250,.5); }
.tip--notes{ color:#6EE7B7; background:rgba(16,185,129,.12); border-color:rgba(110,231,183,.45); }
.units[hidden]{ display:none; }

/* ===================== 4 خدمات ===================== */
@media (min-width:900px){ .choices{ grid-template-columns:1fr 1fr; } }
@media (min-width:1180px){ .choices{ max-width:1180px; } }
.choice--hw .choice__cta i{ background:linear-gradient(135deg,#F59E0B,#EC4899); box-shadow:0 8px 24px rgba(245,158,11,.4); }
.choice--sv .choice__cta i{ background:linear-gradient(135deg,#10B981,#22D3EE); box-shadow:0 8px 24px rgba(16,185,129,.4); }

/* رسم حل الواجب: ورقة + علامة صح + قلم */
.hw{ position:absolute; inset:0; }
.hw__sheet{ position:absolute; inset:10px 22% 6px 22%; border-radius:8px; background:#fff; box-shadow:0 18px 36px rgba(0,0,0,.35); display:flex; flex-direction:column; gap:10px; padding:18px 14px; }
.hw__sheet b{ height:7px; border-radius:4px; background:#CBD5E1; width:80%; }
.hw__sheet b:nth-child(2){ width:60%; } .hw__sheet b:nth-child(3){ width:90%; } .hw__sheet b:nth-child(4){ width:45%; }
.hw__check{ position:absolute; right:14%; bottom:18px; width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,#10B981,#A3E635); box-shadow:0 10px 24px rgba(16,185,129,.5); transform:scale(0); }
.hw__check::after{ content:''; position:absolute; left:15px; top:11px; width:12px; height:20px; border:solid #fff; border-width:0 4px 4px 0; transform:rotate(45deg); }
.choice--hw:hover .hw__check{ animation:checkPop .8s var(--ease-out) .5s forwards; }
@keyframes checkPop{ 60%{ transform:scale(1.15) } 100%{ transform:scale(1) } }
.pen--hw{ right:auto; left:16%; bottom:14px; background:linear-gradient(180deg,#38BDF8,#1D4ED8); }
.choice--hw:hover .pen--hw{ animation:write 1.2s ease-in-out infinite; }
.choice--hw .hw__sheet b{ transform-origin:right; }
.choice--hw:hover .hw__sheet b{ animation:lineIn .5s var(--ease-out) both; }
.choice--hw:hover .hw__sheet b:nth-child(2){ animation-delay:.12s } .choice--hw:hover .hw__sheet b:nth-child(3){ animation-delay:.24s } .choice--hw:hover .hw__sheet b:nth-child(4){ animation-delay:.36s }
@keyframes lineIn{ from{ transform:scaleX(0); background:#38BDF8 } to{ transform:scaleX(1) } }

/* رسم الاستبيان: بطاقة بمربعات تُعلَّم تباعاً */
.sv{ position:absolute; inset:14px 18% 10px 18%; border-radius:14px; background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05)); border:1px solid rgba(255,255,255,.22); box-shadow:0 20px 40px rgba(0,0,0,.35); display:flex; flex-direction:column; justify-content:center; gap:12px; padding:16px; }
.sv i{ display:flex; align-items:center; gap:10px; }
.sv i::after{ content:''; flex:1; height:8px; border-radius:4px; background:rgba(255,255,255,.28); }
.sv i b{ width:18px; height:18px; border-radius:5px; border:2px solid rgba(255,255,255,.5); position:relative; flex:none; }
.sv i b::after{ content:''; position:absolute; left:4px; top:1px; width:5px; height:9px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg) scale(0); }
.choice--sv:hover .sv i b{ animation:tick 2.4s ease-in-out infinite; }
.choice--sv:hover .sv i:nth-child(2) b{ animation-delay:.3s } .choice--sv:hover .sv i:nth-child(3) b{ animation-delay:.6s } .choice--sv:hover .sv i:nth-child(4) b{ animation-delay:.9s }
@keyframes tick{ 0%,15%{ background:transparent } 25%,80%{ background:#10B981; border-color:#10B981 } 100%{ background:transparent } }
.choice--sv:hover .sv i b::after{ animation:tickMark 2.4s ease-in-out infinite; }
.choice--sv:hover .sv i:nth-child(2) b::after{ animation-delay:.3s } .choice--sv:hover .sv i:nth-child(3) b::after{ animation-delay:.6s } .choice--sv:hover .sv i:nth-child(4) b::after{ animation-delay:.9s }
@keyframes tickMark{ 0%,15%{ transform:rotate(45deg) scale(0) } 30%,80%{ transform:rotate(45deg) scale(1) } 100%{ transform:rotate(45deg) scale(0) } }

/* الشروط */
.tip--warn{ color:#FCD34D; background:rgba(245,158,11,.14); border-color:rgba(245,158,11,.45); }
.terms{ display:flex; flex-direction:column; gap:10px; }
.term{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:16px; border:1px solid var(--s-line); background:rgba(255,255,255,.04); cursor:pointer; transition:all .25s var(--ease-out); }
.term:hover{ background:rgba(255,255,255,.08); }
.term input{ position:absolute; opacity:0; width:0; height:0; }
.term i{ width:24px; height:24px; border-radius:7px; border:2px solid rgba(255,255,255,.35); flex:none; position:relative; transition:all .2s; }
.term i::after{ content:''; position:absolute; left:7px; top:2px; width:6px; height:12px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg) scale(0); transition:transform .2s var(--ease-out); }
.term.on{ border-color:var(--emerald); background:rgba(16,185,129,.12); }
.term.on i{ background:var(--emerald); border-color:var(--emerald); }
.term.on i::after{ transform:rotate(45deg) scale(1); }
.term span{ font-weight:600; }