/* ============================================================
   MASAR — public landing page
   ------------------------------------------------------------
   ISOLATED SCOPE. This stylesheet is loaded only by site/index.html.
   It shares nothing with the admin dashboard: not Tailwind, not the
   ink/brand tokens in tailwind.config.mjs, not admin-src/src/index.css.
   Changing anything here cannot affect /admin or /c/<id>.

   ONE OFFICIAL BRAND COLOUR: --brand #765C36.
   Every other bronze value below is a DERIVED tint or shade of it,
   used as a design treatment. They are not official brand colours and
   must not be published as such.
   ============================================================ */

:root {
  /* ── Official ── */
  --brand:        #765C36;

  /* ── Derived from --brand (design treatment, not brand colours) ── */
  --b-100:        #F1E8DA;
  --b-200:        #DECCAF;
  --b-300:        #C5A677;   /* the only bronze legible on dark grounds */
  --b-500:        #9B7946;
  --b-700:        #5B4729;

  /* ── Warm neutrals, hue-matched to the bronze ── */
  --paper:        #FAF8F5;
  --surface:      #FFFFFF;
  --surface-2:    #F3EFE8;
  --ink:          #1A150E;
  --ink-2:        #4A4238;
  --ink-3:        #7A7166;
  --line:         #E6E0D6;
  --line-2:       #D4CBBC;
  --dark:         #14100A;
  --dark-2:       #1F1913;

  /* ── Type ─────────────────────────────────────────────────
     --font-ar IS THE SINGLE SWAP POINT for the Arabic typeface.
     IBM Plex Sans Arabic is PROVISIONAL, standing in until the
     client's official Arabic font arrives. Replacing it is one
     line here plus the <link> in index.html. No layout depends
     on the specific family.
     LilyUPC is deliberately absent: it contains zero Arabic
     glyphs, so it lives inside the logo artwork and nowhere else.
     ───────────────────────────────────────────────────────── */
  --font-ar:      'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif;
  --font-la:      'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mo:      'IBM Plex Mono', ui-monospace, monospace;

  /* ── Space scale, 4px base ── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 120px;

  --container: 1200px;
  --gutter: 20px;
  --section-y: 64px;
  --radius: 4px;            /* one radius everywhere. no pills. */
}

@media (min-width: 640px)  { :root { --gutter: 32px; --section-y: 96px;  } }
@media (min-width: 1024px) { :root { --gutter: 48px; --section-y: 120px; } }

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ar);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }

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

.skip {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 200;
  background: var(--brand); color: #fff; padding: 12px 20px;
  border-radius: 0 0 var(--radius) var(--radius);
}
.skip:focus { inset-inline-start: 0; }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ── Shared type roles ─────────────────────────────────── */
.eyebrow {
  font-family: var(--font-mo);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--b-500);
  margin: 0 0 var(--s-4);
  direction: ltr;
  text-align: right;
}

h1, h2, h3 { font-weight: 600; letter-spacing: -.01em; text-wrap: balance; margin: 0; }

h2 { font-size: clamp(23px, 3.6vw, 32px); line-height: 1.35; }
h3 { font-size: 19px; line-height: 1.5; }

.lede {
  font-size: clamp(17px, 2.3vw, 21px);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 52ch;
  margin: 0;
}

p { margin: 0; max-width: 58ch; }        /* Arabic measure */

/* The one motif: the calligraphic sweep from the mark, thinning out. */
.stroke {
  height: 2px;
  width: 120px;
  background: linear-gradient(90deg, var(--brand), rgba(118, 92, 54, 0));
  border-radius: 2px;
  border: 0;
  margin: 0;
}
[dir="rtl"] .stroke { background: linear-gradient(270deg, var(--brand), rgba(118, 92, 54, 0)); }
.stroke.sm { width: 72px; }

/* ── Buttons ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;                       /* touch target */
  padding: 12px 28px;
  border-radius: var(--radius);
  font-family: var(--font-ar);
  font-size: 16px; font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.btn-primary { background: var(--brand); color: #fff; }          /* 6.3:1 */
.btn-primary:hover { background: var(--b-700); }
.btn-ghost { background: transparent; color: var(--b-700); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn-onDark { background: var(--b-300); color: var(--dark); }
.btn-onDark:hover { background: #D8BF95; }

/* ── Header ────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 100;
  background: rgba(250, 248, 245, .92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex; align-items: center; gap: var(--s-5);
  min-height: 68px;
}
.brand { display: inline-flex; align-items: center; color: var(--brand); flex: none; }
.brand svg { height: 26px; width: auto; display: block; }
/* The official lock-up (mark over "MASAR"), cut from the client's artwork
   with its own colour, so it is an image rather than a currentColor glyph. */
.brand .brand-logo { height: 46px; width: auto; display: block; }

.nav-links {
  display: none;
  list-style: none; margin: 0; padding: 0;
  gap: var(--s-5);
  font-size: 15px; color: var(--ink-2);
}
.nav-links a { padding: 6px 2px; display: inline-block; }
.nav-links a:hover { color: var(--brand); }
.nav-spacer { flex: 1; }

.nav-cta, .nav-login {
  display: none;
  min-height: 42px; padding: 9px 20px; font-size: 15px;
}

/* CSS-only mobile menu: no JavaScript anywhere on this page, which also
   keeps it inside the app's script-src 'self' content-security-policy. */
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-burger {
  margin-inline-start: auto;
  width: 44px; height: 44px;
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  cursor: pointer; flex: none;
}
.nav-burger span {
  display: block; height: 1.5px; width: 22px;
  background: var(--ink-2); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
.nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-drawer {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.nav-toggle:checked ~ .nav-drawer { display: block; }
.nav-drawer ul { list-style: none; margin: 0; padding: var(--s-3) 0 var(--s-5); }
.nav-drawer a {
  display: block; padding: 13px var(--gutter);
  font-size: 16px; color: var(--ink-2);
  min-height: 48px;
}
.nav-drawer a:hover { background: var(--surface-2); color: var(--brand); }
.nav-drawer .drawer-cta {
  padding: var(--s-3) var(--gutter) 0;
  display: flex; flex-direction: column; gap: var(--s-2);
}
.nav-drawer .drawer-cta .btn { width: 100%; }

@media (min-width: 900px) {
  .nav-links { display: flex; }
  .nav-cta, .nav-login { display: inline-flex; }
  .nav-burger, .nav-drawer { display: none !important; }
}

/* ── Sections ──────────────────────────────────────────── */
.section { padding-block: var(--section-y); }
.section + .section { border-top: 1px solid var(--line); }
.section-head { margin-bottom: var(--s-7); }
.section-head h2 { margin-bottom: var(--s-3); }
.section-head .stroke { margin-bottom: var(--s-4); }

/* ── Hero ──────────────────────────────────────────────── */
.hero { padding-block: clamp(56px, 9vw, 112px) clamp(48px, 7vw, 88px); }
.hero h1 {
  font-size: clamp(34px, 6.4vw, 60px);
  line-height: 1.22;
  margin-bottom: var(--s-5);
}
.hero .stroke { margin-bottom: var(--s-5); }
.hero .lede { margin-bottom: var(--s-6); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (max-width: 479px) { .hero-actions .btn { width: 100%; } }

.channels {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6);
  font-size: 15px; color: var(--ink-3);
}

/* ── About ─────────────────────────────────────────────── */
.about-grid { display: grid; gap: var(--s-5); }
.about-head h2 { margin-bottom: var(--s-3); }
.about-body .lede { margin-bottom: var(--s-4); max-width: 60ch; }
.about-aim {
  font-size: 17px; line-height: 1.75; color: var(--ink-2);
  padding-inline-start: var(--s-4);
  border-inline-start: 2px solid var(--b-200);
  max-width: 58ch;
}
@media (min-width: 900px) {
  .about-grid { grid-template-columns: 260px 1fr; gap: var(--s-7); align-items: start; }
}

/* The stages named in the paragraph above, laid out as the path the brand is
   named for. A rule runs behind the marks; at phone width it turns vertical. */
.journey {
  list-style: none; margin: var(--s-8) 0 0; padding: 0;
  display: grid; gap: var(--s-4);
  position: relative;
}
.journey li {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: 15.5px; color: var(--ink-2);
}
.j-mark {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--brand); flex: none;
  box-shadow: 0 0 0 4px var(--b-100);
}
.j-label { white-space: nowrap; }
@media (min-width: 780px) {
  .journey { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; padding-top: var(--s-5); }
  .journey::before {
    content: ''; position: absolute; top: calc(var(--s-5) + 4px); height: 1px;
    inset-inline: 4px; background: var(--line-2);
  }
  .journey li { flex-direction: column; align-items: flex-start; gap: var(--s-3); position: relative; }
  .j-mark { margin-top: -4px; }
}

/* ── Generic grids ─────────────────────────────────────── */
.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Pillars: no card chrome. Separation comes from a rule and space. */
.pillar { border-top: 2px solid var(--brand); padding-top: var(--s-4); }
.pillar h3 { margin-bottom: var(--s-2); }
.pillar p { font-size: 15.5px; color: var(--ink-2); line-height: 1.7; }
.pillar .tagline {
  font-family: var(--font-mo); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--b-500);
  display: block; margin-bottom: var(--s-2); direction: ltr; text-align: right;
}

/* ── Capability list ───────────────────────────────────── */
.caps { border-top: 1px solid var(--line); }
/* Name and description, nothing else. No per-item status badge: only two of
   these are implemented, and labelling the other eight either way is a claim
   this page should not make. */
.cap {
  display: grid; gap: var(--s-1);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
}
.cap-name { font-size: 17px; font-weight: 500; }
.cap-desc { font-size: 15px; color: var(--ink-3); line-height: 1.65; max-width: 62ch; }
@media (min-width: 768px) {
  /* A fixed first track so every description starts on the same line. */
  .cap { grid-template-columns: 210px 1fr; gap: var(--s-5); align-items: baseline; }
}

/* ── Call flow ─────────────────────────────────────────── */
.flow { counter-reset: step; list-style: none; margin: 0; padding: 0; }
.flow li {
  counter-increment: step;
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.flow li:last-child { border-bottom: none; }
.flow li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mo); font-size: 12px; font-weight: 600;
  color: var(--brand); padding-top: 5px;
}
.flow h3 { font-size: 17px; margin-bottom: 2px; }
.flow p { font-size: 15px; color: var(--ink-2); }

/* ── Simple tag lists (departments, sectors) ───────────── */
.dept { padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
.dept h3 { font-size: 17px; margin-bottom: var(--s-1); }
.dept p { font-size: 15px; color: var(--ink-2); }

.tags { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.tags li {
  border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 9px 18px; font-size: 15.5px; color: var(--ink-2);
  background: var(--surface);
}

/* ── Security, the one dark section ────────────────────── */
.section-dark {
  background: var(--dark);
  color: #EFE9DE;
  border-top: 1px solid var(--dark-2);
}
.section-dark h2 { color: #FFFFFF; }
.section-dark .eyebrow { color: var(--b-300); }
.section-dark .lede { color: #C7BCA9; }
/* The brand bronze measures only 3.0:1 here, so the dark ground uses the
   derived 300 (8.3:1) for every bronze element. */
.section-dark .stroke { background: linear-gradient(270deg, var(--b-300), rgba(197, 166, 119, 0)); }
.sec-item { border-top: 1px solid #2E2619; padding-top: var(--s-4); }
.sec-item h3 { font-size: 16.5px; color: var(--b-300); margin-bottom: var(--s-1); }
.sec-item p { font-size: 15px; color: #B7AB97; line-height: 1.7; }
.section-dark .disclaimer {
  margin-top: var(--s-7); padding-top: var(--s-5);
  border-top: 1px solid #2E2619;
  font-size: 14px; color: #8E8477; max-width: 62ch;
}

/* ── Contact ───────────────────────────────────────────── */
.contact { text-align: center; }
.contact h2 { margin-inline: auto; margin-bottom: var(--s-4); }
.contact .lede { margin-inline: auto; margin-bottom: var(--s-6); }
.contact .stroke { margin-inline: auto; margin-bottom: var(--s-5);
  background: linear-gradient(90deg, rgba(118,92,54,0), var(--brand), rgba(118,92,54,0)); }
.contact p { margin-inline: auto; }

/* ── Footer ────────────────────────────────────────────── */
/* Legal pages. The page chrome stays RTL Arabic; the instrument itself is LTR
   English, because it is reproduced verbatim and a legal text is not
   translated in passing. .legal-body carries dir="ltr" so lists, punctuation
   and numbering read correctly inside an RTL document. */
.legal-wrap { max-width: 760px; }
.legal-kicker {
  font-size: 14px; letter-spacing: .04em; color: var(--brand);
  margin-bottom: var(--s-2);
}
.legal h1 { font-size: clamp(28px, 4vw, 38px); margin-bottom: var(--s-3); }
.legal-meta {
  font-size: 14.5px; line-height: 1.9; color: var(--ink-2);
  padding-bottom: var(--s-5); border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-6);
}
.legal-body { font-size: 15.5px; line-height: 1.85; color: var(--ink-2); text-align: left; }
.legal-body h2 {
  font-size: 19px; color: var(--ink-1);
  margin-top: var(--s-6); margin-bottom: var(--s-3);
  padding-top: var(--s-5); border-top: 1px solid var(--line);
}
.legal-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-body h3 { font-size: 16px; color: var(--ink-1); margin-top: var(--s-4); margin-bottom: var(--s-2); }
.legal-body p { margin-bottom: var(--s-3); }
.legal-body ul { margin: 0 0 var(--s-3) 0; padding-left: 1.3em; padding-right: 0; list-style: disc; }
.legal-body li { margin-bottom: var(--s-1); }
.legal-body strong { color: var(--ink-1); font-weight: 600; }
/* An unresolved fact is marked so it cannot be published unnoticed. */
.legal-todo {
  background: #FDF3E3; border: 1px dashed var(--brand);
  color: var(--brand); padding: 1px 8px; border-radius: 4px;
  font-size: 14px; unicode-bidi: isolate; direction: rtl;
}
/* Contact page. Three channels side by side on a desktop, stacked on a
   phone — the layout says "pick one" rather than burying the useful line in
   a paragraph. */
/* Three icons, each one a link. They sit in a row rather than a grid of
   cards now that there is no text to align. */
.contact-grid {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  margin-bottom: var(--s-7);
}
.contact-card {
  display: inline-flex; align-items: center; justify-content: center;
  /* 56px clears the 44px minimum touch target with room to spare. */
  width: 56px; height: 56px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.contact-card:hover {
  background: var(--b-100);
  border-color: var(--b-200);
  transform: translateY(-2px);
}
.contact-icon {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--brand);
}
.contact-icon svg { width: 21px; height: 21px; display: block; }
/* Reachable by a screen reader, invisible to everyone else. An icon-only link
   with no accessible name is announced as just "link". */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.contact-h2 {
  font-size: 19px; color: var(--ink-1);
  padding-top: var(--s-5); border-top: 1px solid var(--line);
  margin-bottom: var(--s-3);
}
.contact-entity { font-size: 15px; line-height: 2; color: var(--ink-2); }
.contact-entity p { margin: 0; }
.contact-entity strong { color: var(--ink-1); font-weight: 600; }

.legal-foot {
  margin-top: var(--s-7); padding-top: var(--s-5);
  border-top: 1px solid var(--line); font-size: 15px;
}
.legal-foot a { color: var(--brand); border-bottom: 1px solid var(--line-2); padding-bottom: 2px; }
.legal-foot a:hover { border-bottom-color: var(--brand); }

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--s-7) var(--s-6);
  background: var(--surface-2);
}
.footer-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5);
}
.footer-row .brand { color: var(--brand); }
.footer-row .brand svg { height: 22px; }
.footer-row .brand .brand-logo { height: 38px; }
.footer-spacer { flex: 1; }
.footer-link {
  font-size: 15px; color: var(--ink-2);
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 2px;
  min-height: 44px; display: inline-flex; align-items: center;
}
.footer-link:hover { color: var(--brand); border-bottom-color: var(--brand); }
.site-footer small { font-size: 13.5px; color: var(--ink-3); }

/* ════════════════════════════════════════════════════════════
   ADDITIONS — sections introduced by the client's design update.
   Every value below reuses the existing tokens; no new brand
   colours are introduced.
   ════════════════════════════════════════════════════════════ */

/* ── Partners ──────────────────────────────────────────────
   Logos sit on a white card so a dark mark and a gold mark both
   read. Height is capped and width is free, so logos of different
   proportions share one baseline. */
.partners {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .partners { grid-template-columns: repeat(2, 1fr); }
}
.partner {
  display: flex; align-items: center; justify-content: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-6) var(--s-5);
  min-height: 128px;
}
.partner img {
  max-height: 64px; width: auto; object-fit: contain;
  display: block;
}

/* ── The challenge: a plain list of pain points ────────────
   Two columns on a wide screen, one on a phone. A short rule tops
   each item instead of a bullet, matching the pillar treatment. */
.pains {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0 var(--s-7);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .pains { grid-template-columns: repeat(2, 1fr); }
}
.pains li {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding-block: var(--s-4);
  border-top: 1px solid var(--line);
  font-size: 15.5px; color: var(--ink-2); line-height: 1.7;
  max-width: none;
}
.pains li::before {
  content: '—';
  color: var(--b-500); flex: none;
  font-family: var(--font-mo); line-height: 1.7;
}

/* ── Channel cards ─────────────────────────────────────────
   Light cards, unlike the chrome-less pillars, because the design
   shows bordered boxes here. */
.channel-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-5);
}
.channel-card h3 { font-size: 17px; color: var(--brand); margin-bottom: var(--s-2); }
.channel-card p { font-size: 15px; color: var(--ink-2); line-height: 1.7; }

/* ── FAQ accordion (CSS-only, <details>/<summary>) ─────────
   No JavaScript, so it stays inside the page's script-src 'self'
   CSP. The marker is a custom +/− drawn with ::after. */
.faq { border-top: 1px solid var(--line); }
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  font-size: 16.5px; font-weight: 500; color: var(--ink);
  min-height: 56px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  flex: none;
  font-family: var(--font-mo); font-size: 20px; font-weight: 400;
  color: var(--b-500); line-height: 1;
  transition: transform .18s ease;
}
.faq details[open] summary::after { content: '−'; }
.faq summary:hover { color: var(--brand); }
.faq summary:hover::after { color: var(--brand); }
.faq-a { padding: 0 0 var(--s-5); }
.faq-a p {
  font-size: 15.5px; color: var(--ink-2); line-height: 1.8;
  max-width: 70ch;
}

/* ── Footer, redesigned ────────────────────────────────────
   Brand block (mark, tagline, contact lines, social row) beside a
   short link column, with a legal line underneath. The older
   .footer-row rules remain in the stylesheet but are no longer
   referenced by index.html. */
.footer-main {
  display: grid; gap: var(--s-7);
  grid-template-columns: 1fr;
  padding-bottom: var(--s-6);
}
@media (min-width: 760px) {
  .footer-main { grid-template-columns: 1fr auto; gap: var(--s-8); align-items: start; }
}
.footer-brand .brand { color: var(--brand); display: inline-flex; }
.footer-brand .brand svg { height: 26px; width: auto; display: block; }
.footer-brand .brand .brand-logo { height: 52px; }
.footer-tagline {
  margin-top: var(--s-4);
  font-size: 15px; color: var(--ink-2); line-height: 1.75;
  max-width: 44ch;
}
.footer-contact {
  list-style: none; margin: var(--s-4) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  font-size: 15px;
}
.footer-contact a {
  color: var(--ink-2); unicode-bidi: isolate;
  min-height: 44px; display: inline-flex; align-items: center;
}
.footer-contact a:hover { color: var(--brand); }
.footer-social {
  list-style: none; margin: var(--s-5) 0 0; padding: 0;
  display: flex; gap: var(--s-3);
}
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  color: var(--ink-2); background: var(--surface);
  transition: color .16s ease, border-color .16s ease;
}
.footer-social a:hover { color: var(--brand); border-color: var(--brand); }
.footer-social svg { width: 19px; height: 19px; display: block; }
.footer-nav {
  display: flex; flex-direction: column; gap: var(--s-2);
}
.footer-nav a {
  font-size: 15px; color: var(--ink-2);
  min-height: 40px; display: inline-flex; align-items: center;
}
.footer-nav a:hover { color: var(--brand); }
.footer-bottom {
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.footer-bottom small { font-size: 13.5px; color: var(--ink-3); }

/* ════════════════════════════════════════════════════════════
   MOTION — animated hero console, auto-advancing slideshow, logo
   marquee, and scroll reveals. All CSS-only: no JavaScript, so the
   page stays inside the app's script-src 'self' CSP. The global
   prefers-reduced-motion rule above disables every animation here,
   and each piece has a sensible static fallback for that case.
   ════════════════════════════════════════════════════════════ */

/* ── Scroll reveal (progressive enhancement; needs view timelines) ── */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .section, .hero .hero-copy, .hero .hero-visual {
      animation: reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Hero: two columns with an animated "live call" console ── */
.hero-grid { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr .95fr; } }

.hero-visual { display: flex; justify-content: center; }
.hv-card {
  width: 100%; max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: var(--s-5);
  box-shadow: 0 24px 60px -32px rgba(26, 21, 14, .28);
}
.hv-head {
  display: flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mo); font-size: 12px; color: var(--ink-3);
  letter-spacing: .04em; margin-bottom: var(--s-5);
}
.hv-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--brand);
  animation: hv-pulse 1.8s ease-in-out infinite;
}
@keyframes hv-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(118, 92, 54, .45); opacity: 1; }
  50%      { box-shadow: 0 0 0 7px rgba(118, 92, 54, 0); opacity: .55; }
}
.hv-eq { display: flex; align-items: flex-end; gap: 5px; height: 64px; margin-bottom: var(--s-5); }
.hv-eq i {
  flex: 1; background: linear-gradient(var(--b-300), var(--brand));
  border-radius: 3px; height: 100%;
  transform-origin: bottom; transform: scaleY(.25);
  animation: eq-bar 1.1s ease-in-out infinite alternate;
}
.hv-eq i:nth-child(1){animation-delay:0s}   .hv-eq i:nth-child(2){animation-delay:.12s}
.hv-eq i:nth-child(3){animation-delay:.24s} .hv-eq i:nth-child(4){animation-delay:.36s}
.hv-eq i:nth-child(5){animation-delay:.48s} .hv-eq i:nth-child(6){animation-delay:.6s}
.hv-eq i:nth-child(7){animation-delay:.72s} .hv-eq i:nth-child(8){animation-delay:.84s}
.hv-eq i:nth-child(9){animation-delay:.96s}
@keyframes eq-bar { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
.hv-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.hv-step {
  text-align: center; font-size: 13.5px; color: var(--ink-3);
  padding: 9px 4px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--line);
  animation: hv-step 3s ease-in-out infinite;
}
.hv-step:nth-child(1){animation-delay:0s}
.hv-step:nth-child(2){animation-delay:1s}
.hv-step:nth-child(3){animation-delay:2s}
@keyframes hv-step {
  0%, 100% { background: var(--surface-2); color: var(--ink-3); border-color: var(--line); }
  16%, 28% { background: var(--brand); color: #fff; border-color: var(--brand); }
}

/* ── Partners as an auto-scrolling marquee ── */
.marquee {
  overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex; align-items: center; gap: var(--s-4);
  list-style: none; margin: 0; padding: var(--s-2) 0; width: max-content;
  animation: marquee 30s linear infinite;
}
.marquee-track li {
  flex: none; width: 230px; height: 108px;
  display: flex; align-items: center; justify-content: center;
  /* Logos sit transparent on the page — no card behind them. */
}
/* The logo files are trimmed to their marks, so the height set here is the
   logo's own height. A wide lock-up and a stacked one need different
   heights to look the same size. */
.marquee-track img { width: auto; max-width: 100%; object-fit: contain; }
.marquee-track img.logo-wide    { height: 58px; }
.marquee-track img.logo-stacked { height: 78px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Showcase: auto-advancing slideshow (PowerPoint-style) ── */
.shots { position: relative; max-width: 560px; margin-inline: auto; }
.stage {
  position: relative; min-height: clamp(460px, 90vw, 540px);
  background: linear-gradient(140deg, var(--b-100), #E7D7BC);
  border-radius: 18px; overflow: hidden;
}
.shot {
  position: absolute; inset: 0; opacity: 0;
  padding: clamp(20px, 5vw, 40px);
  display: flex; flex-direction: column; gap: var(--s-4); justify-content: center;
  animation: shot-fade 15s ease-in-out infinite;
}
.shot-1 { opacity: 1; animation-delay: 0s; }   /* first screen is the static fallback */
.shot-2 { animation-delay: 5s; }
.shot-3 { animation-delay: 10s; }
@keyframes shot-fade {
  0%   { opacity: 0; transform: translateY(10px); }
  3%   { opacity: 1; transform: none; }
  30%  { opacity: 1; transform: none; }
  33%  { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 0; }
}
.mock {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: var(--s-5); box-shadow: 0 20px 50px -34px rgba(26, 21, 14, .3);
}
.mock-head {
  display: flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mo); font-size: 11.5px; color: var(--ink-3);
  letter-spacing: .04em; margin-bottom: var(--s-4);
}
.mock-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.shot-cap { text-align: center; font-size: 14.5px; color: var(--ink-2); max-width: none; }
/* chat bubbles */
.bubbles { display: flex; flex-direction: column; gap: var(--s-2); }
.bubble { max-width: 82%; padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.6; }
.bubble.in  { align-self: flex-start; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); border-end-start-radius: 4px; }
.bubble.out { align-self: flex-end; background: var(--brand); color: #fff; border-end-end-radius: 4px; }
/* call */
.call-no { font-size: 18px; font-weight: 600; color: var(--ink); direction: ltr; text-align: center; margin: 0 auto var(--s-3); }
.call-eq { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 40px; margin-bottom: var(--s-4); }
.call-eq i {
  width: 5px; background: var(--b-300); border-radius: 3px; height: 100%;
  transform-origin: bottom; transform: scaleY(.3);
  animation: eq-bar 1s ease-in-out infinite alternate;
}
.call-eq i:nth-child(2n){animation-delay:.2s} .call-eq i:nth-child(3n){animation-delay:.4s}
.call-action { text-align: center; }
.chip {
  display: inline-block; font-size: 13px; padding: 7px 14px; border-radius: 999px;
  background: var(--b-100); color: var(--b-700); border: 1px solid var(--b-200);
}
/* dashboard */
.dash-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.dash-row:last-of-type { border-bottom: 0; }
.dash-row .k { color: var(--ink-3); } .dash-row .v { color: var(--ink); font-weight: 500; }
.dash-bars { display: flex; align-items: flex-end; gap: 6px; height: 48px; margin-top: var(--s-3); }
.dash-bars i { flex: 1; background: var(--b-200); border-radius: 3px 3px 0 0; }
.dash-bars i:nth-child(1){height:40%} .dash-bars i:nth-child(2){height:70%}
.dash-bars i:nth-child(3){height:55%} .dash-bars i:nth-child(4){height:90%; background: var(--brand)}
.dash-bars i:nth-child(5){height:65%}
/* dots */
.shot-dots { display: flex; justify-content: center; gap: var(--s-2); margin-top: var(--s-6); }
.shot-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); animation: shot-dot 15s ease-in-out infinite; }
.shot-dots i:nth-child(1){animation-delay:0s}
.shot-dots i:nth-child(2){animation-delay:5s}
.shot-dots i:nth-child(3){animation-delay:10s}
@keyframes shot-dot {
  0%, 33%, 100% { background: var(--line-2); transform: scale(1); }
  3%, 30%       { background: var(--brand);  transform: scale(1.25); }
}

/* ── Showcase: richer mockups (chat + voice note, collections, growth) ── */
/* Voice-note card under the chat */
.vnote {
  display: flex; align-items: center; gap: 10px; margin-top: var(--s-3);
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2);
}
.vnote-av { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--b-300), var(--brand)); flex: none; }
.vnote-meta { display: flex; flex-direction: column; line-height: 1.35; font-size: 12px; color: var(--ink-3); }
.vnote-meta b { font-size: 13px; color: var(--ink); font-weight: 600; }
.vnote-wave { margin-inline-start: auto; display: flex; align-items: center; gap: 3px; height: 20px; }
.vnote-wave i {
  width: 3px; background: var(--brand); border-radius: 2px; height: 100%;
  transform-origin: center; transform: scaleY(.4);
  animation: eq-bar 1s ease-in-out infinite alternate;
}
.vnote-wave i:nth-child(2n){animation-delay:.15s} .vnote-wave i:nth-child(3n){animation-delay:.3s}

/* Collections card — dark variant, like the reference */
.mock-dark { background: var(--dark); border-color: var(--dark-2); color: #EFE9DE; }
.mock-dark .mock-head { color: var(--b-300); }
.mock-dark .mock-head .dot { background: var(--b-300); }
.mock-dark .dash-row { border-color: #2E2619; }
.mock-dark .dash-row .k { color: #9A8E7C; }
.mock-dark .dash-row .v { color: #F1E8DA; }
.mock-head .dstatus {
  margin-inline-start: auto; font-family: var(--font-ar); font-size: 11px; letter-spacing: 0;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(197, 166, 119, .16); color: var(--b-300); border: 1px solid rgba(197, 166, 119, .3);
}
.dassist { display: flex; align-items: center; gap: 8px; margin: var(--s-3) 0; font-size: 13px; color: #B7AB97; }
.dassist-dots { display: inline-flex; gap: 3px; }
.dassist-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--b-300); animation: dassist 1.2s ease-in-out infinite; }
.dassist-dots i:nth-child(2){animation-delay:.2s} .dassist-dots i:nth-child(3){animation-delay:.4s}
@keyframes dassist { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.dresult { margin: var(--s-2) 0 var(--s-3); padding: 9px 12px; border-radius: 8px; background: rgba(197, 166, 119, .12); color: var(--b-300); font-size: 14px; font-weight: 500; }
.dchips { display: flex; flex-wrap: wrap; gap: 8px; }
.mock-dark .chip { background: rgba(197, 166, 119, .14); color: var(--b-300); border-color: rgba(197, 166, 119, .32); }

/* Growth chart — "learns and improves" */
.growth { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: var(--s-4); margin-bottom: var(--s-3); }
.growth-svg { display: block; width: 100%; height: auto; }
.g-base { stroke: var(--line-2); stroke-width: 1.5; }
.g-flat { fill: none; stroke: var(--b-300); stroke-width: 2.5; opacity: .5; }
.g-main { fill: none; stroke: var(--brand); stroke-width: 3.5; stroke-linecap: round; }
.g-dot  { fill: var(--brand); }
.g-halo { fill: none; stroke: var(--brand); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: g-halo 1.8s ease-in-out infinite; }
@keyframes g-halo { 0%, 100% { opacity: .4; transform: scale(1); } 50% { opacity: 0; transform: scale(1.8); } }
.growth-cap { font-size: 13.5px; color: var(--ink-2); text-align: center; max-width: none; }