/* ============================================================================
   qstjo.com — design system  ·  v2 "living"
   ----------------------------------------------------------------------------
   Reference the client chose: Stripe, with bold motion.

   What carries it:
   · A LIVE WebGL mesh gradient (assets/js/gradient.js) behind a diagonally
     cut hero — QST violet/blue/cyan/magenta, Protocol pages in blues.
   · A floating product stage — the real dashboard tilted in 3D, with UI
     cards drifting in front and moving with the scroll.
   · The sovereignty diagram animated: packets travelling inside the network
     boundary, and the one bound for the cloud stopped at the line.
   · Cards that tilt toward the pointer, figures that count up, sections that
     arrive with a stagger, and the live gradient again in the closing call.

   Motion is real but never load-bearing: every piece degrades to a static,
   fully readable page under prefers-reduced-motion or without WebGL / JS.

   Logical properties throughout, so the Arabic RTL build is this same sheet.
   ========================================================================= */

/* ── 1. Tokens ──────────────────────────────────────────────────────────── */
:root {
  --brand:       #5E17EB;
  --brand-deep:  #4310C4;
  --brand-soft:  #F1EBFE;
  --brand-rgb:   94, 23, 235;

  /* The four colours the live gradient flows between. */
  --mesh-1: #5E17EB;
  --mesh-2: #0078AE;
  --mesh-3: #00C8F0;
  --mesh-4: #E23BD1;

  --ink:   #0C2238;
  --body:  #425466;
  --muted: #6B7C93;
  --dim:   #8792A2;
  --line:  #E6EBF1;
  --line-2:#DCE3EB;
  --soft:  #F6F9FC;
  --card:  #FFFFFF;
  --teal:  #17A47C;
  --navy:  #0C2238;

  --fg: var(--body);
  --fg-strong: var(--ink);
  --fg-muted: var(--muted);
  --fg-dim: var(--dim);
  --bg: #FFFFFF;
  --paper: var(--soft);

  --font-en: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ar: "IBM Plex Sans Arabic", "Plus Jakarta Sans", system-ui, sans-serif;
  --font: var(--font-en);

  --wrap: 1260px;
  --wrap-tight: 820px;
  --gutter: clamp(1.25rem, 4.5vw, 3.5rem);
  --section-y: clamp(4.5rem, 8vw, 7.5rem);

  --r-sm: 10px;
  --r: 16px;
  --r-lg: 22px;

  --sh-card:  0 1px 1px rgba(0, 0, 0, .03), 0 3px 8px -3px rgba(50, 50, 93, .09);
  --sh-lift:  0 30px 60px -12px rgba(50, 50, 93, .22), 0 18px 36px -18px rgba(0, 0, 0, .22);
  --sh-float: 0 50px 100px -20px rgba(50, 50, 93, .38), 0 30px 60px -30px rgba(0, 0, 0, .42);

  --ease: cubic-bezier(.22, 1, .36, 1);

  color-scheme: light;
}

[lang='ar'] { --font: var(--font-ar); }

/* Protocol skin — body class from body_class(), so no flash of wrong brand. */
[data-brand='protocol'],
body.brand-protocol,
.brand-protocol {
  --brand:      #0078AE;
  --brand-deep: #005F8A;
  --brand-soft: #E7F3FA;
  --brand-rgb:  0, 120, 174;
  --mesh-1: #0078AE;
  --mesh-2: #1B4FD8;
  --mesh-3: #00C8F0;
  --mesh-4: #17A47C;
}

/* ── 2. Reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: 6rem;
  overflow-x: clip;
}
body {
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* clip, not hidden — hidden turns body into a scroll container. */
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--brand-soft); color: var(--brand-deep); }

/* ── 3. Type ────────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  color: var(--fg-strong);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.035em;
  text-wrap: balance;
}
[lang='ar'] h1, [lang='ar'] h2, [lang='ar'] h3, [lang='ar'] h4 {
  letter-spacing: 0; line-height: 1.38; font-weight: 700;
}

.display { font-size: clamp(2.6rem, 1.3rem + 4.4vw, 5.1rem); line-height: 1.02; letter-spacing: -.048em; }
.h1      { font-size: clamp(2.2rem, 1.3rem + 3.2vw, 4rem); letter-spacing: -.042em; }
.h2      { font-size: clamp(2rem, 1.3rem + 2.5vw, 3.25rem); letter-spacing: -.04em; line-height: 1.06; }
.h3      { font-size: 1.2rem; letter-spacing: -.02em; }
[lang='ar'] .display { font-size: clamp(2.2rem, 1.3rem + 3.2vw, 4rem); }
[lang='ar'] .h2      { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.7rem); }

.lead {
  font-size: clamp(1.08rem, 1rem + .35vw, 1.25rem);
  line-height: 1.65;
  color: var(--body);
  max-width: 58ch;
  text-wrap: pretty;
}

/* Eyebrow: gradient text, the brand's colours in motion even when static. */
.eyebrow {
  display: inline-block;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.005em;
  background: linear-gradient(95deg, var(--mesh-1), var(--mesh-2) 55%, var(--mesh-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-block-end: 1rem;
}

.muted { color: var(--fg-muted); }
.grad {
  background: linear-gradient(95deg, var(--mesh-1), var(--mesh-2) 55%, var(--mesh-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── 4. Layout ──────────────────────────────────────────────────────────── */
.wrap { inline-size: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }
.wrap-tight { inline-size: min(100% - var(--gutter) * 2, var(--wrap-tight)); margin-inline: auto; }
.section { padding-block: var(--section-y); position: relative; background: var(--bg); }
.section.paper, .paper { background: var(--soft); }
.section-head { max-inline-size: 660px; margin-block-end: clamp(2.5rem, 4.5vw, 3.75rem); }
.section-head .lead { margin-block-start: 1.1rem; }

.ink-band {
  background: var(--navy); color: #C3D2DF;
  --fg: #C3D2DF; --fg-strong: #fff; --fg-muted: #93A6B8; --line: rgba(255,255,255,.14); --card: rgba(255,255,255,.05);
}
.ink-band h2, .ink-band h3 { color: #fff; }

.skip {
  position: absolute; inset-block-start: -100%; inset-inline-start: 1rem; z-index: 200;
  background: var(--brand); color: #fff; padding: .7rem 1.2rem; border-radius: 0 0 var(--r-sm) var(--r-sm);
}
.skip:focus { inset-block-start: 0; }
.grain, .orb { display: none; }

/* ── 5. Header — glass over the gradient ────────────────────────────────── */
.hdr {
  position: sticky; inset-block-start: 0; z-index: 100;
  border-block-end: 1px solid rgba(230, 235, 241, .7);
}
/* The frosted glass lives on a layer BEHIND the header, never on .hdr itself:
   backdrop-filter on .hdr makes it the containing block of the fixed mobile
   menu panel, which then collapses into the 78px header and cannot be tapped. */
.hdr::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
}
.hdr-in { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); min-block-size: 78px; }

.brand-lockup { display: flex; align-items: center; gap: .8rem; flex: 0 0 auto; }
.brand-lockup img { block-size: 44px; inline-size: auto; }
body.brand-protocol .brand-lockup img { block-size: 38px; }
@media (max-width: 640px) { .brand-lockup img, body.brand-protocol .brand-lockup img { block-size: 34px; } }
.brand-lockup .sep { inline-size: 1px; block-size: 22px; background: var(--line-2); }
.brand-lockup .sub { font-size: .8rem; font-weight: 600; color: var(--fg-muted); }

.nav { display: flex; align-items: center; gap: .15rem; margin-inline-start: auto; }
.nav a {
  position: relative; padding: .5rem .85rem; border-radius: 999px;
  font-size: .95rem; font-weight: 600; color: var(--ink);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav a:hover { background: rgba(12, 34, 56, .05); }
/* The current page: brand colour, bolder, and an underline bar — the only
   coloured item in the menu, so it reads as "you are here". */
.nav a[aria-current='page'] { color: var(--brand); font-weight: 700; }
.nav a[aria-current='page']::after {
  content: ''; position: absolute; inset-inline: .85rem; inset-block-end: .15rem;
  block-size: 2px; border-radius: 2px; background: currentColor;
}

.hdr-actions { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
.lang-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .85rem; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(255,255,255,.8);
  font-size: .82rem; font-weight: 700; color: var(--ink); cursor: pointer;
  transition: border-color .2s, color .2s;
}
.lang-btn:hover { border-color: var(--brand); color: var(--brand); }
.burger {
  display: none; inline-size: 42px; block-size: 42px; border-radius: 12px;
  border: 1px solid var(--line-2); background: #fff; cursor: pointer; position: relative;
}
.burger span { position: absolute; inset-inline: 11px; block-size: 2px; border-radius: 2px; background: var(--ink); transition: transform .3s var(--ease), opacity .2s; }
.burger span:nth-child(1) { inset-block-start: 14px; }
.burger span:nth-child(2) { inset-block-start: 20px; }
.burger span:nth-child(3) { inset-block-start: 26px; }
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── 6. Buttons — pills with a travelling chevron ───────────────────────── */
.btn, .btn-row .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .82rem 1.45rem; border: 0; border-radius: 999px;
  background: var(--brand); color: #fff;
  font-weight: 700; font-size: .98rem; white-space: nowrap; cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(var(--brand-rgb), .75);
  transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-row .wp-block-button__link::after, .btn::after {
  content: ''; inline-size: 7px; block-size: 7px;
  border-inline-end: 2px solid currentColor; border-block-start: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .25s var(--ease);
}
[dir='rtl'] .btn-row .wp-block-button__link::after, [dir='rtl'] .btn::after { transform: rotate(-45deg); }
.btn:hover, .btn-row .wp-block-button__link:hover {
  background: var(--brand-deep); transform: translateY(-1px);
  box-shadow: 0 16px 30px -12px rgba(var(--brand-rgb), .85);
}
.btn:hover::after, .btn-row .wp-block-button__link:hover::after { transform: translateX(3px) rotate(45deg); }
[dir='rtl'] .btn:hover::after, [dir='rtl'] .btn-row .wp-block-button__link:hover::after { transform: translateX(-3px) rotate(-45deg); }

.btn-ghost, .btn-row .is-style-ghost .wp-block-button__link {
  background: transparent; color: var(--ink); box-shadow: none; padding-inline: .5rem;
}
.btn-ghost:hover, .btn-row .is-style-ghost .wp-block-button__link:hover {
  background: transparent; color: var(--brand); box-shadow: none; transform: none;
}
.btn svg, .lang-btn svg, .chip svg { inline-size: 16px; block-size: 16px; flex: 0 0 auto; }
.btn .arw { display: none; }                         /* the ::after chevron replaces it */
.btn-row, .btn-row.wp-block-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.btn-row .wp-block-button { margin: 0; }

/* ── 7. Hero — living gradient, diagonal cut ────────────────────────────── */
.hero {
  position: relative; overflow: hidden; isolation: isolate; background: #fff;
  padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(6rem, 11vw, 9.5rem);
}
.hero > .wrap { position: relative; z-index: 1; }

.atmos { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero .atmos {
  clip-path: polygon(0 0, 100% 0, 100% 76%, 0 100%);
  /* fallback when WebGL is unavailable — the canvas fades in over it */
  background: linear-gradient(118deg, var(--mesh-1), var(--mesh-2) 42%, var(--mesh-3) 72%, var(--mesh-4));
}
.hero .atmos::after {
  /* keep the reading side of the hero bright; let the colour run free behind the product */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.93) 22%, rgba(255,255,255,.42) 44%, rgba(255,255,255,0) 60%);
}
[dir='rtl'] .hero .atmos::after {
  background: linear-gradient(270deg, #fff 0%, rgba(255,255,255,.93) 22%, rgba(255,255,255,.42) 44%, rgba(255,255,255,0) 60%);
}
@media (max-width: 1079px) {
  .hero .atmos { clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%); }
  .hero .atmos::after, [dir='rtl'] .hero .atmos::after {
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.94) 34%, rgba(255,255,255,.3) 58%, rgba(255,255,255,0) 72%);
  }
}

.mesh {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
  opacity: 0; transition: opacity 1.6s var(--ease);
}
.mesh.live { opacity: 1; }

.hero-split { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 1080px) { .hero-split { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); } }
.hero-copy { min-inline-size: 0; }
.hero .lead { margin-block-start: 1.4rem; max-inline-size: 46ch; font-size: clamp(1.12rem, 1rem + .45vw, 1.32rem); }
.hero .btn-row { margin-block-start: 2.1rem; }
.hero .chips { margin-block-start: 1.6rem; }

/* The hero eyebrow becomes a glass pill with a live dot. */
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .38rem .9rem .38rem .6rem; border-radius: 999px;
  background: rgba(255, 255, 255, .8); border: 1px solid var(--line-2);
  -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--ink); font-size: .84rem; margin-block-end: 1.5rem;
  box-shadow: var(--sh-card);
}
.hero .eyebrow::before {
  content: ''; inline-size: 8px; block-size: 8px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .18);
  animation: pulse 2.2s ease-in-out infinite;
}

/* Hero copy rises in on load, one beat after another. */
.hero-copy > *, .hero > .wrap > :not(.hero-split) { animation: rise .95s var(--ease) both; }
.hero-copy > :nth-child(1) { animation-delay: .05s; }
.hero-copy > :nth-child(2) { animation-delay: .13s; }
.hero-copy > :nth-child(3) { animation-delay: .22s; }
.hero-copy > :nth-child(4) { animation-delay: .31s; }
.hero-copy > :nth-child(5) { animation-delay: .4s; }

.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .85rem; border-radius: 999px;
  background: rgba(255, 255, 255, .78); border: 1px solid var(--line-2);
  font-size: .8rem; font-weight: 600; color: var(--ink);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.chip::before { content: ''; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--brand); }

/* ── 8. The floating product stage ──────────────────────────────────────── */
.stage { position: relative; min-block-size: clamp(330px, 36vw, 520px); }
.float {
  position: absolute;
  translate: 0 var(--py, 0px);                    /* scroll parallax, set by site.js */
  animation: floatIn 1.2s var(--ease) both, bob 9s ease-in-out infinite;
}
.f1 { inset-inline-start: 0; inset-block-start: 3%; inline-size: 94%; animation-delay: .15s, 0s; }
.f2 { inset-inline-end: -3%; inset-block-start: 50%; inline-size: min(300px, 46%); animation-delay: .5s, -3s; }
.f3 { inset-inline-start: 4%; inset-block-end: -4%; inline-size: min(290px, 44%); animation-delay: .75s, -6s; }

.win {
  border-radius: 14px; overflow: hidden; background: #fff; box-shadow: var(--sh-float);
  transform: perspective(1800px) rotateY(-13deg) rotateX(5deg);
  transform-origin: left center;
}
[dir='rtl'] .win { transform: perspective(1800px) rotateY(13deg) rotateX(5deg); transform-origin: right center; }
.win-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #F6F9FC; border-block-end: 1px solid var(--line); }
.win-bar i { inline-size: 9px; block-size: 9px; border-radius: 50%; background: #DCE3EB; }
.win-bar span { margin-inline-start: 10px; font-size: 11px; color: var(--dim); }
.win img { inline-size: 100%; display: block; }

.mini {
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .8); border-radius: 14px;
  padding: 14px 16px; box-shadow: var(--sh-lift);
}
.mini-head { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.mini-head b { color: var(--ink); font-weight: 700; }
.mini-ico {
  inline-size: 26px; block-size: 26px; border-radius: 8px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--mesh-1), var(--mesh-2));
}
.mini-ico svg { inline-size: 14px; block-size: 14px; }
.mini-tag { margin-inline-start: auto; font-size: 10.5px; font-weight: 700; color: #0E8A66; background: #E4F6EE; padding: 3px 8px; border-radius: 999px; }
.mini-lines { display: grid; gap: 7px; margin-block: 13px 12px; }
.mini-lines i {
  display: block; block-size: 7px; border-radius: 4px;
  /* a travelling sheen — the minutes are being written */
  background: linear-gradient(90deg, #E9EEF4 0%, #E9EEF4 40%, #D3DDFB 50%, #E9EEF4 60%, #E9EEF4 100%);
  background-size: 250% 100%;
  animation: sheen 2.6s linear infinite;
}
.mini-lines i:nth-child(2) { animation-delay: .25s; }
.mini-lines i:nth-child(3) { animation-delay: .5s; }
.mini-lines i:nth-child(4) { animation-delay: .75s; }
.mini-foot { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: #0E8A66; }
.mini-foot svg { inline-size: 14px; block-size: 14px; }
.vote { display: grid; gap: 8px; margin-block: 13px 11px; }
.vbar { display: block; block-size: 8px; border-radius: 999px; background: #FBE7EC; overflow: hidden; }
.vfill { display: block; block-size: 100%; inline-size: 78%; border-radius: 999px; background: linear-gradient(90deg, #17A47C, #3DDC97); animation: grow 1.6s var(--ease) 1.1s both; }
.vlbl { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); }
.vlbl b { color: var(--ink); }

@media (max-width: 1079px) { .stage { max-inline-size: 640px; margin-inline: auto; inline-size: 100%; } }
@media (max-width: 620px) {
  .stage { min-block-size: 300px; }
  .f1 { inline-size: 100%; }
  .f2 { inline-size: 62%; inset-block-start: 58%; inset-inline-end: 0; }
  .f3 { display: none; }
  .win, [dir='rtl'] .win { transform: none; }
}

/* ── 9. Figures ─────────────────────────────────────────────────────────── */
.section:has(> .wrap > .stats) { padding-block: clamp(.5rem, 2vw, 1.5rem) clamp(3rem, 6vw, 5rem); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border-block: 1px solid var(--line); }
.stat { padding: 1.7rem 1.5rem; border-inline-start: 1px solid var(--line); }
.stat:first-child { border-inline-start: 0; }
.stat b {
  display: inline-block;
  font-size: clamp(2.3rem, 1.6rem + 2vw, 3.4rem); font-weight: 800; letter-spacing: -.045em; line-height: 1;
  background: linear-gradient(100deg, var(--mesh-1), var(--mesh-2) 55%, var(--mesh-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-block-end: .55rem;
}
.stat span { display: block; font-size: .9rem; color: var(--muted); line-height: 1.45; }
@media (max-width: 700px) { .stat { border-inline-start: 0; border-block-start: 1px solid var(--line); } .stat:first-child { border-block-start: 0; } }

/* ── 10. Cards — they tilt toward the pointer ───────────────────────────── */
.grid { display: grid; gap: 1.25rem; }
.g-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.g-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.card {
  position: relative; padding: 1.8rem 1.7rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh-card);
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition:
    transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease),
    opacity .9s var(--ease) var(--d, 0s), translate .9s var(--ease) var(--d, 0s), scale .9s var(--ease) var(--d, 0s);
}
.card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--brand-rgb), .11), transparent 62%);
  opacity: 0; transition: opacity .35s var(--ease);
}
.card:hover { box-shadow: var(--sh-lift); border-color: transparent; }
.card:hover::before { opacity: 1; }
.card h3 { margin-block-end: .55rem; }
.card p { color: var(--muted); font-size: .98rem; }

.card-num {
  display: block; font-size: .82rem; font-weight: 800; margin-block-end: .9rem;
  background: linear-gradient(95deg, var(--mesh-1), var(--mesh-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.card-tag {
  position: absolute; inset-block-start: 1.1rem; inset-inline-end: 1.1rem;
  font-size: .7rem; font-weight: 700; color: var(--brand-deep);
  padding: .25rem .6rem; border-radius: 999px; background: var(--brand-soft);
}

.bento { display: grid; gap: 1.25rem; grid-template-columns: repeat(6, 1fr); }
.bento > * { grid-column: span 6; }
@media (min-width: 820px) {
  .bento > * { grid-column: span 3; }
  .bento > :nth-child(1) { grid-column: span 4; }
  .bento > :nth-child(2) { grid-column: span 2; }
  .bento > :nth-child(5) { grid-column: span 2; }
  .bento > :nth-child(6) { grid-column: span 4; }
}

.ico {
  inline-size: 44px; block-size: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--mesh-1), var(--mesh-2));
  box-shadow: 0 10px 20px -10px rgba(var(--brand-rgb), .8);
  margin-block-end: 1.1rem; flex: 0 0 auto;
}
.ico svg { inline-size: 20px; block-size: 20px; }

/* Product cards: a gradient cap marks the three products as one family. */
.product { display: grid; gap: .55rem; align-content: start; padding-block-start: 2.1rem; }
.product::after {
  content: ''; position: absolute; inset-block-start: -1px; inset-inline: -1px; block-size: 4px;
  border-start-start-radius: var(--r); border-start-end-radius: var(--r);
  background: linear-gradient(90deg, var(--mesh-1), var(--mesh-2), var(--mesh-3));
}
.product .pkind { font-size: .78rem; font-weight: 700; color: var(--brand); }
.product .pname { font-size: 1.55rem; font-weight: 800; letter-spacing: -.035em; color: var(--ink); margin-block: .1rem .2rem; }
.product .btn-row { margin-block-start: .8rem; }
.card.is-protocol {
  --brand: #0078AE; --brand-deep: #005F8A; --brand-soft: #E7F3FA; --brand-rgb: 0, 120, 174;
  --mesh-1: #0078AE; --mesh-2: #1B4FD8; --mesh-3: #00C8F0;
}

/* ── 11. Sovereignty — the animated diagram ─────────────────────────────── */
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
.split-wide { grid-template-columns: 1fr; }
@media (min-width: 980px) { .split-wide { grid-template-columns: .9fr 1.1fr; } }
@media (min-width: 1000px) { .split-arch { grid-template-columns: .78fr 1.22fr; } }

.arch {
  margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(.9rem, 2vw, 1.5rem); box-shadow: var(--sh-lift);
}
.arch-svg { inline-size: 100%; block-size: auto; overflow: visible; }
.arch-svg text { font-family: var(--font); }

.arch-svg .boundary { fill: #FAFCFE; stroke: #9DB4C9; stroke-width: 1.5; stroke-dasharray: 7 6; animation: march 1.4s linear infinite; }
.arch-svg .bl { font-size: 10.5px; font-weight: 700; letter-spacing: .13em; fill: var(--dim); }
[lang='ar'] .arch-svg .bl { letter-spacing: 0; font-size: 12.5px; }
.arch-svg .st { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; fill: #0E8A66; text-anchor: end; }
[lang='ar'] .arch-svg .st { letter-spacing: 0; font-size: 12px; }
.arch-svg .stdot { fill: var(--teal); animation: blink 1.8s ease-in-out infinite; }

.arch-svg .n rect { fill: #fff; stroke: var(--line-2); stroke-width: 1; }
.arch-svg .n.hi rect { fill: var(--brand-soft); stroke: var(--brand); }
.arch-svg .nl { font-size: 13px; font-weight: 700; fill: var(--ink); text-anchor: middle; }
.arch-svg .n.hi .nl { fill: var(--brand-deep); }
.arch-svg .ns { font-size: 10.5px; font-weight: 500; fill: var(--dim); text-anchor: middle; }
.arch-svg .n.hi .ns { fill: var(--brand); }

.arch-svg .wire { fill: none; stroke: #CFDBE7; stroke-width: 1.6; stroke-linejoin: round; }
.arch-svg .wire-out { stroke: #EAB0BD; stroke-dasharray: 4 5; }
.arch-svg .wire-x { stroke: #EAB0BD; stroke-dasharray: 2 6; opacity: .7; }
.arch-svg .pkt { fill: var(--brand); filter: drop-shadow(0 0 4px rgba(var(--brand-rgb), .85)); }
.arch-svg .pkt-2 { fill: var(--mesh-3); filter: drop-shadow(0 0 4px rgba(0, 200, 240, .85)); }
.arch-svg .pkt-out { fill: #E0435F; filter: drop-shadow(0 0 5px rgba(224, 67, 95, .9)); }
.arch-svg .hit { fill: none; stroke: #E0435F; stroke-width: 2; }
.arch-svg .xmark path { fill: none; stroke: #E0435F; stroke-width: 2.6; stroke-linecap: round; }
.arch-svg .cloud path { fill: none; stroke: #C0506A; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.arch-svg .ol { font-size: 12.5px; font-weight: 700; fill: #8E3149; text-anchor: middle; }
.arch-svg .ob { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; fill: #E0435F; text-anchor: middle; }
[lang='ar'] .arch-svg .ob { letter-spacing: 0; font-size: 12px; }
.arch-svg .os { font-size: 10.5px; fill: #A5697A; text-anchor: middle; }

.ticks { list-style: none; padding: 0; display: grid; gap: .7rem; margin-block-start: 1.6rem; }
.ticks li { display: flex; gap: .65rem; align-items: start; color: var(--body); font-size: 1rem; }
.ticks svg {
  inline-size: 22px; block-size: 22px; padding: 4px; border-radius: 50%; flex: 0 0 auto; margin-block-start: .1rem;
  color: #fff; background: linear-gradient(135deg, var(--teal), #3DDC97);
}

.callout {
  margin-block-start: 1.75rem; padding: 1.2rem 1.4rem; border-radius: var(--r);
  background: linear-gradient(135deg, rgba(var(--brand-rgb), .07), rgba(0, 200, 240, .07));
  border: 1px solid rgba(var(--brand-rgb), .15); color: var(--ink); font-weight: 500; max-width: 92ch;
}

/* ── 12. Screenshots ────────────────────────────────────────────────────── */
.shot { margin: 0; border-radius: var(--r); overflow: hidden; background: #fff; box-shadow: var(--sh-lift); }
.shot img { inline-size: 100%; display: block; }
.shots { position: relative; display: grid; gap: 1.25rem; }
@media (min-width: 900px) {
  .shots { padding-block-end: 4rem; }
  .shots .shot-lg { inline-size: 80%; box-shadow: var(--sh-float); }
  .shots .shot-tab { position: absolute; inline-size: 24%; inset-inline-end: 8%; inset-block-end: 1.2rem; }
  .shots .shot-phone { position: absolute; inline-size: 14%; inset-inline-end: 0; inset-block-end: 0; }
}
.hero-media .frame { border-radius: 14px; overflow: hidden; box-shadow: var(--sh-float); }
.hero-media .frame img { inline-size: 100%; display: block; }

/* ── 13. Lifecycle rail ─────────────────────────────────────────────────── */
.rail { display: grid; position: relative; }
.rail::before {
  content: ''; position: absolute; inset-block: 1.6rem; inset-inline-start: 21px; inline-size: 2px;
  background: linear-gradient(to bottom, var(--mesh-1), var(--mesh-2), var(--mesh-3)); opacity: .25;
}
.step { display: grid; grid-template-columns: 44px 1fr; gap: 1.3rem; padding-block: 1.1rem; align-items: start; }
.step-dot {
  inline-size: 44px; block-size: 44px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 2px solid var(--line-2); font-size: .8rem; font-weight: 800; color: var(--muted);
  position: relative; z-index: 1;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.step.lit .step-dot {
  border-color: transparent; color: #fff;
  background: linear-gradient(135deg, var(--mesh-1), var(--mesh-2));
  box-shadow: 0 0 0 6px rgba(var(--brand-rgb), .13);
}
.step h3 { margin-block-end: .3rem; }
.step p { color: var(--muted); max-inline-size: 60ch; }

/* ── 14. Capability catalogue ───────────────────────────────────────────── */
.fgroup { border: 1px solid var(--line); border-radius: var(--r); background: #fff; overflow: hidden; box-shadow: var(--sh-card); }
.fgroup + .fgroup { margin-block-start: 1rem; }
.fgroup-head { display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.5rem; border-block-end: 1px solid var(--line); background: var(--soft); }
.fgroup-head .ico { margin-block-end: 0; inline-size: 36px; block-size: 36px; border-radius: 10px; }
.fgroup-head .ico svg { inline-size: 17px; block-size: 17px; }
.fgroup-head h3 { font-size: 1.1rem; }
.fgroup-head .count { margin-inline-start: auto; font-size: .8rem; font-weight: 700; color: var(--brand); background: var(--brand-soft); padding: .2rem .6rem; border-radius: 999px; }
.flist { list-style: none; padding: .5rem 1.5rem 1.2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 0 2rem; }
.flist li { display: flex; align-items: start; gap: .6rem; padding-block: .55rem; color: var(--body); font-size: .95rem; border-block-end: 1px solid var(--line); }
.flist li:last-child { border-block-end: 0; }
.flist svg { inline-size: 16px; block-size: 16px; color: var(--teal); flex: 0 0 auto; margin-block-start: .3rem; }

/* ── 15. Sectors ────────────────────────────────────────────────────────── */
.sectors { display: flex; flex-wrap: wrap; gap: .55rem; }
.sector {
  padding: .6rem 1.15rem; border-radius: 999px; background: #fff; border: 1px solid var(--line-2);
  font-weight: 600; font-size: .95rem; color: var(--ink);
  transition: color .2s, border-color .2s, transform .2s var(--ease), box-shadow .2s;
}
.sector:hover { color: var(--brand); border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--sh-card); }

/* ── 16. Closing call — the live gradient returns ───────────────────────── */
.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 28px; padding: clamp(2.75rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center; color: #fff;
  background: linear-gradient(118deg, var(--mesh-1), var(--mesh-2) 50%, var(--mesh-3));
  box-shadow: var(--sh-float);
}
.cta-band .atmos { z-index: -1; }
.cta-band .atmos::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 18, 48, .18), rgba(10, 18, 48, .38)); }
.cta-band h2 { color: #fff; margin-block-end: .9rem; }
.cta-band .lead { color: rgba(255, 255, 255, .88); margin-inline: auto; margin-block-end: 2rem; }
.cta-band .btn-row { justify-content: center; }
.cta-band .btn, .cta-band .wp-block-button__link { background: #fff; color: var(--ink); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .55); }
.cta-band .btn:hover, .cta-band .wp-block-button__link:hover { background: #F1F4FF; color: var(--ink); }

/* ── 17. Forms ──────────────────────────────────────────────────────────── */
.form { display: grid; gap: 1.5rem; }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 1rem; }
legend { font-size: .95rem; font-weight: 800; color: var(--ink); padding: 0; margin-block-end: .3rem; }
.frow { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.field { display: grid; gap: .4rem; }
.field label { font-size: .9rem; font-weight: 600; color: var(--ink); }
.field .req { color: var(--brand); }
.field .hint { font-size: .8rem; color: var(--dim); }
.field input, .field select, .field textarea {
  inline-size: 100%; padding: .8rem .95rem; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: #fff; color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-block-size: 130px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--dim); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .14); }
.field input[aria-invalid='true'], .field textarea[aria-invalid='true'] { border-color: #D6395A; }
.field .err { font-size: .8rem; color: #D6395A; }
.checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: .5rem; }
.check {
  display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: #fff; cursor: pointer; font-size: .92rem;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.check:hover { border-color: var(--brand); }
.check input { inline-size: 16px; block-size: 16px; accent-color: var(--brand); flex: 0 0 auto; }
.check:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .1); }
.form-note { font-size: .85rem; color: var(--dim); }
.form-msg { padding: 1.1rem 1.25rem; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: #fff; }
.form-msg strong { display: block; margin-block-end: .25rem; color: var(--ink); }
.form-msg.ok { border-color: var(--teal); background: #E9F8F1; }
.form-msg.bad { border-color: #D6395A; background: #FDF0F3; }

/* ── 18. Contact ────────────────────────────────────────────────────────── */
.ccard { display: flex; gap: 1rem; align-items: start; }
.ccard .ico { margin-block-end: 0; }
.ccard .lbl { font-size: .8rem; color: var(--dim); display: block; margin-block-end: .2rem; }
.ccard .val { font-weight: 700; font-size: 1.05rem; color: var(--ink); word-break: break-word; }
.ccard a.val:hover { color: var(--brand); }
.map { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); min-block-size: 320px; box-shadow: var(--sh-card); }
.map iframe { inline-size: 100%; block-size: 100%; min-block-size: 320px; border: 0; display: block; }

/* ── 19. Footer ─────────────────────────────────────────────────────────── */
.ftr { background: var(--navy); color: #93A6B8; padding-block: clamp(3rem, 6vw, 4.5rem) 1.75rem; --line: rgba(255, 255, 255, .12); }
.ftr-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 760px) { .ftr-grid { grid-template-columns: 1.7fr 1fr 1fr 1.2fr; } }
.ftr h4 { font-size: .8rem; font-weight: 700; color: #fff; margin-block-end: 1rem; letter-spacing: 0; }
.ftr ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.ftr a { color: #B8C8D7; transition: color .2s; font-size: .95rem; }
.ftr a:hover { color: #fff; }
.ftr li { font-size: .95rem; }
.ftr .blurb { color: #93A6B8; font-size: .95rem; max-inline-size: 38ch; margin-block-start: 1.1rem; }
.ftr-base {
  margin-block-start: clamp(2.5rem, 4vw, 3.25rem); padding-block-start: 1.5rem; border-block-start: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; font-size: .88rem; color: #7F93A6;
}

/* ── 20. Reveal — sections arrive with a stagger ────────────────────────── */
/* Uses the independent `translate`/`scale` properties so it composes with the
   cards' tilt `transform` instead of fighting it. Gated on .js so a failed
   observer can never leave a section invisible. */
.js [data-reveal] { opacity: 0; translate: 0 30px; scale: .985; }
.js [data-reveal]:not(.card) {
  transition: opacity .9s var(--ease) var(--d, 0s), translate .9s var(--ease) var(--d, 0s), scale .9s var(--ease) var(--d, 0s);
}
.js [data-reveal].in { opacity: 1; translate: 0 0; scale: 1; }

/* ── 21. Keyframes ──────────────────────────────────────────────────────── */
@keyframes rise    { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
@keyframes floatIn { from { opacity: 0; scale: .92; } to { opacity: 1; scale: 1; } }
@keyframes bob     { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes pulse   { 0%, 100% { box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .18); } 50% { box-shadow: 0 0 0 8px rgba(var(--brand-rgb), 0); } }
@keyframes sheen   { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@keyframes grow    { from { inline-size: 0; } }
@keyframes march   { to { stroke-dashoffset: -26; } }
@keyframes blink   { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ── 22. Language gate (static build only) ──────────────────────────────── */
.gate { min-block-size: 100svh; display: grid; place-items: center; text-align: center; }
.gate-pick { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-block-start: 2rem; }
.gate-pick a { min-inline-size: 210px; padding: 1.2rem 1.7rem; border-radius: var(--r); border: 1px solid var(--line-2); background: #fff; }
.gate-pick b { display: block; font-size: 1.2rem; color: var(--ink); }

/* ── 23. Responsive nav ─────────────────────────────────────────────────── */
/* Eight menu items need ~1100px on one line (Arabic wraps below that), so the
   burger takes over from 1100px down. */
@media (max-width: 1100px) {
  .burger { display: block; }
  .nav {
    position: fixed; inset-block-start: 78px; inset-inline: 0; inset-block-end: 0;
    flex-direction: column; align-items: stretch; gap: .25rem; padding: 1.25rem var(--gutter);
    background: rgba(255, 255, 255, .97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease); overflow-y: auto;
  }
  .nav.open { opacity: 1; transform: none; pointer-events: auto; }
  .nav a { padding: .95rem 1rem; font-size: 1.1rem; border-radius: var(--r-sm); }
  .nav a[aria-current='page'] { background: rgba(12, 34, 56, .05); }
  .nav a[aria-current='page']::after { inset-inline: auto; inset-inline-start: 0; inset-block: .7rem; block-size: auto; inline-size: 3px; }
  /* The actions stay pinned to the far edge once the menu leaves the row. */
  .hdr-actions { margin-inline-start: auto; }
  .lang-btn { block-size: 42px; }
  /* Scrolling inside the open menu never scrolls the page behind it. */
  .nav { overscroll-behavior: contain; }
  /* Lock the ROOT, not <body>: overflow on body turns it into the sticky
     header's scroll container, so the header scrolled away under the menu. */
  html.nav-open { overflow: hidden; }
}
@media (max-width: 560px) {
  .brand-lockup .sep, .brand-lockup .sub { display: none; }
  .btn-row .wp-block-button__link { inline-size: 100%; }
  .btn-row, .btn-row.wp-block-buttons { flex-direction: column; align-items: stretch; }
  .btn-row .wp-block-button { inline-size: 100%; }
}

/* ── 24. WordPress integration ──────────────────────────────────────────── */
.wp-site-blocks { position: relative; }
.qst .wp-site-blocks > .is-layout-constrained > :where(:not(.alignwide):not(.alignfull)) { max-width: none; margin-inline: 0; }
.qst .wp-block-group.section, .qst .wp-block-group.hero { margin-block: 0; }
.qst :where(.wp-block-group, .wp-block-columns) > * { margin-block-start: 0; }
.admin-bar .hdr { inset-block-start: 32px; }
@media (max-width: 782px) { .admin-bar .hdr { inset-block-start: 46px; } }
.editor-styles-wrapper .atmos { display: none !important; }
.editor-styles-wrapper [data-reveal] { opacity: 1 !important; translate: none !important; scale: none !important; }
.qst .entry-content > p { color: var(--muted); max-width: 68ch; }

/* ── 25. Reduced motion & print ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-reveal], [data-reveal] { opacity: 1; translate: none; scale: none; }
  .float { translate: none !important; }
  .arch-svg .pkt, .arch-svg .pkt-out, .arch-svg .hit { display: none; }
}
@media print {
  .hdr, .atmos, .ftr, .btn, .map, .stage { display: none !important; }
  body { background: #fff; color: #000; }
  .cta-band { background: #fff !important; color: #000 !important; box-shadow: none; }
}

/* ── 26. Refinements after the first live review ────────────────────────── */

/* The product screenshots carry their own browser/device chrome and are now
   cropped to it — so frames are transparent, and shadows follow the actual
   silhouette (drop-shadow) rather than a rectangle drawn around it. */
.win { background: transparent; border-radius: 12px; }
.shot, .shots .shot-lg, .shots .shot-tab, .shots .shot-phone, .hero-media .frame {
  background: transparent; box-shadow: none; border-radius: 0; overflow: visible;
}
.shot img, .hero-media .frame img {
  filter: drop-shadow(0 28px 36px rgba(50, 50, 93, .26)) drop-shadow(0 12px 18px rgba(0, 0, 0, .12));
}

/* A living gradient inside an ordinary section (the Protocol band on the home
   page): full colour behind the product, washed to white behind the copy so
   dark text never sits on saturated colour. */
.section > .atmos {
  background: linear-gradient(118deg, var(--mesh-1), var(--mesh-2) 42%, var(--mesh-3) 72%, var(--mesh-4));
}
.section > .atmos::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.97) 44%, rgba(255,255,255,.6) 58%, rgba(255,255,255,0) 76%);
}
[dir='rtl'] .section > .atmos::after {
  background: linear-gradient(270deg, #fff 0%, rgba(255,255,255,.97) 44%, rgba(255,255,255,.6) 58%, rgba(255,255,255,0) 76%);
}
@media (max-width: 979px) {
  .section > .atmos::after, [dir='rtl'] .section > .atmos::after {
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.95) 48%, rgba(255,255,255,.35) 78%, rgba(255,255,255,0) 100%);
  }
}
.section > :not(.atmos) { position: relative; z-index: 1; }

/* ── 27. Second review: buttons, rhythm, single-column heroes ───────────── */

/* Form buttons still carry an inline arrow icon from the earlier build; the
   CSS chevron replaces it, so hide the icon rather than show both. */
.btn > svg { display: none; }

/* Two sections with the same background side by side each added their full
   padding, opening a dead band between them. Keep one helping, not two. */
.section:not(.paper):not(.dark):not(.appband) + .section:not(.paper):not(.dark):not(.appband),
.section.paper + .section.paper { padding-block-start: 0; }

/* Heroes without the product stage run their copy further across the page,
   so the white wash has to reach further before the colour takes over. */
.hero:not(:has(.hero-split)) .atmos::after {
  background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.95) 40%, rgba(255,255,255,.55) 60%, rgba(255,255,255,0) 76%);
}
[dir='rtl'] .hero:not(:has(.hero-split)) .atmos::after {
  background: linear-gradient(270deg, #fff 0%, rgba(255,255,255,.95) 40%, rgba(255,255,255,.55) 60%, rgba(255,255,255,0) 76%);
}
@media (max-width: 1079px) {
  .hero:not(:has(.hero-split)) .atmos::after,
  [dir='rtl'] .hero:not(:has(.hero-split)) .atmos::after {
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.95) 55%, rgba(255,255,255,.3) 85%, rgba(255,255,255,0) 100%);
  }
}


/* ── 28. Content pass: product strip, story, anchors ────────────────────── */



/* About: the founding year as the section's anchor. */
.story { display: grid; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .story { grid-template-columns: auto 1fr; } }
.story-year {
  font-size: clamp(5rem, 2.5rem + 9vw, 11rem); font-weight: 800; letter-spacing: -.06em; line-height: .85;
  background: linear-gradient(110deg, var(--mesh-1), var(--mesh-2) 55%, var(--mesh-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.story-body .lead { margin-block-start: 1rem; max-inline-size: 62ch; }

/* In-page anchor targets clear the sticky header. */
.anchor { display: block; position: relative; inset-block-start: -90px; visibility: hidden; }



/* Grids honour their column count on desktop — auto-fit alone put 6 cards
   into 4 + 2 and would let .g-4 grow to five columns on wide screens. */
@media (min-width: 1000px) {
  .g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* ── 29. Logos: bigger brand mark, product logos ─────────────────────── */
.hdr-in { min-block-size: 92px; }
.brand-lockup img { block-size: 64px; }
body.brand-protocol .brand-lockup img { block-size: 50px; }
@media (max-width: 640px) {
  .hdr-in { min-block-size: 74px; }
  .brand-lockup img, body.brand-protocol .brand-lockup img { block-size: 46px; }
}
.ftr-grid > div:first-child > img { block-size: 64px !important; inline-size: auto; }



/* Product cards open with the product's logo. */
.card.product .plogo { display: block; block-size: 58px; inline-size: auto; max-inline-size: 100%; margin-block-end: 1.1rem; }


/* ── 30. Product rail — the three products, straight under the hero ────── */
/* Its own full-width row, lifted over the hero's diagonal edge: one card per
   product, every logo at one height, name and a line of description beneath. */
.prail-sec { position: relative; z-index: 3; margin-block-start: clamp(-8.5rem, -8vw, -3.5rem); padding-block-end: clamp(.5rem, 2vw, 1.5rem); }
.prail-label {
  display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1rem;
  font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.prail-label::before { content: ''; inline-size: 22px; block-size: 2px; border-radius: 2px; background: linear-gradient(90deg, #5E17EB, #0078AE); }
[dir='rtl'] .prail-label { letter-spacing: 0; text-transform: none; font-size: .9rem; }
.prail-grid { display: grid; gap: clamp(.9rem, 1.6vw, 1.25rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .prail-grid { grid-template-columns: 1fr; } }

.pcard {
  --pc: #5E17EB;
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "logo go" "body body";
  align-items: center; row-gap: 1.25rem;
  padding: 1.5rem 1.5rem 1.4rem;
  background: #fff; color: inherit; text-decoration: none;
  border: 1px solid rgba(15, 23, 42, .08); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 22px 44px -22px rgba(15, 23, 42, .32);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.pcard::before {
  content: ''; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 3px;
  background: var(--pc); transform: scaleX(.16); transform-origin: left center;
  transition: transform .5s var(--ease);
}
[dir='rtl'] .pcard::before { transform-origin: right center; }
.pcard:hover, .pcard:focus-visible {
  transform: translateY(-4px); border-color: transparent;
  box-shadow: 0 2px 4px rgba(15, 23, 42, .06), 0 32px 60px -24px rgba(15, 23, 42, .42);
}
.pcard:hover::before, .pcard:focus-visible::before { transform: scaleX(1); }
.pcard:focus-visible { outline: 2px solid var(--pc); outline-offset: 3px; }

.pcard-logo { grid-area: logo; display: flex; align-items: center; block-size: 50px; min-inline-size: 0; }
.pcard-logo img { block-size: 50px; inline-size: auto; max-inline-size: 100%; object-fit: contain; }

.pcard-go {
  grid-area: go; align-self: start; display: grid; place-items: center;
  inline-size: 40px; block-size: 40px; border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, .12); color: var(--ink);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.pcard-go svg { inline-size: 17px; block-size: 17px; display: block; }
[dir='rtl'] .pcard-go svg { transform: scaleX(-1); }
.pcard:hover .pcard-go, .pcard:focus-visible .pcard-go { background: var(--pc); border-color: var(--pc); color: #fff; transform: translateX(3px); }
[dir='rtl'] .pcard:hover .pcard-go, [dir='rtl'] .pcard:focus-visible .pcard-go { transform: translateX(-3px); }

.pcard-body { grid-area: body; display: flex; flex-direction: column; gap: .25rem; min-inline-size: 0; }
.pcard-body b { font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; color: var(--ink); line-height: 1.25; }
.pcard-body span { font-size: .94rem; color: var(--muted); line-height: 1.45; }

.pc-protocol { --pc: #0078AE; }
.pc-watheqa { --pc: #1B2A6E; }
.pc-correspondence { --pc: #86704A; }

.prail-grid > .pcard { animation: rise .9s var(--ease) both; }
.prail-grid > .pcard:nth-child(1) { animation-delay: .35s; }
.prail-grid > .pcard:nth-child(2) { animation-delay: .45s; }
.prail-grid > .pcard:nth-child(3) { animation-delay: .55s; }
@media (prefers-reduced-motion: reduce) {
  .prail-grid > .pcard { animation: none; }
  .pcard, .pcard::before, .pcard-go { transition: none; }
}

/* Rail label reads on any background: a pill, like the hero eyebrow. */
.prail-label {
  padding: .4rem .85rem .4rem .75rem; border-radius: 999px;
  background: rgba(255, 255, 255, .92); border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 4px 14px -8px rgba(15, 23, 42, .25);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* Tablets: one compact row per product — logo, name, arrow — no dead space. */
@media (max-width: 999px) {
  .prail-grid { grid-template-columns: 1fr; }
  .pcard {
    grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo body go";
    column-gap: clamp(1rem, 3vw, 1.75rem); row-gap: 0; padding: 1.15rem 1.25rem;
  }
  .pcard-logo { inline-size: 160px; }
  .pcard-go { align-self: center; }
}
/* Phones: back to the stacked card — a logo beside the text would crowd it. */
@media (max-width: 519px) {
  .pcard {
    grid-template-columns: 1fr auto; grid-template-areas: "logo go" "body body";
    row-gap: 1rem; padding: 1.2rem 1.2rem 1.15rem;
  }
  .pcard-logo { inline-size: auto; }
  .pcard-go { align-self: start; }
}

/* Stats: 4 across, then a clean 2×2 — never 3 + 1 with an orphan. */
.stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 859px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { border-inline-start: 1px solid var(--line); border-block-start: 0; }
  .stat:nth-child(odd) { border-inline-start: 0; }
  .stat:nth-child(n+3) { border-block-start: 1px solid var(--line); }
}
@media (max-width: 479px) {
  .stats { grid-template-columns: 1fr; }
  .stat, .stat:nth-child(odd) { border-inline-start: 0; }
  .stat:nth-child(n+2) { border-block-start: 1px solid var(--line); }
}


/* ── 31. Protocol — enterprise sections ─────────────────────────────────── */

/* The problem → how Protocol fixes it. One row per pain: today on the
   quiet side, the fix on the bright side, an arrow between them. */
.pf { display: grid; gap: 1rem; }
.pf-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1.15fr);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh-card); overflow: hidden;
  transition: box-shadow .35s var(--ease), opacity .9s var(--ease) var(--d, 0s), translate .9s var(--ease) var(--d, 0s), scale .9s var(--ease) var(--d, 0s);
}
.pf-row:hover { box-shadow: var(--sh-lift); }
.pf-pain, .pf-fix { padding: 1.45rem 1.65rem; }
.pf-pain { background: #FAFBFD; }
.pf-row h3 { font-size: 1.06rem; font-weight: 750; line-height: 1.35; color: var(--ink); margin: 0 0 .4rem; }
.pf-pain h3 { color: #3B4758; }
.pf-row p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--muted); }
.pf-label {
  display: inline-flex; align-items: center; gap: .35rem; margin-block-end: .75rem;
  padding: .22rem .62rem; border-radius: 999px;
  font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
[dir='rtl'] .pf-label { letter-spacing: 0; font-size: .8rem; }
.pf-label svg { inline-size: 13px; block-size: 13px; stroke-width: 2.6; }
.pf-pain .pf-label { color: #B42318; background: #FEF3F2; }
.pf-fix .pf-label { color: var(--brand-deep); background: var(--brand-soft); }
.pf-arrow { display: grid; place-items: center; color: var(--brand); background: linear-gradient(90deg, #FAFBFD 50%, #fff 50%); }
[dir='rtl'] .pf-arrow { background: linear-gradient(270deg, #FAFBFD 50%, #fff 50%); }
.pf-arrow svg {
  inline-size: 38px; block-size: 38px; padding: 9px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-card);
}
[dir='rtl'] .pf-arrow svg { transform: scaleX(-1); }
.pf-fix { position: relative; }
.pf-fix::before {
  content: ''; position: absolute; inset-block: 1.3rem; inset-inline-start: 0; inline-size: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--mesh-1), var(--mesh-3));
}
@media (max-width: 760px) {
  .pf-row { grid-template-columns: 1fr; }
  .pf-arrow { display: none; }
  .pf-fix { border-block-start: 1px dashed var(--line-2); }
  .pf-fix::before { inset-block: 1.3rem; }
}

/* Differentiators: three roomy cards. */
.diffs .card { padding: 2.1rem 1.9rem; }
.diffs .card h3 { font-size: 1.2rem; line-height: 1.3; }

/* A dark spec sheet: the deployment facts an IT reviewer looks for. */
.spec {
  position: relative; overflow: hidden; color: #fff;
  border-radius: var(--r-lg); padding: clamp(1.4rem, 3vw, 2.1rem);
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(0, 200, 240, .22), transparent 60%),
    radial-gradient(500px 320px at 0% 100%, rgba(94, 23, 235, .38), transparent 60%),
    #0A1628;
  box-shadow: var(--sh-float);
}
.spec::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 28px 28px;
}
.spec > * { position: relative; }
.spec-head { display: flex; align-items: center; gap: .75rem; margin-block-end: 1.1rem; font-weight: 700; font-size: 1rem; }
.spec-ico {
  display: grid; place-items: center; inline-size: 38px; block-size: 38px; border-radius: 11px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16);
}
.spec-live {
  margin-inline-start: auto; inline-size: 9px; block-size: 9px; border-radius: 50%;
  background: #3DDC97; box-shadow: 0 0 0 4px rgba(61, 220, 151, .18); animation: blink 1.8s ease-in-out infinite;
}
.spec dl { margin: 0; }
.spec-row {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding-block: 1rem; border-block-start: 1px solid rgba(255, 255, 255, .1);
}
.spec dt { color: rgba(255, 255, 255, .62); font-size: .93rem; }
.spec dd { margin: 0; font-weight: 700; font-size: .96rem; text-align: end; }
.spec dd.ok { color: #3DDC97; display: inline-flex; align-items: center; gap: .45rem; }
.spec dd.ok::before { content: ''; inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; }
@media (min-width: 900px) { .split-rev > :first-child { order: 2; } }

/* The four feature themes. */
.themes { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .themes { grid-template-columns: 1fr; } }
.theme {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-card); overflow: hidden;
  transition: box-shadow .35s var(--ease), opacity .9s var(--ease) var(--d, 0s), translate .9s var(--ease) var(--d, 0s), scale .9s var(--ease) var(--d, 0s);
}
.theme:hover { box-shadow: var(--sh-lift); }
.theme-head { display: flex; align-items: center; gap: .9rem; padding: 1.15rem 1.5rem; border-block-end: 1px solid var(--line); background: var(--soft); }
.theme-head .ico { margin: 0; inline-size: 38px; block-size: 38px; border-radius: 10px; }
.theme-head .ico svg { inline-size: 18px; block-size: 18px; }
.theme-head h3 { margin: 0; font-size: 1.14rem; color: var(--ink); }
.theme-head .count { margin-inline-start: auto; font-size: .8rem; font-weight: 700; color: var(--brand); background: var(--brand-soft); padding: .2rem .62rem; border-radius: 999px; }
.theme-list { list-style: none; margin: 0; padding: .35rem 1.5rem 1rem; }
.theme-list li { display: grid; gap: .2rem; padding-block: .85rem; border-block-end: 1px solid var(--line); }
.theme-list li:last-child { border-block-end: 0; }
.theme-list b { color: var(--ink); font-size: .98rem; font-weight: 700; }
.theme-list span { color: var(--muted); font-size: .93rem; line-height: 1.55; }
.themes-more { margin-block-start: 2.2rem; }
.themes-more .btn-row { justify-content: center; }

/* Security — the dark band. */
.section.dark {
  position: relative; color: rgba(255, 255, 255, .78);
  background:
    radial-gradient(1000px 480px at 88% -10%, rgba(0, 120, 174, .45), transparent 60%),
    radial-gradient(900px 480px at -5% 110%, rgba(94, 23, 235, .4), transparent 60%),
    #081326;
}
.section.dark h2, .section.dark h3 { color: #fff; }
.section.dark .eyebrow { color: #7DD3FC; }
.section.dark .lead { color: rgba(255, 255, 255, .72); }
.sec-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-lg); overflow: hidden;
}
@media (max-width: 900px) { .sec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sec-grid { grid-template-columns: 1fr; } }
.sec-item {
  background: rgba(8, 19, 38, .94); padding: 1.65rem 1.55rem;
  transition: background .3s var(--ease), opacity .9s var(--ease) var(--d, 0s), translate .9s var(--ease) var(--d, 0s), scale .9s var(--ease) var(--d, 0s);
}
.sec-item:hover { background: rgba(18, 38, 70, .96); }
.sec-ico {
  display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 11px; margin-block-end: 1rem; color: #fff;
  background: linear-gradient(135deg, #0078AE, #5E17EB); box-shadow: 0 10px 24px -12px rgba(0, 120, 174, .9);
}
.sec-item h3 { font-size: 1.03rem; margin: 0 0 .4rem; }
.sec-item p { margin: 0; font-size: .93rem; line-height: 1.6; color: rgba(255, 255, 255, .66); }
.section.dark .btn-row { margin-block-start: 2.2rem; }
.section.dark .wp-block-button__link { background: #fff; color: var(--ink); }
.section.dark .wp-block-button__link:hover { background: #EAF4FB; color: var(--ink); }

/* Security page — seven layers, narrowing toward the core. */
.layers { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.layer {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 56px minmax(140px, 190px) minmax(0, 1fr); gap: 1.25rem; align-items: center;
  padding: 1.15rem 1.6rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-card);
  transition: box-shadow .35s var(--ease), opacity .9s var(--ease) var(--d, 0s), translate .9s var(--ease) var(--d, 0s), scale .9s var(--ease) var(--d, 0s);
}
.layer:hover { box-shadow: var(--sh-lift); }
@media (min-width: 900px) { .layer { margin-inline: calc(var(--i, 0) * .9rem); } }
.layer::before {
  content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 4px;
  background: linear-gradient(180deg, var(--mesh-1), var(--mesh-2));
}
.layer-n {
  font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(95deg, var(--mesh-1), var(--mesh-2)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.layer h3 { margin: 0; font-size: 1.08rem; color: var(--ink); }
.layer p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--muted); }
@media (max-width: 700px) {
  .layer { grid-template-columns: 44px minmax(0, 1fr); row-gap: .5rem; }
  .layer p { grid-column: 1 / -1; }
}


/* ── 32. Watheqa+ — brand and page sections ─────────────────────────────── */

/* Watheqa+ skin: the logo's navy, with its gold as the accent. */
[data-brand='watheqa'],
body.brand-watheqa,
.brand-watheqa {
  --brand:      #1B2A6E;
  --brand-deep: #121D52;
  --brand-soft: #ECEEF7;
  --brand-rgb:  27, 42, 110;
  --mesh-1: #1B2A6E;
  --mesh-2: #3551B5;
  --mesh-3: #C4A66A;
  --mesh-4: #86704A;
}
body.brand-watheqa .brand-lockup img { block-size: 56px; }
@media (max-width: 640px) { body.brand-watheqa .brand-lockup img { block-size: 44px; } }

/* Hero cards. */
.mini-steps { list-style: none; margin: .75rem 0 .1rem; padding: 0; display: flex; gap: .4rem; }
.mini-steps li { position: relative; flex: 1; display: grid; justify-items: center; gap: .4rem; font-size: .72rem; color: var(--muted); }
.mini-steps li i { position: relative; z-index: 1; inline-size: 14px; block-size: 14px; border-radius: 50%; background: #E3E7EF; box-shadow: 0 0 0 3px #fff; }
.mini-steps li.done i { background: var(--teal); }
.mini-steps li.now i { background: #E0A526; box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(224, 165, 38, .22); }
.mini-steps li.now span { color: var(--ink); font-weight: 700; }
.mini-steps li + li::before {
  content: ''; position: absolute; inset-block-start: 6px; inset-inline-end: 50%; inline-size: 100%; block-size: 2px; background: #E3E7EF;
}
.mini-steps li.now::before { background: linear-gradient(90deg, var(--teal), #E0A526); }
[dir='rtl'] .mini-steps li.now::before { background: linear-gradient(270deg, var(--teal), #E0A526); }
.mini-q {
  display: flex; align-items: center; gap: .45rem; margin-block-start: .75rem; padding: .5rem .65rem;
  border: 1px solid var(--line); border-radius: 9px; background: #fff; font-size: .8rem; color: var(--ink);
}
.mini-q svg { color: var(--muted); flex: 0 0 auto; }
.mini-q span { background: linear-gradient(transparent 58%, rgba(224, 165, 38, .38) 58%); font-weight: 600; }

/* The record journey: four stages on one line, with the return path drawn
   back from audit to indexing. */
.journey { margin-block-start: 3rem; }
.jr-steps {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem;
}
.jr-steps::before {
  content: ''; position: absolute; inset-inline: 12.5%; inset-block-start: 0; block-size: 2px;
  background: linear-gradient(90deg, var(--mesh-1), var(--mesh-3)); opacity: .45;
}
.jr-step {
  position: relative; text-align: center;
  padding: 2.75rem 1.4rem 1.6rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-card);
  transition: box-shadow .35s var(--ease), opacity .9s var(--ease) var(--d, 0s), translate .9s var(--ease) var(--d, 0s), scale .9s var(--ease) var(--d, 0s);
}
.jr-step:hover { box-shadow: var(--sh-lift); }
.jr-node {
  position: absolute; inset-block-start: -28px; inset-inline-start: 50%; translate: -50% 0;
  display: grid; place-items: center; inline-size: 56px; block-size: 56px; border-radius: 50%; color: #fff;
  background: linear-gradient(135deg, var(--mesh-1), var(--mesh-2));
  box-shadow: 0 0 0 6px var(--bg, #fff), 0 14px 26px -12px rgba(var(--brand-rgb), .9);
}
[dir='rtl'] .jr-node { translate: 50% 0; }
.jr-step.is-final .jr-node { background: linear-gradient(135deg, #C4A66A, #86704A); box-shadow: 0 0 0 6px #fff, 0 14px 26px -12px rgba(134, 112, 74, .9); }
.jr-n { display: block; margin-block-end: .3rem; font-size: .78rem; font-weight: 800; color: var(--brand); }
.jr-step h3 { margin: 0 0 .2rem; font-size: 1.2rem; color: var(--ink); }
.jr-dept { display: block; margin-block-end: .85rem; font-size: .86rem; color: var(--muted); }
.jr-status {
  display: inline-block; margin-block-end: .85rem; padding: .26rem .7rem; border-radius: 999px;
  font-size: .74rem; font-weight: 700; color: var(--brand-deep); background: var(--brand-soft);
}
.jr-step.is-final .jr-status { color: #6E5A36; background: #F6F0E4; }
.jr-step p { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--muted); }
.jr-return {
  position: relative; inline-size: 50%; margin-block-start: .9rem; padding-block-start: 1.5rem;
  display: flex; justify-content: center; align-items: center; gap: .45rem;
  font-size: .86rem; font-weight: 600; color: #9A6B12;
}
.jr-return::before {
  content: ''; position: absolute; inset-block-start: 0; inset-inline: 25%; block-size: 1.05rem;
  border: 2px dashed #E0A526; border-block-start: 0; border-radius: 0 0 16px 16px;
}
.jr-return svg { transform: scaleX(-1); }
[dir='rtl'] .jr-return svg { transform: none; }
@media (max-width: 960px) {
  .jr-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3rem; }
  .jr-steps::before { display: none; }
  .jr-return { inline-size: 100%; }
  .jr-return::before { display: none; }
}
@media (max-width: 560px) { .jr-steps { grid-template-columns: 1fr; } }

/* Screens: one lead screen beside its caption, the rest two by two. */
.gallery { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gal { margin: 0; display: grid; gap: 1.1rem; align-content: start; }
.gal-img {
  overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 24px 48px -24px rgba(15, 23, 42, .35);
}
.gal-img img { display: block; inline-size: 100%; block-size: auto; }
.gal h3 { margin: 0 0 .35rem; font-size: 1.1rem; color: var(--ink); }
.gal p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--muted); }
.gal-lead { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 4vw, 3.25rem); }
.gal-lead h3 { font-size: 1.55rem; letter-spacing: -.02em; }
.gal-lead p { font-size: 1.04rem; }
@media (max-width: 860px) { .gallery, .gal-lead { grid-template-columns: 1fr; } }


/* ── 33. Correspondence — brand and hero cards ──────────────────────────── */

/* Correspondence skin: the same navy-and-gold family as Watheqa+, its
   envelope gold a little warmer. */
[data-brand='correspondence'],
body.brand-correspondence,
.brand-correspondence {
  --brand:      #1B2A6E;
  --brand-deep: #121D52;
  --brand-soft: #ECEEF7;
  --brand-rgb:  27, 42, 110;
  --mesh-1: #1B2A6E;
  --mesh-2: #2E5AB8;
  --mesh-3: #D2B27A;
  --mesh-4: #86704A;
}
body.brand-correspondence .brand-lockup img { block-size: 56px; }
@media (max-width: 640px) { body.brand-correspondence .brand-lockup img { block-size: 44px; } }

.mini-sig { display: block; inline-size: 100%; block-size: 46px; margin-block: .55rem .15rem; color: var(--brand); }
[dir='rtl'] .mini-sig { transform: scaleX(-1); }
.mini-enc {
  display: flex; gap: .35rem; margin-block-start: .75rem; padding: .6rem .65rem;
  border: 1px dashed var(--line-2); border-radius: 9px;
  background: repeating-linear-gradient(135deg, #F7F8FC 0 6px, #fff 6px 12px);
}
.mini-enc i { flex: 1; block-size: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(var(--brand-rgb), .38), rgba(var(--brand-rgb), .12)); }


/* A four-screen gallery: the three after the lead share one row. */
@media (min-width: 861px) {
  .gallery:has(> .gal:nth-child(4):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ── 34. Protocol — get the apps ───────────────────────────────────────── */
/* A band of the living gradient, darkened for white type, with one white
   card per platform: store button and QR code, or the installer and its facts. */
.appband { position: relative; overflow: hidden; isolation: isolate; color: #fff; }
.appband > .atmos { z-index: -1; }
.appband > .atmos::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 16, 36, .62), rgba(6, 16, 36, .38) 45%, rgba(6, 16, 36, .66));
}
.appband .eyebrow { color: #BFE6FF; }
.appband .h2, .appband h2 { color: #fff; }
.appband .lead { color: rgba(255, 255, 255, .84); }
.appband .section-head { text-align: center; margin-inline: auto; max-inline-size: 760px; }
.appband .section-head .lead { margin-inline: auto; }

.getapp { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block-start: 2.75rem; }
@media (max-width: 980px) { .getapp { grid-template-columns: 1fr; max-inline-size: 560px; margin-inline: auto; } }

.ga-card {
  display: grid; gap: 1.35rem; align-content: start;
  padding: 1.6rem; border-radius: 20px; color: var(--body);
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 34px 70px -34px rgba(0, 0, 0, .65);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), opacity .9s var(--ease) var(--d, 0s), translate .9s var(--ease) var(--d, 0s), scale .9s var(--ease) var(--d, 0s);
}
.ga-card:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 44px 80px -36px rgba(0, 0, 0, .75); }
.ga-head { display: flex; align-items: center; gap: .9rem; }
.ga-os {
  flex: 0 0 auto; display: grid; place-items: center; inline-size: 50px; block-size: 50px; border-radius: 14px;
  color: #fff; background: linear-gradient(135deg, #0078AE, #1B4FD8); box-shadow: 0 12px 24px -12px rgba(0, 120, 174, .9);
}
.ga-os svg { inline-size: 24px; block-size: 24px; fill: currentColor; }
.ga-head h3 { margin: 0; font-size: 1.12rem; color: var(--ink); }
.ga-head p { margin: .2rem 0 0; font-size: .88rem; line-height: 1.45; color: var(--muted); }

.ga-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; }
.ga-desk { display: grid; gap: .85rem; justify-items: start; }

.store-btn {
  display: inline-flex; align-items: center; gap: .7rem; justify-self: start;
  padding: .65rem 1.2rem .65rem 1rem; border-radius: 12px;
  color: #fff; text-decoration: none; background: #0B0F19;
  box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .7);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
[dir='rtl'] .store-btn { padding: .65rem 1rem .65rem 1.2rem; }
.store-btn:hover, .store-btn:focus-visible { transform: translateY(-2px); background: #000; color: #fff; box-shadow: 0 18px 32px -16px rgba(0, 0, 0, .8); }
.store-btn:focus-visible { outline: 2px solid #0078AE; outline-offset: 3px; }
.store-btn svg { flex: 0 0 auto; inline-size: 26px; block-size: 26px; fill: #fff; }
.store-btn span { display: grid; line-height: 1.12; text-align: start; }
.store-btn small { font-size: .68rem; font-weight: 500; opacity: .85; }
.store-btn b { font-size: 1.14rem; font-weight: 700; letter-spacing: -.01em; }
.store-btn.is-download { background: linear-gradient(135deg, #0078AE, #1B4FD8); }
.store-btn.is-download:hover { background: linear-gradient(135deg, #006A9A, #1742C0); }

.ga-qr { margin: 0; display: grid; justify-items: center; gap: .4rem; }
.ga-qr img {
  inline-size: 116px; block-size: 116px; padding: 8px; border-radius: 12px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-card);
}
.ga-qr figcaption { max-inline-size: 124px; font-size: .72rem; line-height: 1.35; text-align: center; color: var(--muted); }

.ga-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.ga-meta li { padding: .26rem .62rem; border-radius: 999px; font-size: .76rem; font-weight: 600; color: var(--ink); background: var(--soft); border: 1px solid var(--line); }
.ga-hash { margin: 0; font: 500 .7rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--muted); word-break: break-all; direction: ltr; text-align: start; }
.ga-note { margin: 2rem auto 0; max-inline-size: 640px; text-align: center; font-size: .95rem; color: rgba(255, 255, 255, .82); }

/* On a phone the store button is the fastest path — the QR code only helps
   someone reading on a larger screen. */
@media (max-width: 560px) { .ga-qr { display: none; } .ga-body { grid-template-columns: 1fr; } }

/* Hero: the three platforms as small labelled store buttons — the same dark
   style as the download band, sized to sit under the chips. */
.ga-mini { display: grid; justify-items: start; gap: .6rem; margin-block-start: 1.4rem; }
.ga-mini-label { margin: 0; font-size: .86rem; font-weight: 700; color: var(--ink); }
.ga-mini-btns { display: flex; flex-wrap: wrap; gap: .6rem; }
.ga-mini-btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .5rem 1rem .5rem .8rem; border-radius: 11px;
  color: #fff; text-decoration: none; background: #0B0F19;
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .7);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
[dir='rtl'] .ga-mini-btn { padding: .5rem .8rem .5rem 1rem; }
.ga-mini-btn:hover, .ga-mini-btn:focus-visible { transform: translateY(-2px); background: #000; color: #fff; box-shadow: 0 16px 28px -14px rgba(0, 0, 0, .8); }
.ga-mini-btn:focus-visible { outline: 2px solid #0078AE; outline-offset: 3px; }
.ga-mini-btn svg { flex: 0 0 auto; inline-size: 20px; block-size: 20px; fill: #fff; }
.ga-mini-btn span { display: grid; line-height: 1.12; text-align: start; }
.ga-mini-btn small { font-size: .62rem; font-weight: 500; opacity: .82; }
.ga-mini-btn b { font-size: .95rem; font-weight: 700; letter-spacing: -.01em; }


/* The band keeps its dark veil in both directions — the right-to-left white
   wash on ordinary sections must not reach it. */
.section.appband > .atmos::after,
[dir='rtl'] .section.appband > .atmos::after {
  background: linear-gradient(180deg, rgba(6, 16, 36, .62), rgba(6, 16, 36, .38) 45%, rgba(6, 16, 36, .66));
}


/* ── 35. Products — their own section under the hero ─────────────────── */
/* No overlap with the hero: a normal section on white, a proper heading, and
   three equal cards — logo, category, name, one line, and the way in. */
.prail-sec { margin-block-start: 0; z-index: auto; padding-block: clamp(3.5rem, 6vw, 5.5rem) clamp(2rem, 3.5vw, 3rem); }
.prail-sec .section-head { margin-block-end: clamp(1.75rem, 3vw, 2.5rem); }
.prail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }

.pcard {
  display: flex; flex-direction: column; min-block-size: 100%;
  padding: 1.9rem 1.8rem 1.6rem; row-gap: 0; column-gap: 0;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--sh-card);
}
.pcard::before { block-size: 4px; transform: none; }
.pcard:hover::before, .pcard:focus-visible::before { transform: none; }
.pcard:hover, .pcard:focus-visible { transform: translateY(-4px); border-color: transparent; box-shadow: var(--sh-lift); }

.pcard-top { display: flex; align-items: center; block-size: 54px; margin-block-end: 1.5rem; }
.pcard-top .pcard-logo { inline-size: auto; block-size: 54px; }
.pcard-top .pcard-logo img { block-size: 54px; inline-size: auto; max-inline-size: 100%; object-fit: contain; object-position: left center; }
[dir='rtl'] .pcard-top .pcard-logo img { object-position: right center; }

.pcard-kind { margin-block-end: .4rem; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pc); }
[dir='rtl'] .pcard-kind { letter-spacing: 0; text-transform: none; font-size: .86rem; }
.pcard-name { margin-block-end: .6rem; font-size: 1.32rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--ink); }
.pcard-desc { flex: 1; font-size: .96rem; line-height: 1.62; color: var(--muted); }
.pcard-more {
  display: flex; align-items: center; gap: .45rem;
  margin-block-start: 1.4rem; padding-block-start: 1.15rem; border-block-start: 1px solid var(--line);
  font-size: .92rem; font-weight: 700; color: var(--pc);
}
.pcard-more svg { inline-size: 15px; block-size: 15px; transition: transform .25s var(--ease); }
[dir='rtl'] .pcard-more svg { transform: scaleX(-1); }
.pcard:hover .pcard-more svg { transform: translateX(4px); }
[dir='rtl'] .pcard:hover .pcard-more svg { transform: scaleX(-1) translateX(4px); }

@media (max-width: 999px) {
  .prail-grid { grid-template-columns: 1fr; max-inline-size: 640px; }
  .pcard { display: flex; padding: 1.6rem 1.5rem 1.4rem; }
  .pcard-top .pcard-logo { inline-size: auto; }
}
@media (max-width: 519px) {
  .pcard { display: flex; padding: 1.4rem 1.25rem 1.25rem; }
  .pcard-top, .pcard-top .pcard-logo, .pcard-top .pcard-logo img { block-size: 46px; }
}

/* Card contents sit on the start edge, like every other card on the site;
   the divider above the link runs the full width of the card. */
.pcard { align-items: stretch; text-align: start; }
.pcard-top { justify-content: flex-start; }


/* ── 36. Home — in-house AI ─────────────────────────────────────────────── */
/* A dark lab: key facts, two product showcases with live mock-ups (the
   Co-pilot conversation, a scanned page being read), then how we build AI. */
.section.ai-lab {
  overflow: hidden;
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(94, 23, 235, .42), transparent 62%),
    radial-gradient(900px 520px at 96% 18%, rgba(0, 200, 240, .22), transparent 60%),
    radial-gradient(800px 480px at 50% 112%, rgba(0, 120, 174, .35), transparent 62%),
    #070F22;
}
.section.ai-lab::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 78%);
}
.ai-lab > .wrap { position: relative; }
.ai-lab .section-head { max-inline-size: 820px; }
.ai-lab .eyebrow { color: #C4B5FD; }

.ai-facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-block: 2.5rem 3rem;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--r-lg); overflow: hidden;
}
.ai-fact { padding: 1.4rem 1.5rem; background: rgba(7, 15, 34, .78); }
.ai-fact b {
  display: block; font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem); font-weight: 800; letter-spacing: -.04em; line-height: 1;
  background: linear-gradient(95deg, #A78BFA, #22D3EE); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ai-fact span { display: block; margin-block-start: .55rem; font-size: .9rem; line-height: 1.45; color: rgba(255, 255, 255, .7); }
@media (max-width: 860px) { .ai-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ai-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
@media (max-width: 980px) { .ai-panels { grid-template-columns: 1fr; } }
.ai-panel {
  position: relative; display: flex; flex-direction: column; gap: 1rem;
  padding: clamp(1.4rem, 3vw, 2rem); border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 40px 80px -40px rgba(0, 0, 0, .8);
  transition: opacity .9s var(--ease) var(--d, 0s), translate .9s var(--ease) var(--d, 0s), scale .9s var(--ease) var(--d, 0s);
}
.ai-panel::before {
  content: ''; position: absolute; inset-inline: 2rem; inset-block-start: -1px; block-size: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--ai-accent, #22D3EE), transparent);
}
.ai-panel.is-copilot { --ai-accent: #38BDF8; }
.ai-panel.is-watheqa { --ai-accent: #D2B27A; }
.ai-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ai-panel-head img { block-size: 34px; inline-size: auto; }
.ai-tag {
  padding: .3rem .7rem; border-radius: 999px; font-size: .74rem; font-weight: 700; color: #fff;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16);
}
.ai-panel h3 { margin: .25rem 0 0; font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); letter-spacing: -.02em; color: #fff; }
.ai-lead { margin: 0; font-size: .98rem; line-height: 1.65; color: rgba(255, 255, 255, .74); }
.ai-ticks { margin-block-start: .4rem; }
.ai-ticks li { color: rgba(255, 255, 255, .84); font-size: .95rem; }

/* The Co-pilot conversation */
.cp-mock {
  margin-block: .5rem; padding: 1rem; border-radius: 18px;
  background: rgba(3, 9, 22, .72); border: 1px solid rgba(255, 255, 255, .1);
}
.cp-top { display: flex; align-items: center; gap: .55rem; padding-block-end: .8rem; border-block-end: 1px solid rgba(255, 255, 255, .08); color: #fff; font-size: .9rem; }
.cp-spark { display: grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: 9px; background: linear-gradient(135deg, #0078AE, #6D28D9); }
.cp-live { margin-inline-start: auto; display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; font-weight: 700; color: #6EE7B7; }
.cp-dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 4px rgba(52, 211, 153, .2); animation: blink 1.6s ease-in-out infinite; }
.cp-thread { display: flex; flex-direction: column; gap: .55rem; padding-block: .9rem; }
.cp-b {
  max-inline-size: 82%; padding: .6rem .85rem; border-radius: 14px; font-size: .88rem; line-height: 1.45;
  animation: cpIn .5s var(--ease) both; animation-delay: calc(var(--i) * .55s + .3s);
}
.cp-u { align-self: flex-end; color: #fff; background: linear-gradient(135deg, #0078AE, #2563EB); border-end-end-radius: 4px; }
.cp-a { align-self: flex-start; color: #E2E8F0; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .08); border-end-start-radius: 4px; }
@keyframes cpIn { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
.cp-mic { display: flex; align-items: center; gap: .8rem; padding-block-start: .8rem; border-block-start: 1px solid rgba(255, 255, 255, .08); }
.cp-mic-btn { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #0078AE, #6D28D9); box-shadow: 0 0 0 6px rgba(56, 189, 248, .14); }
.cp-wave { display: flex; align-items: center; gap: 4px; block-size: 30px; }
.cp-wave i { inline-size: 3px; block-size: 100%; border-radius: 3px; background: linear-gradient(180deg, #38BDF8, #818CF8); transform-origin: center; animation: cpWave 1.1s ease-in-out infinite; }
.cp-wave i:nth-child(odd) { animation-duration: .9s; }
.cp-wave i:nth-child(3n) { animation-duration: 1.35s; }
.cp-wave i:nth-child(4n) { animation-delay: -.4s; }
.cp-wave i:nth-child(5n) { animation-delay: -.7s; }
@keyframes cpWave { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }

/* Watheqa+ — a scanned page being read */
.ocr-mock { margin-block: .5rem; padding: 1rem; border-radius: 18px; background: rgba(3, 9, 22, .72); border: 1px solid rgba(255, 255, 255, .1); }
.ocr-q {
  display: flex; align-items: center; gap: .55rem; padding: .6rem .8rem; border-radius: 11px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: #fff; font-size: .9rem;
}
.ocr-q svg { color: rgba(255, 255, 255, .6); }
.ocr-q em { margin-inline-start: auto; font-style: normal; font-size: .72rem; font-weight: 700; color: #D2B27A; }
.ocr-page {
  position: relative; overflow: hidden; display: grid; gap: .6rem; margin-block: .9rem; padding: 1.2rem 1.3rem;
  border-radius: 10px; background: #F4F1EA; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .8);
  transform: rotate(-.6deg);
}
[dir='rtl'] .ocr-page { transform: rotate(.6deg); }
.ocr-page i { display: block; block-size: 7px; border-radius: 4px; background: #CFC8BA; }
.ocr-hit { display: block; }
.ocr-hit mark { padding: .12rem .45rem; border-radius: 5px; font-size: .86rem; font-weight: 700; color: #3B2F14; background: linear-gradient(transparent 12%, rgba(210, 178, 122, .75) 12%); }
.ocr-scan {
  position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 38px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(56, 189, 248, .28), transparent);
  border-block-end: 2px solid rgba(56, 189, 248, .7);
  animation: ocrScan 3.2s ease-in-out infinite;
}
@keyframes ocrScan { 0% { translate: 0 -40px; } 60%, 100% { translate: 0 260px; } }
.ocr-found { display: flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 700; color: #6EE7B7; }

/* How we build AI */
.ai-how-head { margin-block: clamp(2.5rem, 5vw, 3.5rem) 1.5rem; }
.ai-how-head h3 { margin: 0; max-inline-size: 760px; font-size: clamp(1.35rem, 1.1rem + .9vw, 1.85rem); letter-spacing: -.02em; color: #fff; }
.ai-how { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 980px) { .ai-how { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ai-how, .ai-facts { grid-template-columns: 1fr; } }
.ai-how-item { padding-block-start: 1.1rem; border-block-start: 1px solid rgba(255, 255, 255, .14); }
.ai-how-item h4 { margin: 0 0 .4rem; font-size: 1.04rem; color: #fff; }
.ai-how-item p { margin: 0; font-size: .92rem; line-height: 1.6; color: rgba(255, 255, 255, .68); }

/* The Protocol AI suite */
.ai-suite-more { margin-block-start: 2rem; }

@media (prefers-reduced-motion: reduce) {
  .cp-b { animation: none; }
  .cp-wave i, .ocr-scan, .cp-dot { animation: none; }
  .cp-wave i { transform: scaleY(.6); }
  .ocr-scan { display: none; }
}

/* The lab's grid fades with a gradient laid over it rather than a mask —
   same look, and no mask compositing on a large translucent area. */
.section.ai-lab::before {
  -webkit-mask-image: none; mask-image: none; opacity: 1;
  background-image:
    radial-gradient(ellipse at 50% 30%, rgba(7, 15, 34, 0) 28%, #070F22 80%),
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 100% 100%, 44px 44px, 44px 44px;
}

/* Showcase panels are opaque: the same navy glass look, painted solid, so
   nothing behind them can ever show through. */
.ai-panel { background: linear-gradient(180deg, #161F38, #0E162B); }
.cp-mock, .ocr-mock { background: #060D1E; }


/* ── 37. About — where we work ──────────────────────────────────────────── */
/* Amman at the head, the four Gulf states beneath, joined by routes with a
   quiet flow along them. */
.reach {
  --route-c: rgba(var(--brand-rgb), .55);
  position: relative; margin-block-start: clamp(2rem, 4vw, 3rem);
}
.reach-hq {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 1.1rem;
  inline-size: max-content; max-inline-size: 100%; margin-inline: auto;
  padding: 1.1rem 1.6rem 1.1rem 1.1rem; border-radius: 18px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-lift);
}
[dir='rtl'] .reach-hq { padding: 1.1rem 1.1rem 1.1rem 1.6rem; }
.reach-flag { display: block; flex: 0 0 auto; line-height: 0; }
.reach-flag .flag {
  display: block; inline-size: 60px; block-size: 40px; border-radius: 6px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .1), 0 8px 16px -10px rgba(15, 23, 42, .55);
}
.reach-flag.is-hq .flag { inline-size: 78px; block-size: 52px; border-radius: 7px; }
.reach-kicker { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
[dir='rtl'] .reach-kicker { letter-spacing: 0; text-transform: none; font-size: .84rem; }
.reach-hq h3 { margin: .15rem 0 .15rem; font-size: 1.35rem; letter-spacing: -.02em; color: var(--ink); }
.reach-hq p { margin: 0; font-size: .92rem; color: var(--muted); }

/* the routes */
.reach-lines { position: relative; block-size: 64px; }
.reach-lines::before, .reach-card::before {
  content: ''; position: absolute; inset-inline-start: calc(50% - 1px); inline-size: 2px;
  background: linear-gradient(180deg, var(--route-c) 50%, transparent 50%) 0 0 / 2px 10px repeat-y;
  animation: routeFlowV 1s linear infinite;
}
.reach-lines::before { inset-block-start: 0; block-size: 32px; }
.reach-lines::after {
  content: ''; position: absolute; inset-inline: 12.5%; inset-block-start: 31px; block-size: 2px;
  background: linear-gradient(90deg, var(--route-c) 50%, transparent 50%) 0 0 / 10px 2px repeat-x;
  animation: routeFlowH 1s linear infinite;
}
.reach-card::before { inset-block-start: -33px; block-size: 33px; }
@keyframes routeFlowV { to { background-position: 0 10px; } }
@keyframes routeFlowH { to { background-position: 10px 0; } }

.reach-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.reach-card {
  position: relative; display: flex; align-items: center; gap: .9rem;
  padding: 1.1rem 1.2rem; border-radius: 16px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-card);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), opacity .9s var(--ease) var(--d, 0s), translate .9s var(--ease) var(--d, 0s), scale .9s var(--ease) var(--d, 0s);
}
.reach-card:hover { transform: translateY(-3px); box-shadow: var(--sh-lift); }
.reach-txt { display: grid; gap: .2rem; min-inline-size: 0; }
.reach-txt b { font-size: 1rem; line-height: 1.3; color: var(--ink); }
.reach-txt > span { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; color: var(--muted); }
.reach-txt svg { color: var(--brand); flex: 0 0 auto; }

.reach-stats { margin-block-start: clamp(2.25rem, 4vw, 3rem); }
.reach-stats.stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 999px) {
  .reach-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reach-lines { block-size: 1.25rem; }
  .reach-lines::before, .reach-lines::after, .reach-card::before { display: none; }
}
@media (max-width: 560px) {
  .reach-grid { grid-template-columns: 1fr; }
  .reach-hq { inline-size: 100%; }
  .reach-stats.stats { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .reach-lines::before, .reach-lines::after, .reach-card::before { animation: none; }
}


/* ── 38. About — where we work, on equal footing ────────────────────────── */
/* Five countries in one row, the same size and weight. No tree and no
   lines: Jordan is marked only by a small "Headquarters" tag. */
.reach-row {
  list-style: none; margin: clamp(2rem, 4vw, 2.75rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem;
}
.reach-row .reach-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: .35rem;
  padding: 1.4rem 1.3rem 1.3rem; border-radius: 16px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-card);
}
.reach-row .reach-card::before { content: none; }
.reach-row .reach-card:hover { transform: translateY(-3px); box-shadow: var(--sh-lift); }
.reach-row .reach-flag { margin-block-end: .7rem; }
.reach-row .reach-flag .flag, .reach-row .reach-flag img {
  display: block; inline-size: 54px; block-size: 36px; border-radius: 6px; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .1), 0 8px 16px -10px rgba(15, 23, 42, .5);
}
.reach-row .reach-card > b { font-size: 1.02rem; line-height: 1.3; color: var(--ink); }
.reach-city { display: inline-flex; align-items: center; gap: .3rem; font-size: .86rem; color: var(--muted); }
.reach-city svg { color: var(--brand); flex: 0 0 auto; }
.reach-tag {
  margin-block-start: .45rem; padding: .18rem .55rem; border-radius: 999px;
  font-size: .7rem; font-weight: 700; color: var(--brand-deep); background: var(--brand-soft);
}
@media (max-width: 1099px) { .reach-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .reach-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 400px) { .reach-row { grid-template-columns: 1fr; } }

/* Official flags keep their true 4:3 shape — never cropped. */
.reach-row .reach-flag img { inline-size: 52px; block-size: 39px; object-fit: contain; border-radius: 5px; }

/* ── 39. Five home figures: 5 across, then 2 + 2 + one full-width, then a stack ── */
.stats.stats-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stats-5 .stat { padding-inline: 1.25rem; }
@media (max-width: 1099px) and (min-width: 860px) {
  .stats.stats-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .stats-5 .stat { grid-column: span 2; }
  .stats-5 .stat:nth-child(4), .stats-5 .stat:nth-child(5) { grid-column: span 3; border-block-start: 1px solid var(--line); }
  .stats-5 .stat:nth-child(4) { border-inline-start: 0; }
}
@media (max-width: 859px) and (min-width: 480px) {
  .stats-5 .stat:last-child { grid-column: 1 / -1; }
}
@media (max-width: 859px) { .stats.stats-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .stats.stats-5 { grid-template-columns: 1fr; } }

/* ── 40. Clients — one wall of equal tiles, full colour, no ranking ─────── */
.clients-wall {
  list-style: none; margin: clamp(2rem, 4vw, 2.75rem) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;
}
.client {
  flex: 0 0 calc((100% - 4rem) / 5);
  display: grid; place-items: center; block-size: 128px; padding: 1rem;
  border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-card);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), opacity .9s var(--ease) var(--d, 0s), translate .9s var(--ease) var(--d, 0s), scale .9s var(--ease) var(--d, 0s);
}
.client:hover { transform: translateY(-3px); box-shadow: var(--sh-lift); }
.client img { display: block; inline-size: auto; block-size: auto; max-inline-size: 100%; max-block-size: 84px; object-fit: contain; }
@media (max-width: 1099px) { .client { flex-basis: calc((100% - 2rem) / 3); } }
@media (max-width: 640px) { .client { flex-basis: calc((100% - 1rem) / 2); block-size: 116px; } .client img { max-block-size: 76px; } }

/* ── 41. NCAR best-practice band (Watheqa+ and Correspondence) ───────────── */
.section.ncar-sec { padding-block: clamp(2rem, 4vw, 3rem) 0; }
.ncar-band {
  display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.25rem);
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2.25rem);
  border-radius: 20px; border: 1px solid var(--line); box-shadow: var(--sh-card);
  background: linear-gradient(135deg, var(--brand-soft), #fff 70%);
}
[dir='rtl'] .ncar-band { background: linear-gradient(225deg, var(--brand-soft), #fff 70%); }
.ncar-logo {
  flex: 0 0 auto; display: grid; place-items: center; inline-size: 136px; block-size: 124px; padding: .7rem;
  border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-card);
}
.ncar-logo img { inline-size: auto; block-size: auto; max-inline-size: 100%; max-block-size: 100%; object-fit: contain; }
.ncar-txt { min-inline-size: 0; }
.ncar-txt .eyebrow { margin: 0 0 .35rem; }
.ncar-txt h2 { margin: 0 0 .45rem; font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); line-height: 1.3; letter-spacing: -.01em; color: var(--ink); }
.ncar-txt > p:last-child { margin: 0; max-inline-size: 72ch; line-height: 1.65; color: var(--muted); }
@media (max-width: 640px) {
  .ncar-band { flex-direction: column; align-items: flex-start; }
  .ncar-logo { inline-size: 112px; block-size: 102px; }
}

/* ── 42. Company profile download (About) ────────────────────────────────── */
.section.profile-sec { padding-block: clamp(2.5rem, 5vw, 4rem); }
.profile-band {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem); padding: clamp(1.25rem, 3vw, 2.25rem);
  border-radius: 24px; border: 1px solid var(--line); box-shadow: var(--sh-card);
  background: linear-gradient(135deg, var(--brand-soft), #fff 65%);
}
[dir='rtl'] .profile-band { background: linear-gradient(225deg, var(--brand-soft), #fff 65%); }
.profile-cover { display: block; border-radius: 14px; overflow: hidden; box-shadow: var(--sh-lift); transition: transform .3s var(--ease); }
.profile-cover:hover { transform: translateY(-4px); }
.profile-cover img { display: block; inline-size: 100%; block-size: auto; }
.profile-txt .eyebrow { margin: 0 0 .35rem; }
.profile-txt h2 { margin: 0 0 .6rem; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); line-height: 1.2; letter-spacing: -.015em; color: var(--ink); }
.profile-txt > p { margin: 0 0 1.25rem; max-inline-size: 60ch; line-height: 1.65; color: var(--muted); }
.profile-txt .btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.profile-txt > p.profile-meta { margin: .9rem 0 0; font-size: .82rem; }
@media (max-width: 760px) { .profile-band { grid-template-columns: minmax(0, 1fr); } .profile-txt .btn { white-space: normal; text-align: center; } }

/* ── 43. Projects — integration and technology logo walls ────────────────── */
.logo-grid {
  list-style: none; margin: clamp(2rem, 4vw, 2.75rem) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;
}
.logo-tile {
  flex: 0 0 calc((100% - 4rem) / 5);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem;
  padding: 1.25rem 1rem 1.15rem; border-radius: 16px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-card);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), opacity .9s var(--ease) var(--d, 0s), translate .9s var(--ease) var(--d, 0s), scale .9s var(--ease) var(--d, 0s);
}
.logo-tile:hover { transform: translateY(-3px); box-shadow: var(--sh-lift); }
.logo-img { display: grid; place-items: center; inline-size: 100%; block-size: 64px; margin-block-end: .45rem; }
.logo-img img { display: block; inline-size: auto; block-size: 56px; max-inline-size: 82%; object-fit: contain; }
.logo-tile b { font-size: .95rem; line-height: 1.3; color: var(--ink); }
.logo-cap { font-size: .82rem; line-height: 1.45; color: var(--muted); }
.ico-lg { display: grid; place-items: center; inline-size: 56px; block-size: 56px; border-radius: 16px; background: var(--brand-soft); color: var(--brand); }
.ico-lg svg { inline-size: 26px; block-size: 26px; }
.tech-grid .logo-tile { justify-content: center; min-block-size: 112px; padding: 1rem; }
.tech-grid .logo-img { margin: 0; block-size: 64px; }
.tech-grid .logo-img img { block-size: auto; max-block-size: 58px; max-inline-size: 78%; }
.tools-row { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.75rem; margin-block-start: 1.75rem; font-size: .9rem; font-weight: 600; color: var(--muted); }
.tools-row img { display: block; block-size: 30px; inline-size: auto; }
@media (max-width: 1099px) { .logo-tile { flex-basis: calc((100% - 2rem) / 3); } }
@media (max-width: 640px) { .logo-tile { flex-basis: calc((100% - 1rem) / 2); } }