:root{
  --g-900:#163f28;--g-800:#1f5f3a;--g-700:#256d43;--g-100:#e3f1e6;--g-50:#f1f8f2;
  --sand:#f7f5ef;--ink:#1d2a22;--muted:#4a5a50;--line:#dfe7df;--white:#fff;
  --radius:16px;--shadow:0 2px 10px rgba(22,63,40,.08);
  --font:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,"Geeza Pro","Noto Sans Arabic",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--sand);line-height:1.7;font-size:1.0625rem;padding-bottom:84px}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{line-height:1.35;margin:0 0 .5em;color:var(--g-900)}
h1{font-size:clamp(1.75rem,6.5vw,2.75rem);font-weight:700}
h2{font-size:clamp(1.4rem,5vw,2rem);font-weight:700;text-align:center}
h3{font-size:1.1rem;font-weight:700}
p{margin:0 0 1em}
.wrap{width:100%;max-width:1100px;margin:0 auto;padding:0 20px}
.skip{position:absolute;inset-inline-start:-999px;top:0;background:var(--g-900);color:#fff;padding:8px 12px;z-index:100}
.skip:focus{inset-inline-start:8px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.7em 1.4em;border-radius:999px;background:var(--g-700);color:#fff;font-weight:700;text-decoration:none;font-size:1.05rem;box-shadow:var(--shadow);transition:background .15s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.btn:hover{background:var(--g-800)}
.btn:focus-visible,.sticky-wa:focus-visible,summary:focus-visible{outline:3px solid #f2b33d;outline-offset:3px}
.btn--lg{font-size:1.125rem;min-height:56px;width:100%;max-width:420px}
.btn--sm{min-height:40px;padding:.4em 1em;font-size:.95rem}
.wa-ico{width:1.3em;height:1.3em;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.4.1-.6.3-.2.2-.8.8-.8 2s.8 2.3.9 2.5c.1.2 1.6 2.5 4 3.5 1.5.6 2.1.7 2.8.6.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.2-1.2-.1-.1-.3-.2-.5-.3z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.4.1-.6.3-.2.2-.8.8-.8 2s.8 2.3.9 2.5c.1.2 1.6 2.5 4 3.5 1.5.6 2.1.7 2.8.6.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.2-1.2-.1-.1-.3-.2-.5-.3z'/%3E%3C/svg%3E") center/contain no-repeat}

/* top bar */
.topbar{position:sticky;top:0;z-index:20;background:rgba(247,245,239,.96);border-bottom:1px solid var(--line)}
.topbar__in{display:flex;align-items:center;justify-content:space-between;min-height:60px}
.logo{display:flex;align-items:center;gap:.5em;font-weight:700;color:var(--g-900);text-decoration:none;font-size:1.1rem}

/* hero: real photo behind the text, dark gradient keeps text readable */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--g-900);padding:32px 0 44px}
.hero__grid{display:grid;gap:24px;position:relative}
.hero__text{max-width:600px}
.hero h1{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.hero__sub{font-size:1.125rem;color:#eef5ef;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.price{background:#fff;border:1px solid var(--line);border-inline-start:5px solid var(--g-700);border-radius:var(--radius);padding:14px 16px;margin:0 0 20px;box-shadow:var(--shadow)}
.price__main{font-size:1.5rem;font-weight:700;color:var(--g-800);margin:0 0 .25em}
.price__note{font-size:.95rem;color:var(--muted);margin:0}
.hero__reply{font-size:.9rem;color:#eef5ef;margin:.6em 0 0;max-width:420px;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.hero__fig{position:absolute;inset:0;margin:0;z-index:-1}
.hero__fig img{width:100%;height:100%;object-fit:cover;object-position:68% 40%}
.hero__fig::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,35,22,.55) 0%,rgba(12,35,22,.74) 55%,rgba(12,35,22,.88) 100%)}
figcaption{position:absolute;z-index:1;bottom:10px;inset-inline-end:10px;background:rgba(22,63,40,.85);color:#fff;font-size:.8rem;padding:2px 10px;border-radius:999px}

/* sections */
.section{padding:48px 0}
main section[id]{scroll-margin-top:68px} /* sticky header (60px) offset for #hash links */
.section--tint{background:var(--g-50)}
.section__cta{text-align:center;margin-top:28px}
.cards{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px;grid-template-columns:1fr}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);display:flex;align-items:center;gap:14px}
.card h3{margin:0}
.card--photo{flex-direction:column;align-items:stretch;padding:0;overflow:hidden}
.card__fig{margin:0;position:relative}
.card__fig img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--g-100)}
.card--photo h3{padding:14px 18px 18px}
.card--plan{border-top:5px solid var(--g-700);flex-direction:column;align-items:flex-start;justify-content:center;min-height:110px}
.steps{list-style:none;margin:24px auto 0;padding:0;display:grid;gap:14px;max-width:720px}
.step{background:#fff;border-radius:var(--radius);padding:18px 20px;font-weight:700;font-size:1.1rem;border:1px solid var(--line);box-shadow:var(--shadow);color:var(--g-900)}
.areas__line{text-align:center;font-size:1.2rem;font-weight:700;color:var(--g-900);background:#fff;border:1px dashed #9cc4a8;border-radius:var(--radius);padding:18px;max-width:720px;margin:24px auto 0;word-spacing:.15em}
.faq{max-width:720px;margin:24px auto 0;display:grid;gap:10px}
details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:0 18px}
summary{cursor:pointer;font-weight:700;padding:14px 0;color:var(--g-900);list-style-position:inside}
details p{color:var(--muted);margin:0 0 14px}
.footer{background:var(--g-900);color:#e6efe8;text-align:center;padding:24px 0}
.footer p{margin:0}
.footer__meta{font-size:.9rem;margin-top:.4em!important}

/* sticky mobile WhatsApp */
.sticky-wa{position:fixed;inset-inline:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:30;display:flex;align-items:center;justify-content:center;gap:.5em;min-height:56px;border-radius:999px;background:#1a7a43;color:#fff;font-weight:700;font-size:1.05rem;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.2);-webkit-tap-highlight-color:transparent;touch-action:manipulation}

@media (min-width:640px){
  .cards{grid-template-columns:1fr 1fr}
}
@media (min-width:900px){
  body{padding-bottom:0}
  .sticky-wa{display:none}
  .hero{padding:72px 0 84px;min-height:560px}
  .hero__fig img{object-position:50% 45%}
  .hero__fig::after{background:linear-gradient(to left,rgba(12,35,22,.9) 0%,rgba(12,35,22,.74) 45%,rgba(12,35,22,.3) 100%)}
  .cards{grid-template-columns:repeat(4,1fr)}
  .cards--2{grid-template-columns:1fr 1fr;max-width:820px;margin-inline:auto}
  .card{flex-direction:column;align-items:flex-start;text-align:start}
  .card--photo{align-items:stretch}
  .section{padding:72px 0}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}