/* ==========================================================================
   upgradiq.com/agency — design system
   Editorial luxury, light canvas, deep emerald accent.
   Written entirely in CSS logical properties so one stylesheet serves
   Arabic RTL and English LTR without a single directional override.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Typeface — IBM Plex Sans Arabic, self-hosted, subset by unicode-range
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Plex';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plex-latin-400.woff2') format('woff2');
  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';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plex-latin-500.woff2') format('woff2');
  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';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/plex-latin-600.woff2') format('woff2');
  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';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/plex-latin-700.woff2') format('woff2');
  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';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plex-arabic-400.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Plex';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plex-arabic-500.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Plex';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/plex-arabic-600.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Plex';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/plex-arabic-700.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Canvas — warm off-white, never pure #fff at page level */
  --canvas: #fbfaf8;
  --canvas-deep: #f4f2ee;
  --surface: #ffffff;
  --surface-ink: #12161a;

  /* Ink */
  --ink: #12161a;
  --ink-soft: #4c5560;
  --ink-mute: #77818d;
  --ink-invert: #fbfaf8;

  /* Accent — deep emerald */
  --accent: #0b6e4f;
  --accent-deep: #085740;
  --accent-tint: #edf5f1;
  --accent-line: rgba(11, 110, 79, 0.18);

  /* Hairlines — never a flat grey border */
  --line: rgba(18, 22, 26, 0.08);
  --line-soft: rgba(18, 22, 26, 0.05);
  --line-strong: rgba(18, 22, 26, 0.14);
  --line-invert: rgba(255, 255, 255, 0.12);

  /* Diffused ambient shadows */
  --shadow-sm: 0 1px 2px rgba(18, 22, 26, 0.035), 0 4px 12px -6px rgba(18, 22, 26, 0.06);
  --shadow-md: 0 1px 2px rgba(18, 22, 26, 0.04), 0 14px 34px -14px rgba(18, 22, 26, 0.12);
  --shadow-lg: 0 2px 4px rgba(18, 22, 26, 0.03), 0 32px 64px -28px rgba(18, 22, 26, 0.16);
  --inner-lift: inset 0 1px 0 rgba(255, 255, 255, 0.9);

  /* Radii — exaggerated squircles, concentric when nested */
  --r-xl: 2rem;
  --r-lg: 1.5rem;
  --r-md: 1rem;
  --r-sm: 0.625rem;
  --r-pill: 999px;
  --bezel: 0.375rem;

  /* Rhythm */
  --gutter: 1.5rem;
  --measure: 76rem;
  --measure-text: 44rem;
  --section-y: clamp(3.25rem, 1.6rem + 6.2vw, 9rem);
  --block-y: clamp(2.25rem, 1.4rem + 3vw, 4.5rem);

  /* Type */
  --font: 'Plex', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  --t-display: clamp(2.1rem, 1.36rem + 3.2vw, 4.05rem);
  --t-h1: clamp(2.2rem, 1.5rem + 2.9vw, 3.5rem);
  --t-h2: clamp(1.7rem, 1.32rem + 1.6vw, 2.4rem);
  --t-h3: clamp(1.2rem, 1.09rem + 0.48vw, 1.45rem);
  --t-lede: clamp(1.075rem, 1.01rem + 0.3vw, 1.24rem);
  --t-body: 1.0313rem;
  --t-sm: 0.9063rem;
  --t-xs: 0.8125rem;
  --t-eyebrow: 0.6875rem;
  --lh-tight: 1.1;
  --lh-head: 1.16;
  --lh-body: 1.68;
  --track-tight: -0.022em;
  --track-eyebrow: 0.18em;

  /* Motion — spring-weighted, never linear or ease-in-out */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.62s;
  --dur-fast: 0.34s;

  /* Layers */
  --z-nav: 60;
  --z-panel: 70;
  --z-grain: 90;
}

/* Arabic sits optically smaller than Latin at the same px and needs more leading. */
[dir='rtl'] {
  --t-body: 1.0938rem;
  --t-sm: 0.9688rem;
  --t-xs: 0.8438rem;
  --t-eyebrow: 0.75rem;
  --lh-body: 1.92;
  --lh-head: 1.34;
  --lh-tight: 1.28;
  --track-tight: 0;
  --track-eyebrow: 0.08em;
}

/* --------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: 6rem;
}

body {
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1;
  overflow-x: hidden;
}

img,
svg,
video {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

h1,
h2,
h3,
h4 {
  font-weight: 600;
  line-height: var(--lh-head);
  letter-spacing: var(--track-tight);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

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

::selection {
  background: var(--accent);
  color: var(--ink-invert);
}

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

/* --------------------------------------------------------------------------
   4. Film grain — fixed, pointer-events none, never on a scrolling container
   -------------------------------------------------------------------------- */

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   5. Layout primitives
   -------------------------------------------------------------------------- */

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

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

.section {
  padding-block: var(--section-y);
}

.section--tight {
  padding-block: var(--block-y);
}

.section--tinted {
  background: var(--canvas-deep);
}

.skip-link {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: 1rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--ink-invert);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 500;
}

.skip-link:focus {
  inset-block-start: 1rem;
}

/* --------------------------------------------------------------------------
   6. Type helpers
   -------------------------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.85rem;
  border-radius: var(--r-pill);
  background: var(--accent-tint);
  border: 1px solid var(--accent-line);
  color: var(--accent-deep);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}

[dir='rtl'] .eyebrow {
  text-transform: none;
}

.eyebrow::before {
  content: '';
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.display {
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  font-weight: 600;
  letter-spacing: var(--track-tight);
}

.h1 {
  font-size: var(--t-h1);
}
.h2 {
  font-size: var(--t-h2);
}
.h3 {
  font-size: var(--t-h3);
}

.lede {
  font-size: var(--t-lede);
  line-height: 1.62;
  color: var(--ink-soft);
  max-inline-size: var(--measure-text);
  /* Short intro paragraphs balance cleanly; pretty alone still strands the last
     line on three-line ledes. Chrome falls back to normal past its line limit,
     which is what we want for the longer prose in split blocks. */
  text-wrap: balance;
}

[dir='rtl'] .lede {
  line-height: 1.88;
}

.muted {
  color: var(--ink-soft);
}

.section-head {
  max-inline-size: 46rem;
  margin-block-end: clamp(1.75rem, 1.2rem + 2.2vw, 4rem);
}

.section-head .eyebrow {
  margin-block-end: 1.25rem;
}

/* :not(.eyebrow) matters: the eyebrow is also a <p> here, and a bare
   `.section-head p` outranks `.eyebrow` and would resize the pill. */
.section-head p:not(.eyebrow) {
  margin-block-start: 1.1rem;
  color: var(--ink-soft);
  font-size: var(--t-lede);
  line-height: 1.6;
  /* A subline must never run wider than the heading it sits under. The percentage
     keeps that true on a narrow column, where the heading cannot fill the measure. */
  max-inline-size: min(40rem, 75%);
  text-wrap: balance;
}

[dir='rtl'] .section-head p:not(.eyebrow) {
  line-height: 1.85;
}

/* --------------------------------------------------------------------------
   7. Buttons — pill, nested trailing icon, physical press
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding-block: 0.7rem;
  padding-inline: 1.5rem 0.5rem;
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.btn__icon {
  inline-size: 2rem;
  block-size: 2rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: transform var(--dur) var(--ease), background var(--dur-fast) var(--ease);
}

.btn__icon svg {
  inline-size: 0.875rem;
  block-size: 0.875rem;
}

/* The arrow points along the reading direction in both scripts. */
[dir='rtl'] .btn__icon svg {
  transform: scaleX(-1);
}

.btn--primary {
  background: var(--ink);
  color: var(--ink-invert);
  box-shadow: var(--shadow-md);
}

.btn--primary .btn__icon {
  background: rgba(255, 255, 255, 0.14);
}

.btn--primary:hover {
  background: var(--accent-deep);
}

.btn--primary:hover .btn__icon {
  transform: translateX(3px) translateY(-1px) scale(1.06);
  background: rgba(255, 255, 255, 0.22);
}

[dir='rtl'] .btn--primary:hover .btn__icon {
  transform: translateX(-3px) translateY(-1px) scale(1.06);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.btn--ghost .btn__icon {
  background: rgba(18, 22, 26, 0.05);
}

.btn--ghost:hover {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-sm);
}

.btn--ghost:hover .btn__icon {
  transform: translateX(3px) translateY(-1px) scale(1.06);
}

[dir='rtl'] .btn--ghost:hover .btn__icon {
  transform: translateX(-3px) translateY(-1px) scale(1.06);
}

.btn--onDark {
  background: var(--surface);
  color: var(--ink);
}

.btn--onDark .btn__icon {
  background: rgba(18, 22, 26, 0.07);
}

.btn--onDark:hover .btn__icon {
  transform: translateX(3px) translateY(-1px) scale(1.06);
}

[dir='rtl'] .btn--onDark:hover .btn__icon {
  transform: translateX(-3px) translateY(-1px) scale(1.06);
}

.btn:active {
  transform: scale(0.978);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* Quiet inline text link with a reading-direction arrow */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--accent-deep);
  white-space: nowrap;
}

.tlink svg {
  inline-size: 0.75rem;
  block-size: 0.75rem;
  transition: transform var(--dur) var(--ease);
}

[dir='rtl'] .tlink svg {
  transform: scaleX(-1);
}

.tlink:hover svg {
  transform: translateX(4px);
}

[dir='rtl'] .tlink:hover svg {
  transform: scaleX(-1) translateX(4px);
}

/* --------------------------------------------------------------------------
   8. Double-bezel card — outer tray, inner plate, concentric radii
   -------------------------------------------------------------------------- */

.bezel {
  padding: var(--bezel);
  border-radius: var(--r-xl);
  background: rgba(18, 22, 26, 0.032);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
  block-size: 100%;
}

.bezel__core {
  block-size: 100%;
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 0.95rem + 1.1vw, 2rem);
  border-radius: calc(var(--r-xl) - var(--bezel));
  background: var(--surface);
  box-shadow: var(--inner-lift), var(--shadow-sm);
}

a.bezel:hover {
  background: var(--accent-tint);
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}

a.bezel:hover .bezel__core {
  box-shadow: var(--inner-lift), var(--shadow-md);
}

/* --------------------------------------------------------------------------
   9. Card content
   -------------------------------------------------------------------------- */

.card__icon {
  inline-size: clamp(2.25rem, 1.9rem + 1.4vw, 2.75rem);
  block-size: clamp(2.25rem, 1.9rem + 1.4vw, 2.75rem);
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--accent-tint);
  color: var(--accent-deep);
  margin-block-end: clamp(0.9rem, 0.6rem + 1.2vw, 1.35rem);
  flex: none;
}

.card__icon svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.card__title {
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.3;
  margin-block-end: 0.6rem;
  /* Card titles hold one line inside a grid. In a full-width card on a phone a
     longer one wraps, and when it does it must split evenly rather than drop a
     single word onto the second line. Overrides the mobile heading rule. */
  text-wrap: balance;
}

[dir='rtl'] .card__title {
  line-height: 1.45;
}

/* A four-up grid gives each card ~216px. Titles there need a step down so a
   two-word label still holds one line instead of folding. */
.grid--4 .card__title {
  font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem);
}

.card__body {
  font-size: var(--t-sm);
  color: var(--ink-soft);
  line-height: 1.62;
  margin-block-end: clamp(0.9rem, 0.6rem + 1.2vw, 1.35rem);
  /* Only bites when a card goes full width in single-column layouts, where an
     unbounded line would run past 90 characters and strand the last line. */
  max-inline-size: 58ch;
  text-wrap: balance;
}

[dir='rtl'] .card__body {
  line-height: 1.86;
}

.card__foot {
  margin-block-start: auto;
  padding-block-start: 0.25rem;
}

.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-block-end: clamp(0.9rem, 0.6rem + 1.2vw, 1.35rem);
}

.tag {
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--ink-soft);
  background: rgba(18, 22, 26, 0.045);
  padding: 0.25rem 0.65rem;
  border-radius: var(--r-pill);
  white-space: nowrap;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   10. Grids — equal heights, equal gaps, aggressive single-column collapse
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: 1rem;
  align-items: stretch;
}

.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Asymmetrical bento — first cell spans two columns on wide screens */
.grid--bento {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--bento > :first-child {
  grid-column: span 2;
}

@media (max-width: 1023px) {
  .grid--3,
  .grid--4,
  .grid--bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid--bento > :first-child {
    grid-column: span 2;
  }
}

/* Below 900 a two-up card is too narrow for a full phrase to stay on one line,
   so the wide card grids go single column while the short-copy steps stay two-up. */
@media (max-width: 899px) {
  .grid--2,
  .grid--3,
  .grid--bento {
    grid-template-columns: minmax(0, 1fr);
  }
  .grid--bento > :first-child {
    grid-column: span 1;
  }
}

@media (max-width: 480px) {
  /* Buy back horizontal room on a phone so headings hold their line count. */
  :root {
    --gutter: 1.125rem;
  }
}

@media (max-width: 767px) {
  .grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.875rem;
  }
  /* On a narrow column, balancing shrinks a heading below the subline under it.
     Let headings run the full measure instead. */
  h1,
  h2,
  h3,
  h4 {
    text-wrap: pretty;
  }
}

/* --------------------------------------------------------------------------
   11. Header — detached floating glass pill
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-nav);
  padding-block: 1rem;
  pointer-events: none;
}

.masthead__inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0.5rem 0.5rem 1.25rem;
  border-radius: var(--r-pill);
  background: rgba(251, 250, 248, 0.82);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm);
}

[dir='rtl'] .masthead__inner {
  padding: 0.5rem 1.25rem 0.5rem 0.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  flex: none;
}

/* dir="ltr" on the element itself handles the Latin lockup, so no CSS override
   is needed and the Arabic wordmark stays in the page's own direction. */
[dir='rtl'] .brand {
  font-size: 1.25rem;
  letter-spacing: 0;
}

.brand__dot {
  inline-size: 0.34em;
  block-size: 0.34em;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  margin-block-start: 0.15em;
}

.nav {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-inline-start: auto;
}

.nav__link {
  padding: 0.5rem 0.8rem;
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.nav__link:hover,
.nav__link[aria-current='page'] {
  color: var(--ink);
  background: rgba(18, 22, 26, 0.05);
}

.masthead .btn {
  flex: none;
}

.lang {
  padding: 0.45rem 0.85rem;
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-soft);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  white-space: nowrap;
  flex: none;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.lang:hover {
  color: var(--ink);
  background: var(--surface);
}

.burger {
  display: none;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  flex: none;
  place-items: center;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.burger span {
  display: block;
  inline-size: 1rem;
  block-size: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}

.burger span + span {
  margin-block-start: 4px;
}

body.nav-open .burger span:first-child {
  transform: translateY(2.75px) rotate(45deg);
}

body.nav-open .burger span:last-child {
  transform: translateY(-2.75px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   12. Mobile navigation overlay — staggered mask reveal
   -------------------------------------------------------------------------- */

.navpanel {
  position: fixed;
  inset: 0;
  z-index: var(--z-panel);
  display: none;
  padding-block: 6.5rem 3rem;
  overflow-y: auto;
  background: rgba(251, 250, 248, 0.92);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  backdrop-filter: blur(28px) saturate(1.6);
}

body.nav-open .navpanel {
  display: block;
}

.navpanel__group + .navpanel__group {
  margin-block-start: 2.25rem;
}

.navpanel__label {
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-block-end: 0.9rem;
}

[dir='rtl'] .navpanel__label {
  text-transform: none;
}

.navpanel__link {
  display: block;
  padding-block: 0.55rem;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: var(--track-tight);
  opacity: 0;
  transform: translateY(14px);
}

body.nav-open .navpanel__link {
  animation: reveal 0.7s var(--ease) forwards;
}

.navpanel__link:nth-child(1) {
  animation-delay: 0.04s;
}
.navpanel__link:nth-child(2) {
  animation-delay: 0.08s;
}
.navpanel__link:nth-child(3) {
  animation-delay: 0.12s;
}
.navpanel__link:nth-child(4) {
  animation-delay: 0.16s;
}
.navpanel__link:nth-child(5) {
  animation-delay: 0.2s;
}
.navpanel__link:nth-child(6) {
  animation-delay: 0.24s;
}
.navpanel__link:nth-child(7) {
  animation-delay: 0.28s;
}
.navpanel__link:nth-child(8) {
  animation-delay: 0.32s;
}

@keyframes reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 940px) {
  .nav {
    display: none;
  }
  .burger {
    display: grid;
    margin-inline-start: auto;
  }
  .masthead .btn--primary {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   13. Hero — editorial split
   -------------------------------------------------------------------------- */

.hero {
  padding-block: clamp(2rem, 1rem + 4.5vw, 6rem) clamp(2.25rem, 1.2rem + 3.6vw, 5rem);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset-block-start: -30%;
  inset-inline-end: -10%;
  inline-size: 46rem;
  block-size: 46rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(11, 110, 79, 0.09), transparent 62%);
  pointer-events: none;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
  position: relative;
}

.hero__title {
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  margin-block: clamp(0.9rem, 0.6rem + 1.2vw, 1.5rem) clamp(0.9rem, 0.6rem + 1.2vw, 1.5rem);
}

.hero__lede {
  font-size: var(--t-lede);
  color: var(--ink-soft);
  line-height: 1.64;
  max-inline-size: 34rem;
  margin-block-end: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  text-wrap: balance;
}

[dir='rtl'] .hero__lede {
  line-height: 1.9;
}

.hero__note {
  margin-block-start: 1.5rem;
  font-size: var(--t-xs);
  color: var(--ink-mute);
}

/* Page hero for interior routes */
.pagehero {
  padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem) clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
}

.pagehero__title {
  font-size: var(--t-h1);
  margin-block: 1.25rem 1.25rem;
  max-inline-size: 22ch;
}

/* --------------------------------------------------------------------------
   14. Capability panel — the hero's right-hand plate
   -------------------------------------------------------------------------- */

.panel__row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-block: 0.85rem;
}

.panel__row + .panel__row {
  border-block-start: 1px solid var(--line-soft);
}

.panel__dot {
  inline-size: 1.75rem;
  block-size: 1.75rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-deep);
}

.panel__dot svg {
  inline-size: 0.8125rem;
  block-size: 0.8125rem;
}

.panel__text {
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.45;
  min-inline-size: 0;
  /* One line where it fits; where it cannot, two even lines rather than a
     stranded final word. */
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   15. Marquee strip of named integrations
   -------------------------------------------------------------------------- */

.strip {
  padding-block: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  border-block: 1px solid var(--line);
  background: var(--surface);
}

.strip__label {
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-block-end: 1.5rem;
}

[dir='rtl'] .strip__label {
  text-transform: none;
}

/* Four categories side by side on a wide screen, two up on a phone. Each stays
   a tidy block instead of one ragged run of pills wrapping across five rows. */
.strip__groups {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem 1.75rem;
}

@media (max-width: 900px) {
  .strip__groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.strip__cat {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink);
  margin-block-end: 0.7rem;
  padding-block-end: 0.55rem;
  border-block-end: 1px solid var(--line);
}

.strip__items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
}

.strip__item {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-soft);
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-sm);
  background: rgba(18, 22, 26, 0.04);
  white-space: nowrap;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   16. Numbered steps
   -------------------------------------------------------------------------- */

.steps {
  counter-reset: step;
  display: grid;
  gap: 1rem;
}

.step__num {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--ink-invert);
  font-size: var(--t-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-block-end: 1.25rem;
}

/* --------------------------------------------------------------------------
   17. FAQ — native disclosure, explicit +/- control, no chevron dots
   -------------------------------------------------------------------------- */

.faq {
  display: grid;
  gap: 0.625rem;
}

.faq__item {
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm);
  overflow: hidden;
}

.faq__q {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  font-size: var(--t-body);
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
  text-wrap: balance;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__sign {
  inline-size: 1.75rem;
  block-size: 1.75rem;
  flex: none;
  margin-inline-start: auto;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  position: relative;
}

.faq__sign::before,
.faq__sign::after {
  content: '';
  position: absolute;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}

.faq__sign::before {
  inline-size: 0.6875rem;
  block-size: 1.5px;
}

.faq__sign::after {
  inline-size: 1.5px;
  block-size: 0.6875rem;
}

.faq__item[open] .faq__sign::after {
  transform: rotate(90deg);
  opacity: 0;
}

.faq__a {
  padding: 0 1.5rem 1.5rem;
  font-size: var(--t-sm);
  color: var(--ink-soft);
  line-height: 1.68;
  max-inline-size: 60ch;
  /* This is a div, not a p, so it inherits none of the global paragraph wrapping.
     Answers are short enough to balance, which is what stops a four-line answer
     in a narrow column from ending on a stranded couple of words. */
  text-wrap: balance;
}

[dir='rtl'] .faq__a {
  line-height: 1.9;
}

/* --------------------------------------------------------------------------
   18. Checklist
   -------------------------------------------------------------------------- */

.checklist {
  display: grid;
  gap: 0.75rem;
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--ink-soft);
}

.checklist li > span {
  text-wrap: balance;
}

[dir='rtl'] .checklist li {
  line-height: 1.8;
}

.checklist svg {
  inline-size: 1.0625rem;
  block-size: 1.0625rem;
  flex: none;
  margin-block-start: 0.22em;
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   19. CTA band
   -------------------------------------------------------------------------- */

.cta {
  position: relative;
  overflow: hidden;
  padding: clamp(2.75rem, 2rem + 3.5vw, 4.5rem);
  border-radius: var(--r-xl);
  background: var(--surface-ink);
  color: var(--ink-invert);
}

.cta::before {
  content: '';
  position: absolute;
  inset-block-end: -55%;
  inset-inline-start: -12%;
  inline-size: 34rem;
  block-size: 34rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(11, 110, 79, 0.42), transparent 62%);
  pointer-events: none;
}

.cta__inner {
  position: relative;
  max-inline-size: 40rem;
}

.cta .eyebrow {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--line-invert);
  color: #9fdcc4;
}

.cta__title {
  font-size: var(--t-h2);
  margin-block: 1.25rem 1rem;
}

.cta__text {
  color: rgba(251, 250, 248, 0.68);
  font-size: var(--t-lede);
  line-height: 1.62;
  margin-block-end: 2rem;
}

[dir='rtl'] .cta__text {
  line-height: 1.86;
}

/* --------------------------------------------------------------------------
   20. Breadcrumb
   -------------------------------------------------------------------------- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--t-xs);
  color: var(--ink-mute);
  padding-block-start: 1.75rem;
}

.crumbs a:hover {
  color: var(--ink);
}

.crumbs__sep {
  opacity: 0.45;
}

[dir='rtl'] .crumbs__sep {
  transform: scaleX(-1);
  display: inline-block;
}

.crumbs [aria-current='page'] {
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   21. Footer
   -------------------------------------------------------------------------- */

.foot {
  background: var(--surface-ink);
  color: var(--ink-invert);
  padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem) 2.25rem;
}

.foot__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  padding-block-end: 3rem;
  border-block-end: 1px solid var(--line-invert);
}

.foot__blurb {
  font-size: var(--t-sm);
  color: rgba(251, 250, 248, 0.6);
  line-height: 1.68;
  margin-block: 1rem 1.5rem;
  max-inline-size: 30ch;
}

[dir='rtl'] .foot__blurb {
  line-height: 1.9;
}

.foot .brand {
  color: var(--ink-invert);
}

.foot__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem 1.5rem;
}

.foot__label {
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: rgba(251, 250, 248, 0.42);
  margin-block-end: 1rem;
}

[dir='rtl'] .foot__label {
  text-transform: none;
}

.foot__list {
  display: grid;
  gap: 0.55rem;
}

.foot__list a {
  font-size: var(--t-sm);
  color: rgba(251, 250, 248, 0.66);
  line-height: 1.45;
  transition: color var(--dur-fast) var(--ease);
}

.foot__list a:hover {
  color: var(--ink-invert);
}

.foot__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding-block-start: 2.25rem;
  font-size: var(--t-xs);
  color: rgba(251, 250, 248, 0.42);
}

.foot__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-inline-start: auto;
}

.foot__legal a:hover {
  color: var(--ink-invert);
}

@media (max-width: 900px) {
  .foot__top {
    grid-template-columns: minmax(0, 1fr);
  }
  .foot__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The hero's side panel needs real width for its rows to hold one line each. */
@media (max-width: 1023px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .foot__legal {
    margin-inline-start: 0;
  }
  .foot {
    padding-block: clamp(2.5rem, 1.5rem + 4vw, 3.5rem) 1.75rem;
  }
  .foot__top {
    padding-block-end: 2rem;
    gap: 2rem;
  }
  .foot__cols {
    gap: 1.5rem 1rem;
  }
}

/* --------------------------------------------------------------------------
   21b. Route map — the generated HTML sitemap
   -------------------------------------------------------------------------- */

.routemap {
  display: grid;
  gap: 0.55rem;
  margin-block-start: 1.1rem;
}

.routemap a {
  font-size: var(--t-sm);
  color: var(--ink-soft);
  line-height: 1.45;
  transition: color var(--dur-fast) var(--ease);
}

.routemap a:hover {
  color: var(--accent-deep);
}

/* --------------------------------------------------------------------------
   21c. Illustrated bands
   -------------------------------------------------------------------------- */

.artband {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}

.artband--wide {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
}

/* The art leads on a phone: a reader scrolling past a wall of cards needs the
   picture to arrive before the argument, not after it. */
@media (max-width: 900px) {
  .artband {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }
  .artband__art {
    order: -1;
  }
}

.artband__art {
  margin: 0;
  position: relative;
}

.art {
  inline-size: 100%;
  block-size: auto;
  overflow: visible;
  /* Inside an RTL document, text-anchor start and end swap meaning, which threw
     every label in these drawings outside its own panel. The mirroring is done
     in the coordinates instead, so the SVG itself stays LTR. Arabic glyphs still
     shape and order correctly: bidi handles that independently of anchoring. */
  direction: ltr;
  filter: drop-shadow(0 24px 48px rgba(18, 22, 26, 0.13));
}

/* Browser and phone overlap slightly, the way a real device shot would sit. */
.artpair {
  position: relative;
  padding-block-end: 2.5rem;
  padding-inline-end: 3rem;
}

.artpair .art--browser {
  inline-size: 100%;
}

.artpair .art--phone {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  inline-size: 26%;
  filter: drop-shadow(0 18px 36px rgba(18, 22, 26, 0.22));
}

@media (max-width: 560px) {
  .artpair {
    padding-inline-end: 0;
    padding-block-end: 0;
  }
  .artpair .art--phone {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   22. Prose — legal and long-form pages
   -------------------------------------------------------------------------- */

.prose {
  /* Narrower than the general text measure on purpose: legal prose reads at
     roughly 78 characters a line here instead of 95, which is inside the
     comfortable range and leaves fewer stranded final lines. */
  max-inline-size: 36rem;
}

.prose h2 {
  font-size: var(--t-h3);
  margin-block: 2.5rem 0.85rem;
}

.prose p,
.prose li {
  color: var(--ink-soft);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}

.prose p + p {
  margin-block-start: 1.1rem;
}

.prose ul {
  display: grid;
  gap: 0.55rem;
  margin-block-start: 1rem;
}

.prose li {
  padding-inline-start: 1.1rem;
  position: relative;
}

.prose li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.72em;
  inline-size: 4px;
  block-size: 4px;
  border-radius: 50%;
  background: var(--accent);
}

/* --------------------------------------------------------------------------
   23. Scroll reveal — transform and opacity only
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s var(--ease-soft), transform 0.8s var(--ease);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* No JS: never leave content invisible. */
.no-js .reveal {
  opacity: 1;
  transform: none;
}