html { scroll-behavior: smooth; }
body { font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif; color: #15291F; background: #fff; }
[dir="rtl"] .rtl-flip { transform: scaleX(-1); }

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* The fixed header overlays content, so in-page anchor targets need clearance */
[id] { scroll-margin-top: 92px; }

/* Header: fully transparent at the top of the page, solid once scrolled or
   when the mobile menu is open (main.js toggles .is-raised). Styled by id so
   it wins over Tailwind's utility classes regardless of stylesheet order. */
#siteHeader {
  background-color: transparent;
  border-bottom: 1px solid transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
#siteHeader.is-raised {
  background-color: rgba(255,255,255,.95);
  border-bottom-color: rgba(220,235,226,.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 6px 24px rgba(11,59,42,.10);
}

/* Hero entrance — pure CSS so it runs without waiting on JS */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .7s cubic-bezier(.22,.7,.3,1) both; }
.rise-1 { animation-delay: .05s } .rise-2 { animation-delay: .14s } .rise-3 { animation-delay: .23s }
.rise-4 { animation-delay: .32s } .rise-5 { animation-delay: .41s }

/* FAQ answers ease open instead of snapping */
@keyframes faqOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
details[open] > p, details[open] > div { animation: faqOpen .32s ease both; }

/* Decorative blurred blobs drift slowly so the hero is never fully static */
@keyframes drift {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50%      { transform: translate3d(0,-14px,0) scale(1.06); }
}
.drift { animation: drift 11s ease-in-out infinite; }
.drift-slow { animation: drift 15s ease-in-out infinite reverse; }

@media (prefers-reduced-motion: reduce) {
  .rise, .drift, .drift-slow { animation: none; }
  details[open] > p, details[open] > div { animation: none; }
}

/* Branded select — the native control is replaced with our own chevron and
   colours. The page is dir="rtl", so the chevron sits on the physical left
   (the inline end) and the text keeps clear of it. */
select.sel {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230E7A42' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left .9rem center;
  background-size: 16px 16px;
  padding-left: 2.4rem;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
select.sel:hover { border-color: #16A75C; background-color: #FBFEFC; }
select.sel:focus { outline: none; border-color: #16A75C; box-shadow: 0 0 0 3px rgba(22,167,92,.18); }
select.sel::-ms-expand { display: none; }
/* The open list is drawn by the OS; these land in Chrome/Firefox and are
   ignored elsewhere, so the closed control carries the styling that matters. */
select.sel option { background-color: #fff; color: #0B3B2A; padding: .5rem; }
select.sel option:checked { background-color: #EAF7F0; color: #0E7A42; font-weight: 700; }
select.sel option[value=""] { color: #5C7267; }

/* Searchable combobox — replaces the OS-drawn select popup, which cannot be
   styled or searched. The native select element stays in the DOM as the value
   source, so filters keep working if this never initialises. */
.cbx { position: relative; }
.cbx-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  background: #fff; border: 1px solid #DCEBE2; border-radius: 11px;
  padding: .625rem .875rem; font-size: .9rem; color: #0B3B2A; text-align: start;
  cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.cbx-btn:hover { border-color: #16A75C; background: #FBFEFC; }
.cbx-btn:focus { outline: none; border-color: #16A75C; box-shadow: 0 0 0 3px rgba(22,167,92,.18); }
.cbx-btn[aria-expanded="true"] { border-color: #16A75C; box-shadow: 0 0 0 3px rgba(22,167,92,.18); }
.cbx-btn .cbx-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbx-btn.is-placeholder .cbx-val { color: #5C7267; }
.cbx-btn svg { flex: none; transition: transform .2s ease; }
.cbx-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.cbx-pop {
  position: absolute; inset-inline: 0; top: calc(100% + .4rem); z-index: 60;
  background: #fff; border: 1px solid #DCEBE2; border-radius: 14px;
  box-shadow: 0 18px 44px rgba(11,59,42,.16); overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.cbx.is-open .cbx-pop { opacity: 1; visibility: visible; transform: none; }

.cbx-search-wrap { padding: .5rem; border-bottom: 1px solid #EAF7F0; }
.cbx-search {
  width: 100%; border: 1px solid #DCEBE2; border-radius: 9px;
  padding: .45rem .7rem; font: inherit; font-size: .85rem; color: #15291F; background: #fff;
}
.cbx-search:focus { outline: none; border-color: #16A75C; box-shadow: 0 0 0 3px rgba(22,167,92,.15); }

.cbx-list { max-height: 15rem; overflow-y: auto; padding: .3rem; margin: 0; list-style: none; }
.cbx-opt {
  padding: .5rem .7rem; border-radius: 9px; font-size: .87rem; color: #15291F;
  cursor: pointer; transition: background-color .12s ease, color .12s ease;
}
.cbx-opt:hover, .cbx-opt.is-active { background: #EAF7F0; color: #0E7A42; }
.cbx-opt[aria-selected="true"] { background: #EAF7F0; color: #0E7A42; font-weight: 700; }
.cbx-empty { padding: .75rem; text-align: center; font-size: .82rem; color: #5C7267; }
.cbx-list::-webkit-scrollbar { width: 8px; }
.cbx-list::-webkit-scrollbar-thumb { background: #DCEBE2; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  .cbx-pop, .cbx-btn svg { transition: none; }
}

/* Applied by JS to the enhanced select; defined here so it never depends on
   the CDN generating a class that appears nowhere in the markup. */
select.sel.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* FAQ marker */
details summary::-webkit-details-marker { display: none; }
details summary { list-style: none; cursor: pointer; }

/* Partner logo marquee */
.logo-marquee {
  direction: ltr;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.logo-marquee-track { display: flex; align-items: center; width: max-content; animation: logo-marquee 26s linear infinite; }
.logo-marquee:hover .logo-marquee-track { animation-play-state: paused; }
@keyframes logo-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .logo-marquee-track { animation: none; } }

/* Hide scrollbar on the testimonial carousel */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }