/* =====================================================================
   Header, hero, footer and the page furniture.
   Split from main.css so the design tokens stay easy to find.
   ===================================================================== */

/* The top bar, header, hero and burger now live in header-hero.css.
   The mobile drawer stays here. */

.drawer {
  position: fixed; inset: 0; z-index: 150; visibility: hidden;
}
.drawer.is-open { visibility: visible; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(7,20,38,.5); opacity: 0; transition: opacity .25s var(--ease); }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: absolute; inset-block: 0; inset-inline-end: 0; width: min(88vw, 24rem);
  background: #fff; overflow-y: auto; padding: 1rem 1.1rem 2rem;
  transform: translateX(100%); transition: transform .28s var(--ease);
}
[dir="rtl"] .drawer__panel { transform: translateX(-100%); }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding-block: .35rem 1rem; border-bottom: 1px solid var(--line); margin-bottom: .75rem; }
.drawer__close { width: 40px; height: 40px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; font-size: 1.2rem; line-height: 1; }
.drawer details { border-bottom: 1px solid var(--line-soft); }
.drawer details > summary {
  list-style: none; cursor: pointer; padding: .85rem .25rem; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between;
}
.drawer details > summary::-webkit-details-marker { display: none; }
.drawer details > summary::after { content: "+"; color: var(--ink-mute); font-weight: 400; font-size: 1.15rem; }
.drawer details[open] > summary::after { content: "–"; }
.drawer details a, .drawer > nav > a { display: block; padding: .6rem .25rem .6rem 1rem; font-size: .94rem; color: var(--ink-soft); }
[dir="rtl"] .drawer details a { padding: .6rem 1rem .6rem .25rem; }
.drawer > nav > a { padding-inline-start: .25rem; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line-soft); }
.drawer__cta { margin-top: 1.25rem; display: grid; gap: .6rem; }


/* ---------- logo strip ---------- */
.logos { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.5rem 1rem; align-items: center; }
@media (min-width: 700px) { .logos { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width: 1000px) { .logos { grid-template-columns: repeat(8, minmax(0,1fr)); } }
.logos img {
  width: 100%; height: 46px; object-fit: contain;
  filter: grayscale(1); opacity: .55; transition: filter .25s var(--ease), opacity .25s var(--ease);
}
.logos img:hover { filter: none; opacity: 1; }

/* ---------- split feature ---------- */
.split { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.split--media-end .split__media { order: -1; }
@media (min-width: 900px) { .split--media-end .split__media { order: 1; } }
.split__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; }
.ticks { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .7rem; }
.ticks li { display: flex; gap: .65rem; align-items: flex-start; font-size: .97rem; color: var(--ink-soft); }
.ticks svg { width: 1.15em; height: 1.15em; color: var(--accent); flex: none; margin-top: .18em; }

/* ---------- process steps ---------- */
.steps { counter-reset: step; display: grid; gap: 1.25rem; }
@media (min-width: 700px)  { .steps { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.step-card { position: relative; padding: 1.6rem 1.25rem 1.35rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.step-card::before {
  counter-increment: step; content: counter(step,decimal-leading-zero);
  display: block; font-size: .95rem; font-weight: 800; color: var(--accent); margin-bottom: .6rem; letter-spacing: .06em;
}
.step-card h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.step-card p { font-size: .92rem; margin: 0; }

/* ---------- FAQ ---------- */
.faq { max-width: 52rem; margin-inline: auto; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: .7rem; background: var(--surface); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.05rem 1.2rem; font-weight: 600; font-size: 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 1.35rem; color: var(--ink-mute); line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details[open] { border-color: var(--blue-100); }
.faq__a { padding: 0 1.2rem 1.15rem; color: var(--ink-soft); font-size: .96rem; }

/* The footer and the floating WhatsApp button live in footer.css. */

/* ---------- feature tiles ---------- */
.feature { padding: 1.5rem 1.35rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.feature__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--blue-50); color: var(--navy-600); margin-bottom: 1rem;
}
.feature__icon svg { width: 22px; height: 22px; }
.feature h3 { font-size: 1.06rem; margin-bottom: .35rem; }
.feature p { font-size: .93rem; margin: 0; }

/* ---------- industry chips ---------- */
.chips-row { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .65rem 1.1rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: 100px; font-size: .93rem; font-weight: 500;
}
.chip svg { width: 1.05em; height: 1.05em; color: var(--accent); flex: none; }

/* ---------- SEO copy at the foot of the page ----------
   This text is written for search engines, not for a buyer who has already read
   the whole page. It stays in the HTML in full — it is part of why the page ranks
   — but it is set small, muted and two-up so it takes a fraction of the height
   and never competes with the real content above it. */
.seo-note {
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.seo-note__grid { display: grid; gap: 1.5rem 2.5rem; }
@media (min-width: 860px) { .seo-note__grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }

.seo-note__item h2 {
  /* still an h2 for search engines; simply not shouted at the reader */
  font-size: .95rem; font-weight: 700; letter-spacing: 0;
  color: var(--ink-soft); margin-bottom: .4rem;
}
.seo-note__item p {
  font-size: .82rem; line-height: 1.62; color: var(--ink-mute); margin-bottom: .5rem;
}
.seo-note__item p:last-child { margin-bottom: 0; }

/* ---------- split body (shares the .split grid) ---------- */
.split__body { min-width: 0; }

/* ---------- quote form ---------- */
.quote { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
@media (min-width: 940px) { .quote { grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); } }
.quote__aside { align-self: start; }
@media (min-width: 940px) { .quote__aside { position: sticky; top: 100px; } }
.quote__contact { display: grid; gap: .6rem; margin-top: 1.75rem; }
.quote__contact a { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; font-size: .95rem; color: var(--navy-700); }
.quote__contact svg { width: 1.1em; height: 1.1em; color: var(--accent); flex: none; }
.quote__panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: clamp(1.25rem, 3vw, 2.25rem);
}

.qform { margin: 0; }
/* Hidden without moving it off-canvas: an element parked at left:-9999px adds
   9999px of inline overflow, which is invisible in English and drags the whole
   page sideways in Arabic, where that side is the scrollable one. */
.hp {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.qform__progress { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.5rem; }
.qform__bar { flex: 1; height: 5px; border-radius: 99px; background: var(--line); overflow: hidden; }
.qform__bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .3s var(--ease); }
.qform__count { font-size: .82rem; font-weight: 600; color: var(--ink-mute); white-space: nowrap; }

.qstep { border: 0; padding: 0; margin: 0; min-width: 0; }
.qstep__title { font-size: 1.15rem; font-weight: 700; padding: 0; margin-bottom: 1.1rem; color: var(--ink); }
/* Without JS every step is visible and the form posts normally. With JS, main.js adds
   .js-steps to the form and only the active step shows. */
.js-steps .qstep { display: none; }
.js-steps .qstep.is-active { display: block; }

.qform__row { display: grid; gap: 0 1rem; }
@media (min-width: 620px) { .qform__row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.qform__nav { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.35rem; }
.qform__nav .btn--primary, .qform__nav .btn--accent { margin-inline-start: auto; }

.qform__msg { margin-top: 1rem; padding: .85rem 1rem; border-radius: var(--radius-sm); font-size: .93rem; }
.qform__msg--err { background: #FEF3F2; color: var(--err); border: 1px solid #FDA29B; }

.qform__done { text-align: center; padding: 1.5rem .5rem; }
.qform__tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 50%; background: #E7F6EE; color: var(--ok); margin-bottom: 1rem;
}
.qform__tick svg { width: 30px; height: 30px; stroke-width: 2.4; }

/* =====================================================================
   About block — the live site's "about-premium" section.
   Same arrangement (text left, soft stats card right), same colours
   (#001f9a badge and figures, #f8faff card). Rebuilt on grid so the two
   columns stay level, and the card no longer sits lower than the text.
   ===================================================================== */
.about { padding-block: clamp(3.5rem, 8vw, 5.6rem); background: #fff; }
.about__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 992px) { .about__grid { grid-template-columns: minmax(0,5fr) minmax(0,7fr); } }

.about__badge {
  display: inline-block; margin-bottom: 15px;
  background: rgba(0,31,154,.06); color: var(--brand);
  padding: 7px 16px; border-radius: 20px; font-size: 14px; font-weight: 600;
}
.about__title {
  font-size: clamp(1.6rem, 3.2vw, 2.15rem); font-weight: 700;
  line-height: 1.22; margin-bottom: 1rem; color: var(--ink);
}
.about__body p { color: #666; margin-bottom: 15px; line-height: 1.7; font-size: 1rem; }

.about__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 25px; }
.abtn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 50px; padding: 0 1.4rem; border-radius: 8px;
  background: var(--brand); color: #fff; border: 1.5px solid var(--brand);
  font-size: .97rem; font-weight: 600; white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0,31,154,.22);
  transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.abtn:hover { background: var(--brand-2); border-color: var(--brand-2); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0,44,220,.3); }
.abtn--outline { background: transparent; color: var(--brand); box-shadow: none; }
.abtn--outline:hover { background: rgba(0,31,154,.06); color: var(--brand); border-color: var(--brand); box-shadow: none; }
.abtn svg { width: 17px; height: 17px; flex: none; }
@media (max-width: 575px) {
  .about__actions { flex-direction: column; }
  .abtn { width: 100%; }
}

.about__card {
  background: #F8FAFF; border: 1px solid #E8EEFB;
  padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0,0,0,.05);
}
.about__stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; text-align: center; }
.about__stat h3 {
  color: var(--brand); font-weight: 800; margin-bottom: .25rem;
  font-size: clamp(1.75rem, 3.4vw, 2.4rem); line-height: 1; letter-spacing: -.02em;
}
.about__stat p { margin: 0; font-size: 14px; color: var(--ink-soft); }
.about__card hr { border: 0; border-top: 1px solid #DFE7F6; margin-block: clamp(1.5rem, 3vw, 2rem); }
.about__small { margin: 0; color: #666; font-size: .97rem; line-height: 1.7; }
.about__link {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: 15px;
  color: var(--brand); font-weight: 600; font-size: 1.02rem;
}
.about__link svg { width: 1.05em; height: 1.05em; }
.about__link:hover { color: var(--brand-2); }
.about__link:hover .arw { transform: translateX(4px); }

/* ---------- quick facts strip ----------
   Sits between the hero and the first real section. Four answers, one line —
   the things a buyer checks before deciding whether to keep reading. */
.facts { background: var(--navy-900); color: #fff; padding-block: 1.1rem; }
.facts__grid { display: grid; gap: .9rem 1.5rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 860px) { .facts__grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.fact { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.fact__icon {
  flex: none; width: 36px; height: 36px; border-radius: 10px;
  background: rgba(255,255,255,.09); color: var(--yellow);
  display: inline-flex; align-items: center; justify-content: center;
}
.fact__icon svg { width: 18px; height: 18px; }
.fact__text { min-width: 0; display: block; }
.fact__text strong { display: block; font-size: .95rem; font-weight: 700; line-height: 1.2; }
.fact__text span { display: block; font-size: .74rem; color: #8FA6C4; margin-top: 1px; }
@media (min-width: 860px) {
  .fact + .fact { border-inline-start: 1px solid rgba(255,255,255,.1); padding-inline-start: 1.5rem; }
}

/* ---------- FAQ footnote ---------- */
.faq__more { margin-top: 1.5rem; font-size: .93rem; color: var(--ink-mute); }
.faq__more a { color: var(--brand); font-weight: 600; }
.faq__more a:hover { color: var(--brand-2); }

/* industry chips are links now, so they need a hover state */
a.chip:hover { border-color: var(--brand); color: var(--brand); background: var(--blue-50); }
a.chip .arw { width: .95em; height: .95em; opacity: .55; }
a.chip:hover .arw { opacity: 1; transform: translateX(3px); }

/* ---------- narrow prose block on the text pages ---------- */
.prose-narrow { max-width: 46rem; margin-inline: auto; }
.prose-narrow p { font-size: 1rem; line-height: 1.75; margin-bottom: 1.1rem; }
.prose-narrow p:last-child { margin-bottom: 0; }

/* Six process steps sit four across on a desktop and wrap to two rows, which
   leaves a lopsided gap. Three across divides evenly. */
@media (min-width: 1000px) { .steps--six { grid-template-columns: repeat(3, minmax(0,1fr)); } }