/* =====================================================================
   JATHWA — جذوة للتنمية البيئية | main.css
   الهوية البصرية محفوظة من الموقع السابق:
   Teal hsl(185 76% 43%) + Lime hsl(71 78% 43%) + خط Tajawal / Inter
   العنصر المميِّز: «خيط الجذوة» — خط متدرّج Teal→Lime ينتهي بجمرة متوهجة
   ===================================================================== */

:root{
  --teal:        hsl(185 76% 43%);
  --teal-strong: hsl(187 78% 33%);
  --teal-deep:   hsl(188 70% 24%);
  --petrol:      hsl(192 58% 13%);
  --petrol-2:    hsl(190 52% 18%);
  --petrol-3:    hsl(192 60%  9%);
  --lime:        hsl(71 78% 43%);
  --lime-bright: hsl(71 85% 55%);
  --lime-deep:   hsl(72 80% 18%);
  --lime-soft:   hsl(71 60% 94%);
  --mint:        hsl(168 38% 96%);
  --mint-2:      hsl(168 34% 92%);
  --ink:         hsl(195 25% 14%);
  --body:        hsl(200 10% 28%);
  --muted:       hsl(200 8% 44%);
  --line:        hsl(180 12% 88%);
  --card:        #ffffff;

  --radius:    14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px hsl(192 30% 20% / .06), 0 4px 14px hsl(192 30% 20% / .06);
  --shadow-md: 0 8px 28px hsl(192 35% 18% / .12);
  --shadow-lg: 0 18px 50px hsl(192 40% 14% / .22);

  --font-ar: "Tajawal", system-ui, -apple-system, sans-serif;
  --font-en: "Inter", "Tajawal", sans-serif;
  --container: 1160px;
  --header-h: 76px;
}

/* ----------------------------- أساسيات ----------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:#fff; color:var(--body);
  font-family:var(--font-ar); font-size:1.05rem; line-height:2;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body.no-scroll{overflow:hidden}
img{max-width:100%; height:auto; display:block}
a{color:var(--teal-strong); text-decoration:none; transition:color .2s}
a:hover{color:var(--teal)}
h1,h2,h3,h4{font-family:var(--font-ar); color:var(--ink); line-height:1.5; margin:0 0 .55em; font-weight:800}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em; padding-inline-start:1.25em}
button{font-family:inherit; cursor:pointer}
::selection{background:hsl(71 78% 43% / .35)}
:focus-visible{outline:3px solid var(--teal); outline-offset:3px; border-radius:8px}

/* أرقام لاتينية بخط Inter داخل النص العربي */
.num,.num-inline{
  font-family:var(--font-en); font-weight:700;
  font-feature-settings:"tnum"; direction:ltr; unicode-bidi:isolate;
}

.container{max-width:var(--container); margin-inline:auto; padding-inline:clamp(1rem,4vw,1.5rem)}
.section{padding-block:clamp(3.6rem,7.5vw,5.8rem)}
section[id], div[id]{scroll-margin-block-start:calc(var(--header-h) + 14px)}

.skip-link{
  position:fixed; inset-inline-start:1rem; top:-4rem; z-index:200;
  background:var(--petrol); color:#fff; padding:.65rem 1.1rem;
  border-radius:10px; transition:top .25s;
}
.skip-link:focus{top:1rem; color:#fff}

/* ------------------------ ترويسة الأقسام ------------------------ */
.section-head{max-width:780px; margin-bottom:clamp(1.8rem,3.4vw,2.8rem)}
.section-head h2{font-size:clamp(1.65rem,3.4vw,2.3rem); margin-bottom:.25em}
.kicker{
  font-family:var(--font-en); font-weight:600; font-size:.8rem;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--teal-strong); margin:0 0 .55rem;
}
.section-intro{font-size:1.1rem; max-width:720px; margin-top:1.1rem; color:var(--body)}

/* «خيط الجذوة»: خط متدرّج ينتهي بجمرة متوهجة */
.ember-line{
  position:relative; display:block; height:3px; width:96px;
  margin-top:.65rem; border-radius:99px;
  background:linear-gradient(to left, var(--teal), var(--lime));
}
.ember-line::after{
  content:""; position:absolute; inset-inline-end:-5px; top:50%;
  width:11px; height:11px; border-radius:50%;
  transform:translateY(-50%);
  background:var(--lime-bright);
  box-shadow:0 0 0 4px hsl(71 85% 55% / .25), 0 0 14px 2px hsl(71 85% 55% / .55);
  animation:ember 2.6s ease-in-out infinite;
}
@keyframes ember{
  0%,100%{box-shadow:0 0 0 4px hsl(71 85% 55% / .22), 0 0 10px 1px hsl(71 85% 55% / .45)}
  50%    {box-shadow:0 0 0 5px hsl(71 85% 55% / .30), 0 0 20px 4px hsl(71 85% 55% / .70)}
}

/* ----------------------------- الأزرار ----------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.78rem 1.6rem; border-radius:999px; border:2px solid transparent;
  font-weight:700; font-size:1rem; line-height:1.4;
  transition:transform .18s, box-shadow .18s, background .18s, color .18s, border-color .18s;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-lime{background:var(--lime); color:var(--lime-deep); box-shadow:0 6px 20px hsl(71 78% 35% / .35)}
.btn-lime:hover{background:var(--lime-bright); color:var(--lime-deep)}
.btn-teal{background:var(--teal); color:#fff; box-shadow:0 6px 20px hsl(185 76% 33% / .35)}
.btn-teal:hover{background:var(--teal-strong); color:#fff}
.btn-outline{background:transparent; color:#fff; border-color:hsl(0 0% 100% / .75)}
.btn-outline:hover{background:hsl(0 0% 100% / .12); color:#fff; border-color:#fff}
.btn-ghost{background:hsl(0 0% 100% / .10); color:#fff; backdrop-filter:blur(4px)}
.btn-ghost:hover{background:hsl(0 0% 100% / .2); color:#fff}
.btn-play{background:hsl(0 0% 100% / .10); color:var(--lime-bright); backdrop-filter:blur(4px)}
.btn-play:hover{background:hsl(0 0% 100% / .18); color:var(--lime-bright)}
.btn[disabled]{opacity:.6; pointer-events:none}

/* ----------------------------- الترويسة ----------------------------- */
.site-header{
  position:sticky; top:0; z-index:120;
  background:hsl(0 0% 100% / .9);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid hsl(180 12% 88% / .7);
  transition:box-shadow .25s, background .25s;
}
.site-header.is-scrolled{box-shadow:var(--shadow-sm); background:hsl(0 0% 100% / .96)}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:var(--header-h)}

.brand{display:inline-flex; align-items:center; gap:.7rem}
.brand img{width:46px; height:auto}
.brand-text{display:flex; flex-direction:column; line-height:1.25}
.brand-text strong{color:var(--ink); font-size:1.22rem; font-weight:800}
.brand-text small{color:var(--muted); font-size:.78rem; font-weight:500; letter-spacing:.02em}

.main-nav{display:flex; align-items:center; gap:.25rem}
.nav-link{
  position:relative; padding:.55rem .85rem; border-radius:10px;
  color:var(--body); font-weight:500; font-size:.99rem;
}
.nav-link::after{
  content:""; position:absolute; inset-inline:0.85rem; bottom:.25rem; height:2px;
  border-radius:99px; background:linear-gradient(to left, var(--teal), var(--lime));
  transform:scaleX(0); transform-origin:center; transition:transform .25s;
}
.nav-link:hover{color:var(--ink)}
.nav-link.is-active{color:var(--teal-strong); font-weight:700}
.nav-link.is-active::after,.nav-link:hover::after{transform:scaleX(1)}
.nav-cta{
  margin-inline-start:.5rem; background:var(--teal); color:#fff !important;
  border-radius:999px; padding:.55rem 1.25rem; font-weight:700;
  box-shadow:0 4px 14px hsl(185 76% 33% / .3);
}
.nav-cta::after{display:none}
.nav-cta:hover{background:var(--teal-strong)}

.nav-toggle{
  display:none; flex-direction:column; gap:5px; padding:.7rem .6rem;
  background:none; border:0; border-radius:10px;
}
.nav-toggle span{width:24px; height:2.5px; border-radius:99px; background:var(--ink); transition:transform .3s, opacity .3s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ----------------------------- البطل (Hero) ----------------------------- */
.hero{
  position:relative; min-height:min(100svh, 880px);
  display:flex; align-items:center; overflow:hidden;
  background:var(--petrol); color:#fff;
  padding-block:clamp(5rem,12vh,7rem) clamp(4rem,10vh,6rem);
}
.hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(1000px 500px at 80% 0%, hsl(185 70% 35% / .35), transparent 65%),
    linear-gradient(to top, hsl(192 58% 10% / .94) 0%, hsl(192 58% 12% / .72) 45%, hsl(192 58% 12% / .55) 100%);
}
.hero-inner{position:relative; z-index:2; max-width:880px}
.hero-tagline{
  font-family:var(--font-en); font-weight:600; font-size:.86rem;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--lime-bright); margin-bottom:1.1rem;
}
.hero-title{
  color:#fff; font-size:clamp(1.8rem,4.6vw,3.1rem);
  font-weight:800; line-height:1.65; margin-bottom:1rem;
  text-wrap:balance;
}
.spark-word{
  background:linear-gradient(95deg, var(--lime-bright), hsl(85 80% 62%));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 26px hsl(71 85% 55% / .35);
}
.hero-sub{
  color:hsl(180 25% 92% / .92); font-size:clamp(1.02rem,1.6vw,1.18rem);
  max-width:62ch; margin-bottom:2rem;
}
.hero-cta{display:flex; flex-wrap:wrap; gap:.8rem; align-items:center}

.hero-scroll{
  position:absolute; z-index:2; bottom:1.4rem; left:50%;
  transform:translateX(-50%); color:hsl(0 0% 100% / .8);
  padding:.4rem; border-radius:50%;
  animation:bounce 2.2s ease-in-out infinite;
}
.hero-scroll:hover{color:#fff}
@keyframes bounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}
@media (max-height:620px){.hero-scroll{display:none}}

/* ----------------------------- شريط الأرقام ----------------------------- */
.numbers{
  background:
    radial-gradient(800px 360px at 12% -40%, hsl(185 60% 30% / .4), transparent 60%),
    linear-gradient(160deg, var(--petrol) 0%, var(--petrol-2) 100%);
  color:#fff; padding-block:clamp(2.6rem,5vw,3.6rem);
  border-top:1px solid hsl(185 60% 40% / .25);
}
.numbers-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:1.6rem 1.2rem; text-align:center;
}
.num-item{display:flex; flex-direction:column; align-items:center; gap:.3rem}
.num-item .num{
  font-size:clamp(1.9rem,3.2vw,2.6rem); font-weight:800; color:var(--lime-bright);
  text-shadow:0 0 22px hsl(71 85% 55% / .3); line-height:1.2;
}
.num-label{font-size:.9rem; color:hsl(180 25% 92% / .85); line-height:1.7; max-width:21ch}
.num-label small{display:block; color:hsl(180 20% 80% / .65); font-size:.78rem}
.numbers-statement{
  margin:clamp(2rem,4vw,2.9rem) auto 0; max-width:74ch; text-align:center;
  font-size:clamp(1rem,1.5vw,1.18rem); line-height:1.95;
  color:hsl(180 25% 92% / .92); padding-top:clamp(1.6rem,3vw,2rem);
  border-top:1px solid hsl(185 60% 40% / .25);
}
.numbers-statement::before{
  content:""; display:block; width:46px; height:3px; margin:0 auto 1.15rem;
  background:var(--lime-bright); border-radius:2px;
  box-shadow:0 0 18px hsl(71 85% 55% / .35);
}

/* ----------------------------- من نحن ----------------------------- */
.about{background:#fff}
.about-lead{
  background:linear-gradient(135deg, var(--mint) 0%, var(--lime-soft) 100%);
  border:1px solid var(--mint-2);
  border-radius:var(--radius-lg); padding:clamp(1.4rem,3vw,2.2rem);
  margin-bottom:clamp(1.6rem,3vw,2.4rem);
}
.about-meaning{color:var(--teal-deep); font-size:1.25rem; margin-bottom:.4em}
.about-lead p{margin:0; font-size:1.08rem}

.about-grid{
  display:grid; grid-template-columns:1.6fr 1fr;
  gap:1.4rem; align-items:start; margin-bottom:1.6rem;
}
.about-card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:clamp(1.3rem,2.6vw,1.9rem);
  box-shadow:var(--shadow-sm);
}
.about-card h3{color:var(--teal-deep); font-size:1.2rem}
.about-card p:last-child{margin-bottom:0}
.about-side{display:grid; gap:1.4rem}
.about-card.mini h3{font-size:1.1rem}
.about-card.vision{
  background:linear-gradient(160deg, var(--petrol) 0%, var(--petrol-2) 100%);
  border-color:transparent; color:hsl(180 25% 92% / .92);
}
.about-card.vision h3{color:var(--lime-bright)}

.mission{margin-bottom:1.6rem}
.mission h3,.values h3{font-size:1.25rem; color:var(--teal-deep)}
.mission-list{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem 1.6rem;
}
.mission-list li{
  position:relative; padding-inline-start:1.55rem;
  background:var(--mint); border:1px solid var(--mint-2);
  border-radius:var(--radius); padding:.75rem 2.4rem .75rem 1rem;
}
.mission-list li::before{
  content:""; position:absolute; inset-inline-start:1rem; top:1.45rem;
  width:9px; height:9px; border-radius:50%;
  background:var(--lime); box-shadow:0 0 0 3px hsl(71 78% 43% / .22);
}

.values-grid{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;
}
.values-grid li{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.1rem 1.2rem;
  box-shadow:var(--shadow-sm);
  border-top:3px solid var(--teal);
  transition:transform .2s, box-shadow .2s;
}
.values-grid li:nth-child(even){border-top-color:var(--lime)}
.values-grid li:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.values-grid strong{display:block; color:var(--ink); font-size:1.05rem; margin-bottom:.2rem}
.values-grid span{font-size:.94rem; color:var(--muted); line-height:1.8}

.about-closing{
  margin:1.8rem 0 0; padding:1.2rem 1.5rem;
  border-inline-start:4px solid var(--lime);
  background:var(--mint); border-radius:0 var(--radius) var(--radius) 0;
  font-size:1.06rem; color:var(--ink);
}
[dir="rtl"] .about-closing{border-radius:var(--radius) 0 0 var(--radius)}

/* ----------------------------- البرامج ----------------------------- */
.programs{background:linear-gradient(180deg, #fff 0%, var(--mint) 18%, var(--mint) 100%)}
.prog-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; align-items:start}
.prog{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  overflow:hidden; transition:box-shadow .25s, border-color .25s;
}
.prog.is-open{box-shadow:var(--shadow-md); border-color:hsl(185 60% 70%)}
.prog-wide{grid-column:1 / -1}

.prog-head{
  display:flex; align-items:center; gap:1rem; width:100%;
  padding:clamp(1.1rem,2.4vw,1.45rem) clamp(1.1rem,2.4vw,1.5rem);
  background:none; border:0; text-align:start; color:inherit;
}
.prog-num{
  font-family:var(--font-en); font-weight:700; font-size:.82rem;
  color:var(--teal-strong); letter-spacing:.12em;
  writing-mode:vertical-rl; transform:rotate(180deg);
  border-inline-end:2px solid var(--mint-2); padding-inline-end:.7rem;
  align-self:stretch; display:flex; align-items:center;
}
.prog-icon{
  flex:none; width:52px; height:52px; border-radius:14px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, hsl(185 76% 43% / .12), hsl(71 78% 43% / .18));
  color:var(--teal-strong);
}
.prog-icon svg{width:27px; height:27px}
.prog-title{flex:1; min-width:0}
.prog-title h3{font-size:1.12rem; margin:0 0 .15rem; line-height:1.6}
.prog-title p{margin:0; font-size:.92rem; color:var(--muted); line-height:1.75}
.chev{
  flex:none; color:var(--teal-strong);
  transition:transform .3s; display:grid; place-items:center;
  width:36px; height:36px; border-radius:50%; background:var(--mint);
}
.prog.is-open .chev{transform:rotate(180deg); background:var(--lime-soft); color:var(--lime-deep)}
.prog-head:hover .chev{background:var(--mint-2)}

.prog-body{max-height:0; overflow:hidden; transition:max-height .45s ease}
.prog-body-inner{
  padding:0 clamp(1.1rem,2.4vw,1.5rem) clamp(1.2rem,2.4vw,1.6rem);
  border-top:1px dashed var(--line); padding-top:1.2rem;
  margin-inline:clamp(1.1rem,2.4vw,1.5rem); margin-bottom:0;
  padding-inline:0;
}
.prog-body-inner > :last-child{margin-bottom:0}
.prog-body-inner ul li{margin-bottom:.35rem}
.prog-body-inner ul li::marker{color:var(--lime)}

/* «فتيل المهرجان» — خط زمني عمودي بعقد سنوية */
.fuse{
  list-style:none; margin:1.4rem 0 0; padding:0;
  position:relative; padding-inline-start:0;
  display:grid; gap:1.3rem;
}
.fuse::before{
  content:""; position:absolute; inset-block:8px; inset-inline-start:34px;
  width:3px; border-radius:99px;
  background:linear-gradient(to bottom, var(--teal), var(--lime));
}
.fuse-item{position:relative; display:flex; gap:1.2rem; align-items:flex-start}
.fuse-year{
  position:relative; z-index:1; flex:none;
  width:70px; height:70px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-en); font-weight:700; font-size:1rem;
  background:#fff; color:var(--teal-deep);
  border:3px solid var(--teal);
  box-shadow:0 0 0 5px hsl(185 76% 43% / .12);
}
.fuse-item:last-child .fuse-year{
  border-color:var(--lime); color:var(--lime-deep);
  box-shadow:0 0 0 5px hsl(71 78% 43% / .18), 0 0 18px hsl(71 85% 55% / .4);
}
.fuse-card{
  flex:1; background:var(--mint); border:1px solid var(--mint-2);
  border-radius:var(--radius); padding:1.05rem 1.25rem;
}
.fuse-card h4{font-size:1.04rem; color:var(--teal-deep); margin-bottom:.35rem}
.fuse-card p{margin-bottom:.5rem; font-size:.98rem}
.fuse-card p:last-child{margin-bottom:0}

.ig-link{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:700; font-size:.92rem; color:var(--teal-strong);
  border-bottom:2px solid hsl(185 76% 43% / .3);
  padding-bottom:.1rem; transition:border-color .2s, color .2s;
}
.ig-link:hover{color:var(--teal); border-color:var(--teal)}
.ig-link svg{flex:none}

/* التغطية الصحفية */
.press{margin-top:1.4rem}
.press h4{font-size:1rem; color:var(--ink); margin-bottom:.6rem}
.press-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.55rem;
}
.press-list a{
  display:inline-block; padding:.4rem 1rem; border-radius:999px;
  background:#fff; border:1px solid var(--line);
  font-size:.88rem; font-weight:500; color:var(--body);
  transition:border-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.press-list a:hover{
  border-color:var(--teal); color:var(--teal-strong);
  transform:translateY(-2px); box-shadow:var(--shadow-sm);
}

/* ----------------------------- الأثر ----------------------------- */
.impact{
  background:
    radial-gradient(900px 420px at 88% -10%, hsl(185 60% 30% / .38), transparent 62%),
    radial-gradient(700px 380px at 0% 110%, hsl(71 70% 38% / .16), transparent 60%),
    linear-gradient(165deg, var(--petrol) 0%, var(--petrol-2) 100%);
  color:hsl(180 25% 92%);
}
.impact .section-head h2{color:#fff}
.impact .kicker{color:var(--lime-bright)}
.impact-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr));
  gap:1rem;
}
.impact-card{
  background:hsl(0 0% 100% / .055);
  border:1px solid hsl(185 50% 60% / .22);
  border-radius:var(--radius); padding:1.3rem 1.2rem 1.15rem;
  display:flex; flex-direction:column; gap:.25rem;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  transition:transform .2s, border-color .2s, background .2s;
}
.impact-card:hover{transform:translateY(-4px); border-color:hsl(71 78% 50% / .55); background:hsl(0 0% 100% / .08)}
.impact-card .num{font-size:2.2rem; font-weight:800; color:var(--lime-bright); line-height:1.2}
.impact-card strong{color:#fff; font-weight:700; font-size:.97rem; line-height:1.7}
.impact-card small{color:hsl(180 20% 80% / .65); font-size:.8rem}

/* ----------------------------- الشركاء ----------------------------- */
.partners{background:#fff}
.partners-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr));
  gap:1.1rem;
}
.partner-card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:1.5rem 1.4rem 1.3rem;
  box-shadow:var(--shadow-sm);
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.partner-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:hsl(185 60% 75%)}
.partner-icon{
  display:grid; place-items:center; width:56px; height:56px;
  border-radius:16px; margin-bottom:.9rem;
  background:linear-gradient(135deg, hsl(185 76% 43% / .12), hsl(71 78% 43% / .2));
  color:var(--teal-strong);
}
.partner-icon svg{width:30px; height:30px}
.partner-card h3{font-size:1.08rem; margin-bottom:.3rem}
.partner-card p{margin:0; font-size:.95rem; color:var(--muted); line-height:1.85}

/* ----------------------------- معرض الصور ----------------------------- */
.gallery{background:linear-gradient(180deg, #fff 0%, var(--mint) 22%, var(--mint) 100%)}
.gallery-pills{display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:1.4rem}
.g-pill{
  padding:.5rem 1.2rem; border-radius:999px;
  border:1.5px solid var(--line); background:#fff;
  font-weight:700; font-size:.93rem; color:var(--body);
  transition:background .2s, color .2s, border-color .2s, transform .2s;
}
.g-pill:hover{border-color:var(--teal); color:var(--teal-strong); transform:translateY(-1px)}
.g-pill.is-active{background:var(--teal); border-color:var(--teal); color:#fff}

.gallery-grid{
  column-width:240px; column-gap:.85rem;
}
.g-item{
  position:relative; display:block; width:100%;
  padding:0; border:0; overflow:hidden;
  margin:0 0 .85rem; break-inside:avoid;
  border-radius:var(--radius); background:var(--mint-2);
  box-shadow:var(--shadow-sm);
}
.g-item img{
  width:100%; height:auto; display:block;
  transition:transform .45s ease;
}
.g-item::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, hsl(192 58% 12% / .42), transparent 45%);
  opacity:0; transition:opacity .3s;
}
.g-item:hover img,.g-item:focus-visible img{transform:scale(1.06)}
.g-item:hover::after,.g-item:focus-visible::after{opacity:1}

/* ----------------------------- انضم إلينا ----------------------------- */
.join{background:#fff}
.join-band{
  position:relative; overflow:hidden;
  background:
    radial-gradient(700px 320px at 90% -30%, hsl(71 70% 40% / .25), transparent 60%),
    radial-gradient(800px 400px at -10% 130%, hsl(185 60% 32% / .45), transparent 60%),
    linear-gradient(150deg, var(--petrol) 0%, var(--petrol-2) 100%);
  color:hsl(180 25% 92% / .92);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  padding:clamp(2rem,5vw,3.2rem);
  text-align:center; margin-bottom:clamp(2rem,4vw,3rem);
}
.join-band h2{
  color:#fff; font-size:clamp(1.7rem,3.6vw,2.5rem); margin-bottom:.4em;
}
.join-band h2::after{
  content:""; display:block; width:96px; height:3px; border-radius:99px;
  margin:.55rem auto 0;
  background:linear-gradient(to left, var(--teal), var(--lime-bright));
}
.join-band > p{max-width:62ch; margin-inline:auto; margin-bottom:1.6rem}
.join-cta{display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center}

.contact-wrap{max-width:760px; margin-inline:auto}
.contact-form{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
  padding:clamp(1.5rem,3.5vw,2.4rem);
}
.contact-form h3{font-size:1.35rem; color:var(--teal-deep); margin-bottom:.2em}
.form-hint{font-size:.95rem; color:var(--muted); margin-bottom:1.4rem}
.form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem 1.1rem; margin-bottom:1.2rem}
.form-grid label{
  display:flex; flex-direction:column; gap:.35rem;
  font-weight:700; font-size:.93rem; color:var(--ink);
}
.span-2{grid-column:1 / -1}
.form-grid input,.form-grid select,.form-grid textarea{
  font-family:inherit; font-size:1rem; color:var(--ink);
  padding:.75rem 1rem; border-radius:12px;
  border:1.5px solid var(--line); background:#fff;
  transition:border-color .2s, box-shadow .2s;
  width:100%;
}
.form-grid textarea{resize:vertical; min-height:130px; line-height:1.9}
.form-grid input::placeholder,.form-grid textarea::placeholder{color:hsl(200 8% 62%); font-weight:400}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{
  outline:none; border-color:var(--teal);
  box-shadow:0 0 0 4px hsl(185 76% 43% / .15);
}
.form-grid select{appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%232a7f8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left .9rem center; background-size:18px;
  padding-inline-start:1rem; padding-inline-end:2.4rem;
}
.form-grid select.flash{border-color:var(--lime); box-shadow:0 0 0 4px hsl(71 78% 43% / .3)}
.hp{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; padding:0; margin:-1px}
.form-status{margin:1rem 0 0; font-weight:700; font-size:.97rem; min-height:1.5em}
.form-status.ok{color:hsl(160 70% 30%)}
.form-status.err{color:hsl(0 70% 45%)}

/* ----------------------------- التذييل ----------------------------- */
.site-footer{background:var(--petrol-3); color:hsl(180 20% 82% / .85)}
.footer-grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr;
  gap:2.2rem; padding-block:clamp(2.6rem,5vw,3.6rem);
}
.footer-brand img{width:52px; margin-bottom:.9rem}
.footer-brand p{font-size:.95rem; line-height:1.95; max-width:42ch}
.footer-tagline{
  font-family:var(--font-en); font-size:.78rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--lime-bright) !important; margin-top:.4rem;
}
.site-footer h3{color:#fff; font-size:1.02rem; margin-bottom:.8rem}
.footer-links{display:flex; flex-direction:column; gap:.45rem}
.footer-links a{color:hsl(180 20% 82% / .85); font-size:.95rem}
.footer-links a:hover{color:var(--lime-bright)}
.footer-contact p{font-size:.92rem; margin-top:.6rem}
.footer-mail{
  display:inline-block; font-family:var(--font-en); font-weight:600;
  color:#fff; border-bottom:2px solid hsl(71 78% 43% / .5);
  padding-bottom:.15rem;
}
.footer-mail:hover{color:var(--lime-bright); border-color:var(--lime-bright)}
.footer-mails{display:flex; flex-direction:column; align-items:flex-start; gap:.5rem}
.footer-bottom{
  border-top:1px solid hsl(185 40% 40% / .2);
  padding-block:1.1rem; font-size:.85rem; color:hsl(180 15% 70% / .7);
}
.footer-bottom p{margin:0}
.sep{margin-inline:.5rem; opacity:.5}

/* ----------------------------- نافذة «قصتنا» ----------------------------- */
.modal{position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:1rem}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute; inset:0; background:hsl(192 58% 8% / .8); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.modal-card{
  position:relative; z-index:1; width:min(820px, 100%);
  background:#fff; border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:clamp(1.4rem,3.5vw,2.2rem);
  max-height:92svh; overflow:auto;
  animation:modal-in .3s ease;
}
@keyframes modal-in{from{opacity:0; transform:translateY(18px) scale(.98)} to{opacity:1; transform:none}}
.modal-close{
  position:absolute; top:1rem; inset-inline-end:1rem;
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--mint); border:0; color:var(--ink);
  transition:background .2s, transform .2s;
}
.modal-close:hover{background:var(--mint-2); transform:rotate(90deg)}
.modal-card h2{font-size:1.4rem; padding-inline-end:3rem}
.modal-desc{font-size:.97rem; color:var(--muted); margin-bottom:1.2rem}
.modal-tabs{display:flex; gap:.6rem; margin-bottom:1rem}
.modal-tab{
  padding:.55rem 1.4rem; border-radius:999px;
  border:1.5px solid var(--line); background:#fff;
  font-weight:700; font-size:.95rem; color:var(--body);
  transition:background .2s, color .2s, border-color .2s;
}
.modal-tab:hover{border-color:var(--teal); color:var(--teal-strong)}
.modal-tab.is-active{background:var(--teal); border-color:var(--teal); color:#fff}
.video-frame{
  position:relative; aspect-ratio:16/9; border-radius:var(--radius);
  overflow:hidden; background:var(--petrol);
}
.video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* ----------------------------- Lightbox ----------------------------- */
.lightbox{position:fixed; inset:0; z-index:320; display:grid; place-items:center; padding:1rem}
.lightbox[hidden]{display:none}
.lightbox .modal-backdrop{background:hsl(192 58% 6% / .92)}
.lb-figure{
  position:relative; z-index:1; margin:0;
  max-width:min(1100px, 94vw); text-align:center;
  animation:modal-in .25s ease;
}
.lb-figure img{
  max-width:100%; max-height:80svh; width:auto; height:auto;
  margin-inline:auto; border-radius:var(--radius);
  box-shadow:var(--shadow-lg); background:var(--petrol-2);
}
.lb-figure figcaption{
  margin-top:.8rem; color:hsl(180 20% 88% / .85); font-size:.93rem;
}
.lb-close{
  position:fixed; z-index:2; top:1.1rem; inset-inline-end:1.1rem;
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; border:0;
  background:hsl(0 0% 100% / .12); color:#fff;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background .2s;
}
.lb-close:hover{background:hsl(0 0% 100% / .25)}
.lb-nav{
  position:fixed; z-index:2; top:50%; transform:translateY(-50%);
  width:50px; height:50px; border-radius:50%;
  display:grid; place-items:center; border:0;
  background:hsl(0 0% 100% / .12); color:#fff;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background .2s;
}
.lb-nav:hover{background:hsl(0 0% 100% / .25)}
.lb-prev{inset-inline-start:1rem}
.lb-next{inset-inline-end:1rem}

/* ----------------------------- حركة الظهور ----------------------------- */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}

/* ----------------------------- تقليل الحركة ----------------------------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .reveal{opacity:1; transform:none}
  .hero-scroll{animation:none}
  .ember-line::after{animation:none}
}

/* ----------------------------- الاستجابة ----------------------------- */
@media (max-width:1020px){
  .numbers-grid{grid-template-columns:repeat(3,1fr)}
  .about-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr; gap:1.8rem}
}

@media (max-width:880px){
  :root{--header-h:68px}
  .nav-toggle{display:flex}
  .main-nav{
    position:fixed; inset-inline:0; top:var(--header-h);
    flex-direction:column; align-items:stretch; gap:.15rem;
    background:hsl(0 0% 100% / .98);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    padding:1rem clamp(1rem,4vw,1.5rem) 1.4rem;
    border-bottom:1px solid var(--line); box-shadow:var(--shadow-md);
    transform:translateY(-12px); opacity:0; visibility:hidden; pointer-events:none;
    transition:transform .3s, opacity .3s, visibility .3s;
    max-height:calc(100svh - var(--header-h)); overflow:auto;
  }
  .main-nav.is-open{transform:none; opacity:1; visibility:visible; pointer-events:auto}
  .nav-link{padding:.8rem 1rem; font-size:1.05rem; border-radius:12px}
  .nav-link.is-active{background:var(--mint)}
  .nav-link::after{display:none}
  .nav-cta{margin-inline-start:0; margin-top:.5rem; text-align:center; justify-content:center; display:flex}
  .prog-grid{grid-template-columns:1fr}
  .prog-wide{grid-column:auto}
  .values-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:640px){
  body{font-size:1rem}
  .numbers-grid{grid-template-columns:repeat(2,1fr); gap:1.3rem .8rem}
  .mission-list{grid-template-columns:1fr}
  .values-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .fuse::before{inset-inline-start:26px}
  .fuse-year{width:54px; height:54px; font-size:.88rem}
  .fuse-item{gap:.9rem}
  .hero-cta .btn{flex:1 1 auto; justify-content:center}
  .impact-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{column-count:2; column-width:auto; column-gap:.6rem}
  .lb-nav{width:42px; height:42px}
  .prog-num{display:none}
}

@media (max-width:380px){
  .impact-grid{grid-template-columns:1fr}
  .gallery-grid{column-count:1}
  .brand-text small{display:none}
}

/* ---------- زر اللغة + وضع الإنجليزية ---------- */
.lang-toggle{
  flex:none; margin-inline-start:.15rem;
  padding:.4rem .85rem; border-radius:999px;
  border:1.5px solid var(--line); background:#fff;
  font-family:var(--font-en); font-weight:700; font-size:.82rem;
  color:var(--teal-strong); letter-spacing:.03em; line-height:1.4;
  transition:background .2s, color .2s, border-color .2s;
}
.lang-toggle:hover{border-color:var(--teal); background:var(--mint); color:var(--teal-strong)}
html[lang="en"] body{font-family:var(--font-en); line-height:1.7; font-size:1.02rem}
html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3,html[lang="en"] h4{font-family:var(--font-en); line-height:1.3}
html[lang="en"] .hero-title{line-height:1.25}
html[lang="en"] .kicker,html[lang="en"] .hero-tagline,html[lang="en"] .footer-tagline{letter-spacing:.14em}