/* ============================================================
   ياسر فرحات — كورس الإعلانات الممولة
   Design System : Charcoal + Lime · Premium Glass · 3D
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  /* dark (default) */
  --bg:            #0A0A0B;
  --bg-soft:       #0F0F11;
  --surface:       #141416;
  --surface-2:     #1B1B1F;
  --glass:         rgba(255,255,255,.045);
  --glass-strong:  rgba(255,255,255,.07);
  --glass-brd:     rgba(255,255,255,.09);
  --glass-brd-hi:  rgba(255,255,255,.16);

  --accent:        #C4F82A;   /* لون التعبئة (الأزرار والنقاط) */
  --accent-txt:    #C4F82A;   /* لون النص/الأيقونات — يتغير في اللايت مود للتباين */
  --accent-ink:    #0A0A0B;
  --accent-soft:   rgba(196,248,42,.12);
  --accent-glow:   rgba(196,248,42,.35);
  --accent-2:      #7BE0A4;

  --text:          #F5F5F4;
  --text-2:        #A1A1AA;
  --text-3:        #6B6B73;

  --shadow-sm: 0 2px 8px rgba(0,0,0,.4);
  --shadow-md: 0 12px 40px rgba(0,0,0,.45);
  --shadow-lg: 0 32px 80px rgba(0,0,0,.55);
  --shadow-accent: 0 12px 48px rgba(196,248,42,.18);

  /* type scale */
  --fs-display: clamp(1.75rem, 3.6vw, 3.15rem);
  --fs-h1:      clamp(1.9rem, 4.4vw, 3.3rem);
  --fs-h2:      clamp(1.55rem, 3.2vw, 2.5rem);
  --fs-h3:      clamp(1.1rem, 1.7vw, 1.4rem);
  --fs-lead:    clamp(1rem, 1.35vw, 1.2rem);
  --fs-body:    clamp(.94rem, 1.05vw, 1.03rem);
  --fs-sm:      clamp(.82rem, .92vw, .9rem);
  --fs-xs:      .78rem;

  /* spacing / layout */
  --pad-x: clamp(1.1rem, 4vw, 4rem);
  --maxw: 1240px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --header-h: 58px;

  /* درجات الأخضر الجاهزة — بديل color-mix اللي مش شغال على iOS 16.1 وأقل */
  --tint-12: rgba(196,248,42,.12);
  --tint-13: rgba(196,248,42,.13);
  --tint-14: rgba(196,248,42,.14);
  --tint-16: rgba(196,248,42,.16);
  --tint-18: rgba(196,248,42,.18);
  --tint-22: rgba(196,248,42,.22);
  --tint-24: rgba(196,248,42,.24);
  --tint-26: rgba(196,248,42,.26);
  --tint-28: rgba(196,248,42,.28);
  --tint-30: rgba(196,248,42,.30);
  --tint-34: rgba(196,248,42,.34);
  --tint-36: rgba(196,248,42,.36);
  --tint-40: rgba(196,248,42,.40);
  --tint-45: rgba(196,248,42,.45);
  --tint-55: rgba(196,248,42,.55);
}

/* ===== اللايت مود: ورق دافي مش أبيض ميت =====
   الفكرة إن الخلفية تكون ورقية دافية والكروت بيضا صافية،
   فيحصل فرق حقيقي بينهم زي المطبوعات الفخمة. */
:root[data-theme="light"] {
  --bg:            #F1F0EA;   /* ورق دافي */
  --bg-soft:       #E7E5DC;
  --surface:       #FFFFFF;   /* الكروت بيضا صافية = عمق */
  --surface-2:     #E8E6DD;
  --glass:         rgba(255,255,255,.82);
  --glass-strong:  rgba(255,255,255,.94);
  --glass-brd:     rgba(26,26,18,.13);
  --glass-brd-hi:  rgba(26,26,18,.26);

  /* المعادلة اتعكست: في الدارك الليموني هو الفاتح اللي بيلمع.
     في اللايت لازم العنصر الغامق هو اللي يلمع — فالأزرار بقت
     حبر أسود مخضر والليموني بقى نص عليها. */
  --accent:        #1B1E12;   /* تعبئة الأزرار */
  --accent-ink:    #D8FF7A;   /* 14.8:1 فوق الحبر ✓ */
  --accent-txt:    #47690A;   /* نص أخضر — 6.4:1 على الأبيض ✓ */
  --accent-soft:   rgba(71,105,10,.10);
  --accent-glow:   rgba(27,30,18,.24);   /* توهج محايد مش أصفر */
  --accent-2:      #1E7A52;
  --lime:          #C4F82A;   /* الليموني للمساتات الصغيرة بس */

  --text:          #14140F;
  --text-2:        #45443C;   /* 8.2:1 ✓ */
  --text-3:        #63614F;   /* 5.4:1 ✓ */

  /* ظلال أقوى ومحايدة — اللايت محتاج ظل عشان يبان فيه عمق */
  --shadow-sm: 0 2px 8px rgba(26,26,18,.07);
  --shadow-md: 0 14px 34px rgba(26,26,18,.12);
  --shadow-lg: 0 26px 64px rgba(26,26,18,.16);
  --shadow-accent: 0 14px 34px rgba(26,26,18,.20);

  --tint-12: rgba(71,105,10,.12);
  --tint-13: rgba(71,105,10,.13);
  --tint-14: rgba(71,105,10,.14);
  --tint-16: rgba(71,105,10,.16);
  --tint-18: rgba(71,105,10,.18);
  --tint-22: rgba(71,105,10,.22);
  --tint-24: rgba(71,105,10,.24);
  --tint-26: rgba(71,105,10,.26);
  --tint-28: rgba(71,105,10,.28);
  --tint-30: rgba(71,105,10,.30);
  --tint-34: rgba(71,105,10,.34);
  --tint-36: rgba(71,105,10,.36);
  --tint-40: rgba(71,105,10,.40);
  --tint-45: rgba(71,105,10,.45);
  --tint-55: rgba(71,105,10,.55);
}
:root{ --lime: #C4F82A; }

/* ===== ترقيعات اللايت مود ===== */
/* ترقيعات اللايت مود — مكتوبة مسطّحة عشان تشتغل على الآيفونات القديمة كمان */
/* الأورب كانت بتعمل بقع صفرا على الخلفية — بقت محايدة وهادية */
:root[data-theme="light"] .orb--1{ opacity:.14; background:#9FB98A; }
:root[data-theme="light"] .orb--2{ opacity:.12; background:#8FB7A6; }
:root[data-theme="light"] .orb--3{ opacity:.10; background:#93A9D6; }
:root[data-theme="light"] .grid-lines{ opacity:.85; }
/* الليموني يرجع بس كمسة صغيرة */
:root[data-theme="light"] .eyebrow::before{ background:var(--lime); box-shadow:0 0 0 1px rgba(71,105,10,.45); }
:root[data-theme="light"] .stage__ring::after{ background:var(--accent); box-shadow:0 0 14px rgba(27,30,18,.3); }
:root[data-theme="light"] .header__progress i{ background:linear-gradient(90deg, var(--accent-2), #7FA81A); box-shadow:none; }
:root[data-theme="light"] .totop__fill{ stroke:var(--accent-txt); }
/* الأزرار الغامقة مش محتاجة اللمعة البيضا */
:root[data-theme="light"] .btn--primary::after{ background:linear-gradient(110deg,transparent 20%, rgba(255,255,255,.18) 45%, transparent 70%); }
/* الكلمة الضخمة ورا الصورة — حبر غامق بدل الأصفر الباهت */
:root[data-theme="light"] .stage__word{
    opacity:1;
    background:linear-gradient(180deg, #2C3A12 0%, rgba(44,58,18,.10) 92%);
    -webkit-background-clip:text; background-clip:text;
  }
/* الهالة تحت الصورة والحلقة */
:root[data-theme="light"] .stage__glow{ opacity:.4; background:radial-gradient(ellipse at center, rgba(26,30,18,.16), transparent 70%); }
:root[data-theme="light"] .stage__ring{ border-color:rgba(26,30,18,.14); box-shadow:inset 0 0 90px rgba(26,30,18,.05); }
/* الشارات العايمة كانت شبه مختفية على الكريمي */
:root[data-theme="light"] .chip{
    background:#FFFFFF;
    border-color:rgba(26,30,18,.16);
    box-shadow:var(--shadow-md);
  }
:root[data-theme="light"] .chip b{ color:#2C3A12; }
/* شارات الهيدر والمواضيع محتاجة حدّ أوضح */
:root[data-theme="light"] .topics__set i{ background:rgba(255,255,255,.8); border-color:rgba(26,30,18,.14); }
:root[data-theme="light"] .eyebrow{ background:#FFFFFF; border-color:rgba(26,30,18,.16); box-shadow:var(--shadow-sm); }
:root[data-theme="light"] .vframe__badge{ background:#FFFFFF; border-color:rgba(26,30,18,.14); }


/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

body{
  font-family:'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif;
  font-size:var(--fs-body);
  line-height:1.75;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
  transition:background .45s var(--ease), color .45s var(--ease);
  -webkit-font-smoothing:antialiased;
}
img,video,svg{ display:block; max-width:100%; height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
::selection{ background:var(--accent); color:var(--accent-ink); }

h1,h2,h3,h4{ line-height:1.22; font-weight:700; letter-spacing:-.015em; }
:root[dir="ltr"] h1,:root[dir="ltr"] h2,:root[dir="ltr"] h3{ letter-spacing:-.025em; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* ---------- 3. LAYOUT PRIMITIVES ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x); }

.section{
  position:relative;
  min-height:100vh;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-block:calc(var(--header-h) + 2rem) 3rem;
  scroll-margin-top:var(--header-h);
}

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:var(--fs-xs); font-weight:600; letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--accent-txt);
  background:var(--accent-soft);
  border:1px solid var(--tint-28);
  padding:.4rem .85rem; border-radius:var(--r-pill);
}
.eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 10px var(--accent-glow);
}

.sec-head{ text-align:center; margin-bottom:clamp(1.8rem,3.5vw,3rem); }
.sec-head h2{ font-size:var(--fs-h2); margin-top:.9rem; }
.sec-head p{ color:var(--text-2); font-size:var(--fs-lead); max-width:60ch; margin:.8rem auto 0; }


/* ---------- 5. BUTTONS ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:.55rem; font-weight:600; font-size:var(--fs-sm);
  padding:.8rem 1.5rem; border-radius:var(--r-pill);
  white-space:nowrap; overflow:hidden; isolation:isolate;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.btn:active{ transform:scale(.97); }

.btn--primary{
  background:var(--accent); color:var(--accent-ink);
  box-shadow:var(--shadow-accent);
  font-weight:700;
}
.btn--primary::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(110deg,transparent 20%, rgba(255,255,255,.5) 45%, transparent 70%);
  transform:translateX(-120%);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 18px 60px var(--accent-glow); }
.btn--primary:hover::after{ transform:translateX(120%); transition:transform .8s var(--ease); }
/* عكس اتجاه اللمعة في العربي */
:root[dir="rtl"] .btn--primary::after{ transform:translateX(120%); }
:root[dir="rtl"] .btn--primary:hover::after{ transform:translateX(-120%); }

.btn--ghost{
  background:var(--glass); border:1px solid var(--glass-brd);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  color:var(--text);
}
.btn--ghost:hover{ border-color:var(--glass-brd-hi); transform:translateY(-2px); }

.btn--lg{ padding:1.05rem 2.2rem; font-size:var(--fs-body); }
.btn--block{ width:100%; }

/* ---------- 6. HEADER ---------- */
.header{
  position:fixed; inset-block-start:14px; inset-inline:0;
  z-index:100; pointer-events:none;
  padding-inline:var(--pad-x);
}
.header__inner{
  position:relative;
  pointer-events:auto;
  /* البيضاوي بيلزق على المحتوى — مفيش فراغ زيادة */
  width:max-content; max-width:min(100%, var(--maxw));
  margin-inline:auto;
  height:var(--header-h);
  display:flex; align-items:center; gap:.7rem;
  padding-inline:.85rem .4rem;
  border-radius:var(--r-pill);
  background:var(--glass-strong);
  border:1px solid var(--glass-brd);
  backdrop-filter:blur(26px) saturate(170%);
  -webkit-backdrop-filter:blur(26px) saturate(170%);
  box-shadow:var(--shadow-md);
  transition:box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.header.is-stuck .header__inner{ box-shadow:var(--shadow-lg); border-color:var(--glass-brd-hi); }

.brand{ display:flex; align-items:center; gap:.5rem; font-weight:700; font-size:.88rem; flex-shrink:0; }
/* صورة ياسر بدل اللوجو — لحد ما يعمل هوية */
.brand__pic{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  object-fit:cover; background:var(--surface-2);
  border:1.5px solid var(--tint-55);
  box-shadow:0 0 0 3px var(--accent-soft);
  transition:box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.brand:hover .brand__pic{ border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft), 0 6px 20px var(--accent-glow); }
.brand__txt{ line-height:1.22; }
.brand__txt small{ display:block; font-size:.63rem; font-weight:500; color:var(--text-2); line-height:1.2; }

/* مسار الروابط — إطار غاطس فيه حبّاية بتزحلق */
.nav{
  position:relative;
  display:flex; align-items:center; gap:.1rem;
  padding:4px; border-radius:var(--r-pill);
  background:var(--glass);
  border:1px solid var(--glass-brd);
}
.nav__glider{
  /* left فيزيائي — لأن الجافاسكريبت بيحسب offsetLeft فيزيائي كمان */
  position:absolute; inset-block:4px; left:0;
  width:0; border-radius:var(--r-pill);
  background:var(--accent-soft);
  border:1px solid var(--tint-34);
  opacity:0; pointer-events:none;
  transition:transform .42s var(--ease), width .42s var(--ease), opacity .25s;
}
.nav a{
  position:relative; z-index:1;
  padding:.42rem .72rem; border-radius:var(--r-pill);
  font-size:.81rem; color:var(--text-2); font-weight:500;
  white-space:nowrap;
  transition:color .28s var(--ease);
}
.nav a:hover,
.nav a.is-active{ color:var(--accent-txt); }

.header__tools{ display:flex; align-items:center; gap:.3rem; flex-shrink:0; }
/* فاصل بسيط بين الأدوات وزرار الحجز */
.tools-sep{ width:1px; height:20px; background:var(--glass-brd); margin-inline:.1rem; }
.icon-btn{
  width:34px; height:34px; border-radius:var(--r-pill);
  display:grid; place-items:center;
  background:var(--glass); border:1px solid var(--glass-brd);
  color:var(--text-2);
  transition:color .25s, border-color .25s, transform .25s var(--ease);
}
.icon-btn:hover{ color:var(--accent-txt); border-color:var(--glass-brd-hi); transform:translateY(-1px); }
.icon-btn svg{ width:17px; height:17px; }
.lang-btn{ width:auto; padding-inline:.85rem; font-size:.76rem; font-weight:700; letter-spacing:.04em; }

#sun{ display:none; }
:root[data-theme="light"] #moon{ display:none; }
:root[data-theme="light"] #sun{ display:block; }

.burger{ display:none; }

/* ---------- 7. HERO ---------- */
.hero{ position:relative; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.orb{ position:absolute; border-radius:50%; filter:blur(90px); will-change:transform; }
.orb--1{ width:44vw; height:44vw; background:var(--accent); top:-14%; inset-inline-end:-10%; opacity:.16; }
.orb--2{ width:38vw; height:38vw; background:var(--accent-2); bottom:-18%; inset-inline-start:-8%; opacity:.12; }
.orb--3{ width:26vw; height:26vw; background:#5B8CFF; top:38%; inset-inline-start:34%; opacity:.09; }
.grid-lines{
  position:absolute; inset:0;
  background-image:linear-gradient(var(--glass-brd) 1px,transparent 1px),
                   linear-gradient(90deg,var(--glass-brd) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 20%,transparent 78%);
  opacity:.55;
}
.hero .wrap{ position:relative; z-index:1; }

.hero{ padding-block:calc(var(--header-h) + 3.4rem) 1rem; }
.hero__wrap{ flex:1; display:flex; align-items:center; }
.hero__layout{ width:100%; display:grid; gap:clamp(1.2rem,2.5vw,2.5rem); grid-template-columns:1fr; align-items:center; }
@media (min-width:1000px){ .hero__layout{ grid-template-columns:1fr 1.02fr; } }

/* ---------- شريط المواضيع ---------- */
.topics{
  position:absolute; inset-block-start:calc(var(--header-h) + 26px); inset-inline:0;
  z-index:2; overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.topics__track{ display:flex; width:max-content; animation:slide 38s linear infinite; }
.topics__set{ display:flex; align-items:center; gap:.5rem; padding-inline:.25rem; }
.topics__set i{
  font-style:normal; font-size:.74rem; font-weight:500; white-space:nowrap;
  color:var(--text-3);
  padding:.32rem .8rem; border-radius:var(--r-pill);
  background:var(--glass); border:1px solid var(--glass-brd);
}
.topics__set i:nth-child(3n+1){ color:var(--accent-txt); border-color:var(--tint-26); }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ---------- المسرح: كلمة ضخمة ورا الصورة ---------- */
.stage{
  position:relative;
  width:100%; height:clamp(340px, 62vh, 580px);
  width:100%; height:clamp(340px, 62svh, 580px);
  display:flex; align-items:flex-end; justify-content:center;
  isolation:isolate;
}
.stage__word{
  position:absolute; top:6%; left:-6%; right:-6%; z-index:1;
  text-align:center; line-height:.85; letter-spacing:-.04em;
  font-size:clamp(3.4rem, 12vw, 11rem); font-weight:700;
  background:linear-gradient(180deg, var(--accent) 0%, var(--tint-18) 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:.9; user-select:none; pointer-events:none;
}
.stage__ring{
  position:absolute; bottom:2%; left:50%; z-index:0;
  width:min(72%, 400px); aspect-ratio:1; translate:-50% 0;
  border-radius:50%;
  border:1px solid var(--tint-22);
  box-shadow:inset 0 0 90px var(--tint-12);
  animation:spin-slow 34s linear infinite;
}
.stage__ring::after{
  content:""; position:absolute; top:-5px; left:50%;
  width:9px; height:9px; border-radius:50%; translate:-50% 0;
  background:var(--accent); box-shadow:0 0 18px var(--accent-glow);
}
@keyframes spin-slow{ to{ transform:rotate(360deg); } }
.stage__glow{
  position:absolute; bottom:-8%; left:50%; z-index:0;
  width:min(70%, 380px); height:24%; translate:-50% 0;
  border-radius:50%;
  background:radial-gradient(ellipse at center, var(--accent-glow), transparent 70%);
  filter:blur(26px); opacity:.55;
}
/* فيديو الكورس — كارت رأسي مكان الصورة. الغلاف بس اللي بيتحمّل،
   والفيديو نفسه (3 ميجا) مابيتحمّلش غير لما الزائر يدوس تشغيل. */
.reel{
  position:relative; z-index:2;
  height:100%; aspect-ratio:9/16; flex:none;
  border-radius:var(--r-lg); overflow:hidden;
  background:#000;
  border:1px solid var(--glass-brd-hi);
  box-shadow:0 30px 70px rgba(0,0,0,.55), 0 0 0 7px var(--glass);
}
:root[data-theme="light"] .reel{ box-shadow:0 24px 54px rgba(10,10,11,.22), 0 0 0 7px rgba(255,255,255,.7); }
.reel__vid{ width:100%; height:100%; object-fit:cover; }
.reel__play{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap:.7rem; padding:1rem 1rem 1.15rem;
  background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0) 46%);
  color:#fff; cursor:pointer;
  transition:opacity .35s var(--ease);
}
.reel__btn{
  /* تحت الوش مش فوقه — الوش في الغلاف حوالين 45% من الطول */
  position:absolute; top:66%; left:50%; translate:-50% -50%;
  width:68px; height:68px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--accent); color:var(--accent-ink);
  box-shadow:0 0 0 0 var(--accent-glow), 0 14px 34px rgba(0,0,0,.45);
  animation:reelPulse 2.4s var(--ease) infinite;
  transition:transform .35s var(--ease);
}
.reel__btn svg{ width:26px; height:26px; margin-inline-start:3px; }
:root[dir="rtl"] .reel__btn svg{ margin-inline-start:0; margin-inline-end:3px; }
.reel__play:hover .reel__btn{ transform:scale(1.08); }
@keyframes reelPulse{
  0%  { box-shadow:0 0 0 0 rgba(196,248,42,.45), 0 14px 34px rgba(0,0,0,.45); }
  70% { box-shadow:0 0 0 18px rgba(196,248,42,0), 0 14px 34px rgba(0,0,0,.45); }
  100%{ box-shadow:0 0 0 0 rgba(196,248,42,0), 0 14px 34px rgba(0,0,0,.45); }
}
.reel__txt{ display:flex; flex-direction:column; align-items:center; gap:.1rem; text-align:center; }
.reel__txt b{ font-size:var(--fs-sm); font-weight:700; }
.reel__txt small{ font-size:var(--fs-xs); opacity:.75; letter-spacing:.04em; }
/* بعد التشغيل الطبقة بتختفي وأزرار الفيديو العادية بتظهر */
.reel.is-on .reel__play{ opacity:0; pointer-events:none; }
.reel__play:focus-visible{ outline:2px solid var(--accent); outline-offset:-4px; border-radius:var(--r-lg); }

/* شارات الأرقام العايمة */
.chip{
  position:absolute; z-index:3;
  display:flex; flex-direction:column; gap:.05rem;
  padding:.5rem .8rem; border-radius:var(--r-md);
  background:var(--glass-strong); border:1px solid var(--glass-brd);
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:var(--shadow-md);
  white-space:nowrap;
}
.chip b{ font-size:1.15rem; font-weight:700; color:var(--accent-txt); line-height:1.1; }
.chip small{ font-size:.68rem; color:var(--text-2); }
/* مواضع فيزيائية — عشان متتقلبش مع اتجاه اللغة */
.chip--1{ top:12%;    right:2%; }
.chip--2{ top:44%;    left:0; }
.chip--3{ bottom:22%; right:0; }

/* ---------- شريط البراندات (منقول من الموقع الرسمي) ----------
   أبيض شفاف من غير براويز، في آخر الهيرو تحت الفيديو */
.hero{ padding-block-end:calc(1rem + 74px); }
.strip{
  position:absolute; inset-inline:0; bottom:0; z-index:2;
  display:flex; align-items:center; gap:1.2rem;
  padding:.55rem var(--pad-x);
  border-top:1px solid var(--glass-brd);
  background:linear-gradient(to top, rgba(0,0,0,.35), transparent);
}
:root[data-theme="light"] .strip{ background:linear-gradient(to top, rgba(26,26,18,.06), transparent); }
.strip__label{
  flex:none; font-size:var(--fs-xs); font-weight:600; color:var(--text-3);
  letter-spacing:.04em;
}
.strip__mask{
  flex:1; overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.strip__track{ display:flex; width:max-content; animation:slide 34s linear infinite; }
.strip__set{ display:flex; align-items:center; padding-inline-end:.55rem; }
.strip__img{
  height:52px; width:auto; max-width:none; flex:none;
  opacity:.5;
  transition:opacity .4s var(--ease);
}
.strip:hover .strip__img{ opacity:.92; }
/* اللوجوهات مرسومة أبيض — في اللايت مود بنقلبها أسود */
:root[data-theme="light"] .strip__img{ filter:invert(1); opacity:.5; }
:root[data-theme="light"] .strip:hover .strip__img{ opacity:.85; }
/* في العربي الشريط بيبدأ من اليمين، فلازم يمشي في الاتجاه التاني وإلا يبان فراغ */
:root[dir="rtl"] .strip__track{ animation-name:slideRtl; }
@keyframes slideRtl{ to{ transform:translateX(50%); } }

.hero__title{
  font-size:var(--fs-display);
  line-height:1.3;            /* العربي محتاج سطر أوسع شوية */
  margin-block:.9rem .8rem;
  max-width:19ch;             /* يقفل على 3 سطور بدل 4 */
  text-wrap:balance;
}
.hero__sub{
  color:var(--text-2);
  font-size:clamp(.95rem,1.2vw,1.1rem);
  line-height:1.8; max-width:46ch;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.8rem 1.1rem; margin-block-start:1.5rem; align-items:center; }

/* ── العنوان = الطريق: «من صفر» باهتة، وخط بنقطة ماشية لحد «أول مليون» ── */
.trip{ display:flex; flex-direction:column; gap:.05em; max-width:none; margin-block:.85rem .9rem; }
.trip__a{ display:flex; align-items:center; gap:.45em; }
.trip__from{ flex:none; color:var(--text-3); }
.trip__track{
  position:relative; flex:1; min-width:2.5em; height:2px; margin-top:.12em;
  background:repeating-linear-gradient(90deg, var(--glass-brd-hi) 0 7px, transparent 7px 13px);
}
.trip__fill{
  position:absolute; top:0; bottom:0; inset-inline-start:0; width:100%;
  background:linear-gradient(90deg, var(--tint-34), var(--accent-txt));
  animation:tripFill 1.7s cubic-bezier(.65,0,.35,1) .5s both;
}
:root[dir="rtl"] .trip__fill{ background:linear-gradient(270deg, var(--tint-34), var(--accent-txt)); }
.trip__fill::after{            /* النقطة اللي ماشية على الطريق */
  content:""; position:absolute; top:50%; inset-inline-end:-6px;
  width:12px; height:12px; border-radius:50%; translate:0 -50%;
  background:var(--lime); box-shadow:0 0 0 5px var(--tint-18), 0 0 18px var(--accent-glow);
}
.trip__end{                    /* خط النهاية — بينوّر لما النقطة توصل */
  position:absolute; top:50%; inset-inline-end:-9px; translate:0 -50%;
  width:18px; height:18px; border-radius:50%;
  border:2px solid var(--accent-txt);
  animation:tripEnd 2.4s var(--ease) 2.2s infinite;
}
@keyframes tripFill{ from{ width:0; } to{ width:100%; } }
@keyframes tripEnd{ 0%{ box-shadow:0 0 0 0 rgba(196,248,42,.5); } 70%,100%{ box-shadow:0 0 0 12px rgba(196,248,42,0); } }
.trip__b em{ font-style:normal; color:var(--accent-txt); }

/* ── الوعد: الرقم لينك بينزّل على لقطة يحيي ── */
.hero__promise{
  font-size:clamp(1rem,1.3vw,1.18rem); font-weight:600; line-height:1.75;
  max-width:44ch;
}
.hero__proof{
  display:inline-flex; align-items:center; gap:.2em; white-space:nowrap;
  color:var(--accent-txt); font-weight:700;
  border-bottom:1.5px dashed var(--tint-34);
  transition:border-color .3s var(--ease);
}
.hero__proof:hover{ border-bottom-style:solid; border-color:var(--accent-txt); }
.hero__proof svg{ width:.95em; height:.95em; }
.hero .hero__sub{ margin-top:.55rem; max-width:50ch; line-height:1.95; }

/* أسامي المنصات بلوجو صغير جوّه الجملة */
.pf{
  display:inline-flex; align-items:center; gap:.3em; white-space:nowrap;
  padding:.02em .5em; border-radius:var(--r-pill);
  background:var(--glass-strong); border:1px solid var(--glass-brd);
  color:var(--text); font-size:.88em; line-height:1.6; vertical-align:.04em;
}
.pf svg{ width:1.05em; height:1.05em; flex:none; color:var(--accent-txt); }
.pf b{ font-weight:600; }

/* ── الضمان جنب الزرار — كبسولة بدرع بدل سطر رمادي صغير ── */
.hero__guar{ display:flex; align-items:center; gap:.6rem; }
.hero__shield{
  flex:none; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-txt);
  border:1px solid var(--tint-26);
}
.hero__shield svg{ width:20px; height:20px; }
.hero__guar-txt{ display:flex; flex-direction:column; line-height:1.35; }
.hero__guar-txt b{ font-size:var(--fs-sm); font-weight:700; }
.hero__guar-txt small{ font-size:var(--fs-xs); color:var(--text-3); }
:root[data-theme="light"] .pf{ background:#FFFFFF; border-color:rgba(26,30,18,.14); }




/* ---------- 8b. تفاصيل الكورس — المنهج + كارت الدفع ----------
   شمال/يمين: العنوان والأرقام وكارت الدفع على جنب، والمنهج بأجزائه على الجنب التاني.
   على الموبايل: العنوان ← المنهج ← الدفع. */
.crs{
  display:grid; gap:1.1rem clamp(1.4rem,3.5vw,3.4rem);
  grid-template-columns:1fr;
  grid-template-areas:"head" "map" "buy";
  align-items:start;
}
@media (min-width:980px){
  .crs{ grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); grid-template-areas:"head map" "buy map"; }
}
.crs__head{ grid-area:head; }
.crs__map{ grid-area:map; min-width:0; }
.buy{ grid-area:buy; }

.crs__title{ font-size:var(--fs-h2); line-height:1.4; margin-block:.9rem 1.1rem; text-wrap:balance; }
.crs__facts{ display:flex; border-block:1px solid var(--glass-brd); }
.crs__facts > div{
  flex:1; display:flex; flex-direction:column; gap:.1rem;
  padding:.75rem .9rem;
}
.crs__facts > div + div{ border-inline-start:1px solid var(--glass-brd); }
.crs__facts b{ font-size:clamp(1.25rem,1.9vw,1.6rem); font-weight:700; line-height:1.15; font-variant-numeric:tabular-nums; }
.crs__facts span{ font-size:var(--fs-xs); color:var(--text-3); }

/* الأجزاء التلاتة */
.crs__tabs{
  display:grid; grid-template-columns:1fr 1.15fr .8fr; gap:.4rem;
  padding:.35rem; border-radius:var(--r-md);
  background:var(--glass); border:1px solid var(--glass-brd);
  margin-bottom:.4rem;
}
.crs__tab{
  display:flex; flex-direction:column; align-items:flex-start; gap:.1rem;
  padding:.55rem .8rem; border-radius:calc(var(--r-md) - 5px);
  text-align:start; cursor:pointer; color:var(--text-2);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.crs__tab b{ font-size:var(--fs-sm); font-weight:700; }
.crs__tab small{ font-size:.7rem; color:var(--text-3); }
.crs__tab:hover{ color:var(--text); background:var(--glass-strong); }
.crs__tab.is-on{ background:var(--accent); color:var(--accent-ink); }
.crs__tab.is-on small{ color:var(--accent-ink); opacity:.75; }
.crs__tab:focus-visible{ outline:2px solid var(--accent-txt); outline-offset:2px; }

/* الدروس */
.crs__list{ list-style:none; margin:0; padding:0; counter-reset:none; }
.crs__list[hidden]{ display:none; }
.crs__list li{
  display:grid; grid-template-columns:2.1em minmax(0,1fr) auto; align-items:baseline; gap:.75rem;
  padding:.36rem .35rem;
  border-bottom:1px solid var(--glass-brd);
  font-size:.84rem; line-height:1.5;
}
.crs__list li:hover{ background:var(--glass); }
.crs__n{ font-size:.72rem; font-weight:700; color:var(--accent-txt); font-variant-numeric:tabular-nums; }
.crs__t{ color:var(--text); }
.crs__d{ font-size:.74rem; color:var(--text-3); font-variant-numeric:tabular-nums; unicode-bidi:isolate; }
.crs__t .hit{
  font-weight:700; color:var(--accent-ink); background:var(--accent);
  padding:0 .3em; border-radius:.3em; white-space:nowrap;
}
#cpart-3 li{ padding-block:.9rem; font-size:.95rem; }

/* كارت الدفع */
.buy{
  position:relative; overflow:hidden;
  padding:1.1rem 1.2rem 1rem;
  border-radius:var(--r-lg);
  background:linear-gradient(160deg, var(--surface-2), var(--surface));
  border:1px solid var(--tint-26);
  box-shadow:var(--shadow-md);
}
.buy::before{
  content:""; position:absolute; inset:-40% -20% auto auto; width:60%; height:120%;
  background:radial-gradient(closest-side, var(--accent-glow), transparent); opacity:.35; pointer-events:none;
}
.buy__price{ position:relative; display:flex; align-items:baseline; gap:.4rem; }
.buy__price b{ font-size:clamp(1.9rem,2.8vw,2.4rem); font-weight:700; line-height:1; letter-spacing:-.02em; }
.buy__price span{ font-size:var(--fs-sm); font-weight:600; color:var(--text-2); }
.buy__once{ position:relative; display:block; margin:.3rem 0 .85rem; font-size:var(--fs-xs); color:var(--text-3); }
.buy__btn{ position:relative; gap:.6rem; }
.buy__arr{ width:18px; height:18px; transition:transform .3s var(--ease); }
:root[dir="rtl"] .buy__arr{ transform:scaleX(-1); }
.buy__btn:hover .buy__arr{ transform:translateX(4px); }
:root[dir="rtl"] .buy__btn:hover .buy__arr{ transform:scaleX(-1) translateX(4px); }
.buy__line{
  position:relative; display:flex; align-items:center; gap:.45rem;
  margin-top:.6rem; font-size:var(--fs-xs); color:var(--text-3);
}
.buy__line svg{ width:16px; height:16px; flex:none; }
.buy__line--g{ margin-top:.8rem; color:var(--text); font-weight:600; }
.buy__line--g svg{ color:var(--accent-txt); }
:root[data-theme="light"] .buy{ background:linear-gradient(160deg,#FFFFFF,#F7F6F1); border-color:rgba(71,105,10,.3); }
:root[data-theme="light"] .crs__tabs{ background:#FFFFFF; }

@media (max-width:640px){
  .crs__tabs{ grid-template-columns:1fr 1fr; }
  .crs__tab[data-part="3"]{ grid-column:1/-1; }
  .crs__list li{ grid-template-columns:1.8em minmax(0,1fr); }
  .crs__d{ grid-column:2; margin-top:-.2rem; }
}

/* ---------- 9. GUARANTEE (مقارنة) ---------- */
/* ── الضمان = شريط الوقت ──
   شريطين بنفس الطول: عندهم 24 ساعة (حتة صغيرة وعلامة ✕)، ومعايا الكورس كله
   بيتملى ليموني مع ظهور السكشن، و20 علامة بتنوّر ورا بعض، وفي الآخر الدرع. */
.gt{ max-width:1000px; }
.gt__head{ text-align:center; }
.gt__title{ font-size:var(--fs-h2); line-height:1.45; margin-top:.9rem; text-wrap:balance; }
.gt__t2{ display:block; }
.gt__title em{ font-style:normal; color:var(--accent-txt); }

.gt__race{
  margin-top:clamp(1.4rem,3vw,2.2rem);
  padding:clamp(1.1rem,2.4vw,1.7rem) clamp(1.1rem,2.6vw,2rem);
  border-radius:var(--r-lg);
  background:var(--glass); border:1px solid var(--glass-brd);
  display:grid; gap:clamp(1.2rem,2.6vw,1.8rem);
}
.gt__row{
  display:grid; grid-template-columns:minmax(150px,200px) minmax(0,1fr);
  column-gap:clamp(1rem,2.4vw,1.8rem); row-gap:.5rem; align-items:center;
}
.gt__who{ display:flex; flex-direction:column; gap:.1rem; }
.gt__who b{ font-size:clamp(1rem,1.4vw,1.2rem); font-weight:700; }
.gt__who small{ font-size:var(--fs-xs); color:var(--text-3); }
.gt__row--them .gt__who b{ color:var(--text-2); }
.gt__row--me .gt__who b{ color:var(--accent-txt); }
.gt__end{ grid-column:2; font-size:var(--fs-sm); }
.gt__end--bad{ color:var(--text-3); }
.gt__end--good{ color:var(--text); font-weight:600; }

.gt__track{
  position:relative; height:16px; border-radius:99px;
  background:repeating-linear-gradient(90deg, var(--glass-brd) 0 8px, transparent 8px 14px);
}
:root[dir="rtl"] .gt__track{ background:repeating-linear-gradient(270deg, var(--glass-brd) 0 8px, transparent 8px 14px); }
.gt__fill{
  position:absolute; top:0; bottom:0; inset-inline-start:0; width:0;
  border-radius:99px;
}
/* عندهم: حتة صغيرة رمادي وبعدها ✕ */
.gt__row--them .gt__fill{ background:var(--text-3); opacity:.7; transition:width .6s var(--ease) .2s; }
.gt__cut{
  position:absolute; top:50%; inset-inline-start:calc(4% + 4px); translate:0 -50%;
  width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--surface-2); border:1px solid var(--glass-brd-hi); color:#FF6B6B;
  opacity:0; transform:scale(.5); transition:opacity .3s ease .75s, transform .45s cubic-bezier(.34,1.56,.64,1) .75s;
}
:root[dir="rtl"] .gt__cut{ translate:0 -50%; }
.gt__cut svg{ width:12px; height:12px; }
/* معايا: بيتملى للآخر */
.gt__row--me .gt__track{ height:22px; }
.gt__row--me .gt__fill{
  background:linear-gradient(90deg, var(--tint-34), var(--accent));
  box-shadow:0 0 22px var(--accent-glow);
  transition:width 2.4s cubic-bezier(.45,0,.2,1) .5s;
}
:root[dir="rtl"] .gt__row--me .gt__fill{ background:linear-gradient(270deg, var(--tint-34), var(--accent)); }
.gt__ticks{
  position:absolute; inset-block:0; inset-inline:14px 50px; display:flex; justify-content:space-between; align-items:center;
  pointer-events:none;
}
.gt__ticks i{ width:2px; height:8px; border-radius:2px; background:var(--glass-brd-hi); transition:background .2s ease; }
.gt__shield{
  position:absolute; top:50%; inset-inline-end:-6px; translate:0 -50%;
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--surface-2); color:var(--text-3);
  border:2px solid var(--glass-brd-hi);
  transition:background .4s ease 2.8s, color .4s ease 2.8s, border-color .4s ease 2.8s, transform .5s cubic-bezier(.34,1.56,.64,1) 2.8s;
}
.gt__shield svg{ width:22px; height:22px; }

/* لما السكشن يبان */
.gt__race.is-in .gt__row--them .gt__fill{ width:4%; }
.gt__race.is-in .gt__cut{ opacity:1; transform:scale(1); }
.gt__race.is-in .gt__row--me .gt__fill{ width:100%; }
.gt__race.is-in .gt__ticks i{ background:var(--accent-ink); }
.gt__race.is-in .gt__shield{
  background:var(--accent); color:var(--accent-ink); border-color:var(--accent);
  transform:scale(1.12); box-shadow:0 0 0 8px var(--tint-18), 0 0 30px var(--accent-glow);
}
:root[dir="ltr"] .gt__race.is-in .gt__shield{ transform:scale(1.12); }

.gt__foot{
  margin-top:clamp(1.3rem,2.8vw,2rem);
  display:flex; align-items:center; justify-content:center; gap:1rem 1.6rem; flex-wrap:wrap;
}
.gt__why{ max-width:52ch; font-size:var(--fs-xs); line-height:1.8; color:var(--text-3); }
:root[data-theme="light"] .gt__race{ background:#FFFFFF; box-shadow:var(--shadow-sm); }
:root[data-theme="light"] .gt__shield{ background:#FFFFFF; }
:root[data-theme="light"] .gt__race.is-in .gt__shield{ background:var(--accent); }

@media (max-width:700px){
  .gt__row{ grid-template-columns:1fr; }
  .gt__end{ grid-column:1; }
  .gt__foot{ flex-direction:column; text-align:center; }
}

/* ---------- 10. شغل حقيقي — 5 حلقات ----------
   كروت طولية زي بوسترات الحلقات: السيشن والمدة فوق، رسمة الحالة، النتيجة الحقيقية لو موجودة،
   وتحت «اتفرج عليها في الكورس» بتنزل على الدرس بتاعها في المنهج. */
.eps{ max-width:1180px; }
.eps__head{ text-align:center; }
.eps__title{ font-size:var(--fs-h2); line-height:1.45; margin-top:.9rem; text-wrap:balance; }
.eps__title em{ font-style:normal; color:var(--accent-txt); }
.eps__sub{ color:var(--text-2); font-size:var(--fs-sm); max-width:60ch; margin:.6rem auto 0; }
.eps__grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.85rem; margin-top:clamp(1.3rem,2.8vw,2.1rem); }
.ep{
  position:relative; display:flex; flex-direction:column;
  min-height:310px; padding:1rem 1rem .9rem; border-radius:var(--r-lg);
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--glass-brd); color:var(--text); overflow:hidden;
  transition:transform .4s var(--ease), border-color .3s, box-shadow .4s var(--ease);
}
.ep::before{          /* لمعة ليموني فوق الرسمة */
  content:""; position:absolute; inset:-30% -30% auto; height:60%;
  background:radial-gradient(closest-side, var(--tint-18), transparent); opacity:.6; pointer-events:none;
  transition:opacity .4s ease;
}
.ep:hover{ transform:translateY(-6px); border-color:var(--tint-40); box-shadow:var(--shadow-md); }
.ep:hover::before{ opacity:1; }
.ep--hot{ border-color:var(--tint-40); background:linear-gradient(180deg, var(--tint-12), var(--surface) 60%); }
.ep__top{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:.4rem; }
.ep__ses{ font-size:.68rem; font-weight:700; padding:.2rem .55rem; border-radius:var(--r-pill); background:var(--accent-soft); color:var(--accent-txt); border:1px solid var(--tint-26); white-space:nowrap; }
.ep__dur{ display:inline-flex; align-items:center; gap:.25rem; font-size:.7rem; color:var(--text-3); font-variant-numeric:tabular-nums; unicode-bidi:isolate; }
.ep__dur svg{ width:11px; height:11px; color:var(--accent-txt); }
.ep__art{ position:relative; width:100%; height:86px; margin:1rem 0 .8rem; color:var(--accent-txt); }
.ep__art .f{ fill:currentColor; stroke:none; }
.ep__k{ display:flex; align-items:baseline; gap:.3rem; font-size:clamp(1.7rem,2.4vw,2.2rem); font-weight:800; line-height:1; color:var(--accent-txt); margin-bottom:.45rem; }
.ep__k small{ font-size:.72rem; font-weight:600; color:var(--text-2); }
.ep h3{ font-size:1rem; line-height:1.4; margin-bottom:.3rem; }
.ep p{ font-size:.8rem; line-height:1.6; color:var(--text-2); }
.ep__go{
  margin-top:auto; padding-top:.75rem; border-top:1px solid var(--glass-brd);
  display:flex; align-items:center; justify-content:space-between; gap:.4rem;
  font-size:.76rem; font-weight:700; color:var(--accent-txt);
}
.ep__arr{ width:15px; height:15px; transition:transform .3s var(--ease); }
:root[dir="rtl"] .ep__arr{ transform:scaleX(-1); }
.ep:hover .ep__arr{ transform:translateX(4px); }
:root[dir="rtl"] .ep:hover .ep__arr{ transform:scaleX(-1) translateX(4px); }
/* الدرس اللي اتداس عليه بينوّر في المنهج */
.crs__list li.is-flash{ animation:lessonFlash 2.2s var(--ease); }
@keyframes lessonFlash{ 0%,60%{ background:var(--tint-18); box-shadow:inset 3px 0 0 var(--accent); } 100%{ background:transparent; box-shadow:none; } }
@media (max-width:1100px){ .eps__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:700px){ .eps__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .ep{ min-height:0; } .ep__art{ height:64px; margin:.7rem 0 .5rem; } }
@media (max-width:420px){ .eps__grid{ grid-template-columns:1fr; } }
:root[data-theme="light"] .ep{ background:#FFFFFF; box-shadow:var(--shadow-sm); }
:root[data-theme="light"] .ep--hot{ background:linear-gradient(180deg,#F4F8E8,#FFFFFF 60%); }

/* ---------- 11. آراء حقيقية — كارت الدليل (تحت الهيرو) ----------
   كارت واحد: لقطة نتيجة يحيي فوق، وتسجيله لازق في أسفلها.
   الكارت يمين والكلام شمال — عكس الهيرو، عشان مايبقوش شاشتين بنفس الشكل ورا بعض. */
.yh{
  display:grid; gap:clamp(1.6rem,4vw,4.2rem);
  grid-template-columns:1fr; align-items:center;
  max-width:1080px;
}
@media (min-width:900px){ .yh{ grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); } }

.yh__card{
  position:relative; margin:0;
  width:100%; max-width:470px; justify-self:center;
  border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface); border:1px solid var(--glass-brd-hi);
  box-shadow:var(--shadow-lg), 0 0 0 7px var(--glass);
}
.yh__card::after{            /* توهج ليموني خفيف ورا الكارت */
  content:""; position:absolute; inset:auto 10% -30px; height:60px; z-index:-1;
  background:var(--accent-glow); filter:blur(40px); opacity:.5;
}
.yh__shot{ position:relative; }
.yh__shot img{ width:100%; height:auto; aspect-ratio:864/800; display:block; }

/* مربعات حوالين الأرقام الحقيقية في اللقطة: الأوردرات · تكلفة الأوردر · الإنفاق */
.yh__hl{
  position:absolute; top:43.4%; height:17.3%;
  border-radius:10px;
  border:2px solid var(--lime);
  background:rgba(196,248,42,.10);
  box-shadow:0 0 0 4px rgba(196,248,42,.16);
  opacity:0; transform:scale(.9);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.yh__hl--1{ left:6.4%;  width:29%; }
.yh__hl--2{ left:36.4%; width:29.4%; }
.yh__hl--3{ left:66.3%; width:30.6%; }
.yh__card.is-in .yh__hl{ opacity:1; transform:none; }
.yh__card.is-in .yh__hl--2{ transition-delay:.25s; }
.yh__card.is-in .yh__hl--3{ transition-delay:.5s; }
/* وهو بيتكلم — المربعات بتنبض ورا بعض */
.yh__card.is-playing .yh__hl{ animation:hlPulse 2.4s var(--ease) infinite; }
.yh__card.is-playing .yh__hl--2{ animation-delay:.8s; }
.yh__card.is-playing .yh__hl--3{ animation-delay:1.6s; }
@keyframes hlPulse{
  0%,100%{ box-shadow:0 0 0 4px rgba(196,248,42,.16); background:rgba(196,248,42,.10); }
  35%    { box-shadow:0 0 0 9px rgba(196,248,42,.22), 0 0 26px rgba(196,248,42,.55); background:rgba(196,248,42,.2); }
}
.yh__src{
  /* فوق يمين دايمًا — في الفراغ اللي فوق «Results» في اللغتين */
  position:absolute; top:.65rem; right:.7rem;
  font-size:.66rem; font-weight:600; letter-spacing:.02em;
  padding:.25rem .6rem; border-radius:var(--r-pill);
  background:rgba(10,10,11,.78); color:#fff;
}

/* شريط الصوت — لازق في أسفل اللقطة */
.yh__voice{
  display:flex; align-items:center; gap:.85rem;
  padding:.85rem 1rem;
  background:var(--surface-2);
  border-top:1px solid var(--glass-brd);
}
.yh__play{
  flex:none; width:50px; height:50px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:var(--accent); color:var(--accent-ink);
  box-shadow:0 8px 22px rgba(0,0,0,.35);
  transition:transform .3s var(--ease);
}
.yh__play:hover{ transform:scale(1.06); }
.yh__play svg{ width:20px; height:20px; }
.yh__ico-play{ margin-inline-start:2px; }
:root[dir="rtl"] .yh__ico-play{ margin-inline-start:0; margin-inline-end:2px; }
.yh__ico-pause{ display:none; }
.yh__card.is-playing .yh__ico-play{ display:none; }
.yh__card.is-playing .yh__ico-pause{ display:block; }
.yh__mid{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.35rem; }
.yh__who{ display:flex; align-items:baseline; gap:.5rem; white-space:nowrap; overflow:hidden; }
.yh__who b{ font-size:var(--fs-sm); font-weight:700; }
.yh__who span{ font-size:.7rem; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; }

/* الموجة: طبقتين بنفس الأعمدة، والليمونية بتنكشف مع التشغيل (--p من 0 لـ 100%) */
.yh__wave{ position:relative; height:30px; cursor:pointer; --p:0%; border-radius:4px; }
.yh__wave:focus-visible{ outline:2px solid var(--accent-txt); outline-offset:3px; }
.yh__bars{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:space-between; gap:2px;
}
.yh__bars i{
  flex:1; max-width:4px; height:calc(var(--h) * 100%); min-height:3px;
  border-radius:99px; background:var(--text-3); opacity:.45;
}
.yh__bars--fill{ clip-path:inset(0 calc(100% - var(--p)) 0 0); }
:root[dir="rtl"] .yh__bars--fill{ clip-path:inset(0 0 0 calc(100% - var(--p))); }
.yh__bars--fill i{ background:var(--accent-txt); opacity:1; }
.yh__time{
  flex:none; min-width:2.6em; text-align:center;
  font-size:var(--fs-xs); font-weight:600; color:var(--text-2);
  font-variant-numeric:tabular-nums;
}

/* الكلام */
.yh__story{ text-align:start; }
.yh__title{
  font-size:var(--fs-h2); line-height:1.45;
  margin-block:1rem 1.4rem; text-wrap:balance;
}
.yh__title mark{
  color:var(--accent-ink); background:var(--accent);
  padding:0 .3em; border-radius:.3em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.yh__lead{ font-size:var(--fs-sm); font-weight:600; color:var(--text-2); margin-bottom:.4rem; }
.yh__skills{ list-style:none; margin:0; padding:0; border-top:1px solid var(--glass-brd); }
.yh__skills li{
  display:flex; align-items:center; gap:.8rem;
  padding:.8rem .1rem;
  border-bottom:1px solid var(--glass-brd);
  font-size:clamp(1rem,1.3vw,1.15rem); font-weight:600;
}
.yh__skills i{
  flex:none; width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-txt);
  border:1px solid var(--tint-26);
}
.yh__skills svg{ width:15px; height:15px; }
.yh__foot{ margin-top:1rem; font-size:var(--fs-xs); color:var(--text-3); }
/* على الموبايل العنوان الأول وبعده الكارت */
@media (max-width:899px){ .yh__story{ order:-1; } }

:root[data-theme="light"] .yh__card{ box-shadow:var(--shadow-lg), 0 0 0 7px rgba(255,255,255,.75); }
:root[data-theme="light"] .yh__hl{ border-color:#7FA81A; }

:root[data-theme="light"] .dcard{ box-shadow:var(--shadow-sm); }

/* ---------- 11b. WHY DIFFERENT — كروت بدليل بصري ---------- */
.diff{
  display:grid; gap:clamp(.7rem,1.3vw,1rem);
  grid-template-columns:1fr; max-width:1080px; margin-inline:auto; width:100%;
}
@media (min-width:820px){ .diff{ grid-template-columns:repeat(2,1fr); } }

.dcard{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column;
  padding:clamp(.9rem,1.5vw,1.2rem);
  border-radius:var(--r-lg);
  background:var(--glass); border:1px solid var(--glass-brd);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  transform-style:preserve-3d;
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.dcard::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
    var(--tint-12), transparent 45%);
  opacity:0; transition:opacity .35s;
}
.dcard:hover::before{ opacity:1; }
.dcard:hover{ border-color:var(--tint-36); box-shadow:var(--shadow-md); }

.dcard__ico{
  width:38px; height:38px; border-radius:12px; margin-bottom:.8rem;
  display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-txt);
  border:1px solid var(--tint-24);
  transform:translateZ(18px);
}
.dcard__ico svg{ width:19px; height:19px; }
.dcard h3{ font-size:var(--fs-h3); margin-bottom:.4rem; transform:translateZ(14px); }
.dcard p{ color:var(--text-2); font-size:var(--fs-sm); line-height:1.6; }

/* الدليل البصري جوه كل كارت */
.dcard__vis{
  margin-block-start:auto; padding-block-start:.75rem;
  border-top:1px solid var(--glass-brd);
}
.chips-row{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; }
.chips-row span{
  font-size:var(--fs-xs); font-weight:600;
  padding:.24rem .6rem; border-radius:var(--r-pill);
  background:var(--surface-2); color:var(--text);
  border:1px solid var(--glass-brd);
}
.chips-row small{ font-size:var(--fs-xs); color:var(--text-3); width:100%; margin-top:.15rem; }

.flow{ display:flex; align-items:center; gap:.3rem; flex-wrap:wrap; }
.flow__step{
  flex:1; min-width:78px; text-align:center;
  font-size:var(--fs-xs); font-weight:600;
  padding:.36rem .3rem; border-radius:var(--r-sm);
  background:var(--accent-soft); color:var(--accent-txt);
  border:1px solid var(--tint-26);
}
.flow__step--them{
  background:var(--surface-2); color:var(--text-3);
  border-color:var(--glass-brd); border-style:dashed;
}
.flow__note{
  display:block; margin-top:.4rem; text-align:center;
  font-size:var(--fs-xs); color:var(--text-3);
}

.kpis{ display:flex; flex-wrap:wrap; gap:.35rem; }
.kpis b{
  font-size:var(--fs-xs); font-weight:700;
  padding:.26rem .6rem; border-radius:var(--r-sm);
  color:var(--accent-txt); background:var(--accent-soft);
  border:1px solid var(--tint-26);
}

/* شريط الإثباتات الحقيقية */
.proof{
  display:grid; gap:.7rem; margin-top:clamp(.8rem,1.5vw,1.2rem);
  grid-template-columns:repeat(2,1fr);
  padding-top:clamp(.8rem,1.5vw,1.1rem);
  border-top:1px solid var(--glass-brd);
}
@media (min-width:920px){ .proof{ grid-template-columns:repeat(4,1fr); } }
.proof__item{ text-align:center; }
.proof__item b{
  display:block; line-height:1.1; font-weight:700;
  font-size:clamp(1.05rem,1.85vw,1.45rem);
  color:var(--accent-txt);
}
/* السكشن ده محتواه أطول في الإنجليزي — نضغط المسافات شوية */
#why .sec-head{ margin-bottom:clamp(1.1rem,2.2vw,1.8rem); }
#why .dcard h3{ margin-bottom:.3rem; }
/* ديسكتوب: السكشن لازم يتقفل في شاشة واحدة — الأيقونة في ركن الكارت مش في سطر لوحدها */
@media (min-width:820px){
  #why .dcard{ padding-block-start:clamp(.85rem,1.3vw,1.05rem); }
  #why .dcard__ico{ position:absolute; top:clamp(.85rem,1.3vw,1.05rem); inset-inline-end:clamp(.9rem,1.5vw,1.2rem); margin:0; width:34px; height:34px; }
  #why .dcard h3, #why .dcard p{ padding-inline-end:2.8rem; }
  #why .dcard__vis{ padding-block-start:.6rem; margin-top:.65rem; }
  #why .proof{ margin-top:clamp(.7rem,1.2vw,1rem); padding-top:clamp(.6rem,1.1vw,.85rem); }
  #why.section{ padding-bottom:1rem; }
  #why .proof{ max-width:860px; margin-inline:auto; }
  #why .sec-head{ margin-bottom:.9rem; }
  #why .diff{ gap:.75rem; }
  #why .dcard p{ line-height:1.5; }
  #why .chips-row small{ width:auto; margin:0 .3rem 0 0; }
  /* الإنجليزي كلامه أطول بـ25px */
  :root[lang="en"] #why .sec-head h2{ font-size:clamp(1.35rem,2.3vw,1.95rem); }
  :root[lang="en"] #why .dcard p{ font-size:.82rem; }
  :root[lang="en"] #why .chips-row span{ padding:.2rem .5rem; font-size:.72rem; }
}
.proof__item span{ font-size:var(--fs-xs); color:var(--text-3); }

/* ---------- 12. العرض + الختام — «مفيش طريق خسران» ----------
   تلات أعمدة: أسوأ حاجة · كارت السعر · أحسن حاجة. والطريقين SVG بيتحسبوا بالـJS
   من جنب زرار الشراء لحد الكارتين، وبيترسموا (stroke-dashoffset) أول ما السكشن يبان. */
.fk{ max-width:1120px; }
.fk__head{ text-align:center; }
.fk__title{ font-size:var(--fs-h2); line-height:1.45; margin-top:.9rem; text-wrap:balance; }
.fk__title em{ font-style:normal; color:var(--accent-txt); }
.fk__stage{
  position:relative; margin-top:clamp(1.2rem,2.6vw,2rem);
  display:grid; grid-template-columns:1fr; gap:1rem; align-items:end;
}
@media (min-width:900px){
  .fk__stage{ grid-template-columns:minmax(0,1fr) minmax(320px,380px) minmax(0,1fr); gap:clamp(4rem,7vw,7rem); }
  .fk__end{ width:min(100%,270px); }
  .fk__end--worst{ justify-self:start; }
  .fk__end--best{ justify-self:end; }
}
.fk__roads{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:0; }
.fk__road{
  fill:none; stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 1.1s cubic-bezier(.45,0,.2,1) .35s;
}
.fk__road--best{ stroke:var(--accent-txt); filter:drop-shadow(0 0 6px var(--accent-glow)); }
.fk__road--worst{ stroke:var(--accent-txt); opacity:.55; stroke-dasharray:1; }
.fk.is-in .fk__road{ stroke-dashoffset:0; }
/* نقطة نور ماشية على كل طريق من الزرار للكارت */
.fk__dot{ fill:var(--lime); filter:drop-shadow(0 0 6px var(--accent-glow)); opacity:0; transition:opacity .4s ease 1.5s; }
.fk.is-in .fk__dot{ opacity:1; }

.fk__card{
  position:relative; z-index:1; text-align:center;
  padding:1.3rem 1.3rem 1.2rem; border-radius:var(--r-lg);
  background:linear-gradient(165deg, var(--tint-16), var(--surface) 62%);
  border:1px solid var(--tint-40);
  box-shadow:0 22px 70px var(--tint-14);
}
.fk__for{ font-size:var(--fs-sm); color:var(--text-2); }
.fk__price{ display:flex; align-items:baseline; justify-content:center; gap:.4rem; margin-block:.15rem .2rem; }
.fk__price b{ font-size:clamp(2.8rem,5vw,3.8rem); font-weight:800; line-height:1; color:var(--accent-txt); letter-spacing:-.02em; }
.fk__price span{ font-size:var(--fs-sm); font-weight:600; color:var(--text-2); }
.fk__once{ display:block; font-size:var(--fs-xs); color:var(--text-3); }
.fk__inc{
  list-style:none; margin:.9rem 0 1rem; padding:.7rem 0 0;
  border-top:1px solid var(--glass-brd); text-align:start; display:grid; gap:.42rem;
}
.fk__inc li{ display:flex; align-items:flex-start; gap:.5rem; font-size:.82rem; line-height:1.45; color:var(--text-2); }
.fk__inc svg{ width:15px; height:15px; flex:none; margin-top:.15rem; color:var(--accent-txt); }
.fk__btn{ position:relative; }

.fk__end{
  position:relative; z-index:1;
  padding:1.1rem 1.2rem 1.2rem; border-radius:var(--r-lg);
  background:var(--glass); border:1px solid var(--glass-brd);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease) 1.3s, transform .5s var(--ease) 1.3s;
}
.fk__end--best{ border-color:var(--tint-40); background:linear-gradient(160deg, var(--tint-16), var(--glass) 70%); }
.fk.is-in .fk__end{ opacity:1; transform:none; }
.fk__ico{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center; margin-bottom:.7rem;
  background:var(--accent-soft); color:var(--accent-txt); border:1px solid var(--tint-26);
}
.fk__end--best .fk__ico{ background:var(--accent); color:var(--accent-ink); border-color:transparent; }
.fk__ico svg{ width:19px; height:19px; }
.fk__lbl{ display:block; font-size:var(--fs-xs); font-weight:700; letter-spacing:.04em; color:var(--text-3); margin-bottom:.25rem; }
.fk__end--best .fk__lbl{ color:var(--accent-txt); }
.fk__end p{ font-size:clamp(1rem,1.4vw,1.18rem); font-weight:700; line-height:1.45; }
@media (max-width:899px){
  .fk__roads{ display:none; }
  .fk__card{ order:-1; }
  .fk__end{ opacity:1; transform:none; }
}
:root[data-theme="light"] .fk__card{ background:linear-gradient(165deg,#FFFFFF,#F7F7F1 70%); border-color:rgba(26,30,18,.2); box-shadow:var(--shadow-md); }
:root[data-theme="light"] .fk__end{ background:#FFFFFF; box-shadow:var(--shadow-sm); }

/* ---------- 13. الأسئلة = «الأعذار» ----------
   كل سؤال بيتشطب بخط ليموني ورا بعض، والرد جنبه. السكشن + الفوتر = شاشة واحدة. */
#faq{ min-height:calc(100vh - 72px); min-height:calc(100svh - 72px); padding-block-end:1.4rem; }
.ex{ max-width:1000px; }
.ex__head{ text-align:center; }
.ex__title{ font-size:var(--fs-h2); line-height:1.45; margin-top:.9rem; text-wrap:balance; }
.ex__title em{ font-style:normal; color:var(--accent-txt); }
.ex__list{ list-style:none; margin:clamp(.9rem,1.8vw,1.3rem) 0 0; padding:0; border-top:1px solid var(--glass-brd); }
.ex__row{
  display:grid; grid-template-columns:minmax(0,1fr) 34px minmax(0,1.15fr); align-items:center; gap:1rem;
  padding:.6rem .2rem; border-bottom:1px solid var(--glass-brd);
}
.ex__q{ font-size:clamp(1rem,1.5vw,1.2rem); font-weight:700; }
.ex__qt{
  position:relative; color:var(--text);
  transition:color .4s ease;
  background:linear-gradient(var(--accent-txt), var(--accent-txt)) no-repeat;
  background-size:0% 3px; background-position:right 58%;
  transition:background-size .55s cubic-bezier(.65,0,.35,1), color .4s ease;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
:root[dir="ltr"] .ex__qt{ background-position:left 58%; }
.ex__arr{ display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:var(--accent-txt); background:var(--accent-soft); opacity:.35; transition:opacity .4s ease; }
.ex__arr svg{ width:16px; height:16px; }
:root[dir="rtl"] .ex__arr svg{ transform:scaleX(-1); }
.ex__a{ font-size:var(--fs-sm); line-height:1.7; color:var(--text-2); opacity:.35; transition:opacity .45s ease; }
.ex__row.is-in .ex__qt{ background-size:100% 3px; color:var(--text-3); }
.ex__row.is-in .ex__arr, .ex__row.is-in .ex__a{ opacity:1; }
.ex__more{ margin-top:clamp(.8rem,1.8vw,1.1rem); display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap; font-weight:600; color:var(--text-2); }
.ex__wa{ gap:.5rem; }
.ex__wa svg{ width:18px; height:18px; color:#25D366; }
@media (max-width:700px){
  .ex__row{ grid-template-columns:1fr; gap:.35rem; }
  .ex__arr{ display:none; }
}

/* ---------- 15. FOOTER — سطر واحد ---------- */
.footer{ position:relative; padding-block:1rem; border-top:1px solid var(--glass-brd); background:var(--bg-soft); }
.footer__row{ display:flex; align-items:center; justify-content:space-between; gap:.8rem 1.4rem; flex-wrap:wrap; }
.footer a{ color:var(--text-2); transition:color .25s; }
.footer a:hover{ color:var(--accent-txt); }
.footer__copy{ font-size:var(--fs-xs); color:var(--text-3); }
.social{ display:flex; gap:.5rem; }
.social a{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--glass); border:1px solid var(--glass-brd); }
.social svg{ width:16px; height:16px; }
@media (max-width:700px){ .footer__row{ justify-content:center; text-align:center; } }

/* ---------- 16. STICKY BAR — بيضاوي عائم زي الهيدر ---------- */
.sticky-bar{
  /* على الآيفون: نبعد عن شريط الهوم اللي تحت */
  position:fixed;
  inset-block-end:calc(16px + env(safe-area-inset-bottom, 0px));
  inset-inline:0; z-index:90;
  padding-inline:var(--pad-x);
  pointer-events:none;
  display:flex; justify-content:center;
  opacity:0; transform:translateY(140%) scale(.96);
  transition:transform .5s var(--ease), opacity .35s var(--ease);
}
.sticky-bar.is-on{ opacity:1; transform:translateY(0) scale(1); }

.sticky-bar__inner{
  pointer-events:auto;
  width:max-content; max-width:100%;
  display:flex; align-items:center; gap:.4rem;
  padding:.4rem;
  border-radius:var(--r-pill);
  background:var(--glass-strong);
  border:1px solid var(--glass-brd);
  backdrop-filter:blur(26px) saturate(170%);
  -webkit-backdrop-filter:blur(26px) saturate(170%);
  box-shadow:var(--shadow-lg), 0 0 44px var(--tint-12);
}

.sticky-bar__seal{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center;
  background:var(--accent); color:var(--accent-ink);
  box-shadow:0 0 22px var(--accent-glow);
}
.sticky-bar__seal svg{ width:17px; height:17px; }

.sticky-bar__txt{ line-height:1.25; }
.sticky-bar b{ font-size:.95rem; font-weight:700; white-space:nowrap; }
.sticky-bar small{ display:block; font-size:.66rem; color:var(--text-3); white-space:nowrap; }

/* ── الدوك: واتساب وسهم لفوق جوّه نفس الكبسولة ── */
.dock__sep{ width:1px; height:26px; background:var(--glass-brd); flex-shrink:0; }
.dock__buy{
  display:flex; align-items:center; gap:.75rem;
  max-width:460px; overflow:hidden; white-space:nowrap;
  transition:max-width .5s var(--ease), opacity .3s var(--ease), margin .5s var(--ease);
  padding-inline:.15rem;
}
.sticky-bar.is-mini .dock__buy{ max-width:0; opacity:0; padding-inline:0; margin-inline:-.2rem; }
/* الكبسولة الصغيرة بتروح للركن عشان ماتغطيش محتوى السكشن (كانت فوق آخر درس) */
.sticky-bar.is-mini{ justify-content:flex-end; }
.dock__ic{
  position:relative; flex:none;
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--glass); border:1px solid var(--glass-brd);
  color:var(--text);
  transition:border-color .3s, color .3s, background .3s;
}
.dock__wa{ color:#25D366; }
.dock__wa svg{ width:23px; height:23px; }
.dock__wa:hover{ border-color:#25D366; background:rgba(37,211,102,.1); }
.dock__ping{ position:absolute; top:7px; inset-inline-end:7px; width:8px; height:8px; border-radius:50%; background:#25D366; }
.dock__ping::after{ content:""; position:absolute; inset:0; border-radius:50%; background:#25D366; animation:wa-ping 2.2s cubic-bezier(0,0,.2,1) infinite; }
@keyframes wa-ping{ 70%{ transform:scale(2.6); opacity:0; } 100%{ opacity:0; } }
.dock__top:hover{ color:var(--accent-txt); border-color:var(--accent); }
.totop__ring{ position:absolute; inset:-1px; width:calc(100% + 2px); height:calc(100% + 2px); transform:rotate(-90deg); }
.totop__ring circle{ fill:none; stroke-width:2; }
.totop__track{ stroke:transparent; }
.totop__fill{
  stroke:var(--accent); stroke-linecap:round;
  stroke-dasharray:125.6;          /* 2πr عند r=20 */
  stroke-dashoffset:125.6;
  transition:stroke-dashoffset .12s linear;
}
.totop__arrow{ width:18px; height:18px; position:relative; }

/* ---------- 16b. شريط تقدّم القراءة في الهيدر ---------- */
.header__progress{
  position:absolute; inset-block-end:7px; inset-inline:16px;
  height:2px; border-radius:99px;
  background:var(--glass-brd);
  overflow:hidden; pointer-events:none;
}
.header__progress i{
  display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg, var(--accent-2), var(--accent));
  box-shadow:0 0 10px var(--accent-glow);
  transition:width .12s linear;
}

/* ---------- 17. REVEAL ---------- */
[data-reveal]{ opacity:0; transform:translateY(24px); }
.word{ display:inline-block; }

/* ---------- 18. RESPONSIVE ---------- */
@media (max-width:900px){
  :root{ --header-h:54px; }
  .nav{
    position:absolute; inset-block-start:calc(100% + 10px); inset-inline:0;
    width:auto; margin-inline:0;
    flex-direction:column; align-items:stretch; gap:.15rem;
    padding:.6rem; border-radius:var(--r-lg);
    background:var(--glass-strong); border:1px solid var(--glass-brd);
    backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px);
    box-shadow:var(--shadow-lg);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  .nav.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
  .nav a{ padding:.7rem 1rem; }
  .burger{ display:grid; }
  .header__inner{ position:relative; }
  .header .btn--primary{ display:none; }
  .nav__glider{ display:none; }
  .nav{ padding:.6rem; background:var(--glass-strong); }

  .section{ min-height:auto; padding-block:calc(var(--header-h) + 3rem) 3.5rem; }

  /* ===== الهيرو على الموبايل — لازم يدخل كله في الشاشة ===== */
  .hero{
    min-height:100vh; min-height:100svh;
    padding-block:calc(var(--header-h) + 4rem) 1.2rem;
  }
  .hero__wrap{ align-items:flex-start; }
  .topics{ inset-block-start:calc(var(--header-h) + 18px); }
  .topics__set i{ font-size:.63rem; padding:.24rem .6rem; }
  .topics__set{ gap:.35rem; }

  .hero .eyebrow{ font-size:.68rem; padding:.3rem .7rem; }
  .hero__title{
    font-size:clamp(1.5rem, 7.4vw, 2.05rem);
    line-height:1.4; margin-block:.7rem .55rem; max-width:none;
  }
  .hero__sub{ font-size:.9rem; line-height:1.7; max-width:34ch; }
  .hero__cta{ margin-block-start:1.1rem; gap:.6rem; }
  .hero__cta .btn--lg{ padding:.8rem 1.4rem; font-size:.88rem; }
  .hero__promise{ font-size:.95rem; line-height:1.7; }
  .hero__shield{ width:34px; height:34px; }

  .stage{ height:clamp(220px, 27svh, 300px); margin-top:.3rem; }
  .trip{ margin-block:.6rem .55rem; }
  .hero .hero__sub{ font-size:.84rem; line-height:1.75; margin-top:.35rem; }
  .hero__cta{ margin-block-start:.9rem; }
  .stage__word{ top:0; font-size:clamp(2.2rem, 14vw, 3.6rem); left:0; right:0; }
  .chip{ padding:.34rem .58rem; }
  .chip b{ font-size:.85rem; }
  .chip small{ font-size:.55rem; }
  .chip--1{ top:0;    right:0; }
  .chip--2{ top:auto; bottom:26%; left:0; }
  .chip--3{ display:none; }
  /* الكارت صغير على الموبايل — الزرار بس من غير الكلام */
  .reel{ border-radius:var(--r-md); box-shadow:0 18px 40px rgba(0,0,0,.5), 0 0 0 5px var(--glass); }
  .reel__btn{ width:52px; height:52px; }
  .reel__btn svg{ width:21px; height:21px; }
  .reel__txt{ display:none; }
  .strip{ padding-inline:1rem; }
  .strip__label{ display:none; }
  .strip__img{ height:40px; }
  .hero{ padding-block-end:calc(1.2rem + 58px); }

  /* ===== أهداف اللمس: iOS عايز 44px على الأقل ===== */
  .icon-btn{ width:44px; height:44px; }
  .brand__pic{ width:40px; height:40px; }
  .brand{ min-height:44px; }

  /* أيقونات الفوتر على اللمس */
  .social a{ width:44px; height:44px; }
}
/* شاشات قصيرة زي iPhone SE — نضغط الهيرو أكتر شوية */
@media (max-width:900px) and (max-height:730px){
  .hero{ padding-block:calc(var(--header-h) + 3.2rem) calc(.8rem + 58px); }
  .hero__title{ font-size:clamp(1.35rem, 6.6vw, 1.75rem); margin-block:.55rem .45rem; }
  .hero__sub{ font-size:.85rem; line-height:1.6; }
  .hero__cta{ margin-block-start:.85rem; }
  .stage{ height:clamp(200px, 30svh, 260px); margin-top:.3rem; }
  .stage__word{ font-size:clamp(1.9rem, 12vw, 2.8rem); }
  .topics{ inset-block-start:calc(var(--header-h) + 12px); }
}

@media (max-width:480px){
  .brand__txt{ display:none; }
  /* الشريط يملا العرض على الموبايل بس يفضل بيضاوي */
  /* الدوك على الموبايل: بيملا العرض وهو كامل، وبيفضل صغير وهو متقلّص */
  .sticky-bar:not(.is-mini) .sticky-bar__inner{ width:100%; justify-content:space-between; }
  .sticky-bar:not(.is-mini) .dock__buy{ flex:1; justify-content:space-between; gap:.45rem; }
  .sticky-bar__seal{ display:none; }
  .dock__sep{ display:none; }
  .sticky-bar small{ font-size:.6rem; }
  .dock__btn{ padding:.65rem .95rem; min-height:42px; }
  .dock__ic{ width:42px; height:42px; }
}

/* ---------- 18b. أداء على أجهزة اللمس ----------
   سفاري على الآيفون بيهنّج مع الطبقات الضبابية الثابتة،
   فبنشيل الضبابية عن الزرارين الصغيرين ونخليهم معتمين شوية. */
@media (hover: none){
  .sticky-bar__inner{ backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--surface); }
  :root[data-theme="light"] .sticky-bar__inner{ background:#FFFFFF; }
}

/* ---------- 19. MOTION SAFETY ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .yh__hl{ opacity:1; transform:none; }
  .trip__fill{ animation:none; }
  .gt__fill, .gt__cut, .gt__shield, .gt__ticks i{ transition:none !important; }
  .fk__road, .fk__end, .ex__qt, .ex__arr, .ex__a{ transition:none !important; }
  .fk__dot{ display:none; }
  .strip__track{ animation:none; }
}

/* ---------- 14. صفحة الدفع (pay/) ----------
   الكارت على جنب (3 خطوات بتتنوّر مع الزائر: اختار ← حوّل ← ابعت الصورة) وملخص الطلب على الجنب التاني.
   على الموبايل الكارت الأول. */
.paypage{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:100vh; min-height:100svh; display:flex; align-items:center;
  padding-block:calc(var(--header-h) + 1.3rem) 1rem;
}
.paypage::before{
  content:""; position:absolute; z-index:-1; inset:-20% 10% auto; height:70%; border-radius:50%;
  background:radial-gradient(closest-side, var(--accent-glow), transparent); filter:blur(60px); opacity:.35; pointer-events:none;
}
.paypage__grid{ display:grid; gap:clamp(1.2rem,3vw,2.8rem); max-width:1080px; align-items:center; }
@media (min-width:900px){ .paypage__grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); } }
.paytop__back{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; font-weight:600; color:var(--text-2);
  padding:.45rem .8rem; border-radius:var(--r-pill); transition:color .2s, background .2s;
}
.paytop__back:hover{ color:var(--text); background:var(--glass); }
.paytop__back svg{ width:16px; height:16px; }
:root[dir="ltr"] .paytop__back svg{ transform:scaleX(-1); }

.pay{ width:100%; }
.pay__card{
  position:relative; border-radius:var(--r-xl); background:var(--surface);
  border:1px solid var(--glass-brd-hi); box-shadow:var(--shadow-lg);
  padding:clamp(1.1rem,2.2vw,1.4rem);
  animation:payIn .5s var(--ease-out) both;
}
@keyframes payIn{ from{ opacity:0; transform:translateY(16px); } }
.pay__card::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:12%; height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent); opacity:.8;
}
.pay__kicker{ display:block; font-size:var(--fs-xs); font-weight:600; color:var(--accent-txt); }
.pay__title{ font-size:1.15rem; font-weight:700; line-height:1.3; margin-top:.3rem; display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; }
.pay__amt{ font-size:clamp(1.9rem,4vw,2.4rem); font-weight:800; color:var(--accent-txt); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.pay__amt small{ font-size:.95rem; font-weight:700; }

/* الخطوات: دواير بخط بينها، اللي خلصت ✓ واللي عليها الدور منوّرة */
.pay__steps{ list-style:none; margin:.9rem 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); }
.pay__steps li{ position:relative; display:flex; flex-direction:column; align-items:center; gap:.35rem; text-align:center; font-size:.72rem; line-height:1.35; color:var(--text-3); transition:color .3s; }
.pay__steps li + li::before{
  content:""; position:absolute; top:13px; inset-inline-end:calc(50% + 17px); width:calc(100% - 34px); height:2px;
  background:var(--glass-brd-hi); transition:background .3s;
}
.pay__steps i{
  position:relative; width:27px; height:27px; border-radius:50%; display:grid; place-items:center;
  font-style:normal; font-size:.78rem; font-weight:800; border:1.5px solid var(--glass-brd-hi); background:var(--surface);
  transition:background .3s, color .3s, border-color .3s, box-shadow .3s;
}
.pay__steps li.is-on{ color:var(--text); font-weight:700; }
.pay__steps li.is-on i{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); box-shadow:0 0 0 5px var(--accent-soft); }
.pay__steps li.is-done{ color:var(--text-2); }
.pay__steps li.is-done i{ border-color:var(--accent-txt); color:transparent; }
.pay__steps li.is-done i::after{ content:"✓"; position:absolute; color:var(--accent-txt); font-size:.8rem; }
.pay__steps li.is-on::before, .pay__steps li.is-done::before{ background:var(--accent-txt); }

.pay__tabs{ display:grid; grid-template-columns:1fr 1fr; gap:.55rem; margin-top:.9rem; }
.pay__tab{
  display:flex; flex-direction:column; align-items:flex-start; gap:.1rem; text-align:start;
  padding:.7rem .9rem; border-radius:var(--r-md); border:1.5px solid var(--glass-brd); background:var(--glass);
  color:var(--text); font:inherit; cursor:pointer; transition:border-color .2s, background .2s;
}
.pay__tab b{ font-size:.98rem; font-weight:800; }
.pay__tab small{ font-size:.7rem; color:var(--text-2); }
.pay__tab:hover{ border-color:var(--glass-brd-hi); }
.pay__tab.is-on{ border-color:var(--accent-txt); background:var(--accent-soft); }
.pay__tab.is-on small{ color:var(--text-2); }
.pay__tab:focus-visible, .pay__cp:focus-visible, .pay__link:focus-visible, .pay__wa:focus-visible, .sum__help:focus-visible{ outline:2px solid var(--accent-txt); outline-offset:2px; }

.pay__pane{ display:grid; gap:.5rem; margin-top:.8rem; }
.pay__pane[hidden]{ display:none; }
.pay__link{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  padding:.8rem 1rem; border-radius:var(--r-md); background:var(--accent); color:var(--accent-ink);
  transition:transform .2s var(--ease), box-shadow .2s;
}
.pay__link:hover{ transform:translateY(-1px); box-shadow:var(--shadow-accent); }
.pay__link span{ display:flex; flex-direction:column; gap:.05rem; }
.pay__link b{ font-size:.98rem; font-weight:800; }
.pay__link small{ font-size:.72rem; opacity:.8; }
.pay__arr{ flex:none; width:20px; height:20px; }
:root[dir="rtl"] .pay__arr{ transform:scaleX(-1); }
.pay__or{ display:flex; align-items:center; gap:.6rem; font-size:.72rem; color:var(--text-2); margin-block:.15rem; }
.pay__or::before, .pay__or::after{ content:""; flex:1; height:1px; background:var(--glass-brd); }

.pay__row{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.7rem;
  padding-block:.55rem; padding-inline:.85rem .6rem; border-radius:var(--r-md); background:var(--glass); border:1px solid var(--glass-brd);
}
.pay__k{ font-size:.72rem; color:var(--text-2); white-space:nowrap; }
.pay__v{ justify-self:end; font-size:1rem; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.pay__cp{
  display:inline-flex; align-items:center; gap:.3rem; padding:.42rem .7rem; border-radius:var(--r-pill);
  font:inherit; font-size:.74rem; font-weight:700; color:var(--text); background:transparent; border:1px solid var(--glass-brd-hi);
  cursor:pointer; transition:background .2s, color .2s, border-color .2s; white-space:nowrap;
}
.pay__cp svg{ width:14px; height:14px; }
.pay__cp:hover{ border-color:var(--accent-txt); }
.pay__cp.is-ok{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.pay__note{ font-size:.72rem; color:var(--text-2); text-align:center; }

.pay__wa{
  display:flex; align-items:center; gap:.8rem; margin-top:.85rem;
  padding:.8rem 1rem; border-radius:var(--r-lg); background:#25D366; color:#052E16;
  transition:transform .2s var(--ease), box-shadow .3s;
}
.pay__wa:hover{ transform:translateY(-1px); box-shadow:0 12px 36px rgba(37,211,102,.28); }
.pay__wa > svg{ flex:none; width:28px; height:28px; }
.pay__wa > span{ display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.pay__wa b{ font-size:.98rem; font-weight:800; line-height:1.4; }
.pay__wa small{ font-size:.74rem; font-weight:600; opacity:.85; }
/* لما ينسخ رقم أو يفتح الرابط = حوّل ← زرار الواتساب بينبض عشان يفتكر الخطوة الأخيرة */
.pay.is-ready .pay__wa{ animation:payPulse 1.8s ease-out infinite; }
@keyframes payPulse{ 0%{ box-shadow:0 0 0 0 rgba(37,211,102,.55); } 70%,100%{ box-shadow:0 0 0 14px rgba(37,211,102,0); } }

/* ملخص الطلب */
.sum{ display:flex; flex-direction:column; align-items:flex-start; gap:.9rem; }
.sum__title{ font-size:var(--fs-h3); line-height:1.4; }
.sum__list{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.sum__list li{ display:flex; align-items:flex-start; gap:.55rem; font-size:var(--fs-sm); line-height:1.6; color:var(--text-2); }
.sum__list svg{ flex:none; width:20px; height:20px; padding:3px; border-radius:50%; background:var(--accent); color:var(--accent-ink); margin-top:.15rem; }
.sum__total{
  width:100%; display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding-block:.85rem; border-block:1px dashed var(--glass-brd-hi); font-size:var(--fs-sm); color:var(--text-2);
}
.sum__total b{ font-size:1.5rem; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; }
.sum__total small{ font-size:.85rem; }
.sum__guar{
  display:flex; align-items:flex-start; gap:.6rem; padding:.85rem 1rem; border-radius:var(--r-md);
  background:var(--accent-soft); border:1px solid var(--tint-26); font-size:var(--fs-xs); line-height:1.65; color:var(--text-2);
}
.sum__guar svg{ flex:none; width:22px; height:22px; color:var(--accent-txt); }
.sum__guar b{ color:var(--text); }
.sum__help{ display:inline-flex; align-items:center; gap:.45rem; font-size:var(--fs-xs); font-weight:600; color:var(--text-2); transition:color .2s; }
.sum__help:hover{ color:var(--text); }
.sum__help svg{ width:18px; height:18px; color:#25D366; }

:root[data-theme="light"] .pay__card{ background:#FFFFFF; }
:root[data-theme="light"] .pay__row, :root[data-theme="light"] .pay__tab{ background:#F7F6F0; }
:root[data-theme="light"] .pay__tab.is-on{ background:rgba(71,105,10,.08); }
:root[data-theme="light"] .pay__card::before{ background:linear-gradient(90deg, transparent, var(--lime), transparent); }
:root[data-theme="light"] .paypage::before{ opacity:.18; }

@media (max-width:899px){
  .paypage{ align-items:flex-start; }
  .sum{ padding-inline:.2rem; }
}
@media (max-width:560px){
  .paytop__back span{ display:none; }
  .paytop__back{ padding:.5rem; }
  .pay__row{ gap:.5rem; padding-inline:.7rem .5rem; }
  .pay__v{ font-size:.95rem; }
  .pay__k{ font-size:.68rem; }
}
@media (max-width:420px){
  .pay__row{ grid-template-columns:minmax(0,1fr) auto; row-gap:.15rem; }
  .pay__k{ grid-column:1 / -1; }
  .pay__v{ justify-self:start; grid-row:2; }
  .pay__cp{ grid-row:2; }
}
@media (prefers-reduced-motion:reduce){
  .pay__card, .pay.is-ready .pay__wa{ animation:none; }
}