/* ============================================================
   DICE GYM — هوية بصرية موحّدة (عائلة MASA)
   كل الألوان والمسافات والخطوط تُعرّف هنا فقط.
   ============================================================ */

:root{
  /* ---------- الهوية: ذهبي وأسود ----------
     الأسود هو المسرح، والذهبي هو البطل الوحيد.
     اللون الثانوي عاجي دافئ (--accent) — يفصل العناصر
     الوظيفية عن الذهبي دون أن يكسر ثنائية الهوية.      */
  --navy:      #0a0b0d;   /* أسود الخلفية */
  --navy-2:    #141518;   /* أسود البطاقات */
  --navy-3:    #1e2024;   /* أسود مرتفع */

  --gold:      #c9a24b;
  --gold-soft: #e2c179;
  --gold-deep: #8a6d28;

  --cream:     #ece0c8;
  --accent:    #e8dcc3;   /* العاجي — اللون الثانوي */
  --teal:      var(--accent);   /* اسم قديم مُبقى للتوافق */
  --white:     #ffffff;

  --txt:       #ece0c8;
  --txt-dim:   #9d968a;   /* رمادي دافئ — لا أزرق */
  --line:      rgba(201,162,75,.22);
  --line-soft: rgba(255,255,255,.07);

  --ok:        #3ddc84;
  --warn:      #f0b429;
  --danger:    #e5484d;

  /* مقاسات */
  --wrap:      1120px;
  --r-sm:      10px;
  --r:         16px;
  --r-lg:      24px;
  --shadow:    0 18px 50px rgba(0,0,0,.45);
  --shadow-sm: 0 8px 24px rgba(0,0,0,.30);

  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);   /* دخول ناعم بلا ارتداد */

  /* سلّم مسافات واحد — كل تباعد في الموقع يأتي من هنا،
     فلا تتراكم أرقام عشوائية تُنتج فجوات غير متساوية. */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 48px;
  --sec-y: clamp(52px, 7vw, 92px);   /* التباعد الرأسي لكل قسم */
}

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:84px;          /* لا يختفي عنوان القسم خلف الترويسة اللاصقة */
  scrollbar-width:none;             /* إخفاء شريط التمرير — التمرير نفسه يبقى كاملاً */
  -ms-overflow-style:none;
}
html::-webkit-scrollbar{ width:0; height:0; }

body{
  margin:0;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(201,162,75,.11), transparent 60%),
    radial-gradient(900px 600px at 10% 0%,  rgba(232,220,195,.05), transparent 55%),
    var(--navy);
  color:var(--txt);
  font-family:'Cairo', system-ui, 'Segoe UI', sans-serif;
  font-size:16px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  /* clip لا hidden: الأخير يحوّل overflow-y إلى auto ضمنياً
     فيكسر position:sticky في الترويسة. */
  overflow-x:clip;
}

h1,h2,h3,h4{ line-height:1.4; margin:0 0 .5em; font-weight:800; color:var(--white); }
h1{ font-size:clamp(28px,5vw,52px); }
h2{ font-size:clamp(22px,3.4vw,34px); }
h3{ font-size:clamp(18px,2.4vw,22px); }
p{ margin:0 0 1em; }

a{ color:var(--teal); text-decoration:none; }
a:hover{ text-decoration:underline; }

img,svg{ max-width:100%; }

::selection{ background:var(--gold); color:var(--navy); }

/* التركيز — إمكانية الوصول */
:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- تخطيط ---------- */
.wrap{ width:min(100% - 32px, var(--wrap)); margin-inline:auto; }
/* كل الأقسام بنفس التباعد الرأسي — لا استثناءات inline */
.section{ padding-block:var(--sec-y); }
.center{ text-align:center; }

.grid{ display:grid; gap:var(--s-3); }
.grid-2{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.grid-3{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }

/* عنوان قسم موحّد */
.sec-head{ margin-bottom:var(--s-5); }
.sec-head h2{ margin-bottom:var(--s-1); }
.sec-head p:last-child{ margin-bottom:0; }
.sec-head .kicker{
  display:inline-block; font-size:13px; font-weight:700; letter-spacing:.08em;
  color:var(--gold-soft); background:rgba(201,162,75,.10);
  border:1px solid rgba(201,162,75,.30); border-radius:999px;
  padding:4px 14px; margin-bottom:14px;
}
.sec-head h2 .hl{ color:var(--gold); }
.sec-head p{ color:var(--txt-dim); max-width:62ch; margin-inline:auto; }

/* ---------- الترويسة ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  /* أعتم قليلاً من الأصل لأنه يقف فوق هيرو تيل ساطع */
  background:rgba(8,9,11,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.nav-in{ display:flex; align-items:center; gap:18px; height:68px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:900; font-size:20px; color:var(--white); }
.brand:hover{ text-decoration:none; }
.brand .g{ color:var(--gold); }
.nav-links{ display:flex; gap:6px; margin-inline-start:auto; }
.nav-links a{
  color:var(--txt-dim); font-weight:600; font-size:15px;
  padding:8px 14px; border-radius:10px; transition:.2s var(--ease);
}
.nav-links a:hover{ color:var(--white); background:rgba(255,255,255,.06); text-decoration:none; }
.nav-links a.active{ color:var(--gold); background:rgba(201,162,75,.10); }
.nav-toggle{
  display:none; margin-inline-start:auto; background:none; border:1px solid var(--line-soft);
  color:var(--white); border-radius:10px; padding:8px 12px; font-size:18px; cursor:pointer;
}

@media (max-width:860px){
  .nav-toggle{ display:block; }
  .nav-links{
    position:absolute; inset-inline:12px; top:64px;
    flex-direction:column; gap:2px; margin:0;
    background:var(--navy-2); border:1px solid var(--line-soft);
    border-radius:var(--r); padding:10px; box-shadow:var(--shadow);
    display:none;
  }
  .nav-links.open{ display:flex; }
}

/* ---------- أزرار ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-weight:800; font-size:16px;
  padding:13px 28px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:.25s var(--ease); white-space:nowrap;
}
.btn:hover{ text-decoration:none; transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }

.btn-gold{ background:linear-gradient(135deg,var(--gold-soft),var(--gold)); color:#1a1206; box-shadow:0 8px 26px rgba(201,162,75,.30); }
.btn-gold:hover{ box-shadow:0 12px 34px rgba(201,162,75,.46); }
/* الزر الثانوي — عاجي على أسود */
.btn-teal{ background:var(--accent); color:#17140c; box-shadow:0 8px 26px rgba(232,220,195,.18); }
.btn-ghost{ background:transparent; color:var(--txt); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }
.btn-lg{ font-size:18px; padding:16px 38px; }
.btn-sm{ font-size:14px; padding:9px 18px; }

/* ---------- بطاقات ---------- */
.card{
  background:linear-gradient(180deg, var(--navy-2), rgba(20,21,24,.55));
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  padding:26px;
  box-shadow:var(--shadow-sm);
  transition:.3s var(--ease);
}
.card:hover{ border-color:var(--line); transform:translateY(-4px); }
.card h3{ display:flex; align-items:center; gap:10px; }
.card p{ color:var(--txt-dim); margin-bottom:0; }
.card-ico{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  background:rgba(201,162,75,.10); border:1px solid rgba(201,162,75,.22);
  margin-bottom:16px;
}

.badge{
  display:inline-block; font-size:12px; font-weight:800; letter-spacing:.04em;
  padding:3px 12px; border-radius:999px;
}
.badge-gold{ background:rgba(201,162,75,.16); color:var(--gold-soft); border:1px solid rgba(201,162,75,.34); }
.badge-teal{ background:rgba(232,220,195,.10); color:var(--cream); border:1px solid rgba(232,220,195,.26); }

/* ============================================================
   الهيرو — لوح تيل ساطع بعرض الشاشة
   ============================================================ */
/* الأسود هو الأساس، والذهب إضاءة تأتي من خلف الصورة —
   لا طلاء يغطّي نصف الشاشة. هكذا يبقى الهيرو جزءاً من
   الموقع لا لوحاً غريباً ملصوقاً فوقه. */
.hero{
  position:relative;
  background:
    radial-gradient(620px 440px at 74% 30%, rgba(201,162,75,.30), transparent 68%),
    radial-gradient(900px 520px at 18% 96%, rgba(138,109,40,.13), transparent 64%),
    linear-gradient(165deg, #121317 0%, var(--navy) 58%, #0d0e12 100%);
  overflow:hidden;
  isolation:isolate;
}

/* نقش نقاط خفيف يستعير نقاط الدايس — يظهر حول مصدر الضوء فقط */
.hero::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:radial-gradient(rgba(201,162,75,.13) 1.4px, transparent 1.4px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(560px 420px at 74% 30%, #000 10%, transparent 72%);
          mask-image:radial-gradient(560px 420px at 74% 30%, #000 10%, transparent 72%);
}

/* خيط ذهبي يفصل الهيرو عمّا تحته بدل تلاشٍ ثقيل */
.hero::after{
  content:''; position:absolute; inset-inline:0; bottom:0; height:1px; z-index:4;
  background:linear-gradient(90deg, transparent, rgba(201,162,75,.55) 32%, rgba(201,162,75,.55) 68%, transparent);
  pointer-events:none;
}

.hero-in{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:var(--s-5); align-items:center;
  min-height:clamp(420px, 56vh, 560px);
  padding-block:var(--sec-y);
  position:relative; z-index:3;
}
@media (max-width:900px){
  .hero-in{ grid-template-columns:1fr; gap:var(--s-4); text-align:center; min-height:0; }
}

/* النص مباشرة على الأسود — البطاقة الزجاجية لم تعد لازمة بعد
   أن صارت الخلفية داكنة، وإزالتها تخفّف الطبقات وتكبّر العنوان. */
.hero-card{
  background:transparent;
  border:0;
  padding:0;
  box-shadow:none;
  max-width:540px;
}
@media (max-width:900px){ .hero-card{ margin-inline:auto; } }

.hero-card h1{ color:#fff; margin-bottom:.35em; }
.hero-card h1 .hl{ color:var(--gold-soft); }
.hero-card .lead{ font-size:clamp(15px,1.7vw,18px); color:#c6bdae; margin-bottom:0; }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:var(--s-3); }
@media (max-width:900px){ .hero-cta{ justify-content:center; } }

.hero-card .btn-ghost{ color:var(--cream); border-color:rgba(232,220,195,.30); }
.hero-card .btn-ghost:hover{ color:var(--gold-soft); border-color:var(--gold); }

.hero-note{ margin:20px 0 0; font-size:14px; color:#9d968a; }
.hero-note b{ color:var(--gold-soft); }

/* ---------- لوحة الصورة ---------- */
.hero-art{ position:relative; align-self:end; justify-self:center; width:100%; z-index:1; }
/* هالة ذهبية خلف الصورة — هي مصدر الضوء في المشهد */
.hero-art::before{
  content:''; position:absolute; inset:-10% -8%; z-index:-1;
  background:radial-gradient(circle at 50% 46%, rgba(201,162,75,.26), transparent 66%);
  filter:blur(24px); pointer-events:none;
}
.hero-art img{ display:block; width:100%; height:auto; filter:drop-shadow(0 26px 44px rgba(0,0,0,.55)); }
.hero-art .hero-fallback{ display:none; width:100%; height:auto; }
.hero-art.no-img img{ display:none; }
.hero-art.no-img .hero-fallback{ display:block; }
@media (max-width:900px){ .hero-art{ max-width:420px; margin-top:12px; } }

/* ============================================================
   قسم الدايس — لوح كحلي داكن ليلمع الذهبي
   ============================================================ */
.dice-section{ position:relative; padding-block:var(--sec-y); }
.dice-section .dice-in{
  display:grid; grid-template-columns:1fr; gap:0; justify-items:center; text-align:center;
}
/* التباعد داخل قسم الرمية يأتي من هوامش العناصر نفسها لا من gap،
   حتى لا يتضاعف مع الهوامش الموجودة أصلاً. */
.dice-in .sec-head{ margin-bottom:var(--s-2); }

/* ============================================================
   محرك الدايس ثلاثي الأبعاد — CSS خالص
   ============================================================ */
.dice-stage{
  position:relative;
  display:grid; place-items:center;
  min-height:340px;
  perspective:1100px;
  perspective-origin:50% 45%;
}

.dice-glow{
  position:absolute; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle, rgba(201,162,75,.22), transparent 68%);
  filter:blur(14px); pointer-events:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.dice-stage.is-gold .dice-glow{
  background:radial-gradient(circle, rgba(201,162,75,.55), transparent 70%);
  transform:scale(1.25);
}

/* الطفو على الغلاف، والدوران على المكعب — فصلهما يمنع القفزة
   البصرية لحظة انتقال المكعب من وضع الخمول إلى البرمة. */
.cube-wrap{
  transform-style:preserve-3d;
  animation:float 5s ease-in-out infinite;
}
@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-12px); }
}

/* المكعب مقاس واحد قابل للتحجيم: --size حجم الضلع،
   و--half نصفه (مسافة دفع كل وجه للخارج). تغيير --size
   وحده يعطي مكعباً بأي حجم بلا إعادة تعريف الأوجه الستة. */
.cube{
  --size:140px;
  --half:70px;
  position:relative;
  width:var(--size); height:var(--size);
  transform-style:preserve-3d;
  transform:rotateX(-20deg) rotateY(-28deg);
  transition:transform 2.6s cubic-bezier(.18,.72,.24,1);
  will-change:transform;
}

.face{
  position:absolute; top:0; left:0;
  width:var(--size); height:var(--size);
  border-radius:calc(var(--size) * .157);
  background:linear-gradient(150deg,#ffffff,#e6e6e6);
  border:1px solid rgba(0,0,0,.10);
  box-shadow:inset 0 0 22px rgba(0,0,0,.10);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
  padding:calc(var(--size) * .13); gap:calc(var(--size) * .043);
  backface-visibility:hidden;
}
/* الوجه السادس — الذهبي */
.face.f6{ background:linear-gradient(150deg,var(--gold-soft),#a8842f); }
.face.f6 .pip{ background:#2a1e08; }

.pip{
  width:calc(var(--size) * .186); height:calc(var(--size) * .186);
  border-radius:50%;
  background:#0a0b0d; align-self:center; justify-self:center;
  box-shadow:inset 0 -2px 4px rgba(255,255,255,.18);
}

/* رمز الفئة في مركز الوجه — يرث موضع النقطة الوسطى الذهبية
   ويحمل توقيع الهوية نفسه. خارج الشبكة ليأخذ حجماً حراً
   لا تحدّه خلية 30 بكسل. */
.face-ico{
  position:absolute; inset:0; z-index:1;
  display:grid; place-items:center;
  pointer-events:none;
}
.face-ico > span{
  font-family:'Cairo', system-ui, sans-serif;
  font-size:calc(var(--size) * .135);
  font-weight:900;
  color:var(--gold);
  line-height:1;
  white-space:nowrap;
  letter-spacing:-.01em;
}
/* على الوجه الذهبي ينقلب التباين */
.face.f6 .face-ico > span{ color:#2a1e08; }

/* نبض هادئ يجعل الرموز حيّة — وتأخير مختلف لكل وجه
   حتى لا تتنفّس الأوجه الستة على إيقاع واحد. */
@keyframes ico-breathe{
  0%,100%{ transform:scale(1);    opacity:.88; }
  50%    { transform:scale(1.10); opacity:1;   }
}
.face-ico > span{ animation:ico-breathe 2.8s var(--ease) infinite; transform-origin:center; }
.face.f2 .face-ico > span{ animation-delay:.30s; }
.face.f3 .face-ico > span{ animation-delay:.60s; }
.face.f4 .face-ico > span{ animation-delay:.90s; }
.face.f5 .face-ico > span{ animation-delay:1.20s; }
.face.f6 .face-ico > span{ animation-delay:1.50s; animation-duration:2.2s; }

/* مواضع النقاط داخل شبكة 3×3 */
.p11{ grid-area:1/1; } .p12{ grid-area:1/2; } .p13{ grid-area:1/3; }
.p21{ grid-area:2/1; } .p22{ grid-area:2/2; } .p23{ grid-area:2/3; }
.p31{ grid-area:3/1; } .p32{ grid-area:3/2; } .p33{ grid-area:3/3; }

/* ترتيب النرد القياسي: مجموع الوجهين المتقابلين = 7 */
.f1{ transform:translateZ(var(--half)); }
.f2{ transform:rotateY(90deg)  translateZ(var(--half)); }
.f3{ transform:rotateY(180deg) translateZ(var(--half)); }
.f4{ transform:rotateY(-90deg) translateZ(var(--half)); }
.f5{ transform:rotateX(90deg)  translateZ(var(--half)); }
.f6{ transform:rotateX(-90deg) translateZ(var(--half)); }

@media (max-width:520px){
  .dice-stage .cube{ --size:112px; --half:56px; }
}

/* ---------- النرد الصغير داخل بطاقات الأقسام ---------- */
.mini-dice{
  perspective:520px; perspective-origin:50% 45%;
  width:78px; height:78px; margin-bottom:var(--s-2);
}
.mini-dice .cube{
  --size:78px; --half:39px;
  transition:transform 1.9s cubic-bezier(.18,.72,.24,1);
}
.mini-dice .face{ box-shadow:inset 0 0 12px rgba(0,0,0,.10); }
.mini-dice .face-ico > span{ font-size:calc(var(--size) * .152); }

/* لوحة التحكم تحت الدايس */
.roll-panel{ margin-top:var(--s-3); text-align:center; }
.roll-credits{
  font-size:14px; color:var(--txt-dim); margin-bottom:var(--s-2);
  display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
}
.roll-credits b{ color:var(--gold-soft); }
.roll-credits .exhausted{ color:var(--warn); }

.sound-toggle{
  background:none; border:1px solid var(--line-soft); color:var(--txt-dim);
  width:38px; height:38px; border-radius:50%; cursor:pointer; font-size:16px;
  transition:.2s var(--ease);
}
.sound-toggle:hover{ color:var(--gold); border-color:var(--line); }

/* بطاقة نتيجة البرمة */
.roll-result{
  margin-top:var(--s-3); width:100%; max-width:560px;
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:.45s var(--ease);
}
.roll-result.show{ opacity:1; transform:none; pointer-events:auto; }
.roll-result .card{ text-align:start; border-color:var(--line); }
.roll-result .r-type{ font-size:13px; font-weight:800; color:var(--gold-soft); letter-spacing:.06em; }
.roll-result .r-text{ font-size:18px; font-weight:700; color:var(--white); margin:10px 0; line-height:1.7; }
.roll-result .r-hook{ font-size:15px; color:var(--txt-dim); margin:0; }

/* ============================================================
   حاسبة BMI
   ============================================================ */
.bmi-box{ display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; }
@media (max-width:820px){ .bmi-box{ grid-template-columns:1fr; } }

.slider-row{ margin-bottom:26px; }
.slider-row label{ display:flex; justify-content:space-between; align-items:baseline; font-weight:700; margin-bottom:10px; }
.slider-row .val{ color:var(--gold); font-size:22px; font-weight:900; }
.slider-row .val small{ font-size:13px; color:var(--txt-dim); font-weight:600; }

input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px; border-radius:99px; outline:none;
  /* 270deg لأن المتصفح يعكس الشريط في RTL — فالتعبئة تبدأ من اليمين */
  background:linear-gradient(270deg,var(--gold) var(--fill,50%), rgba(255,255,255,.09) var(--fill,50%));
  cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:24px; height:24px; border-radius:50%;
  background:var(--gold); border:3px solid var(--navy);
  box-shadow:0 4px 14px rgba(201,162,75,.45); cursor:grab;
}
input[type=range]::-moz-range-thumb{
  width:24px; height:24px; border-radius:50%;
  background:var(--gold); border:3px solid var(--navy);
  box-shadow:0 4px 14px rgba(201,162,75,.45); cursor:grab; border-width:3px;
}

.gauge-wrap{ text-align:center; }
.gauge{ width:100%; max-width:300px; }
.gauge-track{ stroke:rgba(255,255,255,.08); }
.gauge-fill{
  stroke-linecap:round;
  transition:stroke-dashoffset .8s var(--ease), stroke .5s var(--ease);
}
.gauge-val{ font-size:44px; font-weight:900; fill:var(--white); }
.gauge-lbl{ font-size:13px; font-weight:700; fill:var(--txt-dim); }

.bmi-cat{ font-size:22px; font-weight:900; margin-top:-6px; }
.bmi-hint{ color:var(--txt-dim); font-size:15px; margin:6px 0 18px; }

.bmi-scale{ display:flex; gap:4px; margin-top:18px; font-size:11px; font-weight:700; text-align:center; }
.bmi-scale div{ flex:1; padding:5px 2px; border-radius:6px; opacity:.35; transition:.3s var(--ease); }
.bmi-scale div.on{ opacity:1; transform:scale(1.06); }

/* ============================================================
   مخطط دمج الأقسام الثلاثة
   ============================================================ */
.merge-chart{ display:grid; place-items:center; }
.merge-chart svg{ width:100%; max-width:420px; }
.merge-lobe{ transition:.35s var(--ease); cursor:default; }
.merge-lobe:hover{ transform:scale(1.05); transform-origin:center; }

/* ============================================================
   بطاقات الباقات
   ============================================================ */
.plans-grid{ display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); align-items:stretch; }

.plan{
  position:relative; display:flex; flex-direction:column; padding:0; overflow:hidden;
}
.plan:hover{ transform:translateY(-6px); }

/* الباقة المميّزة — إطار ذهبي وارتفاع بسيط */
.plan.featured{
  border-color:rgba(201,162,75,.55);
  box-shadow:0 0 0 1px rgba(201,162,75,.18), 0 22px 60px rgba(0,0,0,.42);
}
.plan.featured::before{
  content:'الأكثر اختياراً';
  position:absolute; top:0; inset-inline-start:0; z-index:3;
  background:linear-gradient(135deg,var(--gold-soft),var(--gold)); color:#1a1206;
  font-size:12px; font-weight:900; padding:5px 16px;
  border-end-end-radius:12px;
}

/* ---------- صورة الباقة ---------- */
.plan-media{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  background:linear-gradient(140deg, var(--navy-3), var(--navy-2));
}
.plan-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s var(--ease);
}
.plan:hover .plan-media img{ transform:scale(1.07); }

/* تدرّج يذوّب أسفل الصورة في جسم البطاقة فيبقى النص مقروءاً */
.plan-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,11,13,.10) 0%, rgba(10,11,13,.58) 55%, var(--navy-2) 100%);
}

.plan-media .plan-badge{ position:absolute; top:14px; inset-inline-end:14px; z-index:2; }

/* البديل حين لا تكون الصورة مرفوعة بعد */
.plan-media .ph{ display:none; position:absolute; inset:0; place-items:center; }
.plan-media.no-img img{ display:none; }
.plan-media.no-img .ph{ display:grid; }
.plan-media.no-img{
  background:
    radial-gradient(120px 90px at 50% 38%, rgba(201,162,75,.14), transparent 70%),
    linear-gradient(140deg, var(--navy-3), var(--navy-2));
}
.plan-media .ph small{
  display:block; margin-top:10px; font-size:11px; color:var(--txt-dim); letter-spacing:.02em;
}

/* ---------- جسم الباقة ---------- */
.plan-body{ padding:22px 24px 26px; display:flex; flex-direction:column; flex:1; margin-top:-42px; position:relative; z-index:2; }
.plan-body h3{ margin-bottom:4px; }
.plan-tag{ font-size:13px; color:var(--txt-dim); margin:0 0 16px; }

.plan-price{ display:flex; align-items:baseline; gap:6px; margin-bottom:18px; }
.plan-price b{ font-size:34px; font-weight:900; color:var(--gold); line-height:1; }
.plan-price span{ font-size:13px; color:var(--txt-dim); }
.plan-price.free b{ color:var(--teal); }

.plan-feats{ list-style:none; margin:0 0 22px; padding:0; display:grid; gap:10px; flex:1; }
.plan-feats li{
  display:flex; gap:10px; align-items:flex-start;
  font-size:14.5px; line-height:1.65; color:var(--txt-dim);
}
.plan-feats li::before{
  content:'✓'; flex-shrink:0; margin-top:1px;
  width:19px; height:19px; border-radius:50%; display:grid; place-items:center;
  font-size:11px; font-weight:900;
  background:rgba(201,162,75,.16); color:var(--gold-soft);
}
.plan-feats li.no::before{ content:'—'; background:rgba(255,255,255,.05); color:var(--txt-dim); }
.plan-feats li b{ color:var(--cream); font-weight:700; }

.plan-body .btn{ width:100%; }

/* عدّاد المقاعد */
.seats{
  display:flex; align-items:center; gap:9px;
  font-size:12.5px; color:var(--gold-soft); margin:-6px 0 16px;
}
.seats .dot{
  width:7px; height:7px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 0 0 rgba(201,162,75,.6); animation:pulse 2.2s ease-out infinite;
}
@keyframes pulse{ to{ box-shadow:0 0 0 9px rgba(201,162,75,0); } }

.plans-note{ margin:var(--s-4) 0 0; font-size:13px; color:var(--txt-dim); text-align:center; }

/* ============================================================
   النوافذ المنبثقة
   ============================================================ */
.modal{
  position:fixed; inset:0; z-index:100;
  display:none; place-items:center; padding:20px;
  background:rgba(4,8,16,.78); backdrop-filter:blur(6px);
}
.modal.open{ display:grid; }
.modal-box{
  width:min(100%, 520px);
  background:var(--navy-2);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:32px;
  box-shadow:var(--shadow);
  animation:pop .35s var(--ease);
  max-height:88vh; overflow-y:auto;
}
@keyframes pop{ from{ opacity:0; transform:scale(.94) translateY(12px); } }
.modal-box.gold{ border-color:var(--gold); box-shadow:0 0 60px rgba(201,162,75,.22), var(--shadow); }
.modal h3{ margin-bottom:12px; }
.modal p{ color:var(--txt-dim); }
.modal-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }

.countdown{
  display:flex; gap:10px; justify-content:center; margin:22px 0;
}
.countdown div{
  background:rgba(201,162,75,.10); border:1px solid rgba(201,162,75,.26);
  border-radius:14px; padding:10px 16px; min-width:74px; text-align:center;
}
.countdown b{ display:block; font-size:26px; font-weight:900; color:var(--gold); line-height:1.2; }
.countdown span{ font-size:11px; color:var(--txt-dim); }

#confetti{ position:fixed; inset:0; z-index:99; pointer-events:none; display:none; }

/* ============================================================
   تنبيه السلامة
   ============================================================ */
.safety{
  border:1px solid rgba(240,180,41,.28);
  background:rgba(240,180,41,.06);
  border-radius:var(--r);
  padding:18px 22px;
  display:flex; gap:14px; align-items:flex-start;
  font-size:14.5px; line-height:1.8;
}
.safety .ico{ font-size:22px; flex-shrink:0; }
.safety b{ color:var(--warn); }
.safety p{ margin:0; color:var(--txt-dim); }

/* ---------- الفوتر ---------- */
.footer{ border-top:1px solid var(--line-soft); padding-block:var(--s-5) var(--s-4); }
.footer-in{ display:flex; justify-content:space-between; gap:var(--s-3); flex-wrap:wrap; align-items:center; }
.footer .tag{ color:var(--gold); font-weight:700; }
.footer small{ color:var(--txt-dim); font-size:13px; }
.footer .safety{ margin-bottom:var(--s-4); }

/* ---------- ظهور تدريجي عند التمرير ----------
   ثلاث حركات معاً (شفافية + ارتفاع + وضوح) بمنحنى واحد بطيء
   الخروج، و--d يوزّع التأخير على عناصر الصف فتصل متتابعة
   لا دفعة واحدة — وهذا ما يجعلها تبدو مقصودة لا آلية. */
.reveal{
  opacity:0;
  transform:translateY(26px) scale(.988);
  filter:blur(5px);
  transition:
    opacity   .85s var(--ease-out) var(--d,0ms),
    transform .85s var(--ease-out) var(--d,0ms),
    filter    .85s var(--ease-out) var(--d,0ms);
  will-change:opacity, transform;
}
.reveal.in{ opacity:1; transform:none; filter:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
}