/* ═══════════════════════════════════════════════════════════════
   أحمد الشحي — نظام تصميم الفانيل (وريث Belief Landing حرفيًا)
   الألوان والخطوط والحركة نفسها — روح وحدة عبر كل الصفحات.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#0F1317; --bg2:#0B0E11;
  --panel:#12161C; --panel2:#12161B;
  --card:#151A20; --card2:#171D24; --card3:#1F2731; --card4:#232B36;
  --line:#2A333E; --line2:#1F2731; --line3:#171D24;
  --ink:#EDE8DD; --body:#A8A79E; --bright:#C9C6BA; --dim:#5C6672; --dim2:#8A9099;
  --amber:#E5A13C; --amber2:#F0C179; --green:#869B59;
  --ease:cubic-bezier(0.22,1,0.36,1);
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'IBM Plex Sans Arabic','Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--amber2);text-decoration:none}
a:hover{color:var(--amber)}
::selection{background:rgba(229,161,60,.3)}
input::placeholder{color:var(--dim)}
/* height:auto ليست تجميلًا: سمتا width/height في الوسم تُترجمان إلى
   ارتفاعٍ بالبكسل، وما لم يُلغَ هنا يفوز على aspect-ratio في السطر
   فتصير الصورة شريطًا طويلًا مقصوصًا (waterfall صارت 518×2500). */
img{max-width:100%;height:auto;display:block}

/* ── الحركات (نفس keyframes الأساس) ── */
@keyframes ctaPulse{0%{box-shadow:0 0 0 0 rgba(229,161,60,.6)}100%{box-shadow:0 0 0 30px rgba(229,161,60,0)}}
@keyframes giftGlow{0%{box-shadow:0 0 0 0 rgba(229,161,60,0)}35%{box-shadow:0 0 60px -6px rgba(229,161,60,.4)}100%{box-shadow:0 0 0 0 rgba(229,161,60,0)}}
@keyframes btnShine{0%{transform:translateX(170%)}14%{transform:translateX(-170%)}100%{transform:translateX(-170%)}}
@keyframes elFlash{0%{box-shadow:0 0 0 0 rgba(229,161,60,0)}18%{box-shadow:0 0 48px -4px rgba(229,161,60,.55)}38%{box-shadow:0 0 10px -2px rgba(229,161,60,.12)}58%{box-shadow:0 0 44px -6px rgba(229,161,60,.42)}100%{box-shadow:0 0 0 0 rgba(229,161,60,0)}}
@keyframes cardMark{0%{transform:none;box-shadow:0 0 0 0 rgba(229,161,60,0)}30%{transform:scale(1.035);box-shadow:0 0 42px -4px rgba(229,161,60,.5)}100%{transform:none;box-shadow:0 0 0 0 rgba(229,161,60,0)}}
@keyframes txtFlash{0%{text-shadow:none}35%{text-shadow:0 0 22px rgba(240,193,121,.9),0 0 60px rgba(229,161,60,.45)}100%{text-shadow:none}}

/* ── هيكل عام ── */
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.wrap-md{max-width:860px;margin:0 auto;padding:0 24px}
.wrap-lg{max-width:1060px;margin:0 auto;padding:0 24px}
section{padding:110px 24px}
.sec-alt{background:var(--bg2);border-top:1px solid var(--line3)}
.sec-panel{background:var(--panel);border-top:1px solid var(--line2)}

/* ── نصوص ── */
.kicker{color:var(--amber);font-family:Alexandria,sans-serif;font-weight:700;font-size:13.5px;letter-spacing:.06em;margin:0 0 18px}
h1{margin:0 0 24px;font-family:Alexandria,sans-serif;font-weight:900;font-size:clamp(30px,4.4vw,52px);line-height:1.5;color:var(--ink)}
h2{margin:0 0 28px;font-family:Alexandria,sans-serif;font-weight:900;font-size:clamp(26px,3.6vw,40px);line-height:1.55;color:var(--ink)}
h3{margin:0 0 12px;font-family:Alexandria,sans-serif;font-weight:700;font-size:20px;color:var(--ink)}
.lead{font-weight:300;font-size:clamp(16px,1.6vw,19px);line-height:1.9;color:var(--body)}
.body-sm{font-weight:300;font-size:15.5px;line-height:1.9;color:var(--body)}
.soundbite{font-family:Alexandria,sans-serif;font-weight:700;font-size:clamp(18px,2.2vw,25px);line-height:1.8;color:var(--amber)}
.dim{color:var(--dim)}

/* ── أزرار ── */
.btn{position:relative;overflow:hidden;display:inline-block;background:linear-gradient(135deg,var(--amber),var(--amber2));color:#0F1317;font-family:Alexandria,sans-serif;font-weight:700;font-size:16.5px;padding:16px 30px;border-radius:14px;border:none;cursor:pointer;text-align:center;transition:filter .3s}
.btn:hover{filter:brightness(1.08);color:#0F1317}
.btn-lg{font-size:18px;padding:18px 40px}
.btn-ghost{display:inline-block;background:transparent;color:var(--amber2);border:1px solid rgba(229,161,60,.45);border-radius:14px;padding:14px 24px;font-family:Alexandria,sans-serif;font-weight:700;font-size:15px;cursor:pointer;text-align:center;transition:background .3s}
.btn-ghost:hover{background:rgba(229,161,60,.1)}
.btn-wa{display:inline-flex;align-items:center;justify-content:center;gap:11px;background:#25D366;color:#08130B;font-family:Alexandria,sans-serif;font-weight:700;font-size:16.5px;padding:15px 30px;border-radius:14px;border:none;cursor:pointer;text-align:center;transition:filter .3s;box-shadow:0 6px 20px rgba(37,211,102,.22)}
.btn-wa:hover{filter:brightness(1.06);color:#08130B}
.btn-wa svg{width:23px;height:23px;flex:none}
.btn .shine{position:absolute;inset:0;transform:translateX(170%);background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.4) 50%,transparent 58%);animation:btnShine 6s linear infinite;pointer-events:none}
.btn span.t{position:relative}
.no-thanks{display:inline-block;margin-top:22px;color:var(--dim);font-size:14px;font-weight:300;border-bottom:1px dashed var(--line);cursor:pointer}
.no-thanks:hover{color:var(--dim2)}

/* ── بطاقات ── */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:32px 28px;transition:transform .4s var(--ease),border-color .4s}
.card:hover{transform:translateY(-4px)}
.card-hi{background:var(--card4);border:1px solid rgba(229,161,60,.5);border-radius:14px;padding:36px 30px;position:relative}
.badge{position:absolute;top:-13px;right:28px;background:linear-gradient(135deg,var(--amber),var(--amber2));color:#0F1317;font-family:Alexandria,sans-serif;font-weight:700;font-size:12.5px;padding:5px 14px;border-radius:999px}
.pill{display:inline-block;background:rgba(15,19,23,.75);color:var(--body);font-size:12.5px;padding:5px 12px;border-radius:999px}
.pill-amber{background:rgba(229,161,60,.85);color:#0F1317;font-weight:700}

/* ── quote / تمرين ── */
.quotebox{background:var(--card);border:1px solid var(--line2);border-radius:14px;padding:32px 28px}
.qmark{font-family:Alexandria,sans-serif;font-size:44px;line-height:1;color:var(--line);margin-bottom:12px}
.exercise{border:1px dashed rgba(229,161,60,.55);border-radius:14px;background:rgba(229,161,60,.05);padding:36px 32px}

/* ── صندوق الطلب (order box) ── */
.orderbox{background:var(--card4);border:1px solid rgba(229,161,60,.5);border-radius:14px;padding:36px 32px;position:relative}
.price-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:14px 0}
.price-now{font-family:Alexandria,sans-serif;font-weight:900;font-size:44px;color:var(--ink)}
.price-was{color:#B4AFA2;text-decoration:line-through;text-decoration-color:#E0554C;text-decoration-thickness:2.5px;font-size:20px;font-weight:400}
/* السعر المشطوب (قبل الخصم) — واضح مو باهت، بخط شطب أحمر ملفت يبرز الخصم */
s{color:#B4AFA2!important;text-decoration-color:#E0554C;text-decoration-thickness:2.5px;font-weight:400}
.bump{border:2px dashed rgba(229,161,60,.6);border-radius:14px;background:rgba(229,161,60,.06);padding:22px 20px;margin:24px 0;display:flex;gap:14px;align-items:flex-start;cursor:pointer}
.bump input[type=checkbox]{width:22px;height:22px;accent-color:var(--amber);margin-top:3px;flex-shrink:0;cursor:pointer}
.stack-li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line2)}
.stack-li:last-child{border-bottom:none}
.stack-li svg{flex-shrink:0;margin-top:4px}
.stack-li .v{margin-inline-start:auto;color:var(--dim);font-size:13.5px;white-space:nowrap}

/* ── سلايدر قبل/بعد ── */
.basl{position:relative;aspect-ratio:3/2;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card2)}
.basl img{width:100%;height:100%;object-fit:cover}
.basl .after{position:absolute;inset:0;clip-path:inset(0 0 0 50%)}
.basl .handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--amber);cursor:ew-resize;touch-action:none;z-index:5}
.basl .handle .hit{position:absolute;top:0;bottom:0;left:-22px;right:-22px}
.basl .handle .knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:var(--bg);border:2px solid var(--amber);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.5)}
.basl .lbl-b{position:absolute;top:14px;left:14px;z-index:4;pointer-events:none}
.basl .lbl-a{position:absolute;top:14px;right:14px;z-index:4;pointer-events:none}

/* ── FAQ ── */
.faq{border:1px solid var(--line);border-radius:14px;background:var(--panel2);margin-bottom:14px;transition:border-color .4s;overflow:hidden}
.faq-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;background:transparent;border:none;cursor:pointer;padding:24px 26px;text-align:right;font-family:'IBM Plex Sans Arabic',sans-serif}
.faq-head .q{font-weight:400;font-size:16.5px;line-height:1.7;color:var(--ink)}
.faq-head .plus{flex-shrink:0;color:var(--amber);font-size:24px;font-weight:300;line-height:1;transition:transform .4s var(--ease)}
.faq-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.faq-body>div{overflow:hidden}
.faq-body p{margin:0;padding:0 26px 26px;font-weight:300;font-size:15.5px;line-height:1.9;color:var(--body)}
.faq-body .s1{opacity:0;color:var(--bright)}
.faq-body .s2{opacity:0}

/* ── نافذة ── */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;background:rgba(11,14,17,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .3s ease;padding:24px}
.modal-box{width:min(460px,100%);max-height:90vh;overflow:auto;background:var(--card2);border:1px solid rgba(229,161,60,.35);border-radius:14px;padding:40px 36px;position:relative;box-shadow:0 40px 100px -20px rgba(0,0,0,.7)}
.modal-x{position:absolute;top:16px;left:16px;background:transparent;border:none;color:var(--dim);font-size:22px;cursor:pointer;line-height:1}
.modal-x:hover{color:var(--ink)}
.inp{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:15px 18px;color:var(--ink);font-family:'IBM Plex Sans Arabic',sans-serif;font-size:15px;outline:none;width:100%}
.inp:focus{border-color:rgba(229,161,60,.6)}

/* ── شريط تقدم الفانيل (خطوة ١/٢/٣) ── */
.funnel-steps{display:flex;justify-content:center;gap:0;margin:0 auto 40px;max-width:520px}
.fstep{flex:1;text-align:center;position:relative;padding-top:26px;font-size:12.5px;color:var(--dim);font-weight:300}
.fstep::before{content:'';position:absolute;top:8px;right:50%;left:-50%;height:2px;background:var(--line)}
.fstep:first-child::before{display:none}
.fstep::after{content:'';position:absolute;top:2px;right:calc(50% - 7px);width:14px;height:14px;border-radius:50%;background:var(--bg);border:2px solid var(--line)}
.fstep.done{color:var(--dim2)}
.fstep.done::after{background:var(--amber);border-color:var(--amber)}
.fstep.now{color:var(--amber2);font-weight:400}
.fstep.now::after{border-color:var(--amber);box-shadow:0 0 0 4px rgba(229,161,60,.18)}

/* ── فوتر ── */
footer{background:var(--bg2);border-top:1px solid var(--line3);padding:56px 24px 40px}
.foot-mark{font-family:Alexandria,sans-serif}

/* ── علامة الجبل (شعار أحمد الشحي) — حركة لكل حرارة صفحة ──
   .lg-draw  = رسم بخطٍ واحد ثم امتلاء (🧊 بارد — الصفحة تقدّم العلامة لأول مرة)
   .lg-pulse = نبضٌ ثابت (🔥 حار — العلامة معروفة وواثقة)
   .lg-asm   = تجميع القِطع (مسار الأكاديمية — المنهج قِطع تكتمل)
   الدافئ (book) يستخدم لمعان «النهر يجري» بـ SMIL داخل الـSVG نفسه، بلا CSS */
@keyframes lgDraw{0%{stroke-dashoffset:1;opacity:0}6%{opacity:1}62%{stroke-dashoffset:0;opacity:1}82%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes lgFill{0%,50%{fill-opacity:0}85%,100%{fill-opacity:1}}
.lg-draw .lgs{stroke-dasharray:1;animation:lgDraw 3s ease-in-out .2s both}
.lg-draw .lgf{animation:lgFill 3s ease-in-out .2s both}
@keyframes lgPulse{0%,100%{transform:scale(1);opacity:.88}50%{transform:scale(1.07);opacity:1}}
.lg-pulse{transform-origin:50% 50%;animation:lgPulse 4.2s ease-in-out infinite}
@keyframes lgAsmR{from{transform:translateX(-40px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes lgAsmL{from{transform:translateX(40px);opacity:0}to{transform:translateX(0);opacity:1}}
.lg-asm .lga{animation:lgAsmR .8s cubic-bezier(.22,1,.36,1) .15s both}
.lg-asm .lgb{animation:lgAsmL .8s cubic-bezier(.22,1,.36,1) .4s both}
.lg-asm .lgc{animation:lgAsmR .8s cubic-bezier(.22,1,.36,1) .65s both}
@media (prefers-reduced-motion:reduce){
  .lg-pulse,.lg-asm .lga,.lg-asm .lgb,.lg-asm .lgc{animation:none}
  .lg-draw .lgs{animation:none;opacity:0}
  .lg-draw .lgf{animation:none}
}

/* ── جوال ── */
@media (max-width:720px){
  section{padding-top:72px !important;padding-bottom:72px !important}
  .hero-pad{padding-top:120px !important;padding-bottom:64px !important}
  .price-now{font-size:36px}

  /* ═══ إصلاح الحشو المزدوج ═══
     section يعطي 24px أفقيًا، و.wrap* يعطي 24px ثانية — فتضيع 96px من
     عرض الجوال (375 → 279 قابلة للاستعمال، أي ٢٥٪ مهدورة).
     على الديسكتوب لا يُلاحظ (العرض 1160px)، وعلى الجوال يخنق كل بطاقة.

     الحل: نقلّص الاثنين على الجوال فقط — 14px + 8px = 44px بدل 96px،
     فيرتفع العرض القابل للاستعمال إلى 331px (+١٩٪).
     لا نُلغي أحدهما لأن .wrap يُستعمل أحيانًا داخل <div> بلا حشو،
     وإلغاؤه يلصق المحتوى بالحافة هناك. */
  section{padding-left:14px;padding-right:14px}
  .wrap,.wrap-md,.wrap-lg{padding-left:8px;padding-right:8px}
}

/* شاشات ضيقة جدًا (≤380px) — نضغط أكثر قليلًا */
@media (max-width:380px){
  section{padding-left:10px;padding-right:10px}
  .wrap,.wrap-md,.wrap-lg{padding-left:6px;padding-right:6px}
}