/* ═══════════════════════════════════════════════════════════════
   enhance.css — طبقة الرسومات والزخارف (تعتمد فقط على متغيرات style.css
   لذلك تتلوّن تلقائياً بلون القالب). خفيفة: بدون صور، بدون مكتبات.
═══════════════════════════════════════════════════════════════ */

/* ── شريط تقدّم القراءة ─────────────────────────────── */
#hp-progress{position:fixed;top:0;inset-inline:0;height:3px;z-index:300;pointer-events:none;
  background:linear-gradient(90deg,var(--red),var(--red2),var(--gold2));
  transform-origin:right center;transform:scaleX(0);will-change:transform}

/* ── خلفية: ضوضاء خفيفة + شفق ─────────────────────── */
body::selection,::selection{background:var(--red);color:#fff}
#hp-hero::before{content:'';position:absolute;inset:-20% -10% auto -10%;height:120%;z-index:0;pointer-events:none;
  background:
   radial-gradient(40% 45% at 78% 30%,var(--red-glow),transparent 70%),
   radial-gradient(35% 40% at 15% 70%,var(--gold-dim),transparent 70%),
   radial-gradient(30% 35% at 50% 0%,var(--red-dim),transparent 70%);
  opacity:.75;filter:blur(30px);animation:hpAurora 18s ease-in-out infinite alternate}
#hp-hero::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000 20%,transparent 75%);
          mask-image:radial-gradient(70% 60% at 50% 40%,#000 20%,transparent 75%);opacity:.5}
#hp-hero>.hp-wrap{position:relative;z-index:2}
@keyframes hpAurora{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-3%,4%,0) scale(1.08)}}

/* ── عنوان متدرّج ─────────────────────────────────── */
.hp-hero-h1 span,.hp-hero-h1 strong,.hp-sec-title strong{
  background:linear-gradient(100deg,var(--red3) 0%,var(--red2) 35%,var(--gold2) 100%);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;animation:hpGrad 8s linear infinite}
@keyframes hpGrad{to{background-position:200% center}}

/* ── زخرفة تسمية القسم والعناوين ───────────────────── */
.hp-section-label{position:relative;box-shadow:0 0 24px var(--red-dim)}
.hp-sec-head{position:relative}
.hp-sec-head::after{content:'';display:block;width:84px;height:4px;margin:18px auto 0;border-radius:9px;
  background:linear-gradient(90deg,transparent,var(--red),var(--gold2),var(--red),transparent);opacity:.9}
.hp-section{isolation:isolate}
.hp-section::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(45% 35% at 85% 0%,var(--red-dim),transparent 70%)}
.hp-section:nth-of-type(even)::before{background:radial-gradient(45% 35% at 10% 100%,var(--gold-dim),transparent 70%)}

/* ── شاشة التلفاز في الهيرو ───────────────────────── */
.hp-screen{position:relative;margin:-8px -6px 22px;padding:10px;border-radius:18px;
  background:linear-gradient(160deg,var(--bg-card3),var(--bg2));
  border:1px solid var(--border);box-shadow:0 18px 50px rgba(0,0,0,.55),inset 0 1px 0 var(--glass-shine);direction:ltr}
.hp-screen-bar{display:flex;align-items:center;gap:5px;padding:2px 4px 8px}
.hp-screen-bar i{width:7px;height:7px;border-radius:50%;background:var(--border);display:block}
.hp-screen-bar i:first-child{background:var(--red2)}
.hp-screen-bar .live{margin-inline-start:auto;font:800 9px/1 var(--font-en);letter-spacing:.14em;color:#fff;
  background:var(--red);padding:3px 7px;border-radius:5px;display:inline-flex;gap:5px;align-items:center}
.hp-screen-bar .live::before{content:'';width:5px;height:5px;border-radius:50%;background:#fff;animation:hpDot 1.4s infinite}
.hp-screen-body{display:grid;grid-template-columns:1.7fr 1fr;gap:8px;height:150px}
.hp-screen-main{position:relative;border-radius:11px;overflow:hidden;
  background:
   radial-gradient(80% 90% at 70% 20%,var(--red-glow),transparent 65%),
   linear-gradient(135deg,var(--bg3),var(--bg-card2));display:flex;align-items:center;justify-content:center}
.hp-screen-main::before{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px);animation:hpScan 6s linear infinite}
@keyframes hpScan{to{background-position:0 40px}}
.hp-screen-play{position:relative;width:46px;height:46px;border-radius:50%;
  background:linear-gradient(135deg,var(--red),var(--red2));display:grid;place-items:center;box-shadow:0 0 0 8px var(--red-dim),0 8px 28px var(--red-glow);animation:hpPulse 2.6s ease-in-out infinite}
.hp-screen-play::after{content:'';border-inline-start:13px solid #fff;border-block:8px solid transparent;margin-inline-start:-3px}
@keyframes hpPulse{50%{box-shadow:0 0 0 14px transparent,0 8px 28px var(--red-glow)}}
.hp-eq{position:absolute;bottom:9px;left:10px;display:flex;gap:3px;align-items:flex-end;height:16px}
.hp-eq b{width:3px;background:var(--red3);border-radius:2px;animation:hpEq 1s ease-in-out infinite}
.hp-eq b:nth-child(1){height:40%}.hp-eq b:nth-child(2){height:100%;animation-delay:.2s}
.hp-eq b:nth-child(3){height:60%;animation-delay:.4s}.hp-eq b:nth-child(4){height:85%;animation-delay:.1s}
@keyframes hpEq{50%{transform:scaleY(.35)}}
.hp-screen-rail{display:flex;flex-direction:column;gap:8px}
.hp-screen-rail i{flex:1;border-radius:9px;background:linear-gradient(120deg,var(--bg-card2),var(--bg-card3));border:1px solid var(--border);position:relative;overflow:hidden}
.hp-screen-rail i::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,var(--glass-shine),transparent 70%);transform:translateX(-100%);animation:hpSweep 3.6s ease-in-out infinite}
.hp-screen-rail i:nth-child(2)::after{animation-delay:.5s}.hp-screen-rail i:nth-child(3)::after{animation-delay:1s}
@keyframes hpSweep{60%,100%{transform:translateX(100%)}}
.hp-screen-prog{height:4px;margin:9px 3px 1px;border-radius:4px;background:var(--border);overflow:hidden}
.hp-screen-prog span{display:block;height:100%;width:62%;border-radius:4px;background:linear-gradient(90deg,var(--red),var(--gold2));animation:hpProg 7s ease-in-out infinite alternate}
@keyframes hpProg{from{width:28%}to{width:88%}}
.hp-chip{position:absolute;z-index:3;display:flex;align-items:center;gap:6px;direction:rtl;
  font:800 11px/1 var(--font);color:var(--white,#fff);padding:8px 12px;border-radius:99px;white-space:nowrap;
  background:rgba(10,12,22,.78);border:1px solid var(--red-border);box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 20px var(--red-dim);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:hpFloat 6s ease-in-out infinite}
.hp-chip::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--red2);box-shadow:0 0 10px var(--red2)}
.hp-chip.c1{top:-14px;inset-inline-end:-10px}.hp-chip.c2{bottom:26px;inset-inline-start:-14px;animation-delay:-3s}
@keyframes hpFloat{50%{transform:translateY(-8px)}}

/* ── شريط الأجهزة/الأقسام المتحرّك ─────────────────── */
.hp-marquee{position:relative;z-index:2;overflow:hidden;padding:15px 0;direction:ltr;
  border-block:1px solid var(--border);background:linear-gradient(90deg,var(--bg2),var(--bg3),var(--bg2));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.hp-marquee-track{display:flex;width:max-content;animation:hpMarq 38s linear infinite}
.hp-marquee:hover .hp-marquee-track{animation-play-state:paused}
.hp-marquee-set{display:flex;align-items:center;gap:0;flex-shrink:0}
.hp-marquee-set span{font:800 .92rem/1 var(--font);color:var(--text3);padding:0 26px;white-space:nowrap;display:inline-flex;align-items:center;gap:26px}
.hp-marquee-set span::after{content:'✦';color:var(--red2);font-size:.7rem;opacity:.8}
@keyframes hpMarq{to{transform:translateX(-50%)}}

/* ── بطاقات: توهّج يتبع المؤشر + حدّ متدرّج ──────────── */
.hp-feat-card,.hp-plan,.hp-faq-item,.hp-post-card{position:relative}
.hp-feat-card::before,.hp-plan:not(.popular)::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),var(--red-dim),transparent 65%)}
.hp-feat-card:hover::before,.hp-plan:not(.popular):hover::before{opacity:1}
.hp-feat-icon{box-shadow:0 0 0 6px var(--red-dim),0 10px 28px var(--red-dim);transition:transform .35s,box-shadow .35s}
.hp-feat-card:hover .hp-feat-icon{transform:translateY(-3px) rotate(-6deg) scale(1.06);box-shadow:0 0 0 8px var(--red-dim),0 14px 34px var(--red-glow)}
.hp-plan.popular{animation:hpGlow 4.5s ease-in-out infinite}
@keyframes hpGlow{50%{box-shadow:0 0 0 1px var(--red-border),0 32px 80px rgba(0,0,0,.55),0 0 110px var(--red-glow)}}
.hp-step-num{box-shadow:0 0 0 7px var(--red-dim),0 10px 30px var(--red-glow)}

/* ── الأزرار: لمعان عند المرور ─────────────────────── */
.btn-primary,.btn-wa{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after,.btn-wa::after{content:'';position:absolute;top:0;bottom:0;width:40%;left:-60%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .7s}
.btn-primary:hover::after,.btn-wa:hover::after{left:130%}
.btn-primary:active,.btn-wa:active{transform:translateY(0) scale(.98)}

/* ── شريط الثقة ────────────────────────────────────── */
.hp-trust-item{transition:color .25s,transform .25s}
.hp-trust-item:hover{color:var(--white,#fff);transform:translateY(-2px)}

/* ── CTA: زخرفة دوّارة ─────────────────────────────── */
.hp-cta-band{position:relative;overflow:hidden;isolation:isolate}
.hp-cta-band::before{content:'';position:absolute;z-index:-1;width:520px;height:520px;inset-inline-end:-160px;top:-260px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent,var(--red-glow),transparent 40%,var(--gold-dim),transparent 80%);filter:blur(34px);animation:hpSpin 22s linear infinite;opacity:.8}
@keyframes hpSpin{to{transform:rotate(360deg)}}

/* ── شريط جوال ثابت للاشتراك ───────────────────────── */
#hp-mbar{display:none}
@media (max-width:768px){
  #hp-mbar{position:fixed;inset-inline:10px;bottom:10px;z-index:150;display:flex;gap:8px;padding:8px;border-radius:18px;
    background:rgba(8,10,18,.86);border:1px solid var(--red-border);box-shadow:0 14px 40px rgba(0,0,0,.6);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    transform:translateY(140%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
  #hp-mbar.show{transform:none}
  #hp-mbar a{flex:1;justify-content:center;font-size:.9rem;padding:12px 10px}
  #hp-float{bottom:84px}
  body{padding-bottom:76px}
  .hp-chip{display:none}
  .hp-screen-body{height:124px}
}

/* ── فهرس المقال ───────────────────────────────────── */
.hp-autotoc{margin:0 0 2rem;padding:1.1rem 1.3rem;border-radius:var(--r-lg,16px);background:var(--surface);border:1px solid var(--border);border-inline-start:3px solid var(--red)}
.hp-autotoc strong{display:block;margin-bottom:.5rem;color:var(--white,#fff)}
.hp-autotoc ol{margin:0;padding-inline-start:1.2rem;display:grid;gap:.3rem}
.hp-autotoc a{color:var(--text2);text-decoration:none}.hp-autotoc a:hover{color:var(--red2)}
.entry-content h2[id],.hp-content h2[id]{scroll-margin-top:90px}

/* ── أداء ──────────────────────────────────────────── */
.hp-section,.hp-faq,footer.hp-footer,#hp-footer{content-visibility:auto;contain-intrinsic-size:auto 700px}
@media (hover:none){.hp-feat-card::before,.hp-plan::before{display:none}}
@media (prefers-reduced-motion:reduce){
  #hp-hero::before,.hp-hero-h1 span,.hp-hero-h1 strong,.hp-sec-title strong,.hp-marquee-track,.hp-chip,.hp-screen *,.hp-plan.popular,.hp-cta-band::before{animation:none!important}
  #hp-progress{display:none}
}

/* ── شبكة الأسعار: 4 باقات في صف واحد ───────────────── */
.hp-pricing-grid{grid-template-columns:repeat(4,1fr);gap:16px}
.hp-plan{padding:32px 22px}
.hp-plan.popular,.hp-plan.popular:hover{transform:none}
.hp-plan.popular{box-shadow:0 0 0 1px var(--red-border),0 32px 80px rgba(0,0,0,.55),0 0 80px var(--red-dim)}
@media (max-width:1100px){.hp-pricing-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.hp-pricing-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}}