/* ═══════════════════════════════════════════════════════════════════
   Zahy Sector pages v3 — Salla-class layout (mobile-first, RTL-aware)
   Per-sector identity via CSS vars: each sector page injects its own
   --zs-a accent family; defaults below are the Zahy green.
   ═══════════════════════════════════════════════════════════════════ */
:root{--zs-heading:#023b59;--zs-body:#5b6675;
  --zs-a:#379024;--zs-a-rgb:55,144,36;--zs-a2:#76ca8c;--zs-ink:#1c7c31;
  --zs-tint:#e9fbee;--zs-line:#e8f1ea}

/* hero */
.zs-hero{position:relative;overflow:hidden;padding:clamp(60px,9vw,110px) 0 clamp(36px,6vw,70px);
  background:
    radial-gradient(640px 320px at 88% -5%,rgba(var(--zs-a-rgb),.18),transparent 70%),
    radial-gradient(520px 280px at 8% 12%,rgba(2,59,89,.07),transparent 70%),
    linear-gradient(180deg,rgba(var(--zs-a-rgb),.07),#fff)}
.zs-hero .container{display:flex;align-items:center;gap:clamp(28px,5vw,64px)}
.zs-hero-copy{flex:1;min-width:0}
.zs-hero-media{flex:0 0 42%;position:relative}
.zs-hero-media img{width:100%;height:auto;border-radius:24px;
  box-shadow:0 24px 60px rgba(2,59,89,.16);display:block}
.zs-hero-media::before{content:"";position:absolute;inset:auto -8% -10% 40%;height:64%;
  background:linear-gradient(135deg,rgba(var(--zs-a-rgb),.30),rgba(var(--zs-a-rgb),.12));
  border-radius:28px;z-index:-1;transform:rotate(-4deg)}
/* gentle attractive motion on the hero visual (reduced-motion aware) */
@media (prefers-reduced-motion:no-preference){
  .zs-hero-media img{animation:zsFloat 6s ease-in-out infinite}
  .zs-hero-media::before{animation:zsBlob 9s ease-in-out infinite}
  @keyframes zsFloat{0%,100%{transform:translateY(0) rotate(0)}
    50%{transform:translateY(-14px) rotate(-.6deg)}}
  @keyframes zsBlob{0%,100%{transform:rotate(-4deg) scale(1)}
    50%{transform:rotate(-1deg) scale(1.06)}}
  .zs-row-media img{transition:transform .5s ease}
  .zs-row:hover .zs-row-media img{transform:translateY(-6px)}
}
.zs-kicker{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:100px;
  background:var(--zs-tint);color:var(--zs-ink);font-size:14px;font-weight:800;margin-bottom:18px;
  border:1px solid rgba(var(--zs-a-rgb),.16)}
.zs-hero h1{font-size:clamp(30px,4.6vw,52px);font-weight:800;color:var(--zs-heading);
  line-height:1.45;margin-bottom:10px;letter-spacing:-.3px}
.zs-slogan{font-size:clamp(17px,2.4vw,22px);font-weight:700;margin-bottom:14px;
  background:linear-gradient(90deg,var(--zs-a),var(--zs-a2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  padding-bottom:.22em;margin-bottom:-.22em}
.zs-hero p.zs-lead{font-size:clamp(15.5px,2vw,18px);color:var(--zs-body);line-height:2;
  margin-bottom:26px;max-width:540px}
.zs-hero-ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
@media (max-width:991px){.zs-hero .container{flex-direction:column}
  .zs-hero-media{flex-basis:auto;width:min(480px,92%)}
  .zs-hero-copy{text-align:center}.zs-hero p.zs-lead{margin-inline:auto}
  .zs-hero-ctas{justify-content:center}}

/* trust strip: payment/compliance logos */
.zs-trust{background:#fff;border-block:1px solid var(--zs-line);padding:22px 0}
.zs-trust .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:18px 38px}
.zs-trust-label{font-size:14px;font-weight:700;color:var(--zs-body)}
.zs-trust img{height:26px;width:auto;opacity:.85;filter:grayscale(.15);transition:all .25s}
.zs-trust img:hover{opacity:1;filter:none;transform:translateY(-2px)}

/* zigzag feature rows; .zs-flip on the section inverts the rhythm so
   consecutive sectors don't scan identically */
.zs-row{display:flex;align-items:center;gap:clamp(28px,5vw,72px);
  padding:clamp(34px,5vw,56px) 0}
.zs-row:nth-child(even){flex-direction:row-reverse}
.zs-flip .zs-row:nth-child(even){flex-direction:row}
.zs-flip .zs-row:nth-child(odd){flex-direction:row-reverse}
.zs-row-media{flex:0 0 46%}
.zs-row-media img{width:100%;height:auto;border-radius:22px;
  box-shadow:0 16px 44px rgba(2,59,89,.12);display:block;
  border:1px solid var(--zs-line)}
.zs-row-copy{flex:1;min-width:0}
.zs-row-copy .zs-mini{display:inline-block;font-size:13px;font-weight:800;color:var(--zs-ink);
  background:var(--zs-tint);padding:6px 14px;border-radius:100px;margin-bottom:14px}
.zs-row-copy h2{font-size:clamp(22px,3.2vw,32px);font-weight:800;color:var(--zs-heading);
  line-height:1.5;margin-bottom:12px}
.zs-row-copy p{font-size:clamp(15px,2vw,17px);color:var(--zs-body);line-height:2;margin-bottom:14px}
.zs-ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.zs-ticks li{position:relative;padding-inline-start:30px;font-size:15.5px;color:#3d4a5c;
  font-weight:600;line-height:1.8}
.zs-ticks li::before{content:"\2713";position:absolute;inset-inline-start:0;top:2px;
  width:20px;height:20px;border-radius:7px;background:linear-gradient(135deg,var(--zs-a2),var(--zs-a));
  color:#fff;font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center}
@media (max-width:991px){
  .zs-row,.zs-row:nth-child(even),
  .zs-flip .zs-row:nth-child(odd),.zs-flip .zs-row:nth-child(even){flex-direction:column}
  .zs-row-media{flex-basis:auto;width:100%}}

/* package spotlight */
.zs-pkg{position:relative;border-radius:28px;overflow:hidden;text-align:center;
  padding:clamp(34px,5vw,54px) clamp(20px,4vw,48px);color:#fff;
  background:linear-gradient(135deg,var(--zs-ink) 0%,var(--zs-a) 55%,var(--zs-a2) 100%)}
.zs-pkg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(420px 200px at 15% 0%,rgba(255,255,255,.14),transparent 60%);pointer-events:none}
.zs-pkg .zs-kicker{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.25)}
.zs-pkg h2{font-size:clamp(24px,3.4vw,34px);font-weight:800;margin:14px 0 6px;color:#fff}
.zs-pkg .zs-price{font-size:clamp(38px,6vw,56px);font-weight:800;line-height:1.2}
.zs-pkg .zs-price small{font-size:16px;font-weight:600;opacity:.85}
.zs-pkg p{color:#f4fbf6;font-size:15.5px;line-height:2;max-width:640px;margin:10px auto 24px}

/* numbered FAQ (Salla-style) */
.zs-faq-item{display:flex;gap:18px;align-items:flex-start;background:#fff;
  border:1px solid var(--zs-line);border-radius:18px;padding:22px 24px;margin-bottom:14px;
  transition:box-shadow .25s ease,transform .25s ease}
.zs-faq-item:hover{box-shadow:0 10px 30px rgba(2,59,89,.08);transform:translateY(-2px)}
.zs-faq-num{flex:0 0 40px;height:40px;border-radius:13px;display:flex;align-items:center;
  justify-content:center;font-weight:800;font-size:18px;color:var(--zs-ink);background:var(--zs-tint)}
.zs-faq-item h3{font-size:17.5px;font-weight:800;color:var(--zs-heading);margin:0 0 8px;line-height:1.7}
.zs-faq-item p{margin:0;font-size:15.5px;color:var(--zs-body);line-height:2}

/* final CTA banner */
.zs-cta{position:relative;overflow:hidden;border-radius:28px;text-align:center;
  padding:clamp(40px,6vw,64px) 24px;
  background:
    radial-gradient(500px 240px at 85% 0%,rgba(var(--zs-a-rgb),.20),transparent 65%),
    linear-gradient(180deg,rgba(var(--zs-a-rgb),.05),var(--zs-tint))}
.zs-cta h2{font-size:clamp(24px,3.6vw,38px);font-weight:800;color:var(--zs-heading);
  margin-bottom:10px;line-height:1.5}
.zs-cta p{color:var(--zs-body);font-size:16.5px;margin-bottom:26px}

/* ── per-page distinction touches (v3.1) ─────────────────────────── */
/* giant low-opacity sector icon floating behind the hero copy */
.zs-watermark{position:absolute;inset-inline-end:-40px;top:-30px;font-size:clamp(180px,26vw,340px);
  color:rgba(var(--zs-a-rgb),.06);transform:rotate(-12deg);pointer-events:none;z-index:0;
  line-height:1}
.zs-hero .container{position:relative;z-index:1}
@media (prefers-reduced-motion:no-preference){
  .zs-watermark{animation:zsDrift 12s ease-in-out infinite}
  @keyframes zsDrift{0%,100%{transform:rotate(-12deg) translateY(0)}
    50%{transform:rotate(-8deg) translateY(-18px)}}
}
@media (max-width:767px){.zs-watermark{font-size:150px;inset-inline-end:-30px;top:-20px}}
/* three hero-blob shape variants so consecutive pages read differently */
.zs-hero.zs-shape-1 .zs-hero-media::before{border-radius:50% 30% 45% 35%;transform:rotate(3deg)}
.zs-hero.zs-shape-2 .zs-hero-media::before{border-radius:35% 55% 30% 50%;transform:rotate(-9deg);
  inset:auto -6% -14% 30%;height:74%}

/* ── hub pages (solutions + sectors index) v4 ────────────────────── */
.zs-hub-hero{position:relative;overflow:hidden;text-align:center;
  padding:clamp(56px,8vw,96px) 0 clamp(30px,5vw,54px);
  background:
    radial-gradient(640px 320px at 85% -5%,rgba(55,144,36,.14),transparent 70%),
    radial-gradient(520px 280px at 10% 10%,rgba(2,59,89,.08),transparent 70%),
    linear-gradient(180deg,#f2fbf4,#fff)}
.zs-hub-hero h1{font-size:clamp(30px,4.6vw,50px);font-weight:800;color:var(--zs-heading);line-height:1.4}
.zs-hub-hero h1 em{font-style:normal;background:linear-gradient(90deg,#379024,#76ca8c);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  padding-bottom:.22em;margin-bottom:-.22em}
.zs-hub-hero p{max-width:640px;margin:12px auto 0;color:var(--zs-body);font-size:clamp(15px,2vw,17.5px);line-height:2}
.zs-hub-hero .zs-watermark{inset-inline-end:auto;inset-inline-start:-30px;top:-40px}
.zs-hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:991px){.zs-hub-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:767px){.zs-hub-grid{grid-template-columns:1fr}}
.zs-hub-card{position:relative;overflow:hidden;background:#fff;border:1px solid var(--zs-line);
  border-top:4px solid var(--zs-a);border-radius:20px;padding:26px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  transition:transform .3s ease,box-shadow .3s ease}
/* the whole card is one click target: the title link stretches over it */
.zs-hub-card h3 a::after{content:"";position:absolute;inset:0}
.zs-hub-card .zs-ticks{display:inline-grid;text-align:start;margin-inline:auto}
.zs-hub-card:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(2,59,89,.12)}
.zs-hub-ic{width:52px;height:52px;border-radius:16px;background:var(--zs-tint);color:var(--zs-ink);
  display:flex;align-items:center;justify-content:center;font-size:22px;flex:0 0 auto}
.zs-hub-card h3{font-size:20px;font-weight:800;line-height:1.5;margin:2px 0 0}
.zs-hub-card h3 a{color:var(--zs-heading)}
.zs-hub-card h3 a:hover{color:var(--zs-a)}
.zs-hub-slogan{font-size:13.5px;font-weight:700;color:var(--zs-ink)}
.zs-hub-card>p{font-size:14.5px;color:var(--zs-body);line-height:1.95;margin:0}
.zs-hub-card .zs-ticks{gap:7px}
.zs-hub-card .zs-ticks li{font-size:14px;line-height:1.7}
.zs-hub-go{margin-top:auto;padding-top:12px;font-weight:800;font-size:14.5px;color:var(--zs-a);
  display:inline-flex;align-items:center;gap:8px}
.zs-hub-card:hover .zs-hub-go i{transform:translateX(-4px)}
html[dir="ltr"] .zs-hub-card:hover .zs-hub-go i,body.lang-en .zs-hub-card:hover .zs-hub-go i{transform:translateX(4px)}
.zs-hub-go i{transition:transform .3s ease}
.zs-hub-bgic{position:absolute;inset-inline-end:-16px;bottom:-20px;font-size:110px;line-height:1;
  color:rgba(var(--zs-a-rgb),.05);transform:rotate(-15deg);pointer-events:none}

/* ── hub hero icon marquee (auto-scrolling pill ribbon) ──────────── */
.zs-marquee{overflow:hidden;padding:26px 0 4px;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.zs-marquee-track{display:flex;gap:14px;width:max-content;
  animation:zsMarquee 36s linear infinite}
.zs-marquee:hover .zs-marquee-track{animation-play-state:paused}
@keyframes zsMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
[dir="rtl"] .zs-marquee-track,body.lang-ar .zs-marquee-track{animation-name:zsMarqueeR}
@keyframes zsMarqueeR{from{transform:translateX(0)}to{transform:translateX(50%)}}
body.lang-ar .zs-marquee-track{justify-content:flex-end}
.zs-mq-pill{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  padding:9px 18px;border-radius:100px;background:#fff;font-size:14px;font-weight:700;
  color:var(--p-ink,#1c7c31);border:1px solid var(--p-line,#e8f1ea);
  box-shadow:0 2px 10px rgba(2,59,89,.05)}
.zs-mq-pill i{font-size:13px;color:var(--p-a,#379024)}
@media (prefers-reduced-motion:reduce){.zs-marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}