@font-face{font-family:'Amiri';font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;src:url(/fonts/amiri-700-arabic.woff2) format('woff2');}
@font-face{font-family:'Amiri';font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;src:url(/fonts/amiri-700-latin.woff2) format('woff2');}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;src:url(/fonts/tajawal-400-arabic.woff2) format('woff2');}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;src:url(/fonts/tajawal-400-latin.woff2) format('woff2');}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;src:url(/fonts/tajawal-700-arabic.woff2) format('woff2');}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;src:url(/fonts/tajawal-700-latin.woff2) format('woff2');}

:root{
  --ink:#071426; --navy:#0d2b45; --navy-2:#123a5c;
  --champagne:#c9a869; --champagne-dark:#8a6a30;
  --paper:#ffffff; --paper-2:#f3f6f8;
  --ink-text:#16222e; --muted:#5b6673; --border:#e2e7eb;
  --wa:#25d366; --wa-dark:#1da851;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{font-size:17.5px; scroll-behavior:smooth;}
body{font-family:'Tajawal', -apple-system, 'Segoe UI', Tahoma, sans-serif; color:var(--ink-text); background:var(--paper); line-height:1.8; direction:rtl;}
a{text-decoration:none; color:inherit;}
img{max-width:100%; display:block;}
.container{width:100%; max-width:760px; margin:0 auto; padding:0 24px;}

header{background:color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10;}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 0; max-width:760px; margin:0 auto; padding-inline:24px; gap:16px;}
.brand{display:flex; align-items:center; gap:12px;}
.brand-mark{width:38px; height:38px; border-radius:12px; background:linear-gradient(135deg, var(--navy), var(--navy-2)); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.brand-mark svg{width:20px; height:20px; color:#fff;}
.brand-text strong{font-family:'Amiri', serif; font-size:1rem; color:var(--navy); display:block;}
.brand-text span{font-size:.72rem; color:var(--muted);}
.btn-wa{display:inline-flex; align-items:center; gap:8px; background:var(--wa); color:#fff; padding:10px 18px; border-radius:10px; font-weight:700; font-size:.85rem; white-space:nowrap;}
.btn-wa:hover{background:var(--wa-dark);}

main{padding:48px 0 64px;}
.eyebrow{color:var(--champagne-dark); font-weight:700; font-size:.82rem; letter-spacing:.1em; margin-bottom:14px;}
h1{font-family:'Amiri', serif; font-weight:700; font-size:clamp(1.6rem, 4vw, 2.2rem); color:var(--navy); text-wrap:balance; margin-bottom:16px;}
.lead{color:var(--muted); font-size:1.1rem; margin-bottom:36px; max-width:60ch;}
article h2{font-family:'Amiri', serif; font-weight:700; font-size:1.4rem; color:var(--navy); margin:36px 0 14px;}
article p{margin-bottom:18px; font-size:1.05rem; max-width:68ch;}
article ul{margin:0 0 18px; padding-inline-start:22px;}
article li{margin-bottom:8px; font-size:1.05rem;}
.note{background:var(--paper-2); border-inline-start:3px solid var(--champagne); padding:18px 22px; margin:28px 0; border-radius:0 10px 10px 0; font-size:.98rem; color:var(--ink-text);}
.note strong{color:var(--navy);}

.cta-box{background:var(--paper-2); border:1px solid var(--border); border-radius:16px; padding:32px; margin-top:48px; text-align:center;}
.cta-box h3{font-family:'Amiri', serif; color:var(--navy); font-size:1.2rem; margin-bottom:10px;}
.cta-box p{color:var(--muted); font-size:.98rem; margin-bottom:22px;}
.cta-actions{display:flex; flex-wrap:wrap; gap:14px; justify-content:center;}
.btn-outline{display:inline-flex; align-items:center; padding:12px 24px; border:1.5px solid var(--navy); color:var(--navy); border-radius:10px; font-weight:700; font-size:.9rem;}
.btn-outline:hover{background:var(--navy); color:#fff;}

footer{background:var(--ink); color:#8fa0ab; padding:32px 0; text-align:center; font-size:.85rem;}
footer a{color:#c9d8e2;}
footer a:hover{color:var(--champagne);}

.author-box{display:flex; align-items:center; gap:16px; margin-top:44px; padding-top:28px; border-top:1px solid var(--border);}
.author-box img{width:56px; height:56px; border-radius:50%; object-fit:cover; border:2px solid var(--champagne); flex-shrink:0;}
.author-box strong{color:var(--navy); font-size:.98rem; display:block;}
.author-box span{color:var(--muted); font-size:.85rem;}