/* ============================================================================
   TechMark — design system
   Tokens and primitives. Every colour, size, radius and duration used anywhere
   on the site is defined in this file and nowhere else.

   Palette is derived from the real brand assets, not invented:
   Branding/logo-white.svg is flat two-colour — cyan #63CADF and slate #8C8C8C.
   The photography is uniformly Levantine limestone under 2700K light, so the
   neutral ramp is warm stone rather than blue-grey.

   Direction: written with CSS logical properties throughout (inline-start /
   inline-end, not left / right) so a single stylesheet serves both the LTR
   English pages and the RTL Arabic pages with no overrides.
   ========================================================================= */

/* ------------------------------------------------------------------- fonts */
/* Self-hosted. No third-party request on the critical path.
   The two families are split by unicode-range, so one font stack renders both
   scripts correctly: Arabic glyphs resolve to Plex Arabic, Latin to Geist —
   including Latin words inside Arabic sentences ("n8n", "IP PBX", "TechMark"). */

@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist-sans-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist-sans-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist-sans-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plex Arabic';
  src: url('../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1,
    U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF, U+10E60-10E7E, U+1EE00-1EEFF;
}
@font-face {
  font-family: 'Plex Arabic';
  src: url('../fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1,
    U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF, U+10E60-10E7E, U+1EE00-1EEFF;
}
@font-face {
  font-family: 'Plex Arabic';
  src: url('../fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1,
    U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF, U+10E60-10E7E, U+1EE00-1EEFF;
}

/* ------------------------------------------------------------------ tokens */

:root {
  /* — surface: warm near-black, not blue-black — */
  --ink-900: #0B0D0F;
  --ink-800: #101316;
  --ink-700: #16191D;
  --ink-600: #1D2126;
  --ink-500: #262B31;
  --line:    #23282E;
  --line-2:  #2F353C;

  /* — ink on dark — verified contrast against --ink-900 — */
  --fg:      #E8E3DC;  /* 15.3:1 */
  --fg-2:    #A8A29A;  /*  7.7:1 */
  --fg-3:    #8A847A;  /*  5.3:1 */

  /* — the intelligent layer. Reserved for interaction, live state and the
       checkmark motif. Never decoration. — */
  --accent:      #63CADF;  /* 10.3:1 on --ink-900 */
  --accent-deep: #17697F;  /* the light-theme equivalent */
  --accent-wash: rgb(99 202 223 / 0.09);
  --accent-line: rgb(99 202 223 / 0.28);
  --slate:       #8C8C8C;  /* the logo's structural grey */

  --sel: rgb(99 202 223 / 0.22);
  --btn-on-accent: var(--ink-900);   /* label on a filled accent button */
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 12px 32px -12px rgb(0 0 0 / .55);
  --shadow-lift: 0 2px 4px rgb(0 0 0 / .3), 0 28px 60px -24px rgb(0 0 0 / .7);

  /* — type — one family per script, set with intent —
     Scoped per document language below. An English page that names the other
     language ("العربية" in the switcher) would otherwise pull a 42KB Arabic
     webfont for five glyphs; the system Arabic face renders it for free.
     Arabic pages DO load Geist, because Latin terms — TechMark, n8n, IP PBX —
     appear inside Arabic sentences constantly and must be set properly. */
  --font: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

  /* fluid scale, 390px → 1440px viewport */
  --step--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.88rem);
  --step-0:  clamp(1.00rem, 0.97rem + 0.14vw, 1.09rem);
  --step-1:  clamp(1.18rem, 1.11rem + 0.30vw, 1.37rem);
  --step-2:  clamp(1.38rem, 1.26rem + 0.53vw, 1.72rem);
  --step-3:  clamp(1.62rem, 1.41rem + 0.89vw, 2.16rem);
  --step-4:  clamp(1.90rem, 1.56rem + 1.44vw, 2.71rem);
  --step-5:  clamp(2.23rem, 1.69rem + 2.25vw, 3.40rem);
  --step-6:  clamp(2.61rem, 1.77rem + 3.45vw, 4.28rem);
  --step-7:  clamp(3.05rem, 1.75rem + 5.25vw, 5.36rem);

  /* — space — 4px base — */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 2.5rem;   --sp-8: 3rem;
  --sp-9: 4rem;     --sp-10: 5rem;    --sp-11: 6.5rem;  --sp-12: 8rem;
  --sp-13: 10rem;

  --r-sm: 8px;  --r-md: 14px;  --r-lg: 22px;  --r-full: 999px;

  --wrap: 76rem;
  --wrap-tight: 56rem;
  --measure: 68ch;

  /* Six curves, each with a job. One curve everywhere is what makes a site feel
     uniform rather than authored: nothing accelerates differently from anything
     else, so nothing reads as deliberate. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);          /* arrival — content settling in */
  --ease-glide: cubic-bezier(0.16, 1, 0.3, 1);     /* long, unhurried travel */
  --ease-swift: cubic-bezier(0.4, 0, 0.2, 1);      /* UI chrome: nav, header */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* overshoot — arrows, marks */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);    /* symmetric, for loops */
  --ease-draw: cubic-bezier(0.65, 0, 0.35, 1);     /* stroke drawing */

  --t-fast: 0.16s var(--ease);
  --t: 0.28s var(--ease);
  --t-slow: 0.5s var(--ease);
  --t-glide: 0.62s var(--ease-glide);
  --t-swift: 0.2s var(--ease-swift);

  /* the intelligent layer, used as light rather than as fill */
  --glow-cyan: rgb(99 202 223 / 0.16);
  --glow-warm: rgb(232 227 220 / 0.07);

  --header-h: 4.5rem;
  color-scheme: dark;
}

/* — light theme: limestone, the material in every photograph on this site — */
:root[data-theme='light'] {
  --ink-900: #FAF8F5;
  --ink-800: #FFFFFF;
  --ink-700: #F2EEE8;
  --ink-600: #EAE5DD;
  --ink-500: #DED8CE;
  --line:    #DFD9D0;
  --line-2:  #CBC4B8;

  --fg:   #14171A;  /* 17.1:1 */
  --fg-2: #5A554D;  /*  7.0:1 */
  --fg-3: #6E685F;  /*  5.2:1 */

  --accent:      #17697F;  /* 4.9:1 — the dark cyan reads as the same mark */
  --accent-deep: #17697F;
  --accent-wash: rgb(23 105 127 / 0.07);
  --accent-line: rgb(23 105 127 / 0.24);
  --slate:       #6E6E6E;

  --sel: rgb(23 105 127 / 0.18);
  --btn-on-accent: #FFFFFF;
  --shadow: 0 1px 2px rgb(28 24 16 / .05), 0 12px 28px -14px rgb(28 24 16 / .18);
  --shadow-lift: 0 2px 4px rgb(28 24 16 / .06), 0 28px 56px -24px rgb(28 24 16 / .26);
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --ink-900: #FAF8F5; --ink-800: #FFFFFF; --ink-700: #F2EEE8;
    --ink-600: #EAE5DD; --ink-500: #DED8CE; --line: #DFD9D0; --line-2: #CBC4B8;
    --fg: #14171A; --fg-2: #5A554D; --fg-3: #6E685F;
    --accent: #17697F; --accent-deep: #17697F;
    --accent-wash: rgb(23 105 127 / 0.07); --accent-line: rgb(23 105 127 / 0.24);
    --slate: #6E6E6E; --sel: rgb(23 105 127 / 0.18); --btn-on-accent: #FFFFFF;
    --shadow: 0 1px 2px rgb(28 24 16 / .05), 0 12px 28px -14px rgb(28 24 16 / .18);
    --shadow-lift: 0 2px 4px rgb(28 24 16 / .06), 0 28px 56px -24px rgb(28 24 16 / .26);
    color-scheme: light;
  }
}

/* -------------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--header-h) + var(--sp-4));
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ink-900);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

::selection { background: var(--sel); color: var(--fg); }

img, picture, svg, video { display: block; max-inline-size: 100%; }
img, video { block-size: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

/* Arabic sets slightly larger and looser — Plex Arabic has a smaller x-height
   relative to Geist, so matched px sizes read smaller. This corrects it. */
html[lang='ar'] { --font: 'Plex Arabic', 'Geist', ui-sans-serif, system-ui, sans-serif; }
[lang='ar'] body { font-size: calc(var(--step-0) * 1.04); line-height: 1.8; }
[lang='ar'] .h1, [lang='ar'] h1 { line-height: 1.2; }

/* ---------------------------------------------------------------- headings */

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
[lang='ar'] :is(h1, h2, h3, h4, .h1, .h2, .h3, .h4) { letter-spacing: 0; line-height: 1.35; }

.h1, h1 { font-size: var(--step-6); }
.h2, h2 { font-size: var(--step-4); }
.h3, h3 { font-size: var(--step-2); letter-spacing: -0.018em; }
.h4, h4 { font-size: var(--step-1); letter-spacing: -0.012em; }

.display { font-size: var(--step-7); letter-spacing: -0.036em; line-height: 1.02; }
[lang='ar'] .display { letter-spacing: 0; line-height: 1.28; }

.lead {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--fg-2);
  text-wrap: pretty;
}
[lang='ar'] .lead { line-height: 1.8; }

p { text-wrap: pretty; }
.muted { color: var(--fg-2); }
.quiet { color: var(--fg-3); }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- eyebrow */
/* The one recurring "label" device on the site. A rule, not a pill-badge. */

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-block-end: var(--sp-5);
}
[lang='ar'] .eyebrow { letter-spacing: 0; text-transform: none; font-weight: 700; }
.eyebrow::before {
  content: '';
  inline-size: var(--sp-6);
  block-size: 1px;
  background: var(--accent);
  flex: none;
}
.eyebrow--center { justify-content: center; }

/* ----------------------------------------------------------------- layout */

.wrap {
  inline-size: min(100% - 2 * var(--sp-5), var(--wrap));
  margin-inline: auto;
}
@media (min-width: 60rem) { .wrap { inline-size: min(100% - 2 * var(--sp-9), var(--wrap)); } }

.wrap--tight { inline-size: min(100% - 2 * var(--sp-5), var(--wrap-tight)); }
.measure { max-inline-size: var(--measure); }
.measure--short { max-inline-size: 46ch; }

.section { padding-block: var(--sp-9); }
.section--tight { padding-block: var(--sp-8); }
.section--loose { padding-block: var(--sp-11); }
.section--sunken { background: var(--ink-800); }
@media (min-width: 60rem) {
  .section { padding-block: var(--sp-11); }
  .section--tight { padding-block: var(--sp-9); }
  .section--loose { padding-block: var(--sp-13); }
}

.rule { block-size: 1px; background: var(--line); border: 0; }

/* The heading + supporting-line pair that opens most sections. The heading
   gets the wider column; the supporting line sits on its final baseline. */
.section-head { display: grid; gap: var(--sp-5) var(--sp-9); }
@media (min-width: 56rem) {
  .section-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
}
/* Only narrow the heading when there is a supporting column beside it —
   a lone heading gets the full 7fr track. */
.section-head:has(> :nth-child(2)) > :first-child { max-inline-size: 30ch; }
[lang='ar'] .section-head:has(> :nth-child(2)) > :first-child { max-inline-size: 34ch; }

.stack > * + * { margin-block-start: var(--flow, var(--sp-5)); }
.stack--tight { --flow: var(--sp-3); }
.stack--loose { --flow: var(--sp-7); }

.cols {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}
.cols--2 { grid-template-columns: 1fr; gap: var(--sp-8); }
@media (min-width: 56rem) {
  .cols--2 { grid-template-columns: repeat(2, 1fr); gap: var(--sp-9); }
  .cols--split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

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

/* `--btn-on-accent` carries the theme difference instead of a
   `:root[data-theme] .btn` rule, which would out-specify the .btn--quiet and
   .btn--ghost modifiers and paint their labels white on a white page. */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--btn-on-accent);
  --btn-line: transparent;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.78em 1.5em;
  border: 1px solid var(--btn-line);
  border-radius: var(--r-full);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast),
              transform 0.24s var(--ease-spring), box-shadow var(--t);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--quiet {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-line: var(--line-2);
}
.btn--quiet:hover { --btn-line: var(--accent); --btn-fg: var(--accent); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--fg); --btn-line: transparent; padding-inline: 0.25em; }
.btn--ghost:hover { --btn-fg: var(--accent); }

.btn__arrow { flex: none; transition: transform 0.32s var(--ease-spring); }
.btn:hover .btn__arrow { transform: translateX(0.25rem); }
[dir='rtl'] .btn:hover .btn__arrow { transform: translateX(-0.25rem); }
[dir='rtl'] .btn__arrow { transform: scaleX(-1); }
.btn:hover .btn__arrow { transform: translateX(3px); }
[dir='rtl'] .btn:hover .btn__arrow { transform: scaleX(-1) translateX(3px); }

/* text link that behaves like a link */
.tlink {
  color: var(--accent);
  text-decoration: none;
  text-underline-offset: 0.25em;
  border-block-end: 1px solid var(--accent-line);
  transition: border-color var(--t-fast);
}
.tlink:hover { border-block-end-color: currentColor; }

/* ------------------------------------------------------------------- focus */
/* Visible on every interactive element, in both themes. Non-negotiable. */

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

.skip {
  position: absolute;
  inset-block-start: var(--sp-3);
  inset-inline-start: var(--sp-3);
  z-index: 100;
  padding: var(--sp-3) var(--sp-5);
  background: var(--accent);
  color: var(--ink-900);
  border-radius: var(--r-sm);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--t-fast);
}
.skip:focus { transform: translateY(0); }

.vh {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------------ figure */

.figure { margin: 0; }
.figure img {
  inline-size: 100%;
  border-radius: var(--r-md);
  background: var(--ink-700);
  object-fit: cover;
}
.figure figcaption {
  margin-block-start: var(--sp-3);
  font-size: var(--step--1);
  color: var(--fg-3);
  max-inline-size: 52ch;
}
.figure--flush img { border-radius: 0; }
.figure--tall img { aspect-ratio: 4 / 5; }
.figure--wide img { aspect-ratio: 16 / 9; }
.figure--square img { aspect-ratio: 1; }

/* ---------------------------------------------------------------- spec list */
/* Replaces the icon-card grid the constitution bans. Content carries itself. */

.spec { display: grid; gap: 0; }
.spec > div {
  display: grid;
  gap: var(--sp-2) var(--sp-6);
  padding-block: var(--sp-6);
  border-block-start: 1px solid var(--line);
}
.spec > div:last-child { border-block-end: 1px solid var(--line); }
@media (min-width: 48rem) {
  .spec > div { grid-template-columns: 2.5rem minmax(0, 18rem) minmax(0, 1fr); align-items: start; }
}
.spec__n {
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  font-weight: 500;
  padding-block-start: 0.35em;
}
.spec__t { font-size: var(--step-1); font-weight: 500; letter-spacing: -0.015em; }
[lang='ar'] .spec__t { letter-spacing: 0; }
.spec__d { color: var(--fg-2); }

/* ---------------------------------------------------------------------- faq */
/* Native <details>. No JavaScript, keyboard-operable for free. */

.faq { border-block-start: 1px solid var(--line); }
.faq > details { border-block-end: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: -0.015em;
  cursor: pointer;
  list-style: none;
  transition: color var(--t-fast);
}
[lang='ar'] .faq summary { letter-spacing: 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary::after {
  content: '';
  margin-inline-start: auto;
  flex: none;
  inline-size: 0.7em; block-size: 0.7em;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--t-fast);
  align-self: center;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq__a { padding-block-end: var(--sp-6); color: var(--fg-2); max-inline-size: var(--measure); }

/* -------------------------------------------------------------------- pill */

.pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pill {
  display: inline-flex;
  align-items: center;
  padding: 0.35em 0.85em;
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
  font-size: var(--step--1);
  color: var(--fg-2);
  white-space: nowrap;
}
.pill--accent { border-color: var(--accent-line); color: var(--accent); }

/* ------------------------------------------------------------------- card */

.card {
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink-800);
}

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

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--ink-900) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-block-end: 1px solid transparent;
  transition: border-color var(--t), background var(--t);
}
.site-header[data-scrolled] { border-block-end-color: var(--line); }
/* an open mobile panel must be readable over whatever is behind it */
.site-header[data-menu] { background: var(--ink-900); backdrop-filter: none; }
@supports not (backdrop-filter: blur(1px)) { .site-header { background: var(--ink-900); } }

.header__bar {
  block-size: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: var(--fg);
  flex: none;
}
.brand svg { block-size: 1.85rem; inline-size: auto; }
.brand__name { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.03em; }

/* The BAIT wordmark is set spaced — B A I T — matching the app splash screen.
   Done with letter-spacing, not literal spaces, so assistive tech and search
   still read a single word. The trailing space compensates for the space CSS
   adds after the final letter, keeping the glyphs optically centred. */
/* The wordmark is spaced wherever the name is rendered — B A I T, never BAIT.
   Weight is deliberately NOT set here: inside a sentence the name should carry
   the weight of the sentence, or every prose mention would come out bold. The
   nav and the product heading assert their own weight below. */
.wordmark-bait { letter-spacing: 0.3em; padding-inline-end: 0.3em; }
.nav__link .wordmark-bait,
.mnav__link .wordmark-bait { font-weight: 700; }
[lang='ar'] .brand__name { letter-spacing: -0.03em; }

.nav { display: none; margin-inline-start: auto; align-items: center; gap: var(--sp-2); }
@media (min-width: 60rem) { .nav { display: flex; } }
.nav__link {
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-full);
  color: var(--fg-2);
  font-size: var(--step-0);
  text-decoration: none;
  transition: color var(--t-fast), background var(--t-fast);
}
.nav__link:hover { color: var(--fg); background: var(--ink-700); }
.nav__link[aria-current='page'] { color: var(--fg); }
.nav__link--cta {
  margin-inline-start: var(--sp-3);
  border: 1px solid var(--line-2);
  color: var(--fg);
}
.nav__link--cta:hover { border-color: var(--accent); color: var(--accent); background: none; }

.header__tools { display: flex; align-items: center; gap: var(--sp-1); margin-inline-start: auto; }
@media (min-width: 60rem) { .header__tools { margin-inline-start: var(--sp-3); } }

.iconbtn {
  display: grid;
  place-items: center;
  inline-size: 2.5rem; block-size: 2.5rem;
  border-radius: var(--r-full);
  color: var(--fg-2);
  transition: color var(--t-fast), background var(--t-fast);
}
.iconbtn:hover { color: var(--fg); background: var(--ink-700); }
.iconbtn svg { inline-size: 1.15rem; block-size: 1.15rem; }

.langbtn {
  padding-inline: var(--sp-4);
  inline-size: auto;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
}
.burger { display: grid; }
@media (min-width: 60rem) { .burger { display: none; } }

/* mobile nav — a plain panel, not an animated overlay */
.mnav {
  display: none;
  padding-block: var(--sp-4) var(--sp-7);
  border-block-start: 1px solid var(--line);
}
.mnav[data-open] { display: block; }
@media (min-width: 60rem) { .mnav[data-open] { display: none; } }
.mnav__link {
  display: block;
  padding-block: var(--sp-4);
  border-block-end: 1px solid var(--line);
  color: var(--fg);
  font-size: var(--step-2);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-decoration: none;
}
[lang='ar'] .mnav__link { letter-spacing: 0; }
.mnav__link[aria-current='page'] { color: var(--accent); }

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

.site-footer {
  padding-block: var(--sp-10) var(--sp-7);
  border-block-start: 1px solid var(--line);
  background: var(--ink-800);
}
.footer__grid {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-9); } }
.footer__h {
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-block-end: var(--sp-4);
}
[lang='ar'] .footer__h { letter-spacing: 0; text-transform: none; }
/* Tap targets: the link text is ~19px tall, which clears WCAG 2.2 SC 2.5.8 only
   via the spacing exception. Padding the anchor to ~44px gives a comfortable
   thumb target; the gap is reduced by the same amount so the visual rhythm of
   the list is unchanged. */
.footer__list { list-style: none; padding: 0; display: grid; gap: 0; }
.footer__list a {
  display: block;
  padding-block: 0.6rem;
  color: var(--fg-2);
  text-decoration: none;
  transition: color var(--t-fast);
}
.footer__list a:hover { color: var(--accent); }
/* Social rows carry their brand mark. flex rather than an inline icon so the
   glyph never wraps away from its label, and gap is logical so the icon leads
   the text in both directions. */
.footer__list a.social { display: flex; align-items: center; gap: 0.6rem; }
.social__ico {
  inline-size: 1.05rem;
  block-size: 1.05rem;
  flex: none;
  opacity: 0.72;
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.footer__list a.social:hover .social__ico { opacity: 1; transform: scale(1.08); }
/* the language link in the footer base was 23px tall — one pixel short */
.footer__base .tlink { display: inline-block; padding-block: var(--sp-1); }
.footer__base {
  margin-block-start: var(--sp-8);
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
  align-items: center;
  font-size: var(--step--1);
  color: var(--fg-3);
}

/* ------------------------------------------------------------------ motion */
/* Reveal only. Motion communicates arrival of content and nothing else. */

/* Content is visible by default. The hidden state is opt-in, applied by
   site.js only once it has confirmed IntersectionObserver is actually firing.
   A broken observer therefore degrades to "no animation", never to a blank
   page — the failure mode that matters. */
.reveal {
  transition: opacity var(--t-glide), transform var(--t-glide);
  transition-delay: var(--reveal-delay, 0ms);
}
/* A touch of scale as well as lift: content resolves toward the reader rather
   than merely sliding up, which is what reads as depth. */
html.reveal-ready .reveal:not(.is-in) { opacity: 0; transform: translateY(14px) scale(0.988); }

/* --------------------------------------------------------------- depth glow */
/* Coloured light behind a section, not a coloured fill on it. Sits under the
   content, screens in dark theme so it reads as emitted light, and is dialled
   right down in light theme where the same alpha would look like a stain. */
.section--sunken { position: relative; isolation: isolate; }
.section--sunken::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  /* Bounded on purpose. mix-blend-mode forces the whole layer into its own
     composited pass, and the cost scales with painted area: on a ~3000px
     section this measured 680ms of blocking time and 1230ms of style/layout,
     dropping Lighthouse performance from 99 to 82. The glow only ever reads in
     the first screenful anyway, so it is capped there. */
  block-size: min(100%, 46rem);
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60rem 28rem at 18% 0%, var(--glow-cyan), transparent 60%),
    radial-gradient(48rem 24rem at 88% 100%, var(--glow-warm), transparent 62%);
  mix-blend-mode: screen;
}
:root[data-theme='light'] .section--sunken::before {
  mix-blend-mode: multiply;
  background:
    radial-gradient(60rem 28rem at 18% 0%, rgb(99 202 223 / 0.10), transparent 60%),
    radial-gradient(48rem 24rem at 88% 100%, rgb(140 140 140 / 0.06), transparent 62%);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html.reveal-ready .reveal:not(.is-in) { opacity: 1; transform: none; }
}

/* --------------------------------------------------- the BAIT wordmark in AR */
/* Arabic headings and nav links zero their letter-spacing above, because
   spacing breaks Arabic letter joining. BAIT is a Latin wordmark and must stay
   spaced in both languages — but those resets are [lang='ar'] + class, so they
   out-specify a bare .wordmark-bait. Restated here, last, to win on order. */
[lang='ar'] .wordmark-bait,
[lang='ar'] .wordmark-bait bdi {
  letter-spacing: 0.3em;
  padding-inline-end: 0.3em;
  font-weight: 700;
}

/* ------------------------------------------------------ floating quick chat */
/* WhatsApp is the channel these clients actually use, so this is a conversion
   path, not decoration — it earns the right to be the one loud element here.
   Brand green because recognition IS the feature: a cyan circle would be
   on-palette and unrecognisable.

   Placed with logical inset, so it sits bottom-end in both directions without
   an RTL override. */
.wa {
  position: fixed;
  z-index: 60;                       /* above content, below the mobile nav (100) */
  inset-block-end: clamp(1rem, 3vw, 1.75rem);
  inset-inline-end: clamp(1rem, 3vw, 1.75rem);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-block-size: 3.5rem;            /* 56px — comfortably past the 44px minimum */
  padding-inline: 1.15rem;
  border-radius: var(--r-full);
  background: #25D366;
  color: #06281A;                    /* 8.9:1 on the green — not white, which fails */
  text-decoration: none;
  font-weight: 500;
  font-size: var(--step--1);
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.18), 0 12px 32px -8px rgb(37 211 102 / 0.45);
  transition: transform 0.28s var(--ease-spring), box-shadow var(--t), background var(--t-fast);
}
.wa:hover,
.wa:focus-visible {
  background: #1FBE59;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgb(0 0 0 / 0.22), 0 16px 40px -8px rgb(37 211 102 / 0.55);
}
.wa__ico { inline-size: 1.5rem; block-size: 1.5rem; flex: none; }

/* The label is the affordance on desktop and noise on a phone, where the mark
   alone is universally understood and screen width is scarce. Hidden visually
   below 48rem, never hidden from assistive tech — aria-label carries it. */
.wa__label { white-space: nowrap; }
@media (max-width: 48rem) {
  .wa { gap: 0; padding-inline: 0; inline-size: 3.5rem; justify-content: center; }
  .wa__label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
               clip-path: inset(50%); white-space: nowrap; }
}

/* On the contact page the whole point of the page is the channels list, so a
   floating duplicate is clutter. */
.is-contact .wa { display: none; }

@media (prefers-reduced-motion: reduce) {
  .wa { transition: background var(--t-fast); }
  .wa:hover, .wa:focus-visible { transform: none; }
}

/* ----------------------------------------------------------- BAIT app icon */
/* The real app icon, not a monochrome reduction of it: BAIT is the client's own
   product, so it earns its actual colours where the third-party toolmarks stay
   line-art. The tile keeps its brand fill in both themes — inverting it to white
   on dark would be louder and less faithful — and a hairline stops it dissolving
   into the dark background, which is nearly the same value. */
.bait-mark {
  --bait-tile: #17150d;
  --bait-gold: #e0b154;
  display: block;
  inline-size: var(--bait-size, 4.5rem);
  block-size: var(--bait-size, 4.5rem);
  flex: none;
  border-radius: 23%;
  box-shadow: inset 0 0 0 1px rgb(224 177 84 / 0.22), var(--shadow);
}
.bait-mark__tile { fill: var(--bait-tile); }
.bait-mark__glyph { fill: var(--bait-gold); }

/* the product page leads with it, so it is allowed to be larger there */
.page-head .bait-mark { --bait-size: 5.5rem; margin-block-end: var(--sp-5); }
/* on the home band it introduces the product rather than titling a page */
.product .bait-mark { --bait-size: 3.25rem; margin-block-end: var(--sp-4); }

/* ------------------------------------------------------------- app stores */
.stores { margin-block-start: var(--sp-6); }
.stores__row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: 0; }
.store__btn { display: inline-flex; align-items: center; gap: 0.55rem; }
.store__ico { inline-size: 1.15rem; block-size: 1.15rem; flex: none; }
.stores__note {
  margin-block-start: var(--sp-3);
  color: var(--fg-3);
  font-size: var(--step--1);
  max-inline-size: 46ch;
}