
:root{
  --bg: #F7FAF9;
  --surface: rgba(255,255,255,.78);
  --card: #FFFFFF;
  --text: #0B1F1A;
  --muted: rgba(11,31,26,.62);
  --border: rgba(9,40,24,.10);

  --g-900:#083E34;
  --g-800:#0A4B3F;
  --g-700:#0E6B57;
  --g-600:#138366;
  --g-500:#20A777;
  --mint:#7EE6C5;
  --gold:#C8A24D;

  --shadow: 0 18px 46px rgba(5,48,31,.12);
  --shadow2: 0 24px 56px rgba(5,48,31,.16);

  --r-xl: 28px;
  --r-lg: 22px;
  --r-md: 16px;

  --max: 1280px;
  --ease: cubic-bezier(.2,.8,.2,1);

  --ring: 0 0 0 4px rgba(32,167,119,.18);
}

*,
*::before,
*::after{ box-sizing:border-box; }

html,body{ height:100%; max-width:100%; overflow-x:clip; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}
html[dir="rtl"] body{
  font-family: Cairo, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.container{
  width:100%;
  max-width: var(--max);
  margin:0 auto;
  padding-inline: 18px;
}

/* ===== Buttons / Chips ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:44px;
  padding-inline: 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  color: var(--text);
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), background 220ms var(--ease), border-color 220ms var(--ease);
  box-shadow: 0 12px 26px rgba(5,48,31,.07);
}
.btn:focus-visible{ outline:none; box-shadow: var(--shadow), var(--ring); }
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }

.btn--sm{ height:40px; padding-inline: 14px; border-radius: 14px; font-size: 13px; }

.btn--ghost{
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(12px);
}

.btn--primary{
  color: #fff;
  border-color: rgba(14,107,87,.22);
  background: linear-gradient(135deg, rgba(14,107,87,.95), rgba(32,167,119,.92));
  box-shadow: 0 18px 34px rgba(14,107,87,.18);
}
.btn--primary:hover{ box-shadow: 0 26px 46px rgba(14,107,87,.22); }
.btn__icon{ opacity:.9; }

.btn--whatsapp{
  border-color: rgba(32,167,119,.22);
  background: linear-gradient(135deg, rgba(32,167,119,.12), rgba(255,255,255,.86));
}
.wa{ filter: drop-shadow(0 10px 18px rgba(32,167,119,.20)); }

.chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(32,167,119,.10);
  border: 1px solid rgba(32,167,119,.18);
  font-weight: 900;
  color: var(--g-800);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.chip:hover{ transform: translateY(-1px); box-shadow: 0 14px 26px rgba(5,48,31,.10); }

/* ===== NAV ===== */
.nav{
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(14px);
  background: rgba(255,255,255,.72);
  border-bottom: 1px solid rgba(9,40,24,.08);
}
.nav__inner{
  height: 66px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}
.nav__links{
  display:flex;
  align-items:center;
  gap: 22px;
}
.nav__link{
  position: relative;
  font-weight: 800;
  font-size: 14px;
  color: rgba(11,31,26,.74);
  transition: color 180ms var(--ease);
}
.nav__link:hover{ color: rgba(11,31,26,1); }
.nav__link.is-active::after{
  content:"";
  position:absolute;
  inset-inline: 0;
  bottom: -14px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--g-600), var(--mint));
}

.nav__actions{ display:flex; gap: 10px; align-items:center; }

.nav__burger{
  display:none;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.78);
  font-weight: 900;
  font-size: 18px;
  cursor: pointer;
}

.mobile{
  display:none;
  border-top: 1px solid rgba(9,40,24,.08);
}
.mobile.is-open{ display:block; }
.mobile__inner{
  padding: 14px 18px 18px;
  display:grid;
  gap: 10px;
}
.mobile__link{
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(9,40,24,.08);
  font-weight: 900;
}
.mobile__link.is-active{
  border-color: rgba(32,167,119,.18);
  box-shadow: 0 16px 32px rgba(5,48,31,.10);
}

/* Language */
.lang{ position: relative; }
.lang__btn{ cursor: pointer; }
.lang__menu{
  position:absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  width: 180px;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid rgba(9,40,24,.10);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events:none;
  transform: translateY(8px);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
}
.lang.is-open .lang__menu{
  opacity: 1;
  pointer-events:auto;
  transform: translateY(0);
}
.lang__item{
  width:100%;
  border:0;
  background: transparent;
  text-align: start;
  padding: 12px 12px;
  border-radius: 14px;
  font-weight: 900;
  cursor: pointer;
  transition: background 160ms var(--ease);
}
.lang__item:hover{ background: rgba(32,167,119,.10); }
.lang__item.is-active{ background: rgba(32,167,119,.14); }
.chev{ opacity: .75; }

/* Mobile language group */
.mobile__group{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(9,40,24,.08);
}
.mobile__label{
  font-weight: 1000;
  font-size: 12px;
  color: rgba(11,31,26,.62);
  margin-bottom: 10px;
}
.mobile__langs{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.mobile__lang{
  width: 100%;
  height: 42px;
  border-radius: 16px;
  border: 1px solid rgba(9,40,24,.10);
  background: rgba(255,255,255,.78);
  font-weight: 1000;
  cursor:pointer;
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms var(--ease);
}
.mobile__lang:hover{ transform: translateY(-1px); box-shadow: 0 14px 26px rgba(5,48,31,.10); }
.mobile__lang.is-active{
  border-color: rgba(32,167,119,.22);
  background: linear-gradient(135deg, rgba(32,167,119,.12), rgba(255,255,255,.88));
}

/* ===== HERO ===== */
.hero--full{
  position: relative;
  min-height: calc(100vh - 66px);
  padding: 0;
  overflow:hidden;
  border-bottom: 1px solid rgba(9,40,24,.08);
}
.hero__bg--slider{ position:absolute; inset:0; z-index:0; }
.hero__overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 20% 30%, rgba(32,167,119,.18), transparent 60%),
    radial-gradient(900px 520px at 80% 25%, rgba(126,230,197,.18), transparent 60%),
    linear-gradient(90deg, rgba(247,250,249,.92) 0%,
                          rgba(247,250,249,.74) 38%,
                          rgba(247,250,249,.35) 62%,
                          rgba(247,250,249,.08) 100%);
}

.hero__inner--full{
  position: relative;
  z-index: 2;
  min-height: calc(100vh - 66px);
  display:flex;
  align-items:center;
}
.hero__copy--onbg{
  max-width: 640px;
  padding-block: 48px;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(32,167,119,.20);
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 26px rgba(5,48,31,.08);
  font-weight: 900;
  color: rgba(11,31,26,.78);
}
.pill__dot{
  width:10px;height:10px;border-radius:999px;
  background: linear-gradient(135deg, var(--g-600), var(--mint));
}
.hero__title{
  margin: 16px 0 0;
  font-size: clamp(38px, 5vw, 62px);
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-shadow: 0 12px 34px rgba(5,48,31,.10);
}
.hero__sub{
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(11,31,26,.70);
  max-width: 60ch;
}
.hero__actions{
  margin-top: 18px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hero__stats{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.stat{
  border-radius: 18px;
  border: 1px solid rgba(9,40,24,.10);
  background: rgba(255,255,255,.68);
  backdrop-filter: blur(12px);
  padding: 12px 12px;
  box-shadow: 0 14px 30px rgba(5,48,31,.07);
}
.stat__k{ font-weight: 1000; font-size: 12px; color: rgba(11,31,26,.62); }
.stat__v{ margin-top: 6px; font-weight: 1000; font-size: 14px; color: rgba(11,31,26,.92); }

/* Hero text swap */
.hero__title--swap, .hero__sub--swap{
  transition: opacity 260ms var(--ease), transform 260ms var(--ease), filter 260ms var(--ease);
}
.swap-out{ opacity:0; transform: translateY(10px); filter: blur(8px); }
.swap-in{ opacity:1; transform: translateY(0); filter: blur(0); }

/* ===== Slider (Full background) ===== */
.slider--bg{
  position:absolute;
  inset:0;
  border:0;
  border-radius:0;
  padding:0;
  background: transparent;
  box-shadow:none;
  overflow:hidden;
}
.slider--bg .slider__track{ height: 100%; position:relative; }

.slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform: translateX(18px) scale(.99);
  filter: blur(10px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease), filter 520ms var(--ease);
}
.slide.is-active{ opacity:1; transform: translateX(0) scale(1); filter: blur(0); }
.slide.is-exit-left{ opacity:0; transform: translateX(-18px) scale(.99); filter: blur(12px); }
.slide.is-exit-right{ opacity:0; transform: translateX(18px) scale(.99); filter: blur(12px); }

.slide__media{
  position:absolute;
  inset:0;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  animation: kenburns 10s ease-in-out infinite;
  filter: saturate(1.03) contrast(1.05);
}
@keyframes kenburns{
  0%,100%{ transform: scale(1.05) translateX(0); }
  50%{ transform: scale(1.11) translateX(-1.2%); }
}

/* Slider arrows (Premium) */
.slider__arrow{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 18px;
  border: 1px solid rgba(9,40,24,.14);
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 34px rgba(5,48,31,.14);
  cursor:pointer;
  display:grid;
  place-items:center;
  z-index: 5;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), background 180ms var(--ease);
}
.slider__arrow:hover{
  transform: translateY(-50%) scale(1.03);
  box-shadow: 0 26px 46px rgba(5,48,31,.18);
  background: rgba(255,255,255,.90);
}
.slider__arrow:focus-visible{ outline:none; box-shadow: var(--shadow2), var(--ring); }
.slider__arrow--prev{ left: 18px; }
.slider__arrow--next{ right: 18px; }
html[dir="rtl"] .slider__arrow--prev{ left:auto; right:18px; }
html[dir="rtl"] .slider__arrow--next{ right:auto; left:18px; }

.slider__arrow svg{ width: 18px; height: 18px; }
html[dir="rtl"] .slider__arrow svg{ transform: scaleX(-1); }

/* Slider dots = progress pills */
.slider__dots{
  position:absolute;
  left:0; right:0;
  bottom: 18px;
  z-index: 6;
  display:flex;
  justify-content:center;
  gap: 10px;
  padding: 0;
}
.dot{
  width: 42px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(9,40,24,.18);
  background: rgba(255,255,255,.70);
  box-shadow: 0 10px 18px rgba(5,48,31,.12);
  cursor:pointer;
  position: relative;
  overflow:hidden;
  transition: transform 180ms var(--ease), border-color 180ms var(--ease);
}
.dot:hover{ transform: translateY(-1px); }
.dot::after{
  content:"";
  position:absolute;
  inset:0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, var(--g-600), var(--mint));
}
.dot.is-active{
  border-color: rgba(32,167,119,.22);
}
.dot.is-active::after{
  transform: translateX(0);
  transition: transform 6500ms linear;
}

/* ===== Sections ===== */
.section{ padding: 64px 0 80px; }
.section__head{
  display:flex;
  justify-content:space-between;
  gap: 18px;
  align-items:flex-end;
}
.h2{
  margin:0;
  font-size: 30px;
  letter-spacing: -0.02em;
}
.h2 .w{
  display:inline-block;
  opacity:0;
  transform: translateY(16px);
  filter: blur(10px);
  animation:none;
}
.p{
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.75;
  max-width: 74ch;
}

/* ===== Badges ===== */
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 1000;
  font-size: 11px;
  letter-spacing: .02em;
  color: rgba(5,48,31,.85);
  background: rgba(32,167,119,.12);
  border: 1px solid rgba(32,167,119,.18);
}
.badge--new{
  background: rgba(126,230,197,.18);
  border-color: rgba(126,230,197,.25);
}

/* ===== Zigzag products ===== */
.section--zigzag{ padding-top: 46px; }
.zig{
  margin-top: 22px;
  display:grid;
  gap: 18px;
}
.zig__row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
  position: relative;
}
.zig__row--rev{ direction: rtl; }
html[dir="rtl"] .zig__row--rev{ direction: ltr; } /* keeps alternating visual */
.zig__row--rev > *{ direction: ltr; }
html[dir="rtl"] .zig__row--rev > *{ direction: rtl; }

.zig__media,
.zig__card{
  border-radius: var(--r-xl);
  border: 1px solid rgba(9,40,24,.10);
  background: rgba(255,255,255,.74);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  overflow:hidden;
  position: relative;
}

.zig__media::before,
.zig__card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 260px at 18% 10%, rgba(32,167,119,.14), transparent 60%),
    radial-gradient(520px 260px at 92% 24%, rgba(126,230,197,.16), transparent 60%);
  opacity: .9;
  pointer-events:none;
}
.zig__media > *,
.zig__card > *{ position:relative; z-index:1; }

.zig__frame{
  min-height: 300px;
  display:grid;
  place-items:center;
  padding: 18px;
  background:
    radial-gradient(620px 320px at 30% 20%, rgba(32,167,119,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.62));
}
.zig__frame img{
  width: min(420px, 86%);
  transform: translateY(10px);
  filter: drop-shadow(0 34px 46px rgba(5,48,31,.22));
}

.zig__card{ padding: 18px; }
.zig__top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
}
.zig__price{
  font-weight: 1000;
  color: rgba(11,31,26,.92);
}
.zig__price span{
  font-weight: 900;
  font-size: 12px;
  color: rgba(11,31,26,.60);
}
.zig__sku{
  margin-top: 10px;
  font-weight: 1000;
  font-size: 13px;
  color: rgba(11,31,26,.70);
}
.zig__title{
  margin: 10px 0 0;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.zig__desc{
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.8;
  font-size: 14px;
}
.zig__actions{
  margin-top: 14px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
html[dir="rtl"] .btn__icon{ transform: scaleX(-1); }

/* ===== Benefits ===== */
.benefits{ padding: 70px 0 40px; }
.benefits__inner{ max-width: 1240px; }
.benefits__grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr)); 
  gap: 38px 34px;
  align-items:start;
  justify-items:center;
  justify-content:center;
  text-align:center;
}
.benefit{
  width:100%;
  max-width: 260px;
  opacity:0;
  transform: translateY(18px);
  filter: blur(10px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease), filter 800ms var(--ease);
  transition-delay: var(--d, 0ms);
}
.benefit.in-view{ opacity:1; transform:none; filter:none; }
.benefit__icon{
  width: 92px;height: 92px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  margin: 0 auto 18px;
  color: rgba(10,75,63,.95);
  border: 4px solid rgba(14,107,87,.55);
  background: rgba(255,255,255,.35);
  box-shadow: 0 18px 44px rgba(5,48,31,.10), 0 0 0 10px rgba(32,167,119,.06);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.benefit__icon svg{ width:42px; height:42px; }
.benefit__t{ margin:0; font-size: 18px; font-weight: 1000; letter-spacing:-.01em; }
.benefit__p{ margin: 12px 0 0; color: rgba(11,31,26,.68); font-size: 15px; line-height: 1.75; }
.benefit:hover .benefit__icon{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 26px 60px rgba(5,48,31,.16), 0 0 0 12px rgba(32,167,119,.09);
}

/* ===== Gallery ===== */
.gallery{ padding: 46px 0 24px; }
.gallery__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.gallery__title{
  margin:0;
  font-size: clamp(28px, 3vw, 56px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: rgba(10,75,63,.95);
}
.gallery__cta{
  display:inline-flex;
  align-items:center;
  gap: 12px;
  font-weight: 1000;
  color: rgba(10,75,63,.92);
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(9,40,24,.10);
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 32px rgba(5,48,31,.08);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.gallery__cta:hover{ transform: translateY(-1px); box-shadow: 0 22px 46px rgba(5,48,31,.12); }
.gallery__ctaDot{
  width: 34px;height: 34px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(32,167,119,.12);
  border: 1px solid rgba(32,167,119,.18);
}
.gallery__rail{ overflow:hidden; width:100%; position:relative; padding: 10px 0 6px; }
.gallery__track{
  display:flex;
  align-items: stretch;
  gap: 18px;
  width: max-content;
  will-change: transform;

  /* default LTR */
  --from: -50%;
  --to: 0%;
  animation: marquee 34s linear infinite;
}

/* RTL: اعكس الاتجاه */
html[dir="rtl"] .gallery__track{
  --from: 0%;
  --to: -50%;
}

@keyframes marquee{
  from{ transform: translateX(var(--from)); }
  to{ transform: translateX(var(--to)); }
}

.gallery__rail:hover .gallery__track{ animation-play-state: paused; }
@keyframes marqueeRight{ from{ transform: translateX(-50%); } to{ transform: translateX(0%); } }

.gitem{ min-width: 320px; max-width: 320px; }
.gitem__media{
  height: 240px;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(9,40,24,.10);
  background: rgba(255,255,255,.55);
  box-shadow: 0 18px 44px rgba(5,48,31,.10);
  transform: translateY(0);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.gitem__media img{ width:100%; height:100%; object-fit: cover; display:block; }
.gitem:hover .gitem__media{ transform: translateY(-2px); box-shadow: 0 26px 60px rgba(5,48,31,.16); }

/* ===== Footer ===== */
.footer{
  border-top: 1px solid rgba(9,40,24,.08);
  background: rgba(32,167,119,.06);
  backdrop-filter: blur(14px);
}
.footer__grid{
  padding: 36px 0;
  display:grid;
  gap: 18px;
  grid-template-columns: 1.2fr 1fr 1fr;
}
.footer__h{ font-weight: 1000; margin-bottom: 10px; }
.footer__p{
  color: rgba(11,31,26,.68);
  line-height: 1.7;
  font-size: 14px;
}
.footer__p a{ color: var(--g-700); font-weight: 900; }
.footer__bottom{
  padding: 14px 0 20px;
  color: rgba(11,31,26,.55);
  font-weight: 800;
  font-size: 13px;
}

/* ===== FAB ===== */
.fab{
  position: fixed;
  inset-inline-end: 18px;
  bottom: 18px;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  font-size: 20px;
  background: linear-gradient(135deg, var(--g-700), var(--mint));
  color: #fff;
  box-shadow: 0 22px 40px rgba(32,167,119,.28);
  border: 1px solid rgba(255,255,255,.45);
  transition: transform 220ms var(--ease);
  z-index: 70;
}
.fab:hover{ transform: translateY(-2px); }

/* ===== Reveal ===== */
[data-reveal],
[data-inview],
[data-reveal-words]{
  opacity:0;
  transform: translateY(18px);
  filter: blur(10px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease), filter 700ms var(--ease);
  transition-delay: var(--d, 0ms);
}
.in-view{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
}
.in-view[data-reveal-words] .w,
[data-reveal-words].in-view .w{
  animation: wordUp 900ms var(--ease) forwards;
  animation-delay: var(--d);
}
@keyframes wordUp{
  from{ opacity:0; transform: translateY(18px); filter: blur(10px); }
  to{ opacity:1; transform:none; filter:none; }
}

/* ===== Products page head ===== */
.section--pageHead{ padding-top: 38px; }
.pageHead{
  border-radius: var(--r-xl);
  border: 1px solid rgba(9,40,24,.10);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  overflow:hidden;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 0;
  position:relative;
}
.pageHead::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(720px 320px at 12% 18%, rgba(32,167,119,.14), transparent 60%),
    radial-gradient(720px 320px at 92% 24%, rgba(126,230,197,.16), transparent 60%);
  pointer-events:none;
}
.pageHead > *{ position:relative; z-index:1; }
.pageHead__copy{ padding: 20px 20px 22px; }
.pageHead__title{ margin:0; font-size: clamp(30px, 3.2vw, 44px); letter-spacing: -0.03em; }
.pageHead__panel{
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(32,167,119,.18), transparent 60%),
    radial-gradient(700px 360px at 90% 20%, rgba(126,230,197,.18), transparent 60%),
    linear-gradient(135deg, rgba(10,75,63,.12), rgba(255,255,255,0));
  min-height: 220px;
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .hero__stats{ grid-template-columns: 1fr; }
  .benefits__grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .footer__grid{ grid-template-columns: 1fr; }
  .pageHead{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .container{ padding-inline: 16px; }
  .nav__links{ display:none; }
  .nav__burger{ display:inline-grid; place-items:center; }

  .hero__copy--onbg{ max-width: 92vw; padding-block: 34px; }
  .hero__overlay{
    background:
      radial-gradient(700px 420px at 18% 25%, rgba(32,167,119,.20), transparent 60%),
      linear-gradient(180deg, rgba(247,250,249,.92) 0%,
                            rgba(247,250,249,.62) 38%,
                            rgba(247,250,249,.18) 100%);
  }

  .slider__arrow{ width:46px; height:46px; border-radius: 16px; }
  .slider__arrow--prev{ left: 10px; }
  .slider__arrow--next{ right: 10px; }
  html[dir="rtl"] .slider__arrow--prev{ right: 10px; }
  html[dir="rtl"] .slider__arrow--next{ left: 10px; }

  .section__head{ flex-direction: column; align-items: flex-start; }
  .zig__row{ grid-template-columns: 1fr; }
  .zig__row--rev{ direction: ltr; } /* mobile = stacked */
  .zig__frame{ min-height: 260px; }
  .benefits{ padding: 44px 0 18px; }
  .benefits__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 26px 16px; }
  .benefit__icon{ width:82px; height:82px; }
  .benefit__t{ font-size: 16px; }
  .benefit__p{ font-size: 14px; }

  .gallery__head{ flex-direction: column; align-items: flex-start; }
  .gallery__track{ animation-duration: 26s; }
  .gitem{ min-width: 240px; max-width: 240px; }
  .gitem__media{ height: 180px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  [data-reveal],[data-inview],[data-reveal-words]{ opacity:1; transform:none; filter:none; }
  .slide{ opacity:1; transform:none; filter:none; }
  .dot.is-active::after{ transition:none; transform:none; }
}


/* ========= CONTACT PAGE (moved from inline) ========= */
.contactGrid{
  margin-top: 22px;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 22px;
  align-items: stretch;
}

@media (max-width: 980px){
  .contactGrid{ grid-template-columns: 1fr; }
}

.contactGrid svg{ display:block; }

.contactMap .media__frame{
  min-height: 420px;
  padding: 0 !important;
  overflow: hidden;
}

.contactMap iframe{
  width: 100%;
  height: 420px;
  border: 0;
  display: block;
}

/* helper class used in footer/contact */
.muted{
  color: var(--muted);
  font-weight: 800;
}
.brand img{
  width: 80px;   /* عدّل الرقم زي ما تحب */
  height: auto;
  display: block;
}
@media (max-width: 760px){
  .brand img{ width: 90px; }
}

/* Allow taps to reach slider (arrows) behind hero content */
.hero__inner--full{
  pointer-events: none;
}
.hero__copy--onbg,
.hero__copy--onbg *{
  pointer-events: auto;
}

@media (max-width: 760px){
  .slider__arrow{
    top: 810px;           /* فوق النص */
    transform: none;      /* بدل translateY(-50%) */
    z-index: 80;
  }
  .slider__arrow--prev{ left: 12px; }
  .slider__arrow--next{ right: 12px; }
  html[dir="rtl"] .slider__arrow--prev{ left:auto; right:12px; }
  html[dir="rtl"] .slider__arrow--next{ right:auto; left:12px; }
}
/* ===== Language visibility rules ===== */

/* Desktop/Laptop: show language in navbar */
.nav__actions .lang{
  display: inline-flex !important;
  align-items: center;
}

/* Mobile: hide navbar language + show language inside burger */
@media (max-width: 760px){
  .nav__actions .lang{
    display: none !important;
  }
  .mobile__group{
    display: block;
  }
}

/* Desktop: hide burger language group (optional safety) */
@media (min-width: 761px){
  .mobile__group{
    display: none;
  }
}



/* ===== Gallery marquee RTL/mobile fix ===== */
.gallery__rail{ direction: ltr; } /* مهم ضد RTL */

.gallery__track{
  width: fit-content;
  animation: marqueeRightPx var(--marqueeDur, 26s) linear infinite;
  will-change: transform;
}

.gitem{ flex: 0 0 auto; } /* امنع الانكماش */

@keyframes marqueeRightPx{
  from { transform: translate3d(calc(-1 * var(--marqueeW, 0px)), 0, 0); }
  to   { transform: translate3d(0px, 0, 0); }
}

@media (min-width: 761px){
  .gallery__track{ --marqueeDur: 34s; }
}
@media (max-width: 760px){
  .gallery__track{ --marqueeDur: 26s; }
}
