/* ═══ بُقجة — رموز التصميم (Design Tokens) ═══════════════════════════════ */
:root{
  /* الألوان */
  --olive:#1E3A2B;          /* الأخضر الزيتوني الغامق (الهوية) */
  --olive-900:#16291E;
  --olive-800:#1A3226;
  --olive-700:#274A38;
  --olive-600:#355C46;
  --gold:#E08A00;           /* البرتقالي/الكركمي — لون العلامة (من اللوجو) */
  --gold-600:#C4740A;
  --gold-300:#F3C98B;
  --gold-100:#FBEBD2;
  --brand:#E08A00;
  --brand-600:#C4740A;
  --brand-300:#F3C98B;
  --brand-100:#FBEBD2;
  --cream:#F7F2E7;          /* خلفية دافئة */
  --cream-200:#EFE7D6;
  --cream-300:#E6DAC3;
  --ink:#2B2118;            /* بنّي داكن للنصوص */
  --ink-2:#5E4E3C;
  --ink-3:#8A7A64;
  --line:#E3D9C6;
  --white:#FFFFFF;

  /* الخطوط */
  --font-ar:'IBM Plex Sans Arabic','Noto Kufi Arabic','Segoe UI',Tahoma,sans-serif;
  --font-ui:var(--font-ar);

  /* المقاسات */
  --container:1200px;
  --gutter:24px;
  --r-sm:10px;
  --r:14px;
  --r-lg:20px;
  --r-pill:999px;
  --shadow-1:0 6px 18px rgba(30,58,43,.08);
  --shadow-2:0 14px 40px rgba(30,58,43,.16);
  --ease:cubic-bezier(.2,.7,.2,1);
  --header-h:72px;
}

/* ═══ أساسيات ═══════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--font-ui);font-size:16px;line-height:1.75;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4,p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--gold-300);outline-offset:3px;border-radius:6px}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;inset-block-start:-60px;inset-inline-start:16px;z-index:100;
  background:var(--gold);color:var(--ink);padding:10px 16px;border-radius:var(--r-sm);
  font-weight:700;transition:inset-block-start .2s var(--ease)}
.skip-link:focus{inset-block-start:12px}

/* ═══ عناوين الأقسام ════════════════════════════════════════════════════ */
.kicker{
  display:inline-block;color:var(--gold-600);font-size:13px;font-weight:700;
  letter-spacing:.2px;margin-block-end:6px
}
.section-head{text-align:center;margin-block-end:34px}
.section-head h2{
  font-size:clamp(26px,3.2vw,38px);font-weight:800;letter-spacing:-.2px;color:var(--ink);
  line-height:1.35
}
.section-head p{
  color:var(--ink-2);font-size:15px;max-width:62ch;margin:10px auto 0;
}

/* ═══ الأزرار ═══════════════════════════════════════════════════════════ */
.btn{
  --btn-bg:var(--gold);--btn-fg:var(--ink);--btn-bd:transparent;
  display:inline-flex;align-items:center;gap:10px;
  background:var(--btn-bg);color:var(--btn-fg);border:1.5px solid var(--btn-bd);
  padding:13px 26px;border-radius:var(--r-pill);font-weight:700;font-size:15px;
  cursor:pointer;transition:transform .18s var(--ease),background .18s var(--ease),
    box-shadow .18s var(--ease),color .18s var(--ease);
  box-shadow:0 6px 18px rgba(201,154,46,.25)
}
.btn .arr{transition:transform .18s var(--ease)}
.btn:hover{transform:translateY(-2px);background:var(--gold-600);box-shadow:0 10px 24px rgba(201,154,46,.32)}
.btn:hover .arr{transform:translateX(-4px)}
[dir="ltr"] .btn:hover .arr{transform:translateX(4px)}
.btn--outline{
  --btn-bg:transparent;--btn-fg:var(--white);--btn-bd:rgba(255,255,255,.65);
  box-shadow:none
}
.btn--outline:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn--dark{--btn-bg:var(--olive);--btn-fg:#fff;box-shadow:0 6px 18px rgba(30,58,43,.22)}
.btn--dark:hover{background:var(--olive-700)}
.btn--sm{padding:9px 18px;font-size:14px}

/* رابط دائري صغير (سهم داخل دائرة) */
.circle-link{
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;border:1.5px solid var(--gold-300);
  color:var(--gold-600);background:transparent;transition:.18s var(--ease)
}
.circle-link:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.circle-link svg{width:15px;height:15px}

/* ═══ صور مؤقتة (Placeholders) — تُستبدل بصور حقيقية لاحقاً ══════════════ */
.ph{
  position:relative;overflow:hidden;background-color:#6B5B47;
  background-image:
    radial-gradient(120% 90% at 15% 10%, rgba(201,154,46,.55) 0%, rgba(201,154,46,0) 55%),
    linear-gradient(145deg,#7A6748 0%,#4B3B2A 55%,#2B2118 100%);
  background-size:cover;background-position:center;
}
.ph::after{
  content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='none' stroke='%23ffffff' stroke-opacity='0.10' stroke-width='1.2'><path d='M60 8c14 12 22 24 22 36 0 16-10 28-22 36-12-8-22-20-22-36 0-12 8-24 22-36z'/><circle cx='60' cy='60' r='46'/></g></svg>");
  background-size:120px 120px;opacity:.55;pointer-events:none
}
.ph--olive{background-color:#22392C;
  background-image:
    radial-gradient(110% 80% at 20% 0%, rgba(70,110,86,.85) 0%, rgba(30,58,43,0) 60%),
    linear-gradient(160deg,#2C4A38 0%,#1E3A2B 60%,#16291E 100%)}
.ph--cream{background-color:#E6DAC3;
  background-image:
    radial-gradient(120% 90% at 80% 10%, rgba(201,154,46,.35) 0%, rgba(201,154,46,0) 60%),
    linear-gradient(150deg,#EFE7D6 0%,#D9C9A8 100%)}
.ph .ph-label{
  position:absolute;inset-block-start:8px;inset-inline-start:10px;z-index:3;
  font-size:9px;color:rgba(255,255,255,.5);letter-spacing:.2px;
  background:rgba(20,16,10,.22);padding:2px 6px;border-radius:99px;backdrop-filter:blur(2px)
}