/* ============================================================
   BrokerageLoop — page sections
   ============================================================ */

/* ================= SECTION BANDS =================
   The page alternates white / bone / ink bands so it reads as a sequence of
   distinct surfaces instead of one continuous white scroll. */
.band-white{ background: var(--color-bg); }
.band-bone{ background: var(--color-bone); }
.band-bone + .band-bone{ border-block-start: 1px solid var(--color-bone-border); }

/* Two tiers of vertical rhythm. A section that opens a new band gets the
   full break; one that continues the band it is already in gets a smaller
   one, so the page reads as chapters rather than nine equal slabs. */
.band-bone + .band-bone,
.band-white + .band-white{ padding-block-start: var(--space-12); }

.band-ink{
  position: relative;
  background: var(--color-dark-bg);
  color: var(--color-fg-on-dark);
  overflow: hidden;
  isolation: isolate;
}
.band-ink h1, .band-ink h2, .band-ink h3, .band-ink h4{ color: #fff; }
.band-ink .section-head p,
.band-ink .section-lede{ color: var(--color-fg-on-dark-muted); }
.band-ink .kicker{ color: var(--brand-gold-lifted); }
.band-ink .kicker::before{ background: var(--brand-gold-lifted); }
.band-ink .mono-label{ color: var(--color-fg-on-dark-muted); }

/* ---- Grain: fractal-noise overlay that keeps large dark areas from
   looking like flat vector fill. Decorative only. ---- */
.grain::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.grain > *{ position: relative; z-index: 1; }

/* Inside a dark band the CTA no longer needs its own gradient card — it sits
   directly on the band so the closing section runs full-bleed into the footer. */
.band-ink .cta-band{
  background: none;
  border-radius: 0;
  padding: 0;
}
.band-ink .cta-band::before{ display: none; }
.band-ink .cta-band p{ color: var(--color-fg-on-dark-muted); }

/* ---- Blueprint grid ----
   A measured 80px rule grid, barely visible, sitting under everything else.
   This is what makes a dark band read as an engineering surface rather than
   a plain dark rectangle. Painted as a background-image on the section itself
   so it doesn't compete with the aurora (::before) or grain (::after). */
.tech-grid{
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 80px 80px;
}

/* ---- Aurora: brand-coloured light sources that drift behind dark bands ----
   Oversized and slowly moving, so the light reads as atmosphere rather than
   a fixed gradient baked into the page. */
.mesh-aurora::before{
  content: "";
  position: absolute;
  inset: -15%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(3, 105, 161, 0.55), transparent 70%) 14% 22% / 46% 52% no-repeat,
    radial-gradient(closest-side, rgba(233, 185, 73, 0.16), transparent 70%) 86% 14% / 34% 38% no-repeat,
    radial-gradient(closest-side, rgba(12, 74, 110, 0.6), transparent 72%) 70% 92% / 58% 60% no-repeat,
    radial-gradient(closest-side, rgba(3, 105, 161, 0.28), transparent 70%) 44% 60% / 40% 44% no-repeat;
  animation: aurora-drift 30s ease-in-out infinite;
}
@keyframes aurora-drift{
  0%, 100%{ transform: translate(-2%, -1%) rotate(0deg) scale(1); }
  33%{ transform: translate(3%, 2%) rotate(6deg) scale(1.07); }
  66%{ transform: translate(-1%, 3%) rotate(-5deg) scale(0.97); }
}

/* ---- Wireframe emblem ----
   Decorative line geometry echoing the interlocking-square motif of the mark,
   drawn in an animated cerulean→gold gradient stroke. Purely atmospheric: it
   is aria-hidden and carries no meaning. */
.tech-emblem{
  position: absolute;
  z-index: 0;
  pointer-events: none;
  inset-inline-end: -8%;
  top: 50%;
  width: min(760px, 70vw);
  aspect-ratio: 1;
  transform: translateY(-50%);
  opacity: 0.5;
  animation: emblem-drift 40s ease-in-out infinite;
}
.tech-emblem svg{ width: 100%; height: 100%; overflow: visible; }
@keyframes emblem-drift{
  0%, 100%{ transform: translateY(-50%) rotate(0deg) scale(1); }
  50%{ transform: translateY(-52%) rotate(8deg) scale(1.05); }
}
/* On the light hero the gradient stroke has far less contrast to work with,
   so it needs more opacity and weight than it does on an ink band. */
.hero .tech-emblem{ opacity: 0.75; inset-inline-end: -14%; width: min(680px, 62vw); }
.hero .tech-emblem g{ stroke-width: 0.9; }

/* ================= HEADER / NAV ================= */
.site-header{
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-nav);
  padding-block: var(--space-4);
  transition: background-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              padding-block var(--dur-base) var(--ease-standard);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled{
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-sm);
  padding-block: var(--space-3);
}
.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.nav-logo{ display: flex; align-items: center; gap: var(--space-3); flex: none; }
.nav-logo img{ height: 26px; width: auto; }
.nav-logo .descriptor{
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-fg-subtle);
  border-inline-start: 1px solid var(--color-border-strong);
  padding-inline-start: var(--space-3);
  white-space: nowrap;
}
@media (max-width: 560px){ .nav-logo .descriptor{ display: none; } }

.nav-links{
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links a{
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-fg-muted);
  transition: color var(--dur-fast) var(--ease-standard);
  /* Inline padding as well as block: "AI" is only 14px of glyph, which is
     under the 24x24 minimum target size even though the row is 35px tall. */
  padding-block: var(--space-2);
  padding-inline: var(--space-2);
}
.nav-links a:hover{ color: var(--color-accent); }

.nav-actions{ display: flex; align-items: center; gap: var(--space-3); }

.lang-toggle{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border-strong);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-fg);
  transition: border-color var(--dur-fast), background-color var(--dur-fast);
}
.lang-toggle:hover{ border-color: var(--color-accent); background: rgba(161,98,7,0.08); }
.lang-toggle svg{ width: 16px; height: 16px; }

.menu-toggle{
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--color-fg);
}
.menu-toggle svg{ width: 24px; height: 24px; }

@media (max-width: 900px){
  .nav-links{ display: none; }
  .menu-toggle{ display: inline-flex; }
  .nav-actions .btn-primary{ display: none; }
  .lang-toggle span{ display: none; }
  .lang-toggle{ width: 40px; height: 40px; padding: 0; justify-content: center; }
}

.mobile-menu{
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.mobile-menu.is-open{ opacity: 1; transform: none; pointer-events: auto; }
.mobile-menu-head{ display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--space-10); }
.mobile-menu-head img{ height: 24px; }
.mobile-menu-links{ display: flex; flex-direction: column; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.mobile-menu-links a{
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: 700;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
html[lang="ar"] .mobile-menu-links a{ font-family: var(--font-arabic); }
.mobile-menu-cta{ margin-block-start: auto; display: flex; flex-direction: column; gap: var(--space-3); padding-block-start: var(--space-8); }

/* ================= HERO ================= */
.hero{
  position: relative;
  padding-block-start: clamp(7rem, 12vw, 10rem);
  padding-block-end: var(--space-24);
  overflow: hidden;
  isolation: isolate;
}
/* Light-hero treatment. Scoped with :not(.band-ink) so that when the hero is
   flipped to a dark band the shared .mesh-aurora / .grain utilities own the
   ::before and ::after layers instead of these. */
.hero:not(.band-ink)::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60% 55% at 82% -8%, rgba(3,105,161,0.16), transparent 60%),
    radial-gradient(46% 40% at 8% 8%, rgba(233,185,73,0.14), transparent 60%),
    var(--color-bg);
}
/* Blueprint rules rather than a dot screen — reads as drafting paper. */
.hero:not(.band-ink)::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(90deg, rgba(2,6,23,0.045) 1px, transparent 1px),
    linear-gradient(rgba(2,6,23,0.045) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(120% 100% at 50% 0%, black 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, black 35%, transparent 78%);
}

/* ================= DARK HERO =================
   The brand pack only ships reversed lockups with their own cerulean ground,
   so rather than floating a blue logo badge over the dark hero, the header
   stays a solid light bar and the dark band begins beneath it. The duotone
   lockup therefore always sits on a light ground, as the brand requires. */
body.hero-dark .site-header{
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom-color: var(--color-border);
}
.hero.band-ink{ padding-block-start: clamp(8rem, 13vw, 11rem); }
.hero.band-ink .hero-copy .lede{ color: var(--color-fg-on-dark-muted); }
.hero.band-ink .hero-microcopy li{ color: var(--color-fg-on-dark-muted); }
.hero.band-ink .hero-microcopy svg{ color: var(--brand-gold-lifted); }
.hero.band-ink .float-badge strong{ color: #fff; }
.hero.band-ink .float-badge span{ color: var(--color-fg-on-dark-muted); }
/* The device mockups keep their light UI — that contrast is the point. */
.hero.band-ink .device-frame{ border-color: rgba(255, 255, 255, 0.12); }

.hero-grid{
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: var(--space-16);
  align-items: center;
}
.hero-grid > *{ min-width: 0; }
@media (max-width: 1000px){
  .hero-grid{ grid-template-columns: 1fr; gap: var(--space-12); }
}
.hero-copy h1{ margin-block-end: var(--space-6); max-width: 15ch; }
.hero-copy .lede{
  font-size: var(--fs-lg);
  color: var(--color-fg-muted);
  max-width: 46ch;
  margin-block-end: var(--space-8);
  line-height: var(--lh-relaxed);
}
.hero-cta-row{ display: flex; flex-wrap: wrap; gap: var(--space-4); margin-block-end: var(--space-8); }
.hero-microcopy{
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  font-size: var(--fs-xs); color: var(--color-fg-subtle);
}
.hero-microcopy li{ display: flex; align-items: center; gap: var(--space-2); }
.hero-microcopy svg{ width: 15px; height: 15px; color: var(--color-success); flex: none; }

.hero-visual{ position: relative; }
.hero-visual .float-badge{
  position: absolute;
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  z-index: 2;
}
.hero-visual .float-badge.b1{ top: -6%; inset-inline-start: -8%; }
.hero-visual .float-badge.b2{ bottom: 6%; inset-inline-end: -7%; }
@media (max-width: 640px){ .hero-visual .float-badge{ display: none; } }
.float-badge .icon-tile{ width: 36px; height: 36px; margin: 0; border-radius: var(--radius-sm); }
.float-badge .icon-tile svg{ width: 18px; height: 18px; }
.float-badge strong{ display: block; font-size: var(--fs-sm); font-family: var(--font-heading); }
.float-badge span{ display: block; font-size: var(--fs-xs); color: var(--color-fg-subtle); }

/* ---- Device mockups (shared: hero + platform section) ---- */
.device-frame{
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}
.browser-frame{ width: 100%; }
.browser-bar{
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--slate-50);
  border-bottom: 1px solid var(--color-border);
}
.browser-dots{ display: flex; gap: 6px; }
.browser-dots span{ width: 10px; height: 10px; border-radius: 50%; background: var(--slate-300); }
.browser-url{
  flex: 1;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.9rem;
  font-size: var(--fs-xs);
  color: var(--color-fg-subtle);
  display: flex; align-items: center; gap: var(--space-2);
  max-width: 320px;
}
.browser-url svg{ width: 12px; height: 12px; color: var(--color-success); flex: none; }
.browser-url span{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-lang{ font-size: var(--fs-xs); font-weight: 700; color: var(--color-fg-subtle); flex: none; }


/* The mobile capture is 780x1688 (390x844 @2x). Pinning the real ratio stops
   the frame reserving the wrong height and shifting layout as it loads. */
.screenshot-frame.mobile-shot{ aspect-ratio: 780 / 1688; background: var(--color-dark-bg); }

.screenshot-frame{
  position: relative;
  aspect-ratio: 1907 / 1018;
  overflow: hidden;
  background: var(--slate-100);
}
.screenshot-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.phone-frame{
  width: min(220px, 60%);
  margin-inline-start: auto;
  border-radius: 32px;
  padding: 10px;
  background: var(--brand-ink);
  box-shadow: var(--shadow-lg);
  position: absolute;
  inset-inline-end: -6%;
  bottom: -10%;
  z-index: 3;
}
.phone-frame .phone-notch{
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 16px;
  background: var(--brand-ink);
  border-radius: var(--radius-pill);
  z-index: 2;
}
.phone-frame .device-frame{ border-radius: 22px; border: none; }
@media (max-width: 760px){
  .phone-frame{ position: relative; width: 46%; margin-block-start: var(--space-8); margin-inline: auto; }
}

/* ================= PROOF BAND =================
   Sits in the dark opening between the hero and the lifecycle. Four
   credentials, each a claim a buyer's own security or finance team can go and
   check. It replaced a 71px strip carrying the same facts in 13px text -- the
   information was already there, it just had no weight. */
.proof-band{
  padding-block: var(--space-12);
  border-block: 1px solid var(--color-dark-border);
  background: var(--color-dark-bg-raised);
}
.proof-head{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-block-end: var(--space-8);
  padding-block-end: var(--space-5);
  border-block-end: 1px solid var(--color-dark-border);
}
.proof-band .mono-label{ color: var(--brand-gold-lifted); margin: 0; }

.proof-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}
@media (max-width: 1000px){ .proof-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .proof-grid{ grid-template-columns: 1fr; } }
.proof-item{ display: flex; gap: var(--space-4); align-items: flex-start; min-width: 0; }
.proof-icon{
  width: 38px; height: 38px;
  flex: none;
  border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(233, 185, 73, 0.12);
  color: var(--brand-gold-lifted);
}
.proof-icon svg{ width: 20px; height: 20px; }
.proof-item strong{
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  color: #fff;
  margin-block-end: 4px;
  line-height: var(--lh-snug);
}
html[lang="ar"] .proof-item strong,
body.lang-ar .proof-item strong{ font-family: var(--font-arabic); }
.proof-item p{
  font-size: var(--fs-xs);
  color: var(--color-fg-on-dark-muted);
  line-height: var(--lh-normal);
}

/* ================= ABOUT: ORIGIN =================
   The opening statement is set as display type because it is the page's
   thesis, not an introduction to one. The three cards under it are the three
   starting points, and the order is deliberate: largest opportunity first. */
.origin-lead{ max-width: 44rem; margin-block-end: var(--space-12); }
.origin-lead > p + p{ margin-block-start: var(--space-5); }
.origin-lead p{ font-size: var(--fs-md); color: var(--color-fg-muted); line-height: var(--lh-relaxed); }
/* Specificity: .origin-lead p is (0,1,1) and would otherwise win. */
.origin-lead .origin-statement{
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-heading);
  color: var(--color-fg);
}
html[lang="ar"] .origin-statement,
body.lang-ar .origin-statement{ font-family: var(--font-arabic); letter-spacing: 0; line-height: 1.4; }

/* These three carry a full sentence as their heading, so they need a softer
   size than a feature-card title and room to breathe. */
.origin-grid .feature-card{ padding-block: var(--space-8); }
.origin-grid .feature-card h3{
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  margin-block-end: var(--space-3);
}
/* Beats .feature-grid .feature-card::after regardless of source order. */
.feature-grid.origin-grid .feature-card::after{ content: none; }

.origin-close{
  margin: var(--space-12) 0 0;
  padding-inline-start: var(--space-6);
  border-inline-start: 3px solid var(--color-accent);
  max-width: 46rem;
}
.origin-close p{
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  color: var(--color-fg);
}
html[lang="ar"] .origin-close p,
body.lang-ar .origin-close p{ font-family: var(--font-arabic); letter-spacing: 0; line-height: 1.6; }

/* The who-builds-it band runs two columns rather than four: with the legal
   flag off it holds two lines, and four narrow columns would leave half the
   band empty. */
.proof-grid-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px){ .proof-grid-2{ grid-template-columns: 1fr; } }
.proof-grid-2 .proof-item strong{ font-size: var(--fs-md); }

/* ================= ABOUT: MARKETS =================
   Cards are generated from content/markets.json. Status is carried by a word,
   never by colour alone. */
.markets-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
@media (max-width: 860px){ .markets-grid{ grid-template-columns: 1fr; } }
.market-card{
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.market-card h3{ font-size: var(--fs-lg); margin-block-end: var(--space-2); }
.market-card p:last-child{ font-size: var(--fs-sm); color: var(--color-fg-muted); line-height: var(--lh-relaxed); }
.market-status{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  margin-block-end: var(--space-4);
}
html[lang="ar"] .market-status,
body.lang-ar .market-status{ font-family: var(--font-arabic); letter-spacing: 0; font-size: var(--fs-xs); font-weight: 700; }
.market-status-commercial{ background: var(--color-success-bg); color: var(--color-success); }
.market-status-pilot{ background: rgba(161, 98, 7, 0.1); color: var(--brand-bronze-700); }

/* ================= FIGURES BAND =================
   Numerals, set large and tabular. The page held thirteen digits before this
   band existed, which is a hard thing to read as an enterprise product. */
.figures-band{ border-block-end: 1px solid var(--color-bone-border); }
.figures-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}
@media (max-width: 860px){ .figures-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .figures-grid{ grid-template-columns: 1fr; } }

/* Same hairline-outline trick as the feature grid: shared edges land on one
   pixel, and a part-filled last row simply ends. */
.figure-item{
  box-shadow: 0 0 0 1px var(--color-border);
  background: var(--color-surface);
  padding: var(--space-8) var(--space-6);
  min-width: 0;
  transition: background-color var(--dur-base) var(--ease-standard);
}
.figure-item:hover{ background: var(--color-bone); }
.figure-num{
  display: block;
  font-family: var(--font-heading);
  /* Tabular figures so the numerals sit on a common width and the column of
     numbers reads as a table rather than a set of unrelated words. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: clamp(3rem, 5vw, 4.25rem);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--color-primary);
}
.figure-label{
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-fg);
  margin-block: var(--space-4) var(--space-2);
}
html[lang="ar"] .figure-label,
body.lang-ar .figure-label{ font-family: var(--font-arabic); letter-spacing: 0; font-size: var(--fs-sm); font-weight: 700; }
.figure-item p{
  font-size: var(--fs-sm);
  color: var(--color-fg-muted);
  line-height: var(--lh-relaxed);
}

/* ================= LIFECYCLE =================
   Eleven stages used to sit in one 168px-per-step horizontal scroller: about
   1,850px inside a 1,232px container, so it always scrolled sideways and the
   last four — the money end of the book, and the most persuasive part — were
   never on screen. Reflowing the flat strip into a wrapped grid would have
   fixed the scrollbar and destroyed the reading order.

   Three phase columns instead. Left to right across phases, top to bottom
   within one; on narrow screens the columns stack and the whole thing reads
   as one vertical timeline, which is the right shape for a phone anyway. */
.lifecycle-phases{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-10);
}
@media (max-width: 1000px){ .lifecycle-phases{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px){ .lifecycle-phases{ grid-template-columns: 1fr; gap: var(--space-8); } }
.lifecycle-phase{ min-width: 0; }

.phase-head{
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-fg-on-dark-muted);
  padding-block-end: var(--space-4);
  margin-block-end: var(--space-5);
  border-block-end: 1px solid var(--color-dark-border);
}
html[lang="ar"] .phase-head,
body.lang-ar .phase-head{ font-family: var(--font-arabic); letter-spacing: 0; font-size: var(--fs-sm); font-weight: 700; }
.phase-num{ color: var(--brand-gold-lifted); }

.lifecycle-stages{
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}
.lifecycle-stage{
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  min-width: 0;
}

/* The connector runs down from one node to the next, so the column reads as a
   sequence rather than a list. Drawn between the nodes only — the last stage
   in a phase has nothing below it to point at. */
.lifecycle-stage:not(:last-child)::before{
  content: "";
  position: absolute;
  inset-inline-start: 21px;
  top: 44px;
  bottom: calc(var(--space-6) * -1);
  width: 2px;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.28) 0 6px, transparent 6px 11px);
}

.stage-node{
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  position: relative;
  z-index: 1;
  transition: border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.stage-node svg{ width: 20px; height: 20px; }
.stage-node.accent{ color: var(--brand-gold-lifted); }
.lifecycle-stage:hover .stage-node{
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.05);
}
.lifecycle-stage:hover .stage-node.accent{
  border-color: var(--brand-gold-lifted);
  box-shadow: 0 0 0 5px rgba(233, 185, 73, 0.1);
}

.stage-copy{ min-width: 0; padding-block-start: 2px; }
.stage-copy strong{
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  color: #fff;
  margin-block-end: 2px;
}
html[lang="ar"] .stage-copy strong,
body.lang-ar .stage-copy strong{ font-family: var(--font-arabic); }
.stage-copy span{
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-fg-on-dark-muted);
  line-height: var(--lh-normal);
}

/* ================= FEATURES ================= */
.feature-group{ margin-block-end: var(--space-16); }
.feature-group:last-child{ margin-block-end: 0; }
.feature-group-head{
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin-block-end: var(--space-6);
  padding-block-end: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.feature-group-head .num{
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  color: var(--color-fg-subtle);
}
html[lang="ar"] .feature-group-head .num,
body.lang-ar .feature-group-head .num{ font-family: var(--font-arabic); letter-spacing: 0; }
.feature-group-head .num.accent{ color: var(--color-accent); }
.feature-group-head h3{ font-size: var(--fs-lg); }

/* Hairline grid rather than a scatter of individually bordered boxes: each
   card draws a 1px outline via box-shadow, so shared edges land on the same
   pixel and a part-filled last row simply ends instead of leaving grey cells. */
.feature-grid{
  gap: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.feature-grid .feature-card{
  border: none;
  border-radius: 0;
  box-shadow: 0 0 0 1px var(--color-border);
  position: relative;
  counter-increment: feat;
  padding: var(--space-6) var(--space-6) var(--space-8);
  transition: background-color var(--dur-base) var(--ease-standard);
}
.feature-grid{ counter-reset: feat; }
.feature-grid .feature-card::after{
  content: counter(feat, decimal-leading-zero);
  position: absolute;
  top: var(--space-5);
  inset-inline-end: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: var(--tracking-mono);
  color: var(--color-fg-subtle);
  opacity: 0.5;
}
.feature-grid .feature-card:hover{ background: var(--color-bone); }

.feature-card{
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  height: 100%;
}
.feature-card h4{ margin-block-end: var(--space-2); }
.feature-card p{ font-size: var(--fs-sm); color: var(--color-fg-muted); line-height: var(--lh-relaxed); }

/* ================= PLATFORM SCREENSHOTS ================= */
.platform-section{ background: var(--color-bone); }
/* The two columns are very different heights (a browser frame against a
   phone frame plus three highlights). align-items:end pushed the shorter
   web column down by ~380px, which put a void under the section heading and
   dropped the one real product screenshot below the fold while the mobile
   *placeholder* sat at the top. Both columns now start at the top, and the
   web column takes the larger share so the real screenshot leads. */
.platform-gallery{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-8);
  align-items: start;
}
.platform-gallery > *{ min-width: 0; }
@media (max-width: 900px){ .platform-gallery{ grid-template-columns: 1fr; } }
.platform-gallery .panel-label{
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-xs); font-weight: 700; color: var(--color-fg-subtle);
  margin-block-end: var(--space-3);
}
.platform-gallery .panel-label svg{ width: 16px; height: 16px; }

.mobile-highlights{
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-block-start: var(--space-6);
  max-width: 280px;
  margin-inline: auto;
}
.mobile-highlight{ display: flex; gap: var(--space-3); align-items: flex-start; text-align: start; }
.mobile-highlight .icon-tile{ width: 36px; height: 36px; margin-block-end: 0; border-radius: var(--radius-sm); flex: none; }
.mobile-highlight .icon-tile svg{ width: 18px; height: 18px; }
.mobile-highlight h3{ font-size: var(--fs-sm); line-height: var(--lh-snug); margin-block-end: 2px; }
.mobile-highlight p{ font-size: var(--fs-xs); color: var(--color-fg-subtle); line-height: var(--lh-snug); }


/* ================= AI SECTION ================= */
.ai-section{
  position: relative;
  background: var(--color-dark-bg);
  color: var(--color-fg-on-dark);
  overflow: hidden;
  isolation: isolate;
}
.ai-section::before{
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(50% 60% at 15% 0%, rgba(233,185,73,0.16), transparent 65%),
    radial-gradient(55% 55% at 100% 20%, rgba(3,105,161,0.35), transparent 60%);
}
.ai-section .kicker{ color: var(--brand-gold-lifted); }
.ai-section .section-head h2{ color: #fff; }
.ai-section .section-head p{ color: var(--color-fg-on-dark-muted); }

.ai-layout{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-12);
  align-items: start;
}
.ai-layout > *{ min-width: 0; }
@media (max-width: 980px){ .ai-layout{ grid-template-columns: 1fr; } }

.video-placeholder{
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 16/10;
  background:
    linear-gradient(160deg, #0c2a4a 0%, #071b33 45%, #04101f 100%);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-glow-gold), var(--shadow-lg);
}
.video-placeholder .glow-ring{
  position: absolute;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(233,185,73,0.28), transparent 68%);
  animation: pulse-ring 4.5s ease-in-out infinite;
}
@keyframes pulse-ring{
  0%, 100%{ transform: scale(0.92); opacity: 0.7; }
  50%{ transform: scale(1.08); opacity: 1; }
}
.video-placeholder .wave-deco{
  position: absolute;
  inset-inline: 8%;
  bottom: 14%;
  height: 46px;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  opacity: 0.55;
}
.video-placeholder .wave-deco span{
  flex: 1;
  background: linear-gradient(180deg, var(--brand-gold-lifted), rgba(233,185,73,0));
  border-radius: 3px;
  animation: wave-bar 2.2s ease-in-out infinite;
}
@keyframes wave-bar{ 0%, 100%{ height: 20%; } 50%{ height: 90%; } }

.play-button{
  position: relative;
  z-index: 2;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base);
}
.play-button:hover{ transform: scale(1.06); background: rgba(255,255,255,0.2); }
.play-button svg{ width: 30px; height: 30px; margin-inline-start: 3px; }
html[dir="rtl"] .play-button svg{ margin-inline-start: 0; margin-inline-end: 3px; transform: scaleX(-1); }

.video-caption{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
  font-size: var(--fs-xs);
  color: var(--color-fg-on-dark-muted);
}

.ai-feature-list{ display: flex; flex-direction: column; gap: var(--space-4); }
.ai-feature-card{
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex; gap: var(--space-4);
}
.ai-feature-card .icon-tile{
  background: rgba(233,185,73,0.12);
  color: var(--brand-gold-lifted);
  margin-block-end: 0;
}
.ai-feature-card h3{ font-size: var(--fs-md); line-height: var(--lh-snug); letter-spacing: -0.01em; color: #fff; margin-block-end: var(--space-1); }
.ai-feature-card p{ font-size: var(--fs-sm); color: var(--color-fg-on-dark-muted); line-height: var(--lh-relaxed); }

.ai-audit-strip{
  margin-block-start: var(--space-10);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-md);
  border: 1px dashed rgba(233,185,73,0.4);
  background: rgba(233,185,73,0.06);
}
.ai-audit-strip svg{ width: 22px; height: 22px; color: var(--brand-gold-lifted); flex: none; }
.ai-audit-strip p{ font-size: var(--fs-sm); color: var(--color-fg-on-dark); }
.ai-audit-strip strong{ color: var(--brand-gold-lifted); }

/* ================= SECURITY ================= */
/* ================= CORE TEN + SECURITY ROW LIST =================
   Both are the same object: a bordered card holding two columns of icon +
   title + one line. Declared together so the two never drift apart; the
   .core-* overrides below are only the extra weight the features block
   needs as the marketing centrepiece. */
.security-card,
.core-card{
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.security-row,
.core-row{
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}
.security-row:last-child,
.core-row:last-child{ border-bottom: none; }
.security-row .icon-tile,
.core-row .icon-tile{ margin-block-end: 0; }
.security-row .row-copy,
.core-row .row-copy{ flex: 1; min-width: 0; }
.security-row h3{ font-size: var(--fs-md); line-height: var(--lh-snug); letter-spacing: -0.01em; margin-block-end: 2px; }
.security-row p,
.core-row p{ font-size: var(--fs-sm); color: var(--color-fg-muted); line-height: var(--lh-snug); }
/* The security card's two columns hold 4 and 5 rows. Stretching them to
   equal height left an empty cell with the divider still running down
   beside it. (The core ten is 5 and 5, so it balances either way.) */
.security-cols,
.core-cols{ display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 760px){
  .security-cols,
  .core-cols{ grid-template-columns: 1fr; }
}
.security-cols > div:first-child,
.core-cols > div:first-child{ border-inline-end: 1px solid var(--color-border); }
@media (max-width: 760px){
  .security-cols > div:first-child,
  .core-cols > div:first-child{ border-inline-end: none; }
}

/* ---- Core ten: the extra weight ---- */
.core-card{
  box-shadow: var(--shadow-md);
  counter-reset: core;
}
.core-row{
  padding-block: var(--space-6);
  counter-increment: core;
  position: relative;
  transition: background-color var(--dur-base) var(--ease-standard);
}
.core-row:hover{ background: var(--color-bone); }
.core-row h3{ font-size: var(--fs-md); line-height: var(--lh-snug); letter-spacing: -0.01em; margin-block-end: 4px; }
.core-row .idx{
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: var(--tracking-mono);
  color: var(--color-fg-subtle);
  flex: none;
  padding-block-start: 12px;
  opacity: 0.6;
}
html[lang="ar"] .core-row .idx,
body.lang-ar .core-row .idx{ font-family: var(--font-arabic); letter-spacing: 0; }

/* The AI row is the one people come looking for, so it is lit rather than
   listed: gold chip, warm ground, and a mono tag that names it outright. */
.core-row.is-ai{
  background: linear-gradient(90deg, rgba(233,185,73,0.14), rgba(233,185,73,0.04) 60%, transparent);
}
html[dir="rtl"] .core-row.is-ai{
  background: linear-gradient(270deg, rgba(233,185,73,0.14), rgba(233,185,73,0.04) 60%, transparent);
}
.core-row.is-ai:hover{ background: rgba(233,185,73,0.18); }
.core-row.is-ai .icon-tile{ background: var(--brand-bronze); color: #fff; }
.core-row.is-ai .idx{ color: var(--color-accent); opacity: 1; }
.core-row.is-ai h3{ display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.core-tag{
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--brand-bronze-700);
  background: rgba(233,185,73,0.28);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
}
html[lang="ar"] .core-tag,
body.lang-ar .core-tag{ font-family: var(--font-arabic); letter-spacing: 0; font-size: var(--fs-xs); font-weight: 700; }

/* ---- The other eighteen, folded away ----
   Twenty-eight cards in one run made the features block a third of the page
   and buried the ten that actually sell it. The full list is still here, in
   the markup, for readers and crawlers alike — just not unfurled by default. */
.modules-disclosure{ margin-block-start: var(--space-12); }
.modules-disclosure > summary{
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.8rem 1.4rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border-strong);
  background: #fff;
  font-weight: 700;
  font-size: var(--fs-sm);
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.modules-disclosure > summary::-webkit-details-marker{ display: none; }
.modules-disclosure > summary:hover{ border-color: var(--color-accent); color: var(--color-accent); }
.modules-disclosure > summary .chev{
  width: 18px; height: 18px;
  transition: transform var(--dur-base) var(--ease-standard);
}
.modules-disclosure[open] > summary .chev{ transform: rotate(180deg); }
.modules-disclosure[open] > summary{ margin-block-end: var(--space-10); }
.modules-disclosure .feature-group:last-child{ margin-block-end: 0; }

/* ================= CTA BAND ================= */
.cta-band{
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  padding: var(--space-16) var(--space-10);
  text-align: center;
  background: linear-gradient(135deg, var(--brand-cerulean-900), var(--brand-cerulean) 60%, var(--brand-cerulean-700));
  isolation: isolate;
}
.cta-band::before{
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(255,255,255,0.14) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0.5;
}
.cta-band h2{ color: #fff; max-width: 22ch; margin-inline: auto; margin-block-end: var(--space-4); }
.cta-band p{ color: rgba(255,255,255,0.82); max-width: 52ch; margin-inline: auto; margin-block-end: var(--space-8); }
.cta-band .hero-cta-row{ justify-content: center; }

/* ================= FOOTER ================= */
.site-footer{
  background: var(--color-dark-bg);
  color: var(--color-fg-on-dark-muted);
  padding-block-start: var(--space-20);
  padding-block-end: var(--space-8);
}
.footer-top{
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr;
  gap: var(--space-10);
  padding-block-end: var(--space-16);
  border-bottom: 1px solid var(--color-dark-border);
}
.footer-top > *{ min-width: 0; }
@media (max-width: 1100px){ .footer-top{ grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 700px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .footer-top{ grid-template-columns: 1fr; } }
.footer-brand img{ height: 30px; margin-block-end: var(--space-5); }
.footer-brand p{ font-size: var(--fs-sm); max-width: 32ch; line-height: var(--lh-relaxed); margin-block-end: var(--space-6); }
.footer-social{ display: flex; gap: var(--space-3); }
.footer-social a{
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--color-dark-border);
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.footer-social a:hover{ border-color: var(--brand-gold-lifted); color: var(--brand-gold-lifted); }
.footer-social svg{ width: 16px; height: 16px; }

.footer-col h2{
  color: var(--color-fg-on-dark-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  margin-block-end: var(--space-5);
}
html[lang="ar"] .footer-col h2,
body.lang-ar .footer-col h2{ font-family: var(--font-arabic); letter-spacing: 0; font-weight: 700; font-size: var(--fs-sm); }
.footer-col ul{ display: flex; flex-direction: column; gap: var(--space-2); }
/* padding-block lifts each link from 19px to 25px tall — the 24x24 minimum
   target size — without changing the optical spacing of the column. */
.footer-col a{
  display: inline-block;
  font-size: var(--fs-sm);
  padding-block: 3px;
  transition: color var(--dur-fast);
}
.footer-col a:hover{ color: #fff; }

.footer-bottom{
  padding-block-start: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--fs-xs);
}
.footer-bottom .legal-links{ display: flex; gap: var(--space-5); }
.footer-bottom .legal-links a{ display: inline-block; padding-block: 4px; }

/* ================= MISC ================= */

/* ---- What is BrokerageLoop + home FAQ ---- */
.whatis-section .section-lede{ max-width: 860px; margin-inline: auto; }
#faq .faq{ max-width: 860px; margin-inline: auto; }
#faq .faq a{ color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }