/* =====================================================================
 *  الواجهة الأمامية — الأنماط المشتركة (مُخزّنة)
 *  مكانه: الجذر / site.css
 * ===================================================================== */
:root{
  --brand-deep:color-mix(in oklab,var(--brand),black 20%);
  --brand-tint:color-mix(in oklab,var(--brand),white 86%);
  --bg:#faf7f4;--surface:#fff;--surface-2:#f4efe9;--ink:#2b2621;--ink-soft:#6a625a;--ink-faint:#948b81;--line:#e7e0d8;--line-soft:#f0ebe4;--sage:#4f7a5b;--sage-tint:#e9f2ec;
  --sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-6:24px;--sp-8:32px;--sp-12:48px;--sp-16:64px;--sp-24:96px;--ease:cubic-bezier(.22,1,.36,1);
  --shadow-sm:0 1px 2px rgba(60,45,35,.06),0 2px 8px rgba(60,45,35,.05);--shadow-md:0 4px 14px rgba(60,45,35,.1),0 12px 30px rgba(60,45,35,.08);--radius:16px;
}
[data-theme="dark"]{--bg:#1a1714;--surface:#221e1a;--surface-2:#2b2621;--ink:#f0ebe4;--ink-soft:#c3b9ae;--ink-faint:#8f857a;--line:#38312a;--line-soft:#2e2823;--brand-tint:color-mix(in oklab,var(--brand),#221e1a 74%);--shadow-sm:none;--shadow-md:0 8px 30px rgba(0,0,0,.35)}
*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}
body{font-family:'Tajawal',system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:1rem;line-height:1.75;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Cairo',sans-serif;line-height:1.28;text-wrap:balance;color:var(--ink);overflow-wrap:break-word;word-break:normal}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--sp-6)}
.btn{font-family:'Tajawal';font-weight:700;font-size:.95rem;padding:12px 24px;border-radius:12px;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .2s var(--ease)}
.btn-primary{background:var(--brand);color:#fff;box-shadow:var(--shadow-sm)}.btn-primary:hover{background:var(--brand-deep);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line)}.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn-lg{padding:15px 30px;font-size:1.05rem;border-radius:13px}
.btn-white{background:#fff;color:var(--brand-deep)}.btn-white:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}

/* شريط الإعلان العلوي */
.topbanner{background:var(--brand);color:#fff;text-align:center;font-size:.9rem;font-weight:700;padding:9px 16px}
.topbanner a{display:inline-flex;align-items:center;gap:8px;justify-content:center;color:#fff}
.topbanner span{display:inline}

header.site{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--bg),transparent 15%);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft)}
.nav{display:flex;align-items:center;gap:var(--sp-6);height:70px}
.brand{display:flex;align-items:center;gap:var(--sp-3);font-family:'Cairo';font-weight:900;min-width:0;flex:1}
.brand .mark{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--brand),var(--brand-deep));display:grid;place-items:center;color:#fff;overflow:hidden;flex-shrink:0}
.brand .mark.has-img{background:none!important;border-radius:8px}
.brand .mark img{width:100%;height:100%;object-fit:contain}
.brand .name{font-size:1.15rem;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-links{display:flex;gap:var(--sp-6);margin-inline-start:auto;font-size:.92rem;font-weight:500;color:var(--ink-soft)}
.nav-links a{padding:6px 0;transition:color .2s var(--ease)}.nav-links a:hover{color:var(--brand)}
.nav-actions{display:flex;align-items:center;gap:var(--sp-3);flex-shrink:0}
.icon-btn{width:42px;height:42px;border-radius:11px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--ink-soft);transition:all .2s var(--ease)}
.icon-btn:hover{border-color:var(--brand);color:var(--brand)}
.burger{display:none}
.mobile-menu{display:none;flex-direction:column;gap:var(--sp-2);padding:var(--sp-4) var(--sp-6) var(--sp-6);border-top:1px solid var(--line-soft);background:var(--bg)}
.mobile-menu a{padding:12px var(--sp-4);border-radius:10px;font-weight:700;color:var(--ink)}
.mobile-menu a:hover{background:var(--surface-2);color:var(--brand)}
.mobile-menu.open{display:flex}

/* البطل — محتوى في الوسط */
.hero{padding:var(--sp-24) 0 var(--sp-16);position:relative;overflow:hidden;text-align:center}
.hero.has-img{color:#fff}
.hero .hero-bg{position:absolute;inset:0;z-index:0}.hero .hero-bg img{width:100%;height:100%;object-fit:cover}
.hero .hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(20,14,10,.75),rgba(20,14,10,.45))}
.hero:not(.has-img)::before{content:'';position:absolute;inset-block-start:-25%;inset-inline-start:50%;transform:translateX(50%);width:70%;height:130%;background:radial-gradient(circle at center,var(--brand-tint),transparent 65%);opacity:.7;z-index:0}
.hero-inner{position:relative;z-index:1;max-width:52rem;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:700;color:var(--brand-deep);background:var(--brand-tint);padding:7px 16px;border-radius:999px;margin-bottom:var(--sp-6)}
.hero.has-img .eyebrow{color:#fff;background:rgba(255,255,255,.18)}
.hero h1{font-size:clamp(2.2rem,5.5vw,4rem);font-weight:900;letter-spacing:-.01em;margin-bottom:var(--sp-6);width:100%}
.hero p.lead{font-size:1.3rem;color:var(--ink-soft);margin-bottom:var(--sp-8);line-height:1.6;max-width:42ch}
.hero.has-img p.lead{color:rgba(255,255,255,.92)}
.hero-cta{display:flex;gap:var(--sp-4);flex-wrap:wrap;justify-content:center}

/* الأقسام — كل العناوين والمحتوى في الوسط */
section.block{padding:var(--sp-24) 0}.band{background:var(--surface-2);border-block:1px solid var(--line-soft)}
.sec-head{max-width:60ch;margin:0 auto var(--sp-12);text-align:center}
.sec-head .tag{font-size:.9rem;font-weight:700;color:var(--brand);letter-spacing:.05em}
.sec-head h2{font-size:clamp(1.9rem,4vw,2.6rem);font-weight:900;margin-top:var(--sp-2)}
.sec-head p{font-size:1.25rem;color:var(--ink-soft);margin-top:var(--sp-3)}
.grid{display:grid;gap:var(--sp-6)}.g-auto{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);transition:all .25s var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--brand)}
/* الخدمات — المحتوى داخل البطاقة في الوسط */
.svc{padding:var(--sp-8);text-align:center;display:flex;flex-direction:column;align-items:center}
.svc .ic{width:52px;height:52px;border-radius:13px;background:var(--brand-tint);color:var(--brand-deep);display:grid;place-items:center;margin-bottom:var(--sp-6)}
.svc h3{font-size:1.3rem;margin-bottom:var(--sp-3)}.svc p{color:var(--ink-soft);font-size:.95rem}
.prod{overflow:hidden;display:flex;flex-direction:column}
.prod .thumb{height:150px;background:linear-gradient(135deg,var(--brand),var(--brand-deep));display:grid;place-items:center;color:#fff;font-family:'Cairo';font-weight:900;font-size:1.5rem}
.prod .thumb img{width:100%;height:100%;object-fit:cover}
.prod-body{padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-2);flex:1}
.prod-body .cat{font-size:.78rem;font-weight:700;color:var(--brand)}.prod-body h3{font-size:1.1rem;font-family:'Tajawal';font-weight:700}.prod-body p{font-size:.9rem;color:var(--ink-soft);flex:1}
.prod-foot{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sp-3)}.free{font-weight:700;color:var(--sage)}
.link-btn{font-weight:700;font-size:.9rem;color:var(--brand);display:inline-flex;align-items:center;gap:5px;transition:gap .2s var(--ease)}.link-btn:hover{gap:9px}
.post{text-align:center}
.post .cover{height:190px;border-radius:14px;margin-bottom:var(--sp-3);background:linear-gradient(135deg,var(--brand-tint),var(--surface-2));overflow:hidden}.post .cover img{width:100%;height:100%;object-fit:cover}
.post .meta{font-size:.8rem;color:var(--ink-faint);font-weight:500}.post h3{font-size:1.25rem;font-family:'Tajawal';font-weight:700;line-height:1.45;margin:var(--sp-2) 0}.post p{font-size:.92rem;color:var(--ink-soft)}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:160px;gap:var(--sp-4)}
.gal{border-radius:14px;overflow:hidden;position:relative;display:grid;place-items:end start;padding:var(--sp-4);color:#fff;font-weight:700;background:linear-gradient(135deg,var(--brand),var(--brand-deep))}
.gal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.gal::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(20,14,10,.6),transparent 60%)}.gal span{position:relative;z-index:1}
.tests{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--sp-6)}
.test{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-8);text-align:center}
.test .stars{color:#e0a53b;letter-spacing:2px;margin-bottom:var(--sp-4)}.test blockquote{font-size:1.05rem;line-height:1.75;margin-bottom:var(--sp-6);color:var(--ink)}
.test .who{display:flex;align-items:center;gap:var(--sp-3);justify-content:center}.test .avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-deep));display:grid;place-items:center;color:#fff;font-weight:700}
.test .who strong{display:block;font-family:'Cairo'}.test .who span{font-size:.8rem;color:var(--ink-faint)}
.faq-wrap{max-width:780px;margin:0 auto;display:grid;gap:var(--sp-3)}
details.faq{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:var(--sp-4) var(--sp-6);transition:border-color .2s var(--ease);text-align:right}
details.faq[open]{border-color:var(--brand)}
details.faq summary{list-style:none;cursor:pointer;font-family:'Cairo';font-weight:700;font-size:1.05rem;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)}
details.faq summary::-webkit-details-marker{display:none}details.faq .chev{color:var(--brand);transition:transform .3s var(--ease)}details.faq[open] .chev{transform:rotate(180deg)}
details.faq .ans{color:var(--ink-soft);padding-top:var(--sp-3)}

/* المقال — عناوين H2/H3/H4 مرتبة للأرشفة */
.article{max-width:72ch;margin:0 auto;padding:var(--sp-16) 0}
.article h1{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:var(--sp-4);text-align:center}
.article .meta{color:var(--ink-faint);margin-bottom:var(--sp-8);font-size:.9rem;text-align:center}
.article .lead-excerpt{font-size:1.25rem;color:var(--ink-soft);margin-bottom:var(--sp-8);text-align:center}
.article .body{font-size:1.1rem;line-height:1.9}
.article .body p{margin-bottom:var(--sp-6);text-wrap:pretty}
.article .body h2{font-size:1.7rem;margin:var(--sp-8) 0 var(--sp-3)}
.article .body h3{font-size:1.35rem;margin:var(--sp-6) 0 var(--sp-2)}
.article .body h4{font-size:1.12rem;margin:var(--sp-4) 0 var(--sp-2);color:var(--ink-soft)}
.article .body ul,.article .body ol{margin:0 var(--sp-6) var(--sp-6);padding-inline-start:var(--sp-6)}
.article .body img{border-radius:12px;margin:var(--sp-6) auto}
.article .body a{color:var(--brand);text-decoration:underline}
.article .cover{height:340px;border-radius:18px;overflow:hidden;margin-bottom:var(--sp-8);background:var(--surface-2)}.article .cover img{width:100%;height:100%;object-fit:cover}

.cta-box{background:linear-gradient(135deg,var(--brand),var(--brand-deep));border-radius:24px;padding:var(--sp-16) var(--sp-12);text-align:center;color:#fff}
.cta-box h2{color:#fff;font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:var(--sp-4)}.cta-box p{font-size:1.25rem;opacity:.92;max-width:46ch;margin:0 auto var(--sp-8)}

/* التذييل */
footer.site{background:var(--surface-2);border-top:1px solid var(--line-soft);padding:var(--sp-16) 0 var(--sp-8)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--sp-8);margin-bottom:var(--sp-12)}
.foot-about .brand{margin-bottom:var(--sp-4)}
.foot-about .brand .mark{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--brand),var(--brand-deep));display:grid;place-items:center;color:#fff;overflow:hidden}
.foot-about .brand .mark.has-img{background:none!important}
.foot-about .brand .mark img{width:100%;height:100%;object-fit:contain}
.foot-about p{font-size:.92rem;color:var(--ink-soft);max-width:34ch}
.foot-grid h4{font-family:'Cairo';margin-bottom:var(--sp-4)}
.foot-grid>div>a{display:block;font-size:.92rem;color:var(--ink-soft);margin-bottom:var(--sp-2);transition:color .2s var(--ease)}
.foot-grid>div>a:hover{color:var(--brand)}
.foot-contact a{display:flex;align-items:center;gap:8px;font-size:.92rem;color:var(--ink-soft);margin-bottom:var(--sp-3);transition:color .2s var(--ease)}
.foot-contact a:hover{color:var(--brand)}
.socials{display:flex;gap:var(--sp-3);margin-top:var(--sp-4);flex-wrap:wrap}
.socials a{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-soft);background:var(--surface);transition:all .2s var(--ease)}
.socials a:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.socials a svg{width:18px;height:18px}
.foot-bottom{border-top:1px solid var(--line);padding-top:var(--sp-6);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--sp-3);font-size:.85rem;color:var(--ink-faint)}
.foot-bottom a{color:var(--brand);font-weight:700}

@media(max-width:820px){
  .nav-links{display:none}.burger{display:grid}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .brand .name{font-size:1rem}
  /* التذييل: كل قسم في سطر مستقل فوق بعضه */
  .foot-grid{grid-template-columns:1fr;gap:var(--sp-8);text-align:center}
  .foot-about .brand{justify-content:center}
  .foot-about p{margin-inline:auto}
  .socials{justify-content:center}
  .foot-contact a{justify-content:center}
  .foot-bottom{justify-content:center;text-align:center}
}
@media(max-width:380px){.brand .name{font-size:.9rem}}