/* =========================================================
   PetraMagicMeru — الأنماط الأساسية
   1) المتغيرات   2) الأساسيات   3) الشريط والقائمة
   4) الهيرو      5) الفواصل     6) الباقات
   7) النافذة     8) الدعم       9) حول / الآراء
   10) التذييل    11) أزرار عائمة 12) الحركات والاستجابة
   ========================================================= */

/* ---------- 1) المتغيرات ---------- */
:root{
  --white:      #FFFFFF;
  --sand:       #FAF8F3;   /* رملي شفيف لفصل الأقسام */
  --gold:       #C8A24A;
  --gold-deep:  #8A6B22;   /* ذهبي داكن للنصوص الصغيرة (تباين مقروء) */
  --gold-soft:  rgba(200,162,74,.18);
  --line:       rgba(200,162,74,.30);
  --black:      #111111;
  --ink-2:      #4A4A4A;
  --ink-3:      #8C8C8C;
  --red:        #B32B2B;

  --shadow-s: 0 2px 10px rgba(17,17,17,.05);
  --shadow-m: 0 18px 50px -22px rgba(17,17,17,.28);
  --shadow-g: 0 22px 60px -28px rgba(200,162,74,.55);

  --surface:   #FFFFFF;      /* سطح البطاقات والحقول */
  --veil:      255,255,255;  /* قنوات لون الطبقات الشفافة */
  --ink-solid: #111111;      /* أسود ثابت للأزرار والتذييل */

  --font: "Inter","Cairo",system-ui,-apple-system,"Segoe UI",sans-serif;

  --r-btn: 6px;   /* نصف قطر الأزرار — نمط GitHub */
  --r-s: 12px;
  --r-m: 20px;
  --r-l: 30px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --maxw: 1120px;
}

/* ---------- 2) الأساسيات ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--white);
  color:var(--black);
  font-family:var(--font);
  font-size:16px;
  line-height:1.85;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

body.is-locked{ overflow:hidden; }

h1,h2,h3,h4{
  font-family:var(--font);
  font-weight:700;
  line-height:1.35;
  margin:0;
  letter-spacing:0;
}

p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }

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

.wrap{ width:min(100% - 40px, var(--maxw)); margin-inline:auto; }

.section{ padding-block:clamp(72px,11vw,140px); position:relative; }
.section--sand{ background:var(--sand); }

/* عنوان القسم */
.eyebrow{
  font-family:var(--font);
  font-size:13px;
  letter-spacing:.05em;
  color:var(--gold-deep);
  margin-bottom:14px;
  display:block;
}
.h-section{ font-size:clamp(28px,4.4vw,46px); }
.section-intro{
  color:var(--ink-2);
  max-width:60ch;
  margin-top:14px;
  font-size:clamp(15px,1.7vw,17px);
}

/* ---------- 3) الشريط العلوي والقائمة الجانبية ---------- */
.topbar{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px clamp(16px,4vw,32px);
  transition:background .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s;
}
.topbar.is-stuck{
  background:rgba(var(--veil),.72);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 1px 0 var(--line);
}

.topbar__mark{
  font-family:var(--font); font-size:15px; letter-spacing:.02em;
  color:var(--black); opacity:0; transform:translateY(-6px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
  pointer-events:none;
}
.topbar.is-stuck .topbar__mark,
.topbar__mark.is-shown{ opacity:1; transform:none; pointer-events:auto; }
.topbar__mark span{ color:var(--gold); }

/* زر الهامبرغر */
.burger{
  width:44px; height:44px; border-radius:var(--r-btn);
  display:grid; place-items:center; gap:0;
  border:1px solid var(--line); background:rgba(var(--veil),.7);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:background-color .18s ease, border-color .18s ease;
}
.burger:hover{ border-color:var(--gold); background:var(--surface); }
.burger:active{ box-shadow:inset 0 1px 3px rgba(17,17,17,.12); }
.burger__lines{ display:block; width:19px; height:11px; position:relative; }
.burger__lines i{
  position:absolute; inset-inline:0; height:1.5px; background:var(--black);
  transition:transform .35s var(--ease), opacity .25s var(--ease);
}
.burger__lines i:nth-child(1){ top:0; }
.burger__lines i:nth-child(2){ top:5px; width:70%; }
.burger__lines i:nth-child(3){ top:10px; }
.burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

/* الطبقة المعتمة */
.scrim{
  position:fixed; inset:0; z-index:90;
  background:rgba(17,17,17,.42);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
}
.scrim.is-open{ opacity:1; visibility:visible; }

/* الدرج الجانبي */
.drawer{
  position:fixed; inset-block:0; inset-inline-start:0; z-index:100;
  width:min(86vw,360px);
  background:rgba(var(--veil),.86);
  backdrop-filter:blur(22px) saturate(1.4);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);
  border-inline-end:1px solid var(--line);
  transform:translateX(100%);
  transition:transform .5s var(--ease);
  display:flex; flex-direction:column;
  padding:26px 28px 30px;
}
.drawer.is-open{ transform:translateX(0) !important; }

.drawer__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.drawer__title{ font-family:var(--font); font-size:14px; letter-spacing:.05em; color:var(--gold-deep); }
.drawer__close{ font-size:24px; line-height:1; width:40px; height:40px; border-radius:var(--r-btn); border:1px solid var(--line); background:var(--surface); transition:background-color .18s ease, border-color .18s ease; }
.drawer__close:hover{ border-color:var(--gold); background:var(--sand); }

.drawer__nav{ display:flex; flex-direction:column; }
.drawer__link{
  font-family:var(--font);
  font-size:22px; padding-block:16px;
  border-block-end:1px solid rgba(200,162,74,.18);
  position:relative; transition:padding-inline-start .35s var(--ease), color .3s;
}
.drawer__link::after{
  content:""; position:absolute; inset-block-end:-1px; inset-inline-start:0;
  height:1px; width:0; background:var(--gold); transition:width .45s var(--ease);
}
.drawer__link:hover{ color:var(--gold-deep); padding-inline-start:10px; }
.drawer__link:hover::after{ width:100%; }
.drawer__num{ font-size:11px; color:var(--gold); margin-inline-end:12px; vertical-align:middle; }

.drawer__support{ margin-top:auto; }
.drawer__foot-note{ font-size:12.5px; color:var(--ink-3); margin-top:14px; text-align:center; }

/* ---------- 4) الهيرو ---------- */
.hero{
  position:relative; min-height:100svh;
  display:grid; place-items:center;
  padding:110px 20px 60px;
  overflow:hidden; isolation:isolate;
}

/* الخلفية المتحركة: تُعالَج لتصبح ذهبية شفافة حتى لا تكسر الهوية */
.hero__bg{
  position:absolute; inset:-6%; z-index:-2;
  width:112%; height:112%; object-fit:cover;
  filter:grayscale(1) sepia(1) saturate(2.4) hue-rotate(-10deg) contrast(.85) brightness(1.1);
  opacity:.20;
  animation:heroDrift 28s ease-in-out infinite alternate;
}
.hero::after{ /* قناع أبيض إشعاعي يفتّح المركز */
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(58% 52% at 50% 42%, rgba(var(--veil),.96) 0%, rgba(var(--veil),.80) 45%, rgba(var(--veil),.45) 72%, rgba(var(--veil),.72) 100%),
    linear-gradient(to bottom, rgba(var(--veil),.55) 0%, rgba(var(--veil),0) 25%, rgba(var(--veil),.92) 100%);
}
@keyframes heroDrift{ from{ transform:scale(1) translateY(0); } to{ transform:scale(1.08) translateY(-1.5%); } }

.hero__inner{ text-align:center; max-width:640px; width:100%; }

/* القوس المنحوت الذي يؤطر الشعار */
.hero__arch{
  width:min(78vw,340px); margin-inline:auto; position:relative;
  aspect-ratio:1/1.06;
  display:grid; place-items:center;
}
.hero__arch svg{ position:absolute; inset:0; width:100%; height:100%; }
.hero__arch svg path,.hero__arch svg line{
  stroke:var(--gold); fill:none; stroke-width:1;
  stroke-dasharray:1200; stroke-dashoffset:1200;
  animation:drawArch 2.2s var(--ease) .3s forwards;
}
@keyframes drawArch{ to{ stroke-dashoffset:0; } }

.hero__logo{
  width:74%; height:auto; position:relative; z-index:1;
  mix-blend-mode:multiply;
  animation:fadeUp 1s var(--ease) .5s both;
}

.hero__brand{
  font-family:var(--font); font-weight:500;
  font-size:clamp(26px,5.4vw,44px); line-height:1.2;
  margin-top:14px;
  animation:fadeUp .9s var(--ease) .8s both;
}
.hero__brand span{ color:var(--gold); }
.hero__tag{
  font-family:var(--font);
  font-size:clamp(13px,1.9vw,15px);
  letter-spacing:.04em; color:var(--gold-deep);
  margin-top:6px;
  animation:fadeUp .9s var(--ease) .8s both;
}
.hero__sub{
  color:var(--ink-2); font-size:clamp(14px,1.8vw,16.5px);
  margin-top:10px; animation:fadeUp .9s var(--ease) .95s both;
}

/* الزر الرئيسي: أسود مرشوش ذهبي — هندسة أزرار GitHub */
.cta{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  width:min(100%,520px); min-height:52px;
  padding:0 24px; border-radius:var(--r-btn);
  background:
    radial-gradient(1.4px 1.4px at 12% 34%, rgba(200,162,74,.95), transparent 60%),
    radial-gradient(1.2px 1.2px at 28% 68%, rgba(200,162,74,.75), transparent 60%),
    radial-gradient(1.6px 1.6px at 46% 22%, rgba(200,162,74,.85), transparent 60%),
    radial-gradient(1.1px 1.1px at 63% 76%, rgba(200,162,74,.70), transparent 60%),
    radial-gradient(1.5px 1.5px at 79% 40%, rgba(200,162,74,.90), transparent 60%),
    radial-gradient(1.2px 1.2px at 91% 64%, rgba(200,162,74,.65), transparent 60%),
    linear-gradient(180deg, #262626 0%, var(--ink-solid) 100%);
  color:#fff; font-family:var(--font);
  font-size:clamp(15px,2vw,17px); font-weight:500;
  border:1px solid rgba(200,162,74,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 1px 2px rgba(17,17,17,.14);
  transition:border-color .18s ease, box-shadow .18s ease;
}
/* طبقة التفتيح عند المرور (بدل التحريك) — سلوك أزرار GitHub */
.cta::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:rgba(255,255,255,.08); opacity:0;
  transition:opacity .18s ease;
}
.cta > *{ position:relative; z-index:1; }
.cta:hover{ border-color:var(--gold); box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 2px 6px rgba(17,17,17,.18); }
.cta:hover::before{ opacity:1; }
.cta:active{ box-shadow:inset 0 1px 3px rgba(0,0,0,.45); }
.cta:active::before{ background:rgba(0,0,0,.22); opacity:1; }

/* زر ثانوي بنفس الهندسة (أبيض بحدّ رفيع) */
.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:40px; padding:0 16px; border-radius:var(--r-btn);
  border:1px solid var(--line); background:var(--surface);
  font-family:var(--font); font-size:14.5px; color:var(--black);
  box-shadow:0 1px 0 rgba(17,17,17,.04);
  transition:background-color .18s ease, border-color .18s ease;
}
.btn-ghost:hover{ background:var(--sand); border-color:var(--gold); }
.btn-ghost:active{ background:#F1EDE3; box-shadow:inset 0 1px 3px rgba(17,17,17,.10); }

/* زر أيقوني مربّع الزوايا */
.btn-icon{
  width:40px; height:40px; border-radius:var(--r-btn);
  display:grid; place-items:center;
  border:1px solid var(--line); background:var(--surface);
  transition:background-color .18s ease, border-color .18s ease;
}
.btn-icon:hover{ background:var(--sand); border-color:var(--gold); }
.btn-icon:active{ box-shadow:inset 0 1px 3px rgba(17,17,17,.12); }

.hero .cta{ margin-top:34px; animation:fadeUp .9s var(--ease) 1.1s both; }

/* السهم المتحرك (يشير لليسار = اتجاه التقدّم في RTL) */
.cta__arrow{ width:22px; height:12px; flex:none; animation:nudge 1.6s var(--ease) infinite; }
.cta__arrow path{ stroke:var(--gold); stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }
@keyframes nudge{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(-7px); } }
/* في الإنجليزية (LTR) يُقلب السهم ليشير لليمين */
html[dir="ltr"] .cta__arrow{ animation-name:nudgeLtr; }
@keyframes nudgeLtr{ 0%,100%{ transform:scaleX(-1) translateX(0); } 50%{ transform:scaleX(-1) translateX(-7px); } }
html[dir="ltr"] .pkg__open svg{ transform:scaleX(-1); }

/* مؤشر التمرير */
.hero__scroll{
  position:absolute; inset-block-end:26px; inset-inline:0; margin-inline:auto;
  width:1px; height:52px; background:linear-gradient(var(--gold),transparent);
  animation:fadeIn 1s 1.6s both;
}

/* ---------- 5) الفواصل المنحوتة ---------- */
.rule{ display:flex; align-items:center; gap:16px; margin-block:clamp(40px,7vw,80px); }
.rule::before,.rule::after{ content:""; height:1px; flex:1; background:linear-gradient(90deg,transparent,var(--line),transparent); }
.rule i{ width:7px; height:7px; background:var(--gold); transform:rotate(45deg); flex:none; }

/* ---------- 6) الباقات ---------- */
.packages{ position:relative; overflow:hidden; }
/* دوائر ذهبية شفافة بلا تفاصيل */
.orb{ position:absolute; border-radius:50%; pointer-events:none; z-index:0; }
.orb--1{ width:min(60vw,520px); aspect-ratio:1; inset-block-start:6%; inset-inline-end:-14%;
  background:radial-gradient(circle at 30% 30%, rgba(200,162,74,.16), rgba(200,162,74,0) 70%); }
.orb--2{ width:min(54vw,430px); aspect-ratio:1; inset-block-start:44%; inset-inline-start:-16%;
  background:radial-gradient(circle at 60% 40%, rgba(200,162,74,.13), rgba(200,162,74,0) 70%); }
.orb--3{ width:min(46vw,380px); aspect-ratio:1; inset-block-end:4%; inset-inline-end:6%;
  border:1px solid rgba(200,162,74,.16); background:none; }
.orb--4{ width:min(30vw,220px); aspect-ratio:1; inset-block-start:20%; inset-inline-start:14%;
  border:1px solid rgba(200,162,74,.13); background:none; }

.packages__list{
  position:relative; z-index:1;
  display:flex; flex-direction:column;
  gap:clamp(56px,9vw,120px);            /* مسافة كبيرة بين البطاقات */
  margin-top:clamp(40px,6vw,72px);
}

.pkg{
  position:relative;
  background:rgba(var(--veil),.82);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  padding:clamp(30px,5vw,60px);
  min-height:clamp(320px,42vw,420px);
  display:flex; flex-direction:column; justify-content:space-between; gap:28px;
  box-shadow:var(--shadow-s);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
  text-align:start; width:100%;
}
.pkg:hover{ transform:translateY(-6px); border-color:var(--gold); box-shadow:var(--shadow-g); }
.pkg--soon{ background:rgba(250,248,243,.7); }
.pkg--soon:hover{ transform:none; box-shadow:var(--shadow-s); border-color:var(--line); }

.pkg__badge{
  position:absolute; inset-block-start:-14px; inset-inline-start:clamp(24px,4vw,48px);
  background:var(--red); color:#fff;
  font-family:var(--font); font-size:13px;
  padding:6px 18px; border-radius:999px;
  box-shadow:0 8px 20px -8px rgba(179,43,43,.7);
}
.pkg__badge--gold{ background:var(--black); color:var(--gold); border:1px solid var(--gold); box-shadow:none; }

.pkg__head{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:24px; }
.pkg__title{ font-size:clamp(23px,3.4vw,36px); }
.pkg__sub{ color:var(--ink-2); font-size:15px; margin-top:8px; max-width:44ch; }

.pkg__price{ text-align:start; flex:none; }
.pkg__old{ color:var(--ink-3); font-size:16px; text-decoration:line-through; text-decoration-color:var(--red); }
.pkg__new{ font-family:var(--font); font-size:clamp(34px,6vw,58px); line-height:1; display:flex; align-items:baseline; gap:8px; }
.pkg__cur{ font-size:.4em; color:var(--gold-deep); }
.pkg__only{ font-size:13px; color:var(--gold-deep); margin-top:6px; }

.pkg__note{ font-size:14px; color:var(--ink-2); display:flex; align-items:center; gap:10px; }
.pkg__note::before{ content:""; width:18px; height:1px; background:var(--gold); flex:none; }

.pkg__foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px; }
.pkg__open{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:40px; padding:0 18px; border-radius:var(--r-btn);
  border:1px solid var(--line); background:var(--surface);
  font-family:var(--font); font-size:14.5px; color:var(--black);
  box-shadow:0 1px 0 rgba(17,17,17,.04);
  transition:background-color .18s ease, border-color .18s ease;
}
.pkg:hover .pkg__open{ background:var(--sand); border-color:var(--gold); }

/* العداد التنازلي */
.count{ display:flex; gap:10px; flex-wrap:wrap; }
.count__cell{
  min-width:66px; text-align:center;
  border:1px solid var(--line); border-radius:var(--r-s);
  padding:9px 8px 7px; background:rgba(var(--veil),.7);
}
.count__num{ font-family:var(--font); font-size:23px; line-height:1.1; font-variant-numeric:tabular-nums; }
.count__lbl{ font-size:11px; color:var(--ink-3); letter-spacing:.06em; }
.count__over{ color:var(--red); font-size:14px; }

/* بطاقة "قريباً" */
.soon__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px 22px; margin-top:6px; }
.soon__item{ font-size:14.5px; color:var(--ink-2); display:flex; gap:9px; align-items:flex-start; }
.soon__item::before{ content:"✔"; color:var(--gold); font-size:12px; margin-top:5px; }
.soon__label{
  font-family:var(--font); font-size:clamp(30px,6vw,54px); color:var(--gold);
  letter-spacing:.01em;
}

/* ---------- 8) الدعم ---------- */
.support__grid{
  display:grid; gap:18px; margin-top:clamp(34px,5vw,54px);
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.scard{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m);
  padding:24px 22px; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.scard:hover{ transform:translateY(-4px); border-color:var(--gold); box-shadow:var(--shadow-m); }
.scard__tick{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--gold); color:var(--gold); font-size:12px; margin-bottom:14px; }
.scard__t{ font-size:17px; }
.scard__p{ font-size:14px; color:var(--ink-2); margin-top:6px; }
.support__note{
  margin-top:30px; text-align:center; font-size:15px; color:var(--gold-deep);
  font-family:var(--font);
}

/* ---------- 9) حول / الآراء ---------- */
.about__grid{ display:grid; gap:clamp(28px,5vw,60px); margin-top:clamp(30px,5vw,50px); }
@media (min-width:900px){ .about__grid{ grid-template-columns:1.25fr .75fr; align-items:start; } }
.about__lead{ font-family:var(--font); font-size:clamp(19px,2.6vw,26px); line-height:1.6; }
.about__body p{ color:var(--ink-2); margin-top:18px; font-size:16px; }
.about__stats{ display:grid; gap:14px; }
.stat{ border:1px solid var(--line); border-radius:var(--r-m); padding:20px 22px; background:var(--surface); }
.stat__v{ font-family:var(--font); font-size:34px; color:var(--gold); line-height:1; }
.stat__l{ font-size:13.5px; color:var(--ink-2); margin-top:6px; }

.reviews__grid{ display:grid; gap:18px; margin-top:clamp(30px,5vw,50px);
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); }
.rcard{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m);
  padding:26px 24px; position:relative;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.rcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow-m); }
.rcard__stars{ color:var(--gold); font-size:13px; letter-spacing:3px; }
.rcard__text{ font-size:15px; color:var(--ink-2); margin-top:12px; }
.rcard__who{ margin-top:18px; padding-top:14px; border-top:1px solid rgba(200,162,74,.2); }
.rcard__name{ font-family:var(--font); font-size:16px; }
.rcard__place{ font-size:13px; color:var(--ink-3); }

/* ---------- 10) التذييل ---------- */
.footer{ background:var(--ink-solid); color:#fff; padding-block:clamp(48px,7vw,80px) 30px; }
.footer__top{ display:grid; gap:34px; }
@media (min-width:820px){ .footer__top{ grid-template-columns:1.2fr .8fr .8fr; } }
.footer__mark{ font-family:var(--font); font-size:26px; }
.footer__mark span{ color:var(--gold); }
.footer__tag{ color:#9C9C9C; font-size:14px; margin-top:10px; max-width:34ch; }
.footer__h{ font-family:var(--font); font-size:14px; letter-spacing:.05em; color:var(--gold); margin-bottom:14px; }
.footer__link{ display:block; color:#CFCFCF; font-size:14.5px; padding-block:6px; transition:color .3s, padding-inline-start .3s var(--ease); }
.footer__link:hover{ color:var(--gold); padding-inline-start:6px; }
.footer__bottom{
  margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.10);
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between;
  color:#8A8A8A; font-size:13px;
}

/* ---------- 11) الأزرار العائمة ---------- */
.fab-stack{ position:fixed; inset-block-end:20px; inset-inline-end:18px; z-index:70; display:flex; flex-direction:column; gap:12px; align-items:center; }
.fab{
  position:relative;
  width:50px; height:50px; border-radius:var(--r-btn);
  display:grid; place-items:center;
  box-shadow:0 4px 14px -4px rgba(17,17,17,.35);
  transition:box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
.fab:hover{ box-shadow:0 6px 18px -4px rgba(17,17,17,.45); }
.fab:active{ box-shadow:inset 0 1px 4px rgba(0,0,0,.4); }
.fab--wa{ background:linear-gradient(180deg,#262626,#111); border:1px solid rgba(200,162,74,.5); }
.fab--wa:hover{ border-color:var(--gold); }
.fab--wa svg{ width:26px; height:26px; fill:var(--gold); }
.fab--wa::after{
  content:""; position:absolute; inset:0; border-radius:var(--r-btn);
  border:1px solid var(--gold); animation:pulse 2.6s ease-out infinite; pointer-events:none;
}
.fab--top{
  background:var(--surface); border:1px solid var(--line); color:var(--black);
  box-shadow:0 2px 8px -2px rgba(17,17,17,.20);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background-color .18s, border-color .18s;
}
.fab--top.is-visible{ opacity:1; visibility:visible; transform:none; }
.fab--top:hover{ border-color:var(--gold); background:var(--sand); }
@keyframes pulse{ 0%{ transform:scale(1); opacity:.7; } 70%{ transform:scale(1.55); opacity:0; } 100%{ opacity:0; } }

/* ---------- 12) الحركات ---------- */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }

.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
  .hero__arch svg path,.hero__arch svg line{ stroke-dashoffset:0; }
}

/* ---------- استجابة ---------- */
@media (max-width:640px){
  .pkg__head{ flex-direction:column; }
  .pkg__foot{ flex-direction:column; align-items:stretch; }
  .pkg__open{ align-self:flex-start; }
  .count__cell{ min-width:0; flex:1; }
}


/* =========================================================
   إضافات الموقع متعدد الصفحات
   ========================================================= */

/* رابط القائمة النشط */
.drawer__link.is-active{ color:var(--gold-deep); }
.drawer__link.is-active::after{ width:100%; }

/* ترويسة الصفحات الداخلية */
.page-head{
  padding:calc(84px + clamp(30px,6vw,64px)) 0 clamp(26px,4vw,44px);
  border-block-end:1px solid var(--line);
  background:linear-gradient(180deg, rgba(200,162,74,.06), transparent);
}
.crumbs{ font-size:13px; color:var(--ink-3); margin-bottom:12px; display:flex; gap:8px; flex-wrap:wrap; }
.crumbs a{ color:var(--gold-deep); }
.crumbs a:hover{ text-decoration:underline; }
.crumbs span{ color:var(--ink-3); }
.page-title{ font-size:clamp(28px,5vw,52px); }
.page-lead{ color:var(--ink-2); margin-top:12px; max-width:62ch; font-size:clamp(15px,1.8vw,17px); }

/* بطاقة الباقة صارت رابطاً */
a.pkg{ color:inherit; }
.pkg__badge.is-inline{ position:static; display:inline-block; margin-bottom:14px; }

/* تفاصيل الباقة */
.detail{ display:grid; gap:clamp(28px,5vw,56px); }
@media (min-width:900px){ .detail{ grid-template-columns:1fr 340px; align-items:start; } }
.detail__aside{ position:sticky; top:96px; display:grid; gap:16px;
  border:1px solid var(--line); border-radius:var(--r-m); padding:26px 24px; background:var(--surface); }
.detail__h{ font-family:var(--font); font-size:clamp(20px,3vw,27px); margin-bottom:20px; }
.feature-list{ list-style:none; padding:0; margin:0; display:grid; gap:11px 26px; }
@media (min-width:640px){ .feature-list{ grid-template-columns:1fr 1fr; } }
.feature-list li{ display:flex; gap:10px; align-items:flex-start; font-size:15.5px; color:var(--ink-2); }
.feature-list li::before{ content:"✔"; color:var(--gold); font-size:12.5px; margin-top:5px; flex:none; }

.note-box{
  margin-top:26px; padding:14px 16px; border-radius:var(--r-s);
  background:rgba(200,162,74,.09); border:1px solid var(--line);
  font-size:14.5px; color:var(--ink-2); display:flex; gap:10px; align-items:flex-start;
}
.note-box::before{ content:"!"; flex:none; width:19px; height:19px; border-radius:50%;
  border:1px solid var(--gold); color:var(--gold-deep); font-size:12px;
  display:grid; place-items:center; margin-top:3px; }

.pay-box{ padding:15px 17px; border-radius:var(--r-s); background:var(--sand);
  border:1px solid var(--line); font-size:14px; color:var(--ink-2); }
.pay-box b{ color:var(--black); font-weight:600; }

/* نماذج */
.form{ border:1px solid var(--line); border-radius:var(--r-m); background:var(--surface);
  padding:clamp(22px,4vw,34px); max-width:640px; }
.form__row{ display:grid; gap:16px; }
@media (min-width:560px){ .form__row--2{ grid-template-columns:1fr 1fr; } }
.field{ display:block; margin-top:16px; }
.field__label{ display:block; font-size:13.5px; color:var(--ink-2); margin-bottom:7px; }
.field__opt{ color:var(--ink-3); font-size:12px; }
.input, .textarea{
  width:100%; font:inherit; font-size:15px; color:var(--black);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-btn);
  padding:11px 14px; transition:border-color .18s ease, box-shadow .18s ease;
}
.textarea{ min-height:130px; resize:vertical; line-height:1.8; }
.input:focus, .textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(200,162,74,.16); }

/* اختيار النجوم */
.stars-pick{ display:flex; gap:6px; align-items:center; }
.star{ font-size:30px; line-height:1; color:#DDD6C4; transition:color .15s ease, transform .15s ease; }
.star.is-on{ color:var(--gold); }
.star:hover{ transform:scale(1.12); }
.stars-value{ font-size:13px; color:var(--ink-3); margin-inline-start:10px; }

.form__msg{ font-size:14px; margin-top:14px; min-height:20px; }
.form__msg.is-error{ color:var(--red); }
.form__msg.is-ok{ color:#1E7A46; }
.form__note{ font-size:13px; color:var(--ink-3); margin-top:14px; }

/* لوحة التحكم */
.admin-gate{ max-width:420px; }
.admin-bar{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:26px; }
.admin-bar__info{ font-size:14px; color:var(--ink-2); }
.admin-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.btn-danger{
  margin-top:16px; height:36px; padding:0 14px; border-radius:var(--r-btn);
  border:1px solid rgba(179,43,43,.35); background:var(--surface); color:var(--red);
  font-family:var(--font); font-size:14px;
  transition:background-color .18s ease, border-color .18s ease;
}
.btn-danger:hover{ background:rgba(179,43,43,.07); border-color:var(--red); }
.empty{ color:var(--ink-3); font-size:15px; }

/* رابط لوحة التحكم في التذييل */
.footer__admin{ color:#6E6E6E; font-size:12.5px; }
.footer__admin:hover{ color:var(--gold); }

/* حالة العرض في لوحة التحكم */
.admin-section{ padding-bottom:34px; border-bottom:1px solid var(--line); }
.offer-state{
  font-size:15px; padding:14px 16px; border-radius:var(--r-s);
  border:1px solid var(--line); background:var(--sand); color:var(--ink-2);
}
.offer-state.is-on{ border-color:rgba(30,122,70,.35); background:rgba(30,122,70,.07); }
.offer-state.is-on b{ color:#1E7A46; }
.offer-state.is-off{ border-color:rgba(179,43,43,.3); background:rgba(179,43,43,.05); }
.offer-state.is-off b{ color:var(--red); }

/* =========================================================
   زر تبديل اللغة
   ========================================================= */
.topbar__end{ display:flex; align-items:center; gap:12px; }

.lang-switch{
  display:inline-flex; align-items:center; gap:2px;
  border:1px solid rgba(200,162,74,.75); border-radius:var(--r-btn);
  background:var(--surface); padding:3px;
  box-shadow:0 2px 8px -3px rgba(17,17,17,.22);
}
.lang-switch::before{                    /* أيقونة لغة صغيرة لتوضيح الزر */
  content:""; width:15px; height:15px; margin-inline-start:7px; margin-inline-end:2px; flex:none;
  background:currentColor; color:var(--gold-deep); opacity:.85;
  -webkit-mask:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><circle cx='12' cy='12' r='9'/><path d='M3 12h18M12 3c2.5 3 2.5 15 0 18M12 3c-2.5 3-2.5 15 0 18'/></svg>");
  mask:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><circle cx='12' cy='12' r='9'/><path d='M3 12h18M12 3c2.5 3 2.5 15 0 18M12 3c-2.5 3-2.5 15 0 18'/></svg>");
}
.lang-btn{
  font-family:var(--font); font-size:13px; font-weight:700;
  line-height:1; padding:8px 12px; border-radius:4px;
  color:var(--black);
  transition:background-color .18s ease, color .18s ease;
}
.lang-btn.is-on{ background:var(--ink-solid); color:var(--gold); }
.lang-btn:hover:not(.is-on){ background:var(--sand); }
.lang-sep{ color:rgba(200,162,74,.6); font-size:12px; }

@media (max-width:420px){
  .lang-btn{ padding:6px 9px; font-size:12px; }
  .topbar__end{ gap:8px; }
}

/* =========================================================
   أسماء الباقات وألوانها
   red: أحمر بظلال سوداء | goldbrush: برش ذهبي | nightgold: أسود برش ذهبي
   ========================================================= */

/* اسم الباقة أعلى البطاقة */
.pkg__label{
  display:block; font-family:var(--font);
  font-size:14px; font-weight:700; letter-spacing:.01em;
  color:var(--gold); margin-bottom:4px;
}
.pkg__label.is-inline{ margin-bottom:12px; }
.pkg__open svg{ color:inherit; }

/* ---------- الباقة الأولى: أحمر بظلال سوداء ---------- */
.pkg--red{
  background:radial-gradient(125% 95% at 12% 0%, #A82323 0%, #6E1616 42%, #2B0909 100%);
  border-color:rgba(255,255,255,.10); color:#fff;
  box-shadow:0 18px 44px -20px rgba(0,0,0,.85), inset 0 -70px 90px -60px rgba(0,0,0,.9);
}
.pkg--red:hover{ border-color:rgba(255,255,255,.24); box-shadow:0 30px 66px -26px rgba(0,0,0,.9), inset 0 -70px 90px -60px rgba(0,0,0,.9); }
.pkg--red .pkg__label{ color:#F0C9A0; }
.pkg--red .pkg__sub, .pkg--red .pkg__note{ color:rgba(255,255,255,.82); }
.pkg--red .pkg__note::before{ background:rgba(255,255,255,.7); }
.pkg--red .pkg__old{ color:rgba(255,255,255,.62); text-decoration-color:rgba(255,255,255,.85); }
.pkg--red .pkg__cur, .pkg--red .pkg__only{ color:#F2CFA6; }
.pkg--red .pkg__open{ background:var(--ink-solid); border-color:rgba(255,255,255,.25); color:#F0C9A0; }
.pkg--red:hover .pkg__open{ border-color:#F0C9A0; }
.pkg--red .count__cell{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.22); }
.pkg--red .count__lbl{ color:rgba(255,255,255,.66); }
.pkg--red .count__over{ color:#F2CFA6; }

/* ---------- الباقة الثانية: برش ذهبي ---------- */
.pkg--goldbrush{
  background:
    linear-gradient(112deg, rgba(255,255,255,.40) 6%, rgba(255,255,255,0) 17%),
    linear-gradient(112deg, rgba(80,50,0,.16) 26%, rgba(80,50,0,0) 37%),
    linear-gradient(112deg, rgba(255,255,255,.30) 52%, rgba(255,255,255,0) 63%),
    linear-gradient(112deg, rgba(80,50,0,.18) 74%, rgba(80,50,0,0) 85%),
    linear-gradient(160deg, #F2DA95 0%, #D9B25C 45%, #B98F35 100%);
  border-color:rgba(17,17,17,.28); color:var(--ink-solid);
  box-shadow:0 18px 44px -22px rgba(17,17,17,.75);
}
.pkg--goldbrush:hover{ border-color:var(--ink-solid); box-shadow:0 30px 66px -26px rgba(17,17,17,.85); }
.pkg--goldbrush .pkg__label{ color:#4A3208; }
.pkg--goldbrush .pkg__sub, .pkg--goldbrush .pkg__note{ color:rgba(17,17,17,.74); }
.pkg--goldbrush .pkg__note::before{ background:rgba(17,17,17,.55); }
.pkg--goldbrush .pkg__old{ color:rgba(17,17,17,.55); text-decoration-color:rgba(17,17,17,.8); }
.pkg--goldbrush .pkg__cur, .pkg--goldbrush .pkg__only{ color:rgba(17,17,17,.68); }
.pkg--goldbrush .pkg__open{ background:var(--ink-solid); border-color:var(--ink-solid); color:var(--gold); }
.pkg--goldbrush .count__cell{ background:rgba(255,255,255,.30); border-color:rgba(17,17,17,.22); }
.pkg--goldbrush .count__lbl{ color:rgba(17,17,17,.6); }

/* ---------- الباقة الثالثة: أسود برش ذهبي ---------- */
.pkg--nightgold{
  background:
    radial-gradient(2px 2px   at 90% 10%, rgba(200,162,74,.95), transparent 60%),
    radial-gradient(1.6px 1.6px at 82% 22%, rgba(200,162,74,.85), transparent 60%),
    radial-gradient(2.2px 2.2px at 94% 34%, rgba(200,162,74,.75), transparent 60%),
    radial-gradient(1.4px 1.4px at 74% 44%, rgba(200,162,74,.65), transparent 60%),
    radial-gradient(1.8px 1.8px at 88% 58%, rgba(200,162,74,.80), transparent 60%),
    radial-gradient(1.5px 1.5px at 96% 72%, rgba(200,162,74,.70), transparent 60%),
    radial-gradient(1.3px 1.3px at 78% 84%, rgba(200,162,74,.55), transparent 60%),
    radial-gradient(70% 60% at 100% 100%, rgba(200,162,74,.26), transparent 62%),
    linear-gradient(165deg, #242424 0%, #0B0B0B 100%);
  border-color:rgba(200,162,74,.42); color:#fff;
  box-shadow:0 18px 44px -22px rgba(0,0,0,.9);
}
.pkg--nightgold:hover, .pkg--nightgold.pkg--soon:hover{
  border-color:var(--gold); box-shadow:0 30px 66px -26px rgba(200,162,74,.45);
}
.pkg--nightgold .pkg__label{ color:var(--gold); }
.pkg--nightgold .pkg__sub, .pkg--nightgold .pkg__note{ color:rgba(255,255,255,.78); }
.pkg--nightgold .pkg__note::before{ background:var(--gold); }
.pkg--nightgold .pkg__old{ color:rgba(255,255,255,.55); text-decoration-color:var(--gold); }
.pkg--nightgold .pkg__cur, .pkg--nightgold .pkg__only{ color:var(--gold); }
.pkg--nightgold .pkg__open{ background:transparent; border-color:rgba(200,162,74,.6); color:var(--gold); }
.pkg--nightgold:hover .pkg__open{ background:rgba(200,162,74,.12); border-color:var(--gold); }
.pkg--nightgold .count__cell{ background:rgba(255,255,255,.06); border-color:rgba(200,162,74,.35); }
.pkg--nightgold .count__lbl{ color:rgba(255,255,255,.6); }

/* ---------- أزرار الطلب على صفحة كل باقة ---------- */
.cta--red{
  background:radial-gradient(140% 120% at 10% 0%, #A82323 0%, #6E1616 55%, #2B0909 100%);
  border-color:rgba(255,255,255,.22);
}
.cta--goldbrush{
  background:linear-gradient(180deg, #F2DA95 0%, #C79B41 100%);
  color:var(--ink-solid); border-color:rgba(17,17,17,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 10px 26px -14px rgba(17,17,17,.8);
}
.cta--goldbrush .cta__arrow path{ stroke:var(--ink-solid); }
.cta--goldbrush:active::before{ background:rgba(0,0,0,.16); }
.cta--nightgold{ border-color:rgba(200,162,74,.6); }

/* لمسة لون على البطاقة الجانبية في صفحة كل باقة */
body[data-theme="red"] .detail__aside{ border-color:rgba(168,35,35,.45); }
body[data-theme="red"] .pkg__label.is-inline{ color:#A82323; }
body[data-theme="goldbrush"] .detail__aside{ border-color:rgba(17,17,17,.30); }
body[data-theme="nightgold"] .detail__aside{ border-color:rgba(200,162,74,.55); }

/* =========================================================
   زر الوضع الليلي / النهاري
   ========================================================= */
.mode-switch{
  display:inline-flex; align-items:center; gap:2px;
  border:1px solid rgba(200,162,74,.75); border-radius:var(--r-btn);
  background:var(--surface); padding:3px;
  box-shadow:0 2px 8px -3px rgba(17,17,17,.22);
}
.mode-btn{
  display:grid; place-items:center;
  width:32px; height:30px; border-radius:4px;
  color:var(--ink-2);
  transition:background-color .18s ease, color .18s ease;
}
.mode-btn.is-on{ background:var(--ink-solid); color:var(--gold); }
.mode-btn:hover:not(.is-on){ background:var(--sand); color:var(--black); }

/* =========================================================
   الوضع الليلي
   ========================================================= */
html[data-mode="dark"]{
  --white:   #0C0C0C;
  --surface: #171717;
  --sand:    #131313;
  --veil:    12,12,12;
  --black:   #F4F4F4;
  --ink-2:   #BDBDBD;
  --ink-3:   #8F8F8F;
  --line:    rgba(200,162,74,.34);
  --gold-deep:#E0BE6E;
}
html[data-mode="dark"] body{ background:var(--white); }
html[data-mode="dark"] .page-head{ background:linear-gradient(180deg, rgba(200,162,74,.10), transparent); }

/* الأزرار العادية بيضاء وكتابتها ذهبية */
html[data-mode="dark"] .btn-ghost{ background:#FFFFFF; color:#8A6B22; border-color:var(--gold); }
html[data-mode="dark"] .btn-ghost:hover{ background:#FFF8E9; border-color:var(--gold); }
html[data-mode="dark"] .btn-icon,
html[data-mode="dark"] .drawer__close,
html[data-mode="dark"] .fab--top{ background:#FFFFFF; color:#8A6B22; border-color:var(--gold); }
html[data-mode="dark"] .btn-danger{ background:#FFFFFF; }

html[data-mode="dark"] .burger{ background:var(--surface); }
html[data-mode="dark"] .burger__lines i{ background:var(--gold); }
html[data-mode="dark"] .lang-btn{ color:#EFEFEF; }
html[data-mode="dark"] .lang-btn.is-on,
html[data-mode="dark"] .mode-btn.is-on{ background:var(--gold); color:#111; }
html[data-mode="dark"] .mode-btn{ color:#EFEFEF; }
html[data-mode="dark"] .lang-switch,
html[data-mode="dark"] .mode-switch{ box-shadow:none; }

html[data-mode="dark"] .hero__logo{ mix-blend-mode:screen; filter:invert(1) hue-rotate(180deg); }
html[data-mode="dark"] .hero__bg{ opacity:.14; }
html[data-mode="dark"] .star{ color:#3A3A3A; }
html[data-mode="dark"] .pay-box{ background:#101010; }
html[data-mode="dark"] .note-box{ background:rgba(200,162,74,.10); }
html[data-mode="dark"] .footer{ border-top:1px solid rgba(200,162,74,.22); }
html[data-mode="dark"] .offer-state{ background:#101010; }