@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;500;600;700&family=Amiri:wght@400;700&display=swap');

:root {
  --green:       #1a4a2e;
  --green-mid:   #2d6b45;
  --green-dark:  #0f2e1c;
  --gold:        #c8932a;
  --gold-light:  #e8b04a;
  --gold-dark:   #9a6d1a;
  --cream:       #f5f0e8;
  --cream2:      #ede5d5;
  --text:        #1e1e1e;
  --text2:       #4a4a4a;
  --muted:       #888;
  --white:       #ffffff;
  --shadow:      rgba(26,74,46,.15);
  --shadow2:     rgba(26,74,46,.30);
  --border:      rgba(200,147,42,.20);
  --grad-hero:   linear-gradient(135deg,#0f2e1c 0%,#1a4a2e 50%,#2d6b45 100%);
  --grad-gold:   linear-gradient(135deg,#c8932a,#e8b04a);
  --r:  16px;
  --r2:  8px;
  --tr: all .3s cubic-bezier(.4,0,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Noto Naskh Arabic','Amiri',serif;background:var(--cream);color:var(--text);direction:rtl;line-height:1.8;overflow-x:hidden}

::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--cream)}
::-webkit-scrollbar-thumb{background:var(--green-mid);border-radius:3px}

/* ── NAVBAR ── */
.navbar{
  position:fixed;top:0;right:0;left:0;z-index:1000;
  background:rgba(10,28,18,.97);backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(200,147,42,.3);
  height:68px;padding:0 1.5rem;
  display:flex;align-items:center;justify-content:space-between;
}
.nb-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.nb-logo{width:40px;height:40px;background:var(--grad-gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:#fff;font-weight:700;flex-shrink:0}
.nb-name{color:var(--cream);font-size:1rem;font-weight:700}
.nb-name span{color:var(--gold-light)}
.nb-links{display:flex;align-items:center;gap:2px;list-style:none}
.nb-links a{color:rgba(245,240,232,.8);text-decoration:none;padding:7px 11px;border-radius:var(--r2);font-size:.82rem;transition:var(--tr);white-space:nowrap}
.nb-links a:hover,.nb-links a.active{color:var(--gold-light);background:rgba(200,147,42,.15)}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:6px}
.hamburger span{display:block;width:22px;height:2px;background:var(--cream);border-radius:2px;transition:var(--tr)}
.mob-menu{display:none;position:fixed;top:68px;right:0;left:0;background:rgba(8,24,14,.98);backdrop-filter:blur(20px);z-index:999;padding:.8rem;border-bottom:1px solid var(--border)}
.mob-menu.open{display:block}
.mob-menu a{display:block;color:var(--cream);text-decoration:none;padding:11px 14px;border-radius:var(--r2);font-size:.95rem;transition:var(--tr);border-bottom:1px solid rgba(200,147,42,.08)}
.mob-menu a:hover{color:var(--gold-light);background:rgba(200,147,42,.1)}

/* ── PAGE HEADER ── */
.ph{background:var(--grad-hero);padding:110px 1.5rem 55px;text-align:center;position:relative;overflow:hidden}
.ph::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23c8932a' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E")}
.ph-inner{position:relative;z-index:1}
.ph-badge{display:inline-block;background:rgba(200,147,42,.2);border:1px solid rgba(200,147,42,.4);color:var(--gold-light);padding:5px 18px;border-radius:50px;font-size:.82rem;margin-bottom:.8rem}
.ph h1{color:#fff;font-size:clamp(1.8rem,5vw,3.2rem);font-weight:700;line-height:1.2;margin-bottom:.8rem}
.ph h1 span{color:var(--gold-light)}
.ph p{color:rgba(245,240,232,.75);font-size:1rem;max-width:580px;margin:0 auto}

/* ── SECTION ── */
.sec{padding:70px 1.5rem;max-width:1180px;margin:0 auto}
.sec-title{text-align:center;margin-bottom:2.5rem}
.sec-title .lbl{display:inline-block;color:var(--gold);font-size:.8rem;letter-spacing:.1em;margin-bottom:.4rem;font-weight:600}
.sec-title h2{font-size:clamp(1.6rem,4vw,2.6rem);color:var(--green-dark);font-weight:700;line-height:1.2}
.sec-title p{color:var(--text2);max-width:560px;margin:.8rem auto 0;font-size:.95rem}
.divider{width:55px;height:3px;background:var(--grad-gold);margin:.8rem auto 0;border-radius:3px}

/* ── GRID ── */
.g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.8rem}
.g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.8rem}
.g4{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.4rem}

/* ── CARD ── */
.card{background:var(--white);border-radius:var(--r);overflow:hidden;box-shadow:0 4px 20px var(--shadow);border:1px solid var(--border);transition:var(--tr)}
.card:hover{transform:translateY(-6px);box-shadow:0 14px 40px var(--shadow2)}
.card-body{padding:1.4rem}
.card-title{font-size:1.1rem;font-weight:700;color:var(--green-dark);margin-bottom:.4rem}
.card-text{color:var(--text2);font-size:.9rem;line-height:1.7}

/* ── STAT BOX ── */
.sbox{background:var(--white);border-radius:var(--r);padding:1.8rem;text-align:center;border:1px solid var(--border);box-shadow:0 4px 20px var(--shadow);transition:var(--tr)}
.sbox:hover{transform:translateY(-4px);box-shadow:0 12px 30px var(--shadow2)}
.sbox .ico{width:56px;height:56px;background:linear-gradient(135deg,rgba(26,74,46,.1),rgba(200,147,42,.1));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin:0 auto .8rem}
.sbox .num{font-size:2.3rem;font-weight:700;color:var(--green);line-height:1}
.sbox .lbl{color:var(--muted);font-size:.85rem;margin-top:.3rem}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:7px;padding:11px 26px;border-radius:50px;font-family:inherit;font-size:.9rem;font-weight:600;cursor:pointer;transition:var(--tr);text-decoration:none;border:2px solid transparent}
.btn-p{background:var(--green);color:#fff;border-color:var(--green)}
.btn-p:hover{background:var(--green-dark);transform:translateY(-2px);box-shadow:0 8px 24px var(--shadow2)}
.btn-g{background:var(--grad-gold);color:#fff;border:none}
.btn-g:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(200,147,42,.4)}
.btn-o{background:transparent;color:var(--green);border-color:var(--green)}
.btn-o:hover{background:var(--green);color:#fff}

/* ── HIGHLIGHT BOX ── */
.hbox{background:linear-gradient(135deg,rgba(26,74,46,.05),rgba(200,147,42,.05));border:1px solid var(--border);border-right:4px solid var(--gold);border-radius:var(--r);padding:1.8rem}

/* ── TAG ── */
.tag{display:inline-block;background:rgba(26,74,46,.1);color:var(--green);padding:3px 12px;border-radius:50px;font-size:.78rem;font-weight:600;margin:2px}

/* ── FORM ── */
.fg{margin-bottom:1.3rem}
.fl{display:block;font-weight:600;margin-bottom:.4rem;color:var(--green-dark);font-size:.9rem}
.fc{width:100%;padding:11px 14px;border:1.5px solid var(--cream2);border-radius:var(--r2);font-family:inherit;font-size:.95rem;background:var(--white);color:var(--text);transition:var(--tr);outline:none;direction:rtl}
.fc:focus{border-color:var(--green-mid);box-shadow:0 0 0 3px rgba(26,74,46,.1)}
textarea.fc{min-height:130px;resize:vertical}

/* ── FOOTER ── */
footer{background:var(--green-dark);color:rgba(245,240,232,.8);padding:55px 1.5rem 25px}
.ft-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2.5rem;margin-bottom:2.5rem}
.ft-brand .logo{font-size:1.3rem;font-weight:700;color:#fff;margin-bottom:.4rem}
.ft-brand .logo span{color:var(--gold-light)}
.ft-brand p{font-size:.85rem;line-height:1.7}
.ft-col h4{color:var(--gold-light);margin-bottom:.8rem;font-size:.95rem}
.ft-col ul{list-style:none}
.ft-col li{margin-bottom:.4rem}
.ft-col a{color:rgba(245,240,232,.7);text-decoration:none;font-size:.85rem;transition:var(--tr)}
.ft-col a:hover{color:var(--gold-light);padding-right:4px}
.ft-bottom{max-width:1180px;margin:0 auto;padding-top:1.2rem;border-top:1px solid rgba(200,147,42,.2);text-align:center;font-size:.8rem;color:rgba(245,240,232,.45)}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.aup{animation:fadeUp .6s ease both}
.a1{animation-delay:.1s}.a2{animation-delay:.2s}.a3{animation-delay:.3s}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.reveal.shown{opacity:1;transform:translateY(0)}

/* ── RESPONSIVE ── */
@media(max-width:1050px){.nb-links{display:none}.hamburger{display:flex}}
@media(max-width:720px){.sec{padding:50px 1rem}.ph{padding:90px 1rem 45px}.g2,.g3,.g4{grid-template-columns:1fr}}