/* The website: the documents' visual language on screen. Deep night blue,
   a warm sand paper tone, one amber-gold accent used sparingly; Arabic in
   Naskh (Amiri for display), Latin in EB Garamond. Mobile first (most
   visitors arrive from WhatsApp on a phone); logical properties only, so
   that right to left needs no mirror rules. No JavaScript on these pages. */

@font-face{font-family:"Site Naskh";src:url(/static/fonts/naskh-400-6ed5bf47638a.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:"Site Naskh";src:url(/static/fonts/naskh-600-d34f59c16241.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:"Site Amiri";src:url(/static/fonts/amiri-700-f50a5833a867.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:"Site Serif";src:url(/static/fonts/serif-400-a7dae912e0e3.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Site Serif";src:url(/static/fonts/serif-500-40676f99332a.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Site Serif";src:url(/static/fonts/serif-600-8ae9a9c1fe73.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Site Mono";src:url(/static/fonts/mono-400-719c19bd6a62.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;}

:root {
  --night: #0E2A47;
  --night-2: #23415F;
  --ink: #17222D;
  --muted: #4F5A65;
  --sand: #F4EEE2;
  --sand-2: #EDE4D2;
  --sand-3: #E2D6BF;
  --paper: #FBF8F1;
  --amber: #EBA640;
  --amber-ink: #8A5A10;
  --rule: rgba(14, 42, 71, .22);
  --hair: rgba(14, 42, 71, .12);
  --serif: "Site Serif", "Site Naskh", Georgia, "Times New Roman", serif;
  --naskh: "Site Naskh", "Site Serif", "Geeza Pro", "Segoe UI", serif;
  --display-ar: "Site Amiri", "Site Naskh", "Site Serif", serif;
  --mono: "Site Mono", ui-monospace, Menlo, Consolas, monospace;
  --gutter: 16px;
  --measure: 40rem;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--sand); color: var(--ink);
  font: 400 1.125rem/1.6 var(--serif); font-variant-numeric: lining-nums;
  font-kerning: normal; overflow-wrap: anywhere;
}
[lang="ar"] body, body:lang(ar) { font-family: var(--naskh); font-size: 1.0625rem; line-height: 1.9; font-variant-numeric: normal; }
[lang="ar"] { font-family: var(--naskh); }
[lang="en"], [lang="es"] { font-family: var(--serif); }
bdi { unicode-bidi: isolate; }
.nw { white-space: nowrap; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--night); text-decoration-color: var(--amber); text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
a:hover { color: var(--night-2); }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-radius: 2px; }
p { margin: 0 0 .9em; }
h1, h2, h3 { color: var(--night); font-weight: 600; line-height: 1.25; margin: 0 0 .5em; }
:lang(ar) h1, :lang(ar) h2, h1:lang(ar), h2:lang(ar) { font-family: var(--display-ar); font-weight: 700; line-height: 1.5; }
:lang(ar) h3, h3:lang(ar) { font-family: var(--naskh); font-weight: 600; line-height: 1.6; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }
ul, ol { padding-inline-start: 1.3em; margin: 0 0 1em; }
code, .code, .fingerprint { font-family: var(--mono); font-size: .86em; letter-spacing: .02em; }

.skip { position: absolute; inset-inline-start: -999px; top: 0; background: var(--paper); padding: .5em 1em; z-index: 10; }
.skip:focus { inset-inline-start: var(--gutter); }

.wrap { max-width: 72rem; margin: 0 auto; padding: 2.25rem var(--gutter); }
.wrap.narrow, .narrow { max-width: calc(var(--measure) + 2 * var(--gutter)); }
.section-title { font-size: 1.6rem; margin-bottom: .6em; }
.section-title::after { content: ""; display: block; width: 2.5rem; border-top: 2px solid var(--amber); margin-top: .35em; }
.lead { font-size: 1.2rem; color: var(--ink); }
.note, .hint { color: var(--muted); font-size: .95rem; }
.mark { display: inline-block; font-family: var(--serif); font-size: .78rem; letter-spacing: .14em; color: var(--amber-ink);
        border: 1px solid var(--amber); padding: .2em .65em; margin: 0 0 .8em; white-space: nowrap; }
.mark.small { font-size: .75rem; margin-bottom: .5em; }
:lang(ar) .mark { letter-spacing: .04em; }

/* -- header -------------------------------------------------------------- */
.top { background: var(--night); color: var(--sand); }
.top-inner { max-width: 72rem; margin: 0 auto; padding: .7rem var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .75rem; color: var(--sand); text-decoration: none; direction: ltr; }
.brand-latin { font: 500 1rem/1 var(--serif); letter-spacing: .38em; padding-inline-start: .38em; }
.brand-arabic { font: 700 1.45rem/1 var(--display-ar); }
.brand-bar { width: 1px; height: 1.4rem; background: rgba(244, 238, 226, .4); }
.brand:hover { color: #fff; }
.langs { display: flex; gap: .9rem; font-size: .95rem; }
.langs a { color: var(--sand); text-decoration: none; border-bottom: 1px solid rgba(235, 166, 64, .6); line-height: 1.6; }
.langs a[lang="ar"] { font-family: var(--naskh); }
.nav-wide { display: none; }
.nav-narrow { border-top: 1px solid rgba(244, 238, 226, .14); }
.nav-narrow summary { list-style: none; cursor: pointer; padding: .55rem var(--gutter); color: var(--sand); font-size: 1rem; display: flex; align-items: center; gap: .5rem; }
.nav-narrow summary::-webkit-details-marker { display: none; }
.nav-narrow summary::before { content: ""; width: 1.1rem; height: .7rem; border-top: 2px solid var(--amber); border-bottom: 2px solid var(--amber); box-shadow: inset 0 -5px 0 -3px var(--amber); }
.nav-narrow ul { list-style: none; margin: 0; padding: 0 var(--gutter) .8rem; }
.nav-narrow a, .nav-wide a { color: var(--sand); text-decoration: none; display: block; padding: .45rem 0; }
.nav-narrow a[aria-current], .nav-wide a[aria-current] { color: var(--amber); }

/* -- hero ---------------------------------------------------------------- */
.hero { background: linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%); color: var(--sand); }
.hero-inner { max-width: 50rem; margin: 0 auto; padding: 2.2rem var(--gutter) 2.8rem; text-align: center; }
.tower { color: var(--sand); margin: 0 auto 1rem; width: 76px; }
.hero-title { color: #fff; font-size: 2rem; line-height: 1.3; margin-bottom: .6em; }
:lang(ar) .hero-title { font-size: 2.15rem; line-height: 1.65; }
.hero-sub { font-size: 1.18rem; color: var(--sand-2); max-width: 36rem; margin: 0 auto 1.4em; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin: 1.2em 0 0; }
.wrap .actions, .form .actions { justify-content: flex-start; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .55em 1.3em; border-radius: 2px;
          font: 600 1.02rem/1.2 var(--serif); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; }
:lang(ar) .button { font-family: var(--naskh); font-size: 1.05rem; }
.button.primary { background: var(--amber); color: var(--night); border-color: var(--amber); }
.button.primary:hover { background: #F2B65B; color: var(--night); }
.button.ghost { color: var(--sand); border-color: rgba(244, 238, 226, .65); background: transparent; }
.button.ghost:hover { border-color: var(--amber); color: #fff; }
.button.ghost.dark { color: var(--night); border-color: var(--night); }
.button.ghost.dark:hover { background: var(--sand-2); }
.button.small { min-height: 44px; padding: .35em 1em; font-size: .95rem; }
.button.whatsapp { background: var(--night); color: var(--sand); }

/* -- sections ------------------------------------------------------------ */
.band { background: var(--paper); border-bottom: 1px solid var(--hair); }
.promise { font-size: 1.55rem; line-height: 1.4; }
.services { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.service { background: var(--paper); border: 1px solid var(--hair); border-inline-start: 3px solid var(--amber); padding: 1.1rem 1.2rem; }
.service h3 { margin-bottom: .25em; font-size: 1.35rem; }
.service p { margin: 0; }

.demo-grid { display: grid; gap: 1.5rem; align-items: start; }
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.steps li { counter-increment: step; position: relative; padding-inline-start: 2.6rem; margin-bottom: 1.1rem; }
.steps li::before { content: counter(step); position: absolute; inset-inline-start: 0; top: .1em; width: 1.85rem; height: 1.85rem; border-radius: 50%;
                    background: var(--night); color: var(--sand); font: 600 1rem/1.85rem var(--serif); text-align: center; }
:lang(ar) .steps li::before { content: counter(step, arabic-indic); font-family: var(--naskh); line-height: 1.95rem; }
.file-link { display: inline-block; margin-top: .3em; font-weight: 600; }
.steps .file-link { display: table; }
.demo-figure { margin: 0; background: var(--paper); border: 1px solid var(--hair); padding: .8rem; }
.demo-figure figcaption { display: flex; align-items: center; gap: 1rem; margin-top: .8rem; color: var(--muted); font-size: .95rem; }
.qr { width: 108px; height: 108px; background: #fff; flex: none; }
.demo-figure .qr { width: 120px; height: 120px; }

.two { display: grid; gap: 1.2rem; }
.card { background: var(--paper); border: 1px solid var(--hair); padding: 1.3rem 1.3rem .6rem; }
.card h2 { font-size: 1.35rem; }
.more { font-weight: 600; }
.more::after { content: " \2192"; }
:lang(ar) .more::after { content: " \2190"; }
.cta { background: var(--night); color: var(--sand); text-align: center; }
.cta h2 { color: #fff; }
.cta .actions { justify-content: center; }
.story p { font-size: 1.15rem; }

.page-head { background: var(--paper); border-bottom: 1px solid var(--hair); }
.page-head .wrap { padding-top: 2rem; padding-bottom: 1.6rem; }
.page-head h1 { font-size: 2.1rem; }

/* -- how it works -------------------------------------------------------- */
.parts { list-style: none; padding: 0; margin: 0; counter-reset: part; display: grid; gap: 1rem; }
.part { counter-increment: part; background: var(--paper); border: 1px solid var(--hair); padding: 1.1rem 1.2rem .4rem; position: relative; }
.part h2 { font-size: 1.3rem; }
.part h2::before { content: counter(part) ". "; color: var(--amber-ink); }
:lang(ar) .part h2::before { content: counter(part, arabic-indic) ". "; }
.notproves { border-inline-start: 3px solid var(--night); }
.proves { border-inline-start: 3px solid var(--amber); }
.key { margin: 0 0 1rem; background: var(--paper); border: 1px solid var(--hair); padding: .9rem 1.1rem; display: grid; gap: .4rem; }
.key div, .identity div { display: grid; gap: .1rem; }
.key dt, .identity dt { color: var(--muted); font-size: .9rem; }
.key dd, .identity dd { margin: 0; }
.fingerprint { display: block; direction: ltr; text-align: left; font-size: .92rem; line-height: 1.7; word-spacing: .12em; overflow-wrap: normal; white-space: normal; }
.links { color: var(--muted); }

/* -- examples ------------------------------------------------------------ */
.tiles { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.2rem; }
.tile { background: var(--paper); border: 1px solid var(--hair); display: flex; flex-direction: column; }
.tile-image, .cover img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--sand-2); }
.docs .cover img { aspect-ratio: 210 / 297; object-fit: contain; background: var(--sand-3); padding: .8rem; }
.tile-body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; flex: 1; }
.tile-body h3 { margin-bottom: .2em; }
.tile-body .mark { align-self: flex-start; }
.layer { color: var(--muted); margin-bottom: .2em; }
.layer.show { color: var(--amber-ink); }
.code-line { font-size: .95rem; color: var(--muted); }
.tile-foot { display: flex; gap: 1rem; align-items: center; margin-top: auto; }
.tile-links { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; margin: 0; }

/* -- about --------------------------------------------------------------- */
.founder-video { width: 100%; aspect-ratio: 16 / 9; background: var(--night); }
.founder-placeholder { margin: 0; background: var(--night); color: var(--sand); }
.placeholder-frame { aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
                     background: radial-gradient(circle at 50% 35%, var(--night-2), var(--night) 70%); }
.placeholder-frame .tower { margin: 0; width: 64px; }
.placeholder-name { margin: 0; color: #fff; font-size: 1.1rem; }
.founder-placeholder figcaption { background: var(--paper); color: var(--ink); padding: 1.1rem 1.2rem .4rem; border: 1px solid var(--hair); border-top: 0; }
.placeholder-words { color: var(--amber-ink); font-weight: 600; margin-bottom: .5em; }
blockquote { margin: 0; }
blockquote p, .transcript p { font-size: 1.05rem; }
.transcript { margin-top: 1rem; }
.transcript summary { cursor: pointer; font-weight: 600; color: var(--night); }
.identity { margin: 0 0 1rem; display: grid; gap: .7rem; }

/* -- privacy and legal --------------------------------------------------- */
.points { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.legal-text h3, .legal-section h2 { font-size: 1.22rem; margin-top: 1.4em; }
.legal-text ul { margin-top: -.3em; }
.legal-text li { margin-bottom: .35em; }

/* -- forms --------------------------------------------------------------- */
.form { display: grid; gap: 1.05rem; }
.field { display: grid; gap: .3rem; }
.field label, legend { font-weight: 600; color: var(--night); }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%; min-height: 48px; padding: .55em .7em; border: 1px solid var(--rule); border-radius: 2px; background: #fff; color: var(--ink);
  font: 400 1.05rem/1.4 var(--serif);
}
:lang(ar) input, :lang(ar) select, :lang(ar) textarea { font-family: var(--naskh); }
input[dir="ltr"] { text-align: start; }
:lang(ar) input[dir="ltr"] { text-align: right; }
textarea { resize: vertical; min-height: 8rem; }
input:focus, select:focus, textarea:focus { border-color: var(--night); }
fieldset { border: 1px solid var(--hair); background: var(--paper); padding: .9rem 1rem .5rem; margin: 0; }
.check { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; margin-bottom: .8rem; }
.check input { width: 1.3rem; height: 1.3rem; margin: .3em 0 0; accent-color: var(--night); }
.check label { font-weight: 400; color: var(--ink); font-size: 1rem; }
.optout-line { color: var(--amber-ink); font-weight: 600; }
.basic-info { font-size: .92rem; color: var(--muted); border-top: 1px solid var(--hair); padding-top: .8rem; }
.basic-info h3 { font-size: 1rem; color: var(--night); margin: .6em 0 .3em; }
.trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.message.error h1 { color: var(--night); }
.contact-direct a { font-weight: 600; }

/* -- footer -------------------------------------------------------------- */
.foot { background: var(--night); color: var(--sand-2); margin-top: 2rem; }
.foot-inner { max-width: 72rem; margin: 0 auto; padding: 1.8rem var(--gutter) 2.2rem; }
.foot a { color: var(--sand); }
.foot-contact { font-size: 1rem; }
.foot-links { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.foot-links a { display: inline-block; padding: .35rem 0; }
.foot-fine { font-size: .88rem; color: rgba(244, 238, 226, .82); margin: 0; }

/* -- language choice and not found --------------------------------------- */
.choose { max-width: 46rem; margin: 0 auto; padding: 2.5rem var(--gutter); text-align: center; }
.choose .tower { color: var(--night); }
.brand.big { color: var(--night); justify-content: center; display: flex; margin-bottom: 1.5rem; }
.brand.big .brand-latin { font-size: 1.2rem; }
.brand.big .brand-arabic { font-size: 1.9rem; }
.brand.big .brand-bar { background: var(--rule); }
.choice { border-top: 1px solid var(--rule); padding: 1.2rem 0 .4rem; }
.choice h1 { font-size: 1.35rem; }
.choice .button { margin: .2rem; }

/* -- wider screens ------------------------------------------------------- */
@media (min-width: 46rem) {
  h1 { font-size: 2.5rem; }
  .hero-inner { padding: 3.4rem var(--gutter) 4rem; }
  .hero-title { font-size: 2.7rem; }
  :lang(ar) .hero-title { font-size: 2.9rem; }
  .tower { width: 96px; }
  .services { grid-template-columns: 1fr 1fr; }
  .two { grid-template-columns: 1fr 1fr; }
  .demo-grid { grid-template-columns: 1.1fr 1fr; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .points { grid-template-columns: repeat(3, 1fr); }
  .key { grid-template-columns: 10rem 8rem 10rem 1fr; align-items: start; }
  .key .fp { grid-column: 1 / -1; }
  .page-head h1 { font-size: 2.6rem; }
}
@media (min-width: 64rem) {
  .nav-narrow { display: none; }
  .nav-wide { display: block; border-top: 1px solid rgba(244, 238, 226, .14); }
  .nav-wide ul { list-style: none; margin: 0 auto; padding: 0 var(--gutter); max-width: 72rem; display: flex; gap: 1.8rem; }
  .nav-wide a { padding: .6rem 0; }
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .parts { grid-template-columns: repeat(2, 1fr); }
  .parts .part:last-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media print { .top, .foot, .actions, .nav-narrow { display: none; } body { background: #fff; } }