/* PubliGate — الأنماط المشتركة بين صفحات الموقع: الرموز (الألوان والخطوط والمسافات)، والأساس، والأزرار، والترويسة، والتذييل.
   أنماط كلّ صفحةٍ في ملفّها: home.css وpricing.css وauth.css. */
/* الرموز */
:root{color-scheme:light;
  --bg:#FBF8F2; --surface:#FFFFFF; --sunk:#F4EEE3; --fg:#0B1A14; --muted:#56655D; --line:#E7E0D3; --brand:#3B7C80; --brand-ink:#2C5F62;
  --brand-soft:#E2EFEF; --on-brand:#FFFFFF; --brand-2:#4E9A9E; --brand-3:#1F4547; --paper:#C9583B; --ebook:#4F6E9E; --audio:#8A5BA6; --edu:#3F8F6B;
  --paper-ink:#A5432A; --ebook-ink:#3E5C89; --audio-ink:#714693; --edu-ink:#2C6E50; --paper-soft:#FBE9E3; --ebook-soft:#E7EDF6; --audio-soft:#F1E9F6;
  --edu-soft:#E2F1E9; --saffron:#C9A227; --gold-ink:#7A5F0E; --up:#1A6E35; --night:#1F4547; --night-2:#0F2324; --night-fg:#EEF5F0; --night-muted:#B3C7BC;
  --night-line:rgba(255,255,255,.12); --grid:rgba(11,26,20,.045); --glow-1:rgba(59,124,128,.22); --glow-2:rgba(201,162,39,.14); --device:#15201B;
  --screen:#FFFFFF; --screen-sunk:#F6F2EA; --screen-fg:#0B1A14; --screen-muted:#6B776F; --screen-line:#ECE6DA; --c1:#3B7C80;
  --f-display:"Tajawal","Segoe UI",Tahoma,sans-serif; --f-body:"Tajawal","Segoe UI",Tahoma,sans-serif; --r:18px;
  --shadow:0 18px 40px -24px rgba(17,32,28,.35); --shadow-lg:0 40px 80px -36px rgba(11,26,20,.45); --hh:72px; --sec:clamp(48px,5.6vw,80px); --ok:#1A6E35;
  --ok-soft:#E6F4EA; --soon:#2459C9; --soon-soft:#EEF3FF; --stick:60px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--hh) + 12px)}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
[hidden]{display:none!important}
.page{direction:rtl;overflow-x:clip}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:20px}
a{color:var(--brand-ink)}
p{margin:0}
:focus-visible{outline:3px solid var(--saffron);outline-offset:3px;border-radius:6px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;inset-inline-start:12px;top:-60px;z-index:100;background:var(--brand-ink);color:var(--on-brand);padding:10px 16px;border-radius:10px;font-weight:800;text-decoration:none}
.skip:focus{top:12px}
.gridbg{position:relative;isolation:isolate}
.btn:hover{transform:none}
.btn-main{background:var(--brand-ink);color:var(--on-brand);box-shadow:none}
.btn-main:hover{background:var(--night);color:var(--on-brand)}
.btn-line:hover{border-color:var(--brand)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:800;letter-spacing:.02em;color:var(--brand-ink)}
.eyebrow::before{content:"";width:18px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--paper),var(--ebook),var(--audio),var(--edu))}
/* إيقاع الأقسام: ثلاث أرضيّات تتناوب */
.sec{padding-block:var(--sec)}
.bg-a{background:var(--bg)}
.bg-b{background:var(--surface);border-block:1px solid var(--line)}
.bg-c{background:var(--sunk)}
.sec-top .sec-head{margin-bottom:0}
/* الترويسة */
.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--bg) 82%, transparent);backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);border-bottom:1px solid transparent;transition:background .25s ease,border-color .25s ease,box-shadow .25s ease}
.top.is-scrolled{background:color-mix(in srgb, var(--bg) 92%, transparent);border-bottom-color:var(--line);box-shadow:0 10px 30px -24px rgba(11,26,20,.45);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3)}
.top .wrap{display:flex;align-items:center;gap:20px;min-height:var(--hh);transition:min-height .25s ease}
.top.is-scrolled .wrap{min-height:60px}
.logo-mark{display:flex;gap:3px;align-items:flex-end;height:30px}
.logo-mark i{display:block;width:7px;border-radius:2px}
.logo-mark i:nth-child(1){height:22px;background:var(--paper)}
.logo-mark i:nth-child(2){height:30px;background:var(--ebook)}
.logo-mark i:nth-child(3){height:25px;background:var(--audio)}
.logo-mark i:nth-child(4){height:18px;background:var(--edu)}
/* الشعار: الرمز بارتفاع حروف PubliGate الكبيرة، و«بوّابة الناشرين» تحت الكلمة وحدها */
.logo{display:inline-grid;grid-template-columns:auto auto;align-items:baseline;column-gap:.3em;row-gap:0;align-content:center;text-decoration:none;color:var(--fg);flex:none;min-height:44px;font-size:26px}
.logo .logo-mark{grid-column:1;grid-row:1;height:.7em;gap:.08em;align-self:baseline}
.logo .logo-mark i{width:.17em;border-radius:.05em}
.logo .logo-mark i:nth-child(1){height:.51em}.logo .logo-mark i:nth-child(2){height:.7em}.logo .logo-mark i:nth-child(3){height:.58em}.logo .logo-mark i:nth-child(4){height:.42em}
.logo-w{grid-column:2;grid-row:1;font-family:var(--f-display);line-height:.9;letter-spacing:-.01em;white-space:nowrap}
.logo-w b{font-weight:900}.logo-w span{font-weight:400;color:var(--brand)}
.logo-t{grid-column:2;grid-row:2;margin-top:-.12em;font-size:12px;font-weight:500;line-height:1;color:var(--muted);white-space:nowrap}
.nav{display:flex;gap:2px;align-items:center}
.nav a:hover{background:var(--sunk);color:var(--fg)}
.top-actions{margin-inline-start:auto;display:flex;align-items:center;gap:8px}
.top-actions .login{color:var(--fg);text-decoration:none;font-weight:600;padding:8px 10px;border-radius:10px;min-height:44px;display:inline-flex;align-items:center}
.top-actions .login:hover{background:var(--sunk)}
.top-actions .btn{min-height:44px;padding:0 18px;font-size:15px}
.menu-btn{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--fg);align-items:center;justify-content:center;cursor:pointer;flex:none}
.menu-btn svg{width:22px;height:22px}
.menu-btn .x{display:none}
.menu-btn[aria-expanded="true"] .x{display:block}
.menu-btn[aria-expanded="true"] .bars{display:none}
.mnav{position:fixed;inset:var(--hh) 0 0 0;z-index:49;background:var(--bg);overflow:auto;padding:12px 20px 28px;display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line)}
.top.is-scrolled + .mnav{top:60px}
.mnav a.l{display:flex;align-items:center;justify-content:space-between;min-height:54px;padding:0 6px;color:var(--fg);text-decoration:none;font-weight:700;font-size:18px;border-bottom:1px solid var(--line)}
.mnav a.l::after{content:"←";color:var(--muted);font-weight:500}
.mnav .mnav-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.mnav .mnav-acts .btn{padding:0 12px}
body.menu-open{overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  .mnav:not([hidden]){animation:drop .22s ease}
}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip i{width:9px;height:9px;border-radius:3px}
.chip.paper{background:var(--paper-soft)}
.chip.paper i{background:var(--paper)}
.chip.ebook{background:var(--ebook-soft)}
.chip.ebook i{background:var(--ebook)}
.chip.audio{background:var(--audio-soft)}
.chip.audio i{background:var(--audio)}
.chip.edu{background:var(--edu-soft)}
.chip.edu i{background:var(--edu)}
.rail-dots button{width:40px;height:40px;border:0;background:transparent;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.rail-dots button::before{content:"";width:8px;height:8px;border-radius:99px;background:var(--line);transition:width .2s ease,background .2s ease}
.rail-dots button[aria-current="true"]::before{width:22px;background:var(--brand)}
.qs{display:flex;flex-direction:column;gap:10px;min-width:0}
details{background:var(--surface);border:1px solid var(--line);border-radius:16px;transition:border-color .2s ease}
details[open]{border-color:var(--brand)}
summary::-webkit-details-marker{display:none}
summary .pm{width:30px;height:30px;border-radius:9px;background:var(--sunk);display:flex;align-items:center;justify-content:center;flex:none;transition:transform .25s ease}
summary .pm svg{width:14px;height:14px}
/* الختام */
.final{padding-block:0 var(--sec)}
.final-strip i{flex:1}
.final-strip i:nth-child(1){background:var(--paper)}
.final-strip i:nth-child(2){background:#93AEDB}
.final-strip i:nth-child(3){background:#C7A3DD}
.final-strip i:nth-child(4){background:#74C9A0}
/* التذييل */
.foot{border-top:1px solid var(--line);background:var(--surface)}
.foot .wrap{padding-block:clamp(36px,5vw,56px) 24px;display:flex;flex-direction:column;gap:32px}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(3,minmax(0,1fr));gap:28px}
.foot-brand{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.foot-brand p{color:var(--muted);font-size:15px;max-width:28em}
.foot-col{display:flex;flex-direction:column;gap:2px;font-size:15px}
.foot-col b{font-weight:800;margin-bottom:6px}
.foot-col a{color:var(--muted);text-decoration:none;min-height:40px;display:inline-flex;align-items:center;align-self:flex-start}
.foot-col a:hover{color:var(--brand-ink)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.to-top{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;font-weight:700;min-height:40px}
.to-top:hover{color:var(--brand-ink)}
@media (prefers-reduced-motion:no-preference){
  /* الظهور عند التمرير */
  .js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
  .js .rv.in{opacity:1;transform:none}
}
@media (max-width:1100px){
  .nav,.top-actions .login{display:none}
  .menu-btn{display:inline-flex}
}
@media (min-width:1101px){
  .mnav{display:none!important}
}
@media (max-width:640px){
  .wrap{padding-inline:16px}
  .top .wrap{gap:10px}
  .top.is-scrolled .wrap{min-height:58px}
  .top.is-scrolled + .mnav{top:58px}
  .top-actions .btn{padding:0 14px;font-size:14.5px}
  .rail::-webkit-scrollbar{display:none}
  .rail > *{scroll-snap-align:start}
  .foot-col:last-child b{width:100%;margin-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}
/* معاينة: ترويسة داكنة بكتابة فاتحة. للرجوع إلى الترويسة الفاتحة احذف data-header="dark" من وسم html */
html[data-header="dark"] .top,html[data-header="dark"] .top.is-scrolled{background:var(--night-2);border-bottom-color:rgba(255,255,255,.08);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-header="dark"] .top .logo{color:var(--night-fg)}
html[data-header="dark"] .top .logo-w span,.foot .logo-w span{color:#9ACFD2}
html[data-header="dark"] .top .logo-t,.foot .logo-t{color:var(--night-muted)}
html[data-header="dark"] .top .nav a{color:var(--night-muted)}
html[data-header="dark"] .top .nav a:hover{background:rgba(255,255,255,.08);color:var(--night-fg)}
html[data-header="dark"] .top .nav a.is-active,html[data-header="dark"] .top .nav a[aria-current="page"]{background:rgba(255,255,255,.12);color:#FFFFFF}
html[data-header="dark"] .top .login{color:var(--night-fg)}
html[data-header="dark"] .top .login:hover{background:rgba(255,255,255,.08)}
html[data-header="dark"] .top .btn-main{background:var(--brand);color:#FFFFFF}
html[data-header="dark"] .top .btn-main:hover{background:#4A8E92}
html[data-header="dark"] .top .menu-btn{background:transparent;border-color:rgba(255,255,255,.22);color:var(--night-fg)}
html[data-header="dark"] .top a:focus-visible,html[data-header="dark"] .top button:focus-visible{outline-color:var(--night-fg)}
/* ==== الإصدار 2.1 — لمساتٌ مشتركة: أرضيّاتٌ ملوّنة، وترويسةٌ وتذييلٌ داكنان، وبطاقات الباقات، والأسئلة، والختام ==== */
:root{--dots:color-mix(in srgb,var(--brand) 14%,transparent);--four:linear-gradient(90deg,var(--paper) 0 25%,var(--ebook) 25% 50%,var(--audio) 50% 75%,var(--edu) 75%)}
/* الأرضيّات: تدرّجٌ خفيف ونقاط بدل اللون الواحد */
.bg-a{background:radial-gradient(60% 55% at 100% 0%,color-mix(in srgb,var(--brand) 10%,transparent),transparent 70%),radial-gradient(50% 50% at 0% 100%,color-mix(in srgb,var(--saffron) 9%,transparent),transparent 70%),var(--bg)}
.bg-b{background:radial-gradient(var(--dots) 1px,transparent 1.4px) 0 0/22px 22px,linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--brand-soft) 50%,var(--surface)));border-block:1px solid var(--line)}
.bg-c{background:radial-gradient(55% 60% at 0% 0%,color-mix(in srgb,var(--paper) 9%,transparent),transparent 70%),radial-gradient(50% 60% at 100% 100%,color-mix(in srgb,var(--ebook) 11%,transparent),transparent 70%),radial-gradient(40% 40% at 70% 10%,color-mix(in srgb,var(--audio) 7%,transparent),transparent 70%),var(--sunk)}
/* الترويسة الداكنة: شفقٌ هادئ وحبيباتٌ وخطّ الألوان الأربعة */
html[data-header="dark"] .top{isolation:isolate}
html[data-header="dark"] .top::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(420px 130px at 10% 0%,rgba(111,180,184,.30),transparent 70%),radial-gradient(380px 120px at 48% 130%,rgba(199,163,221,.20),transparent 70%),radial-gradient(360px 120px at 88% -10%,rgba(224,184,74,.16),transparent 70%),radial-gradient(300px 100px at 70% 120%,rgba(238,154,128,.14),transparent 70%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180% 100%,180% 100%,180% 100%,180% 100%,140px 140px;background-position:0 0,100% 0,50% 0,0 0,0 0}
html[data-header="dark"] .top::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:3px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent) -40% 0/30% 100% no-repeat,var(--four)}
@media (prefers-reduced-motion:no-preference){
  html[data-header="dark"] .top::before{animation:aurora 24s ease-in-out infinite alternate}
  html[data-header="dark"] .top::after{animation:shimmer 7s ease-in-out infinite}
}
@keyframes aurora{to{background-position:100% 0,0 0,0 0,100% 0,0 0}}
@keyframes shimmer{0%,55%{background-position:-40% 0,0 0}100%{background-position:140% 0,0 0}}
html[data-header="dark"] .top .nav a::after{content:"";position:absolute;inset-inline:12px;bottom:3px;height:2px;border-radius:2px;background:var(--four);transform:scaleX(0);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
html[data-header="dark"] .top .nav a:hover::after,html[data-header="dark"] .top .nav a:focus-visible::after{transform:scaleX(1)}
html[data-header="dark"] .top .nav a.is-active,html[data-header="dark"] .top .nav a[aria-current="page"]{background:rgba(111,180,184,.16);color:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(154,207,210,.35),0 0 22px -6px rgba(111,180,184,.75)}
html[data-header="dark"] .top .nav a.is-active::after,html[data-header="dark"] .top .nav a[aria-current="page"]::after{transform:scaleX(1);inset-inline:30%}
html[data-header="dark"] .top .btn-main{background:#3B7C80;color:#FFFFFF}
html[data-header="dark"] .top .btn-main:hover{background:#2C6E72}
.top-cta:hover svg,.top-cta:focus-visible svg{transform:translateX(-5px)}
.top .logo-mark i{transform-origin:50% 100%}
@media (prefers-reduced-motion:no-preference){
  .top .logo-mark i{animation:lg-in .9s cubic-bezier(.2,.8,.2,1) both}
  .top .logo-mark i:nth-child(2){animation-delay:.08s}
  .top .logo-mark i:nth-child(3){animation-delay:.16s}
  .top .logo-mark i:nth-child(4){animation-delay:.24s}
  .logo:hover .logo-mark i{animation:lg-eq .5s ease-in-out infinite alternate}
  .logo:hover .logo-mark i:nth-child(2){animation-delay:-.2s}
  .logo:hover .logo-mark i:nth-child(3){animation-delay:-.35s}
  .logo:hover .logo-mark i:nth-child(4){animation-delay:-.1s}
}
@keyframes lg-in{from{transform:scaleY(.15);opacity:0}}
@keyframes lg-eq{to{transform:scaleY(.6)}}
/* قائمة الجوّال الداكنة */
html[data-header="dark"] .mnav{background:radial-gradient(420px 260px at 100% 0%,rgba(111,180,184,.22),transparent 70%),radial-gradient(360px 260px at 0% 100%,rgba(199,163,221,.16),transparent 70%),var(--night-2);border-top:0;padding-top:18px;color:var(--night-fg)}
html[data-header="dark"] .mnav a.l{color:var(--night-fg);border-bottom-color:rgba(255,255,255,.08);min-height:60px;font-size:19px;justify-content:flex-start;gap:14px;padding:0 10px;border-radius:12px}
html[data-header="dark"] .mnav a.l::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--dc,var(--brand));flex:none;box-shadow:0 0 12px var(--dc,var(--brand))}
html[data-header="dark"] .mnav a.l:nth-child(4n+1){--dc:#EE9A80}
html[data-header="dark"] .mnav a.l:nth-child(4n+2){--dc:#93AEDB}
html[data-header="dark"] .mnav a.l:nth-child(4n+3){--dc:#C7A3DD}
html[data-header="dark"] .mnav a.l:nth-child(4n+4){--dc:#74C9A0}
html[data-header="dark"] .mnav a.l::after{margin-inline-start:auto;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);color:var(--night-muted);line-height:1}
html[data-header="dark"] .mnav a.l:hover,html[data-header="dark"] .mnav a.l.is-active,html[data-header="dark"] .mnav a.l[aria-current]{background:rgba(255,255,255,.06);color:#FFFFFF}
html[data-header="dark"] .mnav .btn-line{background:transparent;border-color:rgba(255,255,255,.3);color:var(--night-fg)}
html[data-header="dark"] .mnav .btn-main{background:#3B7C80;color:#FFFFFF}
html[data-header="dark"] .mnav a:focus-visible{outline-color:var(--night-fg)}
/* التذييل الداكن */
.foot{position:relative;isolation:isolate;border-top:0;color:var(--night-fg);background:radial-gradient(520px 300px at 100% 0%,rgba(111,180,184,.18),transparent 70%),radial-gradient(480px 280px at 0% 100%,rgba(199,163,221,.12),transparent 70%),var(--night-2)}
.foot::before{content:"";position:absolute;inset-inline:0;top:0;height:4px;background:var(--four)}
.foot::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.4px) 0 0/22px 22px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 80%);mask-image:linear-gradient(180deg,#000,transparent 80%)}
.foot .wrap{padding-block:clamp(36px,4.4vw,52px) 22px;gap:28px}
.foot .logo{color:var(--night-fg)}
.foot-brand p{color:var(--night-muted)}
.foot-col b{color:#FFFFFF}
.foot-col a,.foot-bottom,.to-top{color:var(--night-muted)}
.foot-col a:hover,.to-top:hover{color:#FFFFFF}
.foot-col a{transition:color .2s ease,transform .2s ease}
.foot-col a:hover{transform:translateX(-3px)}
.foot-bottom{border-top-color:rgba(255,255,255,.1)}
.foot .chip{background:rgba(255,255,255,.07);color:var(--night-fg);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.foot .chip.paper i{background:#EE9A80}
.foot .chip.ebook i{background:#93AEDB}
.foot .chip.audio i{background:#C7A3DD}
.foot .chip.edu i{background:#74C9A0}
.foot a:focus-visible{outline-color:#E0B84A}
.pcard:nth-child(2),.pc:nth-child(2){--pc:var(--brand);--pci:var(--brand-ink);--pcs:var(--brand-soft)}
.pcard:nth-child(3),.pc:nth-child(3){--pc:var(--audio);--pci:var(--audio-ink);--pcs:var(--audio-soft)}
.ph{position:relative;display:flex;flex-direction:column;gap:8px;overflow:hidden;border-radius:calc(var(--rr) - 1px) calc(var(--rr) - 1px) 0 0;border-bottom:1px solid color-mix(in srgb,var(--pc) 22%,var(--line));
  background:radial-gradient(color-mix(in srgb,var(--pc) 22%,transparent) 1px,transparent 1.3px) 0 0/14px 14px,radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--pc) 22%,transparent),transparent 60%),linear-gradient(160deg,var(--pcs),color-mix(in srgb,var(--pcs) 40%,var(--surface)))}
.ph::after{content:"";position:absolute;inset-inline-end:-30px;top:-30px;width:120px;height:120px;border-radius:50%;border:16px solid color-mix(in srgb,var(--pc) 12%,transparent);pointer-events:none}
.ph h3{color:var(--pci)}
.pcard.hot .pop,.pc.hot .pop{z-index:2;display:inline-flex;align-items:center;gap:6px;padding:4px 14px 4px 12px;background:var(--brand-ink);color:var(--on-brand);box-shadow:0 0 0 4px var(--surface)}
.pcard.hot .pop::before,.pc.hot .pop::before{content:"";width:8px;height:8px;border-radius:50%;background:#E0B84A}
@media (prefers-reduced-motion:no-preference){
  .pcard.hot,.pc.hot{animation:hotglow 3.6s ease-in-out infinite}
}
@keyframes hotglow{50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--brand) 8%,transparent),0 34px 70px -30px color-mix(in srgb,var(--brand) 90%,transparent)}}
/* الأسئلة: فتحٌ ناعم وحالةٌ ملوّنة */
details{position:relative;overflow:hidden;transition:border-color .25s ease,background .25s ease,box-shadow .25s ease}
details::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:4px;background:linear-gradient(180deg,var(--paper),var(--ebook),var(--audio),var(--edu));transform:scaleY(0);transform-origin:top;transition:transform .35s ease}
details[open]{background:linear-gradient(160deg,color-mix(in srgb,var(--brand-soft) 75%,var(--surface)),var(--surface) 75%);box-shadow:0 22px 44px -32px color-mix(in srgb,var(--brand) 70%,transparent)}
details[open]::before{transform:none}
summary{transition:color .2s ease}
summary:hover{color:var(--brand-ink)}
details[open] summary{color:var(--brand-ink)}
@media (prefers-reduced-motion:no-preference){
  details[open] .a{animation:qa-in .4s ease both}
}
@keyframes qa-in{from{opacity:0;transform:translateY(-6px)}}
.faq-art{position:relative;height:210px;margin-top:6px;border-radius:22px;overflow:hidden;isolation:isolate;border:1px solid color-mix(in srgb,var(--brand) 20%,var(--line));
  background:radial-gradient(var(--dots) 1px,transparent 1.4px) 0 0/16px 16px,radial-gradient(90% 90% at 100% 0%,color-mix(in srgb,var(--brand) 24%,transparent),transparent 60%),radial-gradient(80% 80% at 0% 100%,color-mix(in srgb,var(--audio) 20%,transparent),transparent 60%),var(--surface)}
.fq-mark{position:absolute;inset-inline-start:20px;top:-6px;font-family:var(--f-book);font-size:190px;line-height:1;font-weight:700;color:color-mix(in srgb,var(--brand) 38%,transparent);z-index:-1}
.fq-b{position:absolute;width:84px;aspect-ratio:2/3;object-fit:cover;border-radius:3px 7px 7px 3px;box-shadow:-8px 14px 26px -12px rgba(11,26,20,.6);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.fq-b1{inset-inline-end:122px;transform:rotate(-8deg);bottom:16px}
.fq-b2{inset-inline-end:66px;transform:rotate(2deg);z-index:2;bottom:30px}
.fq-b3{inset-inline-end:16px;transform:rotate(10deg);bottom:14px}
.faq-art:hover .fq-b1{transform:rotate(-12deg) translateY(-8px)}
.faq-art:hover .fq-b2{transform:rotate(0) translateY(-14px)}
.faq-art:hover .fq-b3{transform:rotate(15deg) translateY(-8px)}
.fq-bub{position:absolute;z-index:3;width:46px;height:46px;border-radius:14px 14px 14px 4px;display:flex;align-items:center;justify-content:center;background:var(--surface);color:var(--brand-ink);box-shadow:0 12px 24px -12px rgba(11,26,20,.5)}
.fq-bub svg{width:22px;height:22px}
.fq-bub1{inset-inline-start:28px;bottom:26px}
.fq-bub2{inset-inline-start:96px;top:30px;border-radius:14px 14px 4px 14px;background:var(--brand-ink);color:var(--on-brand)}
@media (prefers-reduced-motion:no-preference){
  .fq-bub1{animation:bob 6s ease-in-out infinite}
  .fq-bub2{animation:bob 7s -3s ease-in-out infinite}
}
@keyframes bob{50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:no-preference){
  .final-box{animation:fb-aur 16s ease-in-out infinite alternate}
}
@keyframes fb-aur{0%{background-position:0 0,0 0,0 0,0 0}100%{background-position:100% 50%,60% 100%,0 100%,0 0}}
.final-box h2,.final-box p{color:#FFFFFF}
.final-art{position:relative;height:200px;min-width:0}
.fa-b1{inset-inline-start:0;top:34px;transform:rotate(-9deg)}
.fa-b2{inset-inline-start:70px;top:6px;z-index:2;transform:rotate(2deg)}
.fa-b3{inset-inline-start:140px;top:40px;transform:rotate(10deg)}
.fa-chip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:#FFFFFF;color:#11201C;font-size:12.5px;font-weight:800;box-shadow:0 10px 22px -10px rgba(0,0,0,.5);white-space:nowrap}
.fa-chip i{width:9px;height:9px;border-radius:3px}
.fa-c1{inset-inline-start:-6px;bottom:6px}
.fa-c1 i{background:#C9583B}
.fa-c2{inset-inline-start:150px;top:0}
.fa-c2 i{background:#8A5BA6}
@media (prefers-reduced-motion:no-preference){
  .fa-b1{animation:fl1 8s ease-in-out infinite}
  .fa-b2{animation:fl2 7s ease-in-out infinite}
  .fa-b3{animation:fl3 9s ease-in-out infinite}
  .fa-c1{animation:bob 6s ease-in-out infinite}
  .fa-c2{animation:bob 7s -2s ease-in-out infinite}
}
@keyframes fl1{50%{transform:rotate(-6deg) translateY(-8px)}}
@keyframes fl2{50%{transform:rotate(-1deg) translateY(-12px)}}
@keyframes fl3{50%{transform:rotate(13deg) translateY(-6px)}}
/* الحركة لا تعمل خارج الشاشة */
.js [data-live]:not(.is-live),.js [data-live]:not(.is-live) *,.js [data-live]:not(.is-live) *::before,.js [data-live]:not(.is-live) *::after{animation-play-state:paused!important}
.hero-aurora{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .hero-aurora i{animation:drift 20s ease-in-out infinite alternate}
  .hero-aurora i:nth-child(2){animation-duration:24s;animation-delay:-6s}
  .hero-aurora i:nth-child(3){animation-duration:18s;animation-delay:-3s}
  .hero-aurora i:nth-child(4){animation-duration:26s;animation-delay:-9s}
}
@keyframes drift{50%{transform:translate(60px,30px) scale(1.12)}100%{transform:translate(-40px,50px) scale(.94)}}
@media (max-width:860px){
  .final-art{grid-column:1/-1;height:170px;order:-1;margin-top:-6px}
  .fa-b1{inset-inline-start:calc(50% - 120px);top:26px}
  .fa-b2{inset-inline-start:calc(50% - 40px);top:4px}
  .fa-b3{inset-inline-start:calc(50% + 40px);top:28px}
  .fa-c1{inset-inline-start:calc(50% - 160px);bottom:4px}
  .fa-c2{inset-inline-start:calc(50% + 70px);top:0}
}
@media (max-width:640px){
  .final-art{height:150px}
  .fa-b1{inset-inline-start:calc(50% - 100px);top:30px}
  .fa-b2{inset-inline-start:calc(50% - 32px);top:6px}
  .fa-b3{inset-inline-start:calc(50% + 36px);top:32px}
  .fa-c1{inset-inline-start:calc(50% - 150px);bottom:10px}
  .fa-c2{inset-inline-start:calc(50% + 60px);top:0}
}