/* ============================================================================
   د. دانية درويش، كود الرشاقة
   الألوان مأخوذة من تصميم الكتاب: مارون غامق + وردي مغبّر + توبي.
   ============================================================================ */

:root{
  /* --- الألوان الأساسية (من الكتاب) --- */
  --maroon:      #5B1526;
  --maroon-2:    #74203a;
  --maroon-dark: #430E1C;

  --rose:        #E4D6DA;   /* خلفية وردية مغبّرة */
  --rose-soft:   #F2EAEC;
  --taupe:       #8A737B;   /* غُمّق للنصوص، 4.5:1 */
  --taupe-soft:  #9C868D;   /* غُمّق للأرقام الزخرفية، 3:1 */

  --cream:       #FCFAFA;
  --white:       #FFFFFF;

  --ink:         #2B171D;
  --ink-2:       #5A4149;
  --ink-3:       #6E585F;   /* غُمّق ليحقق 4.5:1 على الخلفيات الفاتحة */

  --line:        rgba(91,21,38,.14);
  --line-light:  rgba(255,255,255,.28);

  --wa:          #25D366;
  --wa-dark:     #1da851;
  --warn:        #B45309;
  --warn-bg:     #FEF3C7;

  /* --- أشكال --- */
  --r-sm: 10px;
  --r:    18px;
  --r-lg: 28px;
  --r-xl: 36px;

  --shadow-sm: 0 2px 10px rgba(43,23,29,.06);
  --shadow:    0 10px 34px rgba(43,23,29,.10);
  --shadow-lg: 0 22px 60px rgba(43,23,29,.16);

  --wrap: 1180px;
  --pad:  clamp(18px, 4vw, 34px);

  --font: "Tajawal", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Reem Kufi", "Tajawal", system-ui, sans-serif;

  /* --header-min-h: الارتفاع المصمَّم (ثابت بالـ CSS، ما بيلمسه الجافاسكربت أبداً).
     --header-h: الارتفاع الحقيقي المقاس وقت التشغيل (بيحدّثه main.js)، لاستخدامه
     بس بمكان تاني (scroll-padding-top والقائمة الجانبية) — لازم يضلوا متغيّرين
     منفصلين، لأنو لو صار header-inner بياخد ارتفاعه من نفس المتغيّر يلي الجافاسكربت
     عم يكتب فيه نتيجة قياسه، بيصير حلقة: أي قياس (حتى لو أصغر من المصمَّم بسبب
     تصفير مؤقت) بيصير هو الارتفاع الجديد بشكل دائم. */
  --header-min-h: 74px;
  --header-h: var(--header-min-h);

  /* التصميم فاتح فقط، بيمنع المتصفح/النظام من قلب الألوان لوضع ليلي */
  color-scheme: light;
}

/* ============================================================
   تحديد النص، بلون البراند مو الأزرق الافتراضي
   ============================================================ */
::selection      { background:var(--maroon); color:#fff; }
::-moz-selection { background:var(--maroon); color:#fff; }
/* على الأقسام المارون الغامقة منعكس التحديد ليضل مقروء */
.section-deep ::selection,
.nav-panel ::selection,
.svc-featured ::selection      { background:#fff; color:var(--maroon); }
.section-deep ::-moz-selection,
.nav-panel ::-moz-selection,
.svc-featured ::-moz-selection { background:#fff; color:var(--maroon); }

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  /* القفز للأقسام: يساوي ارتفاع الهيدر بالضبط.
     ⚠️ لا تضيف scroll-margin-top على الأقسام كمان، القيمتين
     بينجمعوا وبتصير الإزاحة ضعف المطلوب. */
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  font-family:var(--font);
  font-weight:400;
  font-size:clamp(15.5px, 1.05vw, 17px);
  line-height:1.85;
  color:var(--ink);
  background:var(--cream);
}

img{ max-width:100%; display:block; }
a{ color:var(--maroon); text-decoration:none; }
a:hover{ text-decoration:underline; }

h1,h2,h3,h4{ margin:0 0 .5em; line-height:1.3; font-weight:800; letter-spacing:-.01em; }
h1{ font-size:clamp(2.1rem, 5.4vw, 3.7rem); font-weight:900; line-height:1.18; }
h2{ font-size:clamp(1.55rem, 3.4vw, 2.5rem); }
h3{ font-size:clamp(1.2rem, 2.1vw, 1.5rem); }
h4{ font-size:clamp(1.05rem, 1.6vw, 1.2rem); font-weight:700; }
p{ margin:0 0 1.1em; }

:focus-visible{ outline:3px solid var(--maroon); outline-offset:3px; border-radius:6px; }

.skip-link{
  position:fixed; top:10px; inset-inline-start:14px; z-index:9999;
  background:var(--maroon); color:#fff; padding:12px 20px; border-radius:var(--r-sm);
  clip-path:inset(50%); width:1px; height:1px; overflow:hidden; white-space:nowrap;
}
.skip-link:focus{ clip-path:none; width:auto; height:auto; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.wrap-narrow{ max-width:860px; }


/* ============================================================
   الأزرار
   ============================================================ */
.btn{
  --btn-bg: var(--maroon);
  --btn-fg: #fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font); font-size:1rem; font-weight:700; line-height:1;
  padding:15px 30px; border-radius:999px; border:2px solid transparent;
  background:var(--btn-bg); color:var(--btn-fg);
  cursor:pointer; text-align:center; text-decoration:none !important;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.btn:active{ transform:translateY(0); }

.btn-primary{ background:var(--maroon); color:#fff; }
.btn-primary:hover{ background:var(--maroon-2); }

.btn-outline{ background:transparent; color:var(--maroon); border-color:var(--maroon); }
.btn-outline:hover{ background:var(--maroon); color:#fff; }

.btn-ghost{ background:rgba(91,21,38,.07); color:var(--maroon); }
.btn-ghost:hover{ background:rgba(91,21,38,.14); }

.btn-light{ background:#fff; color:var(--maroon); }
.btn-light:hover{ background:var(--rose-soft); }

/* زر واتساب بلون البراند مو الأخضر، أرقى وبيوحّد هوية الموقع */
.btn-wa{ background:var(--maroon); color:#fff; }
.btn-wa:hover{ background:var(--maroon-2); color:#fff; }
/* فوق الأقسام المارون منعكسه ليضل باين */

.btn-lg{ padding:17px 38px; font-size:1.05rem; }
.btn-sm{ padding:11px 20px; font-size:.9rem; }
.btn-block{ display:flex; width:100%; }


/* ============================================================
   الهيدر
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:900;
  background:rgba(252,250,250,.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease;
}
.site-header.is-stuck{
  background:rgba(252,250,250,.97);
  box-shadow:0 4px 24px rgba(43,23,29,.14);
  border-bottom-color:rgba(91,21,38,.20);
}

.header-inner{
  display:flex; align-items:center; gap:18px;
  min-height:var(--header-min-h);
}

.brand{ display:flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none !important; margin-left:auto; }
.brand-mark{ width:44px; height:44px; object-fit:contain; }
.brand-text strong{
  display:block; font-family:var(--font-display); font-size:.95rem;
  font-weight:700; color:var(--maroon); letter-spacing:.01em; direction:ltr;
}
.brand-text small{ display:block; font-size:.72rem; color:var(--ink-3); line-height:1.4; }

.nav-desktop{ display:flex; gap:4px; }
.nav-desktop a{
  padding:9px 14px; border-radius:999px; font-size:.94rem; font-weight:500;
  color:var(--ink-2); text-decoration:none !important; transition:background .16s, color .16s;
}
.nav-desktop a:hover{ background:rgba(91,21,38,.07); color:var(--maroon); }
.nav-desktop a.is-active{ background:var(--maroon); color:#fff; }

.header-cta{ flex-shrink:0; }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:46px; height:46px; padding:0 11px; border:0; border-radius:12px;
  background:rgba(91,21,38,.08); cursor:pointer;
}
.nav-toggle span{ display:block; height:2.5px; background:var(--maroon); border-radius:2px; transition:transform .25s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

.nav-panel{
  position:fixed; inset-block:0; inset-inline-end:0; z-index:950;
  width:min(88vw, 340px); background:var(--maroon); color:#fff;
  padding:calc(var(--header-h) + 20px) 26px 30px;
  overflow-y:auto; transform:translateX(-100%); transition:transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow:-14px 0 40px rgba(0,0,0,.25);
}
.nav-panel[hidden]{ display:block; }          /* منخلّيه موجود لتشتغل الحركة */
.nav-panel:not(.is-open){ visibility:hidden; }
.nav-panel.is-open{ transform:translateX(0); visibility:visible; }
.nav-panel nav{ display:flex; flex-direction:column; gap:2px; }
.nav-panel a{
  color:rgba(255,255,255,.9); text-decoration:none !important;
  padding:14px 4px; font-size:1.06rem; font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.nav-panel a:hover{ color:#fff; padding-inline-start:8px; }
.nav-panel .np-cta{
  margin-top:20px; border:0; background:#fff; color:var(--maroon);
  border-radius:999px; text-align:center; font-weight:700; padding:15px;
}

.nav-backdrop{
  position:fixed; inset:0; z-index:940; background:rgba(43,23,29,.5);
  opacity:0; transition:opacity .3s;
}
.nav-backdrop[hidden]{ display:block; pointer-events:none; }
.nav-backdrop.is-open{ opacity:1; pointer-events:auto; }

body.nav-open{ overflow:hidden; }


/* ============================================================
   الحلقات الزخرفية (نفس موتيف الكتاب)
   ============================================================ */
.rings{ position:absolute; pointer-events:none; opacity:.16; color:var(--maroon); }
.rings svg{ width:100%; height:100%; display:block; }

.rings-hero{
  width:min(58vw, 620px); aspect-ratio:1; top:-16%; inset-inline-start:-16%;
}
.rings-deep{ color:#fff; opacity:.10; width:min(50vw, 480px); aspect-ratio:1; top:-10%; inset-inline-start:-12%; }
.rings-final{ top:auto; bottom:-18%; inset-inline-start:auto; inset-inline-end:-14%; }


/* ============================================================
   الأقسام
   ============================================================ */
.section{ position:relative; padding:clamp(58px, 8vw, 108px) 0; overflow:hidden; }
.section-rose{ background:var(--rose); }
.section-deep{ background:var(--maroon); color:#fff; }
.section-deep h2,.section-deep h3,.section-deep h4{ color:#fff; }
/* ⚠️ استثنِ الأزرار، بدونها .section-deep a بيدهس ألوان .btn-light و .btn-wa
   وبيصير نص أبيض على زر أبيض = زر مخفي */
.section-deep a:not(.btn){ color:#fff; text-decoration:underline; }

/* الأزرار فوق الأقسام الغامقة، بتحديد أقوى مشان ما ينداس عليها */
.section-deep .btn.btn-light{ background:#fff; color:var(--maroon); }
.section-deep .btn.btn-light:hover{ background:var(--rose-soft); color:var(--maroon); }
.section-deep .btn.btn-wa{ background:#fff; color:var(--maroon); }
.section-deep .btn.btn-wa:hover{ background:var(--rose-soft); color:var(--maroon); }
.section-deep .btn.btn-primary{ background:#fff; color:var(--maroon); }
.section-deep .btn.btn-primary:hover{ background:var(--rose-soft); color:var(--maroon); }

.sec-head{ max-width:760px; margin:0 auto clamp(34px, 5vw, 58px); text-align:center; }
.sec-head h2{ margin-bottom:.4em; }
.sec-sub{ color:var(--ink-2); font-size:1.05rem; margin:0; }
.section-deep .sec-sub{ color:rgba(255,255,255,.82); }

/* شارة القسم، نفس المستطيل المدوّر بالكتاب */
.sec-tag{
  display:inline-block; margin-bottom:16px;
  font-family:var(--font-display); font-size:.9rem; font-weight:600; letter-spacing:.02em;
  color:#fff; background:var(--maroon);
  padding:9px 26px; border-radius:14px;
  box-shadow:0 0 0 4px var(--cream), 0 0 0 6px var(--maroon);
}
.section-rose .sec-tag{ box-shadow:0 0 0 4px var(--rose), 0 0 0 6px var(--maroon); }
.sec-tag-light{ background:transparent; color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.75); }

.sub-title{
  text-align:center; margin:clamp(46px,6vw,70px) 0 clamp(22px,3vw,34px);
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.25rem, 2.3vw, 1.65rem);
}
.sub-title::after{
  content:""; display:block; width:54px; height:3px; border-radius:2px;
  background:currentColor; opacity:.35; margin:14px auto 0;
}


/* ============================================================
   الشبكات
   ============================================================ */
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.4vw,30px); }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,30px); }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,26px); }


/* ============================================================
   الهيرو
   ============================================================ */
.hero{
  position:relative; padding:clamp(48px,7vw,86px) 0 clamp(56px,8vw,96px);
  background:linear-gradient(170deg, var(--cream) 0%, var(--rose-soft) 60%, var(--rose) 100%);
  overflow:hidden;
}
.hero-inner{
  display:grid; grid-template-columns:1.15fr .85fr; align-items:center;
  gap:clamp(30px, 5vw, 66px);
}

.eyebrow{
  display:inline-block; margin:0 0 18px;
  font-size:.87rem; font-weight:700; letter-spacing:.06em;
  color:var(--maroon); background:rgba(91,21,38,.09);
  padding:8px 18px; border-radius:999px;
}
.hero h1{ margin-bottom:.45em; color:var(--maroon-dark); }
.hero h1 .hl{
  color:var(--maroon); white-space:nowrap;
  /* الخط المظلّل تحت الكلمة، مرسوم كخلفية لتفادي مشاكل الطبقات */
  background-image:linear-gradient(rgba(169,147,154,.5), rgba(169,147,154,.5));
  background-repeat:no-repeat;
  background-size:100% .22em;
  background-position:0 88%;
  padding-inline:.06em;
}
.lead{ font-size:clamp(1.02rem,1.35vw,1.16rem); color:var(--ink-2); max-width:56ch; }
.lead-sub{ font-size:.98rem; color:var(--ink-3); max-width:56ch; }

.hero-actions{ display:flex; flex-wrap:wrap; gap:13px; margin:28px 0 34px; }

.trust-strip{
  display:flex; flex-wrap:wrap; gap:clamp(16px,3vw,38px);
  list-style:none; margin:0; padding:22px 0 0; border-top:1px solid var(--line);
}
.trust-strip li{ display:flex; flex-direction:column-reverse; }
.trust-strip strong{ font-size:1.28rem; font-weight:800; color:var(--maroon); line-height:1.3; }
.trust-strip span{ font-size:.82rem; color:var(--ink-3); }

/* صورة الهيرو بحلقة مارون متل الكتاب */
.hero-photo{ margin:0; text-align:center; }
.photo-ring{
  position:relative; width:min(100%, 380px); margin-inline:auto; aspect-ratio:1;
  border-radius:50%; padding:14px;
  background:var(--maroon);
  box-shadow:var(--shadow-lg);
}
.photo-ring::before{
  content:""; position:absolute; inset:6px; border-radius:50%;
  border:3px solid rgba(255,255,255,.85);
}
.photo-ring img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.photo-ring.is-empty::after{
  content:"صورة د. دانية"; position:absolute; inset:14px; border-radius:50%;
  display:grid; place-items:center; background:var(--taupe); color:#fff;
  font-size:.95rem; font-weight:700;
}
.hero-photo figcaption{
  display:inline-block; margin-top:-26px; position:relative; z-index:2;
  background:#fff; color:var(--ink); font-weight:700; font-size:1rem;
  padding:11px 26px; border-radius:6px; box-shadow:var(--shadow-sm); direction:ltr;
}


/* ============================================================
   بطاقات المشكلة
   ============================================================ */
.pain-card{
  background:var(--white); border-radius:var(--r-lg); padding:30px 26px 26px;
  box-shadow:var(--shadow-sm); position:relative; height:100%;
  border:1px solid rgba(255,255,255,.7);
  transition:transform .2s ease, box-shadow .2s ease;
}
.pain-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.pain-num{
  display:block; font-family:var(--font-display); font-size:1.6rem; font-weight:700;
  color:var(--taupe-soft); line-height:1; margin-bottom:14px;
}
.pain-card h3{ font-size:1.13rem; color:var(--maroon); margin-bottom:.5em; }
.pain-card p{ margin:0; font-size:.95rem; color:var(--ink-2); }

.pains-foot{
  max-width:820px; margin:clamp(30px,4vw,46px) auto 0; text-align:center;
  font-size:1.05rem; color:var(--maroon); font-weight:500;
  background:rgba(255,255,255,.6); border-radius:var(--r); padding:24px 28px;
}


/* ============================================================
   معتقدات خاطئة
   ============================================================ */
.myth{
  background:var(--rose-soft); border-radius:var(--r-lg); padding:30px 28px;
  border:1px solid var(--line); height:100%;
}
.myth-false{
  font-size:1.16rem; font-weight:800; color:#6B555C;   /* مغمّق ليحقق 4.5:1 على الوردي الفاتح */
  text-decoration:line-through; text-decoration-thickness:2px;
  margin-bottom:.7em;
}
.myth-false span{ text-decoration:none; display:inline-block; margin-inline-end:6px; }
.myth-true{ margin:0; color:var(--ink); font-size:.98rem; }


/* ============================================================
   قصتي
   ============================================================ */
.story-grid{
  display:grid; grid-template-columns:.8fr 1.2fr; align-items:center;
  gap:clamp(28px,5vw,64px);
}
.story-photo{ margin:0; }
.story-photo img{
  width:100%; aspect-ratio:3/4; object-fit:cover;
  border-radius:var(--r-xl); box-shadow:var(--shadow-lg);
}
.story-photo.is-empty{
  aspect-ratio:3/4; background:var(--taupe); border-radius:var(--r-xl);
  display:grid; place-items:center; color:#fff; font-weight:700;
}
.story-photo.is-empty::after{ content:"صورة د. دانية"; }
.story-copy h2{ color:var(--maroon); }
.story-copy p{ color:var(--ink-2); }
.story-quote{
  margin:26px 0; padding:22px 26px;
  border-inline-start:4px solid var(--maroon);
  background:rgba(255,255,255,.55); border-radius:0 var(--r) var(--r) 0;
  font-size:1.05rem; font-weight:500; color:var(--maroon); font-style:normal;
}


/* ============================================================
   الشهادات والمؤهلات
   ============================================================ */
.cert-strip{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.2vw,26px);
}
.cert-card{
  margin:0; position:relative; background:var(--white); border-radius:var(--r-lg);
  padding:14px 14px 18px; box-shadow:var(--shadow-sm); border:1px solid var(--line);
  text-align:center; transition:transform .2s ease, box-shadow .2s ease;
}
.cert-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.cert-card img{
  width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--r);
  margin-bottom:12px; background:var(--rose-soft);
}
.cert-card.is-empty img{ display:none; }
.cert-card.is-empty::before{
  content:"شهادة"; display:grid; place-items:center; aspect-ratio:3/2;
  border-radius:var(--r); background:var(--taupe-soft); color:#fff;
  font-weight:700; margin-bottom:12px;
}
.cert-card figcaption{ font-size:.88rem; color:var(--ink-2); line-height:1.6; }
.cert-main{ border-color:var(--maroon); box-shadow:0 0 0 2px rgba(91,21,38,.12), var(--shadow-sm); }
.cert-badge{
  display:inline-block; margin-bottom:10px; background:var(--maroon); color:#fff;
  font-size:.76rem; font-weight:700; padding:5px 14px; border-radius:999px;
}


/* ============================================================
   بطاقات الخدمات
   ============================================================ */
.svc-grid{ align-items:stretch; }
.svc-card{
  display:flex; flex-direction:column; position:relative;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px 25px 25px; box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.svc-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--maroon); }

.svc-featured{
  background:linear-gradient(165deg, var(--maroon) 0%, var(--maroon-dark) 100%);
  color:#fff; border-color:var(--maroon);
}

.svc-muted{ background:var(--rose-soft); }

.svc-badge{
  position:absolute; top:-13px; inset-inline-start:24px;
  background:var(--taupe); color:#fff; font-size:.75rem; font-weight:700;
  padding:6px 15px; border-radius:999px; letter-spacing:.02em;
}
.svc-featured .svc-badge{ background:#fff; color:var(--maroon); }
.svc-badge-soft{ background:var(--ink-3); }

.svc-num{
  display:block; font-family:var(--font-display); font-size:.95rem;
  font-weight:600; opacity:.5; margin-bottom:8px;
}
.svc-card h3{ font-size:1.24rem; color:var(--maroon); margin-bottom:.45em; }
.svc-card > p{ font-size:.94rem; color:var(--ink-2); margin-bottom:1em; }

.svc-points{ list-style:none; margin:0 0 16px; padding:0; }
.svc-points li{
  position:relative; padding-inline-start:22px; margin-bottom:8px;
  font-size:.89rem; color:var(--ink-2); line-height:1.65;
}
.svc-points li::before{
  content:"✓"; position:absolute; inset-inline-start:0; top:0;
  color:var(--maroon); font-weight:800;
}

.svc-gift{
  font-size:.88rem; background:rgba(255,255,255,.16); border-radius:var(--r-sm);
  padding:11px 14px; margin:0 0 16px;
}

.svc-foot{ margin-top:auto; display:flex; flex-direction:column; gap:12px; }

/* شارة السعر */
.price{
  display:inline-block; font-size:1.22rem; font-weight:800; color:var(--maroon);
}
.price-lg{ font-size:1.75rem; }
.price-soft{ color:var(--ink-3); font-size:1rem; font-weight:700; }
.price-missing{
  background:var(--warn-bg); color:var(--warn); font-size:.84rem; font-weight:700;
  padding:6px 13px; border-radius:8px; border:1px dashed var(--warn);
}

/* ============================================================
   البطاقة المميزة (خلفية مارون)، ألوان النص
   ⚠️ لازم تجي بعد قواعد .svc-card وبتحديد أقوى (.svc-card.svc-featured)
   وإلا بترجع القواعد العامة وبيصير نص مارون على خلفية مارون = مخفي
   ============================================================ */
.svc-card.svc-featured h3,
.svc-card.svc-featured > p,
.svc-card.svc-featured .svc-num,
.svc-card.svc-featured .price{ color:#fff; }
.svc-card.svc-featured .svc-points li{ color:rgba(255,255,255,.92); }
.svc-card.svc-featured .svc-points li::before{ color:#fff; }
.svc-card.svc-featured .svc-gift{ color:#fff; }
.svc-card.svc-featured .price-missing{
  background:var(--warn-bg); color:var(--warn);
}


/* ============================================================
   قسم كود الرشاقة
   ============================================================ */
.code-top{
  display:grid; grid-template-columns:.62fr 1.38fr; align-items:center;
  gap:clamp(28px,5vw,58px);
}
.book-cover{ margin:0; }
.book-cover img{
  width:100%; aspect-ratio:2/3; object-fit:cover;
  border-radius:var(--r); box-shadow:var(--shadow-lg);
}
.book-cover.is-empty{
  aspect-ratio:2/3; border-radius:var(--r);
  background:linear-gradient(160deg, var(--taupe), var(--taupe-soft));
  display:grid; place-items:center; color:#fff; text-align:center; padding:20px;
  font-family:var(--font-display); font-weight:700; font-size:1.15rem;
  box-shadow:var(--shadow-lg);
}
.book-cover.is-empty::after{ content:"غلاف الكتاب"; }
.book-cover-light.is-empty{ background:linear-gradient(160deg, var(--maroon), var(--maroon-2)); }

.big-quote{
  font-size:clamp(1.08rem,1.7vw,1.32rem); font-weight:700;
  line-height:1.7; margin-bottom:1em;
}
.code-intro p{ color:rgba(255,255,255,.86); }
.code-intro .big-quote{ color:#fff; }

.axes .axis{
  background:rgba(255,255,255,.08); border:1px solid var(--line-light);
  border-radius:var(--r-lg); padding:30px 28px;
}
.axis-num{
  display:inline-block; font-family:var(--font-display); font-size:1.5rem;
  font-weight:700; color:rgba(255,255,255,.45); margin-bottom:8px; direction:ltr;
}
.axis p{ margin:0; color:rgba(255,255,255,.84); font-size:.95rem; }

.weeks{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:w; }
.weeks li{
  background:rgba(255,255,255,.08); border:1px solid var(--line-light);
  border-radius:var(--r); padding:24px 20px; text-align:center;
}
.weeks span{
  display:block; font-family:var(--font-display); font-weight:600;
  color:#fff; font-size:1.02rem; margin-bottom:10px;
  padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.2);
}
.weeks p{ margin:0; font-size:.92rem; color:rgba(255,255,255,.84); }

/* المواضيع، أكورديون */
.topics{ max-width:880px; margin-inline:auto; display:flex; flex-direction:column; gap:10px; }
.topic{
  background:rgba(255,255,255,.07); border:1px solid var(--line-light);
  border-radius:var(--r); overflow:hidden;
}
.topic summary{
  cursor:pointer; list-style:none; padding:18px 22px;
  font-weight:700; font-size:1rem; color:#fff;
  display:flex; align-items:center; gap:12px;
}
.topic summary::-webkit-details-marker{ display:none; }
.topic summary::after{
  content:"+"; margin-inline-start:auto; font-size:1.4rem; font-weight:400;
  color:rgba(255,255,255,.6); transition:transform .2s;
}
.topic[open] summary::after{ transform:rotate(45deg); }
.topic .t-num{
  flex-shrink:0; width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,.16); display:grid; place-items:center;
  font-size:.85rem; font-weight:700;
}
.topic p{ margin:0; padding:0 22px 20px 62px; color:rgba(255,255,255,.82); font-size:.94rem; }
.topic:hover{ background:rgba(255,255,255,.11); }

/* مناسب / مو مناسب */
.fit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.5vw,28px); }
.fit{ border-radius:var(--r-lg); padding:30px 28px; }
.fit h4{ display:flex; align-items:center; gap:10px; margin-bottom:1em; font-size:1.12rem; }
.fit h4 span{
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  font-size:.95rem; flex-shrink:0;
}
.fit ul{ margin:0; padding-inline-start:20px; }
.fit li{ margin-bottom:11px; font-size:.95rem; }
.fit-yes{ background:rgba(255,255,255,.11); border:1px solid var(--line-light); }
.fit-yes h4 span{ background:#fff; color:var(--maroon); }
.fit-yes li{ color:rgba(255,255,255,.88); }
.fit-no{ background:rgba(0,0,0,.20); border:1px solid rgba(255,255,255,.14); }
.fit-no h4 span{ background:rgba(255,255,255,.22); color:#fff; }
.fit-no li{ color:rgba(255,255,255,.72); }

/* صندوق الشراء */
.buy-box{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:24px; margin-top:clamp(38px,5vw,58px);
  background:rgba(255,255,255,.11); border:1px solid var(--line-light);
  border-radius:var(--r-lg); padding:clamp(24px,3.5vw,38px);
}
.buy-box-light{
  background:var(--white); border-color:var(--line); box-shadow:var(--shadow);
}
.buy-thumb{
  width:76px; aspect-ratio:2/3; object-fit:cover; border-radius:var(--r-sm);
  box-shadow:var(--shadow-sm); flex-shrink:0;
}
/* ⚠️ .price افتراضياً لون مارون، وهاد الصندوق (بدون -light) قاعد فوق
   خلفية مارون غامقة (.section-deep) — بدون هالسطر السعر بيختفي
   (نص مارون فوق خلفية مارون). لازم يجي بعد .price وبتحديد أقوى. */
.buy-box:not(.buy-box-light) .price{ color:#fff; }
.buy-info{ flex:1 1 300px; }
.buy-info p{ margin:0 0 .5em; }
.gift-line{ font-size:1.1rem; font-weight:700; }
.buy-note{ font-size:.92rem; opacity:.85; }
.buy-note-hint{ color:var(--maroon); font-weight:500; }
.buy-cta{ display:flex; flex-direction:column; align-items:center; gap:14px; flex:0 0 auto; }


/* ============================================================
   كتاب الوصفات
   ============================================================ */
.recipes-top{
  display:grid; grid-template-columns:.55fr 1.45fr; align-items:center;
  gap:clamp(28px,5vw,58px);
}
.recipes-copy p{ color:var(--ink-2); }

.check-list{ list-style:none; margin:0; padding:0; }
.check-list li{
  position:relative; padding-inline-start:28px; margin-bottom:11px; font-size:.98rem;
}
.check-list li::before{
  content:"✓"; position:absolute; inset-inline-start:0; top:0;
  color:var(--maroon); font-weight:800;
}

.peek-card{ margin:0; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm); background:#fff; }
.peek-card img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.peek-card.is-empty img{ display:none; }
.peek-card.is-empty::before{
  content:""; display:block; aspect-ratio:1/1; background:var(--taupe-soft);
}
.peek-card figcaption{
  padding:15px; text-align:center; font-family:var(--font-display);
  font-weight:600; color:var(--maroon); font-size:1.02rem;
}

/* نموذج وصفة */
.sample-recipe{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:0;
  max-width:900px; margin-inline:auto;
  background:#fff; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow);
}
.sr-photo{ margin:0; position:relative; }
.sr-photo img{ width:100%; height:100%; min-height:260px; object-fit:cover; }
.sr-photo.is-empty{ background:var(--taupe); min-height:260px; }
.sr-photo.is-empty img{ display:none; }
.sr-photo figcaption{
  position:absolute; bottom:16px; inset-inline:16px;
  background:#fff; color:var(--ink); font-size:.9rem; font-weight:700;
  padding:10px 16px; border-radius:6px; text-align:center;
}
.sr-body{ padding:clamp(24px,3vw,34px); }
.sr-body h4{ color:var(--maroon); margin-bottom:.35em; }
.sr-blur{ color:var(--ink-2); font-size:.94rem; margin-bottom:1.2em; }
.macros{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.macro{
  background:var(--maroon); color:#fff; border-radius:var(--r-sm);
  padding:10px 15px; text-align:center; flex:1 1 auto; min-width:88px;
}
.macro b{ display:block; font-size:.74rem; font-weight:500; opacity:.85; }
.macro i{ display:block; font-style:normal; font-size:1.05rem; letter-spacing:2px; }
.macro:first-child{ flex:1 1 100%; padding:14px 15px; }
.macro:first-child b{ font-size:.8rem; }
.macro:first-child i{ font-size:1.35rem; }
.sr-note{ margin:0; font-size:.84rem; color:var(--ink-3); }


/* ============================================================
   الاستشارة
   ============================================================ */
.panel{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(26px,3.4vw,38px); box-shadow:var(--shadow-sm);
}
.panel-alt{ background:var(--rose-soft); }
.panel h3{ color:var(--maroon); }
.panel-note{ margin:16px 0 0; font-size:.9rem; color:var(--ink-3); }

.steps-list{ margin:0; padding-inline-start:20px; }
.steps-list li{ margin-bottom:12px; font-size:.98rem; color:var(--ink-2); }
.steps-list li::marker{ color:var(--maroon); font-weight:800; }


/* ============================================================
   استمارة قائمة الانتظار
   ============================================================ */
.wait-form{
  display:grid; grid-template-columns:1fr 1fr; gap:18px 20px;
  max-width:860px; margin-inline:auto;
  background:#fff; border-radius:var(--r-lg); padding:clamp(26px,3.6vw,42px);
  box-shadow:var(--shadow);
}
.field{ display:flex; flex-direction:column; gap:7px; }
.field-full{ grid-column:1 / -1; }
.field label{ font-size:.92rem; font-weight:700; color:var(--ink); }
.req{ color:var(--maroon); }
.field input,.field select,.field textarea{
  font-family:var(--font); font-size:1rem; color:var(--ink);
  padding:13px 16px; border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:var(--cream); transition:border-color .16s, background .16s;
  width:100%;
}
.field textarea{ resize:vertical; line-height:1.7; }
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--maroon); background:#fff; outline:none;
}
.field input.is-invalid,.field select.is-invalid{ border-color:#c0392b; background:#fdf3f2; }
.field .err{ font-size:.82rem; color:#c0392b; }

.form-actions{ display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:6px; }
.form-hint{ margin:0; font-size:.88rem; color:var(--ink-3); text-align:center; }


/* ============================================================
   كيف بتطلب + الدفع
   ============================================================ */
.how-steps{
  list-style:none; margin:0 0 clamp(20px,3vw,30px); padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.5vw,30px);
}
.how-steps li{
  background:var(--rose-soft); border-radius:var(--r-lg);
  padding:34px 26px 28px; text-align:center; position:relative;
}
.hs-num{
  display:grid; place-items:center; width:48px; height:48px; margin:0 auto 16px;
  border-radius:50%; background:var(--maroon); color:#fff;
  font-size:1.2rem; font-weight:800;
}
.how-steps h3{ font-size:1.1rem; color:var(--maroon); }
.how-steps p{ margin:0; font-size:.94rem; color:var(--ink-2); }
.how-steps-2{ max-width:760px; margin-inline:auto; grid-template-columns:repeat(2,1fr); }

.pay-note{
  max-width:760px; margin:clamp(24px,3vw,34px) auto 0; text-align:center;
  font-size:.9rem; color:var(--ink-3);
}


/* ============================================================
   الأسئلة الشائعة
   ============================================================ */
.faq-list{ display:flex; flex-direction:column; gap:12px; }
.faq{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; transition:box-shadow .2s;
}
.faq[open]{ box-shadow:var(--shadow-sm); }
.faq summary{
  cursor:pointer; list-style:none; padding:20px 24px;
  font-weight:700; font-size:1rem; color:var(--maroon);
  display:flex; align-items:center; gap:14px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; margin-inline-start:auto; font-size:1.5rem; font-weight:300;
  color:var(--taupe); transition:transform .22s; flex-shrink:0;
}
.faq[open] summary::after{ transform:rotate(45deg); }
.faq p{ margin:0; padding:0 24px 22px; color:var(--ink-2); font-size:.96rem; }


/* ============================================================
   الخاتمة
   ============================================================ */
.section-final{ text-align:center; }
.final-inner{ position:relative; z-index:2; }
.final-lead{ font-size:clamp(1rem,1.5vw,1.14rem); color:rgba(255,255,255,.86); max-width:62ch; margin-inline:auto; }
.final-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin:32px 0 22px; }
.final-note{ margin:0; font-size:.95rem; color:rgba(255,255,255,.7); }


/* ============================================================
   الفوتر
   ============================================================ */
.site-footer{ background:var(--maroon-dark); color:rgba(255,255,255,.78); padding:clamp(40px,5vw,64px) 0 26px; }
.footer-inner{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px;
  padding-bottom:30px; border-bottom:1px solid rgba(255,255,255,.14);
}
.f-brand{ display:flex; gap:14px; align-items:flex-start; }
.f-brand img{ width:52px; height:52px; object-fit:contain; flex-shrink:0; filter:brightness(0) invert(1); opacity:.9; }
.f-brand p{ margin:0; font-size:.9rem; line-height:1.8; }
.f-brand strong{ color:#fff; font-size:1rem; }

.f-nav{ display:flex; flex-direction:column; gap:9px; }
.f-nav a{ color:rgba(255,255,255,.76); font-size:.92rem; text-decoration:none !important; }
.f-nav a:hover{ color:#fff; }

.f-social{ display:flex; flex-direction:column; gap:13px; }
.f-social a{
  display:flex; align-items:center; gap:11px; color:rgba(255,255,255,.86);
  font-size:.92rem; text-decoration:none !important;
}
.f-social a:hover{ color:#fff; }

.footer-legal{ padding-top:24px; }
.disclaimer{
  font-size:.82rem; line-height:1.85; color:rgba(255,255,255,.55);
  max-width:900px; margin:0 auto 16px; text-align:center;
}
.copy{ margin:0; text-align:center; font-size:.85rem; color:rgba(255,255,255,.5); }


/* ============================================================
   مودال الطلب
   ============================================================ */
.modal{ position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:20px; }
.modal[hidden]{ display:none; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(43,23,29,.6); backdrop-filter:blur(3px); }
.modal-box{
  position:relative; z-index:2; width:min(100%, 520px); max-height:88vh; overflow-y:auto;
  background:var(--cream); border-radius:var(--r-lg); padding:clamp(26px,4vw,40px);
  box-shadow:var(--shadow-lg);
  animation:modalIn .25s cubic-bezier(.34,1.3,.64,1);
}
@keyframes modalIn{ from{ opacity:0; transform:translateY(18px) scale(.97); } to{ opacity:1; transform:none; } }

.modal-close{
  position:absolute; top:14px; inset-inline-start:16px;
  width:38px; height:38px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(91,21,38,.09); color:var(--maroon); font-size:1.5rem; line-height:1;
}
.modal-close:hover{ background:rgba(91,21,38,.18); }

.modal-eyebrow{ margin:0 0 4px; font-size:.82rem; color:var(--ink-3); font-weight:700; letter-spacing:.05em; }
.modal-box h3{ color:var(--maroon); margin-bottom:.25em; font-size:1.5rem; }
.modal-price{ margin:0 0 22px; font-size:1.5rem; font-weight:800; color:var(--maroon); }
.modal-q{ margin:0 0 12px; font-weight:700; font-size:.96rem; }
.modal-foot{ margin:14px 0 0; font-size:.85rem; color:var(--ink-3); text-align:center; }


/* ============================================================
   زر واتساب العائم
   ============================================================ */
.wa-float{
  position:fixed; inset-block-end:22px; inset-inline-start:22px; z-index:850;
  width:58px; height:58px; border-radius:50%;
  background:var(--maroon); color:#fff;
  display:grid; place-items:center;
  box-shadow:0 8px 26px rgba(91,21,38,.42);
  transition:transform .2s, box-shadow .2s;
}
.wa-float:hover{ transform:scale(1.08); box-shadow:0 12px 34px rgba(91,21,38,.55); background:var(--maroon-2); }


/* ============================================================
   حركة الظهور عند التمرير
   ============================================================ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-in{ opacity:1; transform:none; }


/* ============================================================
   الشاشات المتوسطة
   ============================================================ */
@media (max-width: 1080px){
  .nav-desktop{ display:none; }
  .nav-toggle{ display:flex; }
  .header-cta{ display:none; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .weeks{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 900px){
  :root{ --header-min-h:66px; --header-h:66px; }
  .hero-inner{ grid-template-columns:1fr; text-align:center; }
  .hero-copy .lead,.hero-copy .lead-sub{ margin-inline:auto; }
  .hero-actions,.trust-strip{ justify-content:center; }
  .hero-photo{ order:-1; }
  /* الصورة كانت بتاخد كل الشاشة عالموبايل والزائر ما بيشوف ولا كلمة
     قبل ما ينزل. صغّرناها كتير ليبين معها معظم النص فوق الطية. */
  .photo-ring{ width:min(42%, 165px); padding:11px; }
  .hero-photo figcaption{ margin-top:-14px; font-size:.8rem; padding:6px 14px; }
  .hero{ padding-top:clamp(14px,3vw,26px); }
  .hero-inner{ gap:14px; }
  .eyebrow{ margin-bottom:10px; }

  .story-grid,.code-top,.recipes-top,.consult-grid,.grid-2,.fit-grid,.sample-recipe{
    grid-template-columns:1fr;
  }
  .story-photo{ max-width:380px; margin-inline:auto; }
  .book-cover{ max-width:280px; margin-inline:auto; }
  .how-steps{ grid-template-columns:1fr; }
  .grid-3{ grid-template-columns:1fr; }
  .cert-strip{ grid-template-columns:1fr; max-width:340px; margin-inline:auto; }
  .footer-inner{ grid-template-columns:1fr; text-align:center; }
  .f-brand{ flex-direction:column; align-items:center; }
  .f-nav,.f-social{ align-items:center; }
}

@media (max-width: 620px){
  .photo-ring{ width:min(36%, 132px); }
  .grid-4{ grid-template-columns:1fr; }
  .weeks{ grid-template-columns:1fr; }
  .grid-3.myths{ grid-template-columns:1fr; }
  .buy-box{ flex-direction:column; text-align:center; }
  .buy-cta{ width:100%; }
  .buy-cta .btn{ width:100%; }
  .wait-form{ grid-template-columns:1fr; }
  .hero-actions .btn,.final-actions .btn{ width:100%; }
  .topic p{ padding-inline:22px; }
  .wa-float{ width:52px; height:52px; inset-block-end:16px; inset-inline-start:16px; }
  .sec-tag{ font-size:.82rem; padding:8px 20px; }
}


/* ============================================================
   الطباعة
   ============================================================ */
@media print{
  .site-header,.nav-panel,.nav-backdrop,.wa-float,.modal,.rings{ display:none !important; }
  body{ background:#fff; color:#000; }
  .section{ padding:20px 0; break-inside:avoid; }
  .section-deep{ background:#fff; color:#000; }
  .section-deep h2,.section-deep h3,.section-deep h4,.section-deep p{ color:#000; }
}