/* ==========================================================
   فضاء الأستاذ الرائد — نظام التصميم v2
   ========================================================== */
:root{
  --navy:#0a1a2f; --navy-2:#102a4c; --navy-3:#17375f;
  --gold:#d89b24; --gold-2:#f3c35c; --gold-3:#fff4d6;
  --ink:#0f172a; --muted:#5b6b82; --line:#e3e8f0; --bg:#f5f7fb; --card:#fff;
  --ok:#0f9d6b; --warn:#d97706; --bad:#dc2626;
  --r:18px; --r-sm:12px; --shadow:0 10px 30px rgba(10,26,47,.08); --shadow-lg:0 24px 60px rgba(10,26,47,.18);
  --font:'Cairo',system-ui,-apple-system,'Segoe UI',Tahoma,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.75;font-size:16px;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{line-height:1.35;margin:0;font-weight:800}
p{margin:0}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;top:-60px;right:12px;background:var(--gold);color:var(--navy);padding:8px 14px;border-radius:8px;z-index:999;font-weight:800}
.skip:focus{top:10px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;font-weight:800;border-radius:12px;padding:11px 20px;font-size:.95rem;transition:.2s;white-space:nowrap}
.btn svg{width:18px;height:18px;flex:none}
.btn-gold{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:var(--navy);box-shadow:0 8px 22px rgba(216,155,36,.35)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(216,155,36,.45)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-3)}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.22)}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
.btn-line{background:#fff;color:var(--navy);border:1.5px solid var(--line)}
.btn-line:hover{border-color:var(--gold);color:var(--gold)}
.btn-sm{padding:8px 14px;font-size:.85rem;border-radius:10px}
.btn-lg{padding:14px 28px;font-size:1.05rem;border-radius:14px}
.btn-block{width:100%}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(10,26,47,.96);backdrop-filter:blur(10px);border-bottom:1px solid rgba(216,155,36,.35)}
.site-header .wrap{display:flex;align-items:center;gap:20px;height:68px}
.brand{display:flex;align-items:center;gap:11px;color:#fff;flex:none}
.brand-mark{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--gold-2),var(--gold));display:grid;place-items:center;color:var(--navy);flex:none}
.brand-mark svg{width:24px;height:24px}
.brand b{display:block;font-size:1.05rem;font-weight:900;line-height:1.15}
.brand small{display:block;font-size:.68rem;color:var(--gold-2);font-weight:700;letter-spacing:.2px}
.nav{display:flex;gap:4px;margin-inline-start:auto;align-items:center}
.nav a{color:#cdd8e8;font-weight:700;font-size:.92rem;padding:8px 13px;border-radius:10px;transition:.15s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--gold-2);background:rgba(255,255,255,.07)}
.nav-cta{display:flex;gap:8px;margin-inline-start:10px}
.burger{display:none;margin-inline-start:auto;background:transparent;border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:10px;width:42px;height:42px;cursor:pointer}
.burger svg{width:22px;height:22px;margin:auto}
@media (max-width:980px){
  .burger{display:grid;place-items:center}
  .nav{position:fixed;inset:68px 0 auto 0;background:var(--navy);flex-direction:column;align-items:stretch;padding:12px 16px 20px;gap:2px;max-height:calc(100vh - 68px);overflow:auto;display:none;border-bottom:2px solid var(--gold)}
  .nav.open{display:flex}
  .nav a{padding:12px 14px}
  .nav-cta{margin:10px 0 0;flex-direction:column}
}

/* ---------- hero ---------- */
.hero{background:radial-gradient(1200px 500px at 85% -10%,rgba(216,155,36,.22),transparent 60%),radial-gradient(900px 500px at 0% 110%,rgba(56,120,220,.22),transparent 60%),linear-gradient(160deg,#07142a,#0f2a4d 70%);color:#fff;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:70px 0 80px}
.eyebrow{display:inline-flex;gap:8px;align-items:center;background:rgba(216,155,36,.14);border:1px solid rgba(216,155,36,.45);color:var(--gold-2);padding:6px 14px;border-radius:99px;font-weight:800;font-size:.82rem}
.hero h1{font-size:clamp(1.9rem,4.2vw,3.1rem);font-weight:900;margin:16px 0 14px;line-height:1.3}
.hero h1 em{font-style:normal;color:var(--gold-2)}
.hero p.lead{color:#cfdcf0;font-size:1.08rem;max-width:56ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero-points{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:22px;color:#b8c8e0;font-size:.9rem;font-weight:700}
.hero-points span{display:inline-flex;align-items:center;gap:7px}
.hero-points svg{width:17px;height:17px;color:var(--gold-2)}
.hero-art{position:relative;height:430px}
.paper{position:absolute;width:250px;height:354px;background:#fff;border-radius:6px;box-shadow:var(--shadow-lg);padding:14px;color:#222;font-size:7px;overflow:hidden}
.paper i{display:block;height:5px;background:#e5e9f0;border-radius:3px;margin:6px 0}
.paper i.s{width:60%}.paper i.m{width:80%}.paper i.g{background:#f3d9a0}
.paper .ph{display:flex;justify-content:space-between;border-bottom:1.5px solid #0a1a2f;padding-bottom:8px;margin-bottom:10px;font-weight:800;color:#0a1a2f}
.paper .tbl{border:1px solid #cfd6e2;border-radius:3px;margin-top:8px}
.paper .tbl div{display:grid;grid-template-columns:1fr 2fr 1fr;border-bottom:1px solid #e5e9f0;height:19px}
.paper .tbl div:first-child{background:#0a1a2f}
.paper-1{inset:20px auto auto 0;transform:rotate(-7deg)}
.paper-2{inset:0 auto auto 120px;transform:rotate(2deg);z-index:2}
.paper-3{inset:50px 0 auto auto;transform:rotate(9deg);background:linear-gradient(160deg,#0f2a4d,#07142a);border:3px double var(--gold)}
.paper-3 b{display:block;text-align:center;color:var(--gold-2);font-size:15px;margin-top:100px}
.paper-3 small{display:block;text-align:center;color:#cbd5e1;font-size:8px;margin-top:6px}
.wm-demo{position:absolute;inset:0;display:grid;place-items:center;font-size:30px;font-weight:900;color:rgba(10,26,47,.07);transform:rotate(-28deg);pointer-events:none}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr;padding:44px 0 50px}.hero-art{display:none}}

/* ---------- sections ---------- */
section.sec{padding:76px 0}
section.sec.alt{background:#fff}
section.sec.dark{background:linear-gradient(160deg,#07142a,#0f2a4d);color:#fff}
.sec-head{text-align:center;max-width:720px;margin:0 auto 44px}
.sec-head .eyebrow{background:var(--gold-3);border-color:#f0d594;color:#946300}
.dark .sec-head .eyebrow{background:rgba(216,155,36,.14);border-color:rgba(216,155,36,.45);color:var(--gold-2)}
.sec-head h2{font-size:clamp(1.55rem,3vw,2.25rem);font-weight:900;margin:12px 0 10px}
.sec-head p{color:var(--muted)}
.dark .sec-head p{color:#b8c8e0}

.grid{display:grid;gap:20px}
.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
@media (max-width:980px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.g4,.g3,.g2{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow);transition:.25s}
a.card:hover{transform:translateY(-4px);border-color:#ecc77a;box-shadow:0 18px 40px rgba(10,26,47,.14)}
.ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--gold-3);color:#a56a00;margin-bottom:14px}
.ico svg{width:26px;height:26px}
.ico.navy{background:var(--navy);color:var(--gold-2)}
.ico.blue{background:#e5efff;color:#1d4ed8}.ico.green{background:#e0f6ec;color:#0b7a52}.ico.rose{background:#ffe6ea;color:#be123c}.ico.violet{background:#ede9fe;color:#6d28d9}
.card h3{font-size:1.08rem;margin-bottom:6px}
.card p{color:var(--muted);font-size:.93rem}
.card .more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;color:#a56a00;font-weight:800;font-size:.9rem}
.card .more svg{width:16px;height:16px;transform:scaleX(-1)}
.tag{display:inline-block;font-size:.72rem;font-weight:800;padding:2px 10px;border-radius:99px;background:#e0f6ec;color:#0b7a52;margin-inline-start:6px;vertical-align:middle}
.tag.vip{background:var(--gold-3);color:#946300}
.tag.new{background:#e5efff;color:#1d4ed8}

.doc-cat{margin:34px 0 14px;display:flex;align-items:center;gap:12px}
.doc-cat h3{font-size:1.25rem}
.doc-cat::after{content:"";flex:1;height:2px;background:linear-gradient(to left,transparent,var(--line))}

/* compare */
.compare{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
.compare th,.compare td{padding:14px 18px;text-align:center;border-bottom:1px solid var(--line);font-size:.95rem}
.compare th:first-child,.compare td:first-child{text-align:right;font-weight:700}
.compare thead th{background:var(--navy);color:#fff;font-weight:800}
.compare thead th.vip{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:var(--navy)}
.compare tr:last-child td{border-bottom:0}
.yes{color:var(--ok);font-weight:900}.no{color:#b6c0cf;font-weight:900}
.compare-wrap{overflow:auto}

/* steps */
.steps{counter-reset:s}
.step{position:relative;padding:26px 22px 22px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:-16px;right:20px;width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--gold-2),var(--gold));color:var(--navy);font-weight:900;display:grid;place-items:center;box-shadow:0 6px 16px rgba(216,155,36,.4)}
.step h3{margin-bottom:6px;font-size:1.05rem}.step p{color:var(--muted);font-size:.93rem}

/* faq */
.faq{max-width:820px;margin:auto;display:grid;gap:12px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:4px 20px;box-shadow:var(--shadow)}
.faq summary{cursor:pointer;font-weight:800;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;color:var(--gold);font-weight:900;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--muted);padding:0 0 16px}

/* cta band */
.cta-band{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:var(--navy);border-radius:26px;padding:40px;display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;box-shadow:0 20px 50px rgba(216,155,36,.35)}
.cta-band h2{font-size:1.7rem;font-weight:900}.cta-band p{font-weight:700;opacity:.85}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:-44px;position:relative;z-index:3}
.stat{background:#fff;border-radius:16px;padding:20px;text-align:center;box-shadow:var(--shadow);border:1px solid var(--line)}
.stat b{display:block;font-size:2rem;font-weight:900;color:var(--navy);line-height:1.1}
.stat span{color:var(--muted);font-weight:700;font-size:.88rem}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ads placeholders (hidden until AdSense enabled) */
.ad-slot{display:none;margin:22px auto;text-align:center;min-height:90px;max-width:100%}
body.ads-on .ad-slot{display:block}
.ad-label{font-size:.7rem;color:#94a3b8;margin-bottom:4px}

/* page head (inner pages) */
.page-head{background:linear-gradient(160deg,#07142a,#0f2a4d);color:#fff;padding:46px 0 52px}
.page-head h1{font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:900}
.page-head p{color:#c4d3e8;margin-top:8px;max-width:70ch}
.crumbs{font-size:.84rem;color:#9fb3d1;margin-bottom:10px;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a:hover{color:var(--gold-2)}

/* prose (article pages) */
.prose{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:34px 38px;box-shadow:var(--shadow);margin:-26px auto 60px;position:relative;max-width:920px}
.prose h1{font-size:1.9rem;margin-bottom:12px;color:var(--navy)}
.prose h2{font-size:1.4rem;margin:30px 0 10px;color:var(--navy);padding-inline-start:14px;border-inline-start:5px solid var(--gold)}
.prose h3{font-size:1.15rem;margin:22px 0 8px;color:var(--navy-3)}
.prose h4{font-size:1.02rem;margin:16px 0 6px}
.prose p{margin:10px 0;color:#2b3a52}
.prose ul,.prose ol{padding-inline-start:24px;color:#2b3a52}.prose li{margin:6px 0}
.prose a{color:#9a6400;text-decoration:underline}
.prose table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.93rem}
.prose th,.prose td{border:1px solid var(--line);padding:9px 12px;text-align:right}.prose th{background:#f1f4fa}
.prose blockquote{margin:16px 0;padding:12px 18px;border-inline-start:4px solid var(--gold);background:var(--gold-3);border-radius:8px}
.prose article{padding:22px 0;border-bottom:1px solid var(--line)}
@media (max-width:640px){.prose{padding:22px 18px;margin-inline:12px}}

/* forms */
.field{display:grid;gap:6px;margin-bottom:14px}
.field label{font-weight:800;font-size:.9rem}
.input{width:100%;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:11px 14px;outline:none;transition:.15s}
.input:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(216,155,36,.18)}
.hint{font-size:.8rem;color:var(--muted)}
.alert{padding:12px 16px;border-radius:12px;font-weight:700;font-size:.9rem;margin-bottom:14px}
.alert.err{background:#fee2e2;color:#991b1b}.alert.ok{background:#dcfce7;color:#166534}.alert.info{background:#e0ecff;color:#1e40af}

/* auth box */
.auth-wrap{min-height:calc(100vh - 68px - 300px);display:grid;place-items:center;padding:50px 16px}
.auth-card{width:min(460px,100%);background:#fff;border-radius:24px;padding:34px;box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.auth-card h1{font-size:1.5rem;text-align:center;margin-bottom:6px}
.auth-card .sub{text-align:center;color:var(--muted);font-size:.92rem;margin-bottom:22px}

/* modal */
.modal{position:fixed;inset:0;background:rgba(7,20,42,.72);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:1000;padding:16px;overflow:auto}
.modal.open{display:flex}
.modal-box{background:#fff;border-radius:22px;width:min(560px,100%);padding:28px;box-shadow:var(--shadow-lg);max-height:94vh;overflow:auto}
.modal-box h2{font-size:1.3rem;margin-bottom:6px}

/* footer */
.site-footer{background:#07142a;color:#aebdd5;padding:54px 0 0;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;padding-bottom:36px}
.site-footer h4{color:#fff;font-size:1rem;margin-bottom:12px}
.site-footer a{display:block;padding:4px 0;font-size:.92rem;color:#aebdd5}
.site-footer a:hover{color:var(--gold-2)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding:18px 0;font-size:.83rem;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}

.wa-float{position:fixed;bottom:20px;left:20px;z-index:90;background:#25d366;color:#fff;border-radius:99px;padding:12px 18px;font-weight:800;display:flex;gap:8px;align-items:center;box-shadow:0 10px 26px rgba(37,211,102,.45)}
.wa-float svg{width:22px;height:22px}
@media (max-width:640px){.wa-float span{display:none}.wa-float{padding:13px}}

/* pricing */
.plan{display:flex;flex-direction:column;position:relative}
.plan.best{border:2px solid var(--gold);box-shadow:0 18px 44px rgba(216,155,36,.25)}
.plan .badge{position:absolute;top:-13px;right:20px;background:linear-gradient(135deg,var(--gold-2),var(--gold));color:var(--navy);font-weight:900;font-size:.78rem;padding:4px 14px;border-radius:99px}
.plan h3{font-size:1.1rem;min-height:3.2em}
.plan .price{font-size:2.2rem;font-weight:900;color:var(--navy);margin:8px 0 2px}
.plan .price small{font-size:.9rem;color:var(--muted);font-weight:700}
.plan ul{list-style:none;padding:0;margin:14px 0 20px;display:grid;gap:8px;font-size:.92rem}
.plan li{display:flex;gap:8px;align-items:flex-start}
.plan li svg{width:18px;height:18px;color:var(--ok);flex:none;margin-top:4px}
.plan .btn{margin-top:auto}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:8px 16px;font-weight:800;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--navy);color:var(--gold-2);border-color:var(--navy)}

@media print{.site-header,.site-footer,.wa-float{display:none!important}}
.eyebrow svg{width:16px;height:16px;flex:none}
.card .tag{margin-inline-start:0;margin-inline-end:6px}