/*
 * waqood.om/demo landing page. The app's visual language (src/ui/theme.ts):
 * the dark console, the #FF9F0A accent, cards on 1px hairlines, figures in
 * JetBrains Mono. The light theme uses the app's light palette, whose accent
 * is a deeper orange so it reads as text on white.
 *
 * Logical properties (inline-start/end) throughout, so Arabic mirrors itself
 * from dir="rtl". No JavaScript is needed for layout.
 */

/* Fonts: the app's own faces, as small WOFF2 subsets owned by this page
   (fonts/, made by frontend/scripts/demo-shots/subset-fonts.sh): Latin for
   Geist and JetBrains Mono, Arabic plus Latin for Plex Sans Arabic. Plex is
   only used on Arabic pages, so an English visit never downloads it (the two
   Arabic words on an English page use the system's Arabic font). A missing
   file falls back to the system font. */
@font-face {
  font-family: 'Geist';
  font-weight: 400;
  font-display: swap;
  src: url('/demo/fonts/geist-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-weight: 600;
  font-display: swap;
  src: url('/demo/fonts/geist-600.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-weight: 400;
  font-display: swap;
  src: url('/demo/fonts/plex-arabic-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-weight: 600;
  font-display: swap;
  src: url('/demo/fonts/plex-arabic-600.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 500;
  font-display: swap;
  src: url('/demo/fonts/jetbrains-mono-500.woff2') format('woff2');
}

:root {
  color-scheme: dark;
  --bg: #080c0f;
  --card: #11161b;
  --inner: #181e24;
  --line: #1c2329;
  --bar: #0d1115;
  --tx: #ffffff;
  --tx2: #8e9aa0;
  --tx3: #5c6870;
  --acc: #ff9f0a;
  --acc-btn: #ff9f0a;
  --on-acc: #080c0f;
  --acc-tint: rgba(255, 159, 10, 0.1);
  --acc-line: rgba(255, 159, 10, 0.22);
  --green: #30d158;
  --red: #ff453a;
  --red-tint: rgba(255, 69, 58, 0.1);
  --red-line: rgba(255, 69, 58, 0.3);

  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --arabic: 'IBM Plex Sans Arabic', 'Geeza Pro', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --arabic-system: 'Geeza Pro', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font: var(--sans);

  --wrap: 76rem;
  --gutter: clamp(1.25rem, 4.5vw, 4rem);
  --section: clamp(4.5rem, 9vw, 9.5rem);
  --radius: 14px;
}

[data-theme='light'] {
  color-scheme: light;
  --bg: #f2f4f6;
  --card: #ffffff;
  --inner: #ebeef1;
  --line: #dce1e6;
  --bar: #ffffff;
  --tx: #0b1014;
  --tx2: #4a565e;
  --tx3: #5f6b73;
  --acc: #b04e00;
  --acc-btn: #b04e00;
  --on-acc: #ffffff;
  --acc-tint: rgba(255, 159, 10, 0.14);
  --acc-line: rgba(176, 78, 0, 0.28);
  --green: #17702f;
  --red: #c8102e;
  --red-tint: rgba(200, 16, 46, 0.08);
  --red-line: rgba(200, 16, 46, 0.22);
}

html[lang='ar'] {
  --font: var(--arabic);
}
/* A snippet in the other language: on an English page the system's Arabic
   font, so Plex is not fetched for a word; on an Arabic page Plex, whose
   Latin matches the text around it (and spares Geist). */
html[lang='en'] [lang='ar'] {
  font-family: var(--arabic-system);
}
html[lang='ar'] [lang='en'] {
  font-family: var(--arabic);
}

/* Bigger type on big screens: 16px up to 19px at 2560 wide. */
html {
  font-size: clamp(16px, 0.3vw + 12px, 19px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 5rem;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Until demo.js has put the Arabic copy in (boot.js sets the class). If the
   script never runs, the page appears anyway after 1.5 s. */
.i18n-wait body {
  visibility: hidden;
  animation: reveal 0s 1.5s forwards;
}
@keyframes reveal {
  to {
    visibility: visible;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
/* `hidden` must win over .btn and friends: the contact links and the
   contact section stay out of sight until config.json fills them in. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font: 400 1rem/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
img,
svg {
  display: block;
}
a {
  color: inherit;
}
button {
  font: inherit;
  color: inherit;
}
::selection {
  background: rgba(255, 159, 10, 0.35);
}

:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 3px;
  border-radius: 6px;
}
:focus:not(:focus-visible) {
  outline: none;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
svg use {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.skip {
  position: absolute;
  inset-inline-start: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  background: var(--acc-btn);
  color: var(--on-acc);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus {
  top: 1rem;
}

.wrap {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}

.mono {
  font-family: var(--mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Arrows point forwards, which is left in Arabic. */
[dir='rtl'] .dir {
  transform: scaleX(-1);
}

/* ---------------------------------------------------------------- type */

h1 {
  font-size: clamp(2.35rem, 1.3rem + 3.7vw, 4.6rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
h2 {
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.85rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
h3,
.h3 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.h3 {
  font-size: clamp(1.25rem, 1rem + 0.6vw, 1.5rem);
}
/* Arabic has no use for tight tracking, and needs taller lines. */
[lang='ar'] h1,
[lang='ar'] h2,
[lang='ar'] h3,
[lang='ar'] .h3 {
  letter-spacing: 0;
}
[lang='ar'] h1 {
  line-height: 1.28;
  font-size: clamp(2.1rem, 1.2rem + 3.2vw, 4rem);
}
[lang='ar'] h2 {
  line-height: 1.35;
}
[lang='ar'] body {
  line-height: 1.75;
}

p {
  color: var(--tx2);
  text-wrap: pretty;
}
.lead {
  font-size: clamp(1.06rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.6;
}
.note {
  font-size: 0.875rem;
  color: var(--tx2);
}

/* ------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0.7rem 1.35rem;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--acc-btn);
  color: var(--on-acc);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.15s, background-color 0.15s, border-color 0.15s;
}
.btn:hover {
  filter: brightness(1.08);
}
.btn svg {
  width: 1.15rem;
  height: 1.15rem;
}
.btn svg use {
  stroke-width: 2;
}
.btn--ghost {
  background: var(--card);
  border-color: var(--line);
  color: var(--tx);
}
.btn--ghost:hover {
  filter: none;
  border-color: var(--tx3);
}
.btn--sm {
  min-height: 2.4rem;
  padding: 0.45rem 0.95rem;
  border-radius: 10px;
  font-size: 0.9rem;
}

/* -------------------------------------------------------------- header */

.top {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
}
.top__in {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 4rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}
.brand__name {
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}
[lang='ar'] .brand__name {
  letter-spacing: 0;
  font-size: 1.25rem;
}
.top__tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-inline-start: auto;
}
.tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 0.75rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  font-size: 0.9rem;
  cursor: pointer;
}
.tool:hover {
  border-color: var(--tx3);
}
.tool[lang='ar'] {
  font-family: var(--arabic);
}
.tool[lang='en'] {
  font-family: var(--sans);
}
.tool--icon {
  padding: 0;
}
.tool svg {
  width: 1.15rem;
  height: 1.15rem;
}
[data-theme='dark'] .when-light,
[data-theme='light'] .when-dark {
  display: none;
}
/* On a phone the header keeps the mark, the switches and the button. */
@media (max-width: 480px) {
  .top__in {
    gap: 0.75rem;
  }
}

/* ---------------------------------------------------------------- page */

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.hero {
  padding-block: clamp(2.5rem, 7vw, 6rem) clamp(3rem, 7vw, 6rem);
}
.hero__in {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
.hero__text {
  max-width: 36rem;
}
.hero .lead {
  margin-block: 1.25rem 2rem;
}
@media (min-width: 900px) {
  .hero__in {
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: 4rem;
  }
}

/* A phone screenshot: the screen, rounded like one, nothing around it. */
.shot {
  position: relative;
  width: min(80vw, 22rem);
  aspect-ratio: 390 / 844;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1.75rem;
  background: var(--card);
}
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shot--hero {
  justify-self: center;
}

.screens,
.interest {
  padding-block: clamp(2.5rem, 6vw, 5rem);
  border-top: 1px solid var(--line);
}
.screens__grid {
  display: grid;
  gap: 3.5rem 2.5rem;
}
.screen h2 {
  margin-block: 1.25rem 0.4rem;
  font-size: 1.25rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
[lang='ar'] .screen h2 {
  letter-spacing: 0;
}
.screen p {
  max-width: 22rem;
}
@media (min-width: 700px) {
  .screens__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .shot {
    width: 100%;
    max-width: 22rem;
  }
}
@media (min-width: 1100px) {
  .screens__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.interest__in {
  display: grid;
  gap: 2rem;
  align-items: start;
}
.interest__text .lead {
  margin-top: 0.75rem;
}
@media (min-width: 1000px) {
  .interest__in {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 5rem;
  }
}

.interest__card {
  padding: clamp(1.25rem, 3.5vw, 2.25rem);
}

.form {
  display: grid;
  gap: 1.15rem;
}
.form__two {
  display: grid;
  gap: 1.15rem;
}
@media (min-width: 560px) {
  .form__two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.field {
  display: grid;
  gap: 0.4rem;
  align-content: start;
}
.field label {
  color: var(--tx);
  font-size: 0.925rem;
  font-weight: 600;
}
.opt {
  color: var(--tx2);
  font-weight: 400;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--inner);
  color: var(--tx);
  /* 16px or more, so iOS does not zoom into the field. */
  font: 400 1rem/1.4 var(--font);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field textarea {
  min-height: 7rem;
  resize: vertical;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--tx3);
  opacity: 1;
}
/* Email and phone are typed left to right; in Arabic they still line up
   with the fields around them. */
[dir='rtl'] .field input[dir='ltr'] {
  text-align: right;
}
.field select {
  -webkit-appearance: none;
  appearance: none;
  padding-inline-end: 2.5rem;
  cursor: pointer;
  /* A chevron in --tx2 for each theme. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238e9aa0' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 8 4.5 4.5L14.5 8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 1.1rem;
  background-position: right 0.85rem center;
}
[dir='rtl'] .field select {
  background-position: left 0.85rem center;
}
[data-theme='light'] .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%234a565e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 8 4.5 4.5L14.5 8'/%3E%3C/svg%3E");
}
.field select option {
  background: var(--card);
  color: var(--tx);
}
.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--tx3);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--acc-tint);
}
.field [aria-invalid='true'],
.field [aria-invalid='true']:hover,
.field [aria-invalid='true']:focus {
  border-color: var(--red);
}
.field [aria-invalid='true']:focus {
  box-shadow: 0 0 0 3px var(--red-tint);
}
.field__hint {
  color: var(--tx2);
  font-size: 0.825rem;
  line-height: 1.45;
}
/* An error under the field says what is wrong; the hint would repeat it. */
.field:has([aria-invalid='true']) .field__hint {
  display: none;
}
.form__reach {
  margin-bottom: -0.5rem;
  color: var(--tx2);
  font-size: 0.875rem;
}
.field__err {
  color: var(--red);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.45;
}
.form[aria-busy='true'] .field {
  opacity: 0.7;
}

/* Web3Forms' honeypot (botcheck): out of sight and out of the
   accessibility tree, so only a bot filling every field ticks it. */
.trap {
  display: none !important;
}

.form__alert {
  display: flex;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--red-line);
  border-radius: 10px;
  background: var(--red-tint);
  font-size: 0.925rem;
}
.form__alert svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  color: var(--red);
}
.form__alert p {
  color: var(--tx);
}
.form__alert p + p {
  margin-top: 0.3rem;
  color: var(--tx2);
}
.form__alert a {
  color: var(--acc);
  font-weight: 600;
  unicode-bidi: isolate;
}

.form__submit {
  width: 100%;
  margin-top: 0.35rem;
  cursor: pointer;
}
.form__submit:disabled {
  cursor: progress;
  filter: saturate(0.6);
}
.spin {
  display: none;
  width: 1.05rem;
  height: 1.05rem;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
}
.form[aria-busy='true'] .spin {
  display: block;
}
@media (prefers-reduced-motion: no-preference) {
  .spin {
    animation: spin 0.7s linear infinite;
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.form__privacy {
  margin-top: -0.35rem;
  color: var(--tx2);
  font-size: 0.825rem;
  text-align: center;
}

.form__done {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  padding: clamp(1.5rem, 5vw, 3rem) 0.5rem;
  text-align: center;
}
.form__done:focus {
  outline: none;
}
.form__done svg {
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.4rem;
  color: var(--green);
}
.form__done svg use {
  stroke-width: 1.5;
}
.form__done h3 {
  font-size: clamp(1.25rem, 1rem + 0.6vw, 1.5rem);
}
.form__done p {
  max-width: 26rem;
}

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

.contact {
  padding-bottom: 3rem;
}
.contact__ways {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* A screenshot that would not load: demo.js swaps in a neutral placeholder,
   and only while working on the page (localhost, ?debug) the file name. */
.is-ph[data-ph]::after {
  content: attr(data-ph);
  position: absolute;
  inset-inline: 0.75rem;
  top: 0.6rem;
  color: var(--tx3);
  font: 500 0.65rem/1.3 var(--mono);
  direction: ltr;
  text-align: center;
  overflow-wrap: anywhere;
}
[dir='rtl'] .is-ph img {
  transform: scaleX(-1);
}

/* -------------------------------------------------------------- footer */

.foot {
  border-top: 1px solid var(--line);
}
.foot__in {
  padding-block: 2rem;
}
.foot p {
  font-size: 0.85rem;
}