/* A+ Lab v2: تصميم هادي ومرتب (المرحلة ١: الهيدر + الواجهة + الشريط + "لمين نصمم؟")
   الألوان والخطوط من tokens.css. زوايا ناعمة، وحدود خفيفة، والأزرق للأفعال بس */
:root{
  --r:12px; --r-sm:8px;
  --soft:color-mix(in srgb,var(--ink) 5%,var(--paper));     /* خلفية لوحة هادئة */
  --hair:color-mix(in srgb,var(--ink) 12%,transparent);      /* حدود ١ بكسل */
  --blue-tint:color-mix(in srgb,var(--blue) 9%,var(--paper));
  --shadow:0 1px 2px rgba(20,21,26,.06),0 12px 28px -14px rgba(20,21,26,.22);
  --wrap:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.75 var(--font-body)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img{display:block;max-width:100%;height:auto}
.wrap{width:min(var(--wrap),100% - 2*var(--pad-x));margin-inline:auto}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* ---------- الأزرار: رئيسي واحد وثانوي واحد ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 28px;border-radius:999px;font:700 17px var(--font-display);white-space:nowrap;transition:background-color .2s,color .2s,border-color .2s,transform .2s}
.btn-main{background:var(--blue);color:var(--cream)}
.btn-main:hover{background:var(--ink);color:var(--paper)}
.btn-alt{border:1px solid color-mix(in srgb,var(--ink) 30%,transparent);color:var(--ink)}
.btn-alt:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.btn svg{width:20px;height:20px;flex:none}
.btn-sm{height:44px;padding:0 20px;font-size:15px}

/* ---------- شريط العرض: رفيع وهادي ---------- */
.offer{display:flex;align-items:center;justify-content:center;gap:10px;min-height:38px;padding:6px 16px;background:var(--ink);color:var(--cream);font:500 14px var(--font-body);text-align:center}
.offer[hidden]{display:none}
.offer i{width:7px;height:7px;border-radius:50%;background:var(--yellow);flex:none}
.offer a{color:var(--yellow);font-weight:600}

/* ---------- الهيدر: شفاف فوق الواجهة، وفاتح مع النزول ---------- */
.hd{position:sticky;top:0;z-index:30;transition:background-color .25s,box-shadow .25s}
.hd.solid{background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:saturate(1.2) blur(8px);box-shadow:0 1px 0 var(--hair)}
.hd .wrap{display:flex;align-items:center;gap:36px;height:76px}
.logo{display:flex;align-items:center;gap:.26em;font-size:30px;direction:ltr}
.logo .mark{width:1.3em;height:1.3em;flex:none}
.logo .word{display:flex;flex-direction:column;gap:.14em}
.logo .lab{font-family:var(--font-logo);font-size:1.12em;line-height:.9}
.logo .by{display:flex;align-items:center;gap:.35em;font:500 .24em/1 var(--font-latin);color:var(--ink-3)}
.logo .by svg{height:1.5em;width:1.5em;flex:none}
.hd nav{display:flex;gap:30px;font:500 16px var(--font-body);margin-inline-start:auto}
.hd nav a{position:relative;padding:6px 0;color:var(--ink-2)}
.hd nav a::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;border-radius:2px;background:var(--blue);transform:scaleX(0);transition:transform .2s}
.hd nav a:hover{color:var(--ink)}
.hd nav a:hover::after,.hd nav a.here::after{transform:scaleX(1)}
.menu-btn{display:none;width:44px;height:44px;border-radius:50%;align-items:center;justify-content:center;flex-direction:column;gap:5px;border:1px solid var(--hair)}
.menu-btn span{width:18px;height:2px;border-radius:2px;background:var(--ink)}

/* ---------- عنوان القسم: سطر صغير ملوّن + عنوان كبير + وصف ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 15px var(--font-body);color:var(--blue)}
.eyebrow::before{content:"";width:28px;height:2px;border-radius:2px;background:currentColor}
.sec{padding:112px 0}
.sec-h{display:flex;flex-direction:column;gap:14px;max-width:640px;margin-bottom:56px}
.sec-h h2{margin:0;font:700 46px/1.25 var(--font-display)}
.sec-h p{margin:0;font-size:18px;color:var(--ink-3)}

/* ---------- الواجهة ---------- */
.hero{padding:56px 0 96px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:64px;align-items:center}
.hero h1{margin:18px 0 0;font:800 76px/1.12 var(--font-display);letter-spacing:0}
.hero h1 .ap{font:400 1.08em/1 var(--font-logo);color:var(--blue);direction:ltr;display:inline-block}
.hero .lead{margin:22px 0 0;max-width:540px;font-size:20px;line-height:1.85;color:var(--ink-2)}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.facts{display:flex;flex-wrap:wrap;gap:0;margin:44px 0 0;padding:0;list-style:none}
.facts li{display:flex;align-items:center;gap:10px;padding-inline-end:22px;margin-inline-end:22px;border-inline-end:1px solid var(--hair);font:500 15px var(--font-body);color:var(--ink-2)}
.facts li:last-child{border:0;margin:0;padding:0}
.facts svg{width:20px;height:20px;flex:none;color:var(--blue)}

/* تركيبة النماذج: هادية، ميلان خفيف، وظل ناعم */
.stack{position:relative;aspect-ratio:1/1;border-radius:24px;background:var(--soft)}
.stack img{position:absolute;border-radius:var(--r-sm);box-shadow:var(--shadow);background:var(--white)}
.stack .s1{width:44%;top:12%;inset-inline-start:9%;transform:rotate(-3deg)}
.stack .s2{width:38%;top:8%;inset-inline-end:8%;transform:rotate(3deg)}
.stack .s3{width:62%;bottom:9%;inset-inline-start:19%;transform:rotate(-1deg)}
.stack .tag{position:absolute;top:22px;inset-inline-end:22px;z-index:2;display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--paper);box-shadow:var(--shadow);font:600 13px var(--font-body)}
.stack .tag i{width:8px;height:8px;border-radius:50%;background:var(--yellow)}

/* ---------- الشريط المتحرك ---------- */
.marquee{overflow:hidden;background:var(--ink);color:var(--cream);padding:20px 0;direction:ltr}
.marquee .track{display:flex;width:max-content;animation:slide 50s linear infinite}
.marquee span{display:flex;align-items:center;gap:28px;padding-inline-end:28px;font:600 18px var(--font-display);white-space:nowrap;direction:rtl}
.marquee span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--yellow)}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee:hover .track{animation-play-state:paused}

/* ---------- لمين نصمم؟ ---------- */
.cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.cat{display:flex;flex-direction:column;gap:14px;padding:28px 24px 24px;border-radius:var(--r);background:var(--white);border:1px solid var(--hair);transition:transform .25s,box-shadow .25s,border-color .25s}
.cat:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.cat .ic{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--blue-tint);color:var(--blue)}
.cat .ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.cat h3{margin:4px 0 0;font:700 21px/1.4 var(--font-display)}
.cat p{margin:0;font-size:15px;line-height:1.7;color:var(--ink-3);flex:1}
.cat .foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:16px;border-top:1px solid var(--hair)}
.cat .from{font-size:14px;color:var(--ink-3)}
.cat .from b{font:700 18px var(--font-display);color:var(--ink)}
.cat .go{font:600 15px var(--font-body);color:var(--blue);white-space:nowrap}
.cat.help{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.cat.help .ic{background:color-mix(in srgb,var(--cream) 12%,transparent);color:var(--yellow)}
.cat.help p{color:var(--ink-on-dark)}
.cat.help .foot{border-color:color-mix(in srgb,var(--cream) 18%,transparent)}
.cat.help .go{color:var(--yellow)}

/* ---------- واتساب عائم (جوال) ---------- */
.fab{display:none}

/* ---------- حركة دخول خفيفة ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .marquee .track{animation:none}
  .cat,.btn{transition:none}
}

/* ---------- الكمبيوتر الصغير والآيباد ---------- */
@media (max-width:1100px){
  .hero h1{font-size:60px}
  .cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hd nav{gap:22px}
}

/* ---------- الجوال (التصميم الأساسي بعرض ٣٦٠) ---------- */
@media (max-width:820px){
  body{font-size:16px}
  .hd .wrap{height:64px;gap:10px}
  .logo{font-size:24px}
  .hd nav{display:none;position:absolute;top:64px;inset-inline:0;flex-direction:column;gap:0;padding:8px 16px 16px;background:var(--paper);box-shadow:0 12px 24px -12px rgba(20,21,26,.25)}
  .hd nav.open{display:flex}
  .hd nav a{padding:14px 0;font-size:17px;border-bottom:1px solid var(--hair)}
  .hd nav a::after{display:none}
  .hd .btn-sm{display:none}
  .menu-btn{margin-inline-start:auto}
  .menu-btn{display:flex}
  .hero{padding:28px 0 64px}
  .hero .wrap{grid-template-columns:1fr;gap:40px}
  .hero h1{font-size:46px;margin-top:14px}
  .hero .lead{font-size:17px;margin-top:16px}
  .hero .cta{flex-direction:column;margin-top:28px}
  .hero .cta .btn{width:100%;height:52px}
  .facts{flex-direction:column;gap:12px;margin-top:30px}
  .facts li{border:0;margin:0;padding:0;font-size:15px}
  .stack{border-radius:18px}
  .marquee{padding:14px 0}
  .marquee span{font-size:16px;gap:20px;padding-inline-end:20px}
  .sec{padding:72px 0}
  .sec-h{margin-bottom:32px;gap:10px}
  .sec-h h2{font-size:34px}
  .sec-h p{font-size:16px}
  .cats{grid-template-columns:1fr;gap:12px}
  .cat{display:grid;grid-template-columns:48px 1fr;grid-template-areas:"ic t" "ic p" "f f";gap:4px 14px;padding:18px}
  .cat .ic{grid-area:ic;width:48px;height:48px;border-radius:12px}
  .cat .ic svg{width:24px;height:24px}
  .cat h3{grid-area:t;margin:0;font-size:18px}
  .cat p{grid-area:p;font-size:14px}
  .cat .foot{grid-area:f;margin-top:10px;padding-top:12px}
  .cat:hover{transform:none}
  .fab{display:flex;position:fixed;bottom:calc(14px + env(safe-area-inset-bottom,0px));inset-inline:16px;z-index:40;align-items:center;justify-content:center;gap:10px;height:54px;border-radius:999px;background:var(--blue);color:var(--cream);font:700 17px var(--font-display);box-shadow:0 10px 24px -10px rgba(43,59,255,.6)}
  .fab svg{width:22px;height:22px}
  body{padding-bottom:84px}
}

/* ---------- الهوك: "تصميم بدرجة" تطلع، وA+ تنختم، والقلم الأحمر يرسم الدائرة (نفس افتتاحية الموقع الأول) ---------- */
.hero h1{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.hero h1 .l1{display:block}
.aplus{position:relative;display:inline-block;direction:ltr;padding:0 30px;margin-top:4px;font:400 150px/1 var(--font-logo);color:var(--blue)}
.ap-t{display:inline-block}
.pen{position:absolute;top:-12px;left:-8px;width:calc(100% + 30px);height:calc(100% + 30px);overflow:visible;pointer-events:none}
.pen ellipse{fill:none;stroke:var(--red);stroke-linecap:round;transform-box:fill-box;transform-origin:center}
.pen .p1{stroke-width:2.6;transform:rotate(-6deg);stroke-dasharray:1 1}
.pen .p2{stroke-width:1.3;transform:rotate(4deg);stroke-dasharray:.8 1;stroke-dashoffset:-.08}
@keyframes rise{from{opacity:0;transform:translateY(22px)}}
@keyframes stampIn{0%{opacity:0;transform:scale(2.2) rotate(-8deg)}60%{opacity:1;transform:scale(.9) rotate(2deg)}80%{transform:scale(1.04)}100%{transform:none}}
@keyframes draw{from{stroke-dashoffset:1}}
@keyframes draw2{from{stroke-dashoffset:.82}}
@keyframes drop{0%{opacity:0;translate:0 -90px}70%{opacity:1;translate:0 6px}100%{translate:0 0}}
@media (prefers-reduced-motion:no-preference){
  .hero .eyebrow{animation:rise .5s .05s cubic-bezier(.2,.8,.2,1) backwards}
  .hero h1 .l1{animation:rise .6s .15s cubic-bezier(.2,.8,.2,1) backwards}
  .ap-t{animation:stampIn .55s .5s cubic-bezier(.3,1.4,.5,1) backwards}
  .pen .p1{animation:draw .6s 1s cubic-bezier(.6,0,.3,1) backwards}
  .pen .p2{animation:draw2 .45s 1.45s cubic-bezier(.6,0,.3,1) backwards}
  .hero .lead{animation:rise .5s 1.1s ease-out backwards}
  .hero .cta{animation:rise .5s 1.25s ease-out backwards}
  .facts{animation:rise .5s 1.4s ease-out backwards}
  .stack .s2{animation:drop .7s .55s cubic-bezier(.2,.8,.2,1) backwards}
  .stack .s1{animation:drop .7s .75s cubic-bezier(.2,.8,.2,1) backwards}
  .stack .s3{animation:drop .7s .95s cubic-bezier(.2,.8,.2,1) backwards}
}
@media (max-width:1100px){.aplus{font-size:120px}}
@media (max-width:820px){
  .aplus{font-size:96px;padding:0 18px}
  .pen{top:-8px;left:-6px;width:calc(100% + 20px);height:calc(100% + 18px)}
  .pen .p1{stroke-width:3.2}
  .pen .p2{stroke-width:1.6}
}