:root {
  --jadawel-ink: #0b0f19;
  --jadawel-blue: #0059fc;
  --jadawel-blue-dark: #0046c7;
  --jadawel-blue-light: #e6eeff;
  --jadawel-cloud: #f6f7fb;
  --jadawel-white: #ffffff;
  --jadawel-slate: #566072;
  --jadawel-mint: #83d7c2;
  --jadawel-amber: #f6c85f;
  --jadawel-coral: #e35d6a;
  --jadawel-font: "Thmanyah Sans", "Noto Sans Arabic", Arial, sans-serif;
}

html[lang="ar"],
[dir="rtl"] {
  direction: rtl;
  font-family: var(--jadawel-font);
}

html[lang="en"],
[dir="ltr"] {
  direction: ltr;
  font-family: var(--jadawel-font);
}

/* ==========================================================================
   Jadawel — website stylesheet
   Built on Jadawel Visual Identity v1.1 (src/css/jadawel-brand.css, copied from
   the packaged assets/tokens/jadawel-brand.css).
   Arabic is the default direction. Latin technical tokens stay LTR.
   ========================================================================== */

/* --- Font -----------------------------------------------------------------
   Thmanyah Sans is the approved brand face. It is not licensed on this host,
   so the page self-hosts Noto Sans Arabic (SIL OFL 1.1) as the disclosed
   fallback. Thmanyah Sans still leads the stack, so a licensed install wins.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Noto Sans Arabic";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/NotoSansArabic-arabic.woff2?v=ae0748e9da") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
    U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4,
    U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24,
    U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47,
    U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-U+1EE52, U+1EE54, U+1EE57,
    U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-U+1EE62, U+1EE64, U+1EE67-U+1EE6A,
    U+1EE6C-U+1EE72, U+1EE74-U+1EE77, U+1EE79-U+1EE7C, U+1EE7E, U+1EE80-U+1EE89,
    U+1EE8B-U+1EE9B, U+1EEA1-U+1EEA3, U+1EEA5-U+1EEA9, U+1EEAB-U+1EEBB,
    U+1EEF0-U+1EEF1;
}
@font-face {
  font-family: "Noto Sans Arabic";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/NotoSansArabic-latin.woff2?v=19d897d31c") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --jadawel-font-display: "Thmanyah Sans", "Noto Sans Arabic", Arial, sans-serif;
  --jadawel-font: var(--jadawel-font-display);
  --ink: var(--jadawel-ink);
  --blue: var(--jadawel-blue);
  --blue-dark: var(--jadawel-blue-dark);
  --blue-light: var(--jadawel-blue-light);
  --cloud: var(--jadawel-cloud);
  --white: var(--jadawel-white);
  --slate: var(--jadawel-slate);
  --mint: var(--jadawel-mint);
  --amber: var(--jadawel-amber);
  --coral: var(--jadawel-coral);
  --hairline: #e4e7ef;
  --hairline-ink: rgba(255, 255, 255, 0.14);
  --radius: 14px;
  --radius-sm: 9px;
  --step: 8px;
  --shadow-card: 0 1px 2px rgba(11, 15, 25, 0.04), 0 12px 28px rgba(11, 15, 25, 0.06);
  --shadow-float: 0 2px 4px rgba(11, 15, 25, 0.05), 0 28px 70px rgba(11, 15, 25, 0.13);
  --shell: 1180px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--jadawel-font);
  font-size: 16.5px;
  line-height: 1.75;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

[dir="rtl"] body { line-height: 1.85; }

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p { margin: 0; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Isolated left-to-right technical tokens inside RTL prose. */
.ltr {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
  font-feature-settings: "tnum" 1;
}

.skip-link {
  position: absolute;
  inset-inline-start: 12px;
  top: -60px;
  z-index: 100;
  background: var(--ink);
  color: var(--white);
  padding: 10px 18px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 700;
  transition: top 0.18s ease;
}
.skip-link:focus { top: 0; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 24px;
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease,
    color 0.16s ease, transform 0.16s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary:hover { background: var(--blue-dark); }
.btn-ghost {
  background: var(--white);
  color: var(--ink);
  border-color: var(--hairline);
}
.btn-ghost:hover { border-color: var(--ink); }
.btn-onink {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.34);
}
.btn-onink:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.08); }
.btn-lg { padding: 15px 28px; font-size: 16.5px; }
.btn-sm { padding: 9px 16px; font-size: 14.5px; }
.header-actions .btn-sm { padding: 9px 13px; }

/* --- Header -------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-block-end: 1px solid var(--hairline);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 86px;
}
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { width: 135px; height: auto; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-inline-start: auto;
}
.site-nav a {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  white-space: nowrap;
  font-weight: 600;
  color: var(--slate);
  transition: color 0.15s ease, background-color 0.15s ease;
}
.site-nav a:hover { color: var(--ink); background: var(--cloud); }
.site-nav a[aria-current] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--blue); }

.header-actions { display: flex; align-items: center; gap: 8px; }

.lang-toggle {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--white);
}
.lang-toggle button {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--slate);
  padding: 7px 12px;
  cursor: pointer;
  line-height: 1.1;
}
.lang-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--white); }

.nav-toggle {
  display: none;
  border: 1px solid var(--hairline);
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  cursor: pointer;
  font: inherit;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}
.nav-toggle span + span { margin-block-start: 4px; }

.site-nav .nav-lang { display: none; }

/* --- Hero ---------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(1100px 480px at var(--accent-x, 92%) -10%, rgba(0, 89, 252, 0.09), transparent 68%),
    var(--cloud);
  border-block-end: 1px solid var(--hairline);
  padding-block: 72px 84px;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.18fr);
  gap: 56px;
  align-items: center;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 700;
  color: var(--blue-dark);
  background: var(--white);
  border: 1px solid var(--blue-light);
  border-radius: 999px;
  padding: 6px 15px;
}
.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--blue);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.hero h1 {
  font-size: clamp(2.15rem, 1.35rem + 2.6vw, 3.35rem);
  font-weight: 800;
  margin-block: 22px 20px;
}
.hero h1 .accent {
  color: var(--blue);
  display: block;
  text-wrap: balance;
}
.hero-lede {
  font-size: 18px;
  color: var(--slate);
  max-width: 56ch;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block-start: 30px;
}
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-block-start: 26px;
  padding: 0;
  list-style: none;
  font-size: 14.5px;
  color: var(--slate);
}
.hero-trust li { display: flex; align-items: center; gap: 8px; }
.hero-trust li::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--mint);
  border-radius: 50%;
  flex-shrink: 0;
}

/* --- Product mock (hero visual) ----------------------------------------- */
.mock {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
  overflow: hidden;
  font-size: 13px;
  line-height: 1.6;
}
.mock-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-block-end: 1px solid var(--hairline);
  background: var(--cloud);
}
.mock-dots { display: flex; gap: 5px; }
.mock-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--hairline);
  display: block;
}
.mock-dots i:first-child { background: var(--coral); }
.mock-dots i:nth-child(2) { background: var(--amber); }
.mock-dots i:nth-child(3) { background: var(--mint); }
.mock-title {
  font-weight: 700;
  font-size: 12.5px;
  color: var(--slate);
  margin-inline-start: 6px;
}
.mock-body { display: grid; grid-template-columns: 138px minmax(0, 1fr); }
.mock-side {
  border-inline-end: 1px solid var(--hairline);
  padding: 14px 12px;
  background: var(--white);
}
.mock-side b {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--slate);
  letter-spacing: 0.04em;
  margin-block-end: 8px;
}
.mock-side ul { list-style: none; margin: 0; padding: 0; }
.mock-side li {
  padding: 6px 9px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--slate);
  display: flex;
  align-items: center;
  gap: 8px;
}
.mock-side li.is-active { background: var(--blue-light); color: var(--blue-dark); }
.mock-side li span.d {
  width: 6px;
  height: 6px;
  background: currentColor;
  transform: rotate(45deg);
  flex-shrink: 0;
  opacity: 0.75;
}
.mock-main { padding: 14px 14px 16px; min-width: 0; }
.mock-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block-end: 12px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  color: var(--slate);
  background: var(--white);
  white-space: nowrap;
}
.chip-blue { background: var(--blue); border-color: var(--blue); color: var(--white); }
.chip-mint { background: rgba(131, 215, 194, 0.24); border-color: rgba(19, 122, 96, 0.24); color: #0f6b53; }
.chip-amber { background: rgba(246, 200, 95, 0.26); border-color: rgba(146, 104, 12, 0.24); color: #8a5d05; }
.chip-coral { background: rgba(227, 93, 106, 0.16); border-color: rgba(178, 52, 66, 0.28); color: #97303c; }
.chip-plain { background: var(--cloud); }

.mock-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mock-table th,
.mock-table td {
  text-align: start;
  padding: 9px 8px;
  border-block-end: 1px solid var(--hairline);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mock-table th {
  font-size: 11px;
  font-weight: 700;
  color: var(--slate);
  background: var(--cloud);
}
.mock-table td { font-size: 12.5px; font-weight: 500; }
.mock-table col.c1 { width: 28%; }
.mock-table col.c2 { width: 23%; }
.mock-table col.c3 { width: 24%; }
.mock-table col.c4 { width: 27%; }
.mock-table .chip {
  font-size: 10.5px;
  padding: 3px 8px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: middle;
}
.mock-table tr:last-child td { border-block-end: 0; }
.mock-table td.num { font-variant-numeric: tabular-nums; }
.mock-table td.muted { color: var(--slate); }
.mock-table .progress {
  display: inline-block;
  vertical-align: middle;
  width: 30px;
  height: 6px;
  border-radius: 3px;
  background: var(--blue-light);
  overflow: hidden;
  margin-inline-end: 6px;
}
.mock-table .progress i {
  display: block;
  height: 100%;
  background: var(--blue);
  border-radius: 3px;
}
.mock-scroll { overflow-x: auto; margin-inline: -2px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mock-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-block-start: 1px solid var(--hairline);
  background: var(--cloud);
  font-size: 11.5px;
  color: var(--slate);
  font-weight: 600;
}
.mock-bar-chart { display: flex; align-items: flex-end; gap: 5px; height: 26px; margin-inline-start: auto; }
.mock-bar-chart i { width: 7px; background: var(--blue-light); border-radius: 2px 2px 0 0; display: block; }
.mock-bar-chart i.on { background: var(--blue); }

/* --- Section scaffolding ------------------------------------------------- */
.section { padding-block: 84px; }

/* Keep anchored sections clear of the sticky header. */
section[id] { scroll-margin-top: 104px; }
.section-cloud { background: var(--cloud); border-block: 1px solid var(--hairline); }
.section-ink { background: var(--ink); color: var(--white); }
.section-ink .section-lede { color: rgba(255, 255, 255, 0.72); }
.section-ink h2 { color: var(--white); }

.section-head { max-width: 74ch; margin-block-end: 44px; }
.section-num {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--slate);
  margin-block-end: 16px;
}
.section-num::before {
  content: "";
  width: 4px;
  height: 20px;
  background: var(--blue);
  border-radius: 2px;
  flex-shrink: 0;
}
.section-ink .section-num { color: rgba(255, 255, 255, 0.74); }
.section h2 { font-size: clamp(1.6rem, 1.2rem + 1.35vw, 2.3rem); }
.section-lede {
  margin-block-start: 16px;
  font-size: 17.5px;
  color: var(--slate);
  max-width: 68ch;
}

.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --- Cards --------------------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card h2,
.card h3 { font-size: 18.5px; font-weight: 700; }
.card p { color: var(--slate); font-size: 15.5px; }
.card-mark {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--blue-light);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.card-mark::after {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--blue);
  transform: rotate(45deg);
}
.card-onink {
  background: rgba(255, 255, 255, 0.045);
  border-color: var(--hairline-ink);
}
.card-onink h3 { color: var(--white); }
.card-onink p { color: rgba(255, 255, 255, 0.72); }
.card-onink .card-mark { background: rgba(0, 89, 252, 0.28); }
.card-onink .card-mark::after { background: #6f9bff; }

/* --- Deployment options: the two designed cards ---------------------------
   Each card is a tag pill, an illustration beside the copy, a rule, a row of
   circled feature icons, and a full-width call to action. The blue outline is
   the design's, drawn with the brand blue.
   -------------------------------------------------------------------------- */
.offer-card {
  padding: 28px 26px 22px;
  gap: 20px;
  border: 2px solid var(--blue);
}

.offer-card__tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 9px;
  padding: 8px 16px 9px;
  border-radius: 999px;
  background: var(--blue-light);
  color: var(--blue-dark);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.2;
}
.offer-card__tag svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.offer-card__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(112px, 0.66fr);
  gap: 18px;
  align-items: center;
}
.offer-card__copy { min-width: 0; }
.offer-card__copy h3 { font-size: 21px; }
.offer-card__copy p { margin-block-start: 8px; }
.offer-card__art { display: block; min-width: 0; }
.offer-card__art svg { width: 100%; max-width: 198px; height: auto; margin-inline-start: auto; }

.offer-card__rule {
  height: 1px;
  margin: 2px 0;
  border: 0;
  background: var(--hairline);
}

.offer-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.offer-features--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.offer-features--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.offer-features li {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 0;
  text-align: center;
  color: var(--slate);
  font-size: 14.5px;
  line-height: 1.5;
  text-wrap: balance;
}
.offer-feature__icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--blue-light);
  color: var(--blue-dark);
}
.offer-feature__icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.offer-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 68px;
  margin-block-start: auto;
  padding: 16px 22px;
  border-radius: var(--radius-sm);
  background: var(--blue);
  color: var(--white);
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  transition: background-color 0.16s ease, transform 0.16s ease;
}
.offer-cta:hover { background: var(--blue-dark); transform: translateY(-1px); }
.offer-cta__text {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
  min-width: 0;
}
.offer-cta__text span { font-weight: 500; }
.offer-cta__arrow {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
}
/* The arrow is drawn pointing left, which is forward in Arabic. */
[dir="ltr"] .offer-cta__arrow { transform: scaleX(-1); }

/* Pillars strip */
.pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  margin-block-start: 26px;
}
.pillars > div {
  background: var(--white);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pillars b { font-size: 15.5px; font-weight: 700; }
.pillars span { font-size: 14.5px; color: var(--slate); line-height: 1.65; }

/* --- Platform stage (segment overview) -----------------------------------
   One composed diagram instead of five photographs: the map, the connectors,
   the five segment cards and the product window are all HTML, CSS and inline
   SVG. Nothing here is a raster image, so the section costs a few kilobytes
   and the Arabic stays crisp at any density.
   ------------------------------------------------------------------------ */
.stage-section { position: relative; overflow: hidden; padding-block-start: 40px; }
.stage-section .section-num { justify-content: center; }
.stage-shell { position: relative; }

.stage-title {
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.35rem);
  max-width: 22ch;
  margin-inline: auto;
}

/* Decorative field behind the whole composition. */
/* Sized and placed so the country reads as a country. The product window
   overlaps its lower edge, as in the reference, but the outline stays
   recognisable rather than showing a fragment. */
.stage-map {
  position: absolute;
  z-index: 0;
  inset-block-start: -68px;
  inset-inline: 0;
  margin-inline: auto;
  width: min(430px, 38%);
  height: auto;
  fill: #c2d6fd;
  pointer-events: none;
}
.stage-bloom {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(720px 320px at 50% 4%, rgba(0, 89, 252, 0.12), transparent 70%),
    radial-gradient(420px 260px at 6% 92%, rgba(0, 89, 252, 0.09), transparent 72%),
    radial-gradient(420px 260px at 96% 86%, rgba(0, 89, 252, 0.09), transparent 72%);
}

.stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 212px minmax(0, 1fr) 212px;
  gap: 22px;
  align-items: center;
  margin-block-start: 26px;
}
.stage-side { display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.stage-side--end { justify-content: center; gap: 46px; }


/* --- Segment cards ------------------------------------------------------- */
.seg-card {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(11, 15, 25, 0.04), 0 10px 24px rgba(11, 15, 25, 0.05);
}
.seg-copy { min-width: 0; }
.seg-copy b {
  display: block;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
}
.seg-copy span {
  display: block;
  margin-block-start: 3px;
  font-size: 12.5px;
  color: var(--slate);
  line-height: 1.5;
}
.seg-art {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: linear-gradient(160deg, #f4f7ff, #e9f0ff);
  display: grid;
  place-items: center;
}
.seg-art svg { width: 42px; height: 42px; display: block; }


/* Each card draws its own connector into the gap. Anchoring the line to the
   card is what keeps it centred on the card at every width, which a single
   fixed-coordinate overlay could not do. */
.seg-card::after {
  content: "";
  position: absolute;
  inset-block-start: calc(50% - 1px);
  width: 30px;
  height: 2px;
  border-radius: 1px;
  background: var(--blue);
  opacity: 0.5;
}
.seg-card::before {
  content: "";
  position: absolute;
  inset-block-start: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--blue);
  background: var(--white);
  opacity: 0.85;
}
/* The card column ahead of the window points into it... */
.stage-side > .seg-card::after,
.stage-side > .seg-card::before { inset-inline-end: -26px; }
/* ...and the column after it points back the other way. */
.stage-side--end > .seg-card::after,
.stage-side--end > .seg-card::before { inset-inline-start: -26px; }

/* --- Product window ------------------------------------------------------ */
.appwin {
  position: relative;
  z-index: 2;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(11, 15, 25, 0.05), 0 26px 60px rgba(11, 15, 25, 0.13);
  overflow: hidden;
}
.appwin-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-block-end: 1px solid var(--hairline);
}
.appwin-new {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--blue);
  color: var(--white);
  border-radius: 8px;
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}
.appwin-new i { font-style: normal; font-size: 15px; line-height: 1; }
.appwin-ic {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: var(--slate);
  flex-shrink: 0;
}
.appwin-ic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.appwin-search {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 6px 11px;
  font-size: 12px;
  color: var(--slate);
  background: var(--white);
}
.appwin-search svg { width: 14px; height: 14px; fill: none; stroke: var(--slate); stroke-width: 1.8; flex-shrink: 0; }
.appwin-search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.appwin-body { display: grid; grid-template-columns: 138px minmax(0, 1fr); }
.appwin-side {
  border-inline-end: 1px solid var(--hairline);
  background: var(--ink);
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.4;
}
.appwin-side > span {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.66);
  white-space: nowrap;
}
.appwin-side > span.is-active { background: var(--blue); color: var(--white); }
.appwin-side svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; flex-shrink: 0; }

.appwin-table { min-width: 0; }
.appwin-scroll { overflow-x: auto; }
.apptbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
.apptbl th,
.apptbl td {
  text-align: start;
  padding: 11px 10px;
  line-height: 1.5;
  border-block-end: 1px solid var(--hairline);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.apptbl th {
  font-size: 11px;
  font-weight: 700;
  color: var(--slate);
  background: var(--cloud);
}
.apptbl td { font-size: 12px; font-weight: 500; }
.apptbl tr:last-child td { border-block-end: 0; }
.apptbl .c-check { width: 34px; }
.apptbl .c-type { width: 46px; }
.apptbl .c-org { width: 46px; }
.apptbl .c-state { width: 112px; }
.apptbl .c-date { width: 90px; }
.apptbl .box {
  display: block;
  width: 13px;
  height: 13px;
  border: 1.5px solid #cdd4e2;
  border-radius: 3.5px;
}
.apptbl .tick { border-color: var(--blue); background: var(--blue); }
.apptbl .ty,
.apptbl .og {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--cloud);
  color: var(--ink);
}
.apptbl .ty svg,
.apptbl .og svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.apptbl td.date { color: var(--slate); font-variant-numeric: tabular-nums; }

/* --- Trust strip + promise wedge ---------------------------------------- */
.trust-strip {
  position: relative;
  z-index: 2;
  margin-block-start: 34px;
  display: flex;
  align-items: stretch;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 16px 22px;
  box-shadow: var(--shadow-card);
}
.trust-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding-inline: 18px;
}
.trust-item + .trust-item { border-inline-start: 1px solid var(--hairline); }
.trust-item svg { width: 26px; height: 26px; flex-shrink: 0; fill: none; stroke: var(--blue-dark); stroke-width: 1.7; }
.trust-item b { display: block; font-size: 14px; font-weight: 800; line-height: 1.4; color: var(--ink); }
.trust-item span { display: block; font-size: 12.5px; color: var(--slate); }
.trust-item code {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  direction: ltr;
  unicode-bidi: isolate;
}


/* --- Stage responsiveness ----------------------------------------------- */
@media (max-width: 1120px) {
  .stage { grid-template-columns: 190px minmax(0, 1fr) 190px; gap: 16px; }
  }
@media (max-width: 900px) {
  .stage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-block-start: 26px;
  }
    .appwin { grid-column: 1 / -1; order: -1; }
  .stage-side { display: contents; }
  .stage-title { margin-block-end: 6px; }
  .stage-map { width: 92%; inset-block-start: -6%; }
  .trust-strip { flex-direction: column; gap: 0; padding: 8px 20px; }
  .trust-item { justify-content: flex-start; padding: 14px 0; }
  .trust-item + .trust-item { border-inline-start: 0; border-block-start: 1px solid var(--hairline); }
  }
@media (max-width: 560px) {
  .stage { grid-template-columns: minmax(0, 1fr); }
  /* The panel would eat two thirds of a phone's width and leave the table
     unreadable, so it steps aside; the table then scrolls horizontally. */
  .appwin-body { grid-template-columns: minmax(0, 1fr); }
  .appwin-side { display: none; }
  .appwin-table { border-inline-start: 0; }
  .apptbl th, .apptbl td { padding: 10px 9px; }
  .apptbl .c-check, .apptbl .c-type { display: none; }
  .apptbl .c-state { width: 104px; }
  .apptbl .c-org { width: 42px; }
  .apptbl .c-date { width: 86px; }
  .seg-card { padding: 12px 14px; }
  .seg-art { width: 46px; height: 46px; }
  .seg-art svg { width: 34px; height: 34px; }

  /* Below this width the illustration would squeeze the copy, so it moves
     above it and the feature icons step down a size. */
  .offer-card { padding: 20px 18px 18px; }
  .offer-card__main { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .offer-card__art svg { max-width: 132px; margin-inline: auto; }
  .offer-card__copy h3 { font-size: 19px; }
  .offer-features { gap: 8px; }
  .offer-features li { font-size: 13.5px; }
  .offer-feature__icon { width: 46px; height: 46px; }
  .offer-feature__icon svg { width: 21px; height: 21px; }
  .offer-cta { min-height: 52px; padding: 12px 14px; font-size: 15px; }
}

/* --- Lifecycle ----------------------------------------------------------- */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.step {
  position: relative;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  inset-block-start: 20px;
  inset-inline-end: 22px;
  font-size: 13px;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: 0.06em;
}
.step h3 { font-size: 17.5px; padding-inline-end: 34px; }
.step p { color: var(--slate); font-size: 15px; }
.tokens { display: flex; flex-wrap: wrap; gap: 7px; margin-block-start: 2px; }
.token {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--cloud);
  border: 1px solid var(--hairline);
  color: var(--slate);
  direction: ltr;
  unicode-bidi: isolate;
}
.step-note {
  margin-block-start: 6px;
  font-size: 14px;
  color: var(--slate);
  padding-inline-start: 14px;
  border-inline-start: 2px solid var(--blue-light);
}

/* --- Sovereignty band ---------------------------------------------------- */
.band {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--hairline-ink);
  background: var(--ink);
  color: var(--white);
  padding: 40px 38px;
  min-height: 260px;
  display: flex;
  align-items: flex-end;
}
.band img.band-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
}

/* The artwork's bright focal point sits on the right of the frame, which is
   exactly where the Arabic text sits. Mirroring it under RTL moves the bright
   area to the far side of the text in both directions, so the headline never
   competes with it. */
[dir="rtl"] .band img.band-bg { transform: scaleX(-1); }
/* The scrim is bottom-weighted because the band text is bottom-aligned in both
   directions, which keeps the headline legible over the artwork's bright focal
   point without hiding the artwork itself. */
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(11, 15, 25, 0.9) 4%,
    rgba(11, 15, 25, 0.42) 48%,
    rgba(11, 15, 25, 0.18) 78%,
    rgba(11, 15, 25, 0.38) 100%
  );
}
.band-content { position: relative; z-index: 1; max-width: 62ch; }
.band-content h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.95rem); color: var(--white); }
.band-content p { margin-block-start: 14px; color: rgba(255, 255, 255, 0.82); font-size: 16.5px; }
.band-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #99b8ff;
  border: 1px solid rgba(111, 155, 255, 0.4);
  border-radius: 999px;
  padding: 5px 13px;
  margin-block-end: 18px;
  background: rgba(0, 89, 252, 0.16);
}

/* --- FAQ ----------------------------------------------------------------- */
.faq { display: grid; gap: 12px; max-width: 88ch; }
.faq details {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  padding: 19px 22px;
  font-weight: 700;
  font-size: 16.5px;
  display: flex;
  align-items: center;
  gap: 14px;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 9px;
  height: 9px;
  border-inline-end: 2px solid var(--slate);
  border-block-end: 2px solid var(--slate);
  transform: rotate(45deg);
  margin-inline-start: auto;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details[open] summary { color: var(--blue-dark); }
.faq .faq-a {
  padding: 0 22px 22px;
  color: var(--slate);
  font-size: 15.8px;
  max-width: 78ch;
}

/* --- CTA ----------------------------------------------------------------- */
.cta-band {
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius);
  padding: 52px 48px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 36px;
  align-items: center;
}
.cta-band h2 { color: var(--white); font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.1rem); }
.cta-band p { margin-block-start: 14px; color: rgba(255, 255, 255, 0.76); font-size: 16.5px; }
.cta-actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.cta-actions .btn { width: 100%; }
.cta-mail {
  text-align: center;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.62);
  margin-block-start: 6px;
}
.cta-mail a { color: #99b8ff; text-decoration: underline; text-underline-offset: 3px; }

/* --- Page header (inner pages) ------------------------------------------ */
.page-head {
  background: var(--cloud);
  border-block-end: 1px solid var(--hairline);
  padding-block: 58px 62px;
}
.page-head h1 { font-size: clamp(1.95rem, 1.4rem + 2vw, 2.85rem); }
.page-head .section-lede { max-width: 70ch; }

/* --- Template library ---------------------------------------------------- */
.tpl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tpl {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tpl-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 18px;
  border-block-end: 1px solid var(--hairline);
  background: var(--cloud);
}
.tpl-head b { font-size: 15.5px; font-weight: 700; }
.tpl-head .chip { margin-inline-start: auto; }
.tpl-preview { padding: 14px 18px; }
.tpl-preview table { width: 100%; border-collapse: collapse; }
.tpl-preview th,
.tpl-preview td {
  text-align: start;
  font-size: 12.5px;
  padding: 7px 8px;
  border-block-end: 1px solid var(--hairline);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.tpl-preview th { color: var(--slate); font-weight: 700; background: var(--cloud); }
.tpl-foot {
  margin-block-start: auto;
  padding: 14px 18px;
  border-block-start: 1px solid var(--hairline);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* --- Releases ------------------------------------------------------------ */
.release {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 28px;
  padding-block: 30px;
  border-block-start: 1px solid var(--hairline);
}
.release:last-of-type { border-block-end: 1px solid var(--hairline); }
.release-meta b { display: block; font-size: 16px; font-weight: 800; }
.release-meta span { font-size: 14px; color: var(--slate); }
.release-body ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.release-body li {
  display: flex;
  gap: 12px;
  font-size: 15.5px;
  color: var(--slate);
}
.release-body li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-block-start: 9px;
  background: var(--blue);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* --- Forms --------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field-full { grid-column: 1 / -1; }
.field label { font-size: 14.5px; font-weight: 700; }
.field .hint { font-size: 13.5px; color: var(--slate); font-weight: 400; }
.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: 15.5px;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--blue); outline: 3px solid rgba(0, 89, 252, 0.18); outline-offset: 0; }
.form-note {
  font-size: 13.8px;
  color: var(--slate);
  border-inline-start: 2px solid var(--blue-light);
  padding-inline-start: 14px;
}
.form-status {
  margin-block-start: 18px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  display: none;
}
.form-status.is-visible { display: block; }

.contact-aside { display: flex; flex-direction: column; gap: 18px; }
.contact-line {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-block-end: 16px;
  border-block-end: 1px solid var(--hairline);
}
.contact-line b { font-size: 14.5px; }
.contact-line a { color: var(--blue-dark); font-weight: 700; }
.contact-line span { font-size: 14.5px; color: var(--slate); }

/* --- Footer -------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.72);
  padding-block: 56px 34px;
  font-size: 15px;
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 36px;
  padding-block-end: 34px;
  border-block-end: 1px solid var(--hairline-ink);
}
.footer-brand img { width: 135px; height: auto; }
.footer-brand p { margin-block-start: 16px; max-width: 38ch; }
.footer-col b {
  display: block;
  color: var(--white);
  font-size: 14.5px;
  font-weight: 700;
  margin-block-end: 14px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a:hover { color: var(--white); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  align-items: center;
  justify-content: space-between;
  padding-block-start: 24px;
  font-size: 14px;
}
.footer-bottom a { text-decoration: underline; text-underline-offset: 3px; }

/* --- Reveal on scroll ---------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; }
  .btn:hover { transform: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .hero { padding-block: 56px 68px; }
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The v1.1 lockup is wider than the old wordmark, so the full horizontal
   navigation needs about 1080 px of content width. It collapses into the menu
   button below that point and the language switch moves inside the panel. */
@media (max-width: 1140px) {
  .site-nav { display: none; }
  .nav-toggle { display: block; }
  .header-actions .lang-toggle { display: none; }
  .site-nav.is-open .nav-lang {
    display: inline-flex;
    align-self: flex-start;
    margin-block-start: 10px;
  }
  .site-nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 1px);
    background: var(--white);
    border-block-end: 1px solid var(--hairline);
    padding: 12px 24px 18px;
    gap: 2px;
    box-shadow: var(--shadow-card);
  }
  .site-nav.is-open a { padding: 12px 12px; font-size: 16.5px; }
  .site-nav.is-open a[aria-current] {
    box-shadow: none;
    background: var(--cloud);
    color: var(--ink);
  }
}

@media (max-width: 900px) {
  .seg-card::before, .seg-card::after { display: none; }
  .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .cta-band { grid-template-columns: minmax(0, 1fr); padding: 38px 28px; }
  .band { padding: 30px 26px; }
  .section { padding-block: 64px; }
  /* The cards stack here, so their illustrations can stay beside the copy. */
  .offer-card__art svg { max-width: 168px; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .shell { padding-inline: 16px; }
  .header-inner { gap: 12px; min-height: 78px; }
  .header-actions .btn-login { display: none; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .tpl-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid .field { grid-column: 1 / -1; }
  .release { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .mock-body { grid-template-columns: minmax(0, 1fr); }
  .mock-side { display: none; }
  .mock-table { min-width: 440px; }
  .mock-scroll { margin-inline: -10px; padding-inline: 10px; }
  .hero h1 { font-size: 1.95rem; }
  .offer-features--four { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .offer-features li { font-size: 14px; }
  .offer-cta { font-size: 15.5px; }
}