/* ============================================
   القالب الديناميكي — Base Styles
   ملاحظة: متغيرات :root هنا قيم احتياطية فقط.
   القيم الفعلية تُحقن من قاعدة البيانات عبر includes/theme.php
   الخطوط: من Google Fonts (مجانية للاستخدام التجاري) — تُحمّل في الهيدر.
   ============================================ */

/* قيم احتياطية بسيطة — فقط إذا فشل حقن الثيم تماماً.
   نستخدم @layer لضمان أن حقن الثيم في الهيدر له أولوية أعلى. */
@layer fallback {
  :root{
    --ink:#0a0a0a;--paper:#ffffff;--cream:#f4efe9;--cream-2:#ebe4da;
    --muted:#7a756f;--accent:#0a0a0a;--line:rgba(10,10,10,0.10);--line-2:rgba(10,10,10,0.06);
    --success:#28c940;--warning:#ffbd2e;--danger:#ff5f57;
    --container-max:1320px;--container-pad:32px;
    --r-sm:8px;--r-md:14px;--r-lg:20px;--r-xl:24px;--r-full:999px;
    --t-fast:.3s;--t-med:.4s cubic-bezier(.2,.85,.25,1);--t-slow:1s cubic-bezier(.2,.85,.25,1);
    --font-main:'IBM Plex Sans Arabic','Tajawal',system-ui,sans-serif;
  }
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-main);background:var(--paper);color:var(--ink);font-weight:400;line-height:1.75;letter-spacing:-0.01em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
body.no-scroll{overflow:hidden}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul{list-style:none}
.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad)}
section{padding:120px 0}

/* ===== عناصر الأقسام المشتركة ===== */
.section-eyebrow{font-size:13px;color:var(--muted);margin-bottom:24px;display:flex;align-items:center;gap:10px}
.section-eyebrow::before{content:"";width:24px;height:1px;background:var(--muted)}
.section-eyebrow.center{justify-content:center}
.section-title{font-size:clamp(32px,4.5vw,56px);font-weight:500;line-height:1.2;letter-spacing:-0.03em;margin-bottom:24px;max-width:780px}
.section-title.center{text-align:center;margin-left:auto;margin-right:auto}
.section-title .muted{color:var(--muted);font-weight:400}
.section-lead{font-size:18px;color:var(--muted);line-height:1.85;max-width:620px;margin-bottom:64px}
.section-lead.center{text-align:center;margin-left:auto;margin-right:auto;margin-bottom:80px}
.section-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:64px;gap:32px;flex-wrap:wrap}
.section-header .section-title,.section-header .section-lead{margin-bottom:0}
.section-link{font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:var(--r-full);border:1px solid var(--line);transition:all var(--t-fast);flex-shrink:0}
.section-link:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ===== الأزرار ===== */
.btn-primary{display:inline-flex;align-items:center;gap:12px;background:var(--accent);color:var(--paper);padding:16px 28px;border-radius:var(--r-full);font-size:15px;font-weight:500;transition:transform var(--t-fast),box-shadow var(--t-fast)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,0.12)}
.btn-primary .arr{width:22px;height:22px;border-radius:50%;background:var(--paper);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-size:13px}
.btn-secondary{font-size:15px;font-weight:500;padding:16px 4px;transition:opacity var(--t-fast);display:inline-flex;align-items:center;gap:8px}
.btn-secondary:hover{opacity:.6}

/* ===== أنيميشن الظهور =====
   ملاحظة: نخفي العناصر فقط بعد تأكيد عمل JS (عبر class js-ready على body).
   هكذا لو تعطّل JS، يبقى المحتوى ظاهراً (لا صفحة فارغة). */
.js-ready .reveal{opacity:0;transform:translateY(24px);transition:opacity var(--t-slow),transform var(--t-slow)}
.js-ready .reveal.in{opacity:1;transform:translateY(0)}
@keyframes rise{to{transform:translateY(0)}}
@keyframes fade{to{opacity:1}}
@keyframes floatGentle{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}